iOS+jQuery:ジェスチャーイベント

ジェスチャーイベント

iOSではタッチイベントとは別にジェスチャーイベントと呼ばれるものがあります。
種類はタッチイベントと似ており、以下の4種類有ります。

iPhoneのジェスチャーイベント
・gesturestart:2点以上のタッチを検知したときに発生
・gesturechange:タッチポイントが移動したときに発生
・gestureend:タッチポイントが1点以下になったときに発生
・gesturecancel:システムによってジェスチャーイベントがキャンセルされたときに発生

 
まずはgesturecancel以外のイベントを確認しましょう。各イベントが発生すると
緑のdivに発生したイベント名を表示するようにしています。
いろいろなジェスチャーイベント ※iOSのsafariで確認してください。
 
 
 
  

拡大率の取得

ジェスチャーイベントのイベントオブジェクトにはタッチイベントにはないプロパティが
あります。ここで紹介するのはタッチポイントの2点間距離を取得するscaleプロパティです。
以下のサンプルを確認してください。
拡大率の取得 ※iOSのsafariで確認してください。
 
このサンプルで2点以上タッチしタッチポイントを移動すると、最初の距離を1とした拡大率を
緑色のdivに表示します。この処理に数学的な知識は必要なく以下の様なソースで簡単に取得
することができます。

$(document).on("gesturechange", function(eo){
 var eo = eo.originalEvent;
 $("#test").text(eo.scale);
});

利用するイベントはgesturechangeです。これでポイントが変化したときに処理を
することができます。また前回のタッチイベント同様にジェスチャーイベントの
イベントオブジェクトを利用する場合は、上記のようにoriginalEventを利用します。
そして拡大率を取得するには上記のようにイベントオブジェクトのscaleプロパティを
利用するだけなのです。
 
 
 
 

回転の取得

拡大率と同様にして2点間の角度の変化を取得することもできます。以下のサンプルで
確認してください。勘違いしやすいのは画面における2点の角度ではなく、最初に
タッチした点の状態を0として、タッチポイントを移動したときに何度変化したかの
変化量を取得する点です。
回転の取得 ※iOSのsafariで確認してください。
 
ソースは以下の様にscaleプロパティの代わりにrotationプロパティを利用するだけです。

$(document).on("gesturechange", function(eo){
 var eo = eo.originalEvent;
 $("#test").text(eo.rotation);
});

 
 
 
今回紹介したジェスチャーイベントを利用すれば、iOSで良くある写真の拡大縮小や
回転などのインターフェイスも数学的な知識無しで作成できそうです。
 
 
おしまい
 
 
 

iOS+jQuery:タッチした場所に移動

個人的にカスタムスクロールの仕組みを作成したいと思っています。
ブラウザがもとから持つ縦スクロールの機能に追加して、部分的に横スクロールできる
エリアがあると、縦方向にカテゴリを切り替えながら各カテゴリの商品を横スクロールで
確認できるインターフェイスが実現できて、なかなか便利なのではないかと考えているのです。
 

PCサイトでの例

今回はその前段階として、タッチした場所に移動するdivを作成してみました。
とはいえ、そのようなものはPCサイトでも作成したことがないので、まずはPCの
ブラウザでクリックした場所にdivを移動させるサンプルを作成しました。
以下のサンプルをPCのブラウザで開き、ページ内の任意の点をクリックしてください。
その場所に緑色の小さいdivが移動します。
サンプル:クリックした場所にdivを移動させる(PC) PCのブラウザで確認してください。
 
移動はjQueryのamimateメソッドを利用しています。今回のサンプルで新しく学んだのは
イベントオブジェクトのpageXとpageYです。タッチイベントでも利用しましたが
これはスマートフォンだけでなく、通常のPCでも利用できるものだったのですね。
リファレンス:pageX/pageY

$(document).on("click", function(eo){
 var myX = eo.pageX;
 var myY = eo.pageY;
 $("#test").stop(true,true).animate({left:myX, top:myY});
});

あとはこれをiOS用に置き換えれば完成です。
 
 
 

iOSでの例

最初に完成したサンプルとソースを紹介してから解説したいと思います。
サンプル:クリックした場所にdivを移動させる(iOS) iOSのsafariで確認してください。

$(document).on("touchstart touchmove touchend", function(eo){
 var eo = eo.originalEvent;
 var myX = eo.touches[0].pageX;
 var myY = eo.touches[0].pageY;
 $("#test").stop(true,true).animate({left: myX, top:myY});
 eo.preventDefault();
});

