jQueryMobileとGoogleMap連携系でひとまず…

jQueryMobileとGoogleMapを連携させて簡単なWebアプリを試作しました。
端末内蔵のGPSから、現在地近辺のホテル情報を表示するようなものです。

・iphoneから

・PCブラウザから ※Google Chrome

jQueryMobileのライブラリがPC/Mobileレイアウトの差を吸収してくれるので、便利なものができたものだと実感。

javascriptで4次Runge-Kutta法

ルンゲ＝クッタ法（Runge-Kutta method）は、数値解析において常微分方程式の近似解を求める方法。

今回は、ルンゲクッタ法のサンプルをJavaScriptで作って動かしてみました。

EpidemiologyのSIRモデルのプログラムを見ていて、ここでもルンゲクッタを使用していたので、一度触っておいて損はなかろうと思いまして。

SIRモデルはウィルスの感染過程を”感染の可能性のある者”・”感染した者”・”感染の可能性の無い者（免疫できた or 隔離された or 亡くなった）”に３区分し、それぞれの状態遷移をプログラムで可視化したようなものです。

これをメディアのクチコミの影響力に当てはめたりできるかな…という前置きからの本エントリ。

ルンゲクッタ法を弄ってみた図は下記な具合です。

図１：Tmax=30, dt=0.01の場合

図２：Tmax=30, dt=0.05の場合

図３：Tmax=30, dt=0.1の場合

図４：Tmax=30, dt=0.5の場合

参照サイトにはRunge-Kutta法よりざっくりとした精度のEuler法との比較もあります。

図を見て見る限り、目の細かさのパラメータdtが細ければ理論値に近い値が算出されますね。

参照
・ルンゲ＝クッタ法（Runge-Kutta method）
・Excelでルンゲクッタ法
・gnuplotで微分方程式を解く

JavaScriptでKalmanFilter

hirabayashiさんのRubyカルマンフィルターをJavaScriptに換えてみました。

カルマンフィルターの概要はWikipediaにて。

ざっくりとした認識では、定時間感覚でぶれて出力される値を、そのぶれ幅から以降の予測出力値を算出するというもの…らしいです。


動くサンプルは下記URLに置いておきます。
http://sandbox4yoshi.appspot.com/KalmanFilter.html

門外漢ではありますが、制御工学って面白い分野だなぁと。

「JavaScript ゲーム製作勉強会 Vol.1」参加ログ

巷で話題の9leap凄いですね、未来の若手プログラマの腕試しできる場を提供するという視点が素敵です。

KAYACさんがjsdo.itでブラウザ上のjavascript実行環境を提供した先行例に継ぎ、実行環境＆ユーザ・製作者相互評価機能＆ゲーム開発ライブラリenchant.jsまで合わせて用意されるという至れり尽せりっぷり。

と、9leap礼賛はまたの機会として、5月15日(日)開催の「JavaScript ゲーム製作勉強会 Vol.1」へ行ってきました。

場所は毎度お世話になっています大森ニフティさん。

土日大工で何つくろうの前に選択肢を広げたいという欲があったので、今回のイベントは素材集めとしても非常に有意義なものでした。

以下、毎度ながら自分用メモ残します。

***
司会・講演者：@hakoberaさん

ゲームの構成要素
・Soft Realtime　時間遷移
・Interactive　プレイヤー
・Agent Based　アイテム・オブジェクトの相互作用
・Computer Simulation　　


コンピュータ内の新世界
独自時間軸、登場人物、ルール

・３DCG
・AI
・物理演算
・Agent間通信
・UI設計
・巨大NW

JS利点
・動的型付け
・プロトタイプベース

GoogleChrome V8
ブラウザベンダ間で

V8/nitro/spider monkey..
かつての数十倍速度に


考慮すべきポイント
・Logic　
・Graphic　Canvas/WebGL/SVG/DOM
・Sound
・Movie
・NW
・Input

用途に合わせた仕組み選び
・DOM
・Canvas/WebGL

参照：SVG Girl
15 flameならリアルタイムでもいける


