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から作っていきたい。

開発環境

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

1. Ionic3アプリの作成

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

Ionic3アプリのPWA化

src/index.html

(変更前)

(変更後)

src/pages/home/home.html

(変更前)

(変更後)

src/pages/home/home.ts

(変更前)

(変更後)

src/pages/home/home.scss

(変更後)

GitHubに登録

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

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