ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
スマートフォン  iPad  iPhone  DS  Wii  jQuery  Lightbox  

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

2012/04/03 (火)  カテゴリー: ブログカスタマイズ上級

最近は 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です。

キーワード検索 : スマートフォン  iPad  iPhone  DS  Wii  jQuery  Lightbox  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

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

2012/04/03 ~ | Comment (7) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

7 Comment


いつもありがとうございます

paruparuさん、いつも丁寧にいろいろ教えて下さりありがとうございます!!
わたしはバッチリだー。と思っていたのですが…
ipadで閲覧してくれている知人に、まだカテゴリ選べないよー、と
指摘されてしまいました。なるほどー。
そう思ってみると、paruparuさんのブログのナビゲーションメニューでは
親子カテゴリが展開型ではないので、どうやらタッチ系のデバイスでも閲覧しやすそう。
どこかに方法が書いて有りそうな気もするのですが、発見できず…。
お時間のあるときにでもご教授いただければ嬉しいです。

自分で自分のブログを確認しても、閲覧してくれている人程見ていないものですね;
ちなみに、わたしはスマホテンプレートも利用中で、
こちらは自分のブログもよくスマホで見ますが、とっても使いやすいです♪

もで |  2012/04/04 (水)  No.1351


親子カテゴリーの単純プルダウン

やっぱり時代にはちょとずつ対応していかなくてはダメですね。。
今回の発想は もでさんから頂いたコメント がきっかけなので感謝しています。

親子カテゴリーのところは、一目で見えた方が判りやすいかな...
ということで変えてみたものです。 親子カテゴリーを使っていて、かつ それ程カテゴリー数が多くないのであれば、変えてみると使いやすくなるかもしれませんね。
私の今使っているものは ↓ です。

<!--==========区切り-->
<li>
<a href="javascript:void(0);" class="navitop<!--category_area--> this<!--/category_area-->">カテゴリー &187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<!--category-->
<!--category_parent-->
<li><a href="<%category_link>" class="parent"><span class="f_right"><%category_count></span><%category_name></a></li>
<!--/category_parent-->
<!--category_sub_hasnext-->
<li><a href="<%category_link>"><%category_name> -<%category_count></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li><a href="<%category_link>"><%category_name> -<%category_count></a></li>
<!--/category_sub_end-->
<!--category_nosub-->
<li><a href="<%category_link>"><%category_name> -<%category_count></a></li>
<!--/category_nosub-->

<!--/category-->
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--==========区切り-->


緑部分 を削除すると、私の使っている 「非表示カテゴリー」対応 になります。
参考まで。

FC2 非表示カテゴリーの作り方
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-68.html


追伸 : 別件ですが、もでさんのサイト、最近のコメントのところの 日付と名前 が繋がってしまっていますが... スペースを消してしまっているかも。。確認してみてくださいね。

paruparu |  2012/04/05 (木) [ 編集 ] No.1353


ありがとうございます!

ありがとうございます!
単純プルダウンできました!
最新コメントのスペースも追加しました。
たぶんnewマークで苦戦してた時に消しちゃったんだと思います;
(わたしも¥マークが出てしまいあわあわしてました)

また、非表示カテゴリの記事を読んで、
ちょっぴりカテゴリの変数のこともわかりました。
paruparuさんの記事はいつも丁寧でわかりやすいです。
いまくらいのカテゴリ数であれば問題ないのですが、
生後1年までは1月毎にカテゴリ分けようと思っているので…
増えてきて見難くなったら、親カテゴリのリンクをnavitopと同様に
無効にしようかなと思います。
⇛http://toypoodles.blog.fc2.com/?template=navicategory&index
親カテゴリ一覧に飛べなくなってしまうので、悩ましい所ではあるのですが、
スマホも含めて、今後タッチ系のデバイスでの閲覧者増えそうなので、
TOPはそうしようかなぁ、と。PCの人は、サイドバーにもリンクありますし。

paruparuさんのサイトは特性上PCユーザーが多いかと思いますが、
わたしはアメブロから移ってきたのもあって、スマホのUUがPCと同等近くあります。
スマホはPV増えがちなので、PVベースだと半数以上かもしれません。
(スマホでPC版を見ている人がどれくらいいるか不明ですが…)。

わたしも、あまり使わなくなっていたipadで自分のブログをチェックするようになりました。
スマホやipadってPCほどには、自由に閲覧できないので、
paruparuさんのテンプレートのようにナビゲーションがしっかりしていて、
情報がTOPの方で探しやすくすっきりしたページは、すごく閲覧しやすいです。
iphone5は大きくなる?なんて噂もありますし、PC版テンプレートで、
スマホから閲覧する人も増えるかもしれないですよね。

きっとまたいろいろわからなくて質問することもあると思いますが、
その際にはよろしくお願いします。今回もありがとうございました!

もで |  2012/04/05 (木)  No.1355


もでさんへ

ちょっと変えた部分だと思うのですが、
IE で見ると 子カテゴリー が 2行分 になってしまっているので
以下のようにすると、ブラウザを問わず希望通りに表示できると思いますよ。

<span class="f_right"><%category_count></span><%category_name>
数箇所あると思うので、修正してみてください。

paruparu |  2012/04/05 (木) [ 編集 ] No.1356


うまくいかないみたいです…

ちゃんと各ブラウザで確認しないとダメですね…!
わたしはchromeなので、全然気が付きませんでした。
教えていただいたとおり(?)修正したところ、
カテゴリ名と、記事数の表示が逆になってしまいます…。
何か、他に修正すべき点があるのだと思うのですが…。
何度も何度もお手数をおかけしてすみません!よろしくお願いします。

もで |  2012/04/05 (木)  No.1359


もでさんへ

子カテゴリー に関連した3箇所 (category_sub_hasnext と category_sub_end と category_nosub) を ↓ のように直せば 多分大丈夫なハズ。。
一応、再度テスト済みです。

<li><a href="<%category_link>"><span class="f_right"><%category_count></span><%category_name></a></li>

paruparu |  2012/04/05 (木) [ 編集 ] No.1362


できました!

おかげさまで、無事修正出来ました。
何度もお手数をかけてすみません。

<li><a href="<%category_link>">の、最後の"が抜けておりました。。。
いろんなことわからないまま、paruparuさんのソースをコピーさせて頂いて、
使っているもので…。お恥ずかしいです!

ありがとうございました。

もで |  2012/04/06 (金)  No.1363

コメントを投稿する 記事: iPad,iPhone,Android,DS,Wii など 閲覧時の操作性対策を2つ


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback