サーチ…
異なるデバイス上のページレイアウト - CSS
アプリケーションを異なるデバイス上で実行する場合は、デバイスサイズに基づいて異なるViewPortsにレンダリングする必要があります。これには、javascriptルールやCSSメディアスタイルの2つの方法があります。 AngularやEmber(またはBlazeなど)のようなMVCやMVVMライブラリを使用していて、単一のデバイスまたはハードウェアプラットフォームをターゲットにしているだけの場合は、異なるハードウェアViewPortsが使用されているため、MVCモデルを再考する必要がありますアプリケーションに導入されました。
// desktop @media only screen and (min-width: 960px) { } // landscape orientation @media only screen and (min-width: 768px) { } // portrait orientation @media only screen and (min-width: 480px) { }
768px(ポートレートモード)または1024ピクセル(ランドスケープ)でスタイルを分割するかどうかを判断する必要があります。それはあなたのターゲットの携帯デバイスが3:4の比率を使用するiPadであると仮定しています。それ以外の場合は、対象とするデバイスのアスペクト比を計算し、そこからしきい値レベルを把握する必要があります。
固定サイズのウィンドウ
モバイルデバイスごとに固定サイズの画面でレイアウトを設計する場合は、デスクトップ上でアプリを実行するときにそのデザインを反映させることができます。次のメソッドは、PhoneGapのウィンドウの外枠のサイズを固定し、デスクトップ上に固定サイズのウィンドウを与えます。オプションを制限することで、ユーザーの期待やUIデザインを管理するのが最も簡単な場合もあります。
// create a window of a specific size var w=window.open('','', 'width=100,height=100'); w.resizeTo(500,500); // prevent window resize var size = [window.width,window.height]; //public variable $(window).resize(function(){ window.resizeTo(size[0],size[1]); });
オフラインキャッシュ
これらをすべて機能させるには、アプリケーションデータとユーザーデータをキャッシュするという、オフラインサポートが必要になるでしょう。
meteor add appcache
meteor add grounddb
スクロールバウンスを無効にする
デスクトップアプリケーションでは、スクロールバウンスを無効にして、アプリにもっとネイティブな感触を与えることができます。ブラウザでDOMを制御する方法を無効にすることで、javascriptでこれを行うことができます:
// prevent scrolling on the whole page // this is not meteorish; TODO: translate to meteor-centric code document.ontouchmove = function(e) {e.preventDefault()}; // prevent scrolling on specific elements // this is not meteorish; TODO: translate to meteor-centric code scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};
代わりに、cssとオーバーフローとスクロールスタイルを使用することもできます。
#appBody { overflow: hidden; } #contentContainer { .content-scrollable { overflow-y: auto; -webkit-overflow-scrolling: touch; } }
上記の動作に必要なオブジェクトモデルは、次のようになります。
<div id="appBody"> <div id="contentContainer"> <div class="content-scrollable"> <!-- content --> </div> </div> </div>
マルチタッチ&ジェスチャー
モバイルデバイスには通常キーボードがないため、アプリケーションにハプティックコントローラを追加する必要があります。人々が使用しているように見える2つの人気のあるパッケージは、FastClickとHammerです。インストールは簡単です。
meteor add fastclick
meteor add hammer:hammer
FastClickの設定はほとんど必要ありませんが、Hammerはワイヤリングするために少しの作業が必要です。 Todosアプリのcononicalの例は次のようになります:
Template.appBody.onRendered(function() {
if (Meteor.isCordova) {
// set up a swipe left / right handler
this.hammer = new Hammer(this.find('#appBody'));
this.hammer.on('swipeleft swiperight', function(event) {
if (event.gesture.direction === 'right') {
Session.set(MENU_KEY, true);
} else if (event.gesture.direction === 'left') {
Session.set(MENU_KEY, false);
}
});
}
});
アイコンとスプラッシュ画面アセットを作成する
アプリケーションをコンパイルしてデバイスで実行する前に、いくつかのアイコンとスプラッシュ画面を作成し、appにmobile-config.js
ファイルを追加する必要があります。
App.icons({ // iOS 'iphone': 'resources/icons/icon-60x60.png', 'iphone_2x': 'resources/icons/[email protected]', 'ipad': 'resources/icons/icon-72x72.png', 'ipad_2x': 'resources/icons/[email protected]', // Android 'android_ldpi': 'resources/icons/icon-36x36.png', 'android_mdpi': 'resources/icons/icon-48x48.png', 'android_hdpi': 'resources/icons/icon-72x72.png', 'android_xhdpi': 'resources/icons/icon-96x96.png' }); App.launchScreens({ // iOS 'iphone': 'resources/splash/splash-320x480.png', 'iphone_2x': 'resources/splash/[email protected]', 'iphone5': 'resources/splash/[email protected]', 'ipad_portrait': 'resources/splash/splash-768x1024.png', 'ipad_portrait_2x': 'resources/splash/[email protected]', 'ipad_landscape': 'resources/splash/splash-1024x768.png', 'ipad_landscape_2x': 'resources/splash/[email protected]', // Android 'android_ldpi_portrait': 'resources/splash/splash-200x320.png', 'android_ldpi_landscape': 'resources/splash/splash-320x200.png', 'android_mdpi_portrait': 'resources/splash/splash-320x480.png', 'android_mdpi_landscape': 'resources/splash/splash-480x320.png', 'android_hdpi_portrait': 'resources/splash/splash-480x800.png', 'android_hdpi_landscape': 'resources/splash/splash-800x480.png', 'android_xhdpi_portrait': 'resources/splash/splash-720x1280.png', 'android_xhdpi_landscape': 'resources/splash/splash-1280x720.png' });
メテオコルドバ建築パイプライン
今度は、 Meteor Cordova Phonegap Integrationドキュメントを参照してください。
そのドキュメンテーションが書かれて以来、XcodeとYosemiteがリリースされました。これはインストールにいくつかの問題を引き起こしました。 MeteorをiOSデバイスにコンパイルするための手順を以下に示します。
- ヨセミテにアップグレードしてください。
- Xcodeを削除する(アプリケーションフォルダからゴミ箱にドラッグする)
- アプリストアからXcode 6.1をインストールします。
- さまざまな利用規約に同意します。
# 5. clone and rebuild the ios-sim locally # (this step will not be needed in future releases) git clone https://github.com/phonegap/ios-sim.git cd ios-sim rake build # 6. make sure we can update the .meteor/packages locations # (this step will not be needed in future releases) sudo chmod -R 777 ~/.meteor/packages # 7. copy the new build into Meteor locations # (this step will not be needed in future releases) for i in `find ~/.meteor/packages/meteor-tool/ -name ios-sim -type f`; do cp -R ./build/Release/ios-sim "$i" done # 8. install the ios platform to your app cd myapp meteor list-platforms meteor add-platform ios meteor list-platforms # 9. and that there aren't dead processes ps -ax kill -9 <pid> # /Users/abigailwatson/.meteor/packages/meteor-tool/.1.0.35.wql4jh++os.osx.x86_64+web.browser+web.cordova/meteor-tool-os.osx.x86_64/dev_bundle/mongodb/bin/mongod # tail -f /Users/abigailwatson/Code/Medstar/dart/webapp/.meteor/local/cordova-build/platforms/ios/cordova/console.log # 10. make sure there are correct permissions on the application (important!) sudo chmod -R 777 .meteor/local/ # 11. run app meteor run ios # 12. if that doesn't work, clear the directory sudo rm -rf .meteor/local # 13a. run meteor again to create the default browser build meteor # 13b. run it a second time so bootstrap and other packages get downloaded into the browser build ctrl-x meteor # 14. then run the ios version ctrl-x meteor run ios
XCodeはプロセス中に起動する必要があります。あなたのシミュレータを選択し、 '再生'ボタンを押してください。
IOS開発
- Appleデベロッパーアカウントを登録する
- アプリのアプリIDを登録する
- テストデバイスのUUIDを登録する
- iOS App Developmentプロビジョニングプロファイルを生成する
- KeychainAccessからCertificateSigningRequestを生成する
- CertificateSigningRequestをhttps://developer.apple.com/account/ios/profile/profileCreate.actionに送信します。
- キーチェーンにインポートする証明書をダウンロードしてダブルクリックする
- [Xcode]> [環境設定]> [アカウント]に移動し、Appleデベロッパーアカウントを登録します。
IOSデバイステスト
- あなたの開発ワークステーションとiPhoneが同じWiFiネットワークに接続されていることを確認してください。テザリング、ホットスポット、その他のアドホックネットワークは機能しません。
-
sudo meteor run ios-device
- あなたのデバイスに展開!
Cordovaプロジェクト(config.xml)を設定する
Meteorは、ビルド時にappディレクトリのルートにあるmobile-config.js
ファイルを読み込み、指定された設定を使用してCordovaのconfig.xml
を生成しconfig.xml
。
Project_folder
├── /.meteor
└── mobile-config.js
ほとんどの設定は、 mobile-config.js
(アプリのメタデータ、設定、アイコン、launchscreens、Cordovaプラグインのインストールパラメータ)で実現できます。
App.info({
id: 'com.example.matt.uber',
name: 'über',
description: 'Get über power in one button click',
author: 'Matt Development Group',
email: '[email protected]',
website: 'http://example.com'
});
// Set up resources such as icons and launch screens.
App.icons({
'iphone': 'icons/icon-60.png',
'iphone_2x': 'icons/[email protected]',
// ... more screen sizes and platforms ...
});
App.launchScreens({
'iphone': 'splash/Default~iphone.png',
'iphone_2x': 'splash/Default@2x~iphone.png',
// ... more screen sizes and platforms ...
});
// Set PhoneGap/Cordova preferences
App.setPreference('BackgroundColor', '0xff0000ff');
App.setPreference('HideKeyboardFormAccessoryBar', true);
App.setPreference('Orientation', 'default');
App.setPreference('Orientation', 'all', 'ios');
// Pass preferences for a particular PhoneGap/Cordova plugin
App.configurePlugin('com.phonegap.plugins.facebookconnect', {
APP_ID: '1234567890',
API_KEY: 'supersecretapikey'
});
/.meteor/local/cordova-build/config.xml
ファイルを手動で編集しないでください。これは、 meteor run ios/android
されるたびに再生成されるmeteor build
、すべての変更が失われます。
リファレンスページ: 流星ガイド>ビルド>モバイル>アプリの設定
デバイスイベントの検出
もちろん、モバイルを検出する最良の方法は、ハードウェアがあなたに直接通知することです。 Cordova PhoneGapはイベントリスナーを追加できる「deviceready」イベントを公開しています。
document.addEventListener('deviceready', function(){
Session.set('deviceready', true);
}, false);