Retinaディスプレイ用の@2x画像からふつうサイズの画像を出力するPhotoshopスクリプト - Awaresoft
iOSアプリを作成する際に、アプリ内で使用する画像は通常のディスプレイ用とRetinaディスプレイ用の2種類を用意する必要がありますが、これが非常に面倒な作業です。 ほとんどのデバイスがRetina Displayになった今となっては、通常のディスプレイのサポートはもう辞めてしまいたいところですが、iOS 6でiPhone 3GSもサポートされることが決まり、やはり当面は通常のディスプレイもサポートしなければならなくなりそうなので、対策を考えました。 Photoshopを使って通常のディスプレイ用とRetinaディスプレイ用の2種類の画像を用意する方法にはさまざまなやり方が考えられますが、一例としてPhotoshopスクリプトを使った私のやり方を書いてみます。 １．Retinaディスプレイ用の画像ファイルを用意する まずは、Retinaディスプレイ用の画像ファイルを用意します。 Retin
Retina Images
Retina Images serves different images based on the device being used by the viewer, all you have to do is create a high-res version of each image.Automatically serve high-res images, to those who'll appreciate them. View project on GitHub Download Retina Images (v1.0) Mouse-over to see the effect of Retina Images This demo actually replicates what happens on retina devices Back to top About Retin
RetinaサポートWebへの第一歩 – Taiyo Fujii, writer
iPhone 4、iPad 3でスクリーンを改革したAppleが平然とデスクトップにも切り込んできた。 MacBook Pro Retina のことだが、一度触るともう戻りたくなくなるほど美しい（個人的には MacBook Air を買ってしまったんだけど）。そんな美しいスクリーンの価値を落とすのがWebサイトだ。画像の解像度を間違ってしまったかのような見栄えになってしまう。 まず、一番簡単なあたりから。WordPressを使っているなら、Retina for WPを使えばエントリーにアップロードするメディアに限っては簡単に Retina 対応できる。昨日アップロードしたエントリーで使っているが、 window.devicePixelRatio をJavascriptで判定して cookie を喰わせ、読み込む画像を判定している。 [retina normal=”http://blog.t
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
jQueryで画像をRetina対応させるプラグインを作ってみた | soplog(そぷログ)
レチナ対応機種が無かったのでこれまで避けてきたのですが、今更ながら我が家にiPhone4sがきたので、前々から構想していたレチナ対応をプラグインにしてみました。 追記： iOS6で全般うまく動いて無いみたいなので調査中です(´・ω・`) 追記：同日15時53分 諸々修正いたしました。TLの皆様、ご助力ありがとうございました!! 追記：2012年9月27日10時頃 ご要望をいただいたので、本エントリーの追記、サンプルの改修をしました。 サンプル サンプル－ダウンロード 使い方 HTML＋JavaScript <!-- 画像の幅：data-img-width 画像の高さ：data-img-height 画像のALT：data-img-alt 画像のパス：data-img-path ←追加 --> <a href="img.jpg" class="img-retina" data-img-wid
iPhone4のRetinaディスプレイで閲覧したらjQueryでRetina向け画像(@2xのやつ)に自動で切り替える
iPhone4のRetinaディスプレイで閲覧 された際に自動で高解像度の画像に 自動で切り替えるjQueryのコード。 @2xが付くアレです。ちょっと今更 な話題なので誰も見て無さそうな 日曜日に書いて置こうと思います。 jQuery Retinaっていうプラグインがありますが、このライブラリのように色々宜しくやってくれるようなものじゃなく、ただのスニペットです。実際にはもうちょい工夫しないとならないと思いますので参考程度で。というか僕がRetinaなんとかの事を良く分かって無いでｓ コードif (window.devicePixelRatio > 1) $('img').each(function() { var t = $(this); t.attr('src', t.attr('src').replace(/(\.[a-z]+)$/i, "@2x$1")); });window.d
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
Retina時代のWeb制作
Retinaディスプレイを搭載したiPhone 4が発売されて一年半。 巷では高解像度のiPadやMacBookの発売が噂され、Mac OS XではiPhoneのRetinaディスプレイに相当するHiDPIモードがほぼ完成に近付いています。 これら高解像度ディスプレイを搭載した環境では、互換性を維持するため、低解像度の環境に合わせて作られたコンテンツは基本的に低解像度のまま表示されます。 それはウェブブラウザにおいても例外ではありません。従来のウェブページは何の問題も無く表示されますが、新しい高解像度のデバイスには、新しい高解像度のコンテンツを提供したいものです。 Retinaディスプレイを搭載したiPad、そしてパソコンが普及した時、ウェブ制作の手法も変化を求められます。来るべき時代に備え、今のうちにRetinaディスプレイへの対応方法を確認しておきましょう。 ※ 以下に記した手法はMa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
CV
WebサイトをRetinaディスプレイに対応させる方法