Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Start PWA from vuejs+github pages

1,028 views

Published on

2018/3/3 first PWA Study

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Start PWA from vuejs+github pages

  1. 1. Vuejs+GitHubPages で始めるPWA 2018/3/3 第1回PWA勉強会 tomoko hirata
  2. 2. PWAを触るきっかけになった話をします
  3. 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. 4. きっかけ的な話 - なんでPWAを? - なんでVuejsで? - なんGitHubPagesで?
  5. 5. なんでPWAを? ● 今使ってる(フロントエンド)技術で手が出せそうだった ● アプリ作るって魅力的 ● この技術を追って行ったら楽しそう ● 自分のスマホがAndroidなので試してみたかった
  6. 6. なんでVuejsで? ● 1番の理由はモダンで今一番自分が使えるフレームワークだと 思ったから ● vue-cliでPWAサイトを作成するテンプレートがあったから
  7. 7. なんでGitHubPagesで? ● ポートフォリオなら自分のGitHubに置いておきたい ● SSHのサイトが無料で作ることができる ● 手軽に試すことができる
  8. 8. 技術的な話
  9. 9. vue-cli Vuejsを使ったアプリケーションの雛形を作成できるコマンドラインツール。 Node.js上で動作します。 README.md 使ったテンプレート
  10. 10. GitHubPages GitHubによる静的サイトホスティングサービス。 今回はビルド後のソースだけdocsフォルダに配置して公開する設定にしました。
  11. 11. ハマったポイント ● デプロイするまでちゃんと動くかわからない(デベロッパーツールを使いこなしてなかった) ● GitHubPagesの公開方法でちょっと試行錯誤した(直下においたり、docsフォルダにおいたり) デベロッパーツールのApplicationタブは 必読です!!
  12. 12. ソースはこちらです。よんでね!! https://github.com/tomoko523/portfolio
  13. 13. ありがとうございました!!

×