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アプリは、ブラウザのポテンシャルに縛られるため、ネイティブアプリらしい能動的な振る舞いや、セキュリティの厳しいデバイスの制御が容易に扱えないという問題があります。こうした問題を互いに補い、いいとこ取りをしたのが「ハイブリッドアプリ」です。
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ヶ月以上かかることも
- Apple Developer Program 申込時、法人の場合は D-U-N-S Number が必須
- 会社の英語表記とD-U-N-S Numberが異なる場合はリジェクトの可能性あり?
- D-U-N-S Number変更に1ヶ月かかる場合もあるのでアカウント作成はお早めに
Meteorで作ったiOSアプリdotcleの場合、最初の申請から審査まで13日、さらに3回リジェクトで、約3週間かかった
- iOSアプリのアップデート申請手順(2015年9月版) | makotton.com
サーバーをアップデートするとアプリ使用中に突然リロードが発生する
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上で情報を探すときは古い情報にお気をつけ下さい(この情報もいずれは古くなる運命です)。
勉強会用サンプルアプリ
- ソースコード: https://github.com/nobutakaoshiro/meteor-ios-app-example
- DEMO: https://20151219-ios-example-app.meteor.com/