誰でも簡単にスマホサイトができる!jQuery Mobileの使い方 [基本編]

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
 簡単にスマートフォンサイトが作れる、jQuery Mobileを試してみましたので、使い方をご紹介します。基本的にhtmlを理解していれば問題ありませんでした。



jQuery Mobileのサンプルサイト

スマートフォンサイトサンプル01

 基本的な形は下記のようになります。 このくらいのhtmlで簡単にスマートフォン用のサイトが作ることができます。

link:sample_site01.html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
<title>Webネタ!</title> 
<link rel="stylesheet" href="lib/js/jquery.mobile/jquery.mobile-1.0.1.css">
<script src="lib/js/jquery-1.7.1.js"></script>
<script src="lib/js/jquery.mobile/jquery.mobile-1.0.1.js"></script>
</head>
<body>
  <div data-role="page" id="index">
    <div data-role="header">
    <h1>Webネタ!</h1>
    </div>
    <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Menu</li>
      <li><a href="#info">
        <h2>企業情報</h2>
        <p>会社概要・ご挨拶・沿革・会社所在地など</p>
      </a></li>
      <li><a href="#news">
        <h2>ニュース</h2>
        <p>プレスリリース・お知らせなど</p>
      </a></li>
      <li><a href="#project">
        <h2>事業内容</h2>
        <p>ビジョン・主要な事業など</p>
      </a></li>
    </ul>
    </div>
    <div data-role="footer">
      <h4>Copyright &copy; 2012 Webネタ! All Rights Reserved.</h4>
    </div>
  </div>

  <div data-role="page" id="info">
    <div data-role="header">
      <h1>Webネタ!</h1>
    </div>
    <div data-role="content">
      <h2>企業情報</h2>
      <p>2010年(1月~12月)の会社概要、研究・開発、生産・販売・輸出などをご紹介しています。</p>
      <p>○○は、お客様のニーズにお応えしながら環境にやさしく、安全性、快適性、信頼性などの要素を高度にバランスさせた開発に努めています。</p>
    </div>
    <div data-role="footer">
      <h4>Copyright &copy; 2012 Webネタ! All Rights Reserved.</h4>
    </div>
  </div>
  
  <div data-role="page" id="news">
    <h2>ニュース</h2>
    <p>○○が新発売!</p>
  </div>
  
  <div data-role="page" id="project">
    <h2>事業内容</h2>
    <p>○○プロジェクト</p>
  </div>
  
</body>
</html>

表示:
jQuery Mobile sample01jQuery Mobile sample02


スマートフォンサイトサンプル02

link:sample_site02.html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
<title>Webネタ!</title> 
<link rel="stylesheet" href="lib/js/jquery.mobile/jquery.mobile-1.0.1.css">
<script src="lib/js/jquery-1.7.1.js"></script>
<script src="lib/js/jquery.mobile/jquery.mobile-1.0.1.js"></script>
</head>
<body> 

<div data-role="page" id="one">
	<div data-role="header">
		<h1>Webネタ!</h1>
	</div>

	<div data-role="content" >	
		<h2>目次</h2>
		
		<p>インデックスページ</p>	

		<h3>メニュー</h3>
		<p><a href="#two" data-role="button">ページ2へ</a></p>	
		<p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">ページポップアップ</a></p>
	</div>

	<div data-role="footer" data-theme="d">
		<h4>フッター</h4>
	</div>
</div>


<div data-role="page" id="two" data-theme="a">
	<div data-role="header">
		<h1>2ページ目</h1>
	</div>

	<div data-role="content" data-theme="a">	
		<h2>2ページ目</h2>
		<p>テンプレート変更 data-theme="a"</p>	
		<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">目次に戻る</a></p>	
		
	</div>

	
	<div data-role="footer">
		<h4>Copyright &copy; 2012 Webネタ! All Rights Reserved.</h4>
	</div>
</div>


<div data-role="page" id="popup">

	<div data-role="header" data-theme="e">
		<h1>ポップアップ</h1>
	</div>

	<div data-role="content" data-theme="d">	
		<h2>ポップアップ</h2>
		<p>目次のリンクに data-rel="dialog" data-transition="pop" と追加すると、このようなポップアップも可能です。</p>		
		<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">目次に戻る</a></p>	
	</div>

	<div data-role="footer">
		<h4>Copyright &copy; 2012 Webネタ! All Rights Reserved.</h4>
	</div><
</div>

</body>
</html>



jQuery Mobileのダウンロード

 まずはjQueryとjQuery Mobileを読み込みます。
 スタイルシートなど、特に変更しない場合はjQueryとjQuery Mobileを直接リンクで読み込めば使えるようになります。変更する場合は、ダウンロードしてファイルを読み込むように設定してください。

直接読み込む場合
 下記をheadタグ内に追加してください。最新のバージョンを確認してください。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css">
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>

