画面遷移を伴わずAjax通信を多用するような実装では、Ajax通信に必要なデータやパラメータがHTML文書に影響を与えないよう、この独自データ属性を利用することになります。

この時、データやパラメータ毎に属性を設けるのは大変手間がかかるので、javascriptのオブジェクトを一つの独自データ属性にぶっ込んで、独自データ属性とjavascriptとの間のデータ交換を簡単にしてしまおう、というのが今回の趣旨です。

ビフォー

<span data-id="00" data-date="2011/06/02" data-hoge="foobar">これは面倒そう…</span>

アフター

<span data-obj="id=00&date=2011/06/02&hoge=foobar">スッキリすんじゃね？</span>

既に勘の良い方は、上記例をご覧になっただけでお判りですね。
そうです、javascriptオブジェクトをクエリ文字列としてシリアライズしてしまうわけです。
JSON形式のデータをぶち込んでも良かったのですが、クエリ文字列の方が、
データを変換することなくシームレスにGET/POSTリクエストパラメータへと利用できます。

予め必要なものは、シリアライズ／デシリアライズするための２つの関数。

function query2obj(s){
	var dec = decodeURIComponent;
	var par = new Array, item;
	if (typeof(s) == 'undefined') return par;
	if (s.indexOf('?',0)>-1) str = str.split('?')[1];
	s = s.split('&');
	for (var i=0; s.length>i; i++){
		item = s[i].split('=');
		if (item[0] !=''){
			par[item[0]] = typeof(item[1]) == 'undefined' ? true : dec(item[1]);
		}
	}
	return (par);
}

function obj2query(obj){
	var enc = encodeURIComponent;
	var list=[];
	for (var key in obj){
		var k = enc(key);
		var v = enc(obj[key]);
		list[list.length] = k+'='+v;
	}
	var query = list.join('&');
	return(query);
}

これだけだと面白くないので、デモとして、要素間でデータをコピー＆ペーストするデモを作ってみました。

コピペデモ

ソースが汚いやら、&を文字参照に変換してないやら、オブジェクト「丸ごと」じゃねぇやらのご指摘・ご批判は、誠におっしゃるとおりで返す言葉もございません。

Yet Another Codebook

お勉強して使った技術周り

• HTML5 validated
• jQuery Mobile
• cookieに代わりのsessionStorage

もう少し時間を掛けてcanvas描画まで行いたかったけど、取りあえずIS03で動きそうなので、汚いソースや冗長なロジックに目をつむり、紅葉色づく清水の舞台から飛び降りるつもりで晒してみる。
せっかくなので、ギターだけでなく、ベースとかウクレレとか、調子に乗って7弦ギターまで選択できるようにしたり、楽器選択時にチューニングも選べるようにしてみた。

sessionStorageのセキュリティ設定はcookieのセキュリティ設定に準じるそうなので、cookieは使っていないが「dev.ohbatch.net」のcookieを許可いただかないと使えないのでご注意ください。
2010/11/28 17:58 追記：さらに大事な注意点を忘れてた。HTML5＋sessionStorageを使っているのでIEでは見れませんし、確認すらしてません

構成音を全部表示させてるので、押さえ方や音の好みに合わせてバリエーションを探すことができるのだが、あんま楽器弾きとしての深いこだわりはない。

いいインターフェイスが浮かばなくて断念したのだが、コード音階を配列で持たせてるだけなので、コードばかりでなくスケールでも表示は可能。

次はcanvasも組み込んでもう少し見やすくしたいのと、さすがに動作が重い。
YetAnoterChordsBook

まず、仮想フレームバッファから画面キャプチャを取得するための基本的な準備等は以下を参考にさせていただいた。

• Webサイトのスクリーンショットを撮るサービスの作り方 – [Z]ZAPAブロ～グ2.0
• Pink.cc Online – webnail – webサイトをサムネイル化
• XvfbとFirefoxとImageMagickでWebページのサムネイルを自動生成する方法 – pomo123の日記

上記と幾つか重複する部分があるが、自動で全画面起動するための設定を組み込む。

