=====GitHub上のionic3アプリのインストール=====
このページでは、Hello World後の初めてのionicアプリとして、\\
1.タイマーアプリのソースコードをGitHubからダウンロードして、\\
2.自分のパソコンにインストールを行い、\\
3.androidアプリを作成し、\\
3.自分のandroidスマホにインストールするところまで\\
を解説させて頂きます。

（環境）\\
Windows 8.1 Pro\\
Node.js 6.10.2\\
ionic-cli 3.4.0\\
VisualStudioCode


http://twosquirrel.mints.ne.jp/?p=16984

ソースコード\\
https://github.com/adash333/ionic3-timer

=====AndroidStudioのインストール=====

以下のページから、AndroidStudioをインストールしてください。AndroidStudio自体は使用しないのですが、ionicでandroidアプリをbuildするときに必要となるものが一括でインストールされます。

https://developer.android.com/studio

（参考）

[Android] Android Studio をインストールする手順（Windows）
2017/6/6\\
https://akira-watson.com/android/adt-windows.html
=====Gitのインストール=====

いきなりGit、、、いつもよくわからないGit、、、ですが、今回は、git cloneしか使いませんのでご安心ください。とりあえず、以下からGit for Windowsをダウンロードして、手順に従ってインストールしてください。

https://git-for-windows.github.io/\\
{{:pasted:20170613-233709.png}}

上記のDownloadをクリックすると、Git-2.13.1-64-bit.exe(約37MB)がダウンロードされるので、ダウンロード完了後、ダブルクリックして、手順通りにインストールします。途中、何を選択したらよいか迷いますが、以下の「こっそり始めるGit/GitHub超入門（１）」の通りにやるとよいです。具体的には、基本はそのままデフォルトのものを選択していき、
Adjusting your PATH environment　では、Use Git from Git Bash only　を選び、\\
Configuring the line ending conversions では、Checkout as-is, commit as-is を選びます。

(参考)

2016年03月31日 05時00分 更新
こっそり始めるGit／GitHub超入門（1）：
初心者でもWindowsやMacでできる、Gitのインストールと基本的な使い方 (1/5)\\
http://www.atmarkit.co.jp/ait/articles/1603/31/news026.html

サルでもわかるGit入門\\
http://www.backlog.jp/git-guide/intro/intro1_1.html

=====GitHub上のアプリをダウンロードしてインストール=====
まずは、（ほぼ）完成系のアプリをGitHubからダウンロードして、自分のパソコンで動かしてみます。

(1)VisualStudioCodeの起動
C:\ionic\ フォルダの中で右クリックして、「Open with Code」をクリック。

{{:pasted:20170613-235634.png}}

(2)Ctrl+@を押して、cmd.exeの画面を出す。


(3)以下のコマンドを入力して、git cloneする。

<code>
git clone https://github.com/adash333/ionic3-timer.git
</code>

{{:pasted:20170613-235351.png}}

(4)npm installする。

<code>
cd ionic3-timer
npm install
</code>

数分かかる。

{{:pasted:20170614-000216.png}}

{{:pasted:20170614-000232.png}}

(5)アプリの起動

<code>
ionic serve
</code>

いろいろ聞かれることがあるが、とりあえず、Yes（Enterを押すだけ）としておく。数分かかる。

{{:pasted:20170614-000510.png}}

すると、自動的にブラウザが開いて、以下のように表示されます。

{{:pasted:20170614-000644.png}}

Startボタンをクリックすると、１秒ごとにカウントアップされ、

{{:pasted:20170614-000722.png}}

そのあと、STOPボタンをクリックすると、タイマーが止まります。

{{:pasted:20170614-000759.png}}

(6)イメージファイルの挿入。

imageは、

https://www.photo-ac.com

などからダウンロードして、sakura.jpgという名前に変更して、www/assets/img/ フォルダの中に保存します。\\
(img/　フォルダを、www/assets/　フォルダの中に新規作成します。) 

{{:pasted:20170614-001251.png}}

ブラウザのリロード（更新）ボタンをクリックします。

{{:pasted:20170614-001336.png}}

すると、以下のような画面になります。

{{:pasted:20170614-001419.png}}

(7)サーバ停止

VisualStudioCodeの、cmd.exeの画面で、「Ctrl+C」を押します。そのあと、Y、Enterを押すと、サーバが停止します。

{{:pasted:20170614-001945.png}}

(8)androidアプリの作成

<code>
ionic cordova platform add android
ionic cordova build android
</code>

3分くらいかかります。エラーが出てうまくいかない場合は、まずは、

AndroidStudio\\
https://developer.android.com/studio

がインストールされているか再度確認してみてください。それでもうまく行かない場合は、エラーの内容をGoogle検索したり、\\
http://qiita.com/567000/items/dc4917027cf060a3e2ea\\
を参考になさったりしてください。

また、Webアプリとしてビルドするときには、2行目は、

<code>
ionic cordova build android --prod
</code>

そして、AOTコンパイルという処理を行った方がよいらしいです。（参考：[[http://amzn.to/2BkRGW0|Ionicで作る モバイルアプリ制作入門 Web/iPhone/Android対応]]p42）

{{:pasted:20170614-002057.png}}

{{:pasted:20170614-002302.png}}

{{:pasted:20170614-002417.png}}

出来上がったapkファイルの場所を開き、メールで自分のandroidスマホに送信します。約4.3MBです。

{{:pasted:20170614-002534.png}}

(9)androidスマホにインストール

インストールして起動すると、以下のようなタイマーアプリの画面となります。(arrows M03)

{{:pasted:20170614-003226.png}}

お疲れ様でした。上記のコードについては、[[ionic3でタイマーアプリ|こちらのページ]]で解説していきたいと思います。

 (参考)\\
http://twosquirrel.mints.ne.jp/?p=15712\\
http://twosquirrel.mints.ne.jp/?p=15745

=====商用フリーの写真やイラスト=====

写真\\
Pixabay\\
https://pixabay.com

イラスト\\
いらすとや\\
http://www.irasutoya.com

=====リンク=====
前：
<wrap hi>
[[おすすめのIonic3入門書2017年版]]
</wrap>\\
[[sidebar|目次]]\\
次：
<wrap hi>
[[ionic3で計算アプリ]]
</wrap>