with the flow

WEBプログラマを目指すWEBデザイナーが書き綴る開発日誌のようなもの

iCloudを使おうとしたら「このAppleIDのメールアドレスは確認できません」と認証で弾かれる場合の解決法

Mac

iPhone4Sの受け渡しがSBのシステムダウンによって遅れに遅れてて、
当然、予約開始数日たってノコノコ予約した私なんかに順番が回ってくるはずもない(涙)ため、気分だけでも味わうかってことで、OSをLion 10.7.2にアップグレードしました。


恒例の1.4Gくらいある重いファイルをダウンロード→インストール。
完了後再起動を選択したのになぜかシステム終了しちゃったり不可解な点があったものの、電源ボタン押したらいつもの画面が何事もなかったかのように起動。


すると、デスクトップにiCloudのサインインを促すウィンドウが！
これこれ！ってことで、喜び勇んで促されるままApple IDとパスワードを入れると。。。


「このApple IDのメールアドレスは確認できません。MobileMeへサインインするためには、Apple IDで使用するメールアドレスをappleid.apple.comで変更してください。」

というアラートが。


...ん？いやいや、どう見てもいつものパスワード入れたし、IDも間違ってないし！


とか思いつつも、不安になり、ひと通り自分が使ってるパスワードを10回ぐらい入れなおしてみたり、iTunesを開いてAppleIDが合っているかを確認したりした気弱な自分ｗ


それでもやっぱり弾かれる…ってことで、根本的にパスワードが全然違うのかな？と思い、パスワードの再発行ページへ行ったものの、今度は登録したはずの生年月日が違うといって弾かれる！



…途方にくれて、google先生に聞いてみると、こんな記事を発見。
Lion 10.7.2で「iCloud」へサインインまでの顛末・・・。

すごい図入りで親切に解説されていて、ID、パスが間違っているわけではなく、アカウントの再認証をしていないからで、送られてきたメールから認証すると正常に使えるようになるとのこと。

メールは確認してたのですが、間違って送られてきたのかとおもって無視してましたｗ


だってこんな一見関係なさそうな感じだから↓

◯◯ 様

ご利用の Apple ID のご連絡先メールアドレスとして XXXX@XXXXXX.XXX をご指定いただきました。登録処理を完了するために、このメールアドレスがご本人様のものであるか確認する必要があります。下に表示されているリンクをクリックし、ご利用の Apple ID とパスワードを入力してサインインしてください。

今すぐ確認 >

このメールにお心当たりがない場合
このメールは、Apple ID アカウントに設定されているメールアドレスが追加、変更されたときに送信されます。 もしもアドレスの変更、追加にお心当たりがない場合でも確認を済ませない限り、このメールアドレスは Apple ID の連絡先アドレスとして登録されませんのでご安心ください。

詳細については、アップルのよくお問い合わせいただく質問をご覧ください。

今後ともアップルおよびアップル製品をご愛顧いただきますよう、よろしくお願い申し上げます。

アップルカスタマーサポート



「ご利用の Apple ID のご連絡先メールアドレスとして XXXX@XXXXXX.XXX をご指定いただきました。」


ってあるので、はじめは「いやいや。。。はじめから指定してたし。君また面白い事言うね〜〜」とか思って無視してたんです。ただ、


「このメールは、Apple ID アカウントに設定されているメールアドレスが追加、変更されたときに送信されます。」


とあるので、さっきのiCloudに認証しようとしたのがきっかけで送られてきたメール？のように解釈できないこともない。
でもメールアドレス変更を行ったかのように見えますよねぇ。。この文面。


「今すぐ確認」リンクをクリックすると、Appleのサイトに飛び、ログインしてくれと言ってきた。先ほどiCloudウィンドウでは弾かれたApple IDとパスを入れたら、


「メールアドレスが確認されました。」という画面が。
しかも、中にはiCloudを開始してくださいという趣旨の案内が。
これが正解だったようです。


