第４章 ［WebKit活用術］フリックイベントの実装 その１

第４章 ［WebKit活用術］フリックイベントの実装 その１

この章では、iPhoneならではのイベント『フリック』を使った画面遷移に挑戦します。

まず、iPhoneには様々なイベントがあることをご紹介します。

イベント名	動作	解説
タップ	指でスクリーンを軽くたたく	マウスのクリックに相当
ダブルタップ	指でスクリーンを軽く2回たたく	マウスのダブルクリックに相当
フリック	指ではじく	左右の画面遷移
ピンチイン	2つの指でタッチして広げる	画面の拡大
ピンチアウト	2つの指でタッチして縮める	画面の縮小

さてプログラムでは、下記の様にイベントを検知出来る。

// 新しくスクリーンに指が触れた場合に発生するイベント

document.addEventListener('touchstart', イベントハンドラー処理, false);

// スクリーンに触れている指をスライドさせた場合に発生するイベント

document.addEventListener('touchmove', イベントハンドラー処理, false);

検知した後、イベントハンドラーにて「タップ」「フリック」「ピンチ」を判定することで各イベント処理を実行します。

function イベントハンドラー処理(e) {

　　// 最初にスクリーンを触れた時に発生するイベント
　　if (e.type == "touchstart") { // イベントの種類を判定

　　　　// 現在スクリーンにタッチされている指の本数が1本の場合

　　　　if (e.touches.length == 1) {

　　　　　// この時点でピンチではない事が明確である。

　　　　}

　　}

　　// スクリーンに触れている指をスライドさせた場合に発生するイベント

　　else if (e.type == "touchmove") {

　　　　// 現在スクリーンにタッチされている指の本数が1本の場合

　　　　if (e.touches.length == 1) {

　　　　　// この時点でピンチではない事が明確である。

　　　　}

}

しかし、これだけではフリックなのか、上下左右のスクロールなのかが分からない。

どうも座標をみてこれらを判定する必要があるようです。

つづく

第３章 ［WebKit活用術］ユーザIDとパスワードの記憶

第３章 ［WebKit活用術］ユーザIDとパスワードの記憶。

iPhoneであってもユーザIDとパスワードを毎回入力するのは面倒です。

PC版のCookieを使用した方法で試してみます。

【手順】

① ログイン後のメニュー画面にてCookieを保存する。

メニュー画面の初期表示で、ログインのパスワード記憶チェックボックスを判定してユーザIDとパスワードをCookieに保存します。Cookieの有効期間は10日として設定。

② 次回ログイン時でCookieからユーザIDとパスワードを取得する。

メニュー画面の初期表示で、ユーザIDとパスワードをCookieより取得します。Cookie内部はプレーンテキスト形式であるためキーワードから編集が必要。

取得出来たユーザIDとパスワードを画面に設定。

メニュー.jsp（①）

【ｓｃｒｉｐｔ内に下記を記述】 // 初期表示にユーザIDとパスワードを記録 function init() { 　　　・ 　　　・ 　　　・ 　// dateを10日以降の時間に設定 　var expireDays = 10; 　// 現在の日付よりexpireDays日後を有効期限として設定 　var date = new Date(); 　date.setTime(date.getTime() + expireDays * 24 * 3600 * 1000); 　// cookieを設定 　document.cookie = "id=" + escape(前画面のID) + "; expires=" + 　　date.toGMTString(); 　document.cookie = "password=" + escape(前画面のpassword) + "; expires=" + 　　date.toGMTString(); }

ログイン.jsp（②）

【ｓｃｒｉｐｔ内に下記を記述】 // 初期表示にcookieからＩＤとパスワード取得し表示 function init() { 　　　・ 　　　・ 　　　・ 　var id = getCookie("id"); 　var password = getCookie("password"); 　document.form.userid.value = id; 　document.form.passwd.value = password; } // cookie取得メソッド function getCookie(name){ 　var strCookie=document.cookie; 　var arrCookie=strCookie.split("; "); 　for(var i=0;i<arrCookie.length;i++){ 　　var arr=arrCookie[i].split("="); 　　if(arr[0]==name)return arr[1]; 　} 　return ""; }

【結果】

PC版と同じ方法で実装出来ました。

次回はiPhone独自のインターフェイス『フリック』イベントを使用して画面遷移に挑戦します。

第2章 ［WebKit活用術］上下部のコントロールバーを削除する。

第2章 ［WebKit活用術］上下部のコントロールバーを削除する。

やっぱりセッション変数を使うWebシステムはブラウザの戻るボタンは消したいですよね。

iPhone版Safariブラウザで消してみよう。

【手順】

①index.html の<ｈｅａｄ>タグの中に下記の一行を追加します。

<ｈｅａｄ>

・・・

<meta name="apple-mobile-web-app-capable" content="yes" />

・・・

</ｈｅａｄ>

②直したindex.htmlをサーバにアップロードして下さい。

【実行】

まずはSafariブラウザのお気に入りから、TOP画面を表示してみる。

消えない・・・またしても失敗？

　　　次はアイコン（Webクリップ）からもTOP画面を表示してみるがダメか。。。

いろいろ試してみて分かったが、アイコン（Webクリップ）の再登録が必要らしい。

消せた！

やっと消えたが、開発途中に戻るボタンが消えるとかなり使いにくいことに気づく（＾＾