まず利用したイベントはtouchstart touchmove touchendです。これで
タッチしたときだけではなく指で画面上をなぞっても、それに追従してdivが移動します。
続いてpageXやpageYでタッチした座標を取得するのですが、PCとことなりiOSではマルチタッチ
に対応しているので、上記のようにtouchesから特定のポイントを選ぶ必要があります。
アニメの処理は変更有りません。最後にpreventDefaultを利用して、指で画面をなぞっても
スクロールしないようにしました。
 
 
おしまい
 
 
 

iOS+jQuery:部分横スクロール(1)

いま住んでいる場所は人口15万人の場所なのに、どこの本屋にも「web designing」がおいて
ありません…。今月のSmartphone Labの記事でフリックについての説明があるので
何かのついでにAmazonで購入しようと思います。
 
 
 

まずはドラッグから

ということで独自にスクロールについて学んでいこうと思います。
動作確認はPCのほうがしやすいので、まずはPCで機能するスクロールを作成していきます。
まずは以下のサンプルを確認してください(スマートフォン用を考えているので
webkit系のsafariかchromeでしか動かないと思います)。
このサンプルでは緑色のdivをマウスで横方向にドラッグすることができます。
サンプル:部分横スクロール
 
ではソースを確認していきましょう。jQueryの前にhtmlとcssの構成からです。
まず緑のdiv(class名はpage)は全部で4つあり、これがコンテナ役のdiv(id名がpageMaster)
に内包されています。そして、これが表示エリアのdiv(id名がpageArea)に入っています。
 
表示エリアのdivにはcssで「overflow:hidden;」の設定がしてあるので
4ページと横に長いpageMasterの一部分しか表示されていない状態になります。
以下の様にAndroidでは問題があるようですので、まずはiOS向けに作成したいと思います。

Androidにおいてのoverflow:hidden
iOSでは「overflow:hidden」の設定は正常に機能しますが、
Androidでは問題があるようです。以下のサイトに詳しく説明されています
to-R様:Androidにおけるコンテンツフィットと「overflow:hidden」

 
基本的な考え方としては、pageArea上でマウスボタンが押されたら、カーソルに合わせて
pageMasterを動かすようにして、マウスボタンが離されたら移動を停止するようにします。
細かい説明はソースにコメントが書いてあるので確認してください。
 
 
数学的な処理を行っている「moveFunc」は簡単そうに見えて、なかなか理解しにくい部分です。
まず以下の部分では、最初にボタンを押された位置(click_x:これはpageArea上で
マウスダウンされたときに記憶しています)から現在のカーソルの位置(eo.pageX)を
引くことで、ドラッグされた距離を求めています。

var dragX = click_X - eo.pageX;

つづく以下の処理でpageMasterの元々の位置(target_X:これはpageArea上で
マウスダウンされたときに記憶しています)から引くことで、新しい位置newTarget_Xを
算出しています。

newTarget_X = target_X - dragX;

つづくif分で指定範囲以上スクロールしないようにして以下の行で、jQueryのcssメソッドを
利用してpageMasterの位置を計算で求めたnewTarget_Xの位置に移動させています。

$("#pageMaster").css({left: newTarget_X});

 
 
 
これで部分的な横スクロールが完成しました。しかし年表のように区切りがないものを
スクロールさせるには良いかもしれませんが、サンプルのようにページの区切りがある場合は
ページの区切り以外で止まらないようにしないといけません。
次回はこの処理を追加します。
 
 
おしまい
 
 
 

iOS+jQuery:部分横スクロール(2)

前回に引き続き、まずはPC上で機能するスクロールを作成していきます。
まずはサンプルを確認しましょう。ソースにコメントがあるので、記事と合わせて読んでください。
サンプル:部分横スクロール(スナップ)
 
 
 

ドラッグが終わったらスナップ

今回のサンプルの特長は、ドラッグが終わったら一番近くのページに移動(スナップ)する
ことです。前回のソースに追加した部分を確認していきましょう。まずは以下の部分で、
スナップする座標を設定しています。
この配列に記された数値はページがピッタリと表示される座標です。

