Ajaxの学習経過報告 5

　ちょっと間が開いてしまいましたがサボってたわけではないです(笑)
まぁ、金・土・日は東京を満喫してきましたが(笑)

▲経過報告
・Ajaxを勉強しよう
　　http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html
を使った学習を一旦終了。
　scriptaculous.jsやprototype.jsもサラっと学習。

　現在、自分が作ってみたと思っている簡単なゲームを実現するための技術を色々なところから習得中。
あまりにもJavaScriptの知識がないため、どのように実現するのがスマートなのか分からずに苦戦…。
　ぱっと見、タグにイベントハンドラを設定してやることで、オブジェクト指向プログラミングが実現しやすいのかなと思ったが、実際にやろうとすると「どこに全体の始点となるイベントを置くのが普通なのか」とか「オブジェクト指向っぽくプログラミングするにはクラスを使ったほうがいいのか」とか細かいところで悩む…。
　いっそ本格的にJavaScript勉強しちゃってもいいんだろうけど（苦笑）


▲学んだこと
●scriptaculous.jsの特徴について
　その問題点（ファイルサイズの増大や汎用関数の動作強制変更）などを学ぶ。
[はてな技術発表会日記 2005.11.11 テーマ script.aculo.us 発表者 d:id:aql]
　http://hatena.g.hatena.ne.jp/hatenatech/20051111/1131539607
[川o・-・）＜2nd life　script.aculo.us のファイルサイズを軽減する]
　http://d.hatena.ne.jp/secondlife/20060204
[123net :: 開発日記 » [雑記] 軽くした内容]
　http://www.123net.jp/dev//item/94

●各種入力イベントについて
　http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/009/index.html
【マウス関連】
　click（クリックされた）
　dblclick（ダブルクリックされた）
　mousedown（マウスの左ボタンが押された）
　mouseup（マウスの左ボタンが離された）
　contextmenu（右ボタンがクリックされた）
　mouseover（マウスが重なった）
　mouseout（マウスが離れた）
　mousemove（マウスが動いた）
　など

★Internet Explorer以外でのW3Cに準拠したブラウザ
　→イベント名をそのまま。on はつかない。
　→addEventListener・removeEventListenerを利用する
★Internet Explorer
　→イベント名の先頭に on がつく。
　→attachEvent・detachEventを利用する


▲遭遇したエラー達
●画面に全く何も表示されなくなる
　→　JavaScriptの終了タグ </script> が <script> となりHTML全体がJavaScriptと認識されていたため

●CSSを記述しているにも関わらずCSSが適用されない
→CSSのミス

＜表示されない＞
<div id="test2"
style = "boder:dotted 1px #666666;
width:200px;">
マウスカーソルでなぞってください。
</div>

＜表示される＞
<div id="test2"
style = "border:dotted 1px #666666;
width:200px;">
マウスカーソルでなぞってください。
</div>

●全くJavaScriptが動作しない
→閉じ括弧忘れ
<!-- ライブラリの読み込み -->
<script language = "javascript"
charset = "Shift_JIS"
× src = "jslb_event.js"</script>

○ src = "jslb_event.js"> </script>

　ここまでは基本的にシンタックスエラー。以前から自覚はあったが、いかにVCに甘やかされてきたのかを露呈する結果に（苦笑）

●エラーが出て動作しない（prototype.js）
エラーメッセージ
「エラー: 'undefined' は NULL またはオブジェクトではありません。」
→tagIDは変数なので　""　をつけてはいけない。

function addEvent(tagID)
{
× $("tagID").attachEvent("onclick", check);
○ $(tagID).attachEvent("onclick", check);
}

●scriptaculous.jsが正しく動作しない
→scriptaculous.jsで利用されているprototype.jsはscriptaculous.jsに付属のもので、オリジナルとは別である。

●scriptaculous.jsが正しく動作しない
→独自のCSSでスタイルを指定しているものにはeffectを適用することができない？？（未確認）

●複数のオブジェクトに同時にエフェクトを発動させたいのに発動しない
→同じIDを持つオブジェクトが複数存在してはいけない
　個別にIDを設定する必要がある

●attachEventで引数つきの関数を渡したい
→無名関数を利用する

http://otd8.jbbs.livedoor.jp/javascript/bbs_tree?base=14072&range=1
http://allabout.co.jp/career/javascript/closeup/CU20050228A/index2.htm#6


▲ゲームの開発状況
　全体…15%
[問題点]
　イベントの保持方法・実現方法
　データ通信
　ルールの実現方法

　Ajaxの学習経過報告 4

▲経過報告
・Ajaxを勉強しよう
　　http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html
を引き続き学習中。

　第一章から第三章の「3.ゲームのマップを表示する」までを学習。
そこから幾つか飛ばして、第五章へ。
　第五章の初めから、「5.HTMLへのアクセス方法 - その他のタグ -」までを学習。
スタイルシートに関する6〜8を飛ばして、「9.各種イベントについて」から再開。
　イベント処理とドラッグ処理を学習。

　次は「■特殊効果（エフェクト）」について学習予定。
その後は「prototype.js」にも興味あり。
　作りたいモノは決まったので、それに必要な知識を中心に学習を進める予定。


▲学んだこと
■関数について
●createElement("タグ名")
　タグオブジェクトを生成。
document.createElement("タグ名")

●setAttribute("属性", "値")
　HTMLの属性を設定するメソッド。
オブジェクト名.setAttribute("属性", "値")

●appendChild("オブジェクト名")
　IDで指定したタグにオブジェクトを挿入する
document.getElementById("ID").appendChild("オブジェクト名")


function outHTML()
{
imageObj = document.createElement("img");
imageObj.setAttribute("src","dog.jpg");
document.getElementById("subContent").appendChild(imageObj);
}


●hasChildNodes()
　子ノードがあるかどうか。
　返り値が true なら子ノードが存在する。
false なら子ノードは存在しない。
if(オブジェクト名.hasChildNodes() == false)
　http://allabout.co.jp/internet/javascript/closeup/CU20040830A/

●cloneNode(フラグ)
　対象となるノードのコピーを返す。
　フラグが true ならノード以下のツリー全てをコピー
false なら該当ノードのみをコピー（文字も含まない）
clone = document.getElementById(id).cloneNode(true)
　http://allabout.co.jp/internet/javascript/closeup/CU20040915A/

●replaceChild(置き換える新しいノード, 置き換えられる古いノード)
　ノードを置き換える。
　第二引数のノードrefChildを、第一引数のノードnewChildで置き換える。
this.replaceChild( newChild , this.firstChild )
　http://allabout.co.jp/internet/javascript/closeup/CU20040717A/


■ノードの構造確認方法
ノードが、どのようになっているかを確認したいのであればFirefoxのDOM Inspectorを利用すると良いでしょう。ツールメニューからDOM Inspectorを選択すればウィンドウが表示され、ページ内のノードの状況がわかります。

■イベントの名称について
＜Firefox, Safari, Operaなど　イベント名に on が付かない＞
addEventListener(イベント名, 実行する関数名, イベント伝達方向)
removeEventListener(イベント名, 実行する関数名, イベント伝達方向)

document.getElementById(tagID).addEventListener("click",funcName,false);


＜Internet Explorer用　イベント名に on が付く＞
attachEvent(イベント名, 実行する関数名)
detachEvent(イベント名, 実行する関数名)

document.getElementById(tagID).attachEvent("onclick",check);


■オブジェクトのドラッグの実現
　1. オブジェクト上でのマウスダウンを検知→ドラッグスタート
　　 オブジェクト上でのマウスアップを検知→ドラッグエンド
　　 オブジェクト上でのマウスムーブを検知→ドラッグフラグオンならドラッグ動作

　2. ドラッグスタート
　　ドラッグフラグをオン
　　処理対象オブジェクトの取得
　　マウス位置とオブジェクト位置からオフセットを計算

　3. ドラッグエンド
　　ドラッグフラグをオフ

　4. ドラッグ動作
　　ドラッグフラグがオフなら何もせず終了
　　ドラッグフラグがオンならオブジェクトの座標をマウス位置に応じて変更

　Ajaxの学習経過報告 3

●遭遇したエラー達
エラー：オブジェクトを指定してください
→parse error
　呼び出す関数名の打ち間違い
　→定義されていない関数を呼び出そうとしたと解釈される

エラー：オブジェクトでサポートされていないプロパティまたはメソッドです。
→parse error
　getElementByID("aForm")
　→getElementById("aForm")

