モバイル分岐させつつ、ユーザーフレンドリーなレスポンシブサイトを考える

相変わらず随分必死に色々いじっております。今回はモバイル端末やレティーナ等の高精度ディスプレイを考えつつ、どうすればユザーにとって良いレスポンシブサイトが出来るか考えて触ってみました。
最近、自分はweb屋にでもなったのか錯覚するくらい遅くまでPC触ってます(汗)

高精度ディスプレイに対応したレスポンシブサイトを作る

構築当初から課題の１つにしていた高精度ディスプレイ。いわばipad等のレティーナ等になりますが、これらを考えたレスポンシブサイトって難しいですよね。
なんでかって言うと、高精度ディスプレイって表示解像度と実解像度が違うので普通の表示をさせると表示が荒れるんですよね・・・
簡単に言うと、300pxの幅で指定した画像は600pxで表示されてしまうって事。つまり引き伸ばされてる。だから輪郭が綺麗に出ないのです。
そこで、最近簡単に実装出来るようになったHTMLがsrcset属性です。

srcset属性の使い方

srcset属性の使い方はとても簡単で、高精度解像度用のimgを別々に設定出来るって属性です。

<img src="普通の画像.jpg" srcset="2倍の画像.jpg 2x">

書き方はこんな感じ。
パスは絶対パスでも相対パスでも大丈夫でした。
こう書く事で例えばレティーナのように解像度２倍の時は2xが選ばれて表示出来るようになります。SonyのエクスペリアZ1は3倍らしいのですが、その時は３倍＝3xも用意出来ます。一部アンドロイド端末は1.5xもあるので、２倍と同じ画像をセットすれば良い気がします。
こーすれば、１つのimg要素から複数選択させられるのでとても便利です。

．．．ただ、コレってユーザーフレンドリーなようでそうじゃ無い気がしたんです。
だって、アイフォンとかエクペリアってスマホですよね？3Gの人もいるだろうし、LTEも通信量制限ありますよね？それでデカイ画像を読み込ませるようにするのって重いし、通信量も多くなるし、どーなんだろーなー　と。
実際問題として、元々ドットが小さいので通常の画像でもソコソコの表示が出来るワケで、より綺麗に表示するならデカイ画像にしましょうって事。
それを製作者側の気持ちで押し付けるのは嫌だなーと思ったので、別の方法考えました。

当店サイトの高画質ボタンをポチッとするのがサンプルです。
リフルハッチEショップ
是非、高精度ディスプレイで試してみて下さい。

モバイル判定でモバイルが画像を小さくして、尚且つ高解像モードを作る

コレがベストな選択かなーと思ってやってみました。
まずはモバイルは3Gも考えてPHPで分岐させて表示解像度に合わせた小さな画像を表示させます。
モバイルの分岐は↓

function is_iphone()
{
    $ua = $_SERVER['HTTP_USER_AGENT'];
    if(
    strpos($ua, 'iPhone')!== false||
    strpos($ua, 'iPod')!== false
    )
    {
    return true;
    }
    else
    {
    return false;
    }
}
function is_android()
{
    $ua = $_SERVER['HTTP_USER_AGENT'];
    if(
    strpos($ua, 'Android')!== false&&strpos($ua, 'Mobile')!== false
    )
    {
    return true;
    }
    else
    {
    return false;
    }
}
function is_firefox_os()
{
    $ua = $_SERVER['HTTP_USER_AGENT'];
    if(
    strpos($ua, 'Android')=== false&&strpos($ua, 'Firefox')!== false&&strpos($ua, 'Mobile')!== false
    )
    {
    return true;
    }
    else
    {
    return false;
    }
}
function is_windows_phone()
{
    $ua = $_SERVER['HTTP_USER_AGENT'];
    if(
    strpos($ua, 'Windows')!== false&&strpos($ua, 'Phone')!== false
    )
    {
    return true;
    }
    else
    {
    return false;
    }
}
function is_blackberry()
{
    $ua = $_SERVER['HTTP_USER_AGENT'];
    if(
    strpos($ua, 'BlackBerry')!== false
    )
    {
    return true;
    }
    else
    {
    return false;
    }
}
function is_mymobile()
{
    if(
    is_iphone()||
    is_android()||
    is_firefox_os()||
    is_windows_phone()||
    is_blackberry()
    )
    {
    return true;
    }
    else
    {
    return false;
    }
}

このコードはどなたかのブログ見た物なのでリンクさせたいのですが、履歴が何処かに消えてしまい分からなくなってしまいました。もしブログ主様が辿りついたらコメントかメール下さい。
リンク貼らせて頂きたいので・・・
とても細かい分岐でとても助かりました。php-mobile-detectも使ってみたのですが上のコードのほうが何となく良くて上コードをfunctions.phpに書きました。
コレでモバイルのみの分岐が出来ます。タブレットは入ってないコードだったので、スマホのみですが、ギャラクシーtabのみユーザーエージェントにMobileが含まれるようでモバイル分岐してしまいましたが、使ってる人ホトンドいないみたいなので、まぁ良いやって事で(汗)

