独自データ属性(HTML5:data-*)に、Javascriptのオブジェクトを丸ごとぶっ込む

HTML5
HTML5では、全ての要素で使用できるグローバル属性として、独自データ属性(data-*)を使用することができます。
本来、HTMLは文書構造を定義するためのマークアップ言語ですので、文書に含まれないプログラムで利用するための「データ」というのは考慮されていませんでした。

画面遷移を伴わず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リクエストパラメータへと利用できます。

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

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

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

コピペデモ

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

Posted in 未分類 | コメントは受け付けていません。

HTML5でギターコードブックを作ってみた。

Yet Another Codebook

Yet Another Codebook

IS03を購入した記念に、ギターのコードブックをAndroidでも見れるよう、HTML5で作ってみた(YetAnoterChordsBook)。
コードブックとして使うにはまだまだ見にくいばかりだが、あくまでHTML5周りの習作としてご容赦いただければ。

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

  • 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

Posted in 未分類 | 1 Comment

ウェブサイトのスクリーンショットを取得するサービスを作る時に「全画面できれいに」取得するためのプロファイルについて

画面キャプチャサンプルXvfb(仮想フレームバッファ)からFirefoxを立ち上げて画面キャプチャを取得する際、ブラウザの余分な部分を取得しないためのカスタマイズ。

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

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

  • 実際に 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 まとめサイト

Posted in 未分類 | コメントは受け付けていません。