20241123_SAGA IT Community DayのLP裏側

SAGA IT Community Day( https://sitcd.vercel.app/ )の開催予定に先立って作成したLanding Pageの構成を説明しています。

Transcript

1. Copyright © Tetsuya Shibao #sitcd205 #sitcd 2024-11-23 HAGAKURE PGM塾 SAGA IT Community DayのLP裏側 Back of the LP for SAGA IT Community Day
2. Copyright © Tetsuya Shibao #sitcd205 #sitcd 自己紹介 大分（22年） → 東京（11年） → 福岡（2年）→ 佐賀（現在）　 柴尾　哲也（しばお　てつや） Tetsuya Shibao JAWS-UG佐賀 AWS Startup Community 福岡 JAWS-UG 佐賀 運営 AWS Startup Community 運営（最近は... SAGA IT Community Day企画中 etc…
3. Copyright © Tetsuya Shibao #sitcd205 #sitcd * SAGA IT Communityとは * LandingPageの紹介 * UIの作成 * ソース管理と開発 * Hosting（公開サイト） * CMS * まとめ お話すること
4. Copyright © Tetsuya Shibao #sitcd205 #sitcd SAGA IT Communityとは * 佐賀県産業スマート化センターから支援を受けているSAGA Smart Communityのコラボ企画 　→　これまで2度ほどSAGA Smart Community交流会をスマート化センター主導で実施 * 活動報告が中心となり、そこからコラボがいくつか生まれているのもあるが盛り上がりが今ひとつ（個人の感想） 　→　実際にどんなことをやっているのか体験する場を見る・聞く・やってみる機会を設定 　→　企画書は2時間弱でバーっと書き上げて、イベント想定の作業役割とシフトを1時間ぐらいで荒々で作成 JAWS-UGとかであれば各支部で運営を担当している人が集まるので自然発生的に役割にそれぞれハマっていくものの 今回初めてイベントに参加する人を見越して、大枠から一歩踏み込んでベースラインを作成してしまう あくまでもベースラインなので修正は可能な余白を残している あくまでもベースラインなので修正は可能な余白を残している
5. Copyright © Tetsuya Shibao #sitcd205 #sitcd なぜLandingPageを作成したのか 技術的探究心に尽きる イベント管理サイト「connpass」の紹介ページをリッチにすることでも実現はできる ただ、イベントを実施するうえでLPを作ってみたかった イベント概要 SAGA Innovator Talk Liveでの SAGA Smart Community TV ニュース（CMS）、RSS配信 参加コミュニティのロゴを動かす タイムスケジュール・フロアレイアウト 登壇者ページ 運営スタッフページ 会場地図 （Open Street Map） ボードゲーム、カードゲームの紹介 県外者向け観光情報 周辺施設情報 プライバシーポリシー、問い合わせフォーム SNS情報
6. Copyright © Tetsuya Shibao #sitcd205 #sitcd LandingPage構成 構成は、v0 by Vercelから起点なのでVercel 中心に構成している Git Push Create Issues Publish View Manual Deploy Import Plan is Secret. Plan is hobby. Plan is hobby. Plan is Pro.
7. Copyright © Tetsuya Shibao #sitcd205 #sitcd UI作成 Webサイトの一番の個人ハードル、それはUI センスの欠片もないので一番困る そんなときに一筋（じゃない）の光が 自然プロンプトでUIを作成してくれる！ 初版作成時は日本語の曖昧さを回避するために 英語で入力しているが、日本語で入力しても動く https://v0.dev/ v0 by Vercelは、Next.js(SSG: Static Side Generator)でのみ生成する
8. Copyright © Tetsuya Shibao #sitcd205 #sitcd ソース管理と開発環境 ソースコード管理はBacklog Git IDE（総合開発環境）はCursor 開発は一旦自分一人とはいえmainブランチのみの運用は切り戻しが辛いので、 featureブランチを作成してBacklog上でPR、Mergeをする運用にしている Pro 20$/month で Claude3.5-sonnetを叩けるようにしている
9. Copyright © Tetsuya Shibao #sitcd205 #sitcd WebHosting（Webサイトの配置先） v0 by Vercel とあるようにVercelであればスムーズに動くのでそのままHosting先として利用 Vercekは、GitHubやBitBucketといった公開して利用できるリポジトリは接続してそのままCI/CDが動かせ る 一方でBacklog Gitは閉鎖的な利用となるので、Vercel CLIで手動デプロイを実施 ※ JenkinsなどCI/CDを実現できる手段はあるが、今回はそこまで必要性がなかったので手動デプロイ
10. Copyright © Tetsuya Shibao #sitcd205 #sitcd CMS 従来のCMS（WordPressなど）をどんと置くのではなく、ヘッドレスCMSを採用 WordPressのサイトもAPIを活用することでヘッドレスCMSを実現することも可能 WordPressを常時起動するのも資金面でもったいない microCMSを試してみた →　Hobby Planでも 無制限の 無制限のAPI呼び出し 呼び出し
11. Copyright © Tetsuya Shibao #sitcd205 #sitcd まとめ * IDEを除くWebサイトの構成要素はFree/Hobby Planで賄う * Next.js + microCMSの気持ちの良い体験が得られる * GitHub Project、Issueがとっつきにくい方はBacklog Issue、Gitで試しに触ってみてください * SAGA IT Community運営に携わってみたい方はご連絡ください https://sitcd.vercel.app/
12. Copyright © Tetsuya Shibao #sitcd205 #sitcd 2024-11-23 HAGAKURE PGM塾 Thanks for your time. :) https://speakerdeck.com/midnight480 https://www.docswell.com/user/midnight480