<p><a href="/works/miz">MiZ</a>のページを公開</p>

<p><a href="https://zenn.dev/kcabo/articles/e4ce17470e1375" target="_blank" rel="noopener noreferrer">【LINE Bot開発】Webhookの宛先をLocalhostにする</a>を公開</p>

<p>ポートフォリオサイトをリニューアルしました！</p>

<h2 id="h455bd2b66c">レース結果を紙で管理しない</h2><p>水泳のレース結果はスプリットシートと呼ばれる専用の紙に記録されるのが一般的です。その場合、マネージャーがラップタイム(一定距離ごとにかかった時間)を通過タイムから計算する必要があります。表計算ソフトで計算する部活もなかにはあるでしょうが、さらに効率よくレース結果を記録・フィードバックする仕組みがあるべきだと考えました。</p><h2 id="h7428de39c4">ウェブサイトではなく、「画像として返す」</h2><p>通過タイムを入力すればラップタイムを計算してくれるウェブサイトを作るのは容易です。しかし既存の業態(=マネージャーがシートにタイムを書き込み、選手に返す)を置き換えるには不十分だと考えました。あくまで「スプリットシートを電子的に作成してくれるアプリ」でないと浸透しないでしょう。そのため<strong><u>ポータブルで他人とのシェアがしやすい、画像での出力</u></strong>とすることにしました。</p><h2 id="hd80830849d">紙から置き換える価値のあるものにする</h2><p>当初は<a href="https://www.amazon.co.jp/MIZUNO-%E3%83%9F%E3%82%BA%E3%83%8E-%E3%82%B9%E3%82%A4%E3%83%A0%E3%82%B0%E3%83%83%E3%82%BA-%E3%82%B9%E3%83%94%E3%83%AA%E3%83%83%E3%83%88%E3%83%96%E3%83%83%E3%82%AF-85ZS75000/dp/B008MWCNJY" target="_blank" rel="noopener noreferrer">既存のスプリットシート</a>をそのまま再現したデザインにする予定でしたが、わざわざ<strong><u>紙から移行しようと思える付加価値</u></strong>をつけるべきだと考えました。最初に思いついたのはグラフの描画です。一定距離ごとのタイムの推移を折れ線グラフで表示する機能があれば、それこそデジタルでしか提供できない価値だと考えました。そして折れ線グラフをメインに、所有感が生まれるような、そして他人に自慢したくなるような「記録証」のデザインを作り上げました。</p><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/3a4d9b04ff1d40e7bb27c32f1275a8f1/sheet-design.png" alt="" width="1048" height="822"></p><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/01531ccf7e774f0baaa954bfdf3b6329/miz-sheet-200Fr.PNG" alt="" width="750" height="1096"></p><h2 id="h051019d366">LINEボットとして開発</h2><p>入力が文字列(タイムや種目名、大会名など)に対し、出力はその情報を載せた画像です。このI/Oのイメージに沿ったのが<a href="https://developers.line.biz/ja/docs/messaging-api/" target="_blank" rel="noopener noreferrer">LINEのボット</a>でした。<a href="/works/tim\">TiM</a>における開発経験もあること、さらにネイティブアプリへの関心が薄かったこと、導入の容易さ(インストールが不要で友だち追加するだけで利用可能)が主な採択理由です。しかしチャットボットという特質上、かなり単純な操作しか実現できないのが欠点です。</p><h2 id="h94d6774333">画像化を実現する技術</h2><p>Pythonの<a href="https://matplotlib.org/" target="_blank" rel="noopener noreferrer">matplotlib</a>のように、グラフを画像として出力するライブラリは十分に存在します。しかしグラフだけでなくその周辺のデザインにこだわりたいとき、これらのグラフ描画ライブラリでは力不足です。細部にこだわったデザインを作り上げたいとき、やはりやりなれた<strong><u>ブラウザにレンダリングを任せ、JSやCSSでシートを構築する</u></strong>のが筋がいいと感じました。そして以前<a href="/works/sheepfold">Sheepfold</a>で使用経験のあるPuppeteer(ヘッドレスブラウザ)を活用し、レンダリング後に画面をキャプチャすることで画像化が実現できると見込みました。ただし以下のような課題にぶつかり、PoCには多大な時間がかかりました。</p><ul><li>AWS Lambda上でのPuppeteer・Chromiumが起動しない</li><li>日本語フォントが表示されない</li><li>インターネットに接続せずにページを描画する戦略</li><li>動的なデータの描画が難しい=描画を担うJSに動的なデータを渡すにはどうすればよいか</li><li>JSの描画とキャプチャの同期</li></ul><p>これらの課題を乗り越え、<strong><u>「Lambda上でヘッドレスブラウザを起動し、動的なデータをもとに描画、キャプチャ結果をS3にアップロードする」</u></strong>サーバーレスアプリケーションを開発できました。現在プライベートリポジトリですがいずれ公開予定です。</p><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/fda6fbbe559e48718699a5f86d5ea8b3/colorful-sheet.png" alt="" width="1800" height="1600"></p><h2 id="h7371952e65">複数のリポジトリとサービス</h2><p>MiZはいくつかのサービスにより構成されています。より細かく責任を切り分け、それぞれをマイクロサービス化することも可能です。全てTypeScriptで書かれています。</p><h3 id="hf5a2af5ab4">MiZ</h3><ul><li>メインのサービス。Serverless Frameworkを活用</li><li>LINEサーバーを経由したユーザーメッセージの受け取り・認証</li><li>メッセージ内容をもとに実行内容の識別</li><li>DynamoDBに対するデータ操作</li><li>ユーザーに返信する</li></ul><blockquote>「SWIM」の各文字を上下逆にしたり鏡面反転させると「ZMIM」になる。ここから「水」を連想するサービス名としてMiZとした</blockquote><h3 id="h3d87682861">MiZ-LIFF</h3><p><a href="https://developers.line.biz/ja/docs/liff/" target="_blank" rel="noopener noreferrer">LINE Front-end Framework</a>アプリケーション。Next.jsを活用。LINEクライアントアプリ上で起動するウェブアプリ</p><ul><li>ユーザーの認証</li><li>DynamoDBに対するデータ操作</li></ul><h3 id="h361d7bfc5a">Paparazzo</h3><p>「画像化を実現する技術」で言及したサーバーレスアプリケーション。MiZとおなじくServerless Frameworkを活用しているが、MiZとビジネスロジックを共有していない。ビルド時に後述のWarabeを取り込む</p><ul><li>トリガー時に受け取ったJSONデータをヘッドレスブラウザに流す</li><li>キャプチャ結果をS3にアップロードする</li></ul><blockquote>Paparazzoはpaparazzi(パパラッチ・イタリア語)の単数形。「Puppeteerを使って写真を撮る」ことから思いついた</blockquote><h3 id="h497ea33a92">Warabe</h3><p>単一のHTMLファイルを吐き出すVite + Svelteアプリケーション。JSやCSSをインクルードした単一のHTMLファイルを生成する。</p><ul><li>PuppeteerのAPIからデータを受け取り、描画する</li></ul><blockquote>「童(わらべ)」は「GHOST IN THE SHELL / 攻殻機動隊」ラストシーンのセリフより。Svelteと語感が似ていることから</blockquote><h3 id="h0f3aac92c2">MiZ-Web</h3><p>公式ウェブサイト。他サービスとは完全に独立している。Next.js+Vercel</p><ul><li>マークダウン形式の利用規約のHTML化</li></ul><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/7447abbac2ce42ecb89c4adf4772003b/demo-chat.png" alt="" width="1800" height="1600"></p>

