Hatena::ブログ(Diary)

xmallocのプログラミングノート

2010年05月13日

Chroma-Hashを試してみる

入力したパスワードのカラーパターンを横に表示しておけばミスがなくなるんじゃね?『Chroma-Hash』が面白そうだったので試してみました。リンク先辿っていけば行き着きますが、githubJavaScriptのChroma-Hash jQuery extensionがありますので、これを使えば既存のHTMLフォームも簡単にChroma-Hashizeできそうです。

以下、とりあえず動かしてみたい俺向きの簡単な例です。githubからchroma-hash.jsダウンロードして、ファイルをダウンロードしたディレクトリと同じディレクトリに以下のhtmlを置きます。

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="chroma-hash.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("input:password").chromaHash({bars: 3});
      });
    </script>
  </head>
  <body>
    <input type="password">
  </body>
</html>

ブラウザから直接立ち上げて、パスワードフィールドに適当に入力するとChrome-Hashが表示されます。

f:id:xmalloc:20100513180158p:image

続けて入力していくとChrome-Hashが変わっていきます。

f:id:xmalloc:20100513180159p:image

これはなかなか面白いですねw

2010年02月25日

jQueryでHTMLから完全にJavaScriptを取り除く3パターン

jQueryを使ってHTMLから完全にJavaScriptを取り除く方法をまとめてみました。*1


HTMLからJavaScriptを取り除く理由

なぜHTMLから完全にスクリプトを取り除いた方が良いのかについては、ほぼ全世界的に合意が取れてると思いますので、個人的な意見は控えます。デザインとコードの分離がどーとか、そういう感じのことです。

簡単なウェブアプリでもHTMLJavaScriptをそのまま入れちゃうと、HTMLCSSJavaScriptサーバ側のコードが高度なカオスとして熟成され新たな小宇宙を産み出します。カオス小宇宙ペガサス流星拳jQueryで打ち破ろうというのが、今日のエントリの目的です。

なるべく分かりやすいようにということで、よくあるパターンを3つ並べてみました。


1.フォーム要素からイベントハンドラを除去

HTMLに最も多く埋め込まれているJavaScriptイベントハンドラじゃないでしょうか。こういうやつですね。

<head>
<script type="text/javascript">
function verifyForm(form) {
    if (form.name == '') {
	document.getElementById('nameError').innerHTML = '名前を入れてください。';
	return false;
    }
    return true;
}
</script>
</head>
<body>
<form id="nameForm" onsubmit="return verifyForm(this)">
  <input type="text" name="name" /> <span id="nameError"></span><br />
  <input type="submit" />
</form>
</body>

この例では、formがsubmitされたらspan#nameErrorにエラーメッセージをセットし、フォームの送信を中断しています。同じHTMLファイルに、scriptタグとformタグを書き込む形で例示しましたが、JavaScript部分を別ファイルにした場合でもformのonsubmitが残ります。このonsubmitを取り除こうということです。


まずHTMLをこのように変えます。jQueryGoogle AJAX Libraries APIを使っていますが、ローカルにダウンロードしたものでも構いません。

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
  <form id="nameForm">
    <input type="text" name="name" id="name" /><br />
    <input type="submit" />
  </form>
</body>

name="name"のinput要素にはid属性を付けておきます。jQueryは要素指定にCSSセレクタを使うので、選択的に参照したい要素にはすべてidかclassを付けておいた方がコーディングが楽です。ついでにspan#nameErrorも微妙に邪魔なので取り除いてます。

イベントハンドラはform.js初期化します。$(function)は$.ready()の短縮形です。HTMLレンダリング終了後にコールバック関数が呼ばれます。

$(function() {
    var error = $(document.createElement('span'));
    $('#name').after(error);
    $('#nameForm').submit(function() {
        if ($('#name').val() == '') {
            error.text('名前を入れてください。');
            return false;
        }
    });
});

これでだいぶ加藤浩次スッキリ!しました。この例ではonsubmitのみを扱いましたが、inputやselectのonchangeやonkeypress等も同じような変更でHTMLから取り除けます。


2.特定要素のイベントハンドラをすべてセットする

Google Analyticsを使ってる場合、<a>タグのonclickをすべてセットしたいという場合があります。Analyticsヘルプ 複数のドメインにまたがるサイトにトラッキング コードをインストールするにはどうすればよいですか?のような場合です。

Analyticsヘルプで紹介されているコードはこんな感じ(一部変更してます)。外部サイトへの遷移を_linkでトラッキングします。

<a href="https://www.example.com/?login=parameters"
   onclick="pageTracker._link(this.href); return false;">ログイン</a>
<a href="https://www.example.com/?logout=parameters"
   onclick="pageTracker._link(this.href); return false;">ログアウト</a> 

今度はこのonclickをjQueryを使って取り除きます。上のフォームの例との違いは、idではなくclass属性を使ってaタグのonclickをすべてセットする点です。


まずHTMLを以下のように書き換えます。

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="track.js"></script>
</head>
<body>
  <a href="https://www.example.com/?login=parameters" class="external">ログイン</a>
  <a href="https://www.example.com/?logout=parameters" class="external">ログアウト</a>
</body>

track.jsでは、jQueryを使ってonclickをセットします。

$(function() {
    $('a.external').click(function() {
        pageTracker._link(this.href);
        return false;
    });
});

これでだいぶテリー伊藤スッキリ!!しました。


3.document.writeの除去

DHTMLコンテンツを埋め込む場合、document.writeを使うのはよくあるかと思います。

例えばこんな感じです。日付を表示します。

<script type="text/javascript">
document.write(new Date());
</script>

単純にJavaScriptHTMLから取り除くのを目的にするなら、document.write部分を別ファイルにしてscriptタグのsrc属性を使って読み込めば良いだけですが、それじゃおもしろくないのでここでもjQueryを使って取り除きます。


まずHTMLを変更します。置き換え用のプレースフォルダのみにします。

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="replace.js"></script>
</head>
<body>
  <div id="replacement"></div>
</body>

replace.jsの中身はだいたい想像つくでしょうw

$(function() {
    $('#replacement').text(String(new Date()));
});

これでだいぶ葉山エレーヌスッキリ!!!しま・・・せんねーwwこの例の場合かえってコード長くなっちゃってます。まあnew Dateだけなんて今時ありえないので、その辺がもっと長ったらしいものを想像していただくと、すっきりして頂けるんじゃないでしょうか。


まとめ

ぶっちゃけ$()でHTMLを再初期化すればJavaScriptを取り除けるということをダラダラ説明してるだけだったりします。長文乙ですたw

*1:別にjQueryを使わなくてもできるんだけど使った方が簡単