Flutter WebでもJamstackしたい

@fastriver_org Flutter WebでもJamstackしたい @ジャムジャム！！Jamstack_5　#jamjamjamstack 1

@fastriver_org 自己紹介 HN: fastriver 慶應義塾大学理工学部在学 Flutterでゲームを作る人 #FlutterPuzzleHack にも参加中！作品群→ fastriver.dev
Twitterのアイコン 2 “湯豆腐”(2020) “蜿”(2020)

@fastriver_org 最近作ったサイト • https://fastriver.dev/ ◦ ポートフォリオ用のサイト • UI: Flutter Web
• データ: microCMS • 更新方法: Jamstack 3

@fastriver_org Flutter Web is 何 • FlutterはGoogle主導のUIフレームワーク • Build apps
for any screen ◦ どの環境でも同じ見た目を提供する • Flutterは元々モバイル向けだが、 Webサイト(SPA)としてもビルドできる →Flutter Web(Flutter on the Web) • 画面の構成は全てClient Side Rendering ◦ コンパイル時にはCanvas操作をするjsのみを生成 4 Flutter/Dartのマスコット Dash (https://youtu.be/6Kmb64jmH_8)

@fastriver_org なぜFlutter Webを使うのか • UI構築がモバイルに似ている ◦ CSSを書かなくて良い ◦ HTMLを書かなくて良い ◦
JSを書かなくて良い • Dartがよい言語 • Flutter WebはSPAを出力 ◦ Jamstackの適用ができそう 5

@fastriver_org Flutter+microCMSの構成 6

@fastriver_org Flutter Web+Jamstackには何が必要？ Flutter WebでのJamstackの仕組みは前例があまりない • コマンドでのデータ取得 ◦ CI中にデータを取ってくるため •
データの保持 ◦ Flutterはクライアントサイドで画面を構築 ◦ データの形のままどこかに組み込む必要がある • 型情報の付与 ◦ DartはJavaライクな型を持つ ▪ 有効活用したい • リッチテキストの表示 ◦ FlutterはそのままではHTMLを表示できない 7

@fastriver_org コマンドでのデータ取得 • Dartはスクリプト言語としても利用可能 ◦ pubにスクリプト実行の仕組みあり • 設定したAPIを全て叩く •
リスト形式であればoffsetをずらして最後まで順に取得 • conﬁgはpubspec.yamlに記述 ◦ API名や形式など 8 pub: Flutter/Dartのパッケージ管理システム

@fastriver_org データ保持 • 取得したJSON文字列を変数に代入するコードを生成 ◦ /lib/datastore.microcms.g.dartに出力 • CI内で自分のコードと混ぜていっしょにコンパイル
• 開発中に手元でコード生成すれば通常の変数として読み込み可能 9

@fastriver_org 型情報の自動生成 • microCMSはAPI設定からSchemaを JSONで取得できる • Schemaをプロジェクトに登録 • SchemaのJSONからDartのクラスをコード生成
10 Schemaをダウンロードコード生成

@fastriver_org リッチテキストの表示 • Flutterは基本Canvas描画なので渡されたHTMLはそのまま表示できない... ◦ 汎用パッケージにも WebViewがあるが制約が多く使いづらい
• Webに特化したパッケージを自作 ◦ PlatformViewというネイティブ画面をいじる仕組みが存在 ◦ HTMLをPlatformViewに流して表示 ▪ index.htmlのDOMに挿入される ◦ DOMを監視して高さを調整 11 Flutter リッチテキスト非常に自然な表示

@fastriver_org 終わりに • FlutterでもmicroCMSを使ってJamstack構成を取ることができた • 必要なものはパッケージに ◦ データ取得・保持・型自動生成 →static_micro_cms ◦
リッチテキストの表示 →adjusted_html_view_web • Webサイト作成の選択肢にもFlutter Web+microCMSを 12

Flutter WebでもJamstackしたい

Flutter WebでもJamstackしたい

Fastriver

More Decks by Fastriver

Other Decks in Technology

Featured

Transcript

@fastriver_org Flutter WebでもJamstackしたい @ジャムジャム！！Jamstack_5　#jamjamjamstack 1

@fastriver_org 自己紹介 HN: fastriver 慶應義塾大学理工学部在学 Flutterでゲームを作る人 #FlutterPuzzleHack にも参加中！作品群→ fastriver.dev

@fastriver_org 最近作ったサイト • https://fastriver.dev/ ◦ ポートフォリオ用のサイト • UI: Flutter Web

@fastriver_org Flutter Web is 何 • FlutterはGoogle主導のUIフレームワーク • Build apps

@fastriver_org なぜFlutter Webを使うのか • UI構築がモバイルに似ている ◦ CSSを書かなくて良い ◦ HTMLを書かなくて良い ◦

@fastriver_org Flutter+microCMSの構成 6

@fastriver_org Flutter Web+Jamstackには何が必要？ Flutter WebでのJamstackの仕組みは前例があまりない • コマンドでのデータ取得 ◦ CI中にデータを取ってくるため •

@fastriver_org コマンドでのデータ取得 • Dartはスクリプト言語としても利用可能 ◦ pubにスクリプト実行の仕組みあり • 設定したAPIを全て叩く •

@fastriver_org データ保持 • 取得したJSON文字列を変数に代入するコードを生成 ◦ /lib/datastore.microcms.g.dartに出力 • CI内で自分のコードと混ぜていっしょにコンパイル

@fastriver_org 型情報の自動生成 • microCMSはAPI設定からSchemaを JSONで取得できる • Schemaをプロジェクトに登録 • SchemaのJSONからDartのクラスをコード生成

@fastriver_org リッチテキストの表示 • Flutterは基本Canvas描画なので渡されたHTMLはそのまま表示できない... ◦ 汎用パッケージにも WebViewがあるが制約が多く使いづらい

@fastriver_org 終わりに • FlutterでもmicroCMSを使ってJamstack構成を取ることができた • 必要なものはパッケージに ◦ データ取得・保持・型自動生成 →static_micro_cms ◦