jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】

スマートフォン向けフレームワーク注目の「jQuery Mobile」の第2弾の記事です。前回はjavascriptを一行も書かずにjQuery Mobileでページを作成してみましたが、今回はスマホサイトで、google Mapsやお問い合わせフォームの設置など、より実践的に使える内容を作っていきたいと思います。

前回の記事はこちらになりますので見ていない人はこちらから見るとより今回の記事がわかりやすいくなります。
スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】

さて前回もあげましたが、jQuery Mobileのメリットと言えば！

マルチデバイスに対応できる
クロスブラウザ対策を考えなくて良い
WebサイトだけでなくWebアプリ開発もできる
アプリのようなフォームやボタンが簡単に実装できる(UIデザインが容易にできる)
アプリのようなエフェクトでのページ遷移が可能になる

とよく言われていますが、メリットばかりあげるのもなんなんでデメリットといえば！

完全オリジナルのデザインは出来ない。大掛かりなカスタマイズが難しい
1Pで複数のページを作成するとなると容量が重くなってしまう

というように簡単ですがデメリットも踏まえた上で勉強していくとよいと思います。

この辺については案件の規模や予想されるアクセスに対してのサーバーのトラフィック容量や制作予算にもよると思いますが、単発のランディングページや個人で運営するサイトや自社サイトでのデモなどの作成においては、手軽に構築していくという点で言えばjQueryやjQuery Mobileはとても便利な物かもしれません。

現段階では重くて使い物にならないという意見もあるようですが、まだ正式リリースしたばかりなので、今後軽量化されていくかも注目ですね。

今回はjQuery Mobileの特にウリのひとつであるUIコンポーネントを配置する方法や、お問い合わせフォーム、外出時に主に使うスマートフォンサイトには必須のGoogle Mapsを埋め込む簡単な方法もご紹介します！！

サンプルは前回の「スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】」ものをベースにしたものを使用していきます。今回の記事から見ていただいた方やjQuery Mobileの基本をおさらいをしたい方はこちらもご覧ください。

まずjQuery Mobileを使用するには、jQueryとjQuery Mobileのjsファイル、そしてjQuery Mobileのcssの、合計3つのファイルを一緒に読み込む必要があります。（順番を間違えると動きませんのでご注意を！）

今回もjQuery Mobile関連ファイルをローカルにダウンロードせにず、提供元の3ファイルの直接リンクを<head>要素内に記述して参照します。（jQuery Mobileは1.0RC2版を使っていきます。）

また、正しく動作させるためのUTF-8設定のmeta要素と、マルチデバイス対応のため、viewport設定※1のmeta要素を記述するのも忘れないで下さいね。

「viewport」 ※1
ブラウザの表示領域の事です。viewportの設定をmeta要素内で行い、ページが最初に読み込まれたときの幅指定や、拡大率の指定をデバイス間の解像度の問題等を軽減できます。jQuery Mobile alpha版ではviewportを自動的に挿入する機能があったのですがbata版からは無くなりました。

3つのファイルの読み込みとviewport設定のスクリプトは以下になります。

<!-- 1.html:4行目～9行目-->
<meta charset="utf-8">
<title>HTML5でサイトをつくろう jQueryMobile版</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-
1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"><
/script>

■ここまでのサンプルを見る（ファイル名：1.html）

ネイティブアプリのようなUIコンポーネント作成

jQuery MobileにはUIコンポーネントがたくさん用意されていて、容易にネイティブアプリのようなUIを実現することが可能です!

さっそく、ただのテキストリンクやテキストリストを、アプリのようなボタンやリストテーブルに変えてみましょう！

ボタンの表示

まずはボタン形状のUIを表示してみましょう。

とても簡単で申し訳ないのですが、単なるテキストリンクをボタン形状のUIにするには、ページ遷移先のIDを指定したa要素に属性で、「data-role=”button”」と指定するだけで作成できます。

jQuery Mobileでは、data-role属性をはじめとする様々なdata-*属性で見た目や動きを指定していきます。

data-role属性はその名の通り、ページ上で要素がどのようなrole（役割）をたすかを示します。

ではさらに！data-icon属性を使うとボタンの上にいろいろな形状のアイコンを置くことが出来ます。値の種類は豊富です。

（check , gear , star , forward , back , info , alert , minus , home , delete , plus , refresh , search , grid , arrow-l , arrow-r , arrow-u , arrow-d）
いろいろ変えてみよう！

そして前回のおさらいになりますが、data-transition属性でトランジション効果「data-transition=”pop”」も付けておきましょう！

<!-- 2.html:29行目-->
<p><a href="#" data-role="button" data-icon="info" data-transition="pop">お問い合わせ</a></p>

