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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
400
Other Decks in Technology
See All in Technology
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
17k
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3.8k
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
usanchuu
3
440
15 years with Rails and DDD (AI Edition)
andrzejkrzywda
0
180
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
42k
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
tatsukoni
0
210
CDKで始めるTypeScript開発のススメ
tsukuboshi
1
340
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
130
Stately
mu7889yoon
1
110
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
13k
配列に見る bash と zsh の違い
kazzpapa3
1
120
OCI Database Management サービス詳細
oracle4engineer
PRO
1
7.4k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.1k
The untapped power of vector embeddings
frankvandijk
1
1.6k
GitHub's CSS Performance
jonrohan
1032
470k
Embracing the Ebb and Flow
colly
88
5k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Paper Plane (Part 1)
katiecoart
PRO
0
4k
Making Projects Easy
brettharned
120
6.6k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
What does AI have to do with Human Rights?
axbom
PRO
0
2k
How GitHub (no longer) Works
holman
316
140k
The Invisible Side of Design
smashingmag
302
51k
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