• 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Ajax【8】 - Ajax学習中【7】

 Ajaxの学習経過報告 7

 引き続き「Ajax一筆書き」の開発。


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

[Ajax一筆書き!](注:IE4.0↑でしか動きません。FireFoxなどでは動きません。)
 http://www.bb.banban.jp/nekokiki/ajax/map11/main.html

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

 マウスでなぞって全てのパネルを白か黒にしたらクリア!
 灰色の部分は色が変わらないし、Step数も増えません。
 できるだけ少ないStep数でクリアするのが目的です。
 クリア後は、パネルを吹き飛ばして下にあるフォームから名前とコメントを入力してみてください。

[更新内容]
 ・ゲームクリア時にランキングもどきにスコアを登録できるようになった。


▲学んだこと
 ●JavaScriptプログラムにおけるデータ保存方法
  JavaScriptではクッキーによる一時的なデータの保存はできるが、継続的なデータの保存はできない。
  これを実現するためにはCGIを利用する必要がある。
  phpをつかったプログラムをFORMを使って呼び出すことで実現。


▲遭遇したエラー達
 【症状】
  405 Method Not Allowed
  と言うページが表示される。
 【原因と対策】
  .htaccessの記述が正しくないか、アップロード先のディレクトリやパーミッションの設定が間違っている。
  .htaccessについて確認する。
  あるいは、POST methodが利用できないWebサーバーの可能性も。
  ファイルの属性で実行ができないファイルになっているかも?

 【症状】
  PHPの構文がそのまま表示される
 【原因と対策】
  サーバーがPHPに対応していない。
  他のサーバーを利用する。無理やり拡張子をcgiに変えると下のエラーに。

 【症状】
  500 Internal Server Error
 【原因と対策】
  PHPに対応していないサーバーで、Perlの構文としてPHPの構文を解析しようとしたため。
  構文エラーが発生している


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

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

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


[開発状況]
 全体…75%

[課題]
     配置の調整
     データ通信
     問題投稿システムの実現
     対戦モードの実現
 [40% ] ランキングの実現
     → とりあえず記録が残せるだけ → きちんとしたランキングに。
 [済!] イベントの保持方法・実現方法
     → attachEventでタグにイベントを設定。一部問題もアリ。
 [済!] ルールの実現方法
     → 配列にデータを格納し、そのデータを操作することで実現。
スポンサーサイト

ゲームっぽいもの公開! Ajax【7】 - Ajax学習中【6】

 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

 まぁ…パクr…オマージュです!
 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

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

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


[開発状況]
 全体…70%

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

Ajax【6】 - Ajax学習中【5】

 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(5) - Ajax学習中(4)

 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(4) - Ajax学習中(3)

 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;
}

 ある関数の定義の中に、別の定義が紛れ込んでいて気持ち悪い。
カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ブログ内検索
プロフィール
2007年4月からゲーム業界の大手某社で働き始めた管理人 ねこきき が日々思うことの記録。業界に対する話や最先端技術的の話、プログラム話などをダラダラと書いています。

管理人のWebページ(就活の記録など)
足跡歓迎!ココをクリック!

ねこきき

最近の記事
月別アーカイブ
カテゴリー
最近のコメント
最近のトラックバック
Counter
ブロとも申請フォーム

この人とブロともになる

FC2ブログランキング

FC2Blog Ranking

ブログ内検索
RSSフィード
リンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。