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
140
ポートフォリオ作る話 / PWA Night vol.12
Chinen
January 15, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
110
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
570
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
CursorはMCPを使った方が良いぞ
taigakono
1
190
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
Deep Dive into ~/.claude/projects
hiragram
10
1.9k
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
XP, Testing and ninja testing
m_seki
3
210
C++20 射影変換
faithandbrave
0
550
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
660
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
5つのアンチパターンから学ぶLT設計
narihara
1
120
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Gamification - CAS2011
davidbonilla
81
5.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Writing Fast Ruby
sferik
628
62k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
RailsConf 2023
tenderlove
30
1.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A designer walks into a library…
pauljervisheath
207
24k
Building Adaptive Systems
keathley
43
2.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
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大会! シェアお願いします!