HTTPでアクセスしてチェックしたいケースとは

Webページを制作している時、多くの場合はそのままブラウザで開けば動作チェックが出来ますが、 サーバーを通してHTTPでアクセスしないと正常に動作しないケースもあります。

つまり、「file:～」ではなく、「http:～」でアクセスしたい。例えば、

• ChromeからAjaxのテストをしたい
• 各種ウィジェットのスクリプトの表示をチェックしたい

Chromeのケースは起動オプション（”–allow-file-access-from-files”）で解決できますし、 ウィジェットもスクリプトの中身を少しいじれば動くことが多いですが、 いずれもWebサーバーを通せば難なく動作するわけで、それがすぐに出来るのならばその方がシンプルではないかな、と思うわけです。

ではどうしようか

既にXAMPP/MAMPPや仮想マシン等でサーバ環境がある場合は良いのですが、 バーチャルホスト等の諸設定をこなすのが面倒くさかったり、とにかくささっと確認したいような場合は、 簡易的なサーバを利用してのチェックがお勧めです。

サッと起動して、サッ確認し、終わったらサッと終了する。

ここでは、3つの方法を提案してみます。

1. SublimeServerでチェックする
2. PHP5.4+のビルトインサーバーでチェックする
3. ローカルプロキシでチェックする

SublimeServer でチェックする

もし貴方がSublime Text 2を使って制作をしているのならば、これを使わない手はないでしょう。 Sublime Serverは、Sublime Text 2で動作する簡易Webサーバープラグインです。

SublimeServer

learning/SublimeServer

Allow you run a HTTP Server in SublimeText 2, and serves all the open project folders

メリットは、作業環境からすぐに実行できる点ですね。

インストール

1. 「Sublime Package Control」をインストール
2. コマンドパレットから 「Install Package」>「SublimeServer」 と打ち込む

※プラグインの導入法については以前書いた記事などをご参考に

使い方

1. 「Tools」>「SublimeServer」>「Start SublimeServer」で起動
2. 確認したいHTMLファイルを開いて、右クリックし、「View This File in Browser」

これで、デフォルトのブラウザで目的のファイルが開かれます。 URLは以下のようになります。プロジェクトがルートディレクトリのような扱いになっていますね。

http://localhost:8080/[folder name]/index.html

ポート番号の「8080」は、「Tools」>「SublimeServer」>「Settings」 で変更できます。

PHP5.4+のビルトインサーバーでチェックする

マシンにPHP5.4以降がインストールされているのあらば、 PHPにビルトインされている簡易Webサーバーが利用できます。

PHP: ビルトインウェブサーバー – Manual

メリットはPHPの動作チェックが出来る点ですが、 簡易的な物なのでrewrite等は動かず、そこらへんに依存するFW等の動作は難しいでしょう。 そういう大掛かりな物は、きちんと仮想環境を構築してテストしましょう。

使い方

※PHP5.4以降が導入済みで、パスが通っている前提で話を進めます。

1. ターミナル（あるいはコマンドプロンプト）を開く
2. 
   

   目的のファイルがあるディレクトリまで移動して、以下のコマンドを実行する

   
   

   php -S localhost:8080

   
   
3. 
   

   ブラウザを開いてアドレスバーにURLを入力する

   
   

   http://localhost:8080/index.html

   
   

実行したディレクトリがルートディレクトリの扱いになります。

ローカルプロキシでマッピングする

これは前述した2つの方法と違い、ローカルでWebサーバーを起動するのではなく、 ローカルプロキシを利用して、或るドメインへのアクセスをローカルのファイルにマッピングする方法です。

…と言ってもピンと来ないですね。

例えば、「http://example.com/index.html」というファイルへブラウザでアクセスするとして、 その「index.html」の内容を、ローカルにあるファイルに差し替える事が出来ます。 そうすることで、あたかもインターネット上にそのファイルがあるかのように振る舞ってくれるわけですね。

Charles

ここでは、ローカルプロキシツールのCharlesを使ってみます。 有料ではありますがクロスプラットフォームで開発されていて、Windows/Mac/Linux版が用意されています。

Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy

