![](https://cdn.myportfolio.com/e1f236c2-c54d-4ef9-88aa-68d8e06dfb53/09bd3ef5-ddd9-46ce-9179-ff6e630dcda1_rw_1920.jpg?h=e663255af2a7ec6fb4158ba6e439e52a)
![](https://cdn.myportfolio.com/e1f236c2-c54d-4ef9-88aa-68d8e06dfb53/a48a6abd-ecd5-49b2-ab6a-45b2a1bf319b_rw_1920.jpg?h=af1b486bb5968a7b53f2f8d9d832771a)
![](https://cdn.myportfolio.com/e1f236c2-c54d-4ef9-88aa-68d8e06dfb53/a15f41d8-3869-43eb-8231-85c9b17b78b9_rw_1920.jpg?h=395f040b2e7261423f033efc7dea43f2)
![ページトップ](https://cdn.myportfolio.com/e1f236c2-c54d-4ef9-88aa-68d8e06dfb53/98938484-ddaa-45cf-9d0b-379fe4f80c00_rw_1200.png?h=dd3b11bfe423821cf9d5358a410ee49d)
ページトップ
![ナビゲーション](https://cdn.myportfolio.com/e1f236c2-c54d-4ef9-88aa-68d8e06dfb53/5f796f27-7611-4e18-82f5-d54956f1b779_rw_1200.png?h=4255a6f93b2dd61382ccb7fa638dae4f)
ナビゲーション
![コンテンツ](https://cdn.myportfolio.com/e1f236c2-c54d-4ef9-88aa-68d8e06dfb53/f329c7c9-ade9-4f6d-81ac-82ea4dbb689a_rw_1200.png?h=988d265314886c98311c7b0165266162)
コンテンツ
2021.4 - 8
shunhiro.com
Web Page / JAMStack System
使用言語/ツール: Nuxt.js、Firebase Hosting / Realtime Database / Authentication / Functions、CircleCI、Compute Engine、Linux、Node.js、Twitter API、XD
シンガーソングライター しゅんひろさんのホームページの制作
Webデザインから実装まで一貫して開発
フレームワークとしてNuxt.jsを使い、サーバサイドジェネレーション(SSG)をすることでホームページとして最適化した。
それに加えて、ユーザがTwitterで「#しゅんひろ応援」のハッシュタグをつけてツイートすると、ホームページに掲載される。
Webサイトのデータはしゅんひろさん本人が行える、CMSとなっている。管理者画面からログインすることで、各種データの更新ができ、公開ボタンを押すことで自動的にページが更新される。
Link: shunhiro.com
技術的な詳細
Nuxt.jsのホスティングはFirebase Hostingで行っており、CircleCIで静的サイトとしてビルド(SSG)し、デプロイしている。
管理画面(CMS)はNuxt.jsをSPAモードで実装した。データベースにはFirebase Realtime Databaseを使っている。デプロイボタンを押すと、Firebase Cloud Functions経由でデータベースを更新し、CircleCIのビルドとデプロイを行うワークフローをトリガーする。ビルド時にはデータベースからデータを取得し、ページをレンダリングするJamstackになっている。
ハッシュタグ付きツイートの表示は、TwitterのストリーミングAPIでハッシュタグ付きツイートを監視し、該当するツイートがあった場合用意したbotにRTさせている。このbotをしゅんひろさんのアカウントで作成したリストに追加し、そのリストをページに埋め込んでいる。なお、この処理はGoogle Compute EngineのLinuxインスタンス上でNode.jsで動作している。
![アーキテクチャ](https://cdn.myportfolio.com/e1f236c2-c54d-4ef9-88aa-68d8e06dfb53/a0fcd355-eb22-4b17-9ee3-32e901c2d57b_rw_1920.jpg?h=e616f7458784911ea76bc51636814ea1)
アーキテクチャ
![](https://cdn.myportfolio.com/e1f236c2-c54d-4ef9-88aa-68d8e06dfb53/61c49978-7d96-4535-b493-0143ded3d50c_rw_1200.png?h=e492b2e3f1eb1f2d289ad5f96da6526c)
管理者ページ