[Event]ADOBE MAX 2013 3日目メモ

3日目のメモ
(英語はGoogle先生によるほぼ直訳)


■Choosing a JavaScript Framework

ADOBE TV
http://tv.adobe.com/watch/max-2013/choosing-a-javascript-framework/

**********************************
概要
いろんなJSフレームワークを使って同じサイトをつくってみた
jQueryMobile,Backbone.js,ANgularJS,ember
それぞれの特徴をグラフ形式で比較
**********************************

最近はクライアントサイドでUI実装
サーバーサイドではやらないよ

1ページのアプリはメモリリークに気をつけてね
フレームワークがそれを助けてくれるよ。

フレームワークの特徴別の比較
jQueryMobile
Backbone.js
ANgularJS
ember

特徴別比較項目(5段階)
1)全部入り(フルスタック)か?
2)宣言型(htmlに属性)か?(反対はプログラム型(jsゴリゴリ)か)
3)機能の分離はしにくいか?
4)理解はしやすいか?

//////////////////////////////////////////
jQuery Mobile
基本的な使い方:
data-filter=”true”でul-liのフィルタリング

data-add-back-btn=”true”でバックボタンがヘッダに。

コンポーネントと切り離すのは大変

特徴別比較項目
1)フルスタック度:5
2)宣言型度:5
3)分離しにくさ:5
4)理解のしやすさ:5

//////////////////////////////////////////
Backbone.js
ディープリンクつけれるよ
AppRounterというのを使うとね
Bacbone.Router.extend

MVC実現してくれるよ

View
Backbone.View.extend

Model
Backbone.model.extend
urlRootを定義

特徴
minimalist

特徴別比較項目
1)フルスタック度:1
2)宣言型度:1
3)分離しにくさ:2
4)理解のしやすさ:5

//////////////////////////////////////////
ANgularJS
初耳:日本語の説明サイト
http://qiita.com/items/82aa9dde64826d25407d

特徴別比較項目
1)フルスタック度:3
2)宣言型度:5
3)分離しにくさ:4
4)理解のしやすさ:5

//////////////////////////////////////////
ember
初耳:参考
http://qiita.com/items/14644b9d10b7eec74ee4

htmlに埋め込む感じ?
(テンプレート型?)

特徴別比較項目
1)フルスタック度:2
2)宣言型度:2
3)分離しにくさ:4
4)理解のしやすさ:3


■Best of the Best: International Flash Games Showcase

ADOBE TV
http://tv.adobe.com/watch/max-2013/best-of-the-best-international-flash-games-showcase/

**********************************
概要
世界のFlashゲームの紹介
Flash製でガチのオンラインゲームとか
アメリカと中国すごい
**********************************

ロシア
intrusion2
http://www.intrusion2.com/
物理エンジンな2Dゲーム
BOX2D,stage3D

ドイツ
herokon-online.com
https://www.herokon-online.com/en/home
クォータビューRPG
3Dモデル???

フィリピン
splitman2
http://www.silvergames.com/splitman-2
バイナリーランド的な横スクロールアクション
屍を越える

フランス
Dofus
http://www.dofus.com/en
クォータービュー戦略RPG
アニメ絵

日本
legend world
http://avatar.member.jp.square-enix.com/avatar/sqex_lw_act/promotion?rk=0100eqx1000aka&PID=522979&ASID=13690
Stage3D

ameba pigg
https://pigg.ameba.jp/
箱庭

アメリカ
ChronoBlade
http://www.chronoblade.com/
Unityからのエクスポート?
天地を喰らう系

中国
Deep3D inBeta
http://117.135.163.209:808/
クォータービュー系
フル3D
diabolo3っぽい

Heaven
http://tianjie.game2.cn/
セクシークォータービュー
背景を必要なぶんだけ読み込み
GoogleMapぽい。

Gods War
http://gw.igg.com/
クォータービュー系
3Dモデル


■Browser tools for debugging and profit

ADOBE TV
(なし)

**********************************
概要
基本的なデバッグのやり方
ChromeのToolの使い方の紹介
UnitTestツールの紹介
**********************************

blogにスライドアップする予定
http://www.raymondcamden.com/

jQueryUIの場合
jsが有効
jQuery読んで、UIもよんで、UI CSSも読んで

chrome extension
javascript-error-notifier

errorception
http://errorception.com/
有料(30日無料)

chrome dev toolの使い方

