[etc]新しいpc買って(windows8.1)でssh使ってcmdからgithubとかをcloneできるようにするのに悩んだときのメモ

ssh回り、いつも悩みながら適当に設定してなんとなく使えるようになっているのだけど、今回も相当悩んで、やっとなんとなく動くようになったので、今後同じことを繰り返すであろう未来の自分へのメモ。
(これの通りにやって動くようになるかはわからないので過度な期待しないように)


■SourceTreeのインストール

cmd使うから厳密にはいらないかもしれないけど、これを使った”おまじない”が必要となる。
そして、puttygen/pageant/plinkもここに含まれている。
(C:\Program Files (x86)\Atlassian\SourceTree\tools\putty)

■ssh用の公開鍵、秘密鍵を作る

puttygenを使って、公開鍵・秘密鍵なるものを作る
(C:\Program Files (x86)\Atlassian\SourceTree\tools\putty/puttygen.exe)
保存するときのファイル名(この名前が大切かもしれない)
秘密鍵:id_rsa.ppk
公開鍵:id_rsa.pub
※OpenSSH形式の秘密鍵・公開鍵に変換しておく必要があるかもしれないのでやっておく
→Conversions → Export OpenSSH key:id_rsa(拡張子なしとする)

参考 → SSH(PuTTY)設定

秘密鍵、公開鍵の保存場所はとても大事
例:C:\Users\393\.ssh\id_rsa.ppk
カレントユーザー直下に.sshフォルダを作ってそこに置く。
(※.sshフォルダは、cmdから、mkdirコマンドを使わないと作れない)

■githubにsshキーを設定する

githubにログインして、settings→SSH keys → Add SSH keyで、
key欄にはさっき作ったやつでputtygenに表示されているkeyをコピペする。

■Gitのインストール

gitfor windowsからDownload.
※インストール時のラジオボタンの設定はちょっと変更する。

・Adjusting your PATH environment > Use Git from the Command Pronmpt
→cmdで、gitコマンドが使えるように環境変数が設定される

・Choosing the SSH executable > Use(Tortoise)Plink
→sshのときplinkを使うように環境変数が設定される
(TortoiseってあるけどインスコしてないせいかplinkまでのpathはSourceTree内のplink.exeになってる)

・Configuring the line ending conversions > Checkout as-is,commit Unix-style line endings
→改行コードが変わる(ここはデフォルトでもいいかも)

cmdでgitをたたいてなんかでればうまくいっている

■pageantにprivate keyをadd

pageantを起動して上で作った秘密鍵をadd keyしておく。
(C:\Program Files (x86)\Atlassian\SourceTree\tools\putty/pageant.exe)
※スタートアップに登録しておくといちいち起動しなくていいから楽。

■githubのリポジトリをcmdからクローン(失敗するはず)

cmdを開いて、githubのリポジトリをcloneしてみる
例:git clone git@github.com:hoge/moja.git

こんなエラーがでるはず。
Disconnected: No supported authentication methods available (server sent: publickey..)

■SourceTreeでクローンしてみる

SourceTree上でsshパスを使って、githubのcloneを試みると、初回だけなんかの認証的なYes/noなポップアップがでる
↓こんなの
popup

Yesを選択する。(これが上に書いていた”おまじない”)
(設定に間違いはなければSourceTree上でもこのままcloneできる)

■githubのリポジトリをcmdからクローン

“おまじない”のおかげでさっきでたエラーはでなくなっている
githubに限らず、bitbucketとかbacklogでもSSHキーを登録したあと1発目のcmdからcloneしようとすると上述のエラーがでるので、SourceTreeでクローンしようとすると、認証のポップアップがでるから、それをOKしてやれば、その後、cmdからもcloneとかできるようになるっぽい。

■intellij IDEA上でのgit操作

上の設定ができてる前提で、
setting/VersionControl/Git/SSH executable:Buit-in
でいけた。

[AS]Embedした複数の画像(クラス)を連番(文字列)で参照したい場合の方法(ASC2.0の場合)