10/15現在、iCloudをアップグレードしたてのLion 10.7.2で使えるようにするためには、メール経由での不可解？な、Apple IDの再認証が必要なようです（そういう仕様なのか、不具合なのかは不明）。


再度、弾かれまくっていたiCloudのウィンドウに、ID、パスを入れたらあっさり認証完了しました。


一般的な現象なのか？まったく原因が不明ですが、とりあえず私はこれで使えるようになりましたよ。iCloud。

同じ現象で困ってる方は一度試してみてください。

jQueryでのDOM操作にはfilter()が便利ということに今更気づいた

jQuery Java Script

お世話になることの多いNETTUTSで、jQueryのDOM検索効率化を上げるためのTipsが紹介されてました。
Quick Tip – jQuery Newbs: Stop Jumping in the Pool


内容はすっごく基本的なことなのだけど、
filter()の便利な使い方について言及されてたので自分用メモ。


基本的なjQueryのDOMの検索の書き方のお作法について。
曰く、「DOMはプールと心得よ！」とのこと。。


要は、「$(".target")とかをキャッシュせずに至る所に書いちゃうと、その度、プールに落ちた小さなコインを見つけるために飛び込ませているのと同じ事になるよ。これって無駄だよねぇ。。」と。


ajaxで中身を入れ替えるコンテンツなんかでは、入れ替えたあとに再キャッシュ、またはlive()などを使うなどの一部例外はありますが、この例え方はなるほどーって思いました。


最も、そんな非情なコードを書いても、最近のブラウザは早いのでそれを体感ではほぼわからないレベルにしてくれていますが(例の青いブラウザは除く)。


でも、速度のためというより、純粋に後の自分のために、わかりやすいコードで書いたほうが幸せになれるよねって考え方には共感できます。


で、そんなことを思いながらぼーっと記事を見てたのですが、最後のほうで、あれっ？て思う方法が紹介されてました。



クリーン化前

var tabs = $('.tabs li');
 
tabs.click(function() {
   var tab = $(this);
   tabs.removeClass('active');
   tab.addClass('active')
     .load('someHref', function() {} );
});


クリーン化後

var tabs = $('.tabs li');
 
tabs.click(function() {
   tabs.removeClass('active')
       .filter(this)
       .addClass('active')
       .load('someHref', function() {} );
});


...ですよね。.filter()で絞ったほうがいいですよねーーー。

キャッシュしておいた$('.tabs li')の中から、clickイベントが発生したliだけをfilter()で返してもらえば、クリックした要素をいちいち"var tab = $(this);"とキャッシュしなくていいという事ですね。

実際使用するときは、".tabs"はあくまでスタイル用にして、IDも別に"#navTabs"とか付けて、var tabs = $("#navTabs").find("li")　にしたら、より高速化が図れますね。

ってかこういうのは基礎だろと自分に突っ込みつつ。

iPhone4S予約した

iPhone

近くのSoftBankショップでiPhone4Sの予約してきました。

孫さん自身「ムチャクチャ」と言っていた3G/3GSの割賦残り分を実質無料にするキャンペーンの対象者に見事に当てはまっていたため。
※キャンペーンは10/14からと書いてありますが、当然それ以前の予約分もキャンペーン対象。


早い話が、「残りの割賦分はチャラにするけど、そのかわりまた2年使ってね！KDDIには行かないでね！」キャンペーンですね。
auからも出たけど、データ通信速度がSBよりも落ちること、電話がかかってきたらデータ通信が中断されることなど、いろいろとau不利の情報があって、別に電波に困ってないし電話もしないし月額も安いから、という理由でまんまとSBのキャンペーンに釣られました。はい。


さすがにiPad2が無料で手に入ると一見錯覚させられた「リンゴ割」には釣られなかったけど。
※実際このキャンペーンは本体の分割支払金には適用されないので、最低でも2000円近くは月額かかるってことですね。まあ、Wi-Fiだけしか使わない人にはいいのかも。


