F-Siteセミナー行ってきました
以下相変わらずメモ
１１月6日
FーSiteセミナー
□モックアップ制作の楽しさ
・ワイヤーフレームが簡単に作れる
・FBを間に挟める
・開発の前段階の演出をFLASHでコード書かずに試す事ができる
・設計のモックアップを色々なパターンをみんなで試すのに最適なツール
□詳しくは何ができるのか
・ワイヤーフレーム
・AiやPsdファイルが読み込める
・CS5にCatalyst入ってる模様
・ステートはページ
・コンパイルエラーがほぼ無い？
・アニメーションが簡単に作れる
2
デザインパターン
しっぽさん
尾野まさきさん
DotWarとか作った人
Template Methodパターンや、Flyweightパターンをよく使っている
Null Objectや
・難しい言葉が多くてめんどくさいよね、UML図とか
Facade（前面様式）
使う側はクラス統括をするクラスのみに命令を渡せば細かいクラスを意識しなくてよい
外側向け
Mediater（調停者様式）
クラス同士のつながりを管理するキングクラスを作ってまとめる
内側処理向け
Prototype（模倣様式）
Clone的な
Mement（形見様式）
アンドゥとかを作りたい時の情報保存
Prototypeパターンで応用が効く、ただし必要なデータだけ持ちたい時はこちら
Observer（監視者様式）
全員をチェックするより何か起きたら教えてもらう方が効率的よね
クラスの方にキングクラスさんの呼び鈴をつける感じかな？
Flyweight（軽量級様式）
一度作ったクラスを使いまわしたい、つまりはキャッシュ
Singleton（独身者様式）
使いすぎる事で有名なパターン
Balking
NULLだったらReturn
Ifが多くなる
Null Object
何もしないインスタンスを作成しておく
Ifが減る
Chain Of REsponsibility（責任連鎖様式）
優先順位をつけたいときに使う
複数人いて、誰か一人に処理をさせたいときに使う
Template Method（雛形方法様式）
空のメソッドを作っておいて、あとで継承したときに埋める
Composite（複合物）
ファイルとフォルダの関係を作る
フォルダもファイルと同じように扱える
フォルダがファイルの要素を継承して、さらにファイルのとフォルダのを持てる機能を追加する
Command（指揮様式）
処理をクラスにする
Progression使えば便利さがわかる
State（状態様式）
ProgressionのScene
Bridge（橋様式）
多重継承できないとき
継承ではなく、それぞれ部分にして変数にデータで持たせる
Decorator（装飾様式）
従来メソッドの前後に処理追加してやりたいことをやる
Interpreter（通訳者様式）
使いません
オリジナルスクリプトを内部を作るときに使用する
Factory Method（工場方法様式）
一連のクラスを生成するクラス
Abstract Factory（抽象工場様式）
キングクラスを作っておく、こちらの方がカスタマイズ性が高い
3
ニコゲー開発の舞台裏
新藤愛大氏
□コンセプト
つくる
シェアする
ニコニコする
技術が無い、素材が無い、場所がないっていうのをカバー
STGとADVジェネレーターを担当
ニコゲーのデモ
ClockMaker 池田さん
FlashDevelop開発の本
STGジェネレーター
去年末から今年初めて
クラス214個
25000行
cs4、テキストエディタ
ADVジェネレーター
今年中旬
FB4
クラス180個
22000行
自作BEライブラリ多数
全体設計
ゲームエンジン
プレイヤー
に基づいた編集をするジェネレータをつくる
UPDATEとDrawを分ける
・優先度を別に管理できる
・負荷が高い時に描画を飛ばせる
・同じ状態で何回でも描画できる
STG
入力
マップ
自機
自機弾
敵
敵弾
アイテム
衝突判定
ADV
入力
シーン
テキスト
レイヤー
Actorクラスをベースとする（UPDATEとDRAWをもつ）
それとActorCollectionでまとめて管理できる
AddActorでコレクションに追加
敵のコレクション
弾のコレクション
自動的に削除してくれる
BEGameEngine
□動きのStrategy化
IMoveStrategyというインターフェースで敵の動きや弾の動きの、アイテム効果はインターフェースとして切り出しておく
□衝突判定
四分木を利用
画面を分割して対応した所だけの判定を行う
何回か分割する
Rectangleのintersectsで十分な速度が出せている
□ポーズとリプレイ
UPDATEの呼び出し以外でゲームが進行する要素を入れない
UPDATEが二回呼ばれたら同じ状態になるべき
入力の抽象化
INPUT用のクラスにをひとつだけ作って、そこでまとめる
人間から行われてるかリプレイデータか意識しなくてすむ
ゴーストはゲームエンジンをもうひとつ作っている
□エディタ編
novelEngine,novel - novel;
でうごく様にしたい
BEFoundation
モデルクラスやバインディングのためのクラス
BEComponents
カスタマイズしやすいコンポーネント集
sourceというプロパティに突っ込めばうごく様にかつ、デフォルトの動きのもある
例えばリストクラスのレイアウトが縦横あって、カスタマイズしたければできるように
とにかくカスタマイズしやすいように
あとコンポーネントはモデルに追従するように
バインディング＞クラス同士の値の連動
AとBはNAMEプロパティ持ってて、変更された時は特定の動作を行う
あまり反応が薄かった
iWorksとかKeyNoteとかの動きの経験をベースにしてエディターを作成
特に既存のエディタとかを参考にはしていない
ifelという言語？
内部状態を変えるものでないのはプロパティに、修正かけるようなのはメソッド
修正に関してはとじて、拡張には開くような思想
おや
http://code.google.com/p/android/issues/detail?id=7901
AndroidのWebViewだとCanvasのtoDataURLが使えないっぽい？
実際なにも帰ってこなかったけど
↓
Javascript Best Practice自分用まとめ(3)
http://www.slideshare.net/cheilmann/javascript-best-practices-1041724
↑
ココ読むより原文読んだ方が良いです。
あくまで自分用かつブログ記事も稼げていいんじゃね？という趣旨
■Avoid heavy nesting
・？一定数の入れ子(貴方の嗜好や基準による)になるとコードは読みにくくなる
・マジ終わってるのがループ変数をたくさん使ってるような感じで、入れ子の中に入れ子が入ってるような奴
・入れ子は避けて、ループの中のループはそれ用のメソッドとして行うべき
駄目例
function renderProfiles(o){
var out = document.getElementById(‘profiles’);
for(var i=0;i
iPhone/AndroidそれぞれNativeBookMark(造語)/WebViewから標準ブラウザに切り替えるやり方
■iPhone
NativeBookMark=>ホーム画面にブックマーク追加してNativeアプリのように動かす奴
通常
aタグのリンクをクリックさせればよい。
aタグ押下時でJavascriptでの制御
aタグ押してない時
同上で不明
■Android
通常
aタグのリンクをクリックさせればよい。
aタグ押下時でJavascriptでの制御
とりあえずontouchendにハンドリングしたイベントのfunction内で遷移処理をしてあげれば標準ブラウザが起動する。
aタグ押してない時
不明、setTimeout内(グローバル)でwindow.openやらsubmit()やらlocation.hrefやらしても標準ブラウザは起動しなかった。
なぜこんな調べ物したかって？bodyのtouchstartの制御(preventDefault)してて通常aタグクリックの効果(onclick)が得られなかったからです。
Javascript Best Practice繋がり
↑
とぅぎゃったーのコレの中で、自分用のさらなるメモにいくつか抽出
誤訳とか当然あると思うのでご指摘ください
・
・大抵のケースではarr[arr.lengh] = 1;の方がpushより速い
・var x = y || z;はyがnull/false/emptyの際にzが入ります
・数値をfloorしたいときには var num = 2.22 | 0;でもいけるよ
・for(key in object) { if(object.hasOwnProperty(key) { //do something...avoiding retrieving method functions } }
・フックを掛ける
var oldX = X; X = function() {/*pre*/ var rv= oldX.apply(null,arguments); /*post*/ return rv;}
・スコープを良く考えろ
・ドキュメントよりソース読め
・"return false"よりも"event.preventDefault"と"event.stopPropagation"を使うべき
・URLからファイル名を取得するワンライナー
location.href.split("/").pop(); or location.href.split("/").slice(-1)[0]; //Non-Destructive
・文字列の結合は別の文字列を作成するよりArray.Joinの方が速いよ
・String.prototype.reverse = function () { return this.split('').reverse().join(''); }
・remember the mantra “eval() is evil.”
・ループ内でクロージャやめとけ
・配列の操作にはfor ... in 使わないように
・Dateをタイマーみたいに使いたいならvar start = +new Date();が変換する必要なくて楽
・Eval is evil.
・グローバルは可能な限りやめとけ
・イベントや匿名関数内で外の関数の"this"を保持するなら"that"という名前にしとくべき(使う必要あるならね)
・偶数奇数チェック if( i % 2)の代わりにif( i & 1)がビット操作になるので速いよ
・以下のような場合のparseIntは常にオプション引数(基数)も指定すること
parseInt("010") == 8 / parseInt("010", 10) == 10
・Form参照のやり方 > document.forms["formname"].elements["inputname"]
・文字列の中で単語を探すときは.search()より.test()が速いが、.indexOf()は.test()より早い(Chromeは除く)
疲れたのでこの辺で
Javascript Best Practice自分用まとめ(2)
http://www.slideshare.net/cheilmann/javascript-best-practices-1041724
↑
ココ読むより原文読んだ方が良いです。
あくまで自分用かつブログ記事も稼げていいんじゃね？という趣旨
■Comment as much as needed but no more
・コメントは開発者から開発者へのメッセージ
・「良いコードは見るだけでわかる」とかあるけどあれ都市伝説
・コメントは過剰に書かない、必要な分だけ
・あと一行コメントもやめとこう、「/* */」を使った方がエラーの原因にならなくていい
・あ、あとコメントを使ってデバッグするならちょっとしたテクを教えるよ
module = function(){
var current = null;
function init(){
};
/<-これ /*
function show(){
current = 1;
};
function hide(){
show();
};
//<-これ */
return{init:init,show:show,current:current}
}();
"/"を外したりつけたり
あと、slideshareにあったコメントのテク
コード有効:
/* */
...
/* */
コード無効 :
/* * /
...
/* */
無効時のコードには半角スペースが入ってます
・コメントはdocument作成時にも使われてるよ
・あーでもコメントはエンドユーザーにはみられるべきではないよね
■Avoid mixing with other technologies
・Javascriptでできることは色々あるけど、あくまで役割をこなす事を考えるべき
・例）
Q:"mandatory"というクラスの入力フィールドが空の時は赤いボーダーを引きたい
A1:
var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i
direction = 1;
} else {
direction = -1;
}
var direction = (x > 100) ? 1 : -1;
/* 入れ子では使わないように！ */
■Modularize
・モジュール化&機能役割がキチンとした形で
・毎回関数を確かに手っ取り早くていいけど、それらを追加するのにそれぞれ同じ拡張しなきゃいけなくなることとかない？
・↑の防止として、(rather than catch-all methods)より一つの役割を果たす最小限で汎用的なメソッドを書くよう心がけること
・あとあと機能拡張API作成にrevealing module patternを使用するときにも役立てる事ができるよ
・良いコードはコアの部分を書き変えなくても拡張できるべき
■Enhance progressively
・Web上で動くものがあるので、Javascriptに頼りまくるよりそれらを使っていこう
・Dom生成は遅いし高価ですよ
・ElementsはJavascript依存していますが、Javascriptが切られたときにも使用できるようにしておかないのはユーザーに対する裏切りです
（かな？）
■Allow for configuration and translation.
・変更しやすいコードは散らばらないっ！
・これにはlabelやCSSのclass、IDやプリセットも含まれます
・↑を設定オブジェクトにまとめて作成、アクセスできるようにしておけばカスタマイズも容易になるでしょう
・以下例
carousel = function(){
var config = {
CSS:{
classes:{
current:’current’,
scrollContainer:’scroll’
},
IDs:{
maincontainer:’carousel’
}
}
labels:{
previous:’back’,
next:’next’,
auto:’play’
}
settings:{
amount:5,
skin:’blue’,
autoplay:false
}
};
function init(){
};
function scroll(){
};
function highlight(){
};
return {config:config,init:init}
}();
いつか続く
Javascript Best Practice自分用まとめ(1)
http://www.slideshare.net/cheilmann/javascript-best-practices-1041724
↑
ココ読むより原文読んだ方が良いです。
あくまで自分用かつブログ記事も稼げていいんじゃね？という趣旨
■Make it understandable!
・わかりやすい命名しようよ
・駄目な例) x1 fe2 xbqnea incrementorForMainLoopWhichSpansFromTenToTwenty createNewMemberIfAgeOverTwentyOneAndMoonIsFull
・値そのものについての記述するのはやめとけ
・たとえばisOverEighteen()は他の国ではその基準は変わるかもしれないよね、isLegalAge()なら安心
■Avoid globals
・他のコードと被るから怖いよグローバル！
・回避策として、closuresとmodule patternがあるよ
例A)
// 全部グローバルなんでアクセス可能
// アクセスが閉じられていないので上書きもされる可能性があって怖いね！
var current = null;
var labels = [ ‘home’:’home’, ‘articles’:’articles’, ‘contact’:’contact’ ];
function init(){ };
function show(){
curent = 1;
};
function hide(){
show();
};
・回避策1(ただ同じモジュール名繰り返し書くのが多くなるとめんどい)
demo = {
current:null,
labels:[
‘home’:’home’,
‘articles’:’articles’,
‘contact’:’contact’
],
init:function(){
},
show:function(){
demo.current = 1;
},
hide:function(){
demo.show();
}
}
・回避策2(匿名モジュールで、グローバルなものはないよ！ただし外からアクセスする手段がほぼ無いのがたるい)
(function(){
var current = null;
var labels = [
‘home’:’home’,
‘articles’:’articles’,
‘contact’:’contact’
];
function init(){
};
function show(){
current = 1;
};
function hide(){
show();
};
})();
・回避策3(module pattern、どこがグローバルかそうでないかと設定する必要あり)
(あとモジュール名の繰り返しと、function内でsyntaxが変わるのがめどい)
module = function(){
var labels = [
‘home’:’home’,
‘articles’:’articles’,
‘contact’:’contact’
];
return {
current:null,
init:function(){
},
show:function(){
module.current = 1;
},
hide:function(){
module.show();
}
}
}();
・回避策4(Revealing Module Pattern)
(syntaxを保持しつつグローバルにできる)
module = function(){
var current = null;
var labels = [
‘home’:’home’,
‘articles’:’articles’,
‘contact’:’contact’
];
function init(){
};
function show(){
current = 1;
};
function hide(){
show();
};
return{init:init,show:show,current:current}
}();
■Stick to a strict coding style
・どのブラウザーもjavascriptパーサーには非常に寛容
・でも適当なコーディングスタイルだと他の人が読むときに死ぬでしょ
・Valid Codeは良いコード
・Valid Codeはセキュアなコード
・ここであなたのコードをValidateしてください
http://www.jslint.com/
いつか続く
