HOME Twitter PC RSS 

スマートフォン版 ありのごとくあつまりて

スマートフォン用の共有テンプレートを 3作登録 しています。 FC2ブログユーザーさんは、是非使ってみてくださいね。 詳細はこちら

HOME > ブログカスタマイズ上級 > iPad,iPhone,Android,DS,Wii など 閲覧時の操作性対策を2つ

iPad,iPhone,Android,DS,Wii など 閲覧時の操作性対策を2つ

http://arinogotokuatumarite.blog19.fc2.com/blog-entry-218.html

最近は PC・スマートフォン・タブレット時代 などとも言われるように、ブログの閲覧環境も多種多用になっていますね。 現在、FC2ブログでは PC用・スマートフォン用・携帯(ガラケー)用 のテンプレートがあります。 振り分けは 以下のような感じ。

  • PC用テンプレート が適応
    PC,iPad,3DS,DSi,Wii,PSP,PS3,PSVita...等
    追記 : 2013年3月頃~ iPad はスマホ用にも切り替え可能になっています。
  • スマホ用テンプレート が適応
    ※殆どのFC2ブログで、PC用テンプレートとの切り替えが可能
    iPhone,iPod touch,Android,Windows Mobile,BlackBerry,...等
  • 携帯用テンプレート が適応
    スマートフォンに分類されない 各社携帯電話

下の図は、このサイトで良くアクセスされるページ(1週間分の上位集計)です。

アクセス解析 : 
PC用テンプレートでの閲覧を辿ると iPad, DS, Wii 等の他、「iPhone や Android 等のPC版表示」 でもアクセスされていることが判ります。
クリックで画像を拡大します

主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ(_blank)で大きい画像を開きます。

という訳で、このサイトの問題を少しでも減らすため、2つの対策をしてみました。

  1. ある条件の時は lightBox を機能させない 
    jQuery lightBox (拡大した画像や背景の何処をクリックしても閉じられるようにしてある) を タッチ操作のもの(iPad,iPod,iPhone,Android の場合) と、3DS などモニターの小さいものの場合と、動作が若干不安定になる Wii では実行しないで、普通にリンクで開くようにしたい!
  2. ナビゲーションメニューの誤タップ対策 
    タッチ操作のもの(iPad,iPod,iPhone,Android,3DS 等) では、:hover(マウスオーバー)でプルダウンメニューが開くことはない為、以前のものでは、プルダウンさせたくても誤タップ(誤クリック)していまうケースも多いかも。。 ※アクセスできないことはないのですが、操作にコツが必要でした。


旧ナビゲーション: iPad などのタッチパネルでの操作を特に意識しなかったもの
クリックで画像を拡大します

現ナビゲーション: タッチパネルでの操作時に 誤タップすることがないようにしたもの
クリックで画像を拡大します



FC2ブログ共有テンプレート 『ari_seo1』『ari_seo2M』『ari_seo2L』 のナビゲーションは 今のところ 旧タイプ のままで、この部分を修正する予定はしていません。 ユーザーさんは、使いやすいものを選んで 必要に応じて各自で書き換えて使ってください。


1. ある条件の時は lightBox を機能させない

