Learn english for Design.

Aproposを使ったレスポンシブ画像

Oct, 7, 2013

Squareのフロントエンド開発チームが日本語版サイト構築の際に作成したレスポンシブ画像の振り分けライブラリ「Apropos」を紹介したブログ記事のつたない翻訳です。

デフォルトの設定のままならSass1行の記述で完結し、また解像度やサイズの変更などの拡張に対しても柔軟に対応できるライブラリとなっていて非常に便利そうです。


Responsive Images with Apropos The Corner Square Engineering Blog

Squareのフロントエンドの開発チームは日本語版のウェブサイトを構築する際、早々にサイトを様々な幅のデバイスに対応させる事を決定し、レスポンシブデザインを採用する事を決めました。 (誰が完全に独立した「モバイルサイト」をサポートしたいと思いますか?)

しかし、我々はどうやったら全ての閲覧者がカメラマンが撮影した豪華な写真を各々に適切な解像度で表示させられるのかを知りませんでした。

沢山のSass(*1)

我々はレスポンシブ用に画像を振り分けるサービスが無いか既存のソリューションを探してみたが、どれも求めていた基準を満たしていませんでした。

Javascriptを使用すると未使用の余分な画像をダウンロードしてしまいますし、 Cookieを使用するとキャッシュを利用する事が出来ず、毎回ロード時間がかかってしまいます。なので我々はすぐにCSSに頼るべきであると判断しました。 スタイルシートでメディアクエリを解析するブラウザの能力を活用して特定のデバイスに必要なリソースのみをダウンロードするようにしました。

次に我々は、ページのプロトタイピングとなる初期バージョンの作成を開始しました。 書いてみたCSSの量はSassのビルトイン機能を組み合わせる事で作られています。 我々はブレークポイントを3つに絞り、さらに標準とRetinaのそれぞれのディスプレイにも対応する事にしました。なので画像ごとに六つの異なるメディアクエリを持っています。

我々はまた同じデザインでより多くの言語をサポートし、また別の解像度などのバリエーションが増えた際にも簡単に追加できるように設計しました。

Apropos(適切な)

これらの問題を解決するために、 我々はAproposと名付けたCompassの拡張を構築しました。

基本的な使い方は簡単です: 異なるサイズ、解像度、ローカライズ画像を指定します。 次にそれらに使用する拡張子を追加した画像を定義します。 下記のような単純なファイルネーミングシステムで完結しています。

hero.jpg            # The base image (mobile)
hero.2x.jpg         # For mobile high-res devices
hero.medium.jpg     # For a tablet-sized screen
hero.medium.2x.jpg  # High-res tablets
hero.large.jpg      # Desktops
hero.large.2x.jpg   # High-res desktops

状況に応じた必要なサイズの画像をロードするためにはSassを1行を記述するだけです。

.hero
  +apropos-bg-variants('hero.jpg')

スタイルシートがコンパイルされると、それらはこのような28行のcssを生成します。

.hero {
  background-image: url(/assets/hero.jpg);
}
@media (-webkit-min-device-pixel-ratio: 1.75), (min-resolution: 168dpi) {
  .hero {
    background-image: url(/assets/hero.2x.jpg);
  }
}
@media (min-width: 768px) {
  .hero {
    background-image: url(/assets/hero.medium.jpg);
  }
}
@media (min-width: 1024px) {
  .hero {
    background-image: url(/assets/hero.large.jpg);
  }
}
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.75), (min-width: 768px) and (min-resolution: 168dpi) {
  .hero {
    background-image: url(/assets/hero.medium.2x.jpg);
  }
}
@media (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.75), (min-width: 1024px) and (min-resolution: 168dpi) {
  .hero {
    background-image: url(/assets/hero.large.2x.jpg);
  }
}

各ブレークポイントでは、CSSのheightプロパティを生成するなどの機能も追加しました。 自動で画像ファイルから高さを計算して各ポイントでレイアウトを適応させるので非常に柔軟性を持つようにできています。

ローカライズや解像度のバリエーションを拡張するのが簡単になるように我々はAproposを構築しました。 詳細についてはドキュメントをご覧下さい。

今日、私たちは、オープンソースプロジェクトとしてAproposをリリースしています。チェックアウトし、あなたのサイト上で試して感想を聞かせてください!


なんか機械翻訳みたいになってしまった・・・

(*1)lottaはa lot ofかと思ったのですが・・・大丈夫かな・・

あとソースコードを見てみるとSquareはscssではなくsassを採用しているようですね。

comments powered by Disqus