• 実際に　firefox -P　でブラウザを立ち上げて、ユーザプロファイル管理画面を開き、画面キャプチャ専用のプロファイルを作成する。
• 作成したプロファイルでブラウザを立ち上げ、Firefoxアドオン「Full Fullscreen（https://addons.mozilla.org/ja/firefox/addon/1568/）」をインストールして、アドオン設定画面にて「Startup Settings – Fullscreen on startup」にチェックを入れる。
• 「ナビゲーションツールバー」「ブックマークツールバー」「ステータスバー」を非表示にする。
• さらに、該当プロファイルのユーザーcss（~/.mozilla/firefox/[profile name]/chrome/userContent.css）に以下を追加し、縦スクロールバーを強制的に非表示にする。
  html, body { overflow: -moz-scrollbars-none; }

上記方法は、実際にGUI上で操作を行った（＝コマンドラインからの設定方法がわからない）ため、仮想フレームバッファのみで動作させているサーバーでは適用できない。
しかし、もしGUIからFirefoxのプロファイル変更を操作できるなら、取得した画像をトリミングすることなく、Xvfbの起動サイズで簡単にそのまま全画面表示できるので便利だ。

FirefoxにおけるユーザーCSS設定は以下の記事が分かりやすい。
userchrome.css – Mozilla Firefox まとめサイト

「PHPでベイジアンフィルタ （棚からパルチャギ）」で紹介されて「PHP Naive Bayesian Filter（XHTML.net）」を参考に、というかライブラリもブログの記事もほとんどそのまま利用させていただいた。解説どおりにMySQLにデータベースを作成し、「Yahoo!日本語形態素解析」を噛ませる。上記サイトでは、トークンの切り出しメソッドをオーバーライドされていたが、それすらも面倒だったのでそのまま直接メソッドの内容を書き換えるが、ほぼそのまま利用させていただいたので、ソースも省略、詰まったところやさらに手を加えたところを中心に記すことにする。

ありがたいことに、思ったよりスムースに早い段階で動作が確認できたのだが、早速文書を大量に流し込んでフィルタを実行してみると、なぜかものの見事に、全ての記事が「スパム」に判定される。どんな内容でも「spamである確率1、hamである確率0」ってことはないだろうと、メソッド「categorize」の最深ブロックにデバッグ出力を組み込んでみる。

echo $category.’ ‘.$token.’ ‘.$word['count'].’ ‘.$proba.’ ‘.$scores[$category].”\n”;

これで、判定しようしている文書に出現した単語を元にスパム／ハムである確率が変化していく様子がみてとれる。追いかけていくと、どうもアルゴリズムの特性上、事前学習させる「スパム」「ハム」それぞれの文書量（単語量）の偏りが、フィルタリングの精度に大きく影響してしまうらしい。今回の場合、「ハムとして学習された文書量がスパムのそれと比べ多過ぎ」といったところのようだ。
学習した結果の単語量は、テーブル「nb_categories」のフィールド「word_count」にそれぞれ記録されるので、どのカテゴリ（今回はスパム・ハムの２カテゴリ）においても限りなく同等の単語量となるよう学習が必要のようだ。

もうひとつ、同様にメソッド「categorize」の最後にリスケール（rescale）というカテゴリごとの適合度を正規化する関数を通しているようなのだが、動かしてみるとどうもここで丸め誤差が大きい（ほぼ 0 or 1 の二値化に近い数値が返る）。なので、いっそのこと取っ払って出力された適合度に応じた動きはアプリケーションに任せる方針とする。

//return $this->_rescale($scores); //やめ
return $scores; //イキ

最終的にはアプリケーション側で以下のようにハム・スパムの適合度の比を求め、あとは平方根をかけまくって簡易リスケールしてる。結果が１未満なら概ねスパムと判断できそうだ。（ただし適合度の比で判定ができるのは、カテゴリが２通りの場合に限られる）

$scores['ham']/$scores['spam']

• オメデッタ
• アリガッタ

twitter上で誰かから誰かへの「おめでとう」と「ありがとう」を検索するだけのものなのだが、どうせ実用性は全く意識してないので、せっかくならポジティブで、見てるだけでなんかハッピーな気持ちになれるものがいいなぁ、と。

せっかくなら、このみんなのポジティブなメッセージかプロフィールアイコンを使って、何かが「作り上げられていく」ようなものをFLASHで見せるとか、
集めた情報をさらに「発信」して、感謝やお祝いの気持ちを増幅いくようなものとか、楽しそうだな。