使い方

1. 「Tools」>「Map To Local」で設定ダイアログを開きます
2. 「Add」で新しくマッピングを作成します
3. 
   

   下記のような要領で入力して「OK」

   
   

   

   
   
4. 
   

   設定したURLにアクセスします

   
   

   http://local.test/index.html

   
   

ドメインは、名前解決が出来る必要があります。 プロジェクトに使用する予定のドメインを使うか、適当な「local.test」などの名前をあてがってhostsファイルに127.0.0.1などで書き込んでおくか、 あるいはexample.comやlocalhostを利用するなどしましょう。

まとめ

これらの方法は、DirectoryIndexが指定できなかったりパフォーマンスが悪かったりする為、あくまでも簡易的なチェック向けです。 が、それで十分な場合は多いに制作の手助けになってくれる事でしょう。

特にローカルプロキシは、こういったケースに因らず、様々なシーンで開発効率をあげてくれるので、 （むしろそちらの方がメインですね） ぜひとも導入しておくべきだと思います。

ラジオボタンでグラフィカルなトグルボタン

「ラジオボタンがすでにグラフィカルでは？」という細かいつっこみは置いといて頂き、 本稿ではより自由度高く外見をカスタマイズする方法を記していきます。

ラジオボタンでなくともトグルボタンはJavaScriptで作れますが、 択一で選択する仕組みをわざわざ自前で実装するよりも、 その為に作られた物をその為に使って実現してみます。

マークアップ

例えばこんなHTMLとCSSを書きます。 血液型を選択する簡単なトグルボタンです。

HTML

<form class="question">
    <h1>あなたの血液型は？</h1>
    <ul class="bloodtype-list">
        <li><label><input type="radio" name="bloodtype" value="A" checked />A</label></li>
        <li><label><input type="radio" name="bloodtype" value="B" />B</label></li>
        <li><label><input type="radio" name="bloodtype" value="O" />O</label></li>
        <li><label><input type="radio" name="bloodtype" value="AB" />AB</label></li>
    </ul>
</form>

CSS

/**
 * 重要な箇所のみ抜粋
 */

.bloodtype-list label input {
    display:none;
}
.bloodtype-list label {
    /* 非選択時のスタイル */
}
.bloodtype-list label.selected {
    /* 選択時のスタイル */
}

label>input という構造にして、inputをdisplay:none;で隠してしまいます。 選択されたラジオボタンのlabelに「selected」クラスが付加されれば、選択状態を表現できまね。 その部分は、JavaScriptにお任せします。

JavaScript

jQueryを使います。非常に単純な処理です。

var radios = $("input[name=bloodtype]");

radios.on("change", function(e){
    // 一旦全てのlabel要素からselectedクラスを除去
    radios.closest("label").removeClass("selected");
    // 選択されたラジオボタンの親のlabelにselectedクラスを設定
    $(e.target).closest("label").addClass("selected");

    // 選択変更時に何かしたければここで
    console.log("Changed to " + e.target.value);
});


// 選択状態を初期化する
radios.filter(":checked").trigger("change");

これで概ね動くのですが、IE8以下はもう一工夫必要です。

旧IE対策

IE8以下は、非表示にしているラジオボタンのlabel要素をクリックしても 選択状態は変わらず、changeイベントも発火しない様子です。

なので、その挙動を簡単にエミュレートしてあげます。

radios.closest("label").on("click", function(e){
    var input = $(this).find("input");
    if(! input.prop("checked")){
        input.prop("checked", true).trigger("change");
    }
});

親のlabel要素をクリックした時に、子のinput要素が選択されていなければ、 checkedにしてchangeイベントに着火します。

jQueryプラグインにまとめてみる

一連の動作をプラグインにまとめてみました。

$.fn.extend({
    toggleButtons : function(callback){
        var radios = this;
        radios.on("change", function(e){
            radios.closest("label").removeClass("selected");
            $(e.target).closest("label").addClass("selected");
             callback.call(this, e);
        });
        radios.closest("label").on("click", function(e){
            var input = $(this).find("input");
            if(! input.prop("checked")){
                input.prop("checked", true).trigger("change");
            }
        });
        radios.filter(":checked").trigger("change");
    }
});

