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
29
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
Amazon Q Developer for CLI の紹介
midnight480
0
61
Postman Flows ✖️ Backlog API で可能性を探る
midnight480
0
110
Amazon Q Developer for CLIの基本的な使い方と便利なコマンドの紹介
midnight480
0
120
20250531 JAWS-UG佐賀 生成AI
midnight480
0
36
Amazon Q Developer for CLI 〜 Blender、Backlog GitをMCPで操作してみた 〜
midnight480
0
150
Control policies for AWS Organizations
midnight480
0
110
20240201_JAWS-UG_SAGA
midnight480
0
69
Reintroduction to AWS Multiple Account Management
midnight480
0
76
Try Dify self-hosted on AWS
midnight480
0
62
Other Decks in Technology
See All in Technology
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
550
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
SAE J1939シミュレーション環境構築
daikiokazaki
0
150
生成AIによる情報システムへのインパクト
taka_aki
1
140
AIコードアシスタントとiOS開発
jollyjoester
1
230
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
160
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
390
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
660
今日からあなたもGeminiを好きになる
subaruhello
1
560
20250719_JAWS_kobe
takuyay0ne
1
160
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
110
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Practical Orchestrator
shlominoach
189
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Why Our Code Smells
bkeepers
PRO
337
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
KATA
mclloyd
30
14k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Invisible Side of Design
smashingmag
301
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
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