量販店のほうが良いのかも調べてみたけど、ヨ◯バシとかは、10/8現在、一括購入でもポイントがつくかどうかはまだわからないらしい(発売までには決めるとの情報あり)ので、分割購入がデフォルトの私はそもそも関係なし。
※10/9 追記：10/8 アキバの一部専門店では、機種変でも1000円キャッシュバック！とか、お店の公式アカウントをフォローするとQUOカードが！とかやってたみたいです。まあ微々たるもんですが。

※10/16追記：ヨ◯バシはauもソフトバンクも一括購入でポイント5%らしいとのこと。

「明日以降iPhone4Sの予約する！auで！」って方は、au版のiPhone取り扱いは比較的大きな店舗でしかやっていないこと、予約にはクレカが必須なので、auのiPhoneを購入予定で現金払い主義という場合は予約できない or その場でお店のクレジットカードを作るハメになる点にご注意を。

php+mySQL+jQueryで、コメントフォームのajax化を試す

CSS jQuery MySQL PHP

jQueryの簡易ajax通信関数、POST()を使った処理を色々試してみたくて最近やったことを放出します。

php+mySQL+jQueryで、コメント投稿をajaxで表示するのを作ってみた。
ネタ元はNETTUTS。ってか、ほぼそのまんまやっただけｗ
Learn how to AJAXify Comment Forms
http://net.tutsplus.com/articles/news/learn-how-to-ajaxify-comment-forms/

懇切丁寧な作り方、考え方のscreencast(英語)がPodCastでも配信されているのでそっちを見ながら勉強がてら作ってみた。

海外サイトのチュートリアルだから、とーぜんマルチバイト言語のことは考慮なし。自分なりにエスケープ処理等細かい部分の改善は一応行なって毛を生やした感じ。
作った結果のソースは以下。

config.php

<?php

$server = 'localhost';
$username = 'root';
$password = 'root';//macでMAMPを使用している場合。
$db = 'ajaxComments';//DB側に予め作っておく。
$charset = 'UTF-8';

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']));//ajax通信を判定する定数「IS_AJAX」を定義

index.php

<?php
<?php
if(isset($_POST['submit'])) {//ここはJS無効時に動くスクリプト
	$post = array();
	foreach ($_POST as $key => $value) {
		if(isset($_POST[$key]) && strlen(trim($value)) >= 3) {//簡易チェック
			$value = htmlspecialchars($value, 3, $charset);//htmlタグなどをエスケープ
			$post[$key] = $value;
		}
		else $error = true;
		if($key === 'email') {
			if(!filter_var($value, FILTER_VALIDATE_EMAIL)) $error = true;//emailチェック用関数を使用
		}
	}
	if(!$error) {
		require 'leaveComment.php';//エラーがなかったらコメントを出力するファイルを呼ぶ
	}
}

?>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>ajaxComments</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
	<div id="container">
		<ul id="comments"><?php include 'getItemsFromDatabase.php'; ?></ul>
		<h2 id="leaveAComment">Leave a Comment</h2>
		<div id="addComment">
			<form action="index.php" method="post">
				<p><input type="text" id="name" name="name" value="vname" /></p>
				<p><input type="text" id="email" name="email" value="ve-mail" /></p>
				<p><textarea name="comment" id="comment" rows="8" cols="40">vcomment</textarea>
				<p><input type="submit" name="submit" id="submit" value="コメント投稿" /></p>
			</form>
		<!-- //#addComment --></div>
	<!-- //#container --></div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		var tgAddComment = $("#addComment"),
			tgComments = $("#comments"),
			tgName = $("#name"),
			tgEmail = $("#email"),
			tgComment = $("#comment"),
			tgSubmit = $("#submit");

		tgSubmit.click(function(e){
			var name = tgName.val(),
				email = tgEmail.val().match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/) ? $("#email").val() : null,
				comment = tgComment.val();
			if(name.length < 2 || comment.length < 3 || email === null) {
				if($('.error').length === 0) {
					tgAddComment.find("form").append('<p class="error">入力内容が正しくありません</p>');
				}
				return false
			}
			$.post(
				'leaveComment.php',{
				'name' : name,
				'email' : email,
				'comment' : comment
				},
				function(res) {
					$(".error").fadeOut(200);
					$('<div class="overlay"></div>')
						.appendTo('#addComment')
							.fadeIn(1000, function(){
								tgComments
									.append('<li>' + res + '</li>')
										.children(':last')
										.height(tgComments.find('li:last').height())
										.hide()
										.slideDown(800, function(){
											var bodyHeight = $('html').height();
											$('#leaveAComment').fadeOut(200, function(){
												$('html').height(bodyHeight);
												$(this).text('コメントが投稿されました。').fadeIn(200);
												tgAddComment.hide(200);
											});
										});
										
							});
				}
			);
			return false;
		});
	</script>