管理すべき項目
・タイムライン
・入力系
・シーン
・リソース
・イベント
・描画
・サウンド

参照：アクアリウム


JSの死角
ハードウェア非サポート
ジョイパッド等も

カメラ
StreamAPI

Audio API/音鳴らす制御系は地味,互換性ない
(Chrom:web audio api/ FF:AUdio data api)

スマホ
audio鳴らすと全画面再生になってしまう

PCよりCPU貧弱
iPad2はPCより描写10倍遅い…
→GPU描写なら早いが、Canvasでは遅い

コーデック問題（audio
MP3
Ogg

(video
H264
Ogg Theora
WebM


PCだけならFlashに絞るのも有り。

IE9 XPでは動かない
IE6,7,8 Canvas動かない

Chrome Web Storeみたいに割り切りとか。（Google I/O


Game Loop
初期化してGameFrame書き換え
1秒間繰り返しFPS

C言語なら…
function main(){
    init();
    while(alive){
        var key = getInput();
        processInput(key);
        move();
        draw();  
    }
    exit();
}

JSなら
function main(){
    init();
    setIntarval(function(){
        var key = getInput();
        processInput(key);
        move();
        draw();  
    },2000);
}



window.addEventListner('keydown',KeyManager.keydown)
でgame.js呼び出し

timer = setInterval(mainloop,INTERVAL)
反復

→X
↓
Y
（上に進める際は、v*(-1)）

myloop内で当たり判定等…実装

300行ほどで簡単なゲームも実現！


巷のJSライブラリ

enchant.js

Canvas
  sc
  lime
  easel
  imapct

WebGL
  GLGE
  Three.js


データ駆動開発
ライブラリ

組み込みスクリプト
Unity
Server Side JS
Node.js

GWT
Javaで書いて、JSにコンパイル

参照：playwebgl/games/Quake2



JSでの実務現場レポート
講演者：@souさん
  web app /game engineer

実務
 Flash 動かん…
 HTML5で開発しなおす

農園ホッコリーナ for iOS
mbgeの女性人気No1

DeNA@スマフォ

海外
Bandit Nation（CSS3
Pirate Nation

国内
怪盗ロワイヤル…
海賊トレジャー
農園ホッコリーナ


アクション部はCanvasで

忍者ロワイヤル
ngCore(フレームワーク名
JavaScript
クロスプラットフォーム


農園ホッコリーナ for iOS
iphone
パフォーマンス
３G回線

作ってみて…

農園の様子
アニメーション表現
（Canvas/Sprite Imageで位置ずらしパラパラ漫画）
320*386px
８FPS(@iphone4

iphone3GS > 4（Retina対応で描画パフォ落ちる） > iphone3(HWスペックつらい)

１Mapに30〜40オブジェクト数
11〜40KB/枚
トータル300〜400KB

通信
XHR

遊んでもらえるものは作れそう…

描画
３GのHW性能…チューニング次第
Retina対応…難度高い（データ量で解像度きつい


wi-fiならさくさく
３G回線でもそこそこ

電車内移動中つらい

XD（クロスドメイン）通信ハンドリング
XHR2待ち
JSONPでは待機ビジーで通信こける


通信
サイズ減らす
読み込まない工夫が必要

キャッシュ技術使えば…

HTML5で使えるキャッシュ
・Application Cache　…魔人ウォーズ(最初にすべてDLする場合有効だが、個別DL系は厳しい
・local Storage(2.5MB　ドメインに対して上限
・sessionStorege(2.5MB
・WebGL SQL Databese（5-50MB


Retina対応
解像度4倍
データ量2倍強
iphone4 描画性能で限界


高解像度対応はいずれ通る道
BMPデータをオンラインで←つらい

キャッシュ、データ保持強化
データフォーマット（ベクターで受け取るとか、SVGでCancasレンダリング、SWFが適当？

SWF→JSコンパイル系ライブラリなら使える？

新しいテーマ
WebGL
XHR2,etc

画像ファイル系：ガラケー→スマホへ圧縮



「玉転がしゲームで学ぶUnity入門」
講演者：@nakamura001さん

ヒエラルキーブロック
・画面表示される
プロジェクトブロック
カメラビューブロック

GameObject作成

マテリアル作成
作成後、ヒエラルキーブロックへD&D

Floor　色変更　
ライト追加（デフォでは無いので

Player
玉を作成

Player Material

Projectに画像ファイルをProjectブロックへD&D
で、Playerに追加で反映される

Main CameraのInspecterのPosition変更

Projectで
JS/C#/BooScript(pythonっぽい？)
選んでPlayerActionと変名（PlayAction.js）

スクリプト：
var x = Input.GetAxis("Horizontal)*Time.deltaTime*power; …(※deltatime処理オチ等への遅延時間


玉転がし…なので物理エンジンを使おう

Player選択後、CreateObjで→CommponentのPhysics選択
右クリック→Import packageからでも可能


JSを変更
rigidBody.AddForce(x,0,z)として物理エンジンのパラメータを与える

Fireのボタン操作でY軸にAddForceしてジャンプ機能追加


HierarcyにCubeを追加”Goal”と命名
ProjectでGoalMateialとしてパラメータいじって、Hierarcyの”Goal”CubeにD&D

GUI Textを追加
名前をGame Clearとして
Projectで、JS追加”GoalAction”

var player: GameObject;
var gameClear: GameObject;

function Start(){
    player = GameObject.Find("Player);
    gameClear = GameObject.Find("GameClear");
    gameClear.active = false;//初めは隠す
}

sendMessage()で他オブジェクト内の関数をCall可能



X360 Kinect hacks
「KinectどうしのNW対戦」
講演者：@ndruger

利用技術
node.js
websocket（少ない帯域で通信＆Server Push可能
webgl（OpenGL ES2.0がブラウザで使用可能
VR920(HMD)…映像＆地磁気センサーで見ている方向取得可能
Kinect…モノヒトの位置トレースできる


リモートNode.js

Webブラウザ（WebGL描画
ローカルNode.js

TCP
顔の向き（iWear SDKアプリ
部位のXYZ（OpenNlアプリ


使用ライブラリ
Sence.js（WebGLライブラリ,Tree構造でわかりやすい
glMatrix.js(3Dの演算、手の伸縮・角度計算
Node.js（サーバ、クライアントの各Player計算
Sochet.IO（WebSocketのラッピング、WebSocket未対応のAndroidへの操作対応


Kinect+ブラウザの未来（妄想で

ブラウザの機能としての規格化
・簡単導入→規格化
Scene.jsのObject変換が手軽になる
・誰でも容易に何かを触ったりできる
フィードバック用の安価なハードウェア広まる
→物体を触れる装置の普及、振動を起こす等も


ダミープレイヤー
（一旦動いて撮影したデータ再生による

CPU使用量からKinectゲーム(30fps)をMMOとしてやるのは厳しい

3人以上のエミュレート
・２〜５人くらいで誰かが一時的にサーバ立ててゲームするのが良い
・パケット量を削減してないと4人でも６Mbps消費

ブラウザ＋Kinect＋HMDを使って、すごい没入感世界が大掛かりな機材なし、体験共有できる
※SecondLifeでは視覚以外の体験もあれば良かった


以上がLTメモです。

二部ハッカソンは私都合により参加できませんでした、残念…。

”AppEngine ja night #13”参加録

行ってきました、”AppEngine ja night #13”
http://atnd.org/events/11626

コンテンツは、

・セッション1 「mixiアプリ『Xmas 2010』開発トピック」
・セッション2 「mixiアプリ『the Actress』運用にあたっての課題へのチャレンジ」

以下自分用メモ。

***
【AppEngine ja night #13】

バスキュール社

田中さん
担当：プロデューサー・スタッフィング・技術可不可・コンテンツ品質向上

2000年
Web制作会社として創業

インタラクティブコンテンツ制作企業

スタッフ40名＠西新橋
プランナーディレクター12名
AD,デザイナー8名
クライント側ディベロッパー20名（Flash）

サーバ側委託が多い
withビープラウド社


ケータイコンテンツも手がける
・Gyorol


AmazonEC2事例
「新宿駅前浴場」
AXEのプロモーション

Ustream
Twitter連動コンテンツ
→1秒間15ツイート
→リアルタイム回答受付


『ネットで社会をおもしろくしたい！』


ネットのコミュニケーション
ソーシャルグラフをいかに利用するかが鍵
Facebookが公開グラフしているように…


・mixi Xmas
2週間で100万人
・AXEヨバゲー
・mixiFes

mixi application
・mixi Xmas2010
・The Actress


北島ハリーさん
5年目プログラマー
テクニカルディレクター

mixi Xmas企画
クリエイティブ進行担当

ポイント獲得
好みの靴下を飾る
確率でクーポン出る
有料でギフト送れる

ケータイからも見れる
25日当日に靴下にプレゼント届く

とある評価：リア充アプリｗ

エモーショナルなイベントですが。。
クリスマスまで1ヶ月→飽きがこない

迷いのない動線、ユーザインターフェース
分かりやすくて可愛いもの。

普遍のストーリーは演出

インスタントくじ
リアルな商品が当たる。

ソーシャルギフト
QRコードにアクセスするとバーコードが出る
ソフトバンクギフト提携でセブンイレブンの店頭で商品交換可能！

12/1～12/25
アクセス250万人
鳴らされたベル数8000万回
最大秒間620req

LAMPで作るといくら…？^^;


開発環境
・Flash
・Java
・AmazonEC2
・Paymentプログラム
・ソフトバンク連携


◇mixi Xmas
森田真克さん@mouri45
あゆた社

ソーシャルアプリ受託

mixi / OpenSocial
GAE/J(Slim3)
PC版にはJSONデータ送受
PCアプリ版、モバイルアプリ版

2ヶ月実装は1.5ヶ月
WebAPI20（リリース後に+3
モバイル画面50（リリース後に+15
Kind数12

秒間620Req
1日2200～2500万
12/1～12/24　約5億3000万
ダイナミックリクエスト

朝がピーク、通勤通学中と思われる（制限一日1回あり）

最大インスタンス420
DataStore　95GB
レコード数は2億件

【GAE開発ノウハウ】
設定情報をstaticにして保持！
Memcasheへのアクセスを減らす

アプリケーション全体で利用する設定情報
Static変数が空、有効期限切れならMemchacheまたはDataStore

設定更新までのタイムラグは発生
AppEngineAPIなるべく使いたくない。


mixiアプリ制限
クライアントからのリクエストへのリスポンスは10秒制限
それ以上はタイムアウト

JOIN停止
モバイルアプリでは一定時間に一定回数タイムアウトすると新規ユーザ登録停止

データストアへの集中アクセスにより、時折リスポンスに3秒～6秒ほどかかった

JOIN対策
requestがキューにたまる時間を削る

DataStoreアクセス時のデッドラインを指定する
DataStoreServiceConfigを使用するとDSアクセスの制限時間を指定可能！

LowLevelAPIでDataStoreServiceConfigのdealine指定
JavaDocから参照

Slim3でも同様
アクセス毎ならタグに書く

Spin-upへの施策
インスタンス起動時間
Static変数をフラグにしてSpin-upの判定
モバイルはリダイレクト対応

WarmUp Request利用
クエリよりバッチゲットを優先
不要なSinglePropetyIndex作らない

検証は不十分なところもあった


カスタムインデックスとマージジョンは控えた
※画像を修正したときに起きるらしい…？

件数多いkindはマージジョイン利用時にカスタムインデックスつくろうとする。


task queue を多様
ベル鳴らし時に相手にポイント付与
しかし秒間数百回となる可能性を考慮して実用は控えた

決済機能に対してこれを使用
※デフォルト値10回、設定ファイルいじれば問題ないらしい


GAEでPageView取得したものの…
GoogleAnalytics、モバイル版imgタグ使ってリクエスト誤るので
別GAEアプリにimgタグを用いてアクセス数を取得した（迂回
→予想以上に費用高くついたので、最終的にEC2にApacheでログを集めた


キーの命名
先頭にタイムスタンプ付けてクエリ結果ソートできる…が
GAEのBigTableはTabletServerにより管理される

ひとつのTabletServerにアクセス集中
数百PPS

キー文字列先頭にハッシュ値をつけることでひとつのTabletServer分散


GAE劇的にパフォーマンス改善
GAEソーシャルアプリに向いてる
GAE/J+Slim3＋Eclipseのすすめ


Q:ログ拾うのになぜEC2使う？
A:mixi10秒制限へのServletの負荷を軽減


※キー分散
自動採番でPutが多い場合は考慮すべき
1組1000個程をTabletServerに送りつける事情を考慮した

TabletServerのインデックスのプロパティに書き込み


◇The Actress

山手線のトレインチャンネルで流された期間もあり
Luxの既存顧客は30～40代対象だが、20代以下にターゲティングしたためmixiアプリにした

女性向け
mixi
バナー
いわゆる女優ゲーム

「シンプルさ」でなく「詰め込んで」体験できるゲームにした
平均滞在時間1回10分ほど
1日平均4回アクセス

通算80万人登録（75万
DailyActiveUser10万以上（ピーク20万

ピークタイム200～300Req/Ssc

1日1000万～1500万リクエスト

GAEインスタンス数およそ500
ピークで1.5倍増大

ユニリーバ
バスキュール＠大阪
（mixi、イラスト、映像制作、声優キャスティング）
テラポート
（コンテンツ開発）
バスキュール
テレポート＋ビープラウド（GAE運用）
6ヶ月長期プロジェクト


ビープラウド
岡野さん
@tokibito

プログラミング言語はPython
GAE API Expert @lanMLewis

mixiアプリ

PC側　Flash
モバイル版　動的にHTML生成

GAE/python
Kay Framework　アプリ数80個

秒間同時リクエスト数100～200

Kay Frameworkについて
@tmatsuo制作

アーキテクチャ
Django風
Jinja2テンプレート
Werkzeug（ベルセルク
国際化（Babel
遅延ロード


短時間でDeadlineExceedError
ImportError
有効URLで404
メモリ使用量制限落ち

DeadlineExceedError
タイムアウト
SDKでは2箇所で定義されている
（google.appengine.runtime.apiproxy_errors
google.appengine.runtime）

エラーハンドリングしないといけない

※起きうる状況
・API呼び出し
・FileIO
・システム系Call

Spin-up時のImportで起きた

APIフォール
Pythonもってる

モジュール数多い箇所でエラー

ImportError
Jinja2は初回でモジュールたくさん読み込む
テンプレートロード中で中途半端に

Spin-up時のモジュールに注意
warmupを使う

GAE/python
集計時のメモリリーク


1リクエスト処理を減らす（タスクキューで分割
モジュールは遅延ロード（使用頻度低いのはロードを控える
変数のキャッシュを減らす（MemChacheとか

ListよりもIterate系でとるべし


◇まとめ

2日半で100万人
1週間で200万人
想定外の集客

コスト：今までの6案件のなかでの概算値
1000万リクエスト＝100ドル！（すべてDynamicRequestの場合）

LUXは1日1000～1500万アクセスだから…
ケタ違いに安い（ゼロ一つ安い）

インフラが心配で却下してきたことも…
（イニシャルコスト・スケーラビリティ）

TVやイベントをネットと連動でも！
大多数ユーザとのデジタル体験の提供が可能

システムリソースが確保できても経験もつ人的リソースが足りない！
ソーシャルグラフ利用のサービスもやっていきたい。
***


【所感】
・1000万リクエスト＝100ドルで運用できるインフラはインパクト大！

・企画力、アイディア大事。使ってみたいと思えるサービスあってのクラウド。

・情報の収穫逓増。集めたデータを利用してさらなる価値が産まれる。