わくわくじぇいはっく!

株式会社J-hack公式ブログです。主にMeteor関連の技術情報やイベントについて発信していきます。

MeteorでiOSアプリを作ろう!

Meteor Advent Calendar 2015 - Qiita 20日目の記事です。

はじめに

J-hack開発部の大城です。12/20にギークオフィス恵比寿で開催されましたJavaScriptフレームワークMeteor勉強会の一般発表枠で、Meteorを使ったiOSアプリの作り方について発表する機会を頂きました。

www.slideshare.net

この記事はその時に発表した内容に補足を加えたものとなっております。

アジェンダ

  • Meteorについて
  • MeteorとiOSアプリ
  • MeteorでiOSアプリを作ろう!
  • MeteorのiOSアプリ開発Tipsと注意点

Meteorについて

Meteor - https://www.meteor.com/

  • オープンソースのフルスタックJavaScriptアプリケーションフレームワーク
  • 単一の言語(JavaScript)、クライアントもサーバーもモバイルアプリも。
  • リアクティビティ/リアルタイム
  • モバイルアプリ開発フレームワークにApache Cordovaを採用(後述)

Apache Cordova (Adobe PhoneGap)

  • モバイルアプリ開発フレームワーク Adobe PhoneGap のオープンソース版
  • HTML5/CSS/JavaScriptでモバイルアプリが開発できる
  • PhoneGapはAdobeの商標、Cordovaのディストリビューションという位置付け
  • MeteorではCordovaを採用、iOS/Androidアプリ開発に対応

 モバイルへのアプリケーションの提供手段としては「ネイティブアプリ」「Webアプリ」「ハイブリッドアプリ」の3つが挙げられます。複数のデバイス/OS向けのアプリを作る場合、ネイティブアプリだと、iPhoneやAndroidなどOSの種類によって異なる言語を使って開発を行わなくてはいけないため、開発コストの高さが問題となります。

 一方でWebアプリは、ブラウザのポテンシャルに縛られるため、ネイティブアプリらしい能動的な振る舞いや、セキュリティの厳しいデバイスの制御が容易に扱えないという問題があります。こうした問題を互いに補い、いいとこ取りをしたのが「ハイブリッドアプリ」です。

from. HTML5によるハイブリッドアプリ開発の「Apache Cordova」とは?IBMやSAPがなぜ注目? 企業向けモバイルアプリ開発の問題が決着か|ビジネス+IT - http://www.sbbit.jp/article/cont1/28197

MeteorでiOSアプリを作る

Meteor iOSアプリの特徴

  • JavaScriptでアプリ開発
  • HTML/CSSでUI設計
  • ホットコードプッシュ
  • リアクティブ/リアルタイム
  • Cordovaプラグインが利用可能

iOSアプリ開発に必要なもの

  • Xcode 最新版
    • Macハードウェア
    • OS X Yosemite (10.10) 以上
  • iOS端末実機(iOSシミュレーターで代用可能)

App StoreにiOSアプリを公開する場合は追加でApple Developer Programへの加入(11,800円/年)が必要です。

MeteorプロジェクトをiOS対応にする

meteor add-platform ios

MeteorでiOSアプリ開発を行うには、Xcodeが必須です。 Xcodeのインストール方法はMobile Dev Install: iOS on Macをご参照下さい。

Meteor iOSアプリの動作確認

iOSシミュレーターで起動

meteor run ios

実機で起動(Xcodeが立ち上がります)

meteor run ios-device

Meteorパッケージ/Cordovaプラグインの追加

Meteorパッケージの追加

meteor add <PACKAGE_NAME>

Meteor標準のCordova用パッケージmeteor/mobile-packagesを追加する例:

# カメラ
meteor add mdg:camera

# 位置情報
meteor add mdg:geolocation

Cordovaプラグインの追加

meteor add cordova:<PLUGIN_ID>@<VERSION>

# GitHub URLから直接追加
meteor add cordova:<PLUGIN_ID>@<GITHUB_URL>#<COMMIT_HASH>