　オブジェクト名に . を付けて呼び出したメソッド名のうち間違い
　→定義されていないメソッドを呼び出そうとしたと解釈される


●新しい知識
＜IDを指定した呼び出し＞
document.getElementByID("myPhoto").src = *.jpg
＜（HTML）タグを指定した呼び出し＞
document.getElementByTagName("img")[0].src = *.jpg

＜新しい用語＞
クロスサイトスクリプティング（XSS）
　ソフトウェアのセキュリティホールの一つで、Webサイトの訪問者の入力をそのまま画面に表示する掲示板などのプログラムが、悪意のあるコードを訪問者のブラウザに送ってしまう脆弱性のこと。

[参考URL]
　http://e-words.jp/w/E382AFE383ADE382B9E382B5E382A4E38388E382B9E382AFE383AAE38397E38386E382A3E383B3E382B0.html
　http://www.ipa.go.jp/security/awareness/vendor/programming/a01_02_main.html
　http://lovemorgue.org/xss.html

●JavaScriptのクセ
// innerTextはFireFoxでは動作しない。
// FireFoxではtextContentを使うことになるが、こちらはIEなどでは動作しない。

function outTEXT()
{
$("subContent").setText("<b>HTMLタグ</b>は反映されません");
}

// $関数の定義
function $(tagID)
{
// DOMオブジェクトの代入
var tagObj = document.getElementById(tagID);

// そのオブジェクトの振る舞いの定義
tagObj.setText = function (srcText)
{
if(navigator.userAgent.indexOf("Firefox") > -1)
{
tagObj.textContent = srcText;
}
else
{
tagObj.innerText = srcText;
}
}

return tagObj;
}

　ある関数の定義の中に、別の定義が紛れ込んでいて気持ち悪い。

　Ajaxに対する学習報告。

　Ajaxを勉強しよう
　　http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html

を引き続き読み進めて、第三章の「3. ゲームのマップを表示する」まで進む。
　その中でCSSが出てきて、またしてもちょいストップ。
　このスタイルシートのおかげで、半透明gifファイルを重ねて表示できるようになっており、斜めから見下ろしたようなマップの表示を実現している。

for(var i=0; i<MapHeight; i++)
{
　for(var j=0; j<MapWidth; j++)
　{
　　mapNumber = lineData[i].charAt(j);

　　// スタイルシート用計算
　　mx = MapWidth * blockSize + j*blockSize - i*blockSize;
　　my = i*blockSize + screenOffset;

　　resultImage += '<img src="images/'+mapNumber+'.gif" class="mapBlock" style="top:'+my+'px;left:'+mx+'px">';
　}
　resultImage += "<br>";
}

<!-- スタイルシート -->
<style type="text/css"><!--
.mapBlock{
width:64px;
height:32px;
position:absolute;
}
--></style>

　Ajaxに対する学習報告。

　色々なサイトを回って基本的な考え方や出来ることなどを確認。

・特に勉強になったサイト
　Ajax: Web アプリケーション開発の新しいアプローチ
　＠IT > リッチクライアント ＆ 帳票 > 古くて新しいAjaxの真実を見極める

・特に感動したサンプル
　GoogleMaps
　GoogleSuggest
　Ajaxを使ったメールソフト　Zimbra
　
・特に役立ったサイト
　Ajaxを勉強しよう

　現在は一番下のサイト「Ajaxを勉強しよう」にて順次学習中。
　2章「データが受け取れなかった場合の処理」まで学習するも、JavaScriptに対する知識不足でちょっと躓く。
「JavaScriptにおける関数呼び出し」と「JavaScriptにおけるハッシュ配列の扱い方」に対する知識不足のため下記ソースを完全に理解できず…。要学習。

statusCode[""+httpObj.status]();

statusCode = new Array();
statusCode["200"] = function (){ document.ajaxForm.result.value = httpObj.responseText; }
statusCode["401"] = function (){ document.ajaxForm.result.value = "認証失敗"; }

# JavaScriptとかAjaxに関する本を買ったほうが早いのかなぁ…。
#でも本買う金も今あんまりないんだよなぁ…。
#とっとと終わらせたいAjaxにあんまりお金を払いたくないっていう気持ちもあったり…。

　Ajaxに関する技術関連メモ(1)

【Ajax】
　Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行なって処理を進めていく対話型Webアプリケーションの実装形態。
　[参考URL]

【XMLHTTPRequest】
　XMLHttpRequestは、Win版ieや、Win、Mac、Linux版のMozilla、Firefox、Opera8、Mac版Safari1.2、Linuxのkonqueror3などに実装された、HTTPクライアントな機能を実現するオブジェクトです。「XML」が名前の頭に付いていますが、XMLではなくても使えます。
　[参考URL]

【JSON】
　JavaScript Object Notationの略称で、JavaScriptでオブジェクトを作成する方法の一つ。
　[参考URL1]
　[参考URL2]

【RIA】
　ユーザインターフェースにFlashやJavaアプレット、Ajaxなどを用いて、単純なHTMLで記述されたページよりも操作性や表現力に優れたWebアプリケーションのこと。
　[参考URL]

【Web2.0】
　「Web 2.0」は、米国のIT関連では有名な出版社「O'Reilly Media」社長、O'Reilly氏が提唱しました。進化を続けるWeb業界の、2004〜2005年あたりの流行を切り取って、「Webってなんかバージョンアップした感があるよね。もう2.0って感じじゃないか」というノリで名前をつけたもので、特定の技術を指すものではありません。
　[参考URL1]
　[参考URL2]
　[参考URL3]

【DOM】
　文書オブジェクトモデル(DOM)とは、HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。これは、文書の論理的構造や、文書へのアクセスや操作の方法を定義するものである。
　[参考URL1]
　[参考URL2]

　Ajaxに関しての自分の想いなど。

　なぜAjaxをやろうと思ったかというと、WiiがAjax対応だと聞いたからです。（ファミ通）
要するにAjax対応のOperaが利用可能になるという話ですね。
　現状のFlashの普及率を考えるとFlashもそのまま利用できる可能性が高いかと思いますが、とりあえず勉強しといて損はないかなと。

　近年のブロードバンド時代において、一部だけのリロードで動的なサイトが実現できるという部分にはあまり魅力を感じられませんが、非同期通信によって通信のタイミングを隠し、RIAを実現するという部分はインパクトがあります。
　グーグルマップやグーグルサジェストを使っていると、ネット接続を必要とする古いアプリケーションとは全く違った感覚、オフライン専用ソフトを使っているのと同じような錯覚を覚えます。まさにRIAの理想系と言えるのではないでしょうか。
　そんな感覚を与えてくれる技術を自分の物にしてみたいというのが動機です。
　GoogleMaps
　GoogleSuggest

　ただし、本業（コンシューマゲームプログラマー）とは少し離れた位置の技術ではあるので、とっととAjaxの核というか、感覚というか、真理というかを掴んで次にいきたいというのが本音でもあります。

　mixiにおける技術の第二弾。

　(1)足あとシステム

　(2)ゲストブック
　今回はゲストブック（足跡用の仕組み）について。
　mixiではゲストブックを作るために日記（の記事ひとつ）を使うのが一般的なようだ。
これは非常に珍しい手法ではないだろうか。
　これまでは、ゲストブックが欲しいとおもったサイト管理者は、レンタル掲示板の一種のような「レンタルゲストブック」を借りてきて設置することで、それを実現していた。
ところが、mixiでは”日記にコメントが付けられる”という特徴を活用して、日記一つをゲストブックとしてしまっているのだ。感覚的にはスレッド掲示板の一つのスレッドをある目的の為だけに利用する状況に近いだろうか。
　これも(1)の足あとシステムと同じくある種の発明のように感じる。このアイデアを考え出した人を尊敬する。
　ちなみに弊ブログにものゲストブックを設置してみた。

　技術シリーズ第一弾はmixiの技術について。
　このmixiはソーシャルネットワークで成功したサイトの走りだと思うのだが（筆者の勉強不足でもっと他にもあったらご指摘ください）、ここで使われている技術の中で特に ねこきき が注目した技術について述べたい。

