各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

jQuery Mobileを使って別ページをダイアログとして表示させる

  • publish_advertise
2012/11/20

こんにちは。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>● 別ページをダイアログとして表示:</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>


 

上記のソースをブラウザで表示すると、

「ダイアログを表示」という大きなボタンが1つ表示されます。

さらに、以下のソースを 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を記述しておく方が良いでしょう。

 

ダイアログとして表示したページから、

他のページへ移動するようにリンクを作ることもできます。

 

その場合、ブラウザの履歴には「ダイアログ自身のページ」は残りません。

 

移動先から「戻る」ボタンで戻ると、ダイアログではなく、ダイアログを表示させた元ページへ直接戻ります。
さて、このダイアログの表示方法には、いくつかの表示効果(切替効果)が用意されています。

 

次回は、それらの効果を出す方法をご紹介いたします。

 

本日紹介したサンプルページはコチラ

サンプルページ①

サンプルページ②

 

 

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2012.11.29
jQuery Mobileを使って様々なページ切替効果を出す

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る