使い方

引数のcallbackは、選択状態が変更された時にコールされます。

$("input[name=bloodtype]").toggleButtons(function(e){
    // 選択変更時に何かする
    console.log("Changed to " + e.target.value);
});

デモ

JSBinにデモを用意しました。

• DEMO ( JS Bin )

まとめ

あとはlabelとlabel.selectedの見た目を存分にデザインしてあげましょう。 CSS3で記述するもよし、画像置換するもよし、子にimgを入れて差し替えてもよし。 お好みのコースで心ゆくまでごゆっくりと。

2013/06/22

checkedにあわせて選択するようにコードを調整

使い方

• Head JS :: The only script in your HEAD

謳い文句はhead要素に読み込む唯一のスクリプト
ダウンロードして読み込むだけ。おしまい。

<script type="text/javascript" src="head.js"></script>

その多彩な機能

環境の判別

CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を
Modernizrと同じ手法でHTML要素のクラスに出力してくれます。
こんな感じに…

<html lang="ja" id="test-page" class=" webkit root-section js  gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions fontface domloaded w-1100 lt-1280 lt-1440 lt-1680 lt-1920">

また、JavaScriptでheadオブジェクトを辿っても判別結果が得られます。

console.log( head.csstransitions ); // Transition対応のブラウザならtrue
console.log( head.browser.webkit ); // Webkitならtrue
console.dir( head ); // とりあえず全部覗いてみたらいいと思う

IEのHTML5対応の補助

html5shiv同様、IEでのHTML5の新要素の使用をサポートしてくれます。
（IEさんはHTML5の要素を置いても、そのままではスタイルをあててくれないので…）

• 
  html5shiv – Project Hosting on Google Code
  

スクリプトローダー

動的にJavaScriptファイルをロードする機能を備えています。
読み込むスクリプトファイルは復数指定でき、 ロード完了時のコールバックも登録可能です。

head.js(
    "hoge.js",
    "fuga.js",
    "foo.js",
    "bar.js",
    function(){
        console.log( "All Script Loaded." );
    }
);

パフォーマンスに疑問が残るので多用は禁物ですが、便利ですね。
競合としてはrequire.jsとかでしょうか。

• 
  RequireJS
  

まとめ

一本読み込むだけでこれだけのことが出来る。
まさにheadjsの名に恥じない素晴らしいスクリプトだと思います。

XPathでやってみた

「フィードをオートディスカバリーする XPath – IT戦記」を参考に
DOMXpathで処理してみました。

$doc = DOMDocument::loadHTMLFile( $url );
$xpath = new DOMXpath( $doc );

DOMXPathはDOMDocumentをコンストラクタの引数に食べさせて使います。

$q = '/html/head/link[contains(@rel, "alternate")]'
    . '[@type="application/x.atom+xml" or @type="application/atom+xml" or '
    . '@type="application/xml" or @type="text/xml" or '
    . '@type="application/rss+xml" or @type="application/rdf+xml"]';
$eles = $xpath->query( $q );

基本的には先述の記事と同じ処理。
「rel属性に”alternate”を含み、尚且つtype属性がそれっぽいlink要素をください」
というクエリです。

DOMXPath::queryにクエリを渡せば実行結果をDOMNodeListで返してくれますので、
こんな感じに、条件にあったlink要素の1個目のhref属性を取得。

$eles->item(0)->getAttribute("href");

ファイナルコード

関数にまとめたもの

WebページからフィードのURLを抽出する。（XPath版）- GitHub

DOMDocumentでもやってみる

同じ処理を、試しにDOMDocumentでも書いてみる事に。

$doc = DOMDocument::loadHTMLFile( $url );

$types = array(
    "application/x.atom+xml",
    "application/atom+xml",
    "application/xml",
    "text/xml",
    "application/rss+xml",
    "application/rdf+xml"
);

