Flutter Web × SpearlyでCSSレスの最光なサイトを作る

「鹿児島.mk #19 オンラインLT大会」でLTしたスライドです
https://kagoshima-mk.connpass.com/event/217627/

Transcript

1. Flutter Web × Spearlyで CSSレスの最光なサイトを作る 鹿児島.mk #19 2021-07-30 qst_exe
2. ❖ くすたん ❖ フリーランスエンジニア (モバイルアプリ, Webアプリ開発) ❖ 好きなソフトウェア開発本 『Code Complete』 『アジャイルソフトウェア開発の奥義』 ❖ 鹿児島.mk, VTuberなどのコミュニティ活動 自己紹介
3. 力を入れてるコミュニティ活動 鹿児島.mk ヒラマサ ※ 写真はコロナ前(2019年)のものです
4. CSSは得意ですか？
5. 僕は苦手です…
6. CSSを極力使わずにWebサイトを 構築したい
7. • コーポレートサイトのような構成で更新がほぼない自分用のサイト • たまに実績やお知らせの更新をしたい • お問い合わせフォームも存在する • 構成管理はなるべくコードで簡単にしたい 作りたいサイト
8. 1. ノーコードツール(STUDIO, Wix) 2. WordPress 3. Flutter Web 使えそうなツール
9. ノーコードツール
10. 構成管理ができない
11. • ローカル環境で構築して問題なければ本番環境に反映させたい • Git等でバージョン管理して問題があれば巻き戻せるようにしたい ノーコードツールで困ったこと
12. WordPress
13. 保守コストがかかる
14. • 定期的にテーマやプラグイン等の更新をしないといけない • Shifterなどを使えば静的サイトとして扱えるが、導入コストがちょっと高い • プラグイン等一部Gitでバージョン管理しづらいものがある WordPressで困ったこと
15. Flutter Web × Firebase Hosting
16. • モバイルアプリ開発用のFlutterがWebにも対応したもの • 設定を変更するだけで、iOS・AndroidだけでなくWeb用にHTMLビルドす ることができる • FlutterのコードからHTMLをビルドするのでCSSレス • 半年前に検証したときには製品版には難しそう • Flutterならできる Flutter Web
17. Flutterならできる
18. • SSL署名も自動でおこなってくれるホスティングサービス • 独自ドメインも設定できる • ホスティングサービスだけに限れば無料 • エミュレーターの導入でローカルでの検証も可能 Firebase Hosting
19. お知らせ等のコンテンツ管理 が大変
20. 銀の弾丸ならぬ銀の槍
22. • FAST, STRONG, SLIMがコンセプトのHeadlessCMS • 静的サイトに簡単にコンテンツを埋め込むことができる • APIが公開されており様々な開発環境から利用することができる ◦ Flutterは公式サイトに載っていないが利用可能 日本一クールなHeadless CMS
23. 1. JS埋め込みタグを利用する 2. APIを叩いて利用する Spearlyの利用方法は2つ 今回はお手軽な「JSタグの埋め込み」で利用
24. • headタグにスクリプトを設置して、独自タグ(<spearly>など)をbody内に 設置すればOK • Flutter Webでは独自タグを貼ることができない… • ローカルのHTMLに独自タグを設置し、それをiframeで読み込む方式で 実装 JS埋め込みタグの利用
25. ヘッジホッグ https://lp.hhg-exe.jp/ 完成イメージ
26. CSSを使わずに いい感じのサイトができた！
27. LTで話しきれない内容はZennや公式ドキュメントに載ってます Zenn https://zenn.dev/qst/articles/e97b005c536cccc69006 Spearly CMS公式ドキュメント https://docs.spearly.com/ 実装の詳細
28. 1. GitHub Actionsでの自動デプロイ 2. iframeを使わずに描画できないかの検証 3. Flutter Web用にSpearlyパッケージの開発 4. お問い合わせフォームも何とか埋め込みたい (今はformrunとLINE＠の外部リンクに飛ばす) 今後の課題
29. お知らせ • プロデュース中のVTuberが近々デ ビュー！ • 詳細は後日Twitterで！！
30. EOF