この記事と、同名タイトルの記事があるのですが、
[AS]Embedした複数の画像(クラス)を連番(文字列)で参照したい場合の方法

先日、ASC2.0でのコンパイルでは、上記記事のgetDefinitionByName()の例がランタイムエラー(クラスが見つからない)になってしまうとのお話を聞きました。

そこで偉い人(akb7さん)からASC2.0でのやり方を聞きましたのでメモしておきます。

具体的にはクラス名の命名ルールがASC2.0で変更になったようで、以前のような参照の仕方ができなくなった模様。

package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	
	/**
	 * ...
	 * @author 393
	 */
	public class Main3 extends Sprite
	{
		[Embed(source="assets/foo0.png")] private var AImage0:Class;
		[Embed(source="assets/foo1.png")] private var AImage1:Class;
		[Embed(source="assets/foo2.png")] private var AImage2:Class;
		
		public function Main3()
		{
			super();
			//FP11.3以上のメソッドを利用:applicationDomain.getQualifiedDefinitionNames();
			embedFunc();
		}
		
		public function embedFunc():void
		{
			var classNames:Vector.<String> = loaderInfo.applicationDomain.getQualifiedDefinitionNames();
			var count:int = 0;
			
			for each (var className:String in classNames)
			{
				trace(className);
				//↓trace結果はこんな感じの名前になってる
				//foo0_png$e7be431d52b236ccd82cd15de1a20fab1328790674
				if (className.indexOf("foo") == 0)
				{
					var clazz:Class = loaderInfo.applicationDomain.getDefinition(className) as Class;
					addChild(new clazz()).x = 100 * count;
					count++
				}
			}
		}		
			
	}

}

[AS]FlashBuilder4.7の(バグだらけの)ASC2.0の無効化する(以前のコンパイラに戻す)方法

FlashBuilder 4.7はASC2.0というコンパイラでswfをコンパイルします。
(このコンパイラ変わってることを意識してない人が意外と多いみたい)
ASC2.0で書きだしたswfの方が軽くて速くなる、というウリなのですが、いかんせんまだ完成度が低いのか使い方によって謎なバグに遭遇することが多いです。

ボクの経験だとFlashProで作ったswcのDisplayObject系のアセットを使おうとするとなぜだか完全透明になってしまった画面に表示されない、という現象に遭遇しました。
(swc使うとバグる法則性ははっきりつかめていない)


で、FlashBuilder4.7はデフォルトがASC2.0コンパイルなのでこれらのバグから逃れるためにはFlashBuilder4.6にバージョン落とすしかないのかな、と思ったのですが、どうやら設定でコンパイラを変えれるということを教えてもらいました。

プロジェクト単位で設定可能です。
が、ここに大きな罠があります。
それはプロパティパネル上では変更できないということ。
では、どうするかといえば、プロジェクトフォルダのルートに存在する設定ファイル(例:hoge.actionscriptproperties)をテストエディタで開いて、該当箇所を直接書き換えて保存しなおす、ということをすればOKです。


該当箇所は3行目のuseFlashSDK=”true”をuseFlashSDK=”false”に変えるだけ。

//プロジェクト設定ファイル (hoge.actionscriptproperties)の3行目
//長いので改行してます。
//該当箇所はここでは13行目
<compiler additionalCompilerArguments="-locale en_US"
 advancedTelemetry="false" autoRSLOrdering="true" 
copyDependentFiles="true" fteInMXComponents="false"
 generateAccessible="false" htmlExpressInstall="true"
 htmlGenerate="false" htmlHistoryManagement="true"
 htmlPlayerVersionCheck="true" includeNetmonSwc="false"
 outputFolderPath="bin-debug" removeUnusedRSL="true"
 sourceFolderPath="src" strict="true" targetPlayerVersion="0.0.0"
 useApolloConfig="false" useDebugRSLSwfs="true" 
useFlashSDK="false"
 verifyDigests="true" warn="true">

これでASC2.0に悩まされることもなくなります。


ちなみにコンパイルが本当にASC2.0じゃなくなったかの確認は、以下のような関数を実行してみて、コンパイルエラーになったら、ASC2.0コンパイル。エラーでずにtraceできたら従来のコンパイラとなっております。