下準備。DOMDocumentを生成しつつ、属性値のリストを作っておく。

$feedUrl = null;
$links = $doc->getElementsByTagName("link");
for( $i = 0; $i < $links->length; $i ++ ){
    $link = $links->item( $i );
    if( !stristr( $link->getAttribute("rel"), "alternate" ) ||
        !in_array( $link->getAttribute("type"), $types ) ){ continue; }
    $feedUrl = $link->getAttribute("href");
    if( !empty($feedUrl) ){ break; }
}

link要素のリストを取得してループでぐるりとまわします。
何をしているのかわかりやすいですが、XPathの方がスマートな印象。

ファイナルコード

関数にまとめたもの。

WebページからフィードのURLを抽出する。（DOMDocument版）- GitHub

まとめ

Webページを取得してごにょごにょしたい場合はXPathが便利そう！

© まっは画伯

どんなスタイルにすると「押しごたえ」が生まれる？

• へこんだデザインにする
• 位置を下げる
• ちょっと暗くしてみる

あたりで「押しごたえ」が出るのではないでしょうか。
（ざっくばらん）

基本は「:active」で

:hoverがマウスオーバー時のスタイルならば、
ボタンを押下した時のスタイルは:activeで記述します。

こちらは一例。
（IEだと残念な見栄えになります）

• DEMO:1 ( jsFiddle )

HTML

<a href="#" class="button">BUTTON</a>

CSS

.button {
    display:inline-block;
    padding:5px 10px;
    background-color:#69c;
    color:#fff;
    border:1px solid #69c;
    text-decoration:none;
    font-size:13px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}
.button:hover{
    background-color:#79acdf;
    -webkit-box-shadow:inset 0px 0px 3px #fff;
    -moz-box-shadow:inset 0px 0px 3px #fff;
    box-shadow:inset 0px 0px 3px #fff;
}
.button:active{
    padding-top:6px;
    padding-bottom:4px;
    border:1px solid #334c66;
    background-color:#69c;
    color:#e0ebf5;
    -webkit-box-shadow:inset 0px 0px 8px #334c66;
    -moz-box-shadow:inset 0px 0px 2px #3a6da0;
    box-shadow:inset 0px 0px 2px #3a6da0;
}

上下paddingを調整して押下した感を出してます。
ちなみにこれをインラインで使おうとすると回りも巻き込んでしまうのでご注意を。

IE6/7だとクリック後に復帰できない問題

IE6/7で見ると、ボタンをクリックした後もフォーカスが残ってしまっているのか、
他の要素をクリックするまで:activeのスタイルのままになってしまいます。

なので、例えばJavaScriptでこんなのを足してみます。（要jQuery）
クリックイベントが発生した時に、ボタンからフォーカスを外しています。

• DEMO:2 ( jsFiddle )

$(".button").click( function(){ this.blur(); } );

とはいっても、画面遷移しちゃうようなボタンでやったところで、あまり見てもらえなくて残念。
例えばAjaxコンテンツのような、その場で切り替わるページなら、
「押し応え」を付加する事で使い心地が向上するかもしれませんね！

1. ざっくりとした仕掛け
2. IE兄弟はinput要素のtype属性をいじれないらしい
3. textとpasswordを並べて表示/非表示をトグルする
4. コード抜粋

ざっくりとした仕掛け

チェックボックスにチェックを入れると、
パスワードのtypeがtextに切り替わって内容が確認出来るようになる仕組み。

type直接いじれば楽じゃーん。
そう考えていた時代が僕にもありました。

IE兄弟はinput要素のtype属性をいじれないらしい

ところがIEはinput要素のtype属性を弄ろうとするとエラーになります。
その為jQueryでも、attr()で同様の処理を行おうとすると、以下の例外が投げられてきます。

type property can’t be changed

HTML

<input type="password" id="foo" />

JavaScript

try {
    $("#foo").attr("type", "text" );
} catch( e ){
    console.log( e ); // type property can't be changed
}

cloneNode等で複製したオブジェクトでも同様なので、
これを回避する為には手作業で要素の複製を行い、
それでもって元の要素とスワップしなければならないみたいです。面倒ですね！

