[PDCAアプリを作る] ① ionicプロジェクト作成 ➕ ライブコーディング

2017/08/01追記
[PDCAアプリを作る] ③PDCAアプリのリリース
http://qiita.com/ybangit/items/f36ec93a17e73fea97a1

-------------
個人的な思いで「pdcaアプリ」を作成することにしました。
その作成履歴をqiitaに残しながら、作成して行きたいと思います。

当文書の:one:から:five:は、ionicアプリの基本的な実行手順を書きました。
 :six: から、ionicでのライブコーディング環境について書きました。


----------------------------------------------------
[開発環境]
mac
Xcode8-beta
ionic
 
>ionic、及び、Xcode環境の導入は本家サイトを参考にしてください。
http://ionicframework.com/

----------------------------------------------------
:one:  ionic を用いて、プロジェクトベースを作成する。sidemenuで始めます。
<Font color="maroon">$ionic start PDCA sidemenu</font>
(以下、<Font color="maroon">$xxxxx</font> の記述はコマンドライン入力を示します。)

>user下にフォルダ'PDCA'が作られる。:expressionless: 

<Font color="maroon">$cd PDCA</font>
>作業フォルダに移動


:two: アプリ名を設定する。
PDCAフォルダ直下のconfig.xmlのnameタグを変更する。
(プロジェクト名が入るファイル名はビルド時に設定したものに変わります。）
>
変更前：<name>HelloCordova</name>
変更後：<name>PDCA</name></p>


:three: ビルドして実行する。
<Font color="maroon">$ionic platform add ios</font>
<Font color="maroon">$ionic build ios</font>

:exclamation: ここで、Xcodeのコマンドラインツールが無いというエラーが出る場合は、ツールをダウンロード必要がある場合はダウンロードし、Xcodeのmenu、Xcode -> prefarence -> Locationタブ ->command line toolのタブからtoolを指定してください。 
![スクリーンショット 2016-06-21 17.35.21.png](https://qiita-image-store.s3.amazonaws.com/0/118986/91881c2b-17e3-5727-b10a-21757d07dbf0.png)

:four: ビルドがうまくいったら、一度iosエミュレーターを動かしてみましょう。
方法１ 
<Font color="maroon">$ionic emulate ios</font>
方法２
PDCA/platforms/ios/PDCA.xcodeproj をクリックし、Xcodeを起動する。
![スクリーンショット 2016-06-21 17.42.59.png](https://qiita-image-store.s3.amazonaws.com/0/118986/902a79e2-9d63-ea0f-e71a-25762ee2123c.png)
Xcodeで好きなエミュレータを選び。 :arrow_forward: で実行する

:five: エミュレータの稼働
![スクリーンショット 2016-06-21 17.52.24.png](https://qiita-image-store.s3.amazonaws.com/0/118986/e80f2947-4fb7-c8db-3e65-2daf6c4c8d0f.png)

まずは、ここまでを準備することが開発の入り口です。

:six: ライブコーディングのスタイルにする。

>ここでのライブコーディングとは、Xcodeでコードを編集し、<Font color="maroon">その結果がリアルタイムに自動的に実行結果に反映される</font>ことを確認しながら、コードの変更を行ってゆく開発環境(状態)を言っています。


コマンドライン入力
<Font color="maroon">$ionic serve</font>

>そうするとブラウザ上でアプリの実行結果が表示されます。

![スクリーンショット 2016-06-21 18.59.05.png](https://qiita-image-store.s3.amazonaws.com/0/118986/f95a1f49-3769-21f4-c293-9da9fd6a3325.png)


そしてXcode上で、この文字列の箇所を変更してみましょう。

>(一応補足としてですが、最初にXcode上でwwwフォルダを選択して、右のウィンドウでabsolute pathに切り替えると、実際のファイルリストが読み込まれるようになります)
![スクリーンショット 2016-06-21 19.01.15.png](https://qiita-image-store.s3.amazonaws.com/0/118986/125573ba-f8ed-57a7-0ccc-2be5394d6d08.png)


変更するファイルは、www/js/controllers.js です。
>赤枠が初期画面に表示されているメニューを示す文字列になっています。これを適当に変更して、saveしてください。
![スクリーンショット 2016-06-21 19.05.39.png](https://qiita-image-store.s3.amazonaws.com/0/118986/eb9e083e-b9b1-4274-c167-78a394453163.png)

'Reggae' を 'ReggaeAAAAA'　にしました。command+S でsaveします。

>![スクリーンショット 2016-06-21 19.10.08.png](https://qiita-image-store.s3.amazonaws.com/0/118986/e278e337-1925-aa08-78fa-0e542e5dd733.png)


そうするとどうでしょうか。Xcodeのコードを変更して保存した瞬間に、
ブラウザ側のアプリ実行結果も自動的に更新されたと思います。
これがライブコーディングの環境です。 :smiley: :tada: :smiley: 
>![スクリーンショット 2016-06-21 19.13.40.png](https://qiita-image-store.s3.amazonaws.com/0/118986/8d2dcf0e-8aac-4efd-3a23-ece6baa53055.png)


他にもソースを変更して、都度実行結果に反映されることを確認してください。
このような環境で開発を行うことで、１つ１つの変更、機能追加を、確実に１つ１つ結果を確認しながら行うことができ、慣れればとても便利な開発状態になります。

:seven: Xcodeでのソースコードの変更の、実ファイルへの反映について
>
<Font color="maroon">Xcodeで変更した内容は、実態のファイル(finderで見るもの)には即時には反映されません。</font>
<Font color="red">Xcodeでのソース変更を、実ファイルに反映するためには、コマンドライン側から一度ビルドする必要があります。</font>

コマンドライン入力
<Font color="maroon">$ionic build ios</font>

>これを一度行うことで、Xcode側で行った変更が、実ファイルに反映されることが確認できると思います。ソースコードの管理で混乱しないように一度ビルドを実行しコードの変更反映の動きを確認してください。<Font color="maroon">Xcode上でのビルドでは実ファイルには変更が反映されないので、必ずコマンドラインでのビルドを行ってください。</font>


これはionic側とXcode側でのソース管理の内部の仕組みによるものですが、もっと簡単な方法があればご教授願います。

<Font color="blue">以上で、ionicでライブコーディングによるアプリ開発を行う準備が整いました。</font> :smile: :balloon: :heart_eyes: