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
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
230
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
1k
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
460
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
560
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
130
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
470
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
700
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Context Engineering - Making Every Token Count
addyosmani
3
63
A designer walks into a library…
pauljervisheath
207
24k
Building Applications with DynamoDB
mza
96
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
GraphQLとの向き合い方2022年版
quramy
49
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
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