public function duplicate2 (foo:String):void 
{
    const foo:String = "hugahuga";
    trace(foo); //旧:hugahuga, 新:実行できない
}

ASC2.0についてはここにまとめられてます。
とんぶろ:ActionScriptCompiler2.0について発表してきたよ
※上記確認コードもここのスライドから借りました。


おまけ
useFlashSDK=”false”を設定すると、FlashBuilder4.7のプロジェクト→プロパティ→ActionScriptコンパイラーの項目に「従来のコンパイラーを利用する」というチェックボックスが表示されるようになります。

3336272fa1c68bbf80d5dfffb1d9db79

これで、いちいちテキストエディタで編集しなくてもいいか、と思いきや、この機能はバグってるようでチェックボックスを解除してOKとしても次に開いたときはまたチェックされた状態になってしまいここで設定を変更することはできないようでした。

[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/

[IDEA]intelliJ IDEA 12.0.4でAction Script Compiler2.0(ASC2.0)を使う方法。

IDEA12はAction Script Compiler2.0(ASC2.0)対応してるぜ、と書いてあったので試してみました。
で、ちょっとだけ迷ったのでメモ。
(intelliJ IDEA 12.0.4と書いたけどたぶん12.0.2とかでもできるはず)

※ここのスレッドが参考になりました。
IntelliJ12 – Which version of ActionScript Compiler 2.0 is used?を見ながら


ASC2.0はFlashBuilder4.7に搭載されてる新しいコンパイラ。
(ちなみにFlexSDKとCompilerの違いはイマイチよくわかってない。。)
具体的にどういうものかはこちらにわかりやすく書いてありました。

とんぶろ:ActionScriptCompiler2.0について発表してきたよ


ASC2.0のダウンロードはここからできます。
(ずっとlabs扱いだったけど最近正式版がリリースされたっぽい)

http://www.adobe.com/devnet/air/air-sdk-download.edu.html

というかAIR SDK(3.6)に含まれてるのね。
(やっぱりよくわかってない)


IDEAで使うには、まずこれをFlexSDKにマージしてあげないといけないみたい。
(ダウンロードしたAIR SDKをFlexSDKに上書きコピー)
これまでのAIR SDKと同じ使い方ですね。
FlexSDKとは違うコンパイラだからFlexSDKいらないんじゃないのと思ってましたが、AIR SDKだけだとIDEA上でSDKに登録することができませんでした。
(FlexSDKじゃないよ!と怒られる)

e757f55b4dda12f264b57f2a103489dd

マージしてあげたものは問題なく登録できました。
f55b868e89aa0c5cefcc0717c1f110fa


SDKの設定ができたら、File->SettingでSettingウィンドウを開いて、
左のリストから、Compiler->Flex Compilerを選んで、
Compiler withをMxmlc/compcにチェック
でPrefer ActionScript Compiler 2.0 for pure Action~にチェック
こんな感じ。

25bb5deb852d41001ca52183e7a2948e

これで準備OKです。
ためしに、Additional compiler optionsに-advanced-telemetry=trueを追加してビルドしてみたものはScout上でasの中まで見ることができるようになりました。

d6693af3e6b0fdebbb0d1a72648ca05b

FlashBuilder4.7だとFlashProで作ったSimpleButtonの挙動がかなり怪しげなことになってたけどこれはどうなんだろうか。

2013/2/20追記
ASC2.0でのSimpleButtonの挙動は問題なかったでした。
一安心。

[IDEA]intelliJ IDEAでFlashプロジェクトからipaの書き出しとiPhone実機での実行

intelliJ IDEA

昨年マヤ暦が終わっちゃう記念で75%OFFセールがあったのでなんとなく買ってたのですが、せっかく買ったので触ってみました。
とりあえずはFlashプロジェクトでipaを作ってみたのですが、普段使ってるFlashDevelop(以下FD)との使い勝手の違いに悩まされましたので、その辺のメモ。


基本的なFlashプロジェクトの作り方は、katapadさんがまとめてくれているこちら記事どおりやったら問題なくできました。
IDEAでのFlashプロジェクトの作り方

ちょっとだけ悩んだのは、記事はver11.1でかかれていて、ボクは12.0.2で試したのでUIのレイアウトが微妙に異なってるところもありました。
具体的には、「ライブラリに追加」の項目での[+]ボタンの位置
11.1では下にあったのが、12.0.2では横になったようです。

11.1
4d57a47b329187e7f7f342757014346b

12.0.2
12

 


■FlashMobileプロジェクトの手順
File->New Projectで、Other:FlashModuleを選択してNext
(ここではProject名はMobileTestにしとく)
99965e99517bd4bf7b8b3dfb1a1f5767

Target PlattformをMobileに。
Pure actionScriptにチェック(チェックしないとmxmlになる)
FlexSDKは自分で用意して指定する
f775311a67e35423decbf6b32301ab82
 


■SWFの基本設定
swfのwidth、height、frameRateの設定はIDEから入力できるところはなさげ
SWFタグで指定するのがいいかも。
(指定しないと、width:500,height:375,frameRate:24になるっぽい)

package {

import flash.display.Sprite;
import flash.text.TextField;

[SWF(width="640",height="960",frameRate="60")]

public class MobileTest extends Sprite {
    public function MobileTest() {
        var textField:TextField = new TextField();
        textField.text = "Hello, World";
        addChild(textField);
		this.graphics.beginFill(0xFF0000);
		this.graphics.drawRect(0,0,100,100);

		trace(stage.stageWidth, stage.stageHeight);
    }
}
}

■書き出しの各種設定
File->Project Structure
Modules->MobileTest(app)を選択するとこんな画面
ffe78124e78958bafdd8b7e059b1701f

iOSタブでプロビジョニングプロファイル,証明書ファイル,applicationXMLの設定などができる。
1b0be155773854d9babde8eecd958658

applicationXMLはApplication descriptorでGeneratedにチェックが入ってると自動で生成してくれる。
ただ、IDE上で各種XMLの項目を設定する機能はないようなので、Generatedではなく、Custom templateを選択したほうがよさげ。
(GeneratedだとappIDがプロジェクト名なってしまうし)

Createボタンを押すとTemplateウィドウで基本的な設定ができる。
9e7431335116ff1f25c06075e14a7b93

これで任意のxmlファイルが生成されてipaのパッケージに使える。
(Templateで設定できなかった項目に関しては直接XMLを編集)

■実行
Edit Configrations…というところから設定可能
Clipboard01

こんな設定画面
d60a6db2cace261ff99a595d7f5ea885

Run onという項目でEmulatorを選択すればPC上で確認できるのはありがたい。
(FDのモバイルプロジェクトだとできなかった気がする)
Emulatorには主要な端末データが入っていて、ステージサイズが設定されるっぽいのだけど実際に書き出されるSWFには反映されてないっぽい。
たとえばiPhoneRetinaに設定してRunするとEmulatorは幅:高さは640:960の枠サイズで表示されるけども、中に表示されるswfは(SWFタグを指定していないと)500:375で表示されてる。
明示的にSWFタグで幅と高さは指定してあげる必要がありそう。


実機テストは、
Run onの、iOS deviceにチェック
OptionsのDebug on device overをUSB,port:7936にチェック
PCにUSBでiPhoneを接続した状態で、Run->MobileTestを実行するとipaが生成されてiPhoneにインストールされるところまでやってくれる。
(USBのポート番号はデフォルトのままでうまくいった)
複数の端末をつないでるときは
must specify -device parameter when more than one device is available
というアラートがでた。
「複数の端末がつながってるときは指定デバイスのパラメータは必須」という意味らしい。


ちなみに、Run->Run MobileTestで生成されるipaの形式は、”ipa-test”
(もしくはipa-test-interpreter:fast_packagingにチェックした場合)
デバッグモードは、Run->Debug MobileTestで”ipa-debug”が生成
(もしくはipa-debug-interpreter:fast_packagingにチェックした場合)

store用やaddhoc用のipaを作るには、
Build->Package AIR Applicationを選択すると以下のウィンドウがでるので、
iOS package typeのセレクトボックスから選択可能。

4f57fe8d9b3428da392bfe62d49fae61

store用やaddhoc用のipaの実機へのインストールは手動でやるしかないみたい。
Runで生成される”ipa-test”だとパフォーマンスが落ちるので、addhocかstoreで動作テストしないといけなかった経験があるのでstore/addhocビルドを自動インストールする仕組みがないとちょっとめんどくさい気がする。。。


あとipaファイルの出力はデフォルトでoutフォルダとなるけど、outフォルダはIDEA上のProjectパネルには表示されない。

dad6a6607501b64f71952382fd9feddb

見えて欲しいところだけど、プロジェクト上での出力フォルダと定義されたものはExcluded扱いとなるので無理っぽい。
(Project Structureパネルでも、Excludedを解除することもできない)

e111a8b13e6608a09dc2d57ba7003c26

表示するようにするにはProject Structureパネルで、
Projectを選択し、Project compiler output:の項目に記載されてるoutまでのファイルパスを削除する

823904a7878a5d7ceeca0c7b0f877ffc

プロジェクト上での出力フォルダの定義を消しちゃうとどこに出力されることになるのか?と思うけど、Modules側のOutput folderで設定されていれば特に問題ないみたい

8404208c0a32b8be4cd05208d0781efa

IDEAを再起動するとoutフォルダが見えるようになります。

bbf2cefc1496661e2f94c93ed2cf8e8c


挙動がよくわからなくて調べるのに結構苦労してるわけですが、まだIDEAに完全移行しようという気にはなれず。
もうちょっと触ってみないと、よさがわからない。

[Event]F-siteでお話してきました。

先日F-siteで「AIR for iOSでiPhoneアプリ作ったお話」をしてきました。
発表資料をSlideShareにあげましたので興味ある方はのぞいてみてください。
(あいまいな部分も多いので間違いもあるやもしれませんが)

.
.
.
あわせてよみたい
時間の都合でStage3D周りのお話はばっさりカットしましたので、Stage3Dに関する内容はこちらで。

[AS]FlashBuilder4.7(Beta)で「VerifyError: Error #1107: ABC データは破損しているため、境界外の読み取りが試行されました。」と出たときの対処法


****2012.10.11追記*****
FlashBuilder4.7Beta2では下記のエラーはでなくなった模様
ただ自分のボタンシンボルを含んだサンプルをパブリッシュしたら、レイアウトが盛大に崩壊したりしていて、なんか挙動がとても怪しい気がする・・・
(具体的にどういうときに崩れるかはちゃんと検証してない)
****************************

FlashBuilder4.7では新しいASコンパイラが搭載されているので、過去に作ったプロジェクトを書き出そうとエラーがでることがあります。

今日遭遇したのはこれ

その1:VerifyError: Error #1107: ABC データは破損しているため、境界外の読み取りが試行されました。

その2:Error #2022: Class [※hogehoge] must inherit from DisplayObject to link to a symbol.

[※hogehoge]の内容はいろいろ変わる

これは、FlashIDE上で作ったアセット的なSWCファイルからリンケージしたボタンシンボル(SimpleButton)を読み込もうとすると発生するエラーみたい。
リンケージしたムービークリップシンボルの中にボタンシンボルが含まれててもダメ。

リンケージしたボタンシンボルを呼ぼうとすると、上記:その1のエラーがでて
ボタンシンボルを含むリンケージしたムービークリップシンボルを呼ぼうとすると、その2のエラーがでました。

で、今再現確認してみたところ、リンケージしたムービークリップシンボルの中にボタンシンボルが含まれてる場合はエラーでなくなった・・・なんでだろう。
でも、そのムービークリップを表示してみると、含まれてるはずのボタンシンボルがひとつも表示されないのでやっぱり何かおかしいみたい。

とりあえずFlashBuilder4.7で使うアセットSWCにはボタンシンボルは使わないほうがいいみたい。