networkから選んでresponseタブを選択してjsonの中身をみる

JSONPはエラーになる?

console上で修正してリロードすると値そのままでデバッグ変更?

Adobe inspectを使うとモバイルもらくちん

iOS:safari remotedebug (ios6)

Unit Testのツール
jasmine
selenium(firefox)


■JavaScript Puzzlers: Puzzles to Make You Think (and Write Fewer Bugs)
charlesbihis

ADOBE TV
http://tv.adobe.com/watch/max-2013/javascript-puzzlers-puzzles-to-make-you-think-and-write-fewer-bugs/

**********************************
概要
JSの仕様を理解するためのひっかけクイズ
細かい仕様を理解してミスのないコーディングを。
**********************************

ライブラリなしで

パズラー
シンプルなプログラミングパズルをjsでつくる

演算子の順番

parseInt はブラウザで挙動変わるよ。FFとchrome
radixに注意(ダニ2引数)

jsのnumberは2の53乗まで。こえたら0になる?

小数点以下はIEEE754の数値罠に注意
頭5ケタを保証する?

new String(“a”)は、object型のデータ
Javaの人はやっちゃうかも?
typeチェックも考えてね。===

符号には気をつけようね


■Practical Javascript: the Future and Now

ADOBE TV
http://tv.adobe.com/watch/max-2013/practical-javascript/

**********************************
概要
ある問題に対しての解決策
Bracketsの宣伝とか
**********************************

Framework , Tool , Performance

・フレームワーク

YepNope.js

Moderniziingがいまんとこ一番速い

問題:スパゲッティ
→RequireJS