</body>
</html>

※ネタ元のnettutsでは、"name"のvalidateにvar name = $("#name").val().replace(/[^\w\d ]+/ig, '')ってのを使用してたけど、これは完全に欧米仕様で、日本語が見事に考慮されてない。。。


nettuts使用で突き進むと、すべて日本語の名前を入力した場合、ぜんぶ""(空白)にreplaceされ、何も入力していないとみなされて、「入力内容が正しくありません」とか事務的に言われるので、nameに関してはJavaScriptでのvalidationは行わない。そのかわりpostしたleaveComment.php側で、phpにて行うことにした。


leaveComment.php

<?php

require 'config.php';

if(IS_AJAX) {
	$post = array();
	foreach ($_POST as $key => $value) {
		$value = htmlspecialchars($value, 3, $charset);//JavaScriptから渡された値は、最低限エスケープくらいはやっておく。
		$post[$key] = $value;
	}
}
$mysqli = new mysqli($server, $username, $password, $db) or die('There was a problem connecting.');

if($stmt = $mysqli->prepare("INSERT INTO comments VALUES(NULL, ?,?,?)")) {
	$stmt->bind_param('sss', $post['name'], $post['email'], $post['comment']);
	
	if(!$stmt->execute()) die($mysqli->error);
	$stmt->close();
	if(IS_AJAX) {
		echo "<h3>" . $post['name'] . "</h3>";
		echo "<p>" . $post['comment'] . "</p>";
	} else {
		header('Location: index.php');
	}
} else {
	echo 'There was an error!';
}

※NETTUTSでは、JavaScriptからのPOSTを受けて、渡された値をそのまま出力しているけど、最低限htmlのエスケープはやるべき。


getItemsFromDatabase.php

<?php
//error log出力用。公開時には取る。すでにphp.iniで指定してある場合は必要なし。
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('log_errors', 1);

require 'config.php';
$mysqli = new mysqli($server, $username, $password, $db) or die('データベース接続でエラーが発生しました。');
$stmt = $mysqli->prepare('SELECT id, name, email, comment FROM comments ORDER BY id') or die($mysqli->error);
$stmt->execute();
$stmt->bind_result($id, $name, $email, $comment);

while($row = $stmt->fetch()) : ?>

<li>
	<h3><?php echo $name; ?></h3>
	<p><?php echo $comment; ?></p>
</li>

<?php endwhile; ?>


style.css

@charset 'UTF-8';

body {
	font-family: helvetica, arial;
	line-height: 1.4em;
}

#container {
	width: 700px;
	margin: 10px auto 150px;
	color: #454545;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h3 {
	margin: 0;
	padding: 0;
	color: black;
}

h2 {
	color: #292929;
	font-size: 40px;
	margin-top: 40px;
}

p {
	font-size: 14px;
}

#addComment {
	margin-top: 40px;
	position: relative;
}

input, textarea {
	padding: .4em;
}

#comments li {
	border-top: 1px solid white;
	border-bottom: 1px solid #bcbbbb;
	padding: 20px 0 14px;
}

