CocoonJS Launcher の使い方
CocoonJS Launcher は CocoonJS 用に開発してアプリやゲームを、簡単に実機でテスト・デバッグできるアプリです。 現在 iOS 版と Android 版があります。
メインメニュー
CocoonJS Launcher アプリを立ち上げると、スプラッシュスクリーンの後にメインメニュー画面が表示されます。
DEMOS
メインメニューで DEMOS を選択すると、 CocoonJS の素敵なところを体験できるデモ一覧が表示されます。
使い方
一覧からデモを選択すると、デモの説明と実行環境の選択ボタンが表示されます。
選択できる実行環境は CANVAS+ / WEBVIEW+ / WEBVIEW の３種類があります。 CANVAS+ / WEBVIEW+ は CocoonJS の実行環境、WEBVIEW はシステム WebView です。（参照：爆速の HTML5 クロス・プラットフォーム CocoonJS）
iOS 8 未満の iOS では WEBVIEW+ は表示されません。 またデモに対応しない実行環境はグレーアウトされ選択できません。
実行環境を１つ選択すると、ソースコードがダウンロードされた後、デモ実行画面に切り替わります。
CANVAS+ を選択した場合は画面の端っこに表示される「FPS(frames per second)」から動作パフォーマンスを確認できます。
描画パフォーマンスは CANVAS+ が断然早いです！ 違う実行環境を選択してパフォーマンスを比較してみてください。
実行中のデモを終了したい場合は「FPS」表示をタップしてデバッグコンソールにアクセスし、「Actions」をタップして表示されるメニューから「Exit」を選択すると終了します。
デモ一覧
ここでは iOS 版 v2.1.1.1 に載っているデモをいくつか紹介します。
Ads
CocoonJS 拡張機能の「アプリ内広告」を使ったデモです。バナー広告とフルスクリーン広告の表示を確認できます。
↓バナー広告↓
↓フルスクリーン広告↓
Box2D
CocoonJS には Box2D がネイティヴで実装されており、JS から box2dweb API を通じて制御する事ができます。 このデモではネイティヴパフォーマンスで動く 2D 物理演算処理のシミュレーションを確認できます。
- ＋ ボタン： 小惑星（らしい）が20個ずつ落ちて来きます。
- ー ボタン： 逆に20個ずつ消えます。
Keyboard
CocoonJS 実行環境の CANVAS+ / WEBVIEW+ から OS のネイティヴキーボードを呼び出す事ができます。
↓URL入力の例↓
Location
CocoonJS では端末の位置情報システムにアクセスする事ができます。このデモでは現在の経緯度や高度などの位置情報を確認できます。
Multichannel Sound
CocoonJS はモバイルブラウザの HTML5 オーディオ要素に関する制約をすべて解消してくれます。 このデモではマルチチャンネルのオーディオ再生を確認できます。
Multiplayer
CocoonJS の「マルチプレイヤー」サポート機能のデモです。
Multiplayer Match: CocoonJS 拡張機能の「iOS ゲームセンター連携」を使ったマルチプレイヤーマッチのデモ（現在 iOS ゲームセンターのみ対応）
Local Match: １つの端末でターン制によるマルチプレイができる様にする「Loopback モード」のデモ
↓Multiplayer Match↓
↓Local Match↓
Rate
CocoonJS の「レーティング」サポート機能のデモです。 これにより CocoonJS で開発したアプリから App Store や Google Play のレビューページに簡単に遷移する事ができます。
↓ストアのレビューページ↓
Sumon
実際にストアで配信中の CocoonJS で作られた「Sumon」と言うゲームのサンプルです。
WebGL
CocoonJS の売りは何よりも WebGL 対応による爆速の描画パフォーマンスです。 それを裏付けるように、WebGL のデモが沢山載っています。
↓走る 3D 馬↓
↓Ludei社の 3D ロゴ↓
↓ぬるぬる回転する 3D キューブ↓
↓まさかのカンナムスタイル↓
（Doom3 のモンスター達がカンナムスタイルを踊る）
↓シェーダベースのねじれトンネル↓
↓シェーダベースの水波↓
その他のデモ
CocoonJS Launcher には載っていないデモもあります。 すべてのデモ一覧はこちらのページで確認できます。
（TRY OUT THE DEMOS - Ludei サイトより）
デモ一覧ではソースコードをダウンロードできるので、「DEMOS」に乗っていなくても後述の「YOUR APP」で動かす事ができます。
YOUR APP
YOUR APP では自作コードや外部デモコードを直接 CocoonJS Launcher で動かす事ができます。 やり方は ZIP ファイルを転送して実行する方法と URL を指定して実行する方法の２通りあります。
ログイン
YOUR APP を使うためには、まず CocoonJS Cloud サービスへの登録が必要です。
登録が完了したら、登録したメールアドレスとパスワードでログインできます。
ZIP ファイル転送して実行
ZIP ファイルで転送して置くと、オフラインでも CocoonJS Launcher で自分のコードを実行する事ができます。 注意点として index.html は ZIP フォルダーのルートパスにおく必要があります。
iOS の場合
- iOS デバイスを PC に繋ぎ、iTunes を立ち上げます。
デバイスを選択して、APP のファイル共有画面を開きます。
CocoonJS を選択して、転送するファイルをドラッグまたは「追加…」ボタンで追加します。
YOUR APP の DOCUMENTS に追加された ZIP ファイルが表示されます。
- 実行したい ZIP ファイルを選択して、実行環境を選択すると実行画面に切り替わります。
Android の場合
Android の場合は SD カードに ZIP ファイルを転送します。
SD カードへのファイル転送には色んな方法がありますが、ここでは Android SDK を使う場合のファイル転送コマンドを記載します。
1
| |
ファイル転送が完了したら、同じく YOUR APP の DOCUMENTS に追加された ZIP ファイルが表示されます。
URL を指定して実行
HTML ページの URL を指定するとウェブサーバー上のコードを直接実行できます。（index.html は省略可）
また、デモ一覧の ダウンロードリンクのように ZIP ファイルの URL を指定すると、その ZIP ファイルがダウンロードされ実行されます。
デバッグツール
デモ・アプリ実行画面の「FPS」表示をタップするとデバッグコンソールにアクセスできます。
ログ出力
デバッグコンソールには CocoonJS 既定のログと JavaScript の console 出力が表示されます。
下端の All / Console / Warnings / Errors タブでログの種類毎にフィルタリングして表示する事ができます。
- All: すべてのログ
- Console: デバッグ・情報ログ（console.debug, console.log, console.info）
- Warnings: 警告ログ（console.warn）
- Errors: エラーログ（console.error）
Actions メニュー
「Actions」をタップすると以下のメニューが表示されます。
- Exit: 実行中のデモ・アプリを終了します。
- Reload: 実行中のデモ・アプリを再読み込みします。
- Profile: 実行パフォーマンスを計測して、プロファイルデータを出力します。
- MemoryLog: デバッグコンソールに現在のメモリログを出力します。
↓Profile 開始↓
↓MemoryLog 出力↓
設定
CocoonJS Launcher の設定画面では、デモ・アプリを実行する際のカスタマイズ可能ないくつかのオプションが用意されています。
設定ボタンの場所
設定画面は「DEMOS」ではデモ選択画面の右上「・・・」から、「YOUR APP」では下端の「SETTINGS」ボタンからアクセスできます。
↓DEMOS↓
↓YOUR APP↓
設定画面
主に以下のオプションが変更可能です。
- Orientation mode: デモ・アプリの実行中の端末向きを設定できます。
- Debug enabled: デバッグ機能をアクティブ/非アクティブできます。
- Debug position: デバッグボタン（FPS 表示）の位置を変更できます。
設定可能なオプションは OS によって異なる場合があります。
まとめ
CocoonJS はこの CocoonJS Launcher により実機テストやデバッグが簡単にできるので、他のネイティブアプリ開発ツールに比べて開発速度が早いです。
ぜひ CocoonJS Launcher をダウンロードして、CocoonJS のすばらしいデモを体験してみてください。
次回からは実際に CocoonJS で動くコードの実装方法をまとめて行きます。
Comments