■ここまでのサンプルを見る（ファイル名：2.html）

jQuery Mobile　data-transition属性

リストを表示

次はリストテーブルを表示してみましょう。

リストテーブルを作成するには、ul要素に属性で、「data-role=”listview”」を指定するだけで作成できます。

<!-- 3.html:32行目～36行目-->
<ul data-role="listview">
  <li><a href="#page2" data-transition="slide">デザイン参考サイトまとめ</a></li>
  <li><a href="#page3" data-transition="slideup">Facebookページまとめ</a></li>
  <li><a href="#page4" data-transition="pop">イベント会場</a></li>
</ul>

さらに、角丸の立体的なリストテーブルにするには、同時に「data-inset=”true”」を指定します。

また、li要素に対してdata-icon属性を指定すると、リスト要素各々の上にもアイコンを置くことが出来ます。「data-icon=”plus”」など、リスト要素各々の上にも色々アイコンを配置してみましょう！

<!-- 3.html:32行目～36行目-->
<ul data-role="listview">
  <li data-icon="plus"><a href="#page2" data-transition="slide">デザイン参考サイトまとめ</a></li>
  <li data-icon="check"><a href="#page3" data-transition="slideup">Facebookページまとめ</a></li>
  <li data-icon="star"><a href="#page4" data-transition="pop">イベント会場</a></li>
</ul>

■ここまでのサンプルを見る（ファイル名：3.html）

jQuery Mobile　data-icon属性

開閉パネルを表示する

次は開閉パネルを表示してみましょう。jQuery Mobileで開閉パネルを表示するにはパネルにしたい親要素に、「data-role=” collapsible “」を指定します。そうすると、その中にある子要素のうち、見出し要素(h1〜h6)が自動的に開閉パネルのタイトルバーとなり、それ以降に続く子要素が自動的にパネルが開かれた状態の時に表示される文字や画像となります。

まずは以下のように、開閉パネルにしたいコンテンツを、先程作ったリストのすぐ下に追加しておきましょう。div<div>要素の中にタイトルと段落を記述しjQuery Mobileの開閉パネルで、タイトルをクリックしたら、すぐ後の隠れていていた段落が表示されるようにします。

<!-- 4.html:37行目～40行目-->
<div>
   <h1>About Us</h1>
<p>都内の小さなWEB制作会社ムーニーワークス [Moony Works]にてWEBサイト制作全般、WEBスクールやセミナーでの講師、記事執筆などを行っております。
</p>
</div>

■ここまでのサンプルを見る（ファイル名：4.html）

では<div>要素内の、タイトルとそれ以下のコンテンツ開閉パネルにしてみます。これも簡単すぎて申し訳ありませんが、親要素であるdiv要素に「data-role=” collapsible “」を指定します。

<!-- 5.html:37行目～40行目-->
<div data-role="collapsible">
<h1>About Us</h1>
<p>都内の小さなWEB制作会社ムーニーワークス [Moony Works]にてWEBサイト制作全般、WEBスクールやセミナーでの講師、記事執筆などを行っております。
</p>
</div>

■ここまでのサンプルを見る（ファイル名：5.html）

jQuery Mobile　開閉式パネル

あっという間にjQuery Mobileで、ネイティブアプリ並みのUIが出来てしまいました。

jQuery Mobileでフォーム！

さて今度は「お問い合わせ」ページ等で絶対必要な、フォームを組んでみましょう！

jQuery Mobileを使うと、スマートフォンに特化した、使いやすい（指が入る）フォームUIが簡単に作成できます。

まず、5.htmlの31行目に記述したボタンUIのa要素のリンク先を「”#form”」とし、ページ内の別の箇所に「<div data-role=”form” id=”form” data-add-back-btn=”true”>〜</div>」と記述して、フォーム用のページを１つ用意しよう。ページのIDは「form」とします。（jQuery Mobileでは、1つのHTMLファイル内に複数のページを用意することができます。）（参照：スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】）

<!-- 6.html：31行目-->
<p><a href="#form" data-role="button" data-icon="info" data-transition="pop">お問い合わせ</a></p>

<!--6.html：48行目～60行目-->
<!-- お問い合わせフォーム -->
<div data-role="page" id="form" data-add-back-btn="true">
  <div data-role="header">
    <h1>お問い合わせ</h1>
  </div>
  <div data-role="content">
    <p>ご質問、講師のご依頼等はこちらから</p>
 </div>
  <div data-role="footer">
    <h4>&copy;HTML5でサイトをつくろう</h4>
  </div>
</div>
<!-- お問い合わせフォームここまで -->

