[JS]既存のサイトをタッチデバイス対応にするスクリプト -Mobilize.js

サイト構築 -JavaScript

Post on:2011年8月18日

sponsorsr

ウェブページにスマートフォンでアクセスされたら自動検出し、そのページのレイアウトを変更・タッチデバイス対応にするjQuery Mobileを使用したHTML5ベースのフレームワークを紹介します。

Mobilize.js

[ad#ad-2]

Mobilize.jsを使用すると下記のように、スマートフォン用に最適化できます。

Mobilize.jsでスマートフォン対応にするイメージ

見出し、ナビゲーション、コンテンツはそれぞれ細かく指定することができます。

Mobilize.jsの主な特徴

Mobilize.jsは、クライアントサイトでウェブサイトをスマートフォン対応にするHTML5のフレームワークです。

インターフェイスはjQuery Mobileベースでタッチデバイスに最適化。
自動的にモバイル用ブラウザを検出。
インテグレートが容易 -サーバーサイドの変更は必要ありません。
オープンソース -高価な費用は必要ありません。

Mobilize.jsの対応デバイス

Mobilize.jsは、以下のモバイル用のブラウザを自動検出して実行します。

iPhone
Android
Blackberry
Opera Mini
他、多くのブラウザとデバイス

[ad#ad-2]

Mobilize.jsの使い方

Mobileze.jsは既存サイトだけでなく、WordPressにも適用でき、ここでは既存サイトに適用するさわりだけ紹介します。

Mobilize.jsのさまざまな使い方は、ドキュメントを参照ください。

Mobilize.jsのドキュメント

Mobileze.jsの基本書式

基本書式は、下記のようになります。

<body>

    <!-- Your custom extender goes here -->
    <script type="text/javascript">
        function mobilizeCustomInit() {
            // Add your own Javascript layer to load list
            // in mobile mode.
            // push() is array append function in JS.
            // NOTE: Relative paths may have not luck here.
            mobilize.cdnOptions.javascriptBundles.push("http://yourserver/mobilize.mysite.js")
        }
    </script>

    <script type="text/javascript" src="http://cdn.mobilizejs.com/releases/0.1/js/mobilize.core.min.js"></script>

変換される基本テンプレート

jQuery Mobileのページスケルトンの構成です。

<div id="mobile-body"> 

	<!-- http://jquerymobile.com/demos/1.0a3/#docs/pages/docs-pages.html -->				
	<div data-role="page"> 
		<div data-role="header"></div> 
		<div data-role="content"></div> 
		<div data-role="footer"></div> 
	</div> 

</div>

変換ルール

既存ページのタイトル箇所や見出し箇所などヘッダ周りの指定方法です。

constructHeader : function() {
    // Map title and header buttons jQuery Mobile

    // This is the mobile target element
    // which will contain the title.
    var mobileHeader = $("#mobile-body div[data-role=header]");

    // Pick the current page title from <header> section
    var title = $("header h1").text();

    // Set mobile header title to the same text
    var h1 = $("h1").text(title);
    mobileHeader.append(h1);

},

ナビゲーションは下記のようになります。

constructNavigation : function() {

    // Get list of items which contain links for the navigation building
    var items = $("nav li");

    // Create navigation list
    var list = $("<ul class='page-list' data-role='listview' data-inset=true>");

    // Add list header
    list.prepend("<li data-role='list-divider'>Pages</li>");

    // Add list items
    items.each(function () {
        var output = $("<li role='option'>");
        output.append($(this).find("a"));
        output.appendTo(list);
    });

    // Put list below content
    var mobileContent = $("#mobile-body div[data-role=content]");
    mobileContent.append(list);

}

既存サイトへの適用方法の詳細は、下記ページを参照ください。