ionic2でハイブリッドなアプリ開発:チュートリアルをチュートリアル:サンプルプロジェクトを導入して実機で実行するまで

Posted on Posted in 趣味的なIT・ネットの話題

Announcing Ionic Framework 2 Beta | The Official Ionic Blog

ionic2が無事ベータリリースになったようなので、チュートリアルを体験してみました。が、英語なのとionic1やAngularが分かっていないと戸惑う部分が多いように思われました。そこでチュートリアルの流れを日本語で解説し、本家で触れられていない点についていくつか補足します。なおハイブリットアプリをWindowsで作る人はそういないと思いますのでMacが前提です。

読み方

チュートリアルそのものとは関係が無いのですが、ionicは「イオニック」ではなく、「アイオニック」です。ゴルフをやっていたときのグリップの影響か、今でもついイオニックと呼んでしまいますが。

Node.jsのインストール

公式通りに進めてください。ただし必ず4系を使うこと。ES6の事もあるのでそのうちNode5に対応するのだとは思いますが、今のところnumber of issesが発生するようです。

ionic 2のインストール

nodeをインストーラーを使ってインストールした場合には、npmコマンドが一緒にインストールされています。npmコマンドはnode.jsのパッケージ管理に使うコマンドです。ionicはnpmを使用してインストールします。Macだと-gオプション(グローバルインストール:どのユーザーでも使えるようにする)を使うにはsudoが必要です。コマンド実行時に管理者権限のあるユーザーで実行してパスワードを入力してください。

これによりionicコマンドがインストールされます。ionicを引数なしで実行するとコマンドのマニュアルが表示されます。私が使っているのはbeta17のようです。

プロジェクトの作成

ionicはプロジェクトフォルダの作成をionicコマンドを使用して行います。–v2がionic2を使うことのディレクティブです。

startがプロジェクト作成のためのコマンド、cutePuppyPicsはフォルダ名です。実行する場所が書き込み権限のあるフォルダであればsudoは不要です。

cutePuppyPicsはもちろん何でも良く、作成されるプロジェクトの中身とは論理的な関係はありません。ただionic viewを使用した際に表示されるプロジェクト名がこの名称となりますので、複数のプロジェクトを似たような名前にすると後で管理が面倒です。ionic.projectファイルに記録されています。

ビルドとブラウザ上での実行

プロジェクトに対する操作はプロジェクトフォルダに入ってから実行します。

以下のコマンドを実行すると、ビルドが実行されると同時に、テスト用のサーバーがコマンドラインで実行されます。そしてブラウザ起動され、このサーバーで稼働しているビルド結果を参照し、表示します。横長大画面だと今ひとつイメージが湧きにくいのでタブを分けて縦長にしてみるといいですね。

スクリーンショット 2016-02-19 14.04.01

このときターミナルがionicサーバーのコントロール端末化するので、q<cr>で戻ってください。

ビルド:ios:開発機のシミュレータ上

ionic startしただけではiOSやAndroid用のcordovaモジュールが導入されていません。以下のコマンドを実行すると、iOS用のモジュールが導入されます。

開発機にXcodeがインストールされていれば、以下のコマンドによりiOSシミュレータ上でビルドされたアプリが実行されます。

ただ起動までかなり時間がかかりますし、動作ももっさりなので、実際の開発には活用しにくいと思います。

ビルド:iOS:実機:ネイティブアプリ

iOS実機で実行するためにはios-deployが必要になるのでインストールします。

実行はionic run。

が、エラーとなります。

修正方法がよく分かりませんでしたので、とりあえずプロジェクトフォルダの中にできているXcodeプロジェクトを開いて、Xcode上でビルドすれば実行できました。

スクリーンショット 2016-02-19 15.44.40

Appleの方針変更によりローカルの実機のみであれば有償のApple Developer Programに加入しなくても、ダウンロードして実行できます。

S__2940930

ビルド:iOS:実機:Ionic View

webview利用のアプリですので、最終的なビルドをしなくても、ionicプロジェクトが提供しているIonic Viewアプリを使用すれば、このアプリ上で、ビルドしたアプリのテストができます。

まずionicのサイトでアカウントを作成しておきます。

Sign up – Ionic.io: the hybrid app platform.

次にアップロードします。初回だけ先ほどのアカウント情報が求められます。

次にIonic ViewをApp Storeから実機にダウンロードします。

Ionic Viewを App Store で

実行するとサインインが求めれますのでサインインします。するとプロジェクト名が列記されているので、実行したいプロジェクトを実行します。ちなみにですがその前に設定ボタンをタッチして、SHOW “SWIPE TO CLOSE”のスイッチをオンにしておくと、アプリ実行時にスワイプで管理画面に戻れるという案内(3本指で下にスワイプしろ)が表示されます。

S__7127043

ただこの設定をしなくても、アプリ実行中に3本指で下にスワイプすればアプリを終了できます。このスワイプがなかなかに微妙で、スワイプしている間、3本指の位置関係をキープしないと上手くアプリを終了させられません。ちょっと練習が必要です。

ビルド:Androis:開発機のシミュレータ上

Androidの場合も先立ってモジュール導入が必要です。

開発機には予めAndroid Studioの最新版をインストールしておきます。

一回実行しただけではシミュレーターが実行されるだけで、シミュレーター上でアプリが実行されないかもしれません。その場合はシミュレーター上のAndroidをロック画面からホーム画面に移行させた上で、ionic run androidをもう1回実行してください。

スクリーンショット 2016-02-19 16.39.17

ビルド:Androis:実機のネイティブ

実機のネイティブで実行する場合のコマンドは同じです。

開発機に実機が接続されていれば、そちらで実行されます。開発者オプションは有効にしておいてください。

S__7127044

ビルド:Android:実機:Ionic View

アカウントを作成してアップロードするという手順はiPhoneと同じです。

Ionic View – Google Play の Android アプリ

異なるのはAndroid版はスワイプをしなくても、アプリのホーム画面でバックボタンをタッチすればIonic Viewのプロジェクト選択画面に戻れます。

(長くなったのでページを変えます)

#ionic2 #初心者 #入門 #チュートリアル #解説 #TypeScript #Angular2


Facebooktwittergoogle_pluspinterestlinkedinmail
納得したらすぐにシェア!