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 × SpearlyでCSSレスの最光なサイトを作る
Search
qst_exe
July 30, 2021
Programming
0
220
Flutter Web × SpearlyでCSSレスの最光なサイトを作る
「鹿児島.mk #19 オンラインLT大会」でLTしたスライドです
https://kagoshima-mk.connpass.com/event/217627/
qst_exe
July 30, 2021
Tweet
Share
More Decks by qst_exe
See All by qst_exe
Babylon.js で始めるヘッドレス CMS/A headless CMS on Babylon.js
qst_exe
0
84
WebXR で Web をもっと楽しもう
qst_exe
0
130
今年のメタバースについての取り組みとこれから
qst_exe
0
130
今年のメタバースについての取り組みとこれから
qst_exe
0
43
visionOSアプリ開発について
qst_exe
0
79
visionOSアプリ開発のすゝめ
qst_exe
0
79
EDDのすゝめ 〜LT大会に参加しませんか?〜
qst_exe
0
28
オンラインイベントの失敗談と対応 〜「コロナ禍の鹿児島」のそれから〜
qst_exe
0
81
メタバースコミュニティ「BridgeSpace」の紹介
qst_exe
0
180
Other Decks in Programming
See All in Programming
Ruby GitHub Packages
bkuhlmann
0
650
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
AppRouter Panel Talk
yosuke_furukawa
PRO
1
490
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
930
GitHub Copilotのススメ
marcy731
1
240
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
210
Apache Hive 4 on Treasure Data
ryukobayashi
1
450
PostmanでAPIの動作確認が楽になった話
h455h1
0
190
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
140
Implementing Design Systems in Swift
seyfoyun
2
490
Hanami and htmx
bkuhlmann
0
230
Featured
See All Featured
Building Adaptive Systems
keathley
32
1.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
Optimizing for Happiness
mojombo
370
69k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Designing for Performance
lara
601
67k
Faster Mobile Websites
deanohume
300
30k
BBQ
matthewcrist
80
8.8k
Transcript
Flutter Web × Spearlyで CSSレスの最光なサイトを作る 鹿児島.mk #19 2021-07-30 qst_exe
❖ くすたん ❖ フリーランスエンジニア (モバイルアプリ, Webアプリ開発) ❖ 好きなソフトウェア開発本 『Code Complete』
『アジャイルソフトウェア開発の奥義』 ❖ 鹿児島.mk, VTuberなどのコミュニティ活動 自己紹介
力を入れてるコミュニティ活動 鹿児島.mk ヒラマサ ※ 写真はコロナ前(2019年)のものです
CSSは得意ですか?
僕は苦手です…
CSSを極力使わずにWebサイトを 構築したい
• コーポレートサイトのような構成で更新がほぼない自分用のサイト • たまに実績やお知らせの更新をしたい • お問い合わせフォームも存在する • 構成管理はなるべくコードで簡単にしたい 作りたいサイト
1. ノーコードツール(STUDIO, Wix) 2. WordPress 3. Flutter Web 使えそうなツール
ノーコードツール
構成管理ができない
• ローカル環境で構築して問題なければ本番環境に反映させたい • Git等でバージョン管理して問題があれば巻き戻せるようにしたい ノーコードツールで困ったこと
WordPress
保守コストがかかる
• 定期的にテーマやプラグイン等の更新をしないといけない • Shifterなどを使えば静的サイトとして扱えるが、導入コストがちょっと高い • プラグイン等一部Gitでバージョン管理しづらいものがある WordPressで困ったこと
Flutter Web × Firebase Hosting
• モバイルアプリ開発用のFlutterがWebにも対応したもの • 設定を変更するだけで、iOS・AndroidだけでなくWeb用にHTMLビルドす ることができる • FlutterのコードからHTMLをビルドするのでCSSレス • 半年前に検証したときには製品版には難しそう •
Flutterならできる Flutter Web
Flutterならできる
• SSL署名も自動でおこなってくれるホスティングサービス • 独自ドメインも設定できる • ホスティングサービスだけに限れば無料 • エミュレーターの導入でローカルでの検証も可能 Firebase Hosting
お知らせ等のコンテンツ管理 が大変
銀の弾丸ならぬ銀の槍
None
• FAST, STRONG, SLIMがコンセプトのHeadlessCMS • 静的サイトに簡単にコンテンツを埋め込むことができる • APIが公開されており様々な開発環境から利用することができる ◦ Flutterは公式サイトに載っていないが利用可能
日本一クールなHeadless CMS
1. JS埋め込みタグを利用する 2. APIを叩いて利用する Spearlyの利用方法は2つ 今回はお手軽な「JSタグの埋め込み」で利用
• headタグにスクリプトを設置して、独自タグ(<spearly>など)をbody内に 設置すればOK • Flutter Webでは独自タグを貼ることができない… • ローカルのHTMLに独自タグを設置し、それをiframeで読み込む方式で 実装 JS埋め込みタグの利用
ヘッジホッグ https://lp.hhg-exe.jp/ 完成イメージ
CSSを使わずに いい感じのサイトができた!
LTで話しきれない内容はZennや公式ドキュメントに載ってます Zenn https://zenn.dev/qst/articles/e97b005c536cccc69006 Spearly CMS公式ドキュメント https://docs.spearly.com/ 実装の詳細
1. GitHub Actionsでの自動デプロイ 2. iframeを使わずに描画できないかの検証 3. Flutter Web用にSpearlyパッケージの開発 4. お問い合わせフォームも何とか埋め込みたい
(今はformrunとLINE@の外部リンクに飛ばす) 今後の課題
お知らせ • プロデュース中のVTuberが近々デ ビュー! • 詳細は後日Twitterで!!
EOF