Ajaxの学習経過報告 6

　毎日継続してやってるんですが、報告書くよりも勉強をしたいという感じで報告がおろそかになってます（汗）
　新しい知識を勉強してみて「やっぱり俺は天才系じゃないなぁ…」と改めて認識。勉強が進むペースが激しく遅いんですよね…。一日が48時間でも足りないぐらいのペースでしか進みません…orz
　しかも、二日分をまとめて書こうと思ったら膨大な量に(笑)　こんなレポート読む気しないよなぁ…；；

　JavaScriptはやっぱりスクリプト言語だけあって、プログラムを作るのが簡単でいいですねー。今回公開したゲームほどグラフィカルなプログラムをWindowsで実現しようと思ったら、どれだけ周りの知識を学習しないといけない事か。タグの知識さえあれば絵をすぐに動かせて楽しいし、あんまりメモリー管理とか考えなくていいから、プログラムをちょっと勉強してみたいって人にはいいのかも？
　あと、phpをやってたときにも感じたけど「文字列操作に強いなぁ」ってのは感じますね。HTMLを対象にしてるから当然なんだけども。
　逆に面倒な点としては、型を自動で変換してくれるってことで「型を意識する必要がない」と思いきや、”その変数が今何になっているかを把握しておく必要がある”ということで型は結構面倒かも。
それと、varをつけないだけでグローバル変数になってしまうってのも怖いですねー。


▲経過報告
・自分が作ってみようと思ったゲームの為の学習
　色々なところで学習して Ver0.7 としてゲームを公開！

[Ajax一筆書き！]（注：IE4.0↑でしか動きません。FireFoxなどでは動きません。）
　http://www.bb.banban.jp/nekokiki/ajax/map9/main.html

　まぁ…パクｒ…オマージュです！
　Ajax…っていうかJavaScriptになるのかもだけど、マウスカーソルが触れただけで背景がアニメーションするのをみて「これを使ったゲームを作ってみたいな」と思って作りました。

　マウスでなぞって全てのパネルを白か黒にしたらクリアー
　灰色の部分は色が変わらないし、Step数も増えません。
　できるだけ少ないStep数でクリアするのが目的です。


▲学んだこと
　●XMLHttpRequestを利用したプログラム
　　ローカルでテストできない…はず。

　●色の反転を実現するスタイルシート（IE 4.0↑）
　　filter: invert()

　　<STYLE type="text/css">
　
　
　<IMG src="../img/img1.jpg" class="ft0">色の反転<BR>

　　http://css.eweb-design.com/1023_inv.html

$(tagID).className = "inv";

　●JavaScriptを使ってCSSのクラスを適用する
　　$(tagID).className="クラス名"

　●型の変換
　　★型を調べる方法　　　　　　　　　　　　　　(typeof a)
　　★文字列（string）→数値(number)への変換　　num = eval(string)

　●多次元配列の使い方
　　charAt()は読み取り専用の戻り値が得られるだけ。
　　多次元配列は配列を生成→要素に配列を生成することで作る。

　　★配列の要素が文字列
　　×　g_MapArray[x].charAt(y) = 3;
　　　　取り出すときには使えるが、代入は不可能。

　　★配列の要素が文字列→多次元配列にする
　 // 001
　 // 011
　 // → MapLine[0]=001
　 // → MapLine[1]=011
　 //　→ MapArray = new Array(2) // MapLine.length
　 //　→ MapArray[0]=new Array(MapLine[0].length)
　 //　→ MapArray[1]=new Array(MapLine[1].length)

　 var MapText = oj.responseText;
　 var MapLine = MapText.split(LF);

　 var width = eval(MapLine[0].length);
　 var height = eval(MapLine.length);

　 // 多次元配列の生成（1次元配列→2次元配列へ）
　 var MapArray = new Array(height);

　 for(var i=0; i<height; i++)
　 {
　　 MapArray[i] = new Array(width);
　 }

　 →MapArray[y][x] = 3;

　　★配列の要素数を得る
　　× Array.length()
　　○ Array.length

　●クロスブラウザでイベントハンドラを追加する方法
　メソッド 種類
　observe(element, name, observer, useCapture) static


　引数 説明
　element: オブジェクトかID, name: イベント名 ('click', 'load' など), イベントに対して、イベントハンドラ
　observer: イベントを処理する関数, useCapture: true なら, を追加する。
　capture 段階でイベントを処理し, false なら bubbling 段階で処理する

