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
ポートフォリオ作る話 / PWA Night vol.12
Search
Chinen
January 15, 2020
Programming
0
110
ポートフォリオ作る話 / PWA Night vol.12
Chinen
January 15, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2023
chinen
1
280
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.1k
WWDC2023-Recap-LT
chinen
1
85
Web Push対応状況2023
chinen
0
420
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
110
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
120
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.2k
frontend-conf-okinawa-2022
chinen
0
340
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
300
Other Decks in Programming
See All in Programming
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
120
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.6k
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
770
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
The Invisible Side of Design
smashingmag
294
49k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Code Reviewing Like a Champion
maltzj
513
39k
How STYLIGHT went responsive
nonsquared
92
4.8k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
Adopting Sorbet at Scale
ufuk
67
8.6k
Transcript
ポートフォリオ作る話 株式会社TAM 知念昌史 2020/01/15
新年ですね!
• ポートフォリオ作りたい • 新しい技術使いたい
知念 昌史 / まぁし(Twitter) • 株式会社TAMのフロントエンドエンジニア(CSS、Vue.jsが好き) • 東京オフィスに所属しながら沖縄でリモートワーク(2019年6月〜) • 技術コミュニティ運営(沖縄:v-okinawa
/ 東京:PWA Night) • 得意分野:HTML / CSS設計 / JavaScript / PWA / Movable Type / WordPress • ポケモン剣盾ほしすぎる生活 Twitter@chocodogmagic
ポートフォリオ作成でやってみたいもの • PWA(キャッシュ・ホーム追加のメッセージ実装) • CDN • Gitからデプロイ • ヘッドレスCMS •
静的ページ生成 • Portal • Turbolinks • CSSアニメーションでメインビジュアル
ポートフォリオ作成でやってみたいもの • PWA・・・Workbox → JavaScript • CDN・・・Netlify • Gitからデプロイ・・・GitHub →
Netlify • ヘッドレスCMS・・・microCMS • 静的ページ生成・・・Nuxt.js(Vue) • Portal・・・<portal> • Turbolinks・・・JavaScript • CSSアニメーションでメインビジュアル・・・@keyframes
手順 • Step1:Netlify導入 • Step2:GitHub導入 • Step3:Nuxt.js導入 • Step4:microCMS導入 •
Step5:microCMSとNuxt.jsをつなぐ • Step6:NetlifyとGitHubをつなぐ • Step7:詳細ページを作成してportalで遷移 • Step8:PWAでキャッシュコントロール • Step9:スタイル調整、メインビジュアル用意 • Step10:他ページ展開 (これ考えたの本日15:00)
Step1:Netlify導入 https://www.netlify.com/
None
Step1 クリア!
Step2:GitHub導入 https://github.co.jp/
None
Step2 クリア!
Step3:Nuxt.js導入 https://ja.nuxtjs.org/guide/installation/
None
Step3 クリア!
Step4:microCMS導入 https://microcms.io/
None
Step4 クリア!
Step5:microCMSとNuxt.jsをつなぐ Vue側はAxiosでいけるはず・・・
ここまで!(本日18:00時点)
まとめ • 昨年、業務やプライベートの予定で時間が取れず、 新しいことができてなくて何かやりたかった • LT駆動開発(LT申し込めば締め切りに追われてできるはず) と思ったけど、時間が無いものは無い • でも諦めずにLTする心
LTしたい話 株式会社TAM 知念昌史 2020/01/15
ちょっと宣伝:1/21(火)沖縄と仙台で勉強会! v-okinawa Vue.js/Nuxt.js meetup #4 仙台とコラボLT大会! シェアお願いします!