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
86
WebXR で Web をもっと楽しもう
qst_exe
0
140
今年のメタバースについての取り組みとこれから
qst_exe
0
130
今年のメタバースについての取り組みとこれから
qst_exe
0
44
visionOSアプリ開発について
qst_exe
0
80
visionOSアプリ開発のすゝめ
qst_exe
0
79
EDDのすゝめ 〜LT大会に参加しませんか?〜
qst_exe
0
28
オンラインイベントの失敗談と対応 〜「コロナ禍の鹿児島」のそれから〜
qst_exe
0
82
メタバースコミュニティ「BridgeSpace」の紹介
qst_exe
0
180
Other Decks in Programming
See All in Programming
AppRouter Panel Talk
yosuke_furukawa
PRO
1
500
Git Lint
bkuhlmann
4
770
見た目から始める生産性向上
ikumatadokoro
10
1.5k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
Ruby Pattern Matching
bkuhlmann
0
930
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
480
AmperとFleetを使ったAndroidアプリ
yoppie
0
280
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
Elm 0.19.0 Changes
bkuhlmann
0
510
Open AI APIを使う前に知っておきたいアカウントTier の話
akki_megane
0
110
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
450
PostmanでAPIの動作確認が楽になった話
h455h1
0
190
Featured
See All Featured
Embracing the Ebb and Flow
colly
80
4.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Docker and Python
trallard
35
2.7k
Practical Orchestrator
shlominoach
183
9.7k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Into the Great Unknown - MozCon
thekraken
15
1k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Building Adaptive Systems
keathley
32
1.9k
Designing for humans not robots
tammielis
247
25k
The Pragmatic Product Professional
lauravandoore
26
5.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