こんにちは。All About ホームページ作成ガイドの西村文宏です。
スマートフォン向けのウェブサイトは、閲覧者の画面がせまいことを前提に作成する必要があります。
せまい画面に、（メインコンテンツ以外の）文章を長く書くと、全体が見渡しにくいページになってしまいます。
だからといって、細かくページを分割してしまうと、頻繁にページを移動しなければ読めないサイト構造になってしまい、操作が面倒になります。
補足の情報を表示したい際など、短い文章や少量の画像を表示させたいだけの場合は、それを「ダイアログ」として表示できると便利です。
ダイアログなら、「独立したページ」ではなく「現在表示中のページに重ねた小さな枠」の形で表示されるからです。
そこで今回は、スマートフォンらしいデザインが簡単に作れるフレームワーク「jQuery Mobile」を使って、別のHTMLを（ページ移動することなく）「ダイアログ」として表示させる方法をご紹介いたします。
まずは、下記のHTMLソースを sample.html というファイル名で保存して、スマートフォンのブラウザで表示させてみてください。
パソコンで表示確認する場合は、Chromeの最新版などを使ってください。
- ※以下のHTMLソースを保存する際には、文字コードを「UTF-8」にしないと全体が文字化けしてしまいますので注意してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<title>jQuery Mobile ダイアログのサンプルページ</title>
</head>
<body>
<div data-role="page" id="pcontents">
<div data-role="header">
<h1>jQuery Mobile ダイアログのサンプル</h1>
</div>
<div data-role="content">
<p class="sampletitle">● 別ページをダイアログとして表示：</p>
<p>
<a href="dialog.html" data-role="button" data-rel="dialog">ダイアログを表示</a>
</p>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
</body>
</html>上記のソースをブラウザで表示すると、「ダイアログを表示」という大きなボタンが１つ表示されます。
さらに、以下のソースを dialog.html というファイル名で保存してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<title>jQuery Mobile ダイアログのサンプルページ</title>
</head>
<body>
<div data-role="page" data-theme="e">
<div data-role="header" data-theme="e">
<h1>ダイアログ用ページ</h1>
</div>
<div data-role="content">
<h2>ちょっとしたお知らせ</h2>
<p>このように、ページをダイアログとして表示させると、
ページ遷移するまでもないような情報を掲載したい場合などに便利です。</p>
<p>
<a href="sample.html" data-role="button" data-rel="back" data-theme="b">OK</a>
</p>
</div>
</div>
</body>
</html>- ※上記の2つのHTMLファイルは、ウェブサーバ上にアップロードしてから表示確認をしてください。
ローカル（HDD上など）だと、うまく動きません。
ブラウザで sample.html を表示させて「ダイアログを表示」ボタンをタップすると、 dialog.html が表示されます。
このとき、dialog.htmlは、独立したページではなく、画面中央に浮き上がる「ダイアログ」として表示されます。
このように、リンクを作るa要素に「data-rel="dialog"」という属性を付加するだけで、対象のHTMLをダイアログとして表示できます。
ダイアログから元のページに戻る（＝ダイアログを閉じる）リンクを作るには、リンクを作るa要素に、「data-rel="back"」という属性を加えます。
この属性を加えておけば、href属性値に何を記述していても元のページに戻りますが、念のため元のページのURLを記述しておく方が良いでしょう。
ダイアログとして表示したページから、他のページへ移動するようにリンクを作ることもできます。
その場合、ブラウザの履歴には「ダイアログ自身のページ」は残りません。
移動先から「戻る」ボタンで戻ると、ダイアログではなく、ダイアログを表示させた元ページへ直接戻ります。
さて、このダイアログの表示方法には、いくつかの表示効果（切替効果）が用意されています。
次回は、それらの効果を出す方法をご紹介いたします。
本日紹介したサンプルページはコチラ