apache/cordova-plugin-dialogsを追加する例:

meteor add cordova:cordova-plugin-dialogs@1.2.0
meteor add cordova:cordova-plugin-dialogs@https://github.com/apache/cordova-plugin-dialogs.git#c36d1c040d79ef9dde8dadda7a30d39f0564afe2

mobile-config.js

Meteorモバイルアプリの設定にはmobile-config.jsを使用します。 Meteorプロジェクトディレクトリ直下にmobile-config.jsというファイルを作成して、以下のように記述します。

App.info({
  id: 'com.example.meteorapp',
  name: 'Example',
  description: 'This app is example of Meteor iOS app.',
  author: 'Taro Meteor',
  email: 'contact@example.com',
  website: 'http://example.com',
  version: '0.1.0',
  buildNumber: '100',
});

// アイコンの設定
App.icons({
  'iphone': 'icons/icon-60.png',
  'iphone_2x': 'icons/icon-60@2x.png',
  // ... more screen sizes and platforms ...
});

// 起動時に表示されるスプラッシュスクリーン画像の設定
App.launchScreens({
  'iphone': 'splash/Default~iphone.png',
  'iphone_2x': 'splash/Default@2x~iphone.png',
  // ... more screen sizes and platforms ...
});

// PhoneGap/Cordova 設定
App.setPreference('BackgroundColor', '0xff0000ff');
App.setPreference('Orientation', 'default');
App.setPreference('StatusBarOverlaysWebView', false);
App.setPreference('StatusBarStyle','lightcontent');
App.setPreference('StatusBarBackgroundColor', '#000000');

// PhoneGap/Cordova プラグイン設定
App.configurePlugin('phonegap-facebook-plugin', {
  APP_NAME: 'Example App',
  APP_ID: '1234567890',
  API_KEY: 'supersecretapikey'
});

// アクセスルール設定
App.accessRule('http://example.com/*');
App.accessRule('https://example.com/*');

アプリの基本情報

App.info({
  id: 'com.example.meteorapp',
  name: 'Example',
  description: 'This app is example of Meteor iOS app.',
  author: 'Taro Meteor',
  email: 'contact@example.com',
  website: 'http://example.com',
});

バージョン番号とビルド番号

App.info({
  // ...
  version: '0.1.0',
  buildNumber: '100',
  // ...
});

versionはアプリのバージョン番号で、<MAJOR>.<MINOR>.<PATCH>セマンティックバージョニング形式で記述します。外部に公開される番号です。

buildNumberは内部で使用するビルド番号です。指定がなければ、バージョン番号と同一の値が設定されます。

ビルド番号を付ける際の注意点

  • iOSアプリの場合、App Storeに申請する際にビルド番号は前回よりも大きい値を指定する必要があります
  • Androidアプリの場合、ビルド番号は「整数(Int)」でなければなりません。Androidも対応する予定がある場合は、ビルド番号は整数をしておくのが無難です

アプリアイコンの変更

App.icons({
  // iOS
  'iphone'   : 'resources/icons/app_icon-60x60.png',
  'iphone_2x': 'resources/icons/app_icon-60x60@2x.png', // 120x120
  'iphone_3x': 'resources/icons/app_icon-60x60@3x.png', // 180x180
  'ipad'     : 'resources/icons/app_icon-72x72.png',
  'ipad_2x'  : 'resources/icons/app_icon-72x72@2x.png', // 144x144
});

スプラッシュスクリーン画像の変更

アプリの起動時に表示されるスプラッシュスクリーン画像を変更します。