#comments li:last-child {
	border-bottom: none;
}
#comments li:first-child {
	border-top: none;
	padding-top: 0;
}

#comments, #addComment {
	background: #e3e3e3;
	border: 1px solid #bcbbbb;
	padding: 2em;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

input[type=text] {
	width: 70%;
}
textarea {
	width: 100%;
}

.error {font-style: italic; color: red;}

.overlay {
	width: 100%;
	height: 100%;
	background: black url(loader.gif) no-repeat 50% 50%;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	opacity: .9;
}

※DBには予め"ajaxComments"というデータベーススペース、
"comments"テーブル、そして"id","name","email","comment"フィールドを作成しておく必要があります。もちろん文字コードは"utf8_general_ci"。

※あくまで練習用なので、適切なエスケープ処理が行われていない箇所があります。使用する場合はあくまでも自己責任で。。。

RedmineをMacOS X Lionにインストールする=BitNami::RedMineが使えた！

Redmine Mac Subversion

持ってるMacをボロPPCからLion搭載のMacにかえたのをきっかけに、俄然開発意欲が復活！前から気になってたプロジェクト管理のWEBアプリ、Redmineを入れてみました。
（※ちなみに本家では見つからなかったPPC Mac用Bitnami::redmineはここで配布されてたのでインストールしてみたけど、インストール終了直前でエラーが続発して完了できませんでした。原因不明。）

コマンドラインからインストールもできるけど、いろいろと自前で入れなきゃいけないし、地雷も多いらしくめんどいな〜と思ってたら、
BitNaml::Redmineというオールインワンインストールパッケージを配布してるサイトを発見。
http://bitnami.org/ja/stack/redmine

オフィシャルパッケージではないけど、評判もいいようだったので、早速ダウンロードしてインストール。基本はNEXTボタンをぽちぽち押してくだけであっさり成功。

すでにApacheとMySQLはMAMPを入れてたのでどうなるかと思ってたのですが、MAMPはソフトの環境設定から使用するポートを変更できるので心配無用でした。
Redmine Managerのログをみると、私の環境だけかもしれませんがApache2は8080、MySQLは3306を使うようです。

MAMPではそれぞれ別のポートを使用するように変更して無事解決。
これで、Redmine使いたいときは"http://localhost:8080/redmine/"とすればOK。
Lionでも両方快適に使えるようになりました。
両方立ち上げるとメモリを結構食うのでそこだけが気になりますが。。
MAMPのApacheとMySQLとは分けて管理したかったので。


BTSはGit,Subversionなどありますが、個人使用だしWindowsで慣れてることもあってSubversionを選択。
OS XにはLeopardからSubversionが標準で付いてるので、マネジャー「manager-osx」からSubversionを起動しなくてもいいですね。節約節約。。。
ほんとにOSに入ってるかを確認するために、OS起動直後にターミナル立ち上げて、

$ svn --version

で Enterすると、いますね。バージョンは1.6.16で、ほぼ最新(Lionの場合)。

svn, version 1.6.16 (r1073529)
   compiled Jun 25 2011, 09:59:27

