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

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

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が必要です。コマンド実行時に管理者権限のあるユーザーで実行してパスワードを入力してください。

$ sudo npm install -g ionic@beta

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

kawauchiyasuo-no-MacBook-Pro:project2 yasuo$ ionic
  _             _     
 (_)           (_)     
  _  ___  _ __  _  ___ 
 | |/ _ \| '_ \| |/ __|
 | | (_) | | | | | (__ 
 |_|\___/|_| |_|_|\___|  CLI v2.0.0-beta.17

Usage: ionic task args

=======================

Available tasks: (use --help or -h for more info)

   start  ..........  Starts a new Ionic project in the specified PATH
   serve  ..........  Start a local development server for app dev/testing
   platform  .......  Add platform target for building an Ionic app
   run  ............  Run an Ionic project on a connected device
   emulate  ........  Emulate an Ionic project on a simulator or emulator
   build  ..........  Build (prepare + compile) an Ionic project for a given platform.

   plugin  .........  Add a Cordova plugin
   resources  ......  Automatically create icon and splash screen resources (beta)
		      Put your images in the ./resources directory, named splash or icon.
		      Accepted file types are .png, .ai, and .psd.
		      Icons should be 192x192 px without rounded corners.
		      Splashscreens should be 2208x2208 px, with the image centered in the middle.

   upload  .........  Upload an app to your Ionic account
   share  ..........  Share an app with a client, co-worker, friend, or customer
   lib  ............  Gets Ionic library version or updates the Ionic library
   setup  ..........  Configure the project with a build tool (beta)
   io  .............  Integrate your app with the ionic.io platform services (alpha)
   security  .......  Store your app's credentials for the Ionic Platform (alpha)
   push  ...........  Upload APNS and GCM credentials to Ionic Push (alpha)
   package  ........  Use Ionic Package to build your app (alpha)
   config  .........  Set configuration variables for your ionic app (alpha)
   browser  ........  Add another browser for a platform (beta)
   service  ........  Add an Ionic service package and install any required plugins
   add  ............  Add an Ion, bower component, or addon to the project
   remove  .........  Remove an Ion, bower component, or addon from the project
   list  ...........  List Ions, bower components, or addons in the project
   ions  ...........  List available ions to add to your project
   templates  ......  List available Ionic starter templates
   info  ...........  List information about the users runtime environment
   help  ...........  Provides help for a certain command
   link  ...........  Sets your Ionic App ID for your project
   hooks  ..........  Manage your Ionic Cordova hooks
   state  ..........  Saves or restores state of your Ionic Application using the package.json file
   docs  ...........  Opens up the documentation for Ionic
   v2  .............  Gives simple information to get started with Ionic v2
   generate  .......  Generate pages and components

プロジェクトの作成

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

$ ionic start cutePuppyPics --v2

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

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

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

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

$ cd cutePuppyPics

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

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

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

kawauchiyasuo-no-MacBook-Pro:cutePuppyPics yasuo$ ionic serve

∆ Compiling and bundling with Webpack...
√ Using your webpack.config.js file

∆ Compiling Sass to CSS
√ Matching patterns: app/theme/app.+(ios|md).scss

∆ Copying fonts
√ Matching patterns: node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)

∆ Copying HTML
√ Matching patterns: app/**/*.html

√ Sass compilation complete
√ HTML copied to www/build
√ Fonts copied to www/build/fonts

Hash: 80801c0c83dd4cbf6e26
Version: webpack 1.12.10
Time: 3884ms
        Asset     Size  Chunks             Chunk Names
app.bundle.js  2.55 MB       0  [emitted]  main
   [0] multi main 64 bytes {0} [built]
    + 357 hidden modules

√ Webpack complete

∆ Starting dev server.

√ Running live reload server: http://localhost:35729
√ Running dev server:  http://localhost:8100
√ Watching: 0=www/build/**/*.html, 1=www/build/**/*.js, 2=www/build/**/*.css
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

ionic $ q

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

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

$ ionic platform add ios

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

$ ionic emulate ios

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

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

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

$ sudo npm install --global --unsafe-perm ios-deploy

実行はionic run。

$ ionic run

が、エラーとなります。

Check dependencies
Code Sign error: No matching provisioning profiles found: No provisioning profiles with a valid signing identity (i.e. certificate and private key pair) matching the bundle identifier “io.ionic.starter” were found.

** BUILD FAILED **


The following build commands failed:
	Check dependencies
(1 failure)

修正方法がよく分かりませんでしたので、とりあえずプロジェクトフォルダの中にできている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.

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

kawauchiyasuo-no-MacBook-Pro:cutePuppyPics yasuo$ ionic login

To continue, please login to your Ionic account.
Don't have one? Create one at: https://apps.ionic.io/signup

Email: 

kawauchiyasuo-no-MacBook-Pro:cutePuppyPics yasuo$ ionic upload
Uploading app....
Saved app_id, writing to ionic.io.bundle.min.js...
Successfully uploaded (67efd7e3)

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

Ionic Viewを App Store で

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

S__7127043

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

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

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

$ ionic platform add android

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

$ ionic run android

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

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

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

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

$ ionic run android

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

S__7127044

ビルド:Android:実機:Ionic View

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

Ionic View – Google Play の Android アプリ

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

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

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


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