SlideShare a Scribd company logo
Vuejs+GitHubPages
で始めるPWA
2018/3/3 第1回PWA勉強会
tomoko hirata
PWAを触るきっかけになった話をします
そのまえに自己紹介
平田智子
Twitter @10tomok0
GitHub https://github.com/tomoko523
Sler Windows/VB.NET/C#/Augular 5年くらい
→Gs`Academy(DEV4)
→Webエンジニア PHP/Nodejs/AWS/VueJs 1年くらい
きっかけ的な話
- なんでPWAを?
- なんでVuejsで?
- なんGitHubPagesで?
なんでPWAを?
● 今使ってる(フロントエンド)技術で手が出せそうだった
● アプリ作るって魅力的
● この技術を追って行ったら楽しそう
● 自分のスマホがAndroidなので試してみたかった
なんでVuejsで?
● 1番の理由はモダンで今一番自分が使えるフレームワークだと
思ったから
● vue-cliでPWAサイトを作成するテンプレートがあったから
なんでGitHubPagesで?
● ポートフォリオなら自分のGitHubに置いておきたい
● SSHのサイトが無料で作ることができる
● 手軽に試すことができる
技術的な話
vue-cli
Vuejsを使ったアプリケーションの雛形を作成できるコマンドラインツール。
Node.js上で動作します。 README.md
使ったテンプレート
GitHubPages
GitHubによる静的サイトホスティングサービス。
今回はビルド後のソースだけdocsフォルダに配置して公開する設定にしました。
ハマったポイント
● デプロイするまでちゃんと動くかわからない(デベロッパーツールを使いこなしてなかった)
● GitHubPagesの公開方法でちょっと試行錯誤した(直下においたり、docsフォルダにおいたり)
デベロッパーツールのApplicationタブは
必読です!!
ソースはこちらです。よんでね!!
https://github.com/tomoko523/portfolio
ありがとうございました!!

More Related Content

PPTX
PWAでタイマーを 作ってみた
PDF
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
PPTX
PDF
HTML5とOSSで作るブラウザで簡単顔認識
PDF
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
PPTX
PDF
初めての Raspberry pi 〜プラレールをunityの世界の中で走らせよう〜 (1)
PWAでタイマーを 作ってみた
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
HTML5とOSSで作るブラウザで簡単顔認識
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
初めての Raspberry pi 〜プラレールをunityの世界の中で走らせよう〜 (1)

What's hot (20)

PDF
個人で作っているgoのプロダクト by zchee編
PPTX
The Bash in Tokyo : AppKitとUIKit
PDF
Cloud functionsの紹介
PDF
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
PDF
新人教育と(Javaと)Python
PDF
たった一ファイルの python スクリプトから始めるOSS開発入門 / PyCon JP 2016
PDF
Go Friday 傑作選
PDF
Python入門 コードリーディング - PyConJP2016
PDF
Google Assistant関係のセッションまとめ
PPTX
Symfonyコンポーネントで生まれ変わるEC-CUBE
PDF
OSSと私
PDF
スッとGoを取り入れる
PDF
Webサイトに動きをつける、jQueryプラグインの設置方法 先生:田中 晶子
PDF
Namespace API を用いたマルチテナント型 Web アプリの実践
PPTX
ODSC East 2017 Report
PDF
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
PDF
Cloud Functionsの紹介
PPTX
Document based application
PPTX
自宅で仕事。安くなってきたGPUインスタンスをParsecで活用しよう。
PDF
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
個人で作っているgoのプロダクト by zchee編
The Bash in Tokyo : AppKitとUIKit
Cloud functionsの紹介
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
新人教育と(Javaと)Python
たった一ファイルの python スクリプトから始めるOSS開発入門 / PyCon JP 2016
Go Friday 傑作選
Python入門 コードリーディング - PyConJP2016
Google Assistant関係のセッションまとめ
Symfonyコンポーネントで生まれ変わるEC-CUBE
OSSと私
スッとGoを取り入れる
Webサイトに動きをつける、jQueryプラグインの設置方法 先生:田中 晶子
Namespace API を用いたマルチテナント型 Web アプリの実践
ODSC East 2017 Report
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
Cloud Functionsの紹介
Document based application
自宅で仕事。安くなってきたGPUインスタンスをParsecで活用しよう。
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
Ad

Similar to Start PWA from vuejs+github pages (20)

PPTX
VueとAWSAppSyncで始めるチャットアプリ開発
PDF
Ninja framework使ってみた
PDF
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
PDF
Introduction to Favmemo for Immature Engineers
PDF
いまさら聞けない!?Backbone.js 超入門
PPTX
子育てで覚える AWS Organizations 〜ITエンジニア英才教育〜
PDF
Goでwebアプリを開発してみよう
ODP
PySide/QtWebkitで楽々 slideshare Hack
PPTX
PWA+TWA
ODP
HTML5 のお話
PDF
Djangoエンジニアの観点から見たHue
PDF
Gitoriousをubuntu 10.04 LTSへインストール
PDF
翻訳から始めるVue.js 入門
PPTX
Web開発の 今までとこれから
PDF
Vue.js with Go
PPTX
Gradle入門
PPTX
Goはじめました
PDF
Riverpodでテストを書こう
PPTX
Challenge PWA!! Technical Edition @JAG201809
PPTX
匠Methodを使った製品開発の現場
VueとAWSAppSyncで始めるチャットアプリ開発
Ninja framework使ってみた
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Introduction to Favmemo for Immature Engineers
いまさら聞けない!?Backbone.js 超入門
子育てで覚える AWS Organizations 〜ITエンジニア英才教育〜
Goでwebアプリを開発してみよう
PySide/QtWebkitで楽々 slideshare Hack
PWA+TWA
HTML5 のお話
Djangoエンジニアの観点から見たHue
Gitoriousをubuntu 10.04 LTSへインストール
翻訳から始めるVue.js 入門
Web開発の 今までとこれから
Vue.js with Go
Gradle入門
Goはじめました
Riverpodでテストを書こう
Challenge PWA!! Technical Edition @JAG201809
匠Methodを使った製品開発の現場
Ad

More from Hirata Tomoko (11)

PDF
Goの深め方
PDF
Let's try to use Background sync
PDF
Use Laravel telescope
PDF
Railsチュートリアル(second)を終えて
PPTX
Walking front end
PPTX
エンジニアが Webを学ぶために やっててよかったこと
PPTX
Rails5クイックスタート
PPTX
Electronからはじめるnodejs
PPTX
Railsのフロントエンド開発を考える
PPTX
Rails+Markdownでなにかつくる
PPTX
WindowsユーザのためのRails環境構築
Goの深め方
Let's try to use Background sync
Use Laravel telescope
Railsチュートリアル(second)を終えて
Walking front end
エンジニアが Webを学ぶために やっててよかったこと
Rails5クイックスタート
Electronからはじめるnodejs
Railsのフロントエンド開発を考える
Rails+Markdownでなにかつくる
WindowsユーザのためのRails環境構築

Start PWA from vuejs+github pages