画像のRetina対応に便利なツールやアプリ、ライブラリ色々 | バンクーバーのうぇぶ屋
相変わらずWEB屋にとっては面倒くさいRetina対応…。@2x、@3x、解像度に合わせて毎回画像を作るのも、正直面倒くさいですよね。個人的には何か根本から解決してくれるような仕組みや対策が出てこないかなと、相変わらず他力本願でお待ちしています。 とはいっても、現時点で出来る限りの対応はしなくてはならないので、今日は僕が知っている画像作成時のRetina対応を少し便利にするツールやアプリ（一部使い方？）等をご紹介させて頂ければと思います。 Retini @3xサイズの画像をドラックするだけで、@2x、通常サイズと一瞬でコンバートしてくれるシンプルなアプリケーション。こっちのWEBメディアの運営してる会社で働いてる人が教えてくれました。意外と知ってれば使えるタイミングがありそうなので共有。 Retinaize it ツールというわけじゃ無いかもですが、PhotoshopでRetina解像度の
いまさら聞けないRetina対応のための「ピクセル」の話
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
楽して時間短縮！Compassで作ったスプライト画像でRetina対応を行う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。UFOキャッチャー運が急降下中、デザイナーのももこです。 輪っかがついたキーホルダー系をうまく取れるようになりたい…(´・ω・｀) 気を取り直して、今回はCompassを使って作ったCSSスプライト画像でRetina対応を行う方法をご紹介します。 Compassを使って書き出したスプライト画像を自動でRetina対応にさせる スプライト画像の生成 $sprites: sprite-map("sprites/*.png"); $sprites-img:sprite-url($sprites); まずはスプライト画像を生成します。 単一の画像をフォルダに入れると、見事に合体したスプライト画像がimagesフォルダに書き出されます。 sprite-mapにはconfig.rbで指定したimagesフォルダ以下のルートを入れて下さい。 Mixinを記述する @mixin sprite-
Retina対応のスプライトを作成するときに便利なCompass用のmixinを作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、超〜久しぶりにコーディングをしました。 Retina対応の案件ということで、よさげなmixinを物色したところ、なかなかなかったので、作ってみました。 これからRetinaで苦労するであろう誰かの助けになれば嬉しいです。 今回作ってみたmixinはGitHubからダウロードできます。 https://github.com/xipx/Better-Sprites-for-Compass 使い方 1. スプライトファイルの末尾のランダムの文字列を削除する 末尾のランダムの文字列を削除しないとmixinがぐっと長くなっちゃうので、まずは以下のコードをconfig.rbにコピペしておきましょう。ファイル名も綺麗になるし、一石二鳥です。 on_sprite_saved do |filename| if File.exists?(filename) FileUtils.cp filename,
[enchant-js] iPhoneで画面幅からページがはみ出てしまう場合の対処方法
JavaScriptやHTML、その他プログラミングの中で詰まったこととその解決法、またはガジェットについて書くブログです。 Android/iPhone向けのゲームをenchant.jsで作っていた時にハマったのでメモ。 enchant.jsは自前でviewportを設定し、iPhone4のRetina対応をしようとします。 しかし、ページのサイズを固定したかったり、ページの一部だけをenchant.jsで作りたい時はこの設定が邪魔になります。 私の場合は <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" /> とhtmlで指定していたにもかかわらず、iPhone上で画面サイズが大きくなりすぎてしまい一日くらい悩みました。 htmlの各要素の
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
これから来るであろうRetinaディスプレイモデルの解像度について考察してみた
15.4インチのMacBook ProにRetinaディスプレイが搭載されました。現在品薄だということですが、アップルストアにはデモ機があるので、見てみた方もいるかもしれません。すごいらしいですね。iPhoneやiPadから、MacBook Proへ。この流れを考えれば、今後、アップル製品の画面が全てRetinaディスプレイになるだろうというのは、全ての人が予想していることだと思います。 Retinaディスプレイにするには、現行モデルの解像度をタテに2倍ヨコに2倍すればいいと考えている方も多いと思います。しかし僕は違うんじゃないかと思うんです。現在Retinaディスプレイとアップルが呼んでいるものの解像度や画素密度（PPI）にはバリエーションがあります。 新しいMacBook Pro Retina ディスプレイモデルは通常のMacBook Pro15インチの 110ppi、1440×900
Retinaディスプレイの感動が「iPhone＞iPad＞＞Mac」な理由から「Retina時代のMac選択」を考えてみた - もとまか日記
先日、以下の２つを書いた。 新しいMacBook Airを購入せざるを得なくなった１３の理由実際にMacBook Pro Retinaディスプレイモデルを触ってみて「しまった！」と感じた３つのこと この中で、非常に不思議だったのが以下だった。 Retina的感動の度合いは「iPhone＞iPad＞＞Mac」な印象 Retinaディスプレイと言っても色々あるわけですが、どの端末も綺麗なのは確かなのに、こういう印象になるのは何故？？ てことで、以下はその辺の疑問を考察してみたメモ。 Retinaディスプレイとは 今更ですが、まずはRetinaディスプレイについておさらい。 速報：WWDC 2010 スティーブ・ジョブズ 基調講演 - Engadget JapaneseRetinaと呼ぶ理由は、人間の網膜が認識できる上限 300 ppiを超えた326ppiだから。 ただし、反論もある。 iPho
電気店でRetina MacBook Proを見ました。ディスプレイは綺麗ですが、iPhone4登場時のようにウェブサイトの画像が粗く表示されてしまいます。スマートフォンの閉鎖された世界に比べ、ウェブサイトが今後Retina対応していくようにも中々思えません。ウェブデザイナーとR...
電気店でRetina MacBook Proを見ました。ディスプレイは綺麗ですが、iPhone4登場時のようにウェブサイトの画像が粗く表示されてしまいます。スマートフォンの閉鎖された世界に比べ、ウェブサイトが今後Retina対応していくようにも中々思えません。ウェブデザイナーとRetinaMacはどう関わっていくか皆さんの考えを伺いたいです。 今後のWEBはRetina液晶以外にもTABLET、SMART PHONE、TV等 様々な解像度に対応できるように変わってゆくのではと思います。 写真とビデオ等ピクセル表現の箇所は 複数のリソース指定が可能になってゆくのではと思いました。 Opera 社の Bruce Lawson は <picture> 要素の追加について議論しているようです。 （URLのページ中盤ぐらいが参考になるかも） フォントやロゴ、アイコンなどベクター表現については WEB
Retinaよりも大切なもの - ザリガニが見ていた...。
その後の関連日記あり Retina＋Mountain Lionのスクロール - ザリガニが見ていた...。 Retinaのほんとうの力 - ザリガニが見ていた...。 Retinaなら3840x2400の超広大なデスクトップを体感できる！ - ザリガニが見ていた...。 MacBookのRetinaディスプレイを縦2880pxにした壮観な眺め - ザリガニが見ていた...。 発注 WWDCの翌日、MacBook Pro Retinaモデルを発注してしまった。2880×1800の魅力にとり憑かれてしまったのだ。発注したモデルは... 2.6GHzクアッドコアIntel Core i7プロセッサ メモリ16GB フラッシュストレージ512GB 値段は今まで使っていたMacBook2台分以上だが、このスペックなら今後5年以上はそのまま使い続けられるのではないか、と考えての発注であった。 実際過去
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」:phpspot開発日誌
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 2012年04月12日- Retina.js | Retina graphics for your website Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 <img src="/images/my_image.png" /> という画像タグがあったとするとスクリプトがサーバ上の"/images/my_image@2x.png"というファイルを自動でチェックして存在すれば置き換えてくれます。 インストールはretina.jsを読み込むだけというお手軽さがいいです。 単に高解像度で出したい部分だけファイルを用意して置いてあげればよいというのはお手軽ですね。 <script type="text/javascript" src="/s
[D] Flickrで簡単にブログをRetina iPad対応にする方法
元々僕のブログは写真をメインに使いたかったので横幅800pxサイズの画像を貼り付けていました。ただ実はFlickrでは横800pxという画像サイズは存在せずちょっと富豪的ですが1024pxサイズの画像を800pxにリサイズして貼り付けるということを行ってました。 上の画像が実際に新旧iPadでこのブログの表示結果を撮影比較した結果です。左がRetina iPad、右が旧型のiPadですが比べると画質の差が歴然です。 Retina iPadじゃ無い人はクリックして大きめのサイズで確認してみてください。 (ちなみにスクリーンショットでは上手く比較が出来なかったのでデジカメで撮影した写真を使ってますが、明るさや色味などの調整は適当なのであくまでも解像度の違いを実感するサンプルとして見てください。) この従来は単に無駄でしかなかった大きめの画像リサイズが、Retinaに対応した新型iPadでは画質
[新iPad2/iPhone5 対応版] アプリ作ったら用意する画像サイズの一覧 : 管理人@Yoski
新しい iPad もリリースされて、用意すべき画像サイスがわけわからなくなってきたのでチト整理しときますね。 ※2012/9/13 iPhone5 対応追加 アプリ作ったら用意する画像のサイズ一覧（保存版） - iPhone/iPad アプリアイコン * 57x57 * 114x114 (@2x) * 72x72 (iPad用だけどiPhoneアプリでも用意するべき) * 144x144 (@2x)(iPad用だけどiPhoneアプリでも用意するべき) * 29x29 (検索結果用 - 必須ではない) * 58x58 (@2x)(検索結果用 - 必須ではない * 50x50 (必須ではない。iPad 対応してなければ不要) * 100x100 (@2x)(必須ではない。iPad 対応してなければ不要) * 512x512 (アプリ申請時に必要) (@2x)とついてるものは、ファイル名を x
iPhone4 Retina Display対応のデザインのコツ！
僕はどうやったらRetina Displayが綺麗に表示されるか必死に模索する毎日です。（保護シート含め） ということで、今後のiPhone開発に”必須!!!"のRetina Display対応のデザインデータの作り方のコツについてご紹介します！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dev7studios
http://dresscording.com/blog/svg/retina_svg.html
cmmntr.com
WebサイトをRetinaディスプレイに対応させる方法
http://retinajs.com/