var pagePosArray = [0,-205,-410,-615];

 
次は以下の部分です。これはpageMasterの移動範囲を決めている部分ですが、前回のサンプル
よりも左右に50px移動範囲を広げています。iOSのサファリではスクロールする際に
ページ端よりも少しだけ余分に移動できる、ゴムを引っ張ったような演出になっているのですが
これを実現するためです。

var page_min = -(totalWidth-dispArea) -50;
var page_max = 0 +50;

 
つづいてはpageAreaのmousedownイベントの部分です。ここには以下の1行が追加されて
います。今回のスナップはjQueryのanimateを利用しているのですが、アニメ中に再ドラッグ
された場合を考え、ドラッグする場合は無条件に以前のアニメを停止するようにします。
そうしないと、ドラッグしようとしてもアニメでページが移動してしまうからです。

$("#pageMaster").stop(true,false);

 
そしてドラッグが完了したときの処理、つまりmouseupのイベント部分には以下の
1行が追加されています。ここで実行されているsnapFuncでpageMasterを最寄りの
ページに移動させる機能を持ちます。

snapFunc(newTarget_X);

 
 
ということで、今回のサンプルで一番重要なsnapFuncの説明です。
ポイントはfor文です。ここで最初に設定したページ位置の配列pagePosArrayと現在の
pageMasterの位置(これは引数で送られてきます)を1つずつ比較して、一番距離の短い
つまり近いページを探します。一番近いページが見つかれば簡単です。その位置にjQueryの
animateを利用して移動するだけです。
 
 
これで、どこでドラッグを完了してもページぴったりに移動するスクロールが完成しました。
あとは、これをスマートフォン用に書き換えるだけです。それは次回にしましょう。

今年のブログ更新は本日までにしたいと思います。来年は5日から開始する予定です。
それでは皆様よいお年を!

 
 
 

iOS+jQuery:部分横スクロール(3)

昨年末に完成させたPC版のスクロールをスマートフォン用に変更するのは簡単です。
まずは完成したサンプルを確認しましょう。
サンプル:部分横スクロール(iOS版) iOSのsafariで確認してください。
 
ソースを確認してください。前回のソースから変更している部分はコメントが書いてある
4カ所だけです。PCとスマートフォンの最大の違いはイベントですから、まずはイベントを
書き換えています。ドラッグを開始する部分は以下の様にmouseupからtouchstartに
変更しました。

