meteor => モバイルアプリ

異なるデバイス上のページレイアウト - 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);

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

meteor
モバイルアプリ

サーチ…