Nuxt.jsとFirebaseで個人開発した話

Transcript

1. Nuxt.jsとFirebaseで 個人開発した話 2022/09/8 フロントエンドLT会 vol.8
2. kenji7157 (kawanobe kenji) SoftwareEngineer #ENECHANGE #Vue #Nuxt #Firebase #GCP #最近React Twitter: @kenji7157 Github: @kenji7157
3. ENECHANGE
4. ENECHANGE
5. アジェンダ 1. 個人開発で作ったもの 2. 使用技術 3. その他 a. レスポンシブ対応 #Vuetify b. OGP画像対応 #Nuxt.js #Firebase Functions
6. 1. 作ったもの
7. 技術記事投稿サービス ~Ticketnote~ QiitaやZennのような技術記事投稿サービス もちろん無料です。（広告なしです。）
8. 技術記事投稿サービス ~Ticketnote~ ticketnote 検索
9. 2. 使用技術
10. 使用技術 • フロント：#Nuxt.js #TypeScript #Vuetify • バック：#Firebase Functions #Node.js • 認証：#Firebase Authentification • DB：#Firestore #Algoria(Firebase Extensions) • ストレージ：#Firebase Storage • ホスティング：#Firebase Hsoting #Google App Engine
12. Vuetify #レスポンシブ対応
13. レスポンシブ対応 • モバイルも考慮したUI • Vuetify …UIフレームワーク • https://next.vuetifyjs.com/
14. Vuetify レスポンシブ対応 <template> <v-toolbar> <v-app-bar-nav-icon></v-app-bar-nav-icon> <v-toolbar-title>ツールバータイトル</v-toolbar-title> <v-spacer></v-spacer> <v-btn > ツールバーボタン </v-btn> <v-btn icon> <v-icon>mdi-heart</v-icon> </v-btn> </v-toolbar> </template>
15. Vuetify レスポンシブ対応 <template> <v-toolbar> <v-app-bar-nav-icon></v-app-bar-nav-icon> <v-toolbar-title>ツールバータイトル</v-toolbar-title> <v-spacer></v-spacer> <v-btn v-if="!$vuetify.breakpoint.xs"> ツールバーボタン </v-btn> <v-btn icon> <v-icon>mdi-heart</v-icon> </v-btn> </v-toolbar> </template>
16. OGP対応 #Nuxt.js #Firebase Functions
17. OGP • OGP…Open Graph Protcol • FacebookやTwitterにタイトルや本文、画 像、URLなどの情報を任意で表示させる HTML要素
18. Nuxt.jsでOGPを設定 • head()関数で設定可能 ◦ https://nuxtjs.org/docs/features/ configuration#local-settings • og:imageで画像URLを指定することによっ て、ページURLを共有する際に画像を表示 できる ◦ 画像はどうやって生成するの？ <script> export default { head() { return { meta: [ { hid: 'og:description', property: 'og:description', content: '説明' }, { hid: 'og:url', property: 'og:url', content: 'ページURL' }, { hid: 'og:image', property: 'og:image', content: '画像URL' }, ] } } }; </script>
19. Firebase Functions で OGP用の画像生成 • 記事投稿時にFirebase Functionsを実行 ◦ Firebase FunctionsでOGP用の画像を生成 ▪ canvasを利用して画像生成 • https://github.com/Automattic/node-canvas ▪ 生成した画像はFirebase Storageに保存 ▪ 保存先URLを投稿ごとに管理できるようFirestoreに登録 • 各投稿ページのSSR時に、Firestoreに登録されたURLをOGPに設定
20. Twiiter Slack
21. Vue fes 2022
22. ENECHANGE We are hiring!!! https://www.wantedly.com/companies/enechange