Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ポートフォリオ作る話 / PWA Night vol.12
Chinen
January 15, 2020
Programming
0
49
ポートフォリオ作る話 / PWA Night vol.12
Chinen
January 15, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
chinen
0
35
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
chinen
1
160
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
chinen
0
780
Shifter staticでREST APIしたい / Shifter Meetup 2020-12-02
chinen
0
440
実践PWA 2020 / charitycon_oki2020
chinen
0
370
Shifterを選定するまでに検討したこと / shifter-meetup0603
chinen
0
500
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
chinen
1
330
Vue.jsの基礎 / v-okinawa meetup #2
chinen
0
110
Vue.js初級編 / v-okinawa meetup #1
chinen
0
240
Other Decks in Programming
See All in Programming
ゼロから作る Protocol Buffer のパーサーとレキサー / Writing Protocol Buffer Parser/Lexer in Go from scratch
yoheimuta
1
160
型パラメータが使えるようになったのでLINQを実装してみた
makki_d
2
500
クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website
clockmaker
2
1.1k
dbtとBigQueryで始めるData Vault入門
kazk1018
0
170
Language Summit 2022: WebAssembly: Python in the browser and beyond
tiran
2
300
Groovy Roadmap
paulk
7
13k
Let's make a contract: the art of designing a Java API
mariofusco
0
150
近況PHP / PHP in now a days
uzulla
3
1.2k
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
microcms
0
440
The future of trust stores in Python
sethmlarson
0
180
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
hpgrahsl
0
300
Is Rust a great language for building Kubernetes ecosystem
deepu105
0
140
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
126
5.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
The Mythical Team-Month
searls
208
39k
What's new in Ruby 2.0
geeforr
336
30k
Designing for Performance
lara
596
63k
A designer walks into a library…
pauljervisheath
196
16k
Design by the Numbers
sachag
271
17k
Music & Morning Musume
bryan
35
4.1k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
Thoughts on Productivity
jonyablonski
43
2.2k
Mobile First: as difficult as doing things right
swwweet
212
7.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
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大会! シェアお願いします!