meteor勉強会発表資料「meteorでiosアプリを作ろう！」
TRANSCRIPT
MeteorでiOSアプリを作ろう！大城信孝(@notanota)
12/20 Meteor勉強会発表資料
アジェンダ•自己紹介
• Meteorについて
• MeteorとiOSアプリ
• MeteorでiOSアプリを作ろう！
• MeteorのiOSアプリ開発Tipsと注意点
自己紹介• 大城 信孝(OSHIRO, Nobutaka)
• 株式会社J-hack CTO/プログラマー
• Meteorアプリ開発・運用・保守
• Twitter: @notanota
• Qiita: @n-oshiro
• GitHub: @nobutakaoshiro
について• Meteor - https://www.meteor.com/
• オープンソースのフルスタックJavaScriptアプリケーションフレームワーク
• 単一の言語(JavaScript)、クライアントもサーバーもモバイルアプリもJavaScriptで記述する
• リアクティビティ/リアルタイム性を備える
• モバイルアプリ開発フレームワークにApache Cordovaを採用(後述)
Apache Cordova • HTML5/CSS/JavaScriptでモバイルアプリが開発できる、ハ
イブリッドアプリ開発フレームワーク Adobe PhoneGap のオープンソース版
• Adobe PhoneGap -> Apache に寄贈 -> Cordova
• PhoneGapはAdobeの商標、現在のCordovaのディストリビューションという位置付け
• MeteorではCordovaを採用、iOS/Androidアプリ開発に対応
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アプリの動作確認
$ meteor run ios
$ meteor run ios-device
iOSシミュレーターで起動:
iOS端末実機で起動(Xcodeが立ち上がる):
Meteorパッケージ/Cordovaプラグインの追加
$ meteor add <PACKAGE_NAME>
$ meteor add cordova:<PLUGIN_ID>@<VERSION> $ meteor add cordova:<PLUGIN_ID>@<GITHUB_URL>#<COMMIT_HASH>
Meteorパッケージの追加:
Cordovaプラグインの追加:
Meteorパッケージ追加の例
# カメラ meteor add mdg:camera
# 位置情報 meteor add mdg:geolocation
Cordovaプラグインの追加の例
$ meteor add cordova:[email protected]
Cordovaプラグインの追加:
# Git URLから直接追加 $ meteor add cordova:cordova-plugin-dialogs@https://github.com/apache/cordova-plugin-dialogs.git#c36d1c040d79ef9dde8dadda7a30d39f0564afe2
mobile-config.jsmeteor_app
├── client/*
├── server/*
├── …
└── mobile-config.js <- モバイルアプリの設定ファイル
アプリの基本情報// mobile-config.js App.info({ id: 'com.example.meteorapp', name: 'Example', description: 'This app is example.', author: 'Taro Meteor', email: '[email protected]', website: 'http://example.com', });
バージョン番号とビルド番号
// mobile-config.js App.info({ // ... version: '0.1.0', buildNumber: '100', // ... });
アプリアイコンの変更// mobile-config.js App.icons({ // iOS 'iphone' : 'resources/icons/app_icon-60x60.png', 'iphone_2x': 'resources/icons/[email protected]', // 120x120 'iphone_3x': 'resources/icons/[email protected]', // 180x180 'ipad' : 'resources/icons/app_icon-72x72.png', 'ipad_2x' : 'resources/icons/[email protected]', // 144x144 });
スプラッシュスクリーン画像の変更
// mobile-config.js App.launchScreens({ // iOS 'iphone' : 'resources/splash/splash-320x480.png', 'iphone_2x' : 'resources/splash/[email protected]', // 640x960 'iphone5' : 'resources/splash/[email protected]', // 640x1136 'iphone6' : 'resources/splash/[email protected]', // 750x1334 'iphone6p_portrait' : 'resources/splash/[email protected]', // 1242x2208 'iphone6p_landscape': 'resources/splash/[email protected]', // 2208x1242 'ipad_portrait' : 'resources/splash/splash-768x1024.png', 'ipad_portrait_2x' : 'resources/splash/[email protected]', // 1536x2048 'ipad_landscape' : 'resources/splash/splash-1024x768.png', 'ipad_landscape_2x' : 'resources/splash/[email protected]', // 2048x1536 });
背景色の変更
// mobile-config.js App.setPreference('BackgroundColor', '0xff0000ff');
色指定は16進数でARGBの順。0xff0000ffは、A:ff,R:00,G:00,B:00 で青色を表す。 CSSのRGBA指定と順番が異なるので注意。
アプリの向きを設定する
// mobile-config.js App.setPreference('Orientation', 'default'); App.setPreference('Orientation', 'landscape'); // 横向き App.setPreference('Orientation', 'portrait'); // 縦向き App.setPreference('Orientation', 'all', 'ios');
ステータスバーのスタイル変更
// mobile-config.js App.setPreference('StatusBarOverlaysWebView', false); App.setPreference('StatusBarStyle','lightcontent'); App.setPreference('StatusBarBackgroundColor', '#000000');
Cordovaプラグインの設定上書き
// mobile-config.js App.configurePlugin('phonegap-facebook-plugin', { APP_NAME: 'Example App', APP_ID: '1234567890', API_KEY: 'supersecretapikey' });
URLのアクセスルール設定
// mobile-config.js App.accessRule('http://example.com/*'); App.accessRule('https://example.com/*');
App Store提出用のビルド作成
$ meteor build ../app_build \ --server=https://example.com \ --mobile-settings settings.json
Meteor iOSアプリ 開発時のTipsと注意点
Meteor iOSアプリのデバッグ
$ meteor shell
クライアント側 Safariの環境設定で開発メニューを有効にすると、開発メニュー内に端末名がでてくるので、そこからデバッグしたいMeteorアプリを選択。
サーバー側 別のターミナルを開いて、Meteorプロジェクトディレクトリ内で:
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週間かかった
サーバーをアップデートするとアプリ使用中に突然リロードが発生する
mdg:reload-on-resumeパッケージを追加することで、ホットコードプッシュによる更新をアプリ起動時やアプリがフォアグラウンドになった時に限定することができます。
$ meteor add mdg:reload-on-resume
ホットコードプッシュとアプリ再申請
大幅にUIが変わる場合や、mobile-config.jsを書き換えた時、Cordovaのプラグインを変更した場合は、App Storeで再申請が必要になります。
HTTPS(SSL)対応する場合の注意点
•自己署名証明書を使用すると、Meteorアプリでエラーがでるので注意。
• Let’s Encryptがいま熱い！
勉強会用サンプルアプリ
•ソースコード: https://github.com/nobutakaoshiro/meteor-ios-app-example
• DEMO: https://20151219-ios-example-app.meteor.com/
Thank you!
参考資料• Meteor Cordova integration · meteor/meteor
Wiki
• Mobile Development Install: iOS on Mac · meteor/meteor Wiki
• Apache Cordova
• The config.xml File - Apache Cordova