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
2.3k
Flutter WebでもJamstackしたい
Fastriver
February 22, 2022
Tweet
Share
More Decks by Fastriver
See All by Fastriver
RenderObjectより下の世界のFlutter
fastriver
0
370
Other Decks in Technology
See All in Technology
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
110
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
370
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
460
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
620
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
9
2.9k
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
150
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
330
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9.8k
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
360
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
テストを軸にした生き残り術
kworkdev
PRO
0
190
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Code Reviewing Like a Champion
maltzj
525
40k
Faster Mobile Websites
deanohume
309
31k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
BBQ
matthewcrist
89
9.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Embracing the Ebb and Flow
colly
87
4.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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