App.launchScreens({
  // iOS
  'iphone'            : 'resources/splash/splash-320x480.png',
  'iphone_2x'         : 'resources/splash/splash-320x480@2x.png',  // 640x960
  'iphone5'           : 'resources/splash/splash-320x568@2x.png',  // 640x1136
  'iphone6'           : 'resources/splash/splash-375x667@2x.png',  // 750x1334
  'iphone6p_portrait' : 'resources/splash/splash-414x736@3x.png',  // 1242x2208
  'iphone6p_landscape': 'resources/splash/splash-736x414@3x.png',  // 2208x1242
  'ipad_portrait'     : 'resources/splash/splash-768x1024.png',  
  'ipad_portrait_2x'  : 'resources/splash/splash-768x1024@2x.png', // 1536x2048
  'ipad_landscape'    : 'resources/splash/splash-1024x768.png',
  'ipad_landscape_2x' : 'resources/splash/splash-1024x768@2x.png', // 2048x1536
});

背景色の変更

App.setPreference('BackgroundColor', '0xff0000ff');

WebViewの背景色を変更します。0xは16進数を表し、続けて16進数2桁でARGBを指定します。 '0xff0000ff'A:ff,R:00,G:00,B:FFなので、この場合は背景色が青色になります。CSSのRGBA指定とA:アルファチャンネル(透明度)の位置が異なるので、ご注意下さい。

アプリの向きを設定する

App.setPreference('Orientation', 'default');
App.setPreference('Orientation', 'landscape'); // 横向き
App.setPreference('Orientation', 'portrait');  // 縦向き
App.setPreference('Orientation', 'all', 'ios');

ステータスバーのスタイル変更

// ステータスバーとWebViewを重ねる
App.setPreference('StatusBarOverlaysWebView', true);

// ステータスバーのスタイルを変更する
App.setPreference('StatusBarStyle','lightcontent');

// ステータスバーの背景色を設定する
App.setPreference('StatusBarBackgroundColor', '#000000');

Cordovaプラグインの設定上書き

App.configurePlugin('phonegap-facebook-plugin', {
  APP_NAME: 'Example App',
  APP_ID: '1234567890',
  API_KEY: 'supersecretapikey'
});

URLのアクセスルール設定

App.accessRule('http://example.com/*');
App.accessRule('https://example.com/*');

MeteorのiOSアプリは、アプリがアクセスできるURLに制限がかかっています。 HTMLやJavaScriptの中で、外部のURLからデータを取得する場合は、App.accessRule でアクセスを許可するURLを追加します。

App Store提出用のビルド作成

meteor build ../app_build \
  --server=https://example.com \
  --mobile-settings settings.json
オプション 説明
--server アプリが稼働しているURL
--mobile-settings settings.json がある場合は指定する

buildコマンドで指定したディレクトリにリリース用のXcodeプロジェクトが生成されます。

open ../app_build/ios/project/Example.xcodeproj

あとはXcodeでProduct -> Archiveを実行して、App Storeに配信しましょう!

開発時のTipsと注意点

Meteor iOSアプリのデバッグ

クライアント側

Safariの環境設定で開発メニューを有効にすると、開発メニュー内に端末名がでてくるので、そこからデバッグしたいMeteorアプリを選択。

サーバー側

別のターミナルを開いて、Meteorプロジェクトディレクトリ内で:

meteor shell

App Storeへの申請は初回は1ヶ月以上かかることも

サーバーをアップデートするとアプリ使用中に突然リロードが発生する

mdg:reload-on-resumeパッケージを追加することで、ホットコードプッシュによる更新をアプリ起動時やアプリがフォアグラウンドになった時に限定することができます。

meteor add mdg:reload-on-resume

ホットコードプッシュとアプリ再申請

大幅にUIが変わる場合や、mobile-config.jsを書き換えた時、Cordovaのプラグインを変更した場合は、App Storeで再申請が必要になります。

サーバーでHTTPS(SSL)対応する場合の注意

自己署名証明書を使用すると、Meteorアプリでエラーがでるので注意。

おわりに

MeteorとCordovaが統合されているおかげで、すぐにモバイルアプリの開発ができるのは魅力的ですね。

Meteor 1.2以前のCordovaのバージョンは4.3でしたが、Meteor 1.2より、Cordovaのバージョンが5.2にアップデートされました。

Web上で情報を探すときは古い情報にお気をつけ下さい(この情報もいずれは古くなる運命です)。

勉強会用サンプルアプリ

参考資料