ポートフォリオ作る話 / PWA Night vol.12

Transcript

1. ポートフォリオ作る話 株式会社TAM 知念昌史 2020/01/15
2. 新年ですね！
3. • ポートフォリオ作りたい • 新しい技術使いたい
4. 知念 昌史 / まぁし（Twitter） • 株式会社TAMのフロントエンドエンジニア（CSS、Vue.jsが好き） • 東京オフィスに所属しながら沖縄でリモートワーク（2019年6月〜） • 技術コミュニティ運営（沖縄：v-okinawa / 東京：PWA Night） • 得意分野：HTML / CSS設計 / JavaScript / PWA / Movable Type / WordPress • ポケモン剣盾ほしすぎる生活 Twitter@chocodogmagic
5. ポートフォリオ作成でやってみたいもの • PWA（キャッシュ・ホーム追加のメッセージ実装） • CDN • Gitからデプロイ • ヘッドレスCMS • 静的ページ生成 • Portal • Turbolinks • CSSアニメーションでメインビジュアル
6. ポートフォリオ作成でやってみたいもの • PWA・・・Workbox → JavaScript • CDN・・・Netlify • Gitからデプロイ・・・GitHub → Netlify • ヘッドレスCMS・・・microCMS • 静的ページ生成・・・Nuxt.js（Vue） • Portal・・・<portal> • Turbolinks・・・JavaScript • CSSアニメーションでメインビジュアル・・・@keyframes
7. 手順 • Step1：Netlify導入 • Step2：GitHub導入 • Step3：Nuxt.js導入 • Step4：microCMS導入 • Step5：microCMSとNuxt.jsをつなぐ • Step6：NetlifyとGitHubをつなぐ • Step7：詳細ページを作成してportalで遷移 • Step8：PWAでキャッシュコントロール • Step9：スタイル調整、メインビジュアル用意 • Step10：他ページ展開 （これ考えたの本日15:00）
8. Step1：Netlify導入 https://www.netlify.com/
10. Step1 クリア！
11. Step2：GitHub導入 https://github.co.jp/
13. Step2 クリア！
14. Step3：Nuxt.js導入 https://ja.nuxtjs.org/guide/installation/
16. Step3 クリア！
17. Step4：microCMS導入 https://microcms.io/
19. Step4 クリア！
20. Step5：microCMSとNuxt.jsをつなぐ Vue側はAxiosでいけるはず・・・
21. ここまで！（本日18:00時点）
22. まとめ • 昨年、業務やプライベートの予定で時間が取れず、 新しいことができてなくて何かやりたかった • LT駆動開発（LT申し込めば締め切りに追われてできるはず） と思ったけど、時間が無いものは無い • でも諦めずにLTする心
23. LTしたい話 株式会社TAM 知念昌史 2020/01/15
24. ちょっと宣伝：1/21（火）沖縄と仙台で勉強会！ v-okinawa Vue.js/Nuxt.js meetup #4 仙台とコラボLT大会！ シェアお願いします！