2011年12月30日金曜日

年末振り返り(2011年編)

年の暮れも近いので、今年度の振り返りです。


【使っていたWebサービス雑感】

  • Twitter:海外滞在中、英語・中国語で呟くようにしたら外国人の友人が増えた

  • facebook:twitterで知り合って以降も、リアルで繋がりたい知人にはfacebookのアカウント交換した。
    (→特に台湾ではfacebookアカウントはおよそ一人ひとつ持ってるとのことなので有用)

  • Skype:年初、Lang8で知り合った海外の知人と日英相互学習をしていたものの、双方のスケジュール合わずで中断。

  • RSS系:いまはGoogleReaderはたまに開く程度。
    はてなブックマークのお気に入りユーザの更新情報をメールに送るようにしたら、RSS閲覧時間が大幅に削れた。

  • Tumblr:これはエンターテイメントと割り切り。時間泥棒。
    実用では、たまに拾いそびれた技術ネタが回ってくるのでそれをチェックしたりする。


【今年手を出した事柄】

  • WebSocketで遊んでみた
  • jQuery MobileでiphoneアプリMobileHotelMapを実験的に作った
  • node.jsでのHeroku上でのWebSocketを活かしたアプリ作成は手付かず…orz
    (→node.js、monogodbいずれの技術も追いきれていなかった)
  • Google Chrome拡張の感触が掴めた
    (→ブログに書きそびれてる)


総括:

  1. facebookを使って感じるのは、世界は狭くなっている
  2. Twitterでは個々人に焦点を当てて眺めると、世界は深くなっている
  3. Tumblrからは個々人の嗜好が混ざって誰かの好きが自分の好きになる感覚で、世界は溶けている
  4. 「自分がこれをやった!」と言えるモノが作れていなかった。
    2012年は如何にしても達成したい。

2011年10月15日土曜日

と或る読書人の金言

新宿某所※の座談会にて。
2011年10月13日 PM19:00〜
エリエス・ブック・コンサルティング 会議室アゴラ


売れる本の作り方
→売れている本を真似ること。
例:装丁のセンスは自力では一生治らない

真似を極めるとは…

ギリシャ(エジプトの模倣)
なぜ模倣元のエジプトを越えられたか?
・神の模造
・人間性の追求
・大理石という独自の素材を利用


人の真似をして、今までに出したことのない成果を出すこと
真似=他人の力を使うことor他人に成功の道案内してもらうこと

真似をして成果を出す
それからしばらくすると気持ちに余裕が出てくるので、何故うまくできたかを検証する

これからの時期にフリーランスやる場合…
チェックポイント
・クライアントはいるか?
・対価をどの程度か
・供給過多になるのか、最終的なパイはどの程度か


会社の辞め方は大事、円満退社が理想
辞めたときの評価が良ければ再就職もありうるが…
以前に在籍していた会社のステージは異なっていることが多い

倍々成長している会社では2年前の仕事は4分の一の規模になってしまっていることもある。
→対して、自分はアップデートしているか?


経営者が「何」に対して、対価を払うかを、意識はどこにあるかを考えること。

例:書店に良いマーケティングのアイディアがある。が、書店では予算がない。

経営者のマインド:
・人間にお金をかけられない
・本業以外にも目を向けたい
…etc.


現代の就業はより自由になってきている、出戻りもあり。

ただしSNSの盛り上がりにより、辞め方は影響あり。
業界内の人事のつながりもある。
人材業界の狭さ。

成果を出しているひとは買ってくれる。

応援される人の見抜き方
・後輩に支援されていたら売れる
・業務外の周辺スタッフからの支持
※Amazonは360度評価のため、スタッフの信頼も必要だった


成果=相手を徹底的に儲けさせること
→相手のして欲しいことを自分の持っている引き出しで埋める

人脈
・とっておくと後で役立つ
・ニュートラルな姿勢でちゃんと付き合う
・相手を儲けさせる

成果
・ビジネス:お金
・ビジネス以外:相手の好みを知ること
→ビジネス以外での人との付き合い方は、相手の人となりをよく見ておくこと、気づくこと、嗜好性を知ること。


と或るモットー
・友達をやたらと作らないこと
・知り合いを作ること

友達とはビジネスな話は避ける
知り合いならば問題なくビジネスの話ができる