ほとんど何もしてないけど一応工夫したところなどを。

• 本文中のに出現する @(ユーザー) の記述が１つだけのものに限定して、「誰かから誰か(1:1)」のメッセージに絞る。（多重RTされたものを排除）
• 質の高いおめでとう／ありがとう（？）に限定するため、「遅くなりましたが．．．」というコンテキストを排除するため「遅」の字が入ったメッセージは諦める。
• おめでとう版とありがとう版をセットで見せて、より「ほっこり感（何それ）」を求める

眺めてたら「教えてくれてありがとう」的な小さなものから、結婚・出産などの大きな「おめでとう」まで垣間見れて、（誰だか知らないんだけど）なんだか微笑ましい。気が向いたらまた手を加えてみようかな。

結果的に回答を終えるまでに、「ワタシはきっとHTMLコーダーじゃない」という結論に達し、そのまま100まで慣性運動で回答するという事態となった。

1年齢は？
30手前

2パソコン歴は？
17年

3コーダー歴はどれくらいですか？
4,5年

4初めてwebを作ったのはいつですか？
最初にHTMLに触れたのは10年くらい前

5コーダーになろうと思ったきっかけは？
仕事で必要になったから。けどコーダーじゃない気がする。

6コーディングは誰に／どこで習いましたか？
印象深いのは、とほほのWWW入門 かな。

7web業界以外の友達・家族とコーディングの話をしますか？
話す理由が分からない。

8ご両親はインターネットユーザーですか？
いいえ。
あ、けど母親はちょっと使ってみてるらしい。

9視力はいくつくらい？メガネ・コンタクトどちらですか？
両目とも1.5、伊達眼鏡はタマにかけます。

10本はAmazonで買いますか？
書店で買うのが大好きです。

11ネットショッピングをしますか？主に買うものは何ですか？
iTunesでアルバムCDを買うぐらいかな。

12携帯サイトで買い物をしたことがありますか？
着うたを含めていいなら。

13お酒は強いですか？
周りから強い方だと言われます。

14休日の過ごし方を教えて下さい。
こうしてPC触ってるかな、

15今、欲しいものは何ですか？
正直言うと「将来への安心」かな、うは。

16平均睡眠時間を教えて下さい。
5～8時間、あ、これじゃ平均になってないね。

17平日の起床時間は何時ですか？
7～8時

18なにかスポーツをしていますか？
最近になって、ようやくスノボとかゴルフとか自転車とか。

19パソコンと関係ない趣味がありますか？
カメラとか自転車とかギターとか

20コーディングに役立つ資格、パソコン関係の資格を持ってますか？
役立ちはしないけど、広くコンピュータをよく知るという意味では、情報処理第二種。てかコーディングに役立つ資格があるの？

21昼と夜、どちらの方が仕事がはかどりますか？
昼と言いたいけど、やっぱり夜の方がはかどる。

22ブラインドタッチは教本通り10本の指を使いますか？
全部使うけど、特定のキーは小指を薬指や中指で代用する場合が多い。

23眠い時の対処法はありますか？
寝る。おー「対処」じゃない。

24息抜きについ見てしまうサイトはなんですか？
twitterかな

25他に息抜きにしていることがあったら教えて下さい。
てか常時息抜きと言えるでしょう。タバコかな。

26仕事上で得意なことはありますか？それは何ですか？
得意なのは、やっぱりプログラミングかも。
けどハードウェアも見るし、ネットワークもやるし、サーバーも立てたりもやる。

27仕事中にBGMは聞けますか？能率が上がるのはどんな音楽ですか？
職場ではラジオがかかってる。
自宅だと Last.fm。 聞き慣れた音楽なら何かけても邪魔にはならない。

28作業パソコンはWin?Mac?
Win

29作業パソコンはデスクトップ？ノート？
会社はデスクトップ。

30作業パソコンのマウスは標準マウスですか？
職場ではマウス。

31マウスパッドは使っていますか？
職場では使ってません。

32作業パソコンにAdobe製品は何が入っていますか？
職場は DW、FWのMX。
自宅では、CS WebPremium。

33作業パソコンはモニタは何インチですか？
自宅は12.1インチ+19インチワイド。
職場は17インチ。

