Flutter Advent Calendar 2021
この記事は、「Flutter Advent Calendar 2021」への投稿です。
半分くらいまでひとつの記事で書いていたのですが、（特にFirebase Hosting以降）長くなったので項目毎に分割してお届けします。
Flutter on the Web
Flutter 2から正式サポートされたweb supportでウェブアプリを構築して、Firebase Hostingで公開しました。
既に公開から7ヶ月経っているのですが、その基本的な手順をまとめてみました。
ゴールデンウィークに時間があったので作って公開しました。
はい「ウマ娘」です。
ウマ娘、それぞれの元となった競走馬の生涯が気になってレースを追うと、同じ時代に活躍した他のウマ娘との縁が気になってきます。
出場したレースで勝った場合は2着馬、負けた場合は勝利馬は「netkeiba」等でも一覧でわかるのですが、それ以外にも多くのウマ娘が同じレースで走っていることがあります（走っていない場合も多いですけど）。
それをタイムラインで見ることができれば楽しいだろうなと作ったのがこのサイトです。
ちょうど仕事でflutterスマホアプリを作っていたので、じゃあ試しにwebもこいつでと作ってみました。
基本的な手順は公式ドキュメントに沿っています。
ガワを作る
5月に作成した時はまだ2.0系と古かったのですが、現在適用しているSDKバージョンは以下の通りです。
% flutter --version
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (4 days ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1
アプリを生成します。
アプリ名以外、特にオプションはありません。
$ flutter create myapp
$ cd myapp
ローカルでのテスト
$ flutter run -d chrome --web-renderer html
chromeが立ち上がって動きました。
--web-renderer のオプションは不要なのですが、CanbasKitレンダラーが重いと感じることが多かったので、明示的にhtmlを選択しています。ただの好みです。
| web renderer | 説明 |
|---|---|
| auto | レンダリング時に自動選択される。モバイルブラウザではhtmlが、デスクトップブラウザではcanvaskitが選択されるとのこと。 |
| html | HTML、CSS、SVGで構築される。ダウンロードサイズ少なめ。 |
| canvaskit | CanvasKitでレンダリングされる。より高速だがダウンロードサイズは2Mほど増える。 |
Web renderers - Flutter
https://flutter.dev/docs/development/tools/web-renderers
タイトル属性を設定
TitleウィジットでHTMLの<title>属性を動的に設定します。
index.htmlやOGPを変更
web/index.htmlをカスタマイズします。
beamerでルーティングを定義
beamerパッケージでURLのルーティングを制御します。
URL形式を変更
デフォルトだとハッシュリンクになっているURLパスを通常のパス形式に変更する。
Flutterでレスポンシブ
Flutter on the Webに限らない話ですが、使われる環境の幅が広いWebだからこそレスポンシブの需要も大きいかと思います。
Firebase Hostingで公開する
GitHub Actionを利用してデプロイする仕組みを構築します。
Firebase Functions
Twitter Card等のクローラー等に対応する為に、Firebase Functionsを利用してタイトルやOGPを変更します。
その他
なるべく、Flutter on the Webの公開に依存した話を抜粋してまとめてみました。
今回は静的ホスティングにこだわってみました。
競走馬のデータはローカルでnetkeibaからスクレイピングしてDBに記録しています。
新しいウマ娘が公開、育成やサポートカードになって属性に変更があった時に情報を設定し、Flutterのassets下にjsonファイルで出力してそれを参照して表示する造りになっています。
assets:
- assets/bg.jpg
- assets/lastmodified.json
- assets/horse/
- assets/race/
- assets/series/
馬、レース、過去のレースとページ毎に必要なデータはひとつのJSONにまとめました。
この辺りや表示周りで利用したパッケージは、また別の機会で記事にしようと思います。