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
40
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
160
Amazon Q Developer for CLI の紹介
midnight480
0
130
Postman Flows ✖️ Backlog API で可能性を探る
midnight480
0
150
Amazon Q Developer for CLIの基本的な使い方と便利なコマンドの紹介
midnight480
0
250
20250531 JAWS-UG佐賀 生成AI
midnight480
0
90
Amazon Q Developer for CLI 〜 Blender、Backlog GitをMCPで操作してみた 〜
midnight480
0
210
Control policies for AWS Organizations
midnight480
0
150
20240201_JAWS-UG_SAGA
midnight480
0
120
Reintroduction to AWS Multiple Account Management
midnight480
0
110
Other Decks in Technology
See All in Technology
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
160
AWSにおけるTrend Vision Oneの効果について
shimak
0
120
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
0
110
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.8k
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
170
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
バイブコーディングと継続的デプロイメント
nwiizo
2
410
BtoBプロダクト開発の深層
16bitidol
0
270
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
0
120
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
140
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
23k
Six Lessons from altMBA
skipperchong
28
4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Statistics for Hackers
jakevdp
799
220k
It's Worth the Effort
3n
187
28k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Bash Introduction
62gerente
615
210k
Site-Speed That Sticks
csswizardry
11
880
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
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