« Blog や Web サイトの内容に合わせた検索サービス | トップページ | ThinkPad X60 | X60s (B5ノート) リリース »

2006-01-05

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 の素人さん(僕も素人同然ですけど;;)にもオススメです!

  1. Behaviour.js をダウンロードしてくる。
  2. サーバー上の任意のディレクトリに behaviour.js をアップロードする。
  3. (X)HTML のヘッダー( <head>~</head> )中に、behavior.js へのリンクを埋め込む。
    (ex: <script type="text/javascript" src="javascripts/behaviour.js"></script> )
  4. CSS セレクタによる場所指定とイベントハンドラー付きの外部 js ファイルを作成し、アップロードする。
  5. 同様に (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 ソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<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 {
font-size: 0.9em;
}
strong { /* 英文の強調個所を大文字化する */
text-transform: uppercase;
}

/* 文書構造スタイル
--------------------------------------------- */
body {
margin: 0;
padding: 0;
text-align: center; /* IE 用センタリング処理 */
}
div#page {
margin: 2em auto; /* non IE ブラウザ用センタリング処理 */
text-align: left; /* IE 用センタリング処理の後始末 */
width: 20em;
}
/* タブ部分のスタイル
----------------------------------- */
div.tabs a {
font-family: Tahoma, sans-serif;
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 のようにすれば、個別のタブ
ごとにマウスオーバー効果を指定することもできる。*/
background-color: #000;
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 {
display: none;
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;}
/* :target 疑似属性(CSS3)による タブ切替効果の処理
--------------------------------------------- */
div.tab:target {
display: block;
}
:target div.tab {
display: block;
border-bottom: none;
}
:target div.tab + div.tab{
display: none;
}

-->
</style>

<!-- ====================================
ページタイトル
======================================= -->
<title>Tabs using :target pseudo-class in CSS 3 - 我的春秋</title>

</head>
<!-- ====================================
コンテンツ
======================================= -->
<body>
<div id="page">
<h1>Tabs using :target pseudo-class in CSS 3</h1>
<!-- タブ部分
――――――――――――――――――――――― -->
<div class="tabs">
<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
<a href="#tab4">Tab 4</a>
</div>
<!-- 各タブページ(要、論理構造の再検討)
――――――――――――――――――――――― -->
<div id="tab1" class="tab">
<p>このページは <strong>CSS だけで</strong>タブ UI を実現しています。</p>
<p>The tabs in this page are working <strong>only by CSS</strong>.</p>
</div>
<div id="tab2" class="tab">
<p>ページ推移もしていませんし、JavaScript も使ってません。実際、ローカルで試してみるといいでしょう。(^-^)</p>
<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>
<div id="tab3" class="tab">
<p>けれども残念ながら CSS の :target 疑似属性が実装されていない IE6 以前では動作しません。(- -;)</p>
<p>But, these tabs doesn't work in IE, since CSS 3 ("target" pseudo-class) is not implemented yet competitively. :-(</p>
</div>
<div id="tab4" class="tab">
<p>ちょっと残念ですね~。</p>
<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>
</div>
</div>
</body>
</html>
JavaScript ソース
http://my-chunqiu.cocolog-nifty.com/javascripts/close.js

|

« Blog や Web サイトの内容に合わせた検索サービス | トップページ | ThinkPad X60 | X60s (B5ノート) リリース »

[Web]Ajax・DHTML」カテゴリの記事

[Web]JavaScripts」カテゴリの記事

[Web]XHTML」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/242674

この記事へのトラックバック一覧です: JavaScript ソースが HTML から消える日:

» JavaScript ソースが HTML から消える日 [アキオのブログ]
我的春秋: JavaScript ソースが HTML から消える日なんと、このライブラリがあれば、イベントハンドラーも含めて JavaScript ソースが (X)HTML の body 内から、ほぼ完全に分離できてしまいます! behaviour.jsについてのエントリー。 面白そうなのであとで実験してみよ....... [続きを読む]

受信: 2006-06-10 13:42

» behaviour.js [アキオのブログ]
behaviour.jsを使ってみた。 html head script language="JavaScript" src="behaviour.js" /script script language="JavaScript" !-- var myrules = { '#example li' : function(el){ el.onclick = func...... [続きを読む]

受信: 2006-06-10 14:19

» behaviour.js リバースエンジニアリング その1 [hibomaのはてなダイアリー]
話題のbehaviour.jsのソースを見ていきます。 behaviour.jsの使い方から var myrules = { ’b.someclass’ : function(element){ element.onclick = function(){ alert(this.innerHTML); } }, ’#someid u’ : function(element){ element.onmouseover = function(){ this.inner... [続きを読む]

受信: 2006-06-10 16:45

» javascript [PukiWiki/TrackBack 0.2]
javascript/ウィンドウサイズの変更 javascript/ページをプリントする javascript/1つのフォームから2つのCGIにsubmitする javascript/checkboxのnameをhoge[]としたときのvalueの参照 javascript/debugオブジェクト javascript/getで送信したクエリを取得 java... [続きを読む]

受信: 2006-06-10 17:38

» JavaScriptソースが HTMLから消える?:我的春秋 [Ajaxの最新情報レポートBlog:Recently Ajax]
[続きを読む]

受信: 2006-06-13 19:23

» [AJAX/JavaScript] オドロキの Behaviour.js [Holy’s Play Ground @ hatena]
今日同僚から教えてもらったJavaScriptのライブラリなのですが、この Behaviour.js は凄い。 なんでも要素を css 記述で取得できてしまう・・・cssQueryを搭載しているらしい。 これを使えば getElementsByID などで頭を悩ませる必要がなくなりそう! しかも Mozila から IE... [続きを読む]

受信: 2006-12-05 22:40

« Blog や Web サイトの内容に合わせた検索サービス | トップページ | ThinkPad X60 | X60s (B5ノート) リリース »