textとpasswordを並べて表示/非表示をトグルする

面倒なのは回避する事にして、
input[type=text]とinput[type=password]を並べておき
表示/非表示を切り替える方向でやってみます。

1. input[type=text]とinput[type=password]の入力内容を同期させる
2. チェックボックスのON/OFFでそれぞれの表示/非表示を切り替える

コード抜粋

こんな感じになりました。

DEMO ( jsFiddle )

HTML

<input type="password" id="pswd" name="pswd" />
<input type="text" id="pswd-text" name="pswd-text" style="display:none;" />
<input type="checkbox" id="pswd-toggle" name="pswd-toggle" data-for="pswd" />
<label for="pswd-toggle">パスワードを表示する</label>

パスワード（#pswd）の相方となるテキストフィールド（#pswd-text）を非表示にして設置。
チェックボックス（#pswd-toggle）には、data-for属性で対象のID(pswd)を入れておきます。
ちょうど、label要素のfor属性のように。

JavaScript

$.fn.extend({
    togglePassword : function( config ){
        option = $.extend({
            "postfix" : "-text"
        }, config );
        // 入力内容を同期するfunction
        sync = function(){
            var i = this.type.toUpperCase() === "PASSWORD" ?
                this.id + option.postfix :
                this.id.replace( option.postfix, "" );
            $( "#" + i ).val( $(this).val() );
        };
        // 表示/非表示を切り替えるfunction
        toggle = function(){
            if( this.checked ){
                $.data( this, "pswd" ).hide();
                $.data( this, "text" ).show();
            } else {
                $.data( this, "pswd" ).show();
                $.data( this, "text" ).hide();
            }
        };
        this.each( function(){
            var id, pswd, text, check, handlers;
            id = this.getAttribute( "data-for" );
            pswd = $("#" + id );
            text = $("#" + id + option.postfix );
            check = $(this);
            // テキストフィールドのイベント
            handlers = { keyup : sync, blur : sync };
            pswd.bind( handlers );
            text.bind( handlers );
            // チェックボックスのイベント
            $.data( this, "pswd", pswd );
            $.data( this, "text", text );
            $(this).click( toggle );
            // 初期化
            toggle.apply( this );
        });
    }
});

$("#pswd-toggle").togglePassword();

IEスルーするなら恐ろしく短いコードで済みそうですが…残念。

@anywhere

Welcome to @Anywhere | dev.twitter.com

Twitterの機能がどのサイトでも活用出来るようになるJavaScriptリソース。
認証からタイムライン読み込み、パーツのレンダリングまで。
連携サービスを組むならおさえておきたい。

• ブログで@anywhereを試してみた！ ～ どこでもTwitter | Mach3.laBlog
• @anywhereで認証してみる備忘録 | Mach3.laBlog

jsLint

JSLint, The JavaScript Code Quality Tool

JavaScriptをストリクトに書く為のチェックツール。
前はWSH版がダウンロード出来たんですけど見つからなくなってますね。
Githubのを使ってなんやかんやするんでしょうか。こんど試してみよう。

• JSLintでストリクトなJavaScriptを書く | Mach3.laBlog

LESS

LESS – Leaner CSS

変数に代入したり、ネストしたり、ミックスインしたり…
CSSコーディングが素晴らしくスピードアップするCSS開発キット。
エディタからも簡単に呼び出せるので重宝しています。
似たようなプロジェクトに「Sass」というのもあります。

• ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション | Mach3.laBlog
• CSS3対応の為のLESSスニペットメモ | Mach3.laBlog

jsDoc Toolkit

jsdoc-toolkit – Project Hosting on Google Code

JavaScript版のドキュメント生成ツール。
こちらもエディタから使うと大変便利。

• エディタ（Notepad++）からJSDoc Toolkitを使ってみる | Mach3.laBlog

Modernizr

Modernizr

HTML5の新機能等が使用可能かどうかを判別してくれるライブラリ。
判別の結果はhtml要素のクラスとして出力してくれる他、
メンバを直接参照する事でも結果を知ることが出来ます。