(1)足あとシステム
　この足あとシステムは画期的だと思う。
　なぜなら、「訪問する」という行為だけで「リンク」を生み出すからだ。
　インターネットにおいてリンクを獲得するという行為は非常に重要な行為である。（これについては後日述べる）
重要な行為ではあるが、これまでのインターネットにおいてリンクを獲得する行為は容易なものではなかった。
　全く知らない人のサイトを訪問することは簡単だが、そこから自分のサイトへのリンクを生成することが困難だった。
リンクを生成するためには訪問先のサイトの掲示板などで書き込みを行い、そこで自分のサイトを紹介する必要がある。しかしながら、過度な紹介など明らかにリンク生成目的の書き込みは嫌われてしまう。
ブログと同時に広まったトラックバックシステムが、多くのサイトで撤去されている様子からも、そのことがうかがい知れるだろう。
　また、訪問先のサイト管理者と相互リンクなどを生成してもらうためには人間関係を構築する必要がある。
これも容易ではない。
　ところがmixiの「足あと」システムは、ただ、訪問先の日記を訪問するだけで「足あと」が残り、その足あとを辿って訪問先の日記管理者が自分の日記を訪れてくれるかもしれない。
つまりリンクが生成されているのだ。
　このように、”これまでは多くの努力が必要だったリンクを獲得するという行為を、サイトを訪問するという簡単な行為だけで実現できるようにした”「mixiの足あと」という技術を私はある種の発明だと感じる。
　もちろん、獲得されるリンクは管理者と管理者の間だけに公開される非公開リンクであるという問題点はあるのだが。

　今日はあの高橋名人の誕生日らしい。
　必殺技の16連射が、今では12.4連射になっちゃってました。
高橋名人がハドソンの社員だというのは今では有名な話ですが、「名人」になったのは、『顔が売れてるタレントさんにお願いすると、ゲームについて一から説明しないといけないから』だったとか。
　当時は”ゲームをプレイする人からヒーローを作り出して、子供を惹きつける手法”（なんと高橋名人は16連射でスイカを粉砕できたのだ！）が主流だったが、今は”ゲームを作る人からヒーローを作り出して、ユーザーを惹きつける手法”が主流になってきている。
「宮本茂のマリオ」だったり「糸井重里のマザー」だったり「小島監督のメタルギアソリッド」だったり「桜井政博のスマブラ」だったり…。
　今やゲームは子供の遊びではなく、20歳を超えた大人も遊ぶアイテムだから、遊び方のヒーローを作るより、作り手のヒーローを作り出したほうが有効なのだろう。
　実際、「○○さんのようなゲームクリエイターになりたい」とゲーム業界を志望する人も少なくないらしい。
5/22の小島監督のインターネットラジオ「HIDECHAN!Radio.」の中でもそんなことが語られていた。
しかし、その何％が”使える”ゲームクリエイターとして業界に乗り込んで来てくれるのか…。
本当に使えるゲームクリエイターとして乗り込んで来てくれる人は、そんなセリフ言いたくないと思って入ってくるのではないか。
　きっと本当の狙いは「そういうセリフを言って志望してくる人」ではなく「○○さんを尊敬しています。でもいつかは超えてみせます。という想いを持って志望してくる人」を増やすことなのだろう。

　自分も尊敬する社員が所属するという理由で会社を選んだ一人だ。
　これが正解か間違いか、一年後には結果が出るのだろう。

　今一番興味があるのは

　　Ajax

　巷では色々盛り上がっているようで、その波に乗ってみました。
　これまではJavaもJavaScriptも全く興味がなかったんですが、RIA（Rich Internet Applications)つまるところ、なんか高級感感じちゃうようなアプリケーションを実現する手法として注目を浴びているってことで、自分も「どんなもんじゃい」と興味を持ったというわけです。
　詳しいことはググればいくらでも出てくるので割愛。

　そのほかやらないといけないことは…

　・3Dプログラミング技術の向上
　・デザインパターンの復習
　・落ちモノパズルの思考アルゴリズムの改善
　・Effective C++ の復習
　・Effectプログラムへの挑戦
　・CSSの学習
　・RSSの学習

などなど山積みです。

　初めましての自己紹介から、足跡ペタペタ、ふと思った落書きなどなんでもOKなのでコメントを利用して気軽に書き込んでください〜

　はじめまして。ねこききと申します。

　このブログは、来年からゲーム業界で働く予定の学生が日々思ったことや目に付いた技術などをダラダラと書き留める記録です。

どんな感じになるかは全く分かりません。三日坊主になるかもとの話も…

　よろしかったらチラチラ覗いてやってくださいまし。