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:部分横スクロール(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:タッチした場所に移動

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

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:ジェスチャーイベント

ジェスチャーイベント

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:iPhone特有のイベント(2)

前回に引き続きiOSのタッチイベントについて書きます。
 
 

jQueryのイベントオブジェクトの注意点

iOSではイベントオブジェクトのtouchesプロパティにマルチタッチのデータがオブジェクト形式で
格納されているそうなので、まずはlengthを利用してタッチポイントの数を表示するサンプルを
作成しました。ソースは以下の様にjQueryのtextメソッドでdivに表示するようにしただけです。
タッチ数の確認(問題有り) ※iOSのsafariで確認してください。

$('#test').text(eo.touches.length);

 
しかし全く機能しません…。googleでタッチイベントについて検索するとjQueryは利用せずに
純粋なjavaScriptだけで作成しているものが多いので、jQueryでは対応できないと諦めかけて
いたのですが、以下のサイト様の記事によって問題が解決できました。
参考サイト:iphonesafariでjqueryを使ったイベントのバインドにおける注意
 
いろいろ調べてみると、jQueryではブラウザ間の差を吸収するために独自の
イベントオブジェクトを作成しているようです。独自イベントとは言いつつも、
大抵のイベントは継承しているので問題なく利用できるのですが、タッチイベントの
ような環境依存が大きい独自のイベントには当然対応していないため、
今回の問題につながったようです。
 
本家jQueryのサイトでもoriginalEventについて、少しだけ説明がありました。
「特別なイベントオブジェクトにアクセスしたいときはoriginalEventを使ってね」
だそうです。
参考サイト:Event Objectの解説ページ←ページ下部OtherPropertiesの項目
 
ということでoriginalEventを利用したら、きちんとタッチポイント数を取得できました。
サンプルは以下の通りです。
タッチ数の確認(OK) ※iOSのsafariで確認してください。
 
 
 

タッチ座標の取得

タッチ座標の取得には前述のtouchesに格納されたデータから取得できます。このあたりの説明は
以下のサイトが詳しいです。
iPhoneタッチ機能、ジェスチャ機能のプログラミング方法

clientXやscreenX、pageXなど似たような情報が多いのですがページのスクロールを禁止し
固定した状態では、たぶんどれも同じ値を指すような機がします。英語のサイトでは各プロパティ
がどのように異なるか説明があります。
Touching and Gesturing on the iPhone
 
ということでサンプル。ポイント数はいくらでも取れるようですが、2ポイントくらい有れば
充分だとおもうので2ポイント分しか表示していません。
タッチポイントの座標取得 ※iOSのsafariで確認してください。
 
2点間が取得できれば、オブジェクトの拡大縮小などの操作が可能になりそうです。
しかし、それには数学的な知識が必要になってきます。ところがiOSでは次回紹介する
ジェスチャーイベントを利用すると数学的な知識を必要とせず回転や拡大縮小の
ジェスチャーを取得することができるのです。
 
 
おしまい
 
 
 

iOS+jQuery:iPhone特有のイベント(1)

iPhoneのsafariでは、PCとはことなるイベントを利用できるとそうなので挑戦してみました。
※Androidでも利用できるそうですが、機種によってはマルチタッチの検出ができないようです。
 
 
 

セレクタにはdocument

まず画面にタッチしたら発生するイベントtouchstartのシンプルなサンプルを作成しました。
画面にタッチしたらdivにtouchstartと表示するだけのサンプルです。
touchstartの確認(問題有り)
※iOSのsafariで確認してください。
 
ここで早速問題発生です…。イベントの取得には成功したのですが、htmlの要素がある範囲だけ
でしか取得できません。ページ大半の何もないところではイベントを受け取れないのです…。
 
iPhone特有のイベントをgoogle検索すると、ほとんどはjQueryを利用しない形で紹介されてい
ました。しかしヒントは掴めました。これらのサイトではdocumentに対してイベントを設定して
いたのでjQueryでもそうすれば良いのだと。
 
実際jQueryのセレクタにもdocumentは利用できます(何よりreadyイベントのセレクタは
documentなのですから)。ということでセレクタをdocumentにした下記のサンプルでは
正常に機能しました。
touchstartの確認(OK)
※iOSのsafariで確認してください。
 
 
 

touchstart/touchmove/touchend

続いてtouchstart以外のイベントを確認します。iPhoneでは以下4種類のタッチイベントが
利用できるそうです。

iPhoneのタッチイベント
・touchstart:タッチを検知したときに発生
・touchmove:タッチポイントが移動したときに発生
・touchend:タッチが終了したときに発生
・touchcancel:システムによってタッチイベントがキャンセルされたときに発生

 
touchcancelは発生のさせ方がよく分からないので、それ以外の3つを確認するサンプルを
作成しました(touchcancelの利用法としては、何らかの事情によってシステムからタッチ
イベントをキャンセルさせられたときに備えて、タッチイベントを終了するようにしたほうが
良さそうなので、touchendと同じ処理をするようにすると良い気がします)。
いろいろなイベント(問題有り)
※iOSのsafariで確認してください。
 
上記サンプルではイベントの取得に問題はないものの、タッチイベントによってページが移動して
しまうため、私の想定と異なりました。で、ここでもgoogle先生に聞いてみるとブラウザ本来の
機能をOFFにして利用することが分かりました。
 
ブラウザの通常の機能をOFFにするのはjQueryの記事でも書いたpreventDefaultメソッドです。
タッチイベントでもこれが利用できます。ということでpreventDefaultを利用した
以下のサンプルを作成しました。これでタッチイベントでページが移動することを防げます。
いろいろなイベント(OK)
※iOSのsafariで確認してください。
 
今回はここまで、次回はマルチタッチについて書こうと思います。
 
 
 

スマートフォン向けのサイトデザインの参考に

アップルの開発者向けのサイトではプログラム関連の記事だけでなくインターフェイスデザイン
についての資料もあったりします。iOS developer library
 
例えばiOS ヒューマン インターフェイス ガイドライン ※13MBのPDFです!という資料は
iアプリの開発関連の資料ですが、スマートフォン用のサイトデザインにも有用そうです。

--以下13ページ引用--
タップ可能なUI要素の快適な最小サイズは、44 x 44ポイント。

 
 
しかしスマートフォン関連でいろいろサイトを見たのですが、ほんとにショーケースコンテンツの
ようなシンプルなFlashの多くはjQueryに置き換わってきていますね…。予想以上の速度です。
 
 
 

iOS safari:まとめ

スマートフォン向けの勉強をしてきましたが、ちょっと記事がごちゃごちゃしているので
ここで簡単にまとめておこうと思います。
 
 

・html5とcss3を利用する

ほとんどのスマートフォンがhtml5に対応しており、css3への対応もかなり進んでいる。
css3を利用すれば、画面の広さが異なる各機種に柔軟に対応できるし、PCよりも通信速度が
遅い部分をカバーできるので利用すべき。
スマートフォン向けのリセットcssもブラッシュアップしていこう。
 
 
 

・viewportの設定

webデザイニング2011.12月号のsmartPhone.labでは3パターンのviewportを紹介して
いますが、やはり向きによって拡大縮小をされないリキッドレイアウトのパターンが一番良い
と思います。ということで、以前の記事通り以下の様な設定で以降と思います。

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1.0, user-scalable=no">

上記の設定で行く場合はフォントサイズも縦横で変化しないようにreset.cssに以下の設定を
いれておくようにします。

 -webkit-text-size-adjust: 100%;

 
 
 

・ホームアイコン

webアプリ以外では利用される機会はほとんど無いかもしれないが、企業サイトとしては準備して
おくべきです。Apple製品ではアイコンサイズがある程度決まっていますが、Android系は機種ごと
に異なり、しかもsizes設定に現状では対応していません。ですので以下の様に設定しておこうと
思います。

ホームアイコン
光沢処理のデザインを入れない114×114のアイコンを作成し、以下の最小限の設定をする。
<link rel="apple-touch-icon" href="../images/home114.png" />

 
この処理によってiPhone系では他のApple系のアイコンと同じように光沢処理されAndroid系
では、他のアイコンと同じように通常表示されます。また、このコードでは各機種のアイコン
サイズにリサイズされるため、ストライプのようなデザインは避けるようにしましょう。
 
 
 

・自動電話リンクへの対処

スマートフォンでは電話番号でない数字の羅列に、自動的に電話リンクしてしまう場合があります。
これは企業サイトからの間違い電話を誘発する危険に栂なるため、必ず設定しておくべきでしょう。

<meta name="format-detection" content="telephone=no" />

 
 
 

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

最近のスマートフォンは画面サイズも大きく、PC用のサイトもそれほどストレス無く閲覧が
可能です。ですから強引にスマートフォン用サイトへ移動させるのではなく、ユーザーが
選択できるようにリンクボタンを表示するのが良いでしょう。その際、スマートフォンの
小さな画面でも目立つように、大きめのリンクボタンを表示するようにしましょう。また
逆にスマートフォン用サイトからPCサイトへ移動するボタンも設置するようにしましょう。
jQueryを利用すれば、簡単にスマートフォンでのアクセスの時だけリンクボタンを表示
できます。
 
 
 

・高解像度ディスプレイ向けの画像対策

表示する領域の4倍のサイズで画像を作成し、それを表示するようにします。
例:320×160のサイズで表示する場合は640×320の画像を用意し、それを320×160で表示する。
通信速度を考え、1ページ内にあまりたくさんの画像を配置しないようにレイアウトし、可能な
限りcss3でのデザインにする。
 
 
おしまい
 
 
 

iOS safari:高解像度ディスプレイ向けの画像対策

今回はwebデザイニングの2011.11月号のスマートフォン向けの最後の項目です。
retinaディスプレイは本当にキレイです。電子書籍は好きではなかったのですが、
iPadがretinaディスプレイを搭載したら電子書籍が好きになりそうです。特に
雑誌は嵩張るので電子書籍のほうが嬉しいです。
 
 
 

高解像度ディスプレイ向けの画像は必要か?

高解像度ディスプレイは現時点で少数派なので、対応しているところは少ないと
思っていたのですが結構多かったです。以下のリンク集から巡ってみました。
iPhone Design Box
 
高解像度ディスプレイに対応しているかいないかは結構わかります。みずほ銀行など銀行系の
スマートフォンサイトでは対応していないので画像アイコンがぼやけた感じになっています。
テキストがとてもキレイに表示されているので、なおさら差を感じます。
 
ということで、これは手を抜かない方がよいと感じました。
 
 
 

環境による表示画像の切り替え

webデザイニングの記事にあるようにメディアクエリを利用すれば解像度によって
表示画像を切り替えることができます。しかし、この方法はcssしか設定できない
ためimgタグのsrcを切り替えることができません。ですので可能なのは背景画像
のみとなります。とはいえ通常の利用であれば背景画像で問題ないと思います。
 
ということで作成したサンプルが以下のものです。PCで開くと「低」と表示され
低解像度の画像が表示されるのが確認できます。
解像度による表示画像の切り替えサンプル
 
これをスマートフォンで確認すると以下の様に「高」と表示され高解像度の画像が
表示されるのが確認できます(クリックで実物表示)。
 

 
 
研究も兼ねてwebデザイニングとは異なるシンプルなソースにしました。
まずdiv.imageのcss設定は以下の様に50x50のdiv領域の背景に50×50.pngを
表示しているだけです。

div.image{
 width:50px;
 height:50px;
 background:url(../images/50x50.png);
}

 
これを続きメディアクエリの-webkit-min-device-pixel-ratioを利用して解像度が
高い場合は上書き設定し直します。iPhone4等はこの値が2ですがwebデザイニングの
記事にあるように少し高解像度のアンドロイドにも対応するように1.5を設定しています。
この解像度以上であった場合{}内の処理が実行され、div.imageの背景画像が100×100.png
に再設定されるというわけです。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 div.image{
  background: url(../images/100x100.png);
  -webkit-background-size: 50px 50px;
 }
}

