ngCore最速チュートリアルの続き

前回の記事の後に、Twitterのタイムラインを取得するサンプルを iOSシミュレータで動かしたので、メモ。

前回の記事: ngCore最速チュートリアル

参考にしたのは、ngCoreの 開発者サイト の「リソース」> 「エンサイクロペディア」の「iOSSimulatorを使ってサンプルを動かす」というページ。開発者サイトのドキュメントは、学習コンテンツよりもエンサイクロペディアを見た方が分かりやすい気がする。

ちなみにシミュレータで動かすだけなら Developer Program に登録しなくても OK (サンプル動かす為にお金払うのはちょっと、ていう俺みたいな人も動作確認できる)。

手順:
1. SDK のディレクトリ以下、iOS/Release-iphonesimulator/webgame_US_LIVE_SAND_SDK-iPhone-Simulator.app を右クリックして「パッケージの内容を表示」
2. Contents/Resources/EmbeddedApp の中の webgame.app を右クリックして「パッケージの内容を表示」
3. bootconfig.xml を開くと以下のような内容になっているので

<resources>
    <string name="NgStartingServer">http://nggame.ngmoco.com:8002</string>
    <string name="NgStartingGame">Samples/Launcher</string>
    <string name="NgIntentAction"></string>
    <string name="_gameKey">game</string>
    <string name="_serverKey">server</string>
    <string name="_appidKey">com.ngmoco.webgame</string>
    <string name="useOpenSL">true</string>
</resources>

最初の 2 つ、NgStartingServer と NgStartingGame を自分の環境に合わせて書き換える。例えば、Twitter のタイムラインを取得するサンプルを Projects/Twitter に保存してたら、

<string name="NgStartingServer">http://localhost:8002</string>
<string name="NgStartingGame">Projects/Twitter</string>

のようにする
4. 修正を保存したら、SDK のディレクトリで sudo make server でサーバを起動
5. webgame_US_LIVE_SAND_SDK-iPhone-Simulator.app をダブルクリックして iOS シミュレータを起動

ちなみに Mac OSX が Snow Leopard の人は、ngCore の SDK が 1.6 だと iOS シミュレータが起動しないので、1.4.2 とかを使う事になる (1.6のやつだと、iOS 5 を要求されるが、XCode 3 では iOS のバージョンが 4 だから)。

ngCore最速チュートリアルの続き

jQuery mobile を使って作った、特殊な計算をするページ

jQuery mobileを使って何か作ろうと思い、
ちょっとした計算をするアプリを作った。この前作ったカレンダーと同じようにオフラインで動く。

特徴:

  • アスペクト比と縦か横のpxを入れるともう片方のpxを計算
  • 年間コストなどを計算(金額と日次や月次などを指定すると、年間コストを計算する)
  • ネットワークアドレス(xxx.xxx.xxx.xxx/xx)からIPの数などを計算
  • パケットをバイトに変換
  • PPI (Pixel Per Inch)を計算

後、作ってる時にいくつかハマったので、初歩的な事かもしれないが、注意点としてメモっておく。

下のような meta タグを入れておいて、

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

ホーム画面に webクリップとして保存したアイコンから起動すると、アプリっぽく見せる事ができるのだが、ステータスバーのスタイルを black-translucent にすると、コンテンツが重なっちゃうので(ヘッダーとか)、jQuery mobile を使う時は black にするか、指定しない方が良さそう。

jQuery 使って、キャッシュしたスクリプトをロードする場合、デフォルトではリクエストにタイムスタンプ付けるので、次のように cache を有効にしないとスクリプトが読めなくてエラーになる。

$.ajaxSetup({cache: true});
$.getScript("myscript.js");
jQuery mobile を使って作った、特殊な計算をするページ

ngCore最速チュートリアル

「ngCore最速チュートリアル」という冊子を貰ったのでサンプルコードなどを動かしてみようとしたら、いろいろ情報が足りなくてつまずいたのでメモを残す。環境はMac OSX。

Part 1 は概要の説明なので大丈夫だった。開発者サイトに登録して、SDKを落としてくればいい。また、サンプルコードが CodeZineからダウンロードできるので落としておく(サンプルで使われてる画像なども含まれている)。

準備

Part. 2 で Hello World のサンプルがあるのだが、その説明に

このコードを適当なディレクトリに配置して、ブラウザからアプリのURLを開いてみましょう。

とあるのだが、必要なファイルや指定のファイル名などがあるので、どこでも何でもいい訳じゃない。これは開発者サイトの「リソース」> 「はじめに」へ行くと書いてある。

とりあえず、SDKディレクトリ配下に Projectsというディレクトリを作り、各サンプル用のディレクトリをその下に、必要なファイルと共に作っておくと良いと思う。以下のような感じ。

SDK/
 +- Projects/
 |   +- MyApp
 |   |   +- Code/
 |   |   |   +- Main.js
 |   |   |
 |   |   +- Content/
 |   |   +- NGCore -> ../../NGCore
 |   |   |
 |   |   +- configuration.json
 |   |   +- manifest.json

NGCoreはSDKディレクトリ下のNGCoreへのシンボリックリンク。configuration.jsonとmanifest.jsonは以下のような感じにしておけば良い。

configuration.json サンプル:

{
    "appId": "MY_APP_ID"
}

mafifest.json サンプル:

{
    "code": [
        "./NGCore/Client/Legacy.js",
        "./Code/Main.js"
    ],
    "textures": [],
    "audio": [],
    "others": []
}

後は Main.js を編集して、冊子に載ってるサンプルコードを書いて、ブラウザで localhost:8002/Projects/MyApp/ を開けば動く。configuration.json とかは、ファイル内容が空だと make server で動かしたサーバが落ちるみたいだ。

Part. 2 のサンプル

LIST5にあるコードで、剣の軌跡を描く部分のコードがちょっと間違ってる。

bg.addChild( this._trajectory._node );

じゃなくて、

bg.addChild( this.trajectory.getNode() );

かな。

LIST6 では DnLib というライブラリのを使っているのだが、それは開発者サイトの「リソース」 > 「エンサイクロペディア」 > 「DnLib ドキュメント」からダウンロードできる。

Part. 3 のサンプル

Twitter のタイムラインを取得するサンプルは、注意点に書かれているように、ブラウザでは動かない(Flash のクロスサイトドメインの問題)。リクエストしている URL の出力結果 (json) をローカルに保存して、その Path を指定すれば、ブラウザでも雰囲気はつかめるけど。

iOSのシミュレータなどではまだ試してないので、また今度試したら何か書くかも(しれないし、書かないかもしれない)。

追記 (2012.03.15): 続きを書いた。

ngCore最速チュートリアル