2018/3/3 first PWA Study

1. Vuejs+GitHubPages
で始めるPWA
2018/3/3 第1回PWA勉強会
tomoko hirata

2. PWAを触るきっかけになった話をします

3. そのまえに自己紹介
平田智子
Twitter @10tomok0
GitHub https://github.com/tomoko523
Sler Windows/VB.NET/C#/Augular 5年くらい
→Gs`Academy(DEV4)
→Webエンジニア PHP/Nodejs/AWS/VueJs 1年くらい

4. きっかけ的な話
- なんでPWAを?
- なんでVuejsで?
- なんGitHubPagesで?

5. なんでPWAを？
● 今使ってる（フロントエンド）技術で手が出せそうだった
● アプリ作るって魅力的
● この技術を追って行ったら楽しそう
● 自分のスマホがAndroidなので試してみたかった

6. なんでVuejsで？
● 1番の理由はモダンで今一番自分が使えるフレームワークだと
思ったから
● vue-cliでPWAサイトを作成するテンプレートがあったから

7. なんでGitHubPagesで？
● ポートフォリオなら自分のGitHubに置いておきたい
● SSHのサイトが無料で作ることができる
● 手軽に試すことができる

8. 技術的な話

9. vue-cli
Vuejsを使ったアプリケーションの雛形を作成できるコマンドラインツール。
Node.js上で動作します。 README.md
使ったテンプレート

10. GitHubPages
GitHubによる静的サイトホスティングサービス。
今回はビルド後のソースだけdocsフォルダに配置して公開する設定にしました。

11. ハマったポイント
● デプロイするまでちゃんと動くかわからない(デベロッパーツールを使いこなしてなかった）
● GitHubPagesの公開方法でちょっと試行錯誤した(直下においたり、docsフォルダにおいたり)
デベロッパーツールのApplicationタブは
必読です!!

12. ソースはこちらです。よんでね！！
https://github.com/tomoko523/portfolio

13. ありがとうございました！！