jQuery Mobile ＆ a-blog cms 強化合宿資料 2010-11-18

Posted: 2010-11-19 Updated: 2010-11-19

jQuery Mobileについて

jQuery MobileでiPhone対応のサンプルHTMLを作ってみた :: ハブろぐ

ブログ的には、上記のエントリーで、あらかた書いてしまっていたりするので割愛。jQuery Mobileは1行もJavaScriptを書かずに、モバイルUIを適用できるすばらしいライブラリです。（まだアルファ版ですが）

a-blog cms ＋ jQuery Mobile のiPhoneテーマ ( jqmobile )

ここからダウンロードできます ( acms_jqmobile.zip 8KB )

みなさんの、今回の強化合宿のおみやげにしていただければ幸いです。jQuery Mobile ＆ a-blog cmsのコラボiPhoneテーマです。

jQueryのライセンスを引き継いで、MITライセンスとしますのでこれをベースに好きなものを作ってもらってOKです。ただし、jQuery Mobileそのものがアルファ版なので、商用利用はそもそもダメな気がしますね。lol

以下、断片的にですが、内容フォローを兼ねた情報やコードなどをつらつらと。

iPhoneっぽいモバイルUIを作れるライブラリ

色々ありますが、それぞれの設計思想により実装の主体が異なります。たとえば、Sencha Touchは他の2つに比べて、極端にJavaScriptでの構築を要求します。

iui

jQtouch

Sencha Touch

HTMLドリヴンであることないこと

HTML駆動、HTMLによって全ての機能が定義されるというような感じの意味です。HTMLなりJavaScriptなりPHPなり、どこに何を書いたらそれらが駆動するか、という動作トリガーに関する設計思想のようなものだと思います。

HTMLドリヴンであるjQuery Mobileの場合

jQuery MobileはHTML側で、data-role属性を各要素に割り振ることで、ビジュアルを勝手に適用してくれるので、JavaScriptは読み込むだけで書きません。これは、HTMLがJavaScriptに指示していると言えます。

<html>
<!-- HEADなどを省略 -->
<body>
    <div id="header" data-role="header"></div>
    <div id="main" data-role="content"></div>
    <div id="aside" data-role="navibar"></div>
    <div id="footer" data-role="footer"></div>
</body>
</html>

HTMLドリヴンでないJS

jQuery Mobileのような動作を、他のHTMLドリヴンでない何かで行うと、しばしば以下のように記述されます。（非常に極端な例ですが）JavaScript側に、何を、どうするかという指定が書かれます。

$.iphoneUI.init({
    header  : '#header',
    main    : '#main',
    aside   : '#aside',
    footer  : '#footer',
    callback : function()
    {
        // myfunc
    }
});

<html>
<!-- HEADなどを省略 -->
<body>
    <div id="header"></div>
    <div id="main"></div>
    <div id="aside"></div>
    <div id="footer"></div>
</body>
</html>

HTMLドリヴンな、a-blog cmsのAjaxリクエスト補助( post_include )

a-blog cmsにはAjax的な表現をサイトに加える補助機能が備わっています。以下はそれの記述例です。HTMLしか書かれていませんが、HTML内に書かれたclassに反応して勝手にJavaScriptが動作します。やはりHTMLが、JavaScriptに指示をしています。

<form action="http://example.com" class="js-post_include" target="#replacement">
    <input type="hidden" name="bid" value="1" />
    <input type="hidden" name="cid" value="3" />
    <input type="submit" name="ACMS_POST_2GET" value="トリガー" />
</form>
<div id="replacement">
    <!-- ここにajaxで取得してきた内容が入る -->
</div>

JavaScriptな、普通のAjax的なリクエスト

さっきと同じような関係ですね。a-blog cmsのpost_include機能とは違い、この要素をクリックしたら、この動作をする、というのがJavaScript側で書かれています。

$('#trigger').click(function()
{
    $.ajax({
        type    : 'post',
        url     : 'http://example.com',
        data    : {bid: 1, cid: 3},
        success : function(html)
        {
            $('#replacement').replaceWith(html);
        }
    });
});

<a id="trigger" href="#">トリガー</a>
<div id="replacement">
    <!-- ここにajaxで取得してきた内容が入る -->
</div>

実装をHTMLだけで完結させられるスタイル

a-blog cmsはJSだけでなく、フォームのバリデーターや、モジュールの記述もHTMLの形式に乗っ取って、書き込まれているので、ある意味HTMLドリヴンなCMSです。

そんなわけで、HTMLドリヴンなjQuery Mobileとa-blog cmsを組み合わせれば、モバイルサイトの設計・製作がHTMLの中で完結するし、相性いいんじゃない？っていう話をしていました。カスタムフィールド基礎1の裏番組は、そんなことをしていました。;-D

Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu