====== 181010 Ionic3とPWAでCameraを写経してみる ======

前回、gitをダウンロードしてnpm installしたらできた。

http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic3%E3%81%A7camera%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3#ionic3%E3%81%A7pwa%E3%81%A7%E3%82%AB%E3%83%A1%E3%83%A9

今回は、これをionic startから作っていきたい。

===== 開発環境 =====
<code>
Windows 8.1 Pro
NodeJS : v8.12.0
npm    : 6.4.1

ionic (Ionic CLI)  : 4.2.0
Ionic Framework    : ionic-angular 3.9.2
</code>

===== 1. Ionic3アプリの作成 =====

<code>
ionic start ionic3-pwa-camera blank
// すべて、No
cd ionic3-pwa-camera
ionic serve
</code>

{{:z_blog:2018:pasted:20181010-170605.png}}

===== Ionic3アプリのPWA化 =====

src/index.html

(変更前)
{{:z_blog:2018:pasted:20181010-173841.png}}

(変更後)
{{:z_blog:2018:pasted:20181010-174004.png}}

===== src/pages/home/home.html =====

(変更前)
{{:z_blog:2018:pasted:20181010-174301.png}}

(変更後)
{{:z_blog:2018:pasted:20181010-180835.png}}

src/pages/home/home.ts

(変更前)
{{:z_blog:2018:pasted:20181010-180903.png}}

(変更後)
{{:z_blog:2018:pasted:20181010-182823.png}}

src/pages/home/home.scss

(変更後)
{{:z_blog:2018:pasted:20181010-183159.png}}

===== GitHubに登録 =====

GitHubにログインして、新規リポジトリの作成。その後は、GitHubの画面の指示に従う

<code>
echo "# ionic3-pwa-camera" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/adash333/ionic3-pwa-camera.git
//上記アドレスはご自身のものを利用してください
git push -u origin master
</code>

{{:z_blog:2018:pasted:20181010-183547.png}}

===== ソースコード =====

https://github.com/adash333/ionic3-pwa-camera


{{:z_blog:2018:pasted:20181010-183841.png}}

===== Netlifyにdeploy =====
Netlifyは、自分だけしか見ることはできないが、無料でいくつでもPWAをデプロイすることができる。非常に便利。

https://www.netlify.com/
{{:z_blog:2018:pasted:20181010-184843.png}}

{{:z_blog:2018:pasted:20181010-184910.png}}

{{:z_blog:2018:pasted:20181010-185020.png}}

deploy後のページをandroidスマホで開いたところ、ちゃんとカメラを利用することができた。

===== 写経元サイト =====

https://github.com/peterpeterparker/ionic-pwa-camera-no-plugins
{{:z_blog:2018:pasted:20181010-182908.png}}