トップページへ戻る

準備

Safariがインストールしてあるのを確認
XHTML5を思い出す

１、iPhoneシミュレータの導入

iPhoneを持っていない人はiPhoneの画面をシミュレーションするソフトを使って、どのように表示されるか確認。

Windowsで使う場合、以下のソフトの導入が必要

Adobe Air

iBBDemo(http://code.google.com/p/ibbdemo2/downloads/list) （ただし、セッションに対応していないので、注意。iPhoneの動きと同じでない所が「かなり」ある。あくまでも「表示の大きさ」確認が目的です。その他の機能はSafariの方が、iPhoneに近い。）

CTRL+2でiPhoneの画面に、CTRL+左矢印で縦になります。

Safari(これが無いと、動作しない）

２、jQueryモバイル

jQuerymobileでiPhoneの画面を作ってみよう。

スマートフォンの画面は、PCの画面と全く別物です（これは、一般の携帯Webの画面についても、言えることなんですけれども）
画面の幅は狭く、普通のPCのページは小さく表示され、見にくくなってしまいます。

これらをあまり意識せず、簡単なHTMLを書くだけで、そこそこの物を作れるのが、jQuery Mobileです。
スマートフォンの画面のために作られた、非常に優れたライブラリで、「必須の知識」と言われるほど普及してきています。

http://jquerymobile.com/

設置方法

jQuery mobileは最新版の1.0b2を使います。

jquery mobile 1.0b2のCSSと、jquery1.6を読み込んだ後に、jquery mobileを読み込みます。順番を間違えると動きません。

以下のコードをXHTML5のヘッダに書くだけで、使えるようになります。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

API

ここが良いでしょう。なにぶん新しいものなので、英語サイトが目立ちます。

jQuery mobileを使うときは、必ず見なければならないページです

 

３、テストアプリ（ページ移動）

タグはxhtml5で書くことにします。今後メジャーになっていくxhtmlの仕様です。

（JSPで出力させる場合は、<%@ page contentType="text/html; charset=UTF-8" %>でないとダメなようです。）

プレゼンテーションアプリケーション

ページの遷移の仕方を覚えましょう。

ひとつのページに、複数のページを書きます。もちろん、別のファイルにリンクすることも出来ます。

タイトルは<h1>タグで囲うなど、普通のXHTMLと同じようにやって貰えばいいと思います。

以下の例を、public_html/tomcat/mobile2011に保存して、Safariか、iBBDemoで見てください。

例 (jqMobileQuestion1.html)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<title>jQuery Mobile</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />　
 <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head> 
<body>
<div data-role="page" id="one">
    <div data-role="header" data-theme="b">
        <h1>Header</h1>
        <a href="#two">次のページヘ</a>
    </div>
    <div data-role="content">
  test
    </div>
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>
<div data-role="page" id="two"> 
    <div data-role="header" data-theme="b">
    <h1>test</h1>
    </div> 
    <div data-role="content">
    <h1>content</h1>
    </div> 
    <div data-role="footer">
    <h1>footer</h1>
    </div> 
  </div>
</body>
</html>

☆　サンプルアプリケーション ☆

 

問題1


次のようなプリケーションを、jQuery Mobileでつくりなさい。

自分の趣味の紹介を紹介するページです。（自分の趣味を、プレゼンするつもりで！）

ページは４ページ以上。戻るボタンを付けること。
画像を１ページに１枚以上いれること。

ファイル名 : public_html/tomcat/mobile2011/jqMobileQuestion1.html


4、Ajax通信の仕組み

次の課題（フォーム、ボタン）は、Ajax通信をします。

Ajaxとは、ページ全体を再読み込みしなくても、ページの一部が書き換えられる仕組みです。

（XHTMLでは、<iframe>のイメージに近い）

次の例で確認しておく。

jqMobuleQuestion11.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>jQuery Mobile</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
   $(function(){
 $("#smit").click(function(){
 $.post("ajax.jsp",$("#tmp").serialize(),function(html){
 $("#res").append(html);
 });
 });
 });
 </script>
</head>
<body>
<h4>戻って来たデータ（追加）</h4>
<div id="res">&nbsp;</div>
<form id="tmp">
<fieldset>
<legend>名前を入れて、送信</legend>
<label for="name1">お名前:</label>
<input type="text" name="name1" id="name1" value=""  /><br />
<label for="name2">意見:</label>
<textarea name="name2" id="name2" value=""  /><br />
</fieldset><br />
<input id="smit" type="button" value="送信します" />
</form>
</body>
</html>

ajax.jsp 

<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<jsp:useBean class="java.util.Date" id="dt" />
<div style="color: red;font-size: 36px;border: 1px solid black;">
   OK!受信しました<br />
   ${param.name1}<br />
   ${param.name2}<br />
   ${dt}<br />
</div>

問題2

上の例を

ファイル名 : public_html/tomcat/mobile2011/jqMobileQuestion11.html
ファイル名 : public_html/tomcat/mobile2011/ajax.jsp
に保存し、動作を確認しなさい。

パラメーターの値をあと二つ（電話、住所）増やしなさい。
パラメータの各値を表形式で表示するように、改良しなさい。

☆　サンプル　☆

５、テストアプリ（フォーム、ボタン） 


iPhone用フォームを作ってみましょう。data-role="content"の所に、フォームの部品を配置

各部品（input要素など）はformタグで囲まれていなければなりません。
部品には

<label for="id名">ラベル</label><input type="text" id="id名" />

として、ラベルを付けておく必要があります。

フォームのデータを送信するときは、ajaxを使う場合と、直接送信する場合とがあります。

フォームの部品の解説

form要素は、Safariでは、email、url、telなどのテキストボックスの機能は変わりません。入力時エラーを出すには、javascriptを書きます。

iPhoneの実機（シミュレータではこれを確認できない）では、フォーカスが当たった時に出るキーボードの種類が変わるはずです。

☆　サンプルアプリケーション　☆

例　(jqMobileQuestion2.html)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
　
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="one">
  <div data-role="header">
    <h1>Header</h1>
  </div>
  <div data-role="content">
    <form action="formtest.jsp" method="post">
      <div data-role="fieldcontain">
        <label for="name1">名前:</label>
        <input type="text" name="name1" id="name1" value=""  /><br />
        <label for="name2">パスワード:</label>
        <input type="password" name="name2" id="name2" value=""  /><br />
        <label for="name3">数量:</label>
        <input type="number" name="name3" id="name3" value=""  /><br />
        <label for="name4">電子メール:</label>
        <input type="email" name="name4" id="name4" value=""  /><br />
        <label for="name5">電話番号:</label>
        <input type="tel" name="name5" id="name5" value=""  /><br />
        <label for="name6">URL:</label>
        <input type="url" name="name6" id="name6" value=""  /><br />
        <label for="textarea">ご意見をお書きください:</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea><br />
        <label for="search">検索:</label>
        <input type="search" name="s" id="search" value="" /><br />
        <label for="s2">スライダーで数を選んで:</label>
        <input type="range" name="s2" id="s2" value="0" min="0" max="100"  /><br />
        <label for="slider">onかoffにしてください:</label>
        <select name="s3" id="slider" data-role="slider">
          <option value="off">Off</option>
          <option value="on">On</option>
        </select><br />
        <fieldset data-role="controlgroup">
        <legend>選んでください:</legend>
        <input type="radio" name="r1" id="radio-choice-1" value="choice-1" checked="checked" />
        <label for="radio-choice-1">Cat</label>
        <input type="radio" name="r1" id="radio-choice-2" value="choice-2"  />
        <label for="radio-choice-2">Dog</label>
        <input type="radio" name="r1" id="radio-choice-3" value="choice-3"  />
        <label for="radio-choice-3">Hamster</label>
        <input type="radio" name="r1" id="radio-choice-4" value="choice-4"  />
        <label for="radio-choice-4">Lizard</label>
        </fieldset><br />
		<label for="select-choice-1" class="select">配達のオプション:</label>        
		<select name="select-choice-1" id="select-choice-1" data-inline="true"> 
			<option value="standard">標準：７日</option>
			<option value="rush">急ぐ: ３日</option>
			<option value="express">特急: 次の日</option>
			<option value="overnight">大至急</option>
		</select>
        <input type="submit" value="送信します" />
      </div>
    </form>
  </div>
  <div data-role="footer">
    <h1>Footer</h1>
  </div>
</div>
</body>
</html>

例　(formtest.jsp)　上のフォームのデータを受信して、結果を返すJSPです。

ajaxを使って前のページの一部として読み込まれるので、<html>や<body>は書かなくても良いが、
<div data-role="page">は必要です。

<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<div data-role="page" id="index">
<div data-role="header" data-backbtn="false">
   送信されたデータ
   </div>
<div data-role="content">
   名前=${param.name1}<br />
   パスワード=${param.name2}<br />
   数量=${param.name3}<br />
   　電子メール=${param.name4}<br />
   電話=${param.name5}<br />
   URL=${param.name6}<br />
   ご意見=${param.textarea}<br />
   検索=${param.s}<br />
   数字スライダー=${param.s2}<br />
   フィリップスライダー=${param.s3}<br />
   ラジオボタン= ${param.r1}
   <br />
</div> 
<div data-role="footer">
<a href="jqMobileQuestion2.html" rel="external" data-role="button" >
戻る（ページを完全に読み込み直す）</a>
<a href="jqMobileQuestion2.html" data-role="button" >
戻る（一部だけ書き換える）</a>
<h1>&copy;Hanrin</h1>
</div>
</div>

問題３

上のフォームアプリケーションを、

public_html/tomcat/mobile2011/jqMobileQuestion2.html　と
public_html/tomcat/mobile2011/formtest.jsp

に保存し、動作を確認しなさい。

JSPは、まだ「配達のオプション」のデータを受け取れないので、受け取れるようにしなさい。


トップへ戻る