++Flashプログラミング++

「Fotografia フォトグラフィア D40の写真日記　写真ブログ」用にflickrのコメントを表示するやつをJavascriptで作成中。今のところflickrのphoto_idをパラメータで渡すとFlickr APIを使ってコメントを取ってくる。これからブログ内の写真からphoto_idを抜き出して勝手にコメントを取得して表示するようにする予定。

「jkl-parsexml.js：属性値のアクセス方法」というエントリーを2年ぐらい前に書いたんだけれども、今回こういうXMLをパースする時に<comment>○○○</comment>のなかのテキストをとる方法が分からなくてハマったのでメモ。

<rsp stat="ok">
<comments photo_id="2328202849">
    <comment authorname="micstolz" datecreate="1205375350">
 Great red and gray!</comment>
</comments>
<comments photo_id="2328202849">
    <comment authorname="javababy" datecreate="1205375351">
 beautifui</comment>
</comments>
</rsp>

こうやるだけ。

data["rsp"]["comments"]["comment"][i]["#text"];

かなり悩んだけどfirebug使ったら簡単だった。これ便利だね。

はてブに載っていたJavascriptのチュートリアルサイトがすごい便利。全部英語だけどコード見れば何やってるかわかるし何より同じウィンドウ内でサンプルコードを実行したりさらに編集しながら勉強できる。これはおすすめ。

→http://eloquentjavascript.net/contents.html

******おすすめ参考書******
JavaScriptビジュアル・リファレンス (Web Designer’s Handbook Series)
JavaScript 第5版

O’Reilly（オライリー）の「Javascript: The Definitive Guide (DEFINITIVE GUIDE)」の最新版5th Editionがいつの間にか発売。Safari Onlineにも登場したので早速登録！！じっくり読もうっと。

ニンテンドーDSブラウザー用にBookmarkletを作ってみました。
DSで動作確認しました。私のところでは上手く行っています。
bookmarklet内の「メールアドレス」をあなたのログイン用のメールアドレスに、
「パスワード」をあなたのパスワードに置き換えてください。

mixiの「ニンテンドーＤＳブラウザー」コミュニティで試してくれたみなさん
ありがとうございました。
間違い易いところ
<form name=f action〜 の所ですが、 faction ではなく、fの後に半角スペースが入って、f actionです。
簡易版
javascript:document.write(’<form name=f action=http://mixi.jp/login.pl method=post><input name=next_url value=/home.pl><INPUT name=email value=メールアドレス><INPUT name=password value=パスワード></form>’);window.f.submit();

mixi：メールアドレス、パスワード非表示版
DSブラウザーはタイトルバーのところに現在のURLが表示されるんですが、簡易版ではそこにアカウントとパスワードが出てしまいます。下記のバージョンだと表示されないので、まずは簡易版で試して気に入ったら非表示版に変えるのをオススメします。
簡易版との違いはメールアドレスと、パスワードのあとにtype=hiddenといれるだけです。
type=hiddenの前に半角のスペースを入れるのを忘れないでください。
javascript:document.write(’<form name=f action=http://mixi.jp/login.pl method=post><input name=next_url value=/home.pl type=hidden><INPUT name=email value=メールアドレス type=hidden><INPUT name=password value=パスワード type=hidden></form>’);window.f.submit();

fladdict.netさんのブログで紹介されていたとっても便利なJavascriptのフレームワーク”JQuery”。さっそく試したが要素をまとめて指定する方法は載っていたがIDを直接指定する方法が載ってなかったのであれこれ試しました。結果はこの通り。

ソース
<p id="main">かわるかな？</p>
<p>DOMの操作もお手の物</p>
<ｐ>簡単便利なJQuery</p>
<script>
$("p#main").html("かわるのさ");
</script>
実行結果
かわるのさ
DOMの操作もお手の物
かんたん便利なJQuery

→Javascript関連本ランキング＠Amazon

JKL-parsexml.jsでお世話になっている kawa.netさんがラスタースクロールをさせるjavascriptを公開しています。どんなのかっていうとドラクエで旅の泉に入ったときのウネウネってした感じのエフェクト？画像だけでなくdivやtableと言った要素にも適用できます。いやーすごい。
→[JavaScript] Animation.Raster（kawa.net)

*****Javascriptおすすめ参考書****
JavaScriptビジュアル・リファレンス
↑これを買ってからJavascriptいじるのが楽しくてしかたない。オススメっす。
JavaScript & DHTMLクックブック―Webエキスパート必携テクニック集
↑これで勉強して一皮むけたい。

google analyticsの検索ワードをチェックしていると jkl-parsexml.jsで検索してくる人が多い。これなしでJavascriptでXMLを扱うなんて考えられないほど愛用しているライブラリ。解説は作者のkawa.netさんのこのページが詳しいですが、XMLの属性値のアクセス方法がわからなかったのでパースしたXMLがどの様に配列に格納されるかについてちょびっと書きます。

こんなデータがあるとします。
item.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<items>
<item name="iMac G5" price="150000"/>
<item name="iBook G4" price="100000"/>
</items>
このXMLへのアクセス方法
<script type="text/javascript" src="jkl-parsexml.js"></script>
<script>
var url = "item.xml";
var http = new JKL.ParseXML( url );
var data = http.parse();
for(var i = 0; i < data["items"]["item"].length; i++){
	var name = data["items"]["item"][i]["name"] ;
	var price = data["items"]["item"][i]["price"];
	document.write(name+"="+price+"<br>");
}
</script>
こんな感じで複数のアイテムや属性値にもアクセス出来ます。

JavaScriptビジュアル・リファレンス
↑これを買ってからJavascriptいじるのが楽しくてしかたない。オススメっす。
JavaScript & DHTMLクックブック―Webエキスパート必携テクニック集
↑これで勉強して一皮むけたい。来月あたりサクッと買いたいぞっと。

昨日作ったTickerを使えばRSSを読み込んでニュースティッカーを作るのも簡単なはず。昼休みにでも作ってみようか。どれぐらいで出来るかチャレンジしてみよう。
と、思ったけど待ちきれないので作ってしまいました。自分でもびっくり、２０分ぐらいで出来ました。
asahi.comで速報ニュースをRSS配信していたのでそれをティッカーとして表示することにしました。
→ニュースティッカーを見る

↓これを買ってからJavascriptいじるのが楽しくてしかたない。オススメです。

ニュースティッカーが必要だったのでサクサクっと作成。実際に仕事で使ったバージョンはデータをXMLで持つようにしたり、しっかりコメントを入れたりしたんだけど、これはその前のテスト用に作ったバージョンです。面倒なのでそのまま載せちゃいます。あ、DOMの操作をするのにprototype.jsを使ってるのでダウンロードしておいてください（すごく便利だし）。
→Javascript本ランキング＠amazon.co.jp

Javascript部
var text = new Array();
var link = new Array();
var textIndex = 0;
text[0]="4/1：エイプリルフール。";
text[1]="3/31：どうぶつの森で遊ぼうキャンペーン";
link[0]="http://blog.livedoor.jp/shotokan";
link[1]="http://blog.livedoor.jp/dobutsu";
var now=0;
var id;
var id2;
var printMessage="";
function init(){
	printKaikaInfo();
}
function printKaikaInfo(){
	clearInterval(id2);
	id = setInterval(printText,50);
}
function printText(){
	var area = $("kaikaInfo");
	printMessage += text[textIndex].charAt(now++);
	area.innerHTML = printMessage;
	if(now > text[textIndex].length){
 		textIndex++;
		if(textIndex > text.length-1) textIndex=0;
		now=0;
		printMessage="";
		clearInterval(id);
		id2 = setInterval(printKaikaInfo, 3000);
	}
}
HTML部分
<div id="kaika"></div>

+++Javascriptおすすめ本+++
・Ajax逆引きクイックリファレンスWeb2.0対応for Windows & Macintosh
・入門 Ajax
・Ajaxイン・アクション