投稿者: Sho Doi

投稿日:

Retinaディスプレイ時に読み込む画像を切り替えるjQueryその2

前回のRetinaディスプレイ時に読み込む画像を切り替えるjQueryでは以下の通りRethina・非Retina画像のリクエストが発生して非効率なスクリプトとなってしまっていたので修正しました。

修正後のソースは以下の通り。

[html]

<p><img src="images/grey.png" data-original="images/logo.png" alt="" width="50" height="50" /></p>

[Javascript]

$(function(){
	$('img').each(function(){
		var src = $(this).attr('data-original');
		if(window.devicePixelRatio === 2) {
			$(this).attr('data-original', src.replace(/(\.jpg|\.png)/gi,'@2x$1'));
		} 
		$(this).attr('src', $(this).data('original'));
	});
});

img要素src属性にダミー画像を入れておき、カスタムデータ属性を用いて画像パスを格納しています。
3行目でカスタムデータ属性の値を取得。
4行目でRetinaディスプレイか判別。
Retinaディスプレイの場合5行目で画像パス変更。
7行目でダミー画像のsrc属性を書き換えて描画。

これで非Retina画像のリクエストを発生させることなくRetinaディスプレイ時にRetina用画像を表示することが出来ました・・・けどRetinaディスプレイ対応自体どんな手法が正しいのか分かっていないので詳しい方いらっしゃいましたらご教授お願いします。

投稿日:

Retinaディスプレイ時に読み込む画像を切り替えるjQuery

2012/01/05追記

下記で記述しているスクリプトでは読み込み時に非Retina用画像のリクエストが発生してしまいます。
結果、無駄なリクエストとなるので非効率なスクリプトとなってしまいます。

2012/01/12追記

二重にリクエストが発生しないスクリプトをかいてみました。
Retinaディスプレイ時に読み込む画像を切り替えるjQueryその2

Retinaディスプレイ用画像設定

スマートフォンサイト制作時、従来の3G/3GSのような非Retinaディスプレイ用画像を用いるとRetinaディスプレイで表示した際に滲んでしまいます。
画素数320x480pxの非Retinaディスプレイと同様の3.5インチの画面サイズに4倍の画素数である640x960pxで描画されるため画像が引き伸ばされてしまうためです。

そこで非Retinaの倍の画像を作成してimg要素width/height属性に画像の半分の値を設定することでRetinaディスプレイで画像を奇麗に表示することができます。

[html]

<p>3G用画像（50x50px）<br />
<img src="logo.png" alt="" width="50" height="50" /></p>
<p>Retina用画像（100x100px）<br />
<img src="logo@2x.png" alt="" width="50" height="50" /></p>

Retinaディスプレイの場合のみ専用の画像を用いる

倍サイズの画像を用いる事でRetinaディスプレイで奇麗な画像を表示する事ができますが、遅い回線でアクセスした際に表示に時間が掛かるのでRetinaディスプレイ時のみ倍サイズの画像を用いる様にjQueryで振り分けるようにします。

前提として画像は2種類（非Retina用・Retina用）を作成します。
Retina用画像は “@2x” をファイル名末尾に追加しておきます。

  • logo.png（非Retina用）
  • logo@2x.png（Retina用）

[Javascript]

	$(function(){
		if(window.devicePixelRatio > 1) {
			$('img').each(function(){
				var src = $(this).attr('src');
				$(this).attr('src', src.replace(/(\.jpg|\.png)/gi,'@2x$1'));
			});
		}
	});

ソースは上記の通り。
2行目のwindow.devicePixelRatioでRetinaディスプレイかを判別しています。iPhone4/4Sでは値が2になります。
3行目からimg要素をループして、4行目でimg要素のsrc属性を取得、5行目でRedina用画像ファイル名に書き換えています。

以上がRetinaディスプレイの場合のみに専用の画像を用いる処理となりますが、iOSシミュレータでの確認のみですので実機での動作及び処理が正しいかは保証しかねますのでご了承ください。
また、日本で発売されているAndroid端末の場合全てではありませんがwindow.devicePixelRatio値が1.5らしいのでAndroid用に1.5倍サイズの画像を作成して、それ用の分岐も用意しておいた方が良いかもしれません。

投稿日:

第1回WordPressお茶会＠WordBench香川を開催しました

2011/11/19（土）にデザインラボラトリー蒼様をお借りして「第1回WordPerssお茶会＠WordBench香川」を開催しました。

参加者8名（WordBench香川初参加5名、県外から参加2名、ディレクター、デザイナー、プログラマ、他業種の方）と第1回にしては幅広い層の方にお集まり頂きました。

今回はキックオフミーティング時の「次回はお茶会で」との意見からカフェをお借りしてのお茶会形式に、twitterでハンズオンやりたいと呟いたところ是非というお声を頂いたので初心者向けハンズオンを、ハンズオンだけだと場所・自分のキャパに無理があったので雑談も交えてというかたちとしてみました。


ダークサイド土井の図
photo by: style-design

初心者向けハンズオンはWindows・Mac環境でローカル環境を構築してWordPressをインストールしてなにかしよう （第1回WordPressお茶会 – WordBench香川 – INDEX） という内容だったのですが環境周りの準備不足によりWordPressインストールまだで精一杯という結果に・・・（イベント進行がグダグダになるのは想定済み）

また以下の流れから作成をお願いすることになったわぷーWordBench香川バージョンについても大方の意見が集約されましたので近いうちにお披露目できると思われます。

http://twitter.com/#!/show_web/status/136352519470333952

以下反省点・今後の課題で思いついたものをつらつらと箇条書きです。

  • ハンズオン組が多くなり過ぎたため、雑談組が少人数になってしまった。
  • ハンズオンだと1対2くらいが限界で御相手できない方が居たので申し訳なかったなと。
  • 主催者がMac初心者なのでトラブルに対応できない。
  • サポート役は数人必要（今回は参加者さんで詳しい方がいらっしゃったのでヘルプして頂きました）
  • 自前の無線LAN環境は必要。（WiMAXルータ安価で性能良いのないかな？）
  • ローカル環境構築というテーマで必要かなと思えるものを考えていったら初心者向けじゃなくなってた。
  • twitterハッシュタグ決めてたけどバタバタしすぎてツイートできず。
  • 参加者が10名超えるようなら会議室借りなきゃ厳しい。
  • 個人的には勉強会みたいなのじゃなくて少人数でわいわいと、というのが好きだけど今後はどうしていったらいいのだろうか。
  • WordPressはやれることが広いので次回ハンズオンはテーマを絞らなきゃ。

参加者の皆さん長時間のお付き合いありがとうございました。
また、場所を提供頂きましたデザインラボラトリー蒼様ありがとうございました。

次回WordBench香川は来年1月あたりに開催予定です。（いつもながら内容は未定ですので要望ありましたらコメントや@show_webよりお願いします）