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
27
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
Postman Flows ✖️ Backlog API で可能性を探る
midnight480
0
87
Amazon Q Developer for CLIの基本的な使い方と便利なコマンドの紹介
midnight480
0
70
20250531 JAWS-UG佐賀 生成AI
midnight480
0
24
Amazon Q Developer for CLI 〜 Blender、Backlog GitをMCPで操作してみた 〜
midnight480
0
120
Control policies for AWS Organizations
midnight480
0
100
20240201_JAWS-UG_SAGA
midnight480
0
59
Reintroduction to AWS Multiple Account Management
midnight480
0
71
Try Dify self-hosted on AWS
midnight480
0
55
20241004_JAWSPANKRATION2024-re_Trospective-sending-swags
midnight480
1
88
Other Decks in Technology
See All in Technology
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
900
M3 Expressiveの思想に迫る
chnotchy
0
110
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
Lambda Web Adapterについて自分なりに理解してみた
smt7174
4
120
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
360
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
220
How Community Opened Global Doors
hiroramos4
PRO
1
120
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
270
Witchcraft for Memory
pocke
1
430
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.9k
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
30
11k
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
KATA
mclloyd
29
14k
Producing Creativity
orderedlist
PRO
346
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Code Reviewing Like a Champion
maltzj
524
40k
How GitHub (no longer) Works
holman
314
140k
GraphQLとの向き合い方2022年版
quramy
48
14k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Facilitating Awesome Meetings
lara
54
6.4k
Building Applications with DynamoDB
mza
95
6.5k
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