「AngularJS」タグアーカイブ

IonicによるAndroidアプリ作成の最低限

コメントを残す

このページでは、UIフレームワークのIonicを使ったアプリの作成について紹介します。

Ionicのインストール

Ionicとその依存モジュールであるcordovaをインストールします。

$ npm install -g cordova ionic

アプリの新規作成

アプリ名はIonicAppとします。テンプレートは作りたいアプリに近いものを選ぶと楽です。

$ ionic start IonicApp blank

Ionicのテンプレート一覧

実装

実装は作りたいアプリに応じてご自由に！！笑

デバッグ&実行

アプリ内のHTMLやJavascriptなどをPCでデバッグしたい場合、以下のコマンドを実行します。ファイルを更新すると自動でブラウザが更新されるのでとっても便利です。

$ ionic serve

モバイル機器でアプリを実行したい場合、対応するプラットフォームを追加します。iPhoneやiPadで実行したい場合、「android」ではなく「ios」となります。

$ ionic platform add android

追加したプラットフォームを実行します。

$ ionic run android

また、上記PCでの実行と同様に、HTMLやJavascriptを更新した時に、再ビルドなしで実行するためには、以下のコマンドを実行します。「-l」はlivereloadの意味です。このコマンドで実行した場合、HTMLなどのソースはモバイル機器にダウンロードされるのではなく、PCがWebサーバーとなってモバイル機器からアクセスされるようになります。

$ ionic run android -l

アイコンの作成

Ionicのアプリアイコンのファイルはresourcesフォルダ内にあります。icon.pngはホーム画面に表示されるアプリのアイコン画像であり、splash.pngはアプリ起動時に表示されるスプラッシュ画像です。これらのファイルをそれぞれ上書きしてから下記コマンドを実行すると、各プラットフォーム用のアイコンサイズに変換してくれます。

$ ionic resources

APK作成

作ったアプリをAndroidアプリとしてGoogle Playに公開するために、APKファイルを作成します。手順はPhoneGapアプリの公開用APKを作るをご覧ください。

多言語化

アプリが日本語で公開できるレベルになったら、ぜひ英語でも公開しましょう。一度仕組みを作ってしまえば簡単に多言語化できます。
まず多言語化を行うangular-translateと多言語ファイルを外部ファイルとして読み込むangular-translate-loader-static-filesをダウンロードします。

$ ionic add angular-translate
$ ionic add angular-translate-loader-static-files

これらのモジュールをHTMLから読み込みます。

<!-- www/index.html -->
<!DOCTYPE html>
  ...
  <script src="lib/angular-translate/angular-translate.min.js"></script>
  <script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
  ...
</html>

アプリのAngularJSモジュールとして追加します。

// www/js/app.js
angular.module('starter', [
 ... , 'pascalprecht.translate'
])
...

多言語ファイルの読み込み設定と言語の適用を行います。言語の適用はOSに設定された言語を使用し、もしその言語用のファイルがなければ変数defaultLangに入れた言語が適用されます。多言語ファイルはjs/langフォルダ内の言語コード.json（例：ja.json）を使用します。これで多言語化の準備は完了です。対応する言語を増やしたいときは、その言語の用語ファイルを追加するだけです。

// www/js/app.js
...
.config(function($translateProvider) {
  $translateProvider.useStaticFilesLoader({
    prefix: 'js/lang/',
    suffix: '.json'
  });
  var defaultLang = 'en';
  var getLang = function() {
    try {
      return (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0, 2)
    } catch (e) {
      return defaultLang;
    }
  }
  $translateProvider.preferredLanguage(getLang());
  $translateProvider.fallbackLanguage(defaultLang);
})

実際に多言語化するためには、下記のような用語ファイルをlangフォルダに作ります。各メッセージにIDを振ります。

www/js/lang/ja.json
{
  "START": "はじめる",
  "GAMEOVER": "Game Over",
  "RESTART": "もう一度",
  "": ""
}

www/js/lang/en.json
{
 "START": "Start",
 "GAMEOVER": "Game Over",
 "RESTART": "Restart",
 "": ""
}

HTMLからこれらの用語を使うには、translate属性を追加してメッセージIDを指定します。

<!-- www/index.html -->
...
   <button class="button button-assertive" translate>START</button>
...

Javascriptから使うにはtranslateサービスを使います。

// controller.js
app.controller('Ctrl', ['$scope', '$translate', function($scope, $translate) {
  $scope.start = $translate('START');
}]);

終わりに

アプリ作成のために必要最低限のことを突っ走って書いてきましたが、他に必要だと思ったら適宜追記します。
僕自身はIonicを使って2つのアプリを作りました。動作の確認のためなど試しに触って見てください。
ぽりごんのアプリアイコン           Compositionのアプリアイコン