はじめてのスマートフォンサイト制作「jQuery Mobile を使った制作編」

前回の基礎知識や開発環境の準備編で、基本的な勉強や開発環境は揃えましたので、本記事では具体的な制作に入っていきます。

どんな風に作るのか

ハイクオリティで広範囲のプラットフォームに対応したスマートフォンサイトを作りあげるにあたって jQuery Mobile を使用していきます。また URL は統一して（スマホサイトを別 URL で作成せず）スマホアクセス時にスマホ用の出力に最適化します。そのため、サイトの構造に変更は加えませんが、全てのページにおいてスマホ用のレイアウトを出力できるように変更を加えていきます。

jQeury Mobile について

スマホサイトの作成に jQuery Mobile について学んでいきます。今まで jQuery Mobile を使用したことがありませんので、今回一から全て勉強しました。といっても、基本的なことは全て下記サイトにありますので、jQuery Mobile そのものについては下記ページなどから学んで下さい。

スマートフォン対応の基本設定

スマホでアクセスした時に判別する

ユーザーエージェントを確認して、モバイル端末でアクセスした際に判別できるようにします。ちなみに、PHP でサイトを作っている場合はユーザーエージェントを preg_match() などで検索して、モバイル端末であればという判断をすれば良いと思いますが、使っているフレームワークによってはデフォルトで判別する機能が付いていたりします。例えば CakePHP は以下のように判別することができます。

1
2
3
4
5
6

public function beforeFilter()
{
    if($this->RequestHandler->isMobile()) {
        $this->theme = 'Mobile';
    }
}

CakePHP サイトのスマートフォン対応をする場合は、CakePHP に特化したスマホサイト制作の記事を書いていますのでそちらをご確認ください。下記記事では、かなり詳細のコードまで公開しています。

出力レイアウトを変更する

jQuery Mobile の恩恵を得るには出力する HTML を対応させる必要があります。スマホでアクセスした場合は以下のような HTML で出力するようにアプリケーションに修正を加えていきます。HTML の内容については jQuery Mobile のドキュメントを参考に一から作成していきましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html> 
<html>
<head> 
    <meta charset="UTF-8"> 
    <title>テスト</title> 
    <meta name="description" content=""> 
    <link rel="stylesheet" href="/css/jquery.mobile-1.1.0.min.css">
    <script src="/scripts/jquery-1.7.2.min.js"></script>
    <script src="/scripts/jquery.mobile-1.1.0.min.js"></script>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
</head> 
<body> 
<div data-role="page">
 
    <div data-role="header">
        <h1>ここはページタイトルを入れる</h1>
    </div><!-- /header -->
 
    <div data-role="content">
	ここにコンテンツを色々入れていく
    </div><!-- /content -->
 
    <div data-role="footer">
    	<h4>ここはフッタです</h4>
    </div><!-- /footer -->
 
</div>
</body>
</html>

Facebook と連携したり、様々な機能を付加すれば当然出力する HTML も変更していく必要があります。

jQuery Mobile で Google Analytics を使用する

jQuery Mobile は、jQuery Mobile に合わせて HTML を組み上げることで、スマホ用にサイトの基本デザインなどを最適化してくれるだけでなく、Ajax でページ遷移などを行なってくれます。しかし、Ajax でページ遷移を行なってくれる代わりに Google Analytics などのアクセス解析で上手くトラッキングできなくなりますので、以下のように対応します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-****-*']);
 
$(document).bind('mobileinit', function(){
    $(':jqmData(role="page")').live('pageshow', function (event, ui) {
        _gaq.push(['_trackPageview', $.mobile.activePage.jqmData('url')]);
    });
});
 
$(document).ready(function(){
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
});

そしてこのコードは下記のような順番で読み込みます。なぜなら、ここで使用している mobileinit が jQuery Mobile がロードされた直後にバインドされるためです。

1
2
3

<script src="jquery.js"></script>
<script src="google-analytics.js"></script>
<script src="jquery-mobile.js"></script>

このコードについては下記のページが大変参考になりました。通常のコードは、コードが読み込まれた時点でページをトラッキングして、それで終わりなんですが、このコードはページを読み込む度にページをトラッキングするようになっています。

ちなみに、へっぽこプログラマーの日記さんのコードを解体すると以下の部分がキモになります。Google Analytics に限らず広告のコードを書き換えたり、他のアクセス解析やスクリプトを動かすといった場合にも、このコードが役に立ちますので参考にしましょう。

1
2
3

$(document).bind("mobileinit", function(){
  // 初期値の上書き
});

ちなみに、基本的にはこのコード内で jQuery Mobile の設定を変更したりします。このコードについては下記のページが参考になります。

Ajax を無効にする

Ajax を無効にすることもできます。以下のようなコードで無効化できます。このコードは jQuery Mobile の手前で読み込むようにします。

1
2
3

$(document).bind('mobileinit', function(){
    $.mobile.ajaxEnabled = false;
});

また、Ajax でアクセスしたくないページが一部の場合は下記のように、リンクに rel 属性を使用することで、その部分のみ無効化できます。

1

<a href="#" rel="external">リンク</a>

広告など Ajax だと上手く表示できなくて、なおかつ厳しいルールが設定されていて、技術的に何ともしようがないコンテンツがある場合などは Ajax を無効にするしかない場合があります。私のサイトでも広告との関係上 Ajax は無効になっていますが、広告以外の部分については Ajax でも動作するように構築しています。Ajax にするとサクサク動くので本当は有効にしたいです。

また、Ajax に起因しているのか詳細までは調べていませんが、Ajax を無効にしている状態で、リストの入れ子にしたリストのリンクを経由してページを移動した後にブラウザの戻るボタンで戻ると、ページが Ajax で読込中のマークが出たまま先に進まなくなる問題がありました。

スマホサイトの各ページを構築していく

情報の整理の仕方

スマホサイトは横幅が狭いので、横に情報を並べて整理するのは難しいです。よって、スマホサイトでは上記画像のように横に並べていた情報を縦に整理する方向で考えるのが良いです。jQuery Mobile では縦に情報を整理するのに便利な機能がたくさんあります。

jQuery Mobile でサイトを作っていく

jQuery Mobile のコンテンツの表現方法はいろいろあります。主にリファレンスの下記のページが、表現方法などに触れているのではないかと思います。全てのページを見ておけば、情報の整理をする際に、いろんな発想ができそうですね。

おわりに

こんな感じで jQuery Mobile で作成していけば、簡単にスマホサイトが完成すると思います。jQuery Mobile のリファレンスがとても優秀なので、広告や Analytics などデリケートな部分の解説のみになりました。何か気づいた事があれば今後記事にしていきます。

関連記事

コメント

コメントは受け付けていません。