<?php if(is_mymobile()): ?>
モバイルの時
<?php else: ?>
それ以外の時
<?php endif; ?>

↑が分岐の方法です。
ここにモバイル用の画像とPC用の画像を区別させてPHPを書き出します。
モバイル要は大凡300px位の幅の画像にすれば重くなりません。スマホで横向きを考慮するなら600pxかな？
ワードプレスの場合、サムネイルで大きさ別で出力してくれるので、ミディアムかラージをセットするワケですが、今回の方法ではミディアムを選択して軽い作りにします。
でも、このままでは全く高精度ディスプレイに対応してませんので次の方法で対応させます

スクリプトで画像を入れ替える

300PXの画像のままではあくまでも最低限の大きさなので、高精度ディスプレイでもエッジが綺麗ではありません。そこで任意に切り替えが出来るようにスクリプトを組みました。

jQuery('#クリックボタン').click(function(){
jQuery('.画像要素').each(function(){
    jQuery(this).attr("src",jQuery(this).attr("src").replace("-300x300.","-600x600."));
    jQuery(this).attr("src",jQuery(this).attr("src").replace("-150x150.","-300x300."));
});
});

簡単ですがこんな感じです。
wordpressの場合、サムネイル画像には-300×300みたいな文字列が入るので便利に利用出来ました。単純にスクリプトでココを
入れ替えて違う画像出してあげます。
クリックイベントにする事でユーザーが任意に選べるトコロがミソです。同じ書き方でPC版も倍の画像に切り替え出来るようにして高精度ディスプレイに対応させています。

高画質派の人のためにクッキーを残して実行させる

↑コードのままでは、ページが移ると元のモードに戻ってしまいます。それでは高解像度派の人には便利ではありません。そこでcookieを作りcookieがある場合は自然に実行するように設定します。
cookieを利用するのに便利なのがjquery.cookie.js。
リンクからダウンロードも出来ますが、CDNもあります。
コレを読み込ませます。
そしたらcookieを使ったコードに書き換えます。

/* OFFボタンは非表示にしておく */
$('#imgswitch0ff').css("display", "none");

/* クッキーがあるか判定 */
var cookie = $.cookie("imgswitch");
      if ( cookie != undefined ) {
    $('.画像要素').each(function(){
    $(this).attr("src",$(this).attr("src").replace("-300x300.","-600x600."));
    $(this).attr("src",$(this).attr("src").replace("-150x150.","-300x300."));
        });
    $('#imgswitch,#imgswitch0ff').toggle();
      }
      
/* ONボタンを押した時 */
$('#imgswitch').click(function(){
        $.cookie("imgswitch", "on", { expires:1,path:'/' });
        location.reload(true);
        return false;
      });
      
/* OFFボタンを押した時 */
$('#imgswitch0ff').click(function(){
    $.cookie("imgswitch", "on", { expires:-1,path:'/' }),
        location.reload(true);
        return false;
      });

この書き方だと、クッキーで判定してクッキーがあったら実行させます。
onのボタンを押すとリロードするので、強制的に実行されるワケです。ちなみにココでは何となくjQueryを$にしてます。ついでにウチで使っているコードを簡単に書き換えた物なので実行テストはしてません。テストしたものは捨ててしまって無いんで・・・。なのでコピペで使えるか不明です。どっか間違いあるかもですが、大凡こんな感じです。

当店のカートではリロードはさせずクリック実行させ、その後からクッキーで実行させます。なので画像がパキっとする様がみられると思います。
当店のカートはコチラです＞＞リフルハッチEショップ
通常のディスプレイでも変化は感じると思いますので、やってみると面白いと思います。モバイルではなくPC、タブレットでもスイッチONで２倍の画像に切り替わりますので試してみて下さい。

ついでに書くと、この方法で高画質にすると画像が相当読み込まれてしまいますので重いです。より軽くするならDATA属性を使ったほうが軽くなるのですが、スクリプトが使えない状態の考慮　とか　そもそも画像が無い状態からスクリプトで存在させるって検索エンジン的にどうなの？と思ってやってません。
もしも、個人の趣味ブログでただ軽く作るのであればDATA属性使ったほうが軽くなるんですけどね・・・。そのかわりDATA属性に入れた画像をスクリプトで呼び込ませる処理になるので、検索エンジンからは画像は無い事になって、尚且つJAVAが使えない、もしくはCDNを使っている場合にCDNサーバーがダウン中等は画像が存在しない事になります。
なので、今のところこのやり方がベストかなー　と思いました。

結構良い事書いたと思うんですが、どうですかね？
なかなかユーザーの事を考えた構築だと思うのですが。

---

---