■ここまでのサンプルを見る（ファイル名：6.html）

jQuery Mobile　お問い合わせフォーム

準備として、「お問い合わせ」ページができました。

フォームセット

では、フォームとフォーム内のフォーム部品を記述していきましょう。

jQuery Mobileのフォームを構築する際も、通常のHTMLと同じように、action属性とmethod属性を指定したform要素内にフォーム部品を記述していきます。

<!--7.html:55行目～79行目-->
    <form action="form.php" method="post">(55行目）
　　<!--（中略）-->
    </form>(60行目）

フォーム部品：1行のテキスト入力フォーム

フォーム部品は、data-role属性に「fieldcontain」を指定した要素で各パーツ（input要素やtextarea要素など）を包んで記述します。

まずは、名前を入力させる1行のテキスト入力フォームをマークアップしてみましょう。1行テキスト入力フォームですのでinput要素を使い、ラベルとなるテキストはきちんとlabel要素でマークアップしておきましょう。テキストラベルは「お名前:」、あらかじめ入力されているテキストは「placeholder=”HTML5でサイトをつくろう”」とします。

まったく同じように、すぐ下にもう一つ、「メールアドレス:」を入力させる1行のテキスト入力フォームをマークアップしましょう。

<!--7.html:55行目～63行目-->
    <form action="form.php" method="post">
    <div data-role="fieldcontain">
      <label for="name">お名前: </label>
      <input type="text" id="name" placeholder="HTML5でサイトをつくろう">
    </div>
    <div data-role="fieldcontain">
      <label for="mail">メールアドレス: </label>
      <input type="email" id="mail" placeholder="address@oooooo.com">
    </div>

フォーム部品：ラジオボタン

次は「性別：」のラジオボタンを作ってみましょう。

jQuery Mobileでラジオボタンを表示するにはdata-role属性に「controlgroup」を指定したfieldset要素で全体を包みます。ラジオボタンはinput要素でマークアップし、複数のラジオボタンをまとめる、fieldset要素で囲って、legend要素をラベルとしましょう。

<!--7.html:64行目～72行目-->
    <div data-role="fieldcontain">
      <fieldset data-role="controlgroup">
        <legend>性別: </legend>
        <input type="radio" name="gender" id="gender1" checked>
        <label for="gender1">男性</label>
        <input type="radio" name="gender" id="gender2">
        <label for="gender2">女性</label>
      </fieldset>
    </div>

フォーム部品：複数行のテキスト入力フォーム

複数行のテキスト入力フォームは、textarea要素でマークアップしましょう。

<!--7.html:73行目～76行目-->
   <div data-role="fieldcontain">
      <label for="remark">お問い合わせ内容: </label>
      <textarea id="remark" placeholder="入力してください"></textarea>
    </div>

フォーム部品：実行ボタン

フォームの送信・キャンセルボタンを作ってフォームを完成させましょう。jQuery Mobileでは、以下を記述するだけでOKです。

<input type="button" value="キャンセル">
<input type="submit" value="送信">

これだけですと、ボタンがページ幅いっぱいに表示されますが、data-inline属性に「true」を指定することで文字数にフィットしたボタンにもできます。

<input type="button" value="キャンセル" data-inline="true">
<input type="submit" value="送信" data-inline="true">

■ここまでのサンプルを見る（ファイル名：7.html）

jQuery Mobile　フォームの装飾

jQuery Mobileでフォーム！「お問い合わせ」ページ完成です！！

jQuery MobileにGoogle Mapsを表示させよう

モバイルという特性上、スマートフォンサイトには地図がつき物です！

ユーザーの助けになるような地図情報にアクセスしやすくすることは、企業サイトやイベントサイトには大きなメリットになります。

そこで今度は、jQuery MobileでGoogle Mapsを使って地図を表示してみましょう。

まず、7.htmlの35行目の「“#page4”」からリンクする、「イベント会場」というGoogle Mapsを埋め込むためのページを、同ページ内に用意しましょう。

ページ内の別の箇所に「<div data-role=”#page4″ id=”form” data-add-back-btn=”true”>〜</div></span>」と記述して、「イベント会場」ページを用意します。（jQuery Mobileでは、1つのHTMLファイル内に複数のページを用意することができます。）（参照：スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】）

<!--8.html：119行目～133行目-->
<div data-role="page" id="page4" data-theme="c" data-add-back-btn="true">
  <div data-role="header" data-theme="b">
    <h1>イベント会場</h1>
  </div>
  <div data-role="content">
    <h1>イベント会場</h1>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div data-role="footer" data-theme="b">
    <h4>&copy;HTML5でサイトをつくろう</h4>
  </div>
</div>

■ここまでのサンプルを見る（ファイル名：8.html）

jQuery Mobile　google Maps

準備として、地図を表示させるための「イベント会場」ページができました。

続いて、Google MapsのAPIを読み込むための直接リンクをhead要素内に埋め込みます。

<!--9.html：9行目-->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

そしてそのすぐ下に、地図を表示するためのjQueryを記述します。具体的には、通常以下のように必要事項を記述します。

<script> 
$(document).ready(function(){
$('#マップを埋め込むページのID').bind('pageshow', function(){
//地図作成
var target = document.getElementById('埋込む要素のID'),
infowindow = new google.maps.InfoWindow(target),
latLng = new google.maps.LatLng(地図の中心の緯度, 地図の中心の経度),
map = new google.maps.Map(target, {
zoom: ズーム率,
mapTypeId: google.maps.MapTypeId.ROADMAP}),
marker = new google.maps.Marker({
title: '地図上に配置したいマーカー名',
position: latLng,
map: map});
map.setCenter(latLng);
infowindow.open(map);
});
});    
</script>

では、実際にスクリプトを埋め込んでみましょう。サンプルでは六本木ヒルズを表示するよう、jQueryは以下のように記述してみました。

また、jQuery Mobileでは、イベントや関数は、jquery.jsとjquery.mobile.jsの間に記述しますので、jquery.mobile.jsを読み込む<script>要素を、Google Map APIを読み込む関数を挟み込むように、下に（32行目）移動します。

<script>
      // Google Map API
      $(document).ready(function(){
        $('#page4').bind('pageshow', function(){
          //地図作成
          var target = document.getElementById('map'),
          infowindow = new google.maps.InfoWindow(target),
          latLng = new google.maps.LatLng(35.6604,139.729043), //地図の中心の緯度,経度
          map = new google.maps.Map(target, {
            zoom: 15, //ズーム率
            mapTypeId: google.maps.MapTypeId.ROADMAP}),
          marker = new google.maps.Marker({
            title: '六本木ヒルズ', //配置するマーカーの名前
            position: latLng,
            map: map});
          map.setCenter(latLng);
          infowindow.open(map);
        });
      });
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

そして、地図を表示させたいHTMLの箇所に、「

map“>

」などと記述し、この”map“というID名をjQueryに取得させ、ここに地図を生成します。

<!--9.html:158行目-->
<div data-role="content">
    <h1>イベント会場</h1>
    <div id="map"></div>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>

また表示する地図の幅や高さ等を指定するCSSは以下のように指定しました。

/*9.html:41行目～47行目*/
/*地図の幅や高さ等のスタイルを指定するCSS*/
#map {
	width: 100%;
	height: 240px;
	border: 7px solid #69C;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

■ここまでのサンプルを見る（ファイル名：9.html）

jQuery Mobile google maps

サンプルは以上で完成です！！

まず、（１）HTMLの埋め込む箇所にid名を付け、（２）その箇所にjQueryを使ってGoogle Mapsを呼び出し、（３）表示する地図にCSSでスタイルを加えるだけです。簡単ですね！

いかがでしたでしょうか？？今回はjQuery Mobileを使って、google Mapsを読み込んだりお問い合わせフォームを作成したｒ使いそうな機能をサイトを組んでみました。

前回の特集、「jQuery Mobileでスマホサイトを作ってみよう！」【基本編】と合わせると、簡単に立派なスマホサイトが完成します！（ただし内容によっては重くて使えない場合があるので注意）

すべてオリジナルで自由にデザインできるというわけではないですがデザインのカスタマイズも出来ますので（CSS3の知識を要しますが）、マルチデバイスに対応したjQuery Mobileを、イベント告知サイトやスマホ専用のランディングページなどにまずは導入＆提案してみてはいかがでしょうか！

jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】

ネイティブアプリのようなUIコンポーネント作成

ボタンの表示

リストを表示

開閉パネルを表示する

jQuery Mobileでフォーム！

フォームセット

フォーム部品：1行のテキスト入力フォーム

フォーム部品：ラジオボタン

フォーム部品：複数行のテキスト入力フォーム

フォーム部品：実行ボタン

jQuery MobileにGoogle Mapsを表示させよう

この記事を書いた人

最近書いた記事

この記事に関連する記事

サイト内検索

最新のエントリー

まずはここから始めよう！作業効率を早めるPhotoshopとIllustratorのショートカットまとめ（ファイル操作・コピペ・ズーム関連）

Instagram（インスタグラム）の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。

アプリ風インターフェイスのフォトギャラリーをCSS3で作成する【jQuery連載17】