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
170
Amazon Q Developer for CLI の紹介
midnight480
0
140
Postman Flows ✖️ Backlog API で可能性を探る
midnight480
0
150
Amazon Q Developer for CLIの基本的な使い方と便利なコマンドの紹介
midnight480
0
300
20250531 JAWS-UG佐賀 生成AI
midnight480
0
97
Amazon Q Developer for CLI 〜 Blender、Backlog GitをMCPで操作してみた 〜
midnight480
0
230
Control policies for AWS Organizations
midnight480
0
160
20240201_JAWS-UG_SAGA
midnight480
0
130
Reintroduction to AWS Multiple Account Management
midnight480
0
120
Other Decks in Technology
See All in Technology
serverless team topology
_kensh
3
240
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
370
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
AIの個性を理解し、指揮する
shoota
1
140
知覚とデザイン
rinchoku
1
600
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
0
490
re:Inventに行くまでにやっておきたいこと
nagisa53
0
480
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.5k
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
400
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
210
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
11k
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Documentation Writing (for coders)
carmenintech
75
5.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Designing Experiences People Love
moore
142
24k
Statistics for Hackers
jakevdp
799
220k
BBQ
matthewcrist
89
9.9k
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