SAGA IT Community DayのLP裏側

SAGA IT Community DayのLP裏側 Back of the LP for SAGA IT Community Day 2024-11-23 HAGAKURE PGM塾 #sitcd205 #sitcd Copyright © Tetsuya Shibao

自己紹介 柴尾 哲也（しばお Tetsuya Shibao てつや） 大分（22年） → 東京（11年） → 福岡（2年）→ 佐賀（現在） JAWS-UG 佐賀 運営 AWS Startup Community 運営（最近は... SAGA IT Community Day企画中 etc… JAWS-UG佐賀 #sitcd205 #sitcd AWS Startup Community 福岡 Copyright © Tetsuya Shibao

お話すること * SAGA IT Communityとは * LandingPageの紹介 * UIの作成 * ソース管理と開発 * Hosting（公開サイト） * CMS * まとめ #sitcd205 #sitcd Copyright © Tetsuya Shibao

SAGA IT Communityとは * 佐賀県産業スマート化センターから支援を受けているSAGA Smart Communityのコラボ企画 → これまで2度ほどSAGA Smart Community交流会をスマート化センター主導で実施 * 活動報告が中心となり、そこからコラボがいくつか生まれているのもあるが盛り上がりが今ひとつ（個人の感想） → 実際にどんなことをやっているのか体験する場を見る・聞く・やってみる機会を設定 → 企画書は2時間弱でバーっと書き上げて、イベント想定の作業役割とシフトを1時間ぐらいで荒々で作成 JAWS-UGとかであれば各支部で運営を担当している人が集まるので自然発生的に役割にそれぞれハマっていくものの 今回初めてイベントに参加する人を見越して、大枠から一歩踏み込んでベースラインを作成してしまう あくまでもベースラインなので修正は可能な余白を残している #sitcd205 #sitcd Copyright © Tetsuya Shibao

なぜLandingPageを作成したのか 技術的探究心に尽きる イベント管理サイト「connpass」の紹介ページをリッチにすることでも実現はできる ただ、イベントを実施するうえでLPを作ってみたかった イベント概要 SAGA Innovator Talk Liveでの SAGA Smart Community TV 参加コミュニティのロゴを動かす ニュース（CMS）、RSS配信 タイムスケジュール・フロアレイアウト 登壇者ページ 運営スタッフページ 会場地図 （Open Street Map） ボードゲーム、カードゲームの紹介 県外者向け観光情報 周辺施設情報 プライバシーポリシー、問い合わせフォーム #sitcd205 #sitcd Copyright © Tetsuya Shibao SNS情報

LandingPage構成 構成は、v0 by Vercelから起点なのでVercel 中心に構成している Plan is hobby. Plan is hobby. Publish View Manual Deploy Plan is Secret. Import Plan is Pro. Git Push Create Issues #sitcd205 #sitcd Copyright © Tetsuya Shibao

UI作成 Webサイトの一番の個人ハードル、それはUI センスの欠片もないので一番困る そんなときに一筋（じゃない）の光が 自然プロンプトでUIを作成してくれる！ https://v0.dev/ 初版作成時は日本語の曖昧さを回避するために 英語で入力しているが、日本語で入力しても動く v0 by Vercelは、Next.js(SSG: Static Side Generator)でのみ生成する #sitcd205 #sitcd Copyright © Tetsuya Shibao

• https://v0.dev/

ソース管理と開発環境 ソースコード管理はBacklog Git IDE（総合開発環境）はCursor 開発は一旦自分一人とはいえmainブランチのみの運用は切り戻しが辛いので、 featureブランチを作成してBacklog上でPR、Mergeをする運用にしている #sitcd205 #sitcd Pro 20$/month で Claude3.5-sonnetを叩けるようにしている Copyright © Tetsuya Shibao

WebHosting（Webサイトの配置先） v0 by Vercel とあるようにVercelであればスムーズに動くのでそのままHosting先として利用 Vercekは、GitHubやBitBucketといった公開して利用できるリポジトリは接続してそのままCI/CDが動かせ る 一方でBacklog Gitは閉鎖的な利用となるので、Vercel CLIで手動デプロイを実施 ※ JenkinsなどCI/CDを実現できる手段はあるが、今回はそこまで必要性がなかったので手動デプロイ #sitcd205 #sitcd Copyright © Tetsuya Shibao

CMS 従来のCMS（WordPressなど）をどんと置くのではなく、ヘッドレスCMSを採用 WordPressのサイトもAPIを活用することでヘッドレスCMSを実現することも可能 WordPressを常時起動するのも資金面でもったいない microCMSを試してみた → Hobby Planでも 無制限のAPI呼び出し #sitcd205 #sitcd Copyright © Tetsuya Shibao

まとめ * IDEを除くWebサイトの構成要素はFree/Hobby Planで賄う * Next.js + microCMSの気持ちの良い体験が得られる * GitHub Project、Issueがとっつきにくい方はBacklog Issue、Gitで試しに触ってみてください * SAGA IT Community運営に携わってみたい方はご連絡ください https://sitcd.vercel.app/ #sitcd205 #sitcd Copyright © Tetsuya Shibao

• https://sitcd.vercel.app/

Thanks for your time. :) https://speakerdeck.com/midnight480 https://www.docswell.com/user/midnight480 2024-11-23 HAGAKURE PGM塾 #sitcd205 #sitcd Copyright © Tetsuya Shibao

• https://speakerdeck.com/midnight480
• https://www.docswell.com/user/midnight480