ダウンロードする場合
 下記ダウンロード先より最新のファイルを入手してください。
 「jquery-***.js」「jquery.mobile-***.js」「jquery.mobile-***.css」とjquery.mobile用の画像ファイルを入手して、適当なフォルダにアップロードして読み込んでください。***はバージョンです。ファイル名にminがついているものは、改行とスペースを削除した軽量版です。追記するのであれば、minなしを選んでください。

link:jQueryダウンロードページ
link:jQuery Mobileダウンロードページ

 jQuery Mobileのファイルは、上記ダウンロードページの「Zip File: jquery.mobile-***.zip」をダウンロードすれば、必要なファイルが入手できます。


jQuery Mobileの詳しい使い方は、下記をご覧下さい。
link:jQuery Mobile デモ&ドキュメント(英語)



基本形について

 jQuery Mobileでは、data-role属性に役割を記述することにより、サイトを構成します。下記の場合、data-role=”page”を持つdivタグが4つありますが、data-role=”page”で1ページ分を表しますので、この場合index,page1~3の4ページの構成ということになります。最初のページが自動的にトップページになります。

link:sample01.html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
<title>サイトタイトル</title> 
<link rel="stylesheet" href="lib/js/jquery.mobile/jquery.mobile-1.0.1.css">
<script src="lib/js/jquery-1.7.1.js"></script>
<script src="lib/js/jquery.mobile/jquery.mobile-1.0.1.js"></script>
</head>
<body>
  <div data-role="page" id="index">
    トップページの内容
  </div>
  <div data-role="page" id="page1">
    ページ1の内容
  </div>
  <div data-role="page" id="page2">
    ページ2の内容
  </div>
  <div data-role="page" id="page3">
    ページ3の内容
  </div>
</body>
</html>


 各ページにヘッダーとフッターを追記するには、ページ内にdata-role属性header,content,footerとしたdivタグを追加します。

<div data-role="page"> 
  <div data-role="header">ヘッダー</div> 
  <div data-role="content">ページの内容</div> 
  <div data-role="footer">フッター</div> 
</div> 



リンクについて

テキストリンク

 jQuery Mobileではページは1ファイルに記述します。そのためページ間のリンクは、ページ内リンクの書き方になります。

link:sample03.html#index
<div data-role="page" id="index">
  <a href="#index">トップページ</a>|
  <a href="#page1">ページ1</a>|
  <a href="#page2">ページ2</a>|
  <a href="#page3">ページ3</a>
</div>

表示
表示-テキストリンク


ボタンリンク

 aタグにdata-role=”button”を追記することによってボタンリンクになります。
link:jQuery Mobile デモ-ボタン

link:sample03.html#button
<div data-role="page" id="button">
  <a href="#index" data-role="button" data-icon="star" data-theme="a">テキストリンク</a>
  <a href="#button" data-role="button" data-icon="star" data-theme="a">ボタン</a>
  <a href="#list" data-role="button" data-icon="star" data-theme="a">リスト</a>
  <a href="#list02" data-role="button" data-icon="star" data-theme="a">リスト角丸</a>
  <a href="#theme" data-role="button" data-icon="star" data-theme="a">テーマ</a>
</div>

表示
表示-ボタンリンク


リストリンク

 ul,liタグにdata-role=”button”を追記することによってボタンリンクになります。
link:jQuery Mobile デモ-リスト

link:sample03.html#list
<div data-role="page" id="list">
  <ul data-role="listview">
    <li data-role="list-divider">Menu</li>
    <li><a href="#index">テキストリンク</a></li>
    <li><a href="#button">ボタン</a></li>
    <li><a href="#list">リスト</a></li>
    <li><a href="#list02">リスト角丸</a></li>
    <li><a href="#theme">テーマ</a></li>
  </ul>
</div>

表示
表示-リストリンク


 リストを角丸にする場合は、ulタグにdata-inset=”true”を追加します。

link:sample03.html#list02
<ul data-role="listview" data-inset="true">

表示
表示-リストリンク角丸


テーマ変更

 属性を追加することにより、テーマを変更することができます。ボタンの場合aタグにdata-icon=”home” data-theme=”a”などを追記することにより、アイコンと色を変更することができます。
link:jQuery Mobile デモ-ボタンアイコン
link:jQuery Mobile デモ-ボタンテーマ

link:sample03.html#theme
<div data-role="page" id="theme">
<a href="#index" data-role="button" data-icon="home" data-theme="a">テキストリンク</a>
<a href="#button" data-role="button" data-icon="search" data-theme="b">ボタン</a>
<a href="#list" data-role="button" data-icon="gear" data-theme="c">リスト</a>
<a href="#list02" data-role="button" data-icon="refresh" data-theme="d">リスト角丸</a>
<a href="#theme" data-role="button" data-icon="star" data-theme="e">テーマ</a>
</div>

表示
表示-テーマ変更



 jQuery Mobileを使って、スマートフォンサイトを作る基本的なことはこのような感じです。あとはレイアウトをどのようにするのかや、リンクボタンを押したときにポップアップするのか、スライドするのかなど細かいところになります。また次回に続きます。

 
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください