Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutter WebでもJamstackしたい
Search
Fastriver
February 22, 2022
Technology
1
2k
Flutter WebでもJamstackしたい
Fastriver
February 22, 2022
Tweet
Share
More Decks by Fastriver
See All by Fastriver
RenderObjectより下の世界のFlutter
fastriver
0
200
Other Decks in Technology
See All in Technology
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
1
240
Mocking in Rust Applications
taiki45
1
400
エンジニア向け会社紹介資料
caddi_eng
15
250k
サプライチェーン攻撃に備える
ryunen344
0
190
AI でアップデートする既存テクノロジーと、クラウドエンジニアの生きる道
soracom
PRO
2
500
LLVM/ASMを使った有限体の高速実装
herumi
0
120
SORACOMで実現するIoTのマルチクラウド対応 - IoTでのクリーンアーキテクチャの実現 -
kenichirokimura
0
380
20240911_New_Relicダッシュボード活用例
speakerdeckfk
0
100
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
910
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
0
1k
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
360
Analytics-Backed App Widget Development - Served with Jetpack Glance
miyabigouji
0
380
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Unsuck your backbone
ammeep
667
57k
Designing for Performance
lara
604
68k
Code Review Best Practice
trishagee
62
16k
RailsConf 2023
tenderlove
28
810
Done Done
chrislema
180
16k
BBQ
matthewcrist
83
9.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Visualization
eitanlees
142
15k
In The Pink: A Labor of Love
frogandcode
139
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Transcript
@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を ずらして最後まで順に取得 • configは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