今までに20000人ほどの人に面会してきた
そのなかの知り合いとこれからも付き合っていく

会う順序は、仲の良い順ではない。
会える日時が重なった縁の良い人と会う。
※ベストな条件の人としか付き合わないという姿勢はNG、実際に会った人からどこまで人脈を深堀りできるかが大事。


人と付き合う方法
例:子供だけでゴルフ場を開拓した経験(2ヶ月に及ぶ芝取り)
ビジョンを「ゴルフ場をつくろう」ではなく「ここを平らにして一面でラジコンカーを走らそう」を掲げたら、人は動いた。

→ビジョンがあれば人は動く
※人は楽しいことが好き


支援している著者の書籍:もっと売れるorもうこれ以上は無理、と本は語る

成長ステージはある
ステージに見合った能力をフル活用する場がある

世間的価値観に左右されるのはNG
給与の多寡は業界次第

強みに生きる
やりたいからやるに特化すべき

才能に気づくこと:自分の得意は何?
ただし、若い時に苦手なことをやるのは良い事
苦手を知れば強みは活きる

キャリアを振り返って…
編集:苦手
出版:苦手
分析:得意
販売+分析で成果が上がった


理論と分析
すでに起きた事実の分析から完璧な理論は立てられるが…
「前提が動いているもの」への理論立ては不可能

動く前提へは観察力がいる
・いま現場で見ている人だけが見れるもの
・現象に気づくことのできる素養


現代=モバイル時代
教養で現代を図る方法

例)モバイル時代 ≒ ギリシャ:ミケーネ時代
・宝飾品の流行=資産を持ち運べるものを尊ぶ時代性があった
→定住への不安
・幾何学模様の流行
→整理された状態が好印象に


世界からみた日本=極東のアジア、人気ない
人気ないが為に安全。

100年予測:地政学の本
中国は大国になれない=国境の広さ
米国=巨大な島、「海を制するは世界を制する」が歴史

基軸通貨国であることは高い代償を要する
基軸通貨国の条件=その国の良いことが世界にとって良い事であること
※いまの米国の振る舞いは果たして…


TPPに日本は参加せざるをえない
TPPはフリーでフラットな地図をつくる
それはグローバルな競争力をもつ強いものしか生き残れない状態

TPP=地域差を廃して、真っ平らにする
すると人間はどうするか?
→「壁を背に向ける行為」に出る
=いかに参入障壁を高くするか?と考えるようになる。

TPPが池ならば、餌・釣り糸で選び方で決まる


日本人の特性?
世界基準で見ると、日本人は凡人でも細やか

ロボット=人材+電脳
ホスピタリティ仕様の日本製ロボットは魅力、PCを駆逐する未来は有りかも


政治家は営業力が命、「日本を買ってくれ」といって欲しい。
韓国はサムスンを買ってくれと言えるが、日本は選択肢多すぎる…

ブランドは売れる

日本の閉塞感:マネージメントが云々ではない、稼げるネタがない
→未来の希望があれば明るくなる

捨てないから次が見えない・新しいことができない


