JavaScript ソースが HTML から消える日
［2006-06-10 付記］このエントリーは、2006-01-05 時点のもので情報が古くなってます。現時点で把握している最新情報を「続 JavaScript ソースが HTML から消える日」にアップしましたので、あわせてご参照ください。
Behaviour.js ― JavaScript ソースを (X)HTML から完全分離できるライブラリ
昨日、職場の同僚の人がたまたま見つけた JavaScript ライブラリを教えていただたんですけど、これがもうびっくり！なんと、このライブラリがあれば、イベントハンドラーも含めて JavaScript ソースが (X)HTML の body 内から、ほぼ完全に分離できてしまいます！ しかも、HTML 内で JavaScript 関数を適用する場所は、なんと JavaScript ソース内に CSS セレクタを書き込むことで指定！あまり日本では取り上げられていないようですが、設置も簡単だし、何より HTML ソースが劇的にすっきりするので、少なくとも僕はもうコイツを手放せなくなりそうです！
はっきり言います！この behaviour.js という JavaScript ライブラリと CSS セレクタで、html/body内の属性は class や id も含めて 90% 消せるようになります！（ IE を無視できればですけど..。(^ ^;) 別に無視しなくても、70～80% は消せるかと思います。）
HTML ソースがすっきり！
教えてもらったライブラリの名前は Behaviour.js。
JavaScript の関数や振る舞い（メソッド）などは外部ファイル化することができるものの、HTML ソースの方で関数を実行する対象となる id をつけた上で、onClick とか onMouseOver といったイベントハンドラーによって、外部 js ファイルにある関数を呼び出すのが普通ですよね。
ところが、この Behaviour.js を使うと、そういうイベントハンドラーや、場合によっては id すらも HTML 上にまったく記述することなく、任意の場所に対して任意の関数を呼び出せるようになります。
サンプル例題
ここをクリックすると、ブロック要素ごと消えます！
イベントハンドラーはどこに？！
上のサンプルのような動作を JavaScript で実行させたい時、従来の方法は二つ。ひとつはイベントハンドラーと関数名を HTML 中に埋め込んで、関数の具体的な動作は外部 js ファイルに組み込む方法。もうひとつはイベントハンドラーと一緒にメソッドまで HTML 中に書き込んでしまう方法。
でも behaviour.js を使えば、どちらも完全に外部 js ファイルに組み込むようにできますので、HTML ソースがとってもすっきりします！
(X)HTML ソース比較
| 従来ソース（適用前） | behaviour.js 適用時 |
|---|---|
<div onclick="this.parentNode.removeChild(this)">
<p>ここをクリックすると、ブロック要素ごと消えます！</p>
</div>
|
<div>
<p>ここをクリックすると、ブロック要素ごと消えます！</p>
</div>
|
関数を実行する場所はどうやって指定するの？
Behaviour.js では、関数を実行する場所は CSS セレクタで指定します。これには感動しました！外部 js ファイル内で CSS セレクタを使うことで関数の適用場所を指定できるんですよ？道理で HTML ソースが綺麗さっぱりするわけです。
| behaviour.js 適用時のJavaScript ソース |
|---|
var Sakujo = {
'div p' : function(el){
};
el.onclick = function(){
}this.parentNode.removeChild(this);
} |
少なくとも僕は、もはやこのライブラリなしで JavaScript を使うことはないでしょうね。それくらい、インパクトが大きかったです。なんで日本でこのライブラリがあまり話題に上ってないのか不思議なくらいです。
設置方法は？
これまたいたって簡単です。JavaScript の素人さん（僕も素人同然ですけど；；）にもオススメです！
- Behaviour.js をダウンロードしてくる。
- サーバー上の任意のディレクトリに behaviour.js をアップロードする。
- (X)HTML のヘッダー（ <head>～</head> ）中に、behavior.js へのリンクを埋め込む。
（ex: <script type="text/javascript" src="javascripts/behaviour.js"></script> ） - CSS セレクタによる場所指定とイベントハンドラー付きの外部 js ファイルを作成し、アップロードする。
- 同様に (X)HTML のヘッダー内で外部ファイルへのパスを通す。
これだけです。サーバー側の要求要件は一切ありません。JavaScript 単体で動作します。
サンプルある？
behaviour.js の配布サイトにも幾つかサンプルがありますけど、僕も以前 作ったページをベースにちょっとだけ作ってみました。ちなみにこのサンプル制作の所要時間はたった 5分！(笑) いかに設置がラクで簡単かが分かろうってもんです。
タブをクリックすると、ページの内容が切り替わるのは以前紹介した CSS で行ってます（IE、Opera 未対応）。で、切り替えたページの中身をマウスクリックすると、ページの内容（正確には tab class を持った div 要素を消去します。
http://my-chunqiu.cocolog-nifty.com/html/test.htmlソースは以下の通り。書き加えた部分を一応、強調表示しておきます。ただ、このままだと CSS 3 の :target 擬似クラスのせいで IE など一部のブラウザで動作確認ができないので、後で IE でも動くことが分かるようなサンプルに差し替えておきます。（手抜きですみません。あまりに簡単だったもんで..。）
XHTML ソース
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="http://my-chunqiu.cocolog-nifty.com/javascripts/behaviour.js"></script>
<script type="text/javascript" src="http://my-chunqiu.cocolog-nifty.com/javascripts/close.js"></script>
<style type="text/css">
<!--
/* 汎用要素スタイル
--------------------------------------------- */
h2 {
strong { /* 英文の強調個所を大文字化する */
/* 文書構造スタイル
--------------------------------------------- */
body {
padding: 0;
text-align: center; /* IE 用センタリング処理 */
text-align: left; /* IE 用センタリング処理の後始末 */
width: 20em;
----------------------------------- */
div.tabs a {
font-size: 0.8em;
color: #000;
border: 1px solid #000;
margin-right: 2px;
padding: 0px 2px;
text-decoration: none;
div.tabs a:hover { /* マウスオーバーした時のタブの色 */
/* セレクタ部分を a[href="#tab1"]:hover のようにすれば、個別のタブ
ごとにマウスオーバー効果を指定することもできる。*/
color: #fff;
/* 各タブの色を指定 */
a[href="#tab1"] {background-color: #9cc;}
a[href="#tab2"] {background-color: #9c9;}
a[href="#tab3"] {background-color: #cc9;}
a[href="#tab4"] {background-color: #c99;}
/* 各タブページのスタイル
----------------------------------- */
div.tab {
height: 250px;
border: 1px solid black;
text-align: left;
padding: 1em;
#tab1 {background-color: #9cc;}
#tab2 {background-color: #9c9;}
#tab3 {background-color: #cc9;}
#tab4 {background-color: #c99;}
--------------------------------------------- */
div.tab:target {
:target div.tab {
border-bottom: none;
:target div.tab + div.tab{
-->
</style>
<!-- ====================================
<title>Tabs using :target pseudo-class in CSS 3 - 我的春秋</title>
</head>
<!-- ====================================
<body>
<div id="page">
<!-- タブ部分
――――――――――――――――――――――― -->
<div class="tabs">
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
<a href="#tab4">Tab 4</a>
<!-- 各タブページ（要、論理構造の再検討）
――――――――――――――――――――――― -->
<div id="tab1" class="tab">
<p>The tabs in this page are working <strong>only by CSS</strong>.</p>
<div id="tab2" class="tab">
<p>There ain't no pages to jump, nor JavaScripts moving in background ! Save it, and try it in your local machine. (Of course, it works in offline mode too.) :-)</p>
<div id="tab3" class="tab">
<p>But, these tabs doesn't work in IE, since CSS 3 ("target" pseudo-class) is not implemented yet competitively. :-(</p>
<div id="tab4" class="tab">
<p>It's quite a shame, isn't it?</p>
<h2>Reference</h2>
<p><a href="http://www.w3.org/Style/Examples/007/target.html">The ':target' pseudo-class - Bert Bos @ W3C</a></p>
</body>
</html>
JavaScript ソース
http://my-chunqiu.cocolog-nifty.com/javascripts/close.js
| 固定リンク
「［Web］Ajax・DHTML」カテゴリの記事
- MochiKit: 軽量 JavaScript ライブラリ(2006.05.24)
- scriptaculous.js 関連 2題(2006.05.23)
- Ajax in Action 邦訳本！(2006.05.18)
- Spry - Adobe の Ajax フレームワーク(2006.05.15)
- niftycube.js - 角丸効果 JavaScript ライブラリ(2006.05.14)
「［Web］XHTML」カテゴリの記事
- HTML の見出しをめぐる議論(2007.07.11)
- Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか?(2007.06.03)
- 論理構造を文脈に読み換えながら class 名を考える(2007.05.30)
- 定義リストの違和感（続）(2007.05.28)
- 定義リストの違和感(2007.05.26)
「［Web］JavaScripts」カテゴリの記事
- sIFR でアンチエイリアス フォントの埋め込み(2006.12.06)
- 振る舞い分離 JavaScript ライブラリ一覧（途中）(2006.06.11)
- 続 JavaScript ソースが HTML から消える日(2006.06.10)
- niftycube.js - 角丸効果 JavaScript ライブラリ(2006.05.14)
- 邦人による Ajax 関連書(2006.05.07)
この記事へのコメントは終了しました。
コメント