Meteor Fan (日本語情報)

JavaScriptフレームワークMeteorに関していろいろ紹介する日本語情報サイト

Meteor 1.3 React日本語チュートリアル (step06)

Meteor日本語版のチュートリアルのstep06です。

目次

  1. 最初のアプリを作成する
  2. Reactコンポーネントでビューを定義する
  3. コレクションにタスクを格納する
  4. フォームを使ってタスクを追加する
  5. タスクにチェックマークをつける・削除する
  6. アプリをAndroidやiOSで動かす (本記事)
  7. 一時的なUIデータをステートに格納する
  8. ユーザアカウントを追加する
  9. メソッドによるセキュリティ
  10. パブリッシュとサブスクライブによるデータフィルタリング
  11. テストについて
  12. その後の学習法について

アプリをAndroidやiOSで動かす

今のところ、MeteorのWindows版ははモバイル開発はサポートされていません。Windows版を使っている場合はこのステップはスキップしてください。

これまではWebブラウザでアプリを作りテストしてきましたが、Meteorは複数のプラットフォームで動作するように設計されています。開発したsimple-todosアプリもいくつかのコマンドでiOSアプリやAndroidアプリにすることができます。

Meteorでは簡単にモバイルアプリ開発環境を構築することができます。しかし、すべての開発環境をダウンロードするにはそれなりに時間がかかります。Andriodの場合は約300MBのダウンロードで、iOSの場合は約2GBのXcodeをインストールする必要があります。ダウンロードする時間がない場合は、このステップはスキップしても問題ありません。

iOSシミュレータで動かす (Macのみ)

Macを使っている場合は、アプリをiOSシミュレータで動かすことができます。
If you have a Mac, you can run your app inside the iOS simulator.

アプリフォルダで下記を実行してください。

1
meteor install-sdk ios

これにより、iOSアプリの開発に必要なものがセットアップされます。完了したら、次に下記を実行してください。

1
2
meteor add-platform ios
meteor run ios

これで、iOSシミュレータが起動しアプリが動くはずです。

Androidエミュレータで動かす

ターミナルで、アプリフォルダに移動し下記を実行してください。

1
meteor install-sdk android

これにより、Androidアプリの開発に必要なツールがインストールされます。完了したら、次に下記を実行してください。

1
meteor add-platform android

ライセンスに合意した後に、下記を実行してください。

1
meteor run android

初期化処理の後に、Androidエミュレータが立ち上がり、アプリがAndroidラッパーの中で動いているはずです。エミュレータはいくぶん遅いため、もし実際の動きを確認したい場合は、実際のデバイスで動作させる必要があります。

Androidデバイスで動かす

最初に、上記のAndroid開発環境のセットアップが完了している必要があります。その後、USBデバッグを有効にしたデバイスをUSBケーブルでコンピュータに接続してください。また、Androidエミュレータは事前に止めておく必要があります。

準備ができたら、下記のコマンドを実行してください。

1
meteor run android-device

これでアプリがデバイスにインストールされるはずです。
The app will be built and installed on your device.

iPhoneやiPadで動かす (Macのみ; Apple developer accountが必要)

もしApple developer accountを持っていれば、アプリをiOSデバイスで動かすこともできます。下記のコマンドを実行してください。

1
meteor run ios-device

これによりiOSアプリのプロジェクトがXcodeで起動します。Xcodeを使ってアプリを任意のデバイスやサポートされたシミュレータで動かすことができます。

さて、モバイルでアプリを簡単に動かせることが分かったところで、次のステップではさらに機能を追加していきましょう。

次のステップへ

step07: 一時的なUIデータをステートに格納する