資源とマーケットのあるところに人が集まる
→かつての長崎軍艦島(当時の東京人口密度の2倍

日本の端にある国際空港が栄えるべき
→札幌、博多、日本海側も
空港が街から遠いのはナンセンス


ギリシャ観光業のGDP比は20%
神話ネタは儲かるはず

日本のホテル観光業は「英・中・韓」サイト必須にした方がいい

ギリシャ旅行時、書店にあった観光ガイドブック
Japan⇢Kyoto⇢HOSHINOYA(星のや)が中心ページにある…!?
星のやが京都代表の旅館、延いては日本代表旅館のようなポジションとなっている。

日本の観光業GDP比は0.5%
カンボジアでも9.5%

→日本の売り込み下手
留学生で自国へ戻ったひと対象に通販しても需要ありそう。


ソーシャルマーケティング
日焼けを売るな、美白を売れ→韓国は美容エステで海外客を取り込める

日本人らしさを売れ
ケータイ=現代の蒔絵

高価な本物を売ると同時に、安価なレプリカも売れる

日本は海外と金融で勝てない
商品・アイディアがお金を振り回すようにすべき

facebook:エンジニアが金融に買った歴史の転換点
強くなった消費者と、彼らの欲しいものをつくる者にお金が流れる時代
しかもそれはグローバルで起きている。


日本 ≒ ギリシャ
小国かつ歴史文化をもつ
→ローマの流通にギリシャの商品を載せて流した歴史から学べる

現代なら日本文化・神話を新興国エリートに教え込む策がある
Japanese Emperorは世界最古
USAは歴史への憧れがある、天皇崩御の際はTime紙表紙掲載になる

日本儀礼スクールの需要ありそう
いかに早く、さりげなく流通網に忍び込ませられるか


話題戻って、ロボット
ホスピタリティ最高峰は大阪リッツカールトンホテル
ロボットならではのサービス、アイディア

国内アピールポイントは海外から距離を置いて見るとわかる
日本人の所作はセールスポイント

解禁に弱いVIPマーケティング:
マーケティングは国内の伝統物解禁→VIP招聘→あのVIPが来たというキャッチコピーで売れる

Disneyは映画およびストーリーありきで売れる、キャラクター先行ではダメ
※映画、世界観提供→ファン獲得→キャラクター認知→遊園地、グッズ販売
SEGAはゲームキャラクターから入ってしまった…

人は気分でも買う、面白い映画を作ったら映画に紐付く商品は売れる


最後のまとめ:
日本の良さを活かして、仕事を作りましょう。

2011年10月8日土曜日

未来は遅れて訪れる、または訪れない

Steven Paul Jobs has passed away.

1955年にこの世に生を享け、享年56歳。


彼の死は米国平均寿命74歳と比べても20年は早かったと言われている。
彼の居たかもしれない20年で、今後のクリエイティブがどれほど欠けるのかとも。

パロアルトが、ジョブスが過去に夢見た未来はようやくそれらしい形で実現して
彼は他界してしまった。






彼が現代で実現したのは、かつて夢見た30年ものの未来だった。


未来は遅れて訪れる、または訪れない。


未来を叶えようとする力と、それに抗おうとする力の拮抗で、
芽生えては消え、切り口の先からまた芽吹くように。

起きた事物が、メディアの糸を通じて、見知らぬ国の見知らぬ誰かに響く。

意志の連鎖と継承は、いつの時代も静かに起きる。




2011年10月3日月曜日

聴講メモ:【希有馬屋フリートーク#1 井上純弌「聞くだけで上手くなるエロ&萌え絵講座」】@代官山 ”山羊に、聴く?”

井上純弌さんのトークイベント聴講してきました。

【希有馬屋フリートーク#1 井上純弌 「聞くだけで上手くなるエロ&萌え絵講座」】@代官山 ”山羊に、聴く?”

井上純弌さんは「中国嫁日記」で2010年ブログアワード受賞。
同ブログは最近書籍化もされ、いま非常に勢いのある人です。

同人制作に長期間携わり、売れない時期も長かったと聞きます。

売れる、と、売れないの両方を知った人のナマの話しは、サービスorコンテンツ制作者にとって、非常に有益と感じ、参加してきました。

以下、その講演のメモ。

***
売れたのは嬉しいけど、煩わされるは無意識の売れたくない病

面白い↔面白くない
売れる↔売れない
…これらに相関関係はない
…こうすれば解決という結論もない

知人の編集者のサトミさんにどうすれば良いかを聴くも
売れたくない病は意識しても治らないので良い加減なことは言いたくない。
(対:あずまきよひこさんのみに責任をもつプロフェッショナル)


同人誌ってなんだ?
10年以上やり続けている。

エロ/萌えは同じ(違いは「強弱」のみ)
言うなれば、痛さと辛さの違いのようなもの。

10万部売れることと1万部売れることは別次元。
→言っていることは同じでも、発言の影響力が違う。

※言ってる人も同じ、言っている内容も同じ。
それでも売れている部数の大小で相手に通じたり通じなかったりする。

意識的な売れたくない病というものもある:売れるような漫画は書きたくない。


TRPG(テーブルトークRPG)
いかに多くの人に遊んでもらえるかを意識して同時活動をしていた。

一番売れているTRPG「SwordWorld」30万部
書籍「中国嫁日記」20万部
→マーケットの大きさで影響力は違う。


漫画作品例から…
「ひまわり」:ネームをけなされるのが辛くて書ききれない
「バングラディッシュで玉の輿」:面白いのに売れない、照れが見える
「ダーリンは外国人」:売れへの照れが無い、これは才能
「セーラームーン」:売れへの照れがとにかく無い

井上さんは「自意識の肥大している人を観察するのが好き」「自分のできない事をやってくれる、自分は追体験できる」


売れたくない病で仕事すると…
小賢しいことをする:分析してウケたことを繰り返そうとする。

これを防ぐためには…
参考例:相撲
「瞬間の競技のため、立会の時間しか戦略を考えられない。同じ手の反復は通用しない。
なので、勝負時は無意識にする。」


評論をすると基本的には売れない。
町山さんは映画評論以上にクリエーターとして自分を売れている。
映画評論を材料に、それを語れる自分をコンテンツとして確立している。


脳と分析「ユングとフロイト」
主観が一番面白い!

心理分析は事象の積み重ね、それ自体はつまらないもの…。

歴史=勝者の主観だから面白い!


<講座>
ネタ本「本気の漫画術

レンズの種類:広角・標準・望遠
※望遠の世界には歪みはない

士郎正宗さん
→人間は望遠・背景は広角


遠近感
アダルトビデオは広角レンズ(男性を小さく見せる
→迫力あるが、冷静にさせてしまう
客観性があるために馬鹿っぽい
(絵が上手いために…という例はある)

望遠
距離が近くなる
絵が下手でも誤魔化せる


ドラマ「HERO」
基本円形レンズ
クライマックスはずっとアップ=パースを殺すことで親近感を沸かせる

押井守さんはスパイ(見られてる感を)出すときは、魚眼レンズ使用
その観察者の視点で見れる

ボルゼさん
同人誌売り手、構図はいつも同じ。パースを排してエロさを引き出す。


エロさはすなわち望遠


ネタ本「萌え絵の教科書
→パースの話は一切ない

アイドルマスター然り、3Dパースを与えると萌えの認識ができなくなる

江戸時代の春画=望遠
西洋画技法もあったがエロには導入せず。


エロ絵ってなんだ!?
エロに正解はあるのか。

DVD「一人ごっつ
第一話にてまっちゃん曰く”お笑いには正解があると思うねん…”

井上さん:エロにも正解があると思う。
コミケ会場の熱然り、そこに集まる訳がある。


過去の作品を辿ると…

「マクロス」
…今見ると絵が変だが、当時はまさに求めていたアニメはこれだ!という感覚が確かにあった。

「センチメンタルグラフティ」
…10万本のヒットゲーム、今見るとパースがおかしい。当時は模写していたくらい正確と感じていたはず。

「特攻の拓」
…不良が出てくるとリアル
ヒーローは望遠。
→これは不良は他者(敵)として認識させる客観性を与えるため。


どちらが正しい?
・今の自分たちが見た過去の作品評
・当時のファンの作品評
→当時のファンが正しい!萌えは歪むもの。


時代ごとに正解がある。
→コンテンツの当たりは時代性に左右される。

今買っている欲しくてしょうがないものは、10年後には価値がなくなるよ。
または、今と違う目でそれを観るようになるよ。

ちゃんとした絵は時代を超えた萌えの正解となりうるか?
→No。それは客観的なものになってしまう。萌えはあくまでも主観。


AVパッケージを見比べて…
1980年代のアダルトビデオはやや怖い、ださい。
2000年代になると、少し見慣れたものになっている。

なぜ?
→女性のスタイルが良くなったから?
答え:化粧と照明のせい。進化したりはしない、素材は同じ。
その時代では、その「化粧と照明」がベストパターンだった。


なぜエロには今しかないのか。
→今一番良い雌を求めているから。

狩猟生活・農耕生活・現代社会への変遷
3〜5年のパートナーシップ。

消費対象に対して…
消費者が半年単位で変わるのが、女性の描き手
消費者が3年くらい付き合ってくれるのは、男性の描き手
→パートナーシップ


漫画家の先駆者の先生方には既得権益がある。
書きためたもの、ノウハウ的な意味で。
※ただしエロは除く、それは生鮮食品だから。



次に現れるものは消費される。
エロ萌えは常に最大効率、その瞬間に金儲けに直結。
この時間にしかないものを買う。
→今一番売れているものから技巧をパクるのは有効。


フィギュアは8,000〜10,000円相当するが3年もたない。

ただ、フィギュアの人気には例外はある。
プレミアフィギュア、リアル系はプレミアが付くことも。

例外①:投機的価値のあるもの。
キャラクターは生き残る=ずっとお金を稼ぎ続ける。
※仮面ライダー、ガンダム、ウルトラマン…
→将来になってから買えないものが価値が出る。

例外②:何度もリメイクされるもの。
※戦艦ヤマト

例外③:商品価値の高いもの
※連合艦隊(シリーズもの、切り分けたら価値がないようなもの)


村上隆さん
「芸術は消費される」

アンディ・ウォーホル
→キャラクターになったから売れた。


強烈なキャラクターの価値

小池一夫さん「劇画村塾」での教え
→キャラクター(人格)を立てること!


漫画:「アバンチェリエ」
原作は100年以上前の小説
現代版でも大幅な脚色はしていない
→これがキャラクターのもつ普遍性


石ノ森章太郎
SFの大好きなものを収集した。
→当時は変身して強くなるという概念が存在しなかったため、
仮面ライダーの変身の表現に苦心した。
それを成し得てブレイクスルー!

ウルトラマン
→銀色の巨人が僕らの味方だと認知させるまでの過程が困難。
円谷プロの特撮技術があってこその。


映画:「マトリクス」
3D拡張現実のイメージを感観客に植えつけた。

映画:「インセプション」
拡張現実に対してマトリクスの下地があってこそ大衆に受け入れられる。


「中国嫁日記」
中国人とはこういうものだ?を見えるように。
先駆者コンテンツは、「ダーリンは外国人」(国際結婚)
→もや〜と漠然としたものに形(またはキャラクター)を与える。


ヒットコンテンツのキーポイント!
①今までにないものを創りだす。
②漠然とみんなが思っていることを形にする。


エヴァンゲリヲン
画期的なこと。
・ロボットにオカルト要素を持ち込んだ
・アニメにエロさを取り入れた(過去にも試みはあったが成功例としては無かった
→エロ・バイオレンス・食欲、の描写は魅せられる


宮崎駿さん
「自らの半径5m以内に目を向けよ」
→もや〜としたものに形を与えるコツはこれ。

小田空さん
→中国を漫画描写、しかし対象が広すぎる。

中国嫁日記では中国人を描く
キャラクターとして認識させることで勝負。


みんなの知らないものに形を与える他の例
奇襲的なものもある:
ノストラダムスの予言、一発芸人ネタ
ただしこれは反発も招きうる。


まとめ:ヒットコンテンツのために大事なこと
・今までにない新しいものを生み出す、ブレイクスルーを起こす
・半径5m以内のモヤモヤに形を与える

***

以上です。

2時間あっという間でした。



2011年9月24日土曜日

Heroku/Node.js で "hello wolrd"(自分用メモ)

初めてのHerokuです。
dotCloudも試したのですが、web-socket使うのであれば、Herokuの方がオススメとのことだったので。

手順はおよそこのサイト通りでした。
id: ruedap ++

実行環境:
MBA
MacOSX Lion 10.7.1


【実施手順】

  • Node.jsインストール
  • npmインストール


npm install (module name) とするとパッケージのnode_modulesフォルダ内にモジュールがインストールされる。
グローバルにインストールしたい場合は、npm install (module name) -g とオプション指定する(複数アプリで使いまわしたい場合)。
node.jsは半年触れないと細かいところ変わっていて早いなーと。


その後、任意のフォルダにて
  • expressインストール
  • express (YourAppName) コマンドでアプリの雛型作成
  • サーバファイルapp.jsを更新
雛型のapp.jsと同階層に
  • package.json(アプリ情報と、node.jsのモジュール群バージョン情報)
  • Procfile(アプリ形式の設定ファイル)
  • .gitignore(Herokuへコミットしたくないフォルダはここへ記述)
を配置。

まずはローカル環境で実行確認。
いつもの node  app.js

Procfileでの環境に誤りがないかforemanでテスト。
foreman start を実行
※foremanが入ってなければ事前にインストール gem install foreman

ここまで進めば、残りはHerokuへのデプロイ作業のみです。


ちなみに、参照先以外で、デプロイ時につまづいた点は以下のもの。
【1】
git add . する前に
git init しておく
※gitに不慣れなのは反省

【2】
git push heroku master する前に
git remote add heroku git@heroku.com:YourAppName.git
で自分のアプリ名で実行しておく

【3】
git push heroku master を実行したとき、
Warning: Permanently added 'heroku.com,50.19.85.156' (RSA) to the list of known hosts.
Permission denied (publickey).
fatal: The remote end hung up unexpectedly
と出たら、sshキーが不正なので、再度生成します。

以下のコマンドで、heroku用のsshキーを生成。
ssh-keygen -t rsa -C "yourmailaddress@mail.com"
すると、
Generating public/private rsa key pair. 
Enter file in which to save the key: (keyの保存場所の確認で良ければenter)
Enter passphrase (empty for no passphrase :パスワード登録):
Enter same passphrase again:

と、続いてkey fingerprintが表示されればOK。


最後に git push heroku master コマンド実行し、
ポップアップのパスワードを認証させると、herokuにNode.jsアプリを配置できます。










※http://hello-yoshi.heroku.com/でも上記URLへリダイレクトされます。

2011年9月11日日曜日

背景画像でスライド遊び

ブリューゲル作品:「ネーデルランドの諺」でスライドのように動かしたら面白かったので記載します。

sample: DragDealer
※Control Linksから操作が可能ですが、Mouse Dragでも上下左右にスライド移動できます。
















参照:
DragDealer.js

そういえば、旅館「多田屋」のサイトは美麗ですよね。あちらはバリバリのFlashなので、これをjsでやるとしたら大変だろうなと。

2011年9月3日土曜日

Tumblr Photo Viewer "Tumblocks" 作りました。

Tumblocks作りました。

材料

Tumblrには、元々MegaViewerというDashboard一括閲覧用のツールが有るのですが、
これはテキストもムービーも全部並べるものでした。

個人的にDashboardの画像ファイルだけ並べてみたかったので、実験的にやってみました。

Tumblrユーザは、自他のTumblrユーザ名(※図1のURL赤枠)を入力するだけで、画像ファイルのダラ見ができます。












図1:Tumblr User画面
















図2:Tumblocks 使用図①
(1ページには最大50件まで表示可)
















図3:Tumblocks 使用図②
(30件未満であれば大きめのサイズに)

画像系のサービスは作っていて楽しいですね。


最後に、今後のもしかしたらのToDo

  • DashBoard または Likesでの切り替え表示
  • 少ない数での表示は隙間が目立つので、元画像サイズを基にした隙間埋め
  • 類似画像抽出…は難しそうなので見込みがあれば。。

2011年8月26日金曜日

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

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

・iphoneから


















・PCブラウザから ※Google Chrome










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


2011年7月30日土曜日

javascriptで4次Runge-Kutta法

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

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


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

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

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

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


図1:Tmax=30, dt=0.01の場合


図2:Tmax=30, dt=0.05の場合


図3:Tmax=30, dt=0.1の場合


図4:Tmax=30, dt=0.5の場合

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

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







参照
ルンゲ=クッタ法(Runge-Kutta method)
Excelでルンゲクッタ法
gnuplotで微分方程式を解く

2011年7月5日火曜日

JavaScriptでKalmanFilter

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

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

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


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





 


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

2011年5月22日日曜日

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

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

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

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

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

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

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

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

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


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

・3DCG
・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
パフォーマンス
3G回線

作ってみて…

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

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

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

通信
XHR

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

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


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

電車内移動中つらい

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人以上のエミュレート
・2〜5人くらいで誰かが一時的にサーバ立ててゲームするのが良い
・パケット量を削減してないと4人でも6Mbps消費

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


以上がLTメモです。


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

2011年1月14日金曜日

”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日当日に靴下にプレゼント届く

とある評価:リア充アプリw

エモーショナルなイベントですが。。
クリスマスまで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ドルで運用できるインフラはインパクト大!

・企画力、アイディア大事。使ってみたいと思えるサービスあってのクラウド。
・情報の収穫逓増。集めたデータを利用してさらなる価値が産まれる。

Blogger Syntax Highliter