【一般公開中】水泳レース結果を一瞬で画像化するLINEボットです。

<h2 id="h9c8fa2d12c">開発の目的</h2><h3 id="hd33d882fb7">水泳データの活用の幅を広げる</h3><p>当時の日本水泳連盟公式サイトへの不満ともどかしさが発端でした。そちらのサイトでは大会ごとにまとまった記録は閲覧できますが、それぞれの選手が過去の他の大会で出した記録は検索できませんでした。また毎年更新されるランキングに掲載されるのは各都道府県1～50位までのみでした。全国全ての大会のレース結果がサイトには掲載されているわけですから、それらを整理すれば「各選手のタイムの推移・最近の調子」や「全国全選手のランキング」を作成することが可能だと考えました。</p><h3 id="h4429a411f2">全員、ランクイン。</h3><p>「水泳データの民主化」が一つのテーマでした。トップアスリート(専属のコーチがついていてタイムを詳細に分析してもらえる)でなくとも、データの恩恵を受けることができるはずだと考えました。自分より少し速い選手のタイムのデータは自分のレースの参考にできます。またベストタイムを出す度に「全国ランキングが〇〇位から〇〇位に上った」という感覚を得るのも新たなモチベーションの源になるでしょう。トップ50だけじゃなくよりオープンに、<strong><u>どんなレベルの選手も等しく水泳を楽しめるように</u></strong>という思いを込めて、「全員、ランクイン。」をサービスのキャッチコピーとしました。</p><h2 id="h03726fb0df">技術スタック</h2><p>先に開発した<a href="/works/tim">TiM</a>がベースになっており、PythonのWebフレームワークのFlaskを使用しています。ただJSONを返すTiMと異なりHTMLのページを返すためにJinja2を新たにとりいれています。データベースはホスティング先のHerokuの標準であるPostgreSQLを採用しています。PostgreSQLとの接続にはPythonのORMのSQLAlchemyを使用しました。こちらのライブラリは国内の情報が少なかったため、エラーの度に公式のドキュメントを頑張って読んでいました。またPostgreSQLとは別に、一部の計算結果をインメモリDBのRedisに保存するようにしてあります。</p><h2 id="h13b5e94729">サイト構成</h2><h3 id="h45117dd8bb">モバイルファースト</h3><p>ユーザーはほとんどがスマホで閲覧すると考えました。大会の会場や部活の帰り道などで選手の間で話題になることを想定していたためです。また多くの中高生は自宅でも同様にパソコンでなくスマホを触るでしょう。そのためどのページもスマホでの見た目を第一に考えて設計しています。</p><h3 id="hea3e46bed3">使い方が分かるサイトに</h3><p>サービスのコンセプトに自信があったので、使ってもらえさえすれば必ずユーザーに刺さると考えました。したがって初めてサイトに訪れた人にサイトの趣旨・使い方をいかに早く分かりやすく伝えるかを念頭にデザインしていました。(画像内の人名・団体名はダミーデータです)</p><h3 id="h8f2158e177">トップページ</h3><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/e8617a7550ae4b19bbffaee6cfe3e0bf/zero_top.png?w=800&amp;h=443" alt="トップページ" width="800" height="443"></p><p>ランキング閲覧や選手検索がすぐにできるようページ上部に配置しています。</p><h3 id="hbab3e3d897">ランキングページ</h3><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/87984dc604b4474697e56616c29c0e33/Ranking.PNG?w=600&amp;h=599" alt="ランキングページ" width="600" height="599"></p><p>ランキングページはデフォルトで(種目選択画面をはさまずに)長水路の50m自由形のランキングが表示されるようになっています。複雑な種目選択画面を見て離脱してしまうユーザーがいると思われたため、「とりあえず」サンプルのランキングを表示すべきだと考えたのです。</p><p>競泳競技の種目は細かく分類されています。それらを選択するUIをどう設計するかも課題でした。類似したサイトが海外を含めなかったため、独自に様々なUIのアイデアを作成し比較検討していました。アイコンや色、項目の並べ方について、かなりの時間をかけて試行錯誤していました。</p><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/fe4c986a786540cca668d39712fa8fe9/pick_event.png?w=472&amp;h=679" alt="種目選択モーダル" width="472" height="679"></p><h3 id="h3ba51f69ee">ダッシュボードページ</h3><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/634c5a8853c94457840f03d4ddb8aca7/zero_dashboard.png?w=600&amp;h=1078" alt="ダッシュボードページ" width="600" height="1078"></p><p>ダッシュボードページは数万人以上の全スイマーに対して動的に生成されます。ページ上部にはその選手のおおまかな傾向をつかめるような情報を、そしてスクロールしたページ下部にはより粒度の高い詳細な情報を配置するようにしています。</p><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/fc4e1302294a41dd8f9d7584d09d0220/Dashbord%E4%B8%AD%E7%9B%A4.PNG?w=843&amp;h=1000" alt="ダッシュボードページ下部" width="843" height="1000"></p><p>また、トップページからランキングを見て、誰かのダッシュボードページを見る、というサービスの動線を強く意識しながらデザインしています。初めてサイトに訪れたユーザーなら、これでサービスの概要がつかめるはずです。</p><h3 id="h1d880fafb0">検索ページ</h3><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/6318a6f36cdf40408e7066ba8f1693f5/Search.PNG?w=1043&amp;h=766" alt="検索ページ" width="1043" height="766"></p><p>選手名やチーム名を検索できます。DBにはインデックスを張っていましたがかなりコストの高い処理で、レスポンスに問題がありました。</p><h2 id="h1c7428c339">ロゴ</h2><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/083ea916bc8e44db8db5d9254d59ec4f/zero_logos.png?w=675&amp;h=515" alt="ロゴ" width="675" height="515"></p><p>ロゴはやはりPowerPointで作っていました。アップデートの度に作り直しています。フォントへの理解を深めました。</p><h2 id="h71471bf52c">パフォーマンス不足</h2><p>Twitterでサービスが少し話題になり、利用者が急激に増えました。その結果、集中したアクセスをさばききれなくなりました。同時接続者数約40人ほどでまともにレスポンスを返せなくなり、タイムアウトしてしまうのです。当時はわけも分からず課金してHerokuのインスタンスを強化していましたがほとんど改善することができませんでした。サービスの規模に対して技術力が追いついておらず、どうすれば良いか何もわからずに苦しんでいたのを覚えています。サーバー攻撃の標的にならなかっただけ運が良かったでしょう。</p><h2 id="h232e26eb5c">サービス停止</h2><p>2020年2月、諸事情によりサービスは終わりを迎えました。サービスが正式に稼働した100日間でのべ11万回以上のアクセスをいただきました。現在サイトは閉鎖しています。</p>

全国の水泳のレース結果を500万件集めたサイトです。全国全選手のランキングや記録の推移グラフなどが閲覧できます。

スイマーズゼロ

<h2 id="h252486708e">練習タイムの記録表作成を、スマホだけで</h2><p>私のいた水泳部では、練習時に計測した選手のタイムを毎回Excelにまとめ、選手にフィードバックするのがマネージャーの仕事でした。当時抱えていた、入力に手間がかかる・PCが必要になる・複数マネージャーによる共同同時入力が困難といった課題を解決したのがこのLINEのチャットボットです。<strong><u>練習タイムをLINEの対話形式でデータベースに記録し、保存されたデータを表形式(CSV)に出力</u></strong>することができます。</p><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/49729eb8fa91498f941d944808ad957d/Frame%208.png?w=800&amp;h=360" alt="CSVファイルに変換" width="800" height="360"></p><h2 id="h5b15c293e9">テキストだけじゃないUI</h2><p>基本はチャットボットですが、テキスト以外の情報のやりとりもできます。LINE Messaging APIを活用することでボタンを表示させたり複雑な構造のデータを表示させたりできます。</p><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/e1b9eac8755641dca8e518608ff5261f/Frame%209.png?w=800&amp;h=461" alt="様々なUI" width="800" height="461"></p><p>またLINE Front-end Framework(LIFF)の機能を活用することでLINE上で簡単なWebアプリを動かすことができます。</p><p><img src="https://images.microcms-assets.io/assets/10d70abe32d44216bd12a8d56159666d/6f83f419edaf4f9a99ab9eec1b56bb22/IMG_1303.png?w=500&amp;h=714" alt="LIFFを活用したメニュー情報入力用のUI" width="500" height="714"></p><p>こちらはLIFFを活用したメニュー情報入力用のUIです。</p><h2 id="hc4d6411acb">工夫点</h2><h3 id="h2a04f6d30c">クライアントアプリにタイムを文字列として読み込ませる</h3><p><code>m:ss.00</code>(0:32.11など)の形式でCSVに出力すると、スマホで閲覧した際に小数点以下が丸められてしまいます。(0:32.00のようになる) またExcelで開くと表示形式が勝手に<code>m:ss.0</code>(0:32.1など)に変換させられてしまいます。Excelの場合ならユーザー(マネージャー)に表示形式を変更してもらうようお願いすれば良いですが、そのオペレーションを維持できるか不安でした。したがってTiMでは<code> m:ss.00</code>の形式(タイムの前に半角空白を置く)でタイムを出力するようにしています。こうすることでスマホやExcel上でもタイムは数値ではなく文字列として認識され、表示が崩れなくなりました。</p><h3 id="h53c0c2e4fb">CSVはBOM付きUTF-8で出力</h3><p>一般的に使用されるBOMなしUTF-8では、CSVファイルを直接Excelで開いた際にASCII文字以外を正しく認識できません。ExcelはデフォルトでShift-JISとしてファイルを読み込むためです。一方でShift-JIS形式でCSVを出力すると、スマホのメールクライアント上でCSVファイルを開いた際に文字化けが発生します。試行錯誤の結果、UTF-8にBOMを付与することでいずれの環境でも文字化けが発生しないことに気づきました。</p><h3 id="h7ff59ed903">インメモリDBでユーザーのステートを保持</h3><p>本来チャットボットはステートレスなものです。しかしチャットボット側がユーザーの現在の状態(=ユーザーが編集中の場所など)を各メッセージ受信時に知っておく必要がありました。通常のWebアプリであればセッションで管理をしますが、チャットボットでは同じ方法で実装できません。代わりにインメモリデータベースであるRedisにユーザーの状態を保持しておくことにしました。ユーザーのプロフィール情報などは既にリレーショナルデータベース上で管理してありましたが、状態情報はあえてそれとは切り離しました。状態情報は頻繁に書き換えが発生するため、インメモリデータベースの速度面での恩恵が受けられると考えたためです。</p><h2 id="h30d302fb4e">反省</h2><p>コミットログを見ると当時のすさまじい開発状況が垣間見えます。テストやデバッグを知りませんでした。コードを書いたら本番環境にデプロイし、毎回人力でLINEからリクエストを送って意図どおりに動いているか確かめます。バグが発生すると大変です。怪しい変数をprint関数に渡し、本番環境で表示させるのを何度も繰り返していました。コミットメッセージもなんのために書くのか分かりませんでした。コミット履歴には目も当てられません。</p><p>初めて開発したWebアプリだったゆえ、そうした至らぬ点がいくつもありました。それらに気づく度にアプリをまるごと2～3回書き直しています。UIも何度も変わっています。振り返ると自分の成長が分かるプロジェクトでもあります。</p>

水泳部向けに開発したLINE Botです。対話形式でタイムを入力し、CSVに出力できます。

Reo Kanzaki

Recent Activities

Selected Works

MiZ

スイマーズゼロ

TiM