$30 off During Our Annual Pro Sale. View Details »

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

Chinen
January 15, 2020

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

Chinen

January 15, 2020
Tweet

More Decks by Chinen

Other Decks in Programming

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/

  9. None
  10. Step1 クリア!

  11. Step2:GitHub導入 https://github.co.jp/

  12. None
  13. Step2 クリア!

  14. Step3:Nuxt.js導入 https://ja.nuxtjs.org/guide/installation/

  15. None
  16. Step3 クリア!

  17. Step4:microCMS導入 https://microcms.io/

  18. None
  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大会! シェアお願いします!