問題:Asynchronous Code(非同期)
→Promises
これ?(http://d.hatena.ne.jp/cheesepie/20111112/1321064204
new $.Deferred()

→Chaining Avoids”pyramid of Doom”

未来:ES6 Harmony yield

未来:Better Debugging(

問題:Adhoc UI UPDATE
→TemplationgFramework MVC Framework
(Batman knockout knockback angular ember)
未来:ES5 ゲッター、セッター

問題:サーバーのエラーログミス
→EroorLogging
→パフォーマンスAPIs

・ツール
問題:いろいろ問題がある

解決:contextual snipepets
Bracket使うといいよ
解決:Type Interface

テストツール?instabug

・パフォーマンス
速度測るコード書くのがめんどくさい(new Date)

where that left us
Quantify
investigate
fix

解決:Browser Performance tool
TimeLinePanel
FPS Counter(Chrome;//flags)

未来:ScoutJS
未来:Programmatic APIs

[Event]ADOBE MAX 2013 2日目メモ

2日目のメモ
(英語はGoogle先生によるほぼ直訳)


■The Magic Bullet of Web Gaming

ADOBE TV
http://tv.adobe.com/watch/max-2013/the-magic-bullet-of-web-gaming/

**********************************
概要
今後のWEBゲームの方向性(概念的な話)
スライドの項目を口で詳しく説明する感じの内容でほとんど聞き取れず。。

とりあえずスライドを日本語にしといた
**********************************

私は最近テレビとゲームについて考えてきた

3Dテレビに向かう途中で起こった面白いこと

余分な処理は、余分なものを意味します

スマートテレビを作るメーカーは増えている。

据え置き用のデバイスもたくさんの種類がある。
これら、すべてのものを持つ部屋はありますか?

3つの方法
・アプリ(ネイティブなアプリ)
・ウェブ(ウェブアプリ)
・ストリーミング(↓たぶんこういうののこと)
http://headlines.yahoo.co.jp/hl?a=20130504-00016464-techcr-sci

アプリ利用の良いところ
問題としてよく理解
顧客が受け入れ
  準備供給

アプリ利用の問題点
テレビはiPhoneではないので、
アップデートは起こらない
クライアント/サーバーのトラブル
我々はどのようなオペレーティングシステムを実行している?
リナックス
ウェブOS
アンドロイド

ウェブ利用の良いところ
誰もがいつでも同じことを実行できる
おそらく帯域幅を最も効率よく使用
  その他、驚くべきことを行うことができます

(スマートテレビでの)Webに関する問題
     あなたのRazr(昔の電話端末)のブラウザを覚えていますか?

ストリーミング利用の良いところ
  それは忠実に魔法を働かせることができる
ベストなプレゼンテーションの値
限られた変換は、もしAAA(コンシューマーゲーム)のPC体験を提供したい場合は

ストリーミング問題
帯域幅を10 Mbpsの下にでも
  携帯キャリアのネットワーク上ではほぼ財政不可能。
  脆弱な接続
  ほとんどの問題はお金です

コントローラについて
タブレットの話とか
任天堂の宮本さんの話とか

新しいプレイヤーは、新たな機会を作る
Hisense,TCL(中国のテレビメーカー)

アンドロイドが来ている..

スマートテレビのゲームへのブリッジを構築
どの顧客?
どの配信パスは使用するには?
時間とお金の問題
どのように我々は、コントローラの問題を解決するのですか?

道をナビゲート
世界には、かなりのIPサービス事業者があります。
ISP
ケーブル(TV?)事業者
携帯電話帯域幅オペレーター
ハードウェア製造者

あなたのパートナー(または顧客)は、ハードウェアを選んだら
あなたは彼らの選択と一緒にいきる必要があります。
アプリ
ウェブ
ストリーミング

ストリーミングはコストが高い
改善に賭ける
    高いソフトウェア/サーバ密度
    ライター製品の足跡
アプリやストリーミングの間に何かがありません?
    ときに我々は我々の圧縮を行うのですか?
    ウェブが来るとき…

我々はそれらのすべてをサポートすることを選択した。
しかし、ストリーミングで始まる
広範なプラットフォームをサポート
    セットトップボックス
    テレビ
最高に正確なコンテンツはコミュニケーション問題に役立ちます。
それはまだ簡単ではありませんでした…

我々はここで前にあった

しかし、我々はそれらを失った
我々はあまりにも多くを求め
   お金
   コントローラの複雑さ
   時間
モバイルとソーシャルでは、これらの原則に戻り、それを戻ってきました。

我々はあまりにも多くのお金を求めた。
いいえ60ドルのタイトルはないが、少なくとも、すべてを一度に。

我々はあまりにも多くのコントローラのスキルを求めた

彼らが望むもの(もしくは持ってるもの)を使用しています。

インストラクターとしてのコントローラ

コントロールセットを簡素化。

双方向コントローラの約束

主に、我々はあまりにも多くの時間を求めて
現代のaaaゲームは時間の2時間のプレイで、より多くの物を常に求めます。

ゲームの解像度
AAAコンソール
    カウチ:20分最小、でも私たちは120分求める。
タブレット
両手で10分
モバイル
片手は=90秒。コインオペアンプと同じ。
スマートテレビ
ホッケーの試合がオンになってまで、私は何ができますか?

問題は我々の左下隅
ストリーミング配信
   最も広範なアプリケーション
    最小しきい値
    ほとんどのパートナー値
プレーヤーの価値を尊重
時間
お金
カリスマコントローラ
    インストラクター

今後の展開
代替的送達技術
   テレビへのストリーミング、アプリ、ウェブを提供
   他のプラットフォームへのゲーム
   コントローラ/ストレージのクロスプラットフォーム
   ゲームエンジンとしてHTML5
Strike Fortres:PS2レベルのもの

アプリの進化
  すでにクライアントが、どのように薄い?
  アンドロイドはメヒシバです(どんどん増える)
  Pratformの抽象システム
    マーマレード(SDK)
    Unity3D

ストリーミングの進化
  厚いクライアント
    下バンド幅
    より堅牢な
    携帯電話との互換性
    サービスの低コスト
  ローカルストリーミング
  クライアントをクロス

ゲームシステムによるデータ帯域幅
StreamingService:2.5-5MBS
未来は100KBS?

我々のプレイヤーについて
彼らの時間を尊重
多すぎないように。
私はそれを学んでいないよ?
私はそれを行うことはできません!
彼らのお金を尊重
  いくら?
  なぜ、私が持っているものであそべないのですか?
彼らの楽しみを尊重
 私は勝者だ。
  それは驚くべきことであった。
 これ見て!


■CreateJS:Building Rich Interactive Experiences in HTML5

ADOBE TV
http://tv.adobe.com/watch/max-2013/createjs-building-rich-interactive-experiences-in-html5/

**********************************
概要
createJSの機能の紹介
デモのサンプル(Gary)以外に既知な感じ
**********************************

sandbox/githubにサンプルとかヘルプとか一式
https://github.com/CreateJS/sandbox

socketを使ったサンプル
http://internal.gskinner.com:8080/

FlashPro上で「ビットマップにキャッシュ」を使うとシェイプをビットマップキャッシュ。
SpriteSheetBuilderで動的にスプライトシート作れる


■HTML5 Gaming on the mobile web

ADOBE TV
(なし、※スライド資料はあった)
http://sandbox.photonstorm.com/HTML5_Gaming_on_the_Mobile_Web.pdf

**********************************
概要
自社のゲーム開発状態の紹介
基本的な心構えとか
はまりどころとか(DOM,canvasとか、タッチ特性とか、音関係とか)
ツールの紹介とか
**********************************

photon storm(制作会社)の中の人
18か月で40個のhtml5ゲーム作ったよ

BoosterMedia.com
500万ユーザー、300ゲーム、15本/月

mobieはデスクトップに比べてしょぼいよ

ブラウザの進化は早いよ。
知識は半年ですてさる覚悟が必要

デバイスの変化も速いよ

DOMはポイントで速くなれるよ
ときどきだけcanvasも。
SVGは場合によって。
WebGLにも目をむけとこう。

レンダリングに関する特効薬はない
流行ではなくそのときの適切なものを。

イベントのラグ
canvasのredrawはコスト高い
iPad1,andoroid2,kidleが残念
タッチイベントのラグ
DertyRects と Quad Trees ftw
キャンバスを重ねるのはしない。

AUDIO
1チャンネルだけ
端末の問題
コーデックの問題
ウェブオーディオはすべてを解決、その時まで
サウンドファイルでスプライトシートのように
音と音の間に隙間あけたほうがいいみたい?
ライブラリ使おう
Zynga Jukebox
Howler.js

制作のガイドライン
警告:
もしゲームに本当に必要なら
複雑なオーディオやビデオ。
移動の大きなエリア
複雑なコントロール。
高度な物理学。
短納期!
…時間がまだある場合は、慎重に検討。

初期のテストおよび頻繁にテストする
ユーザーテスト
デバイスのテスト
2つの組み合わせ
すべて完全にテストはできっこない

不足の事態を予測
基本的なプロジェクトであってもビルドするために余分な時間をみておく
前もって主要分野のプロトタイプ
あなたは、新しい境地を開拓している
すべてのチームやプロジェクトには適さない

Flashから変換
YES
ゲームのコンセプトが存在
資産が存在する
開発者はそれをすべてを再作成
セットの期待
NO
しかし、それは動作しますか?
そのまま使用することはできません
間違った優先順位
間違って

未来について
我々は携帯電話で今日直面問題はデスクトップ上で解決され、
すでにフィルタリングされている
デバイスは速くなってきている
クロムは、現在デスクトップに同期して更新されます
レガシーなものは早々に消えていく

Toolの紹介
TypeSript(エディタ)
TexturePacker,CS6/CC & Shoe box(スプライトシート)
http://www.codeandweb.com/texturepacker
http://renderhjs.net/shoebox/
Spine and Spriter(2d Skeltal animation)
http://esotericsoftware.com/
http://www.brashmonkey.com/
HTML5 game devs.com
http://www.html5gamedevs.com/
Phaser(中の人のフレームワーク
http://www.photonstorm.com/phaser
Pixi.js(2Dゲームエンジン)
https://github.com/GoodBoyDigital/pixi.js/


■Becoming a Successful Game Developer with Adobe Flash

ADOBE TV
(なし)

**********************************
概要
自分の作ったゲームの紹介
タクティス系RPG、かな
1ソース、ビジュアル的には結構シンプルな感じ。
**********************************

hero mages
参考:http://www.youtube.com/watch?v=on2bXXAjLcE
1ソースでweb、iOS、android
real time 8人オンライン

結構人気らしい

Die hard fans 1000hrsプレイ時間

開発のロードマップ
2006:プロトタイプ
2007:digital化
2009:web
2011:android
2012:iOS

成功への道
・仕事にあったツール選び
・一度に一つの課題に焦点を当て
・あきらめない

なんでFlash
FlashProでアセット作るのに楽ちん
デザイナーとエンジニアの連携とか。

まずは基本の動きだけを作る

AIについて

なんか概念的なお話
multiscreeenとか

成功したら
イベントとか大会とかに参加
知識とか支援
仕事に貢献
支援ネットワークを構築する

クロスプラットフォームを構築するにはこのブログ
indieflashblog.com

[Event]ADOBE MAX 2013 1日目メモ

昨年のAIRコンテストの副賞として、ロサンゼルスで5/6~5/9の3日間かけて開催された、Adobe MAX 2013に招待されたのでホイホイと参加してきました。

基調講演2本とSNEAK PEAK以外は通訳なしの英語での受講だったので理解がかなり乏しい感じだったけど、一応内容メモ残しとく。
リアルタイムに翻訳ソフトに単語打ち込みながら聞いてたくらいなので、意味の取り違えとか話の取りこぼしは多々ありそう。
(聞き取りだけならまぁわかるだろう思ってたら想像以上に意味不明)

基調講演2本とSNEAK PEAKは日本にも通訳付きでUSTされてたのでメモはなし。
あと一部セッションの内容はADOBE TVのサイトで観れます
(もちろん英語)

とりあえず1日目


■Mastering Multiplayer Stage3D and AIR game development for mobile devices

ADOBE TV
http://tv.adobe.com/watch/max-2013/mastering-multiplayer-stage3d-and-air-game-development-for-mobile-devices/

**********************************
概要
case studyによる技術的な話(結構濃い)
**********************************

BrainStormというゲームの制作過程の紹介(まだ制作中っぽい)
プラットフォームにFlashを選ぶ価値はまだあるよね。
マルチプラットフォーム(web,ios,android)

1:移動について
移動にはMarching Squareというアルゴリズムの採用
キャラクターモーションで3Dモデルの足が移動と合わないときは3dsmaxの独自exporter作って解決したとか(animation driven locomotionシステム)

2:ネットワークについて1
コマアニメはQuake(古いライブラリ)をベースに
データはすべてxmlで

3:群衆アルゴリズム
A*とは違うシンプルな独自アルゴリズム(sugar sugar)
攻撃のあたり判定の考え方とか

4:ネットワークについて
マルチプレイヤー対応について
ネットワーク系のツールについての紹介
・Microsoft Network Monitor
・Network Emulator for Windows Toolkit
・wanem.sourceforge.net
取り回しのテクニックとか
・ツールをつかって遅延を確認
・移動はうまく補間する
・ネットワークモニターを実装する

5:研究、開発について
2D部分はCPU負荷低いStarlingを使う
ASC2を使う。SWFサイズ下がるし、fpsも少し上がる
Red TamarinとPlayScriptも
ANE,flasCC
GLSL2AGAL


■Cutting-Edge HTML

ADOBE TV
アップされてない(2013/5/10現在)

**********************************
概要
HTML5での新しい機能についてのざっくりとしたお話
**********************************

html5の新機能の紹介

知らなかったのはAPPCache、WEBRTCくらい?
あとはCSS3のフィルターの超絶デモとか
WebSQL,localstorage,formでのできることとか

最先端なサイト(ネタ:愛生会病院的な)
lingscars.com

1)APPCache
サンプルサイト
http://phraffle.com/
サイト全体をキャッシュしている
(ネットの接続切っても閲覧できる)

・appCacheのチェックツール
chrome://appcache-internals/
・実装

詳しい説明
http://gregsramblings.com/2012/05/28/html5-application-cache-how-to/

2)WEBRTC
(RTC:アルタイムコミュニケーション)
Chromeなら最新版でふつうに使えるよ
FFはnightlyバージョンで使えるよ

↓紹介されたけどなんのためのサンプルかわからない。。 
http://webcamtoy.com/
(FlashだしWebRTC関係ないような。。)

チャットのサンプル
http://www.tokbox.com/opentok/webrtc/demo/index.html

3)CSSカスタムフィルター
サンプルサイト
http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/

カスタムフィルターを書いて読み込める
シェーダーの知識が必要
low levelな3Dグラフィック、WEBGLとか

ブラウザいっぱいあるよ。
canvasにはオーマイガだよ。

4)Formタグ
いろいろ機能が増えたよ(number /range・・・
(jQueryUIなしで)

5)クールなトリック
・buttonのformaction属性を使ってアクションの切り替えとか
form のoninput属性に”total”を入れて計算とか
inputにdatalist要素で入力補間とか
→※でもIE9では使えないよね。。。
・formのバリデーションチェックもjsなしでできるよ
(たとえば必須としたい要素に”required”を記述)
・WebSQLいいよ。でも使えるところが限られてる的な?
・localstrageもシンプルに使えていいよ。
・a要素download属性でダウンロードの仕組みもできるよ
・div data-*で独自データ

セッションで紹介したサイトのURL一覧
http://gregsramblings.com/max2013/