2010年10月18日
iPad対応
"My Book."はiPadに対応しています。
・縦スクロールの固定（iPadタッチイベントの縦スクロール防止）
jQueryを利用しない場合は以下のような感じです。
◆なぜ対応したのか？
オシャレだからです。（笑）
日曜日の昼下がり、スターバックスコーヒーで読書して、良さげなフレーズを見つけたら、
サッとiPadを取りだし、"My Book."にて読書ノートを記録する。
そんなオサレな日々を迎えるために対応したと言っても過言ではありません。
（え？オシャレじゃない？）
実は当初、iPad対応をする予定は無かったのですが、ヨドバシカメラにて試しに"My Book."を開いてみたら、
結構良い感じで、オシャレな未来が見えたから完全対応できそうな自信が湧いたので、路線変更してiPad対応する事に決めました。
なので、UIは一回完全に作り直しているんですよ。
すんごい大変でした。（1か月かかった・・・）
◆対応時の苦労話
・処理速度
CSS3の項でも書きましたが、iPadはjavascriptの処理能力（特にアニメーション）が低いので、
javascriptアニメーションをバリバリに組んでしまうと、かなりストレスフルなアプリになってしまいます。
そこで活用したのがCSS3です。
CSS3にてアニメーションを実行すると、サクサク動きます。
これがまずは最大のコツですね。
・セッション
iPadはサイトを開きっぱなしでスリープさせる事が多いので、セッションタイムアウトが非常に厄介です。
"My Book."ではその辺りを考慮し、様々なセキュリティリスクを回避した上で、セッションが切れている場合は自動的に再ログオンする仕組みを設けています。
どんな風にセキュリティリスクを回避しているかは、対面でお会いした方のみにお知らせします。
（そこまで出し惜しみする程のモノじゃないんですが、セキュリティ絡みなのでね）
・横スクロールの固定（iPadタッチイベントの横スクロール防止）
タッチインターフェース対応を行うと、スライドした時に画面が縦横にスクロールするとジャマ臭いです。
横スクロールは以下のmetaタグ設定で防止できます。
<meta name="viewport" content="width=768, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
# 当然ながら、サイトの横幅を768px以下に収める必要があります。
ついでに、拡大縮小も行えないようにすれば完璧です。(user-scalable=noを指定する）
（もちろん、その場合は拡大縮小しなくても画面が見やすくなければならないですが）
・縦スクロールの固定（iPadタッチイベントの縦スクロール防止）
上記のmetaタグでも縦スクロールは防止できないんです。
これは、javascriptで防止します。
具体的にはこんな感じです。（jQueryの場合）
$(document).bind("touchmove", function()
{
event.preventDefault();
});
jQueryを利用しない場合は以下のような感じです。
document.addEventListener('touchmove', bindTouch, false);
function bindTouch(event)
{
event.preventDefault();
}
これで、画面は完全に固定されます。
WebでiPadネイティブレベルのアプリを制作する第一歩ですね！
・ダブルクリック
iPadってダブルクリックができない（よね？！）ので、ダブルクリックのイベントは設けても操作してもらえません。
なので、ダブルクリックしなくても扱えるようにUIをデザインする必要があります。
・タッチインターフェース
タッチ系はjavascriptのイベントで拾えます。
これはそこまで苦労はしなかったのですが、タッチ＆スライドの距離でページ送りする量を計算したあたりが工夫点でしょうか？
以下のようなコードを組んでみました。
やっている事はカンタンで、gapx, gapyがスライドした距離です。
この距離を適当なピクセルで割って、係数を出します。
"My Book."の場合は30ピクセルで割っているので、例えば120ピクセルスライドした場合、係数として4が算出されるので、4刷分本が送られる事になります。
本来は加速度まで加味したいのですが、そこまでは作れなかった・・・orz
誰か、頭の良い人が作ってくれたら、使わせてもらおうかな。ｗ
/**
* iPadイベントをバインドします.
*
* @param $target タッチインターフェースをバインドするHTMLオブジェクト（jQueryセレクト結果）
* @param rightFnc 右にスライドした時に起動させる関数
* @param leftFnc 左にスライドした時に起動させる関数
* @param upFnc 上にスライドした時に起動させる関数
* @param downFnc 下にスライドした時に起動させる関数
*/
var a2sq_dragstart_x = 0;
var a2sq_dragstart_y = 0;
function bind_iPadEvent($target, rightFnc, leftFnc, upFnc, downFnc)
{
$target.bind("touchstart", function()
{
a2sq_dragstart_x = event.touches[0].pageX;
a2sq_dragstart_y = event.touches[0].pageY;
});
$target.bind("touchend", function()
{
if(event.changedTouches[0])
{
var gapx = a2sq_dragstart_x - event.changedTouches[0].pageX;
var gapy = a2sq_dragstart_y - event.changedTouches[0].pageY;
var velocityx = Math.ceil(Math.abs(gapx) / 30);
var velocityy = Math.ceil(Math.abs(gapy) / 30);
if (gapx <= -15)
{
if (rightFnc != null) rightFnc(velocityx);
}
if (gapx >= 15)
{
if (leftFnc != null) leftFnc(velocityx);
}
if (gapy >= 15)
{
if (upFnc != null) upFnc(velocityy);
}
if (gapy <= -15)
{
if (downFnc != null) downFnc(velocityy);
}
}
});
}
バインド側のソースはこんな感じ
bind_iPadEvent($("#a2-square-book-canvas"),
function(velocity)
{
lineUp(velocity);
},
function(velocity)
{
lineUp(velocity);
}, null, null);
トラックバックURL
この記事へのコメント
1. Posted by 電子 2011年08月24日 00:39
食器洗乾燥機|電子|オーブン|トースター |炊飯器|精米器 |生ごみ処理機 |消耗品|2. Posted by マイクロソリューション Micro Solution Inc. 2011年09月04日 17:48
アイカップ