　Event.observe(window, 'load', function() {
　　 var label = new EditableTextBox($('label'));
　　 label.onSubmit = function() {
　　　 new Ajax.Request('/hatenak/keyword', {
　　 method: 'get',
　　 parameters: 'word=' + encodeURIComponent(label.getLabel()),
　　 onSuccess: function(transport) {
　　　 alert(transport.responseText);
　　　 }
　　　 });
　　 };
　}, false);

　●ロード時に自動実行する方法
　// windowにonloadイベントハンドラを追加
　Event.observe(window, 'load', function(){ loadDataFile('round/2.txt'); }, false)


▲遭遇したエラー達
　●画面が全く表示されないしエラーも出ない
　　リソースとなるマップデータが存在しない。（エラー処理をサボっているため）

　●更新内容が反映されない
　　★キャッシュの所為
　　　→ctrl+F5
　　★ロードするファイルの内容が変わっても反映されない
　　　→読み込みに利用しているのがキャッシュのため（？）
　　　→新しいウィンドウを開く

　●JavaScriptがオフのときにロード→オンにしたときにリロードされたときだけエラー
　　最初からオンのところにURLを入力→エラーなし
　　エラー後リロードすれば正常に動く。
　　エラー後そのままでは動かない。

　　→.attachEvent　によるエラー
　　　まだ生成されていないタグに対してイベントを設定しようとしていた為

　　　→httpObj = createXMLHttpRequest(initFunc)　のinitFunc　や
　　　　if((httpObj.readyState==4)&&(httpObj.status==200))　を利用する



▲現在の疑問
　●responseTextについて
　　responseText.split(LF)のような利用が認められているが、responseTextで利用できるメソッドにはsplit以外にはどのようなものがあるのか。

　●どのようにデータを管理するか
　　各オブジェクトに色の変化を担当させることで、どのオブジェクトが触られているか考える必要がない
　　→しかし、マップのデータを変更するにはデータを変更し、そのデータを元に画面を更新する必要がある
　　→ID名で触られていることを通知し、全体を更新する命令を出すか？

　●observeの使い方
　　observeを利用してタグに対してイベントハンドラを追加する方法が分からない…。
　　第一引数の正しい指定方法が不明。

function addEvent(tagID)
{
○ $(tagID).attachEvent("onmouseover", function () {invValue(tagID);});

// エラーが出る
× Event.observe(tagID, 'onmouseover', function() {invValue(tagID);}, false);
}

　●無名関数のdettachのやり方が不明
　　→ない…のだろうか？
　　→observeを使えば自動的にやってくれ…る？

　●scriptaculous.Effect.Puff()の動作
　　Puffを使った後のタグはどうなる？存在しなくなる？？

　●複数のDIV要素に同一のイベントを一度に発生させる方法は？
　　一つ外側にDIV要素をつくり、その要素に対しEffect.Puff()などを適用すると実現できるが、内部のDIV要素がinnerHTMLの書き換えなどでなくなった場合にエラーが出る。
　　dettach出来ていないからか？無名関数を使っているのでdettachできない。
　　→observeを使うべき？使ってみたが上述のエラーで使えず…。


▲ゲームの開発状況
[Ajax一筆書き！]（注：IE4.0↑でしか動きません。FireFoxなどでは動きません。）
　http://www.bb.banban.jp/nekokiki/ajax/map9/main.html

　まぁ…パクｒ…オマージュです！
　Ajax…っていうかJavaScriptになるのかもだけど、マウスカーソルが触れただけで背景がアニメーションするのをみて「これを使ったゲームを作ってみたいな」と思って作りました。

　マウスでなぞって全てのパネルを白か黒にしたらクリアー
　灰色の部分は色が変わらないし、Step数も増えません。
　できるだけ少ないStep数でクリアするのが目的です。


[開発状況]
　全体…70%

[課題]
　　　　　配置の調整
　　　　　データ通信
　　　　　ランキングの実現
　　　　　問題投稿システムの実現
　　　　　対戦モードの実現
　[済！]　イベントの保持方法・実現方法
　　　　　→attachEventでタグにイベントを設定。一部問題もアリ
　[済！]　ルールの実現方法
　　　　　→　配列にデータを格納し、そのデータを操作することで実現。