$("#pageArea").on("touchstart", function(eo){

 
そしてドラッグを完了する部分は以下の様にmouseupからtouchendとtouchcancelに
変更しています(システム側の都合でタッチがキャンセルされたときもドラッグを停止した方が
無難なのでtouchcancelも含みました)。

$(document).on("touchend touchcancel", function(eo){

 
 
残りの変更点はイベントオブジェクトについてです。これは以前説明したようにjQueryの
イベントオブジェクトにはタッチイベントが含まれていないのでオリジナルのイベントオブジェクト
にアクセスする必要があるからです。ということで、イベントオブジェクトが必要な部分に
以下の処理を追加してタッチイベントのプロパティにアクセスできるようにしています。
これで完成です。

var eo = eo.originalEvent;

 
 
 

safariのUAを変更する

PCでスマートフォン用のサイトを閲覧したい

スマートフォン用のサイト作成を学ぶのであれば、既存の企業サイトを研究するのが
一番良いと思います。しかしスマートフォンではソースを表示させるのも大変です。
 
スマートフォン用のサイトはアドレスを直接入力すればPCでも閲覧できるものも
多いのですが、そもそもスマートフォン用のアドレスが分かりませんし、サイトに
よってはPCでアクセスすると強制的にPC用のサイトに飛ばされてしまいます。
 
そこで活用するのがユーザーエージェント(UA)の偽装です。UAを変更して
スマートフォンになりすませばPC上でスマートフォン用のサイトを閲覧することです。
実際に今回紹介するテクニックを利用してiPhoneと偽装してYahooにアクセス
しました。すると以下の様にスマートフォン用のサイトを表示してくれました。
しかし勘違いしないようにしましょう。これはUAを偽装しているだけでiPhoneの表示をシミュレートしているわけ
ではありません。同じsafariですが細かい部分で仕様が異なっていると思います。ですのでソースの解析などにのみ
利用するようにしましょう。

 

 
 
 

UAの設定方法

いろいろなブラウザでUAを偽装することは可能だと思うのですが、safariでは
プラグインの追加なしに簡単に変更可能なので、ここで紹介したいと思います。
まずはsafariの環境設定を開き「詳細」の最下段にある「メニューバーに”開発”
メニューを表示」にチェックを入れます。
 

 
そうすると以下の様に「開発」メニューが追加されるので、このメニューから
「ユーザーエージェント」で設定すればOKです。
 

 
 
おしまい
 
 
 

スマートフォン用サイトで何をする?

どの様なときにスマホサイトを見る?

使い勝手の良いスマートフォン用のサイトを作成するには、どの様な所に
スマートフォン用サイトのニーズがあるかを考えなくてはいけないと思います。
とはいえ、考えがまだまとまっていないので備忘録的に思ったことを
並べていきたいと思います。
 
 

高価な商品サイトは見ない?

例えば、クルマやパソコンなど比較的高価な商品を買うときに、スマートフォンで
情報収集するでしょうか?。高価な商品であればあるほど、念入りに調べたいので
家でPCを利用して、じっくりと調べるのではないでしょうか?
 
さらに高価なものは販売店に出かけて実物をみたり、お店の人に話を聞いたり
カタログを貰ってきたりすると思います。とするとクルマやPC、あと住宅などの
サイトではスマートフォン用サイトの必要性は低くなるのでは?と思います。
 
 

でもやはりスマホサイトもあった方が良い

前項で必要性が低いといったものの、作る必要がないとは思いません。
購入でよくある悩みとしては、同系統の商品の中で、どれを選択するか迷うことです。
例えば携帯電話を購入する際、どの機種を購入するか迷うなどです。
このような時は、通勤中の少ない時間でも情報収集して比較したくなるものです。
通勤中ですからPCではなくスマホを使うことになるでしょう。

ということで高価な商品といえど、スマホサイトがあっても良いのかなと思います。
そうなると、狭い画面でスペックを比較しやすい仕組みにしたり等
スマホサイトならではの配慮とかが必要になりそうです。
 
 

マガジン系サイトはよく見る?

スマートフォンは通勤時間のように細かい時間の暇つぶしによく利用されます。
マガジン系のコンテンツは細かい時間で情報収集でき、スマホサイトとして
良いコンテンツになるような気がします。
 
例えばソニーの商品を購入すると、My Sony Clubへの入会を勧められ
ここからメールマガジンが送られてきたりします。
参考:my Sony Club ※コンテンツ上部右に最新のメールマガジンのサンプルへのリンクがあります。
 
このメールマガジンから、webサイトの各コンテンツへリンクすることが
できるのですが、そのようなコンテンツはスマホ対応していたほうが良いと
思います。(My Sony Clubはほとんど対応していません)
 
 

店舗検索は?

利用頻度は低いと思いますが、いざというときにスマートフォンからアクセスします。
みずほ銀行はスマートフォン用のサイトがあるのですが、外出先で利用しそうな
店舗検索のページはスマートフォン対応しておらず、PC用のページに移動してしまいます。
※みずほ銀行は携帯アプリで店舗検索を用意しているのですが利用頻度の低いアプリをインストールするのは抵抗があります…。
 
ということで、利用頻度は低くても外出先で利用しそうな店舗検索はスマホ対応して
くれたほうが嬉しいです。
 
 
ほかにも思いついたら書き留めていこうと思います。
今回はここでおしまい。
 
 
 
 

Android SKDが携帯を認識してくれません…

Android携帯の一部の機種ではスクリーンショットやスクリーンショットアプリがあるのですが
それ以外の携帯では少し改造(root権限を得てアプリをインストール)しないと無理なようです。
 
しかし改造はちょっと避けたいので、別の方法を探すことにしました。
ネットで調べると、AndroidのSDK(Software Development Kit)を利用してPCから
スクリーンショットとるのが良いらしく、Macでも利用できるということで、早速ダウンロード
参考サイト:ガジェットショット様
  
ダウンロードしたらソフトをアップデートして、デバッグモードにした携帯をUSBでつなげる
だけのはずが….。携帯を認識してくれません。

 
いろいろ追加でツールをインストールしたけれどダメだったのでwindowsにインストール
することにしましたが…。アップデートの途中で「ピア通信が不正に終了」的なメッセージで
アップデートできず(ファイアウォールのせい?)…。
 
半日を費やしても、MacとWinの両方で挑戦してもダメでした…。
今回はあきらめてsdkのバージョンが変わったらもう一度試してみようと思います。
はぁ….。
 
 
再確認時の参考サイト:果てしなくぞんざいな日記様
 

androidでの検証

iOSで検証した内容をAndroidでも検証しようと思います。
iOSの検証記事たち
 

viewport等の設定

iOSでは以下の様に設定を決めましたが、Androidでもこれで問題有りませんでした。
iOSでは縦横の向きを切り替えていると表示倍率が変わる仕様があり、これが嫌だったので
maximum-scaleを設定しました。しかしAndroidは向きを変えても倍率が変化せず、
この点はiOSよりも良い感じがしました。
 
まぁiOSもAndroidも同じように見えた方がよいので、結局viewportの設定は以前
決めたように以下の設定でいこうと思います。

viewportの設定
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no”>

 

ホームアイコン

Androidもブックマークをホームに配置することが可能ですので、iOSで作成した設定で
ホームに配置してみました。そしたら、丸い囲みの中にアイコンがはまるデザインとして配置
されました..。これはAndroidの仕様と言うよりも、この携帯の仕様なのでしょうね。
ホームアイコンに関しては、このように完全にデザインをコントロールするのは無理なようです。
 

フルスクリーンモード

Androidのブラウザはフルスクリーンモードに対応していないので、フルスクリーンでの
起動はできませんでした。Android用のOperaは対応しているようです。
 

スマートフォンサイトへの誘導

これはAndroidでも問題なく機能しました。しかし1点不具合がありました。
このボタンの「→アイコン」は画像ではなく記号文字として表示していたのですが
is11tでは表示されませんでした。これは内蔵されているフォントによって、
記号を持っていないためと考えられます。
 

高解像度用の画像

is11tはiPhoneほどdpiは高くないが、PCのディスプレイと比較すれば充分高く
iPhoneでの対応と同じように高解像度用の画像を利用した方が良いと感じました。
 

jQueryへの対応

タッチイベントはiOS同様に取得できるのですが、複数のタッチポイントには対応せず
1つのポイントしか取得することはできませんでした。そのためか、ジェスチャーイベント
にも対応していません。また「タッチした場所に移動」はiOS同様機能しましたが
部分横スクロール」は機能しませんでした。
 
おしまい。
 
 
 

スマホサイト練習(1)

html5とcss3の練習を兼ねてデザインドリルのスマートフォン用サイトを作成
しようと思います。合間の時間を利用して作成していくので、少しずつしか
進められません。ですので、ブログで作成した範囲で記事を書き進めていく
ようにします。今回はタイトル部分とショーケース画像だけです。
 

タイトルとショーケース部の作成
サンプル:01_title.html  ここで利用しているcssはこちら

 
 
 

リキッドデザインにする

viewportは以前決めた設定でいきます。サイトの幅にdevice-widthを利用して
いるため機種や縦/横表示により、ブラウザの幅が変化することになります。そのため
固定幅でデザインする事はできず、リキッドデザインにしなければなりません。
 
 

タイトル部

タイトルはブラウザ幅にかかわらず固定幅で表示し、センタリングするようにしました。
高解像度用に282×74の画像を作成し、それを141×37で表示しています。
また、ここにはhtml5から導入された

タグを利用しています。
 
 

ショーケース部

ショーケース画像はセンタリングではなく、横幅に合わせて可変するようにしました。
拡大/縮小による画像の劣化を確認するため、画像まわりに1pxの囲み枠を付けました。
iOSでは縦/横ともに綺麗に線が表示されましたが、Android(IS11T)では縦/横ともに
上の線だけ欠けてしまいました…。
やはり画像を拡大縮小して利用する場合は目立つ形で1pxの線を利用するのは
やめた方がよいでしょう。
 
 

フォントサイズ

このサンプルではフォントサイズを10pxと小さめにして可読性を確認しました。
10pxでも充分読むことはできますが、この辺が下限でしょうか。
ちなみにiPodTouchとIS11Tでほぼ同じ文章の幅となりました。PCではMacとWinの
文字間隔が大きく異なるため同じフォントサイズでも文章の幅が結構違うのですが
スマートフォンでは差はほとんど無いのかもしれません(Androidは機種によるので
しょうが)。
 
 

sectionタグ

html5から導入されたsectionタグを利用して、ショーケース画像と直下の文章を
まとめました(idはshowcaseとしています)。
headerタグやsectionタグを利用すると、だいぶdivタグを減らすことができますね。
 
おしまい