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

 ある関数の定義の中に、別の定義が紛れ込んでいて気持ち悪い。
スポンサーサイト

Ajax(3) - Ajax学習中(2)

 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(2) - Ajax学習中(1)

 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関連メモ(1)

 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(0) - Ajaxに関して

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

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

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

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

技術(2) - mixiの技術(2)

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

 (1)足あとシステム

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

技術(1) - mixiの技術(1)

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

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