また以下の処理によって、サイズが100×100の背景画像を50×50にして表示します。

-webkit-background-size: 50px 50px;

このメディアクエリはスマートフォン用のCSSというわけではなくPCサイトでも活用できます。
参考サイト:[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例
 
 
 

メディアクエリの限界

メディアクエリでは背景画像にしか利用できないため、ショーケースコンテンツのように
画像をjQueryで操作する部分では利用できません。jQueryを利用すれば高解像度ディスプレイ
の時に画像を切り替えることが可能ですが、もとの画像と差し換える手順になるため
読込のリクエストが重なり、画像の表示が少し遅くなると思います。
 
悩んだときは既存のスマートフォンサイトを観察しましょう。以下のサイトは
PCでもスマートフォン用のページを閲覧できるため確認しやすいので、これで
画像をどの様に扱っているかを確認します。
JUN MEN
 
上記サイトではトップでjQueryを利用したショーケースを表示しています。
ソースを確認すると320pxの幅で表示していますが、実際に利用している
画像を開くと幅640pxの画像であることが確認できます。
 
つまり高解像度の画像だけ用意して50%のサイズで表示するようにしています。
実際に高解像度のスマートフォンで確認するときれいに表示されますし、
PCで確認できるように50%で表示されている画像も比較的きれいです。
この方法が一番シンプルで現実的な気がします。
 
この方法で作成したサンプルを確認しましょう。
高解像度の画像を50%表示したサンプル
 
このサンプルでは比較として低解像度の画像と並べて表示するようにしています。
PC(や低解像度のスマートフォン)で確認すると2つに差は無いように見えますが
高解像度のスマートフォンで確認すると以下の様に明らかに異なり、高解像度の
画像がとてもきれいに表示されているのが確認できます(クリックで実物表示)。
 

 
 

メディアクエリのメリットは?

一応メディアクエリのメリットも考えます。低解像度の古い機種では、低解像度の
軽い画像が表示されるため、古い機種の方は表示までの時間が短縮されるでしょう。
ですので、画像がたくさん利用されるページではメディアクエリを利用する価値が
ありそうですが、もう少し考えてみましょう。
 
上記の恩恵が受けられるのは古い機種だけです。新しい機種はきれいな画像を
多く(ダウンロード)表示するため時間が掛かってしまいます。これは
メディアクエリではどうにもなりませんから、別の方法で解決します。
 
具体例としては、1ページあたりの画像数を減らすようにページを分割する等が
あるでしょう。そうすれば表示時間の問題も解決できます。
高解像度の画像を利用しても表示時間が早くなれば、コードを多く書く面倒な
メディアクエリを利用するメリットも薄くなり、結局は前項で紹介した50%で
画像を表示する方法に落ち着くと思います。
 
 
 

可能な限り画像は避ける

ともあれ画像を含めたページのファイルサイズは少ない方が良いので、画像の利用は
抑える方がよさそうです。スマートフォンのブラウザはcss3に良く対応しているので
ボタン等はcssでデザインするようにしましょう。
 
 
おしまい
 
 
 

iOS safari:スマートフォン用サイトへの誘導

引き続きwebデザイニングの2011.11月号のスマートフォン向けの記事をもとに勉強。
今回はスマートフォン用サイトへの誘導についてです。
 
 

・ユーザーに選択の機会を!

スマートフォンでは簡単に画面の拡大ができたり、最近の高解像度ディスプレイの
おかげもあり、意外とストレス無くPCサイトを閲覧することができます。しかし
画面が小さいこともありPCと同レベルのユーザビリティは期待できません。
 
そこで最近の企業サイトはスマートフォン用のサイトを用意し、スマートフォンで
アクセスした場合はそちらへ誘導するようにしています。
 
その方法は色々あるようですが、私は「無条件にスマートフォン用サイトに移動」
させる方法は良くないと考えています。前述したように最近のスマートフォンは
通常のPCサイトもそれほどストレス無く閲覧できるのですから、ユーザーに選択させた
ほうが良いと思うのです。
 
というわけで.htaccessを利用するよりも、javaScriptの方法を学んでみようと思います。
ですが、webデザイニングのコードだと最初だけスマートフォン用のサイトを利用するか
質問されますが、その結果を記憶し以降は質問されません。そのため途中で切り替える
手段がありません。とはいえ記事中にあるように、毎回質問されるのも鬱陶しいです。
 
 
色々なサイトを巡ってみたのですが、ソニーのタブレットサイトはスマートフォンで
アクセスすると強引に専用サイトに飛ばされました(解像度によってはタブレット用の
ページ
に飛ばされます)。そこに至るまではPCページだったのに…。
しかし強引に飛ばされた先のコンテンツは、すでにタブレットを持っている方向けの
ページとなっていて「すでに購入した方」と「購入を考えている方」のニーズに個別に
対応しているところが素敵だなと思いました。
 
ただしタブレット機を持っていないスマートフォンユーザーがアクセスした場合は
タブレットを持っていないのに、タブレットを持っている方向けのコンテンツを
見せられることになるので悲しいかもしれません。
 
 
 

・スマートフォン用のリンクボタン

悩んだときは、既存のサイトを研究しましょう。私が良いと思ったのは、みずほ銀行
の方法です。このサイトはスマートフォンでアクセスすると以下のように画面上部に
スマートフォン用のリンクが表示されるのです(クリックで実物表示)。
 

 
この方法であれば、利用目的に合わせてユーザーがサイトを選択することができますし
javascriptでconfirmダイアログを表示するよりも鬱陶しくありません。ただリンクボタン
は大きくしても以外と気が付きにくいので目立つようなデザインにすべきでしょう。
私はスマートフォン用サイトを期待してサイトを見ていたので、気が付きましたが
同系色だと気が付かないユーザーも多いのでは?
 
 
ということで、デザインドリルに表示するリンクボタンはサイトカラーの緑の補色である
赤色にしてみました。css3の練習を兼ねて画像データを利用せずに作成しました。
画像を利用せずcss3だけで作成したボタン(safari & chrome用)
※スマートフォン用でしか表示しないボタンなのでPCのIEでの表示は考えませんでした。
ボタン作成にあたり参考にしたサイトはこちら
 
 
 

・jQueryでリンクボタンの表示

ということでデザインドリルのトップページにこの仕組みを組み込んでみました
ちなみにリンク先はスマートフォン向けの記事で紹介してきたサンプルです。
PCではリンクボタンは表示されませんが、スマートフォンでは以下の様に表示されます。
(クリックで実物表示)
 

 
jQueryのソースは以下の通りです。ユーザーエージェントの分岐処理はwebデザイニングの
記事に習っていますが、処理はconfirmではなくjQueryによってリンクボタンを追加する
処理にしました。

$(function () {
 var ua = navigator.userAgent;
 if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || 
 ua.indexOf('Android') > 0 || ua.indexOf('IEMobile') > 0) {
  $('#header').before('<a class="spLink" 
  href="http://www.designdrill.jp/s/">スマートフォン用ページ</a>');
 }
});

 
上記のbeforeメソッドはセレクタで指定した要素の前にhtmlを追加します。セレクタで指定した
#headはページの一番最初の要素なので、これによりhtmlの最初にリンクボタンが挿入される
ことになります。リファレンス:before(content)
 
しかし、まだスマートフォン用のサイトを用意しているところは少ないですね。
スマートフォン用のサイトが用意してあるところもトップページだけだったり…。
せめて外出先から利用しそうな「店舗検索」も用意してくれればよいのに、
PCサイトに飛ばされます…。
 
みずほ銀行は「店舗検索」用のアプリをダウンロード出来るようになっていましたが、
頻繁に利用するようなページではないのにダウンロードするのはねぇ..と感じる
今日この頃です。面白そうなのですけどね→ARにも対応した店舗検索アプリの紹介

 
おしまい