[JS]jQuery Mobileでスマフォ対応ページをはじめて作成する際に役立つコード集とつまづきやすいポイント

Post on:2011年5月24日

jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。

サイトのキャプチャ

10 handy jQuery mobile tips and snippets to get you started

[ad#ad-2]

下記は各ポイントを意訳したものです。

スマフォ対応ページの基本HTML

まずは、スマートフォン対応ページを作成するための基本となるHTMLです。

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
 <div data-role="header">
  <h1>Header</h1>
 </div>
 <div data-role="content">
  <p>Content goes here</p>
 </div>
 <div data-role="footer">
  <h4>Footer</h4>
 </div>
</div>
</body>
</html>

jQuery Mobileの利用方法

jQueryのモバイル用プラグイン「jQuery Mobile」を使用して、それを利用する手順です。

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
 $(document).ready(function() {
  // Your jQuery commands go here before the mobile reference
 });
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

AJAXナビゲーションの停止

AJAXに対応したナビゲーションはスマートフォン上で不具合を与える場合があります。そのため、ナビゲーションのリンクを有効にするために、AJAXナビゲーションを停止します。

JavaScript

<script>
 $(document).ready(function() {
  // disable ajax nav
  $.mobile.ajaxLinksEnabled = false;
 });
</script>

リストアイテムの省略を阻止

jQuery Mobileの特徴の一つに長いアイテムを切り落とす、というのがあります。これはリストのアイテムやフッタのアイテムなどが省略されるため、スタイルシートで阻止します。

CSS：リスト用

body .ui-li .ui-li-desc {
 white-space: normal;
 }

CSS：フッタ用

body .ui-footer .ui-title {
 white-space: normal;
 }

Media Queriesの利用

例えば、iPad用には2カラム、スマートフォン用には1カラムのレイアウトにしたい場合、これを達成する最も良い方法はMedia Queriesを使用することです。簡単な記述で、ユーザーの使用しているスクリーンのサイズに合わせて、異なるレイアウトを用意することができます。

Media Queriesの詳しい使用方法は、下記ページを参照ください。

[ad#ad-2]

プラットフォームの特定

jQueryを使用して、端末ごとのプラットフォームを特定します。
プラットフォームごとにスタイルシートを適用したり、特定のプラットフォームだけにjQueryを実行させることができます。

JavaScript

var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
 if(agentID.indexOf("iphone")>=0){
  alert("iphone");
 }
 if(agentID.indexOf("ipod")>=0){
  alert("ipod");
 }
 if(agentID.indexOf("ipad")>=0){
  alert("ipad");
 }
 if(agentID.indexOf("android")>=0){
  alert("android");
 }

フォームを使用する際の注意点

フォームを使用する際、actionにはフルパスで指定します。

HTML

この指定では、ターゲットを見出しません。

<form action=" form-handler.php " method="get" >

HTML

指定にフルパスを用いると、正常に機能します。

<form action="/current-directory/form-handler.php" method="get" >

ポップアップ ダイアログの作成

jQuery Mobileの魅力的な機能の一つにポップアップ ダイアログがあります。使用するのは簡単で、リンクに「data-rel="dialog"」を加えるだけです。
使用する際には、二つの点に気をつけてください。

  • ターゲットなるページはjQuery Mobileを使ったページです。
  • ページは適切に機能する外部の別のページです。

HTML

<a href="#pop.html" data-rel="dialog">Pop up!</a>

キャンセルとセーブのボタン

このコードには二つのポイントがあります。まず、この二つのボタンはお互いに隣り合わせになり、fieldsetとclassを使って簡単に配置することができます。次に、二つのボタンは異なるテーマをもつはずです。
下記のコードは、jQuery Mobileのドキュメントから引用したものです。
参考：jQuery Mobile Demos and Documentation

HTML

<fieldset>
 <div><button type="submit" data-theme="c">Cancel</button></div>
 <div><button type="submit" data-theme="b">Submit</button></div>
</fieldset>

カラム構造を作る時のポイント

マルチデバイス用に一つのページを組み立てる際には、論理的にカラムを設計する必要があります。その際には、Media Queriesのテクニックを使用することで、スクリーンのサイズによってさまざまな構造を簡単に用意することができます。
論理的なカラムの設計方法については、下記ページを参照ください。

sponsors

top of page

©2024 coliss