しおやフットボールの移籍情報改修とUI最適化

今日も「しおやフットボール」の改善に熱中していました。今回は、手動でコツコツ入力している「移籍情報ページ」のシステム周りの大きな見直しと、それに伴う機能追加、そしてUIの最適化がメインです。

ウェブ版とアプリ版の切り離しとSEO対策

これまでは移籍情報のカードをJavaScriptのモックデータから動的に生成していましたが、これだとウェブ版を開いたときに検索エンジンのクローラーにテキストを読んでもらえず、SEO的に不利になる課題がありました。かと言ってHTMLに直接ハードコーディングすると、今度はiOSアプリ版のデータを1件更新するたびにApp Storeの再審査を出さなければならなくなってしまいます。

そこでトップページの仕組みを応用し、元の「transfer.html」を活かしたまま、ビルドスクリプト「generate_web_transfer.js」によってウェブ版専用の静的な「transfer_web.html」を自動生成する仕組みを作りました。これをGitHub Actionsでデプロイ時にコピーさせることで、ウェブ版の強固なSEOを完全に維持することに成功しました。

一方で、iOSアプリ版の「transfer.js」からはインターネット上の本番環境のJSONデータを起動時に直接フェッチするように処理を切り分けました。これにより、今後は手元で移籍データを更新して「local_update.sh」を叩くだけで、アプリ版も審査を一切挟むことなく、一瞬で最新情報がユーザーの手元に届くようになります。ハイブリッド展開の強みを活かした非常にスマートな構成にできたと思います。

検索・並び替え機能と文章欄の追加

システム側の基盤が整ったので、ユーザー向けの機能も大幅に強化しました。選手数が増えても目的の情報にすぐアクセスできるよう「選手名検索機能」を追加し、さらに「更新日時が新しい順・古い順」の並び替え機能も新設しました。また、各カードの下部には、移籍の背景や最新動向を自由に記述できる小さめの文章欄（コメント欄）を表示できるようにし、情報の質をぐっと高めました。

コントロールパネルに検索窓と3つのセレクトボックスが並ぶと画面が少し圧迫されてしまったので、項目名を「全状況」「全リーグ」「新しい順」のように短くスマートに省略。フレックスボックスを用いて横一列にスッキリと収まるようにUIを微調整しました。スマートフォンの画面で見ても綺麗にレイアウトがまとまり、使いやすさは抜群です。今回の機能強化により、アプリのバージョンを「1.2.0」へマイナーアップデートする準備が整いました。近いうちにApp Storeへ提出する予定です。

きょうのごはん

お昼はIKEAに行ってカレーとベリータルトを食べました。甘酸っぱいタルトがとても美味しかったです。

夜は焼き鳥を食べました。たくさん開発をして頭を使ったあとの焼き鳥は最高でした。