便利なスクリプトなのですが、最近Head.jsに持って行かれた感が…
こちらは未検証なのでまた後ほどレポートを。

• 「Modernizr」 モダンなクロスブラウザCSSの為の支援スクリプト | Mach3.laBlog

Raphael / gRaphael

gRaphaël—Charting JavaScript Library

Raphaelは、ベクターグラフィックを簡単に扱うためのJavaScriptライブラリ。
gRaphaelはそれをグラフ描画用に拡張する為のプラグインです。
投稿した時はまだドキュメントが不備でしたが…今見に行きましたがまだありませんでした！

• 実験室: gRaphaëlでインタラクティブなグラフを描いてみる | Mach3.laBlog

IE9.js

ie7-js – Project Hosting on Google Code

プロジェクト名としては「IE7.js」ですが、
その中に含まれるIE8.js、IE9.jsやie7-squish.jsが結構便利。
JavaScriptが動く事が前提になりますが、擬似クラスやHTML5の新要素の対応もしてくれます。

• IE9.jsで実現するシンプルなclearfixとその他の恩恵 | Mach3.laBlog

YUI Compressor

YUI Compressor

Yahoo!がおくる、JavaScriptやCSSを圧縮するツール。
Webページのパフォーマンス向上を図るのに欠かせません。
ご一緒にYSlow（Firebugプラグイン）も是非。

• YUI Compressorをお手軽にするバッチファイルを書いてみる | Mach3.laBlog
• 今すぐ出来る、ちょこざいなサイトパフォーマンスアップ | Mach3.laBlog

mustache

{{ mustache }}

マルチランゲージテンプレートエンジン！（言い切った！）
様々な言語に対応する、シンプルで使いやすいテンプレートエンジンです。

• どこでも活躍できるテンプレートエンジン「Mustache」 | Mach3.laBlog

Sammy.js

Sammy.js

Ajaxコンテンツのセッションを操る為のjQueryプラグイン。
要するに、location.hashによるルーティングをウマイこと処理してくれるスクリプトです。

• Sammy.jsでAjaxコンテンツのセッションを操る | Mach3.laBlog

jQueryMobile

• jQuery Mobile | jQuery Mobile

jQueryの作者が送る、スマートフォン向けのjQueryUIのようなもの。
ルールに従ったマークアップをするだけで、各要素をそれっぽくレンダリングしてくれます。
1月に正式版がリリースされる予定。

• はじめてのjQueryMobile | Mach3.laBlog

結構色々ありましたね、2010年。
来年もまた素晴らしい技術に出会えますように。

皆様よいお年を！

$(document).ready()について

まず、$(document).ready()について。
引数に渡された関数が、HTMLのDOM構築が完了した時点で呼ばれるという便利機能。

$(document).ready(function(){
    // DOMロード完了時に実行される
    alert("Hello, world !");
});

jQueryを使っていれば一度はお目にかかる定型文ですね。
仕組みについては、こちらの記事が大変詳しく書いてありました。
$(document).ready(f)、bindReady()、$.ready() 解読 ──jQuery解読(32)

$( selector ).onReady();

で、今回は”document”が入っている部分にセレクタを渡して、
その要素がJSで動的に挿入されたタイミングで関数を実行させる… というのが趣旨です。

書いてみたのはこちら。
mach3/js-jquery-onready – GitHub

簡単な使い方

$("#MyContainer").onReady( function(){
    this.append("Hello, world!");
});
$("#hoge").click( function(e){
    $("<div />").attr("id", "MyContainer").appendTo("body");
});

最初は#MyContainerは存在せず、#hogeボタンをクリックする事でbodyに追加されます。
追加されるとそれを検知して、#MyContainerに”Hello, world!”が表示されます。

オプション

内部的には、お察しの通りsetTimeoutでまわしてるだけですが、
そのインターバルと制限時間を第二引数のオプションで設定する事も出来ます。

$("#MyContainer").onReady(
    function(){
        // Do anything.
    },
    {
        "limit" : 30000, // 制限時間（ミリ秒）
        "delay" : 1000 // インターバル（ミリ秒）
    }
);

limit : number = 60000

制限時間。これを超えるとonReadyは諦めます。デフォルトは1分。

delay : number = 500

setTimeoutのインターバル。デフォルトは0.5秒。

いつ使うの？

さして出番は多くないかもしれませんが、
例えばscript要素を差し込むタイプのサードパーティのウィジェット等で、
ページ最下部の非表示ブロック内でロードさせておいて、
ロードされたら本来あるべき場所にappendする、等。
多少のページパフォーマンスの向上に役立つかもしれませんね？

あとは、同じくウィジェットの要素からいろいろ抜き取って加工して表示させたい場合などに。

公式 : jQuery Mobile | jQuery Mobile

jQueryではなく、jQueryUIのモバイル版

と、言うべきでしょうか？

jQueryMobileが提供してくれるのは、
スマートフォン向けのテーマスタイルシートと、
それをより簡単にレンダリングする為の仕組みです。

はじめ勘違いしていたのですが、
jQueryをモバイル向けにチューンした物ではないので注意。
使用の際にはjQueryを一緒に読み込む必要があります。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

jQueryUIのように、CSSとjQuery、
そしてjQueryMobile本体を読み込んで準備完了です。

Hello, world !

我々がしなければならないのは、HTMLをマークアップする事だけ。
その際に、そのHTML要素をどのような見せ方をするのかを、
data-role属性を使って指定してやります。

例えば、次の例はきわめてシンプルなページのテンプレートです。

<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div>
    <div data-role="content">
        <p>Hello, world !</p>
    </div>
    <div data-role="footer"></div>
</div>

data-role属性はその名の通り、要素のrole（役割）を示します。
基本的な構造は、pageの中にheader/content/footerが並び、
contentの中にページの内容が流し込まれる感じ。
普段idやclassを使ってマークアップするのと同じ感覚ですね。

こうしておくことで、jQueryMobileさんが適切なスタイルを適用してくれます。
上の例なら、こんな感じに。

jQueryMobileのページ遷移

jQueryMobileのページ遷移は、特別何かを意識しなくても
スマートフォン特有の右にスライドしていくトランジションを加えてくれます。
もちろんトランジションの種類は変更可能。

リンクの種類も複数あります。例えば…

1) ページ内リンク

“#hoge”のようなハッシュによるページ内リンク。 トランジションで遷移します。

2) ページ外リンク

“hoge.html”のような通常のリンク。 Ajaxで外部ファイルロード後、トランジションで遷移します。

3) 明示された外部リンク

rel=”external” を指定したものは、 トランジションを使用せずに画面ごとリフレッシュします。

1)について補足で説明しておくと、
ひとつのHTMLの中に任意のIDを持つ複数のpageコンテナを配置し、
ページ内リンクで遷移する事が出来ます。
というより、「表示をトグルする」と表現したほうが分かりやすいのかもしれません。

<div data-role="page" id="home">
    <div data-role="header">
        <h1>Home</h1>
    </div>
    <div data-role="content">
        <p>
            <a href="#hoge">hoge</a>
            <a href="#fuga">fuga</a>
        </p>
    </div>
</div>

<!-- page "hoge" -->
<div data-role="page" id="hoge">
<!--中略-->
</div>

<!-- page "fuga" -->
<div data-role="page" id="fuga">
<!--中略-->
</div>

アルファバージョンという事もあり、ある条件下でスタイルが切れてしまったり、
トランジションがうまくいかなかったりと、不具合が色々潜んでます。
試す場合は、ご覚悟を。

色々なコンポーネント

jQueryMobileには、ボタンをはじめとする様々なコンポーネントが揃っています。
コンポーネントもコンテナ同様、data-roleをはじめとする
様々なdata-*属性で見た目/振る舞いを指定します。
ほんの一部をご紹介してみると…

ボタン

<a href="#hoge" data-role="button" data-inline="true">BUTTON</a>

表示トグル可能なブロック

<div data-role="collapsible" data-collapsed="true">
    <h3>いないいない</h3>
    <p>ばぁ！</p>
</div>

フリップスイッチ

<select data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

ネストされたリスト

<ul data-role="listview">
    <li>JavaScript
        <ul>
            <li>jQuery</li>
            <li>Prototype.js</li>
            <li>YUI</li>
            <li>ExtJS</li>
            <li>MooTools</li>
            <li>Dojo</li>
        </ul>
    </li>
    <li>PHP
        <ul>
            <li>CakePHP</li>
            <li>CodeIgniter</li>
            <li>Zend Framework</li>
            <li>Symfony</li>
            <li>ちぃたん</li>
        </ul>
    </li>
</ul>

まとめ

と、ほんのさわりだけですが、紹介させていただきました。
まだアルファバージョンなのでバグも多く、疑問が残る部分も幾つかありますが、
1月に1.0をリリースするそうなので、チェックしておきたいですね。

さ、次はSenchaも試してみるべきですね…
Ext Japan – モバイルJavaScript – Ext JS、Ext GWT、Sencha Touch

Mustacheについて

{{ mustache }}

“Mustache”というのは口ひげを指す言葉で、「ますたっしゅ」とか発音する様です。
テンプレートタグに使用されている「{」が口ひげに似てるので、そこらへんが由来っぽいです。

公式を見れば分かるとおり、Mustacheは1言語にとどまらず、
様々な言葉で開発されているテンプレートエンジンです。
知らない言語も入ってたりしますね…。

Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Go, Lua, ooc, C++, ActionScript, Java, ColdFusion, Scala, and for node.js.

簡単な使い方

JavaScript版のmustache.jsで簡単な使い方を紹介してみます。

最もシンプルな例

var template = 'Hello, {{name}}!';
var html = Mustache.to_html( template, {
    name:"mach3"
});
alert(html); // "Hello, mach3!"

テンプレートにデータを渡して出力するには、Mustache.to_html()メソッドを使用します。
第一引数はテンプレートの文字列、第二引数は渡すデータ(Object)です。
基本的に{{と}}で囲った物が、テンプレートタグとして認識されます。

条件分岐

var template = '{{#isError}}エラーが発生しました。{{/isError}}';
var html = Mustache.to_html( template, {
    isError:true
});

dataの値がtrueである場合に
{{#data}}と{{/data}}に囲まれた部分が処理されます。
ちなみに条件を逆にしたい場合は、#の代わりに^を使用します。

var template = '{{^isError}}正常です。{{/isError}}';

ループ処理

var template = '<ul>{{#fruits}}<li>{{.}}</li>{{/fruits}}</ul>';
var html = Mustache.to_html( template, {
    fruits:["apple","orange","banana"]
});

記法は条件分岐と同じですが、dataが配列等の可算なオブジェクトだった場合は
その数だけ{{#data}}と{{/data}}に囲まれた部分が処理されます。
{{.}}とする事で現在の値にアクセス出来ます。

var template = '<ul>{{#fruits}}<li>{{name}} : &yen;{{price}}</li>{{/fruits}}</ul>';
var html = Mustache.to_html( template, {
    product:[
        { name:"apple", price:100 },
        { name:"orange", price:75 },
        { name:"banana", price:50 }
    ]
});

もう少し複雑な例です。
配列の値がオブジェクトである時は、ループ内で直接nameやpriceの値にアクセス出来ます。
一覧を出力する場合等はこの方法を選択する事になるでしょう。

コメントアウト

var template = '<p>超音速。{{! この中はスルーされます }}</p>'

{{! … }}とすると、その中身はコメントと認識されてスルーされます。

さらに高度なテンプレートタグについては、GithubのREADME/Manualをご覧ください。

• janl’s mustache.js at master – GitHub
• mustache(5) — Logic-less templates.

必要な機能が十分に備わっているのは勿論、
どの言語を使用しても同じ記法でテンプレートが書けるというのは強みですね。
しかも、特にWeb屋が扱う言語は概ね網羅している様子。
非常に有用なライブラリと思いますが、如何でしょうか。