iOS
Angular
ionic
アプリ開発

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

More than 1 year has passed since last update.

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で始めます。

$ionic start PDCA sidemenu

(以下、$xxxxx の記述はコマンドライン入力を示します。)


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


$cd PDCA


作業フォルダに移動


:two: アプリ名を設定する。

PDCAフォルダ直下のconfig.xmlのnameタグを変更する。

(プロジェクト名が入るファイル名はビルド時に設定したものに変わります。)


変更前:HelloCordova

変更後:PDCA


:three: ビルドして実行する。

$ionic platform add ios

$ionic build ios

:exclamation: ここで、Xcodeのコマンドラインツールが無いというエラーが出る場合は、ツールをダウンロード必要がある場合はダウンロードし、Xcodeのmenu、Xcode -> prefarence -> Locationタブ ->command line toolのタブからtoolを指定してください。

スクリーンショット 2016-06-21 17.35.21.png

:four: ビルドがうまくいったら、一度iosエミュレーターを動かしてみましょう。

方法1

$ionic emulate ios

方法2

PDCA/platforms/ios/PDCA.xcodeproj をクリックし、Xcodeを起動する。

スクリーンショット 2016-06-21 17.42.59.png

Xcodeで好きなエミュレータを選び。 :arrow_forward: で実行する

:five: エミュレータの稼働

スクリーンショット 2016-06-21 17.52.24.png

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

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


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


コマンドライン入力

$ionic serve


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


スクリーンショット 2016-06-21 18.59.05.png

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


(一応補足としてですが、最初にXcode上でwwwフォルダを選択して、右のウィンドウでabsolute pathに切り替えると、実際のファイルリストが読み込まれるようになります)

スクリーンショット 2016-06-21 19.01.15.png


変更するファイルは、www/js/controllers.js です。


赤枠が初期画面に表示されているメニューを示す文字列になっています。これを適当に変更して、saveしてください。

スクリーンショット 2016-06-21 19.05.39.png


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


スクリーンショット 2016-06-21 19.10.08.png


そうするとどうでしょうか。Xcodeのコードを変更して保存した瞬間に、

ブラウザ側のアプリ実行結果も自動的に更新されたと思います。

これがライブコーディングの環境です。 :smiley: :tada: :smiley:


スクリーンショット 2016-06-21 19.13.40.png


他にもソースを変更して、都度実行結果に反映されることを確認してください。

このような環境で開発を行うことで、1つ1つの変更、機能追加を、確実に1つ1つ結果を確認しながら行うことができ、慣れればとても便利な開発状態になります。

:seven: Xcodeでのソースコードの変更の、実ファイルへの反映について


Xcodeで変更した内容は、実態のファイル(finderで見るもの)には即時には反映されません。

Xcodeでのソース変更を、実ファイルに反映するためには、コマンドライン側から一度ビルドする必要があります。


コマンドライン入力

$ionic build ios


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


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

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