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

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

お知らせ等のコンテンツ管理が大変

銀の弾丸ならぬ銀の槍

• 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で！！

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

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

qst_exe

More Decks by qst_exe

Other Decks in Programming

Featured

Transcript