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
20241123_SAGA IT Community DayのLP裏側
Search
midnight480
November 23, 2024
Technology
0
32
20241123_SAGA IT Community DayのLP裏側
SAGA IT Community Day(
https://sitcd.vercel.app/
)の開催予定に先立って作成したLanding Pageの構成を説明しています。
midnight480
November 23, 2024
Tweet
Share
More Decks by midnight480
See All by midnight480
AWS Summit Japan 2025 個人的参加レポート
midnight480
0
110
Amazon Q Developer for CLI の紹介
midnight480
0
110
Postman Flows ✖️ Backlog API で可能性を探る
midnight480
0
130
Amazon Q Developer for CLIの基本的な使い方と便利なコマンドの紹介
midnight480
0
150
20250531 JAWS-UG佐賀 生成AI
midnight480
0
57
Amazon Q Developer for CLI 〜 Blender、Backlog GitをMCPで操作してみた 〜
midnight480
0
170
Control policies for AWS Organizations
midnight480
0
130
20240201_JAWS-UG_SAGA
midnight480
0
85
Reintroduction to AWS Multiple Account Management
midnight480
0
90
Other Decks in Technology
See All in Technology
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
2
480
Eval-Centric AI: Agent 開発におけるベストプラクティスの探求
asei
0
120
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
830
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
1
370
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
720
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
990
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
2.4k
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
360
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
210
AI関数が早くなったので試してみよう
kumakura
0
300
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
1.1k
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
120
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
For a Future-Friendly Web
brad_frost
179
9.9k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Documentation Writing (for coders)
carmenintech
73
5k
Site-Speed That Sticks
csswizardry
10
770
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
What's in a price? How to price your products and services
michaelherold
246
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
Copyright © Tetsuya Shibao #sitcd205 #sitcd 2024-11-23 HAGAKURE PGM塾 SAGA
IT Community DayのLP裏側 Back of the LP for SAGA IT Community Day
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…
Copyright © Tetsuya Shibao #sitcd205 #sitcd * SAGA IT Communityとは
* LandingPageの紹介 * UIの作成 * ソース管理と開発 * Hosting(公開サイト) * CMS * まとめ お話すること
Copyright © Tetsuya Shibao #sitcd205 #sitcd SAGA IT Communityとは *
佐賀県産業スマート化センターから支援を受けているSAGA Smart Communityのコラボ企画 → これまで2度ほどSAGA Smart Community交流会をスマート化センター主導で実施 * 活動報告が中心となり、そこからコラボがいくつか生まれているのもあるが盛り上がりが今ひとつ(個人の感想) → 実際にどんなことをやっているのか体験する場を見る・聞く・やってみる機会を設定 → 企画書は2時間弱でバーっと書き上げて、イベント想定の作業役割とシフトを1時間ぐらいで荒々で作成 JAWS-UGとかであれば各支部で運営を担当している人が集まるので自然発生的に役割にそれぞれハマっていくものの 今回初めてイベントに参加する人を見越して、大枠から一歩踏み込んでベースラインを作成してしまう あくまでもベースラインなので修正は可能な余白を残している あくまでもベースラインなので修正は可能な余白を残している
Copyright © Tetsuya Shibao #sitcd205 #sitcd なぜLandingPageを作成したのか 技術的探究心に尽きる イベント管理サイト「connpass」の紹介ページをリッチにすることでも実現はできる ただ、イベントを実施するうえでLPを作ってみたかった
イベント概要 SAGA Innovator Talk Liveでの SAGA Smart Community TV ニュース(CMS)、RSS配信 参加コミュニティのロゴを動かす タイムスケジュール・フロアレイアウト 登壇者ページ 運営スタッフページ 会場地図 (Open Street Map) ボードゲーム、カードゲームの紹介 県外者向け観光情報 周辺施設情報 プライバシーポリシー、問い合わせフォーム SNS情報
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.
Copyright © Tetsuya Shibao #sitcd205 #sitcd UI作成 Webサイトの一番の個人ハードル、それはUI センスの欠片もないので一番困る そんなときに一筋(じゃない)の光が
自然プロンプトでUIを作成してくれる! 初版作成時は日本語の曖昧さを回避するために 英語で入力しているが、日本語で入力しても動く https://v0.dev/ v0 by Vercelは、Next.js(SSG: Static Side Generator)でのみ生成する
Copyright © Tetsuya Shibao #sitcd205 #sitcd ソース管理と開発環境 ソースコード管理はBacklog Git IDE(総合開発環境)はCursor
開発は一旦自分一人とはいえmainブランチのみの運用は切り戻しが辛いので、 featureブランチを作成してBacklog上でPR、Mergeをする運用にしている Pro 20$/month で Claude3.5-sonnetを叩けるようにしている
Copyright © Tetsuya Shibao #sitcd205 #sitcd WebHosting(Webサイトの配置先) v0 by Vercel
とあるようにVercelであればスムーズに動くのでそのままHosting先として利用 Vercekは、GitHubやBitBucketといった公開して利用できるリポジトリは接続してそのままCI/CDが動かせ る 一方でBacklog Gitは閉鎖的な利用となるので、Vercel CLIで手動デプロイを実施 ※ JenkinsなどCI/CDを実現できる手段はあるが、今回はそこまで必要性がなかったので手動デプロイ
Copyright © Tetsuya Shibao #sitcd205 #sitcd CMS 従来のCMS(WordPressなど)をどんと置くのではなく、ヘッドレスCMSを採用 WordPressのサイトもAPIを活用することでヘッドレスCMSを実現することも可能 WordPressを常時起動するのも資金面でもったいない
microCMSを試してみた → Hobby Planでも 無制限の 無制限のAPI呼び出し 呼び出し
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/
Copyright © Tetsuya Shibao #sitcd205 #sitcd 2024-11-23 HAGAKURE PGM塾 Thanks
for your time. :) https://speakerdeck.com/midnight480 https://www.docswell.com/user/midnight480