34自宅にパソコン持ってますか？いくつありますか？
ノート１、Linuxサーバー１。

35自宅に作業環境はある？
小学生ん時の学習机を未だに使ってる。
けど最近寒いのでリビングで作業してる。

36会社と自宅、作業はどちらがはかどりますか？
作業環境じゃなくて、作業内容による。

37自宅パソコンは家族と共用ですか？
共用できるようにしてるけど、誰も使わない。
娘がネットで児童向けコンテンツを見たいとせがんでくるぐらい。

38自宅パソコンはWin?Mac?
おーここまで来てわかった、、
今までの「作業パソコン」とは会社パソコンについてだったのか。
自宅もWindows。

39自宅パソコンのメーカーは何ですか？
ノートはLenovo
サーバー用は自作

40自宅パソコンはデスクトップ？ノート？
ノート

41打ち合わせのメモは手描きとテキストどちらがいいですか？
場合によるな。
説明ん時に手書きのチャートとかよく描く。

42スケジュール管理は何でしてますか？（手帳・アプリケーション・webツール・モバイルなど）
仕事は会社のMSExchange（←けどこれ嫌い）
あとはA5手帳。

43メーラーは何を使ってますか？
職場はMSOutlook、個人用はGmail。

44RSSリーダーは何を使ってますか？
Firefoxのライブブックマーク

45好きなポータルサイトはどこですか？
ポータルサイトを足がかりにするサイトはないな。

46ブックマークは何で管理していますか？
delicious。
けど自分でサブスクライバ作ってからブックマークする必要性を感じなくなってきた。

47不得意だけど使わねばならない技術はありますか？
ウェブやってて不得意を感じるのはperlとモバイルサイト。

48web系の雑誌を購読していますか？
定期購読はしてない

49webの参考書は何冊くらい持っていますか？
何冊あるやろ、コーディングの本なら数冊かな、webプログラム含めたらもう。

50お薦めの参考書があったら教えて下さい。
コーダーなら「Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト」

51参考にしているおすすめサイトがあったら教えて下さい。

http://dev.ohbatch.net/wwd/index1.html

52コーディングに使ってる、便利なツールを教えてください。
GNU Wget Win32版、xyzzy、Devas

53コードにコメントはつけてますか？
HTMLにはまずつけない＞＜
CSSには大括りの見出し程度

54制作過程で、どの作業が一番好きですか？(コーディング、画像作成、検証、打ち合わせ)？
コーディングと画像作成、たまにプログラムとかを交互にやると気分転換になって良い。

55画像切り出しに使うソフトはなんですか？
Fireworks

56webデザインに使うソフトはなんですか？
Fireworks

57検証対象ブラウザは何個ありますか？
基本FirefoxとIETester。

58一から新規制作とリニューアル、どちらが好きですか？
コンテンツが揃っていて思うようにデザインできるから、
「一からリニューアル」が一番いい。

59定期運用と新規制作、どちらが好きですか？
定期運用はキラい

60テーブルコーディング業務はありますか？
動的生成ページならTABLEの方が楽なこと多いね。
さすがにBODY全体をTABLEで括ることは最近もうないな。

61新規制作の割合はどれくらいですか？
コーディングやってる時間がそもそも少ないかも。
コーディング時間だけを分母にすれば、新規90%。

62iPhoneサイトのコーディングをしたことはありますか？
ないよ。

63よく使うJavaScriptがあったら教えて下さい。
jQuery　あたらしいバージョン早く使ってみたい。

64携帯サイトのコーディング業務をしていますか？
やってる、けどニガテ

65FLASHはどのくらいできますか？
どのくらいもできません。
ASは勉強してみたいけど、あーゆーイベントドリブンなのは苦手。

66いま興味がある技術はありますか？
最近またプログラム熱が高い。

67自分の書いたコードは美しい？
美しいかどうか別にして、プラグラマ上がりらしいコードだと思う

68ソーステンプレートを作っていますか？
ソーステンプレートって何？
テンプレートと呼ばれるものはだいたい使ったり準備したりしてる。
あーゆー「共通」と「個別」を分離するアーキテクチャは大好き。

69単語登録にタグを登録していますか？
いいえ。texterでやってみたいんだけど、タグ変換のトリガーにするキーをどれにしようか悩んでる。