<script type="text/javascript">
// <![CDATA[
$(function(){
var agent = navigator.userAgent;
if( ($(window).width() > 800) && (agent.search(/(Android)|(iPhone)|(iPad)|(iPod)|(Nintendo)/i) == -1) )
{
$('#content a[rel*=lightbox]').lightBox();
}
// ]]>
</script>

追記 (2012/04/05) :
$(window).width() が取得する値が DS で見た時に期待とは異なっていたので、 $('html').prop('clientWidth')  を試してみたところ、IE や Firefox ではOKなのに、Chrome と Opera で起動しなくなってしまいました。 さらに $('html').width() も試してみたのですが、これもブラウザ表示領域とは異なる感じでした。 なかなか難しいですね。。 取り敢えず $(window).width() か $('html').width() のどちらかが無難なのかも。。

別に lightBox に限らず応用できると思います。 if width(表示幅)が 800pxより大きく、且つ、スマートフォン用UA(ユーザーエージェント)でない場合・・・」 が目的の条件式 にしてあります。 801px以上 としたのは、Wii(Wii版 Opera9)の解像度が 横800px(固定)だからです。 何故か カクカクオーバーレイが機能する時と、クルクルするだけでいつまでも画像が表示されないケースがあるようなので... (法則は不明) 普通に画像を開く方が 良心的な気がします。

追記 (2012/04/04) :
3DS の $(window).width() ウィンドウサイズは 横980px でした (モニターは 横320px, 他 ズーム次第で変動..)。 そのため、除外対象に Nintendo を加え 3DS や DSi を除外できるように変えました。 当然、Wii も含まれます。 800px には拘らなくても良いかも。。

※PS3(プレイステーション3) からのアクセスもちょこちょこありますが、こちらは 解像度 1,920x1,080 の場合が多く、かなり快適に使えるみたいなので lightBox もおそらくスムーズに動くのではないかなと... 予想。 PSP は 800px以下 なので、除外対象になります。

それ以外のものも 機能はするけれど、開いたものを触って不意に閉じてしまったり... など閲覧者の予測しにくい動作になるよりは、普通にリンクで開く方がいいかなと思いました。


2. ナビゲーションメニューの誤タップ対策
※共有テンプレートユーザーさん向けの説明 になります。

ナビゲーションメニューの該当部分 を以下のように変更。
※ class="navitop" が入っているリンクです。 間違えないようにご注意ください。

<a href="javascript:void(0);" class="navitop<!--各エリア変数--> this<!--/各エリア変数-->">

こんな感じにします。 href=" " を省いてしまうと、IE6,IE7 では :hover が効かなくなってしまうので、href="javascript:void(0);" (何もしない) を入れておきます。 リンク先はないので target="_blank" なども削除しておいてください。

これだけでもOKなのですが、リンクではない部分とリンクを明確にするために
スタイルシートの該当部分に

#nav .navitop {
(中略)
cursor:default;
}

を追加しておくと良いかと思います。
その場合、プルダウン無しでリンクを残す部分には

<a href="./archives.html" class="navitop<!--各エリア変数--> this<!--/各エリア変数-->" style="cursor:pointer" title="サイトマップへ">

のようにしておくとリンクと判りやすいと思います。

iPad など タッチ操作のものでは、タップ(クリック)してプルダウンを開くような動作になります。 プルダウンするメニューが長くなっている場合、下の方は 環境によっては選択しにくいと思いますので、その辺りも考慮してみると良いかもしれません。。

今回の変更は、テンプレユーザーさんからの要望 がキッカケで考えてみたものです。 確かにこの方が良さそうな感じもしたので、このサイトのものも変更してみました。

少しずつでも 閲覧しやすいブログ に近づけていきたいですね。。
あ... ちなみに私、スマートフォン持ってないです。。 しょぼ~ん
追記 : 2012/04/28~ 旦那が iPad を持つようになったので 動作確認はOKです。

スポンサーリンク

楽天写真館
今すぐ使える特別クーポンプレゼント!!
初回限定プリント1枚4円 50枚200円!送料無料など

記事URL(共通)
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-218.html

Hatena Google Bookmarks Google+ Yahoo! Facebook Twitter FC2ブログランキング
コメントを見る 7件 コメントを書く PC版で読み直す

CATEGORY RSS

カテゴリ : ブログカスタマイズ上級

カテゴリーリスト (記事件数)

ブログカスタマイズ中級 (15) / ブログカスタマイズ上級 (30) / FC2共有テンプレート (16) / FC2マニア・仕様関連 (21) / アクセス解析・SEO対策 (18) / ブログ雑記・その他 (8) / TV・NET・GAME (12) / 子育て・日々の出来事 (10) / 得するお役立ち情報 (15) / 無料素材のリンク集 (11) / 無料ソフト・フォント等 (10) / Twitter・ブラウザ関連 (26) /

PC版へ変更
トップページへ
ページ先頭へ戻る

※2014-04-29まで FC2ブログ有料プラン を適応中です。