Copyright (C) 2000-2009 CollabNet.
Subversion is open source software, see http://subversion.apache.org/
This product includes software developed by CollabNet (http://www.Collab.Net/).

The following repository access (RA) modules are available:

* ra_neon : Module for accessing a repository via WebDAV protocol using Neon.
  - handles 'http' scheme
  - handles 'https' scheme
* ra_svn : Module for accessing a repository using the svn network protocol.
  - handles 'svn' scheme
* ra_local : Module for accessing a repository on local disk.
  - handles 'file' scheme

標準で入ってるならリポジトリの作成もできるだろってことで、
「書類」フォルダ直下に早速リポジトリ作成。

$ svnadmin create ~/Documents/repos

必要に応じて、mkdirでbranches,tag,trunkなどのフォルダも作成しておきます(svnXでも作成可)。


Subversion管理には無償で使える"svnX"を利用。
svnXを立ち上げ、リポジトリのPathにさっきつくった
"file:///Users/XXXX/Documents/repos"を指定し、Repositories項目を設定。
※"XXXX"はユーザー名です。念のため。


仕上げに、redmineの管理画面->設定->リポジトリで、
上のパスと同じ場所を指定。作成すると、無事管理画面上部に「リポジトリ」タブができました。


あとはコミットできるかテスト。
まずはRedmineの方でチケット#1を発行しておき、
svnXから何か適当なファイルをコミット。コメント欄には"テスト refs #1"と記入しておきます。
コミット後、Redmineの「リポジトリ」をみると、しっかり反映。"refs #1"を入れておいたので、チケット内にも「関係しているリビジョン」としてリビジョン1とコメント内容が表示！よっしゃ！

これからいろいろ捗りそうです。

jquery.maximage.jsで、画像に最小サイズを指定する機能を追加する

jQuery Java Script

よくFlashサイトなどで見られる、写真をフルスクリーンに表示する機能をJavaScriptで実現するjQueryプラグイン、"jquery.maximage.js"。
そこそこ軽くて、おせっかいな機能もあんまりついてない、お気に入りのプラグインです(スライドショー機能はクロスフェードのトランジションがついてないので正直微妙)。
本家デモはこちら
まー、ようはでかい画像にブラウザサイズに応じたwidthとheightを動的に付けてるだけという力技プラグインなんですが、今ではクライアント側のブラウザ性能も、ネット・PC環境も向上してるのでこういう仕組みを見てもあんまり違和感を覚えなくなりましたね。

実装方法などは"jquery.maximage.js"でググったら日本語の丁寧な解説サイトも多く見つかりますのでそちらを参考にしていただくとして。こちらとか。

ここから本題。
このプラグインの不満点をあげるとすれば、画像の最小サイズの指定ができないこと。ブラウザを小さくするとどこまでも小さくなってく。
でも、デザインの都合上、最小サイズを決めたいことはある訳で。
ということで、最小サイズを指定する変更をささやかに加えました。

初期設定に以下の変数を追加。L52あたりかな？
最小サイズ指定用の"minImgWidth"を追加。

　　　　　　　　・
　　　　　　　　・(色々な設定)
　　　　　　　　・
    resizeMsg:            resizeMsgDefaults,
    onImageShow:          function(){},
    minImgWidth:           '0'//[modified] minImgWidthを追加
  }, options);

あらかじめ最小サイズが決まってるなら'0'じゃなくてもいいですね。
続いて、画像のサイズ計算は関数"find_width_and_height"(L359あたり)で行ってるようなので、この関数内に"minImgWidth"が指定されてた時の処理を追加してreturnする配列(arrayImageSize)を上書き変更。
既にratio(比率)を計算してくれているので、横幅が分かってれば横幅÷比率で縦幅が出るので指定もらくちん。

    // If maxAtRatio == true and your new width is larger than originalWidth, size to originalWidth
    if (opts.maxAtOrigImageSize && width > originalWidth){
      arrayImageSize = new Array(originalWidth,originalHeight);
    }else{
      arrayImageSize = new Array(width,height);
    }
    if (opts.minImgWidth>0 && width<opts.minImgWidth){
      arrayImageSize = new Array(opts.minImgWidth,opts.minImgWidth/ratio);
    }//[modified]このif文を追加!
    return arrayImageSize;
  }, options);

あとは、プラグインを実行するときに、"minImgWidth"へ最小にしたい場合の横幅を加えれば完成。

$(function(){
  $("#maxImage").maxImage ({
    verticalAlign: ("top"),
    isBackground: true,
    minImgWidth: "700"
  });
});