70HTML5、早く実務で使いたい？
使うメリットが実感としてないのでまだいい。

71CSS3、早く実務で使いたい？
使うメリットが実感としてないのでまだいい。

72コーディングで伸ばしたい技術は？
モバイル向け、かな

73コーディング以外で伸ばしたい技術はありますか？
技術？　強いていうと仕事を前に進める技術。

74職場にコーダー専門職は何人いますか？兼務は何人ですか？
専門はいないよ
兼務なら私以外にお二人がお勉強中。

75職場のコーダー男女比はどのくらい？
そもそも私は「コーダー」なのか疑問が沸いてきた。

76勤務時間は何時から何時までですか？
9～18時

77通勤時間はどのくらいですか？
15分

78月の残業時間は最高何時間でしたか？
今はまずない。SEん時はどれくらいだったかな。

79現在の仕事環境で良いところはどんなところですか？
大きなトラックが前の道を通るとオフィスが揺れる。
あ、「良いところ」でしたか、そりゃいろいろともう。

80デザイナなど他の仕事とコーディングを兼務してますか？
なんでもやります。

81職場は服装自由ですか？何か規則はありますか？
原則自由です。

82休日出社や徹夜作業はありますか？
ないです。

83プライベートでサイト／ブログを持ってますか？
持ってます。

84プライベートでドメインを持っている。
持ってます。

85プライベートでサーバーを持っている。借りている。
自宅に置いてます。

86CSS Niteには何回行きましたか？
行ってません。

87地方のCSS Nite行ったことありますか？
行ったことありません。

88尊敬するwebクリエイターがいたら教えて下さい。
自分の作業範囲を縛らない人で仕事できる人を尊敬します。

89旅行に行く時パソコンを持っていきますか？持っていきたいですか？
「一人の時間」がある旅行なら持って行きたいです。

90好奇心を満たす面白い仕事を無償でやったことがありますか？どんな仕事でしたか？
無償なものは「仕事」だと思わないことにしてる、それは趣味か勉強。
仕事だと思った瞬間に無償でもなんだかモチベーション下がる。。

91ディレクターなどキャリアチェンジを考えてますか？一生コーダーを貫きますか？
ごめん、今もたぶん「コーダー」ではないと思うんだワタシ。

92特定のパートナー（彼女・彼氏・夫・妻）がいますか？相手は同業者ですか？
妻がいます。業種は全くの正反対。

93パートナーは同業者がいい？別の職種がいい？
正反対だと、価値観が合わなくて面白いよ（？）。

94コーダーをやっててよかったなあと思うときは？
コーディングは楽しい。プログラムと違って、覚えることが少なめで、何より自分が作った「結果」が見られるまでの時間が早い。けど専門も「コーダー」とか「マークアッパ」と呼ばれるようにはなりたくないな。

95何年後／何歳までコーダーをやるつもりですか？
コーダーではないだろうけど、コーディングはずっとやるよ。

96次の締め切りはいつですか？
いつかな。

97コーダー以外だったらどんな職に就きたいですか？
あ、パソコン教室の先生とかもいいかも。

98よいコーダーの条件を３つあげてください。
お客さんの運用や、そこから今後起こりうる変更が想像でき、
それをコードの柔軟性として落とし込めること。
3つになってないな。

9910年後、あなたは何をしてると思いますか？
フリーランスを経由して会社起こして社長になっていたい。

100コーダーとしての自分を100点満点で評価してください。
30点程度でしょうか。

Set objFs = CreateObject("Scripting.FileSystemObject")
inpath=InputBox("", "FileList", "C:\")
outpath=InputBox("", "FileList", "C:\filelist.txt")
If inpath<>"" And outpath<>"" Then
Set objText = objFs.CreateTextFile(outpath)
cnt = count(inpath)
objText.Close
Msgbox("完了しました")
End If
Function count(directory)
Set objFS = CreateObject("Scripting.FileSystemObject")
Set objFolder = objFS.GetFolder(directory)
For Each objFile In objFolder.Files
objText.Write(objFile.ParentFolder & _
vbTab & objFile.Name & vbTab & _
objFile.DateLastModified & vbCRLF)
NEXT
For Each objFC In objFolder.SubFolders
cnt = cnt & count(objFC)
NEXT
count = cnt
End Function