うーん、この手の機能をフルスクラッチで作るのは相当めんどいけど、既に作ってくれてる方がいるとこういう修正だけですむのがいいところですな。
あと気になるのは、Flashのようなアンチエイリアス機能などは当然ないので、アンチエイリアスがしょぼいIE7以前のブラウザでは縮小したときに画像がガタガタに表示されてしまうこと。
こればっかりは例によってしょうがない。IE諸氏はいつものダメっぷりで逆に安堵すら覚えます。爆発するのを気長に待つとしよう。

#追記
と思ったら、IEにも独自プロパティで画像のサイズが拡大縮小された時の描画方法を指定する方法がある模様。

#maxImage img {
  -ms-interpolation-mode: bicubic;
}

この指定をすることで、IE7以降では縮小された画像がバイキュービック法でアンチエイリアス処理されるとのこと。
はじめは値は"bycubic"じゃないの？と思ったんですが、"bicubic"で正しいみたい。
ただ、IE、デフォルトでこの値になっている気も。。。画質優先であの画質なら全然ダメじゃん。。
まだ検証してないからわからないけど。
こちらのサイトで詳しく紹介されてました。

機会があるときに検証記事アップします。

#追記
デフォルトで"-ms-interpolation-mode: bicubic;"になっていないのはIE7のみ。なのでこの指定はIE7のみに有効とのことが分かりました。
IE6以前はそもそもこのオプションをサポートしてないので、IE7対策のために指定しとくといいと思います。

jQTouchのフォームをページ遷移でsubmit

jQuery Smart Phone Java Script

iPhoneやAndroid向けのサイトを簡単に作れるフレームワークと言えば、最近話題のSencha TouchとかjQuery Mobileとか、いろいろありますが。

動作が速くてjsコードも短め、手軽に実装できるのはやはりjQTouchなのではないかと。

最近jQTouchの担当者がSencha Touchのメンバーに入っちゃって、そっちが忙しくなってるぽいですが。
でもjQTouchの方はMIT Licenseで残してくれるみたい！
http://blog.jqtouch.com/

べんりべんりって書いてあるのではじめ本家からダウンロードしているのを使ってみたら、ブラウザの「戻る」ボタンを押されたときの挙動が不安定・・・いきなりページが黒くなったり。。。
ということでなんかないのかと探したら、githubでいろんな人が改善を重ねた最新のブツがあるじゃないですか！！
https://github.com/senchalabs/jQTouch

本家配布が確か106とかで、2011/1/20更新の最新版revが161ってw改善されずぎw
使ってみると、個人的にはもうβとってもいいんじゃないかという出来です。ヒストリーの問題も改善されてたし。jQuery1.5でも動いたし。body直後にdiv#jqtが作られてて、その中にあるものだけに適用されるようになってた。ナイス変更！

ただ、jQTouchの基本的な考え方は１つのページにすべてをあらかじめ読み込み、もしくはajaxで必要部分だけ取得という考え方なので、あらかじめそういう風に作っていない既存サイトを移植するのは結構たいへん。formとか、フツーにページを変えて遷移させたいんですけど。。。みたいな。
formとかaとか基本的なタグをpreventDefault()されちゃってるから。。まあシンプルに実装できて簡単にhtmlを記述できるところが売りだから当然っちゃ当然か。

ということで、formの部分とかは以下のようにしてみた。

// Bind events
$body.bind('touchstart', touchStartHandler)
  .bind('click', clickHandler)
  .bind('mousedown', mousedownHandler)
  .bind('orientationchange', orientationChangeHandler)
  .bind('submit', submitHandler)
  .bind('tap', tapHandler)
  .trigger('orientationchange');

$bodyは

// Make sure we have a jqt element
  $body = $('#jqt');

と定義されてるように、#jqtのことですな。
なので、これの"submitHandler"が割り当てられている部分を

              ・
              ・
              ・
  .trigger('orientationchange');
$(".jqForm").bind('submit', submitHandler);

上記のように修正。
これで".jqForm"がついた内部のformだけにjQTouch機能が効くようになり、フツーにページ遷移で値が送られるようになりました。