新しいサイトをつくるときに使いたい基本的なあれこれ

Cat:
Web
Tag:

最近、新規でサイトをつくるときに使うことにしている技術やサービス、細かいテクニックについて、備忘録的に書いておきたいと思う。おおまかにまとめると、以下のような感じ。

  • CSS 3のMedia Queriesを使って1ソースでスマートフォンからタブレット、フルブラウザまでレスポンシブ対応
  • CSSの日本語フォント指定について（とくに三点リーダ）
  • retinaimages.phpでiOSのRetina対応
  • jQueryのプラグインやJavaScript関係

基本的に、スマートフォンやタブレットなどのモバイル端末でのブラウズが多くなることを想定したのが今までと大きく違うところだ。モバイル対応というか、複数デバイスを想定というのは、今後ますます重要になってくると思うのでその辺りのことを重点的に書いてみたい。

Ads by Google

CSS 3のMedia Queriesを使って1ソースでレスポンシブ対応

一番の目玉は、やはりCSS 3のMedia Queries。巷でなにかと噂のあれだ。
僕自身もウェブの閲覧はiPhoneやiPadを使うことが圧倒的に多くなってきたし、スマートフォン向け表示を最適化したいと思っていたところ、最近はMedia Queriesが流行っていることを知った。
NHKスタジオパークのサイトを見るとよくわかると思う。ウィンドウサイズを変更するとそれに従ってレイアウトが変わる。しかも、jQuery Masonryを使ってレイアウト変更時にアニメーションするので見栄えがいい。

NHK スタジオパーク

いままでの典型的なモバイル対応は、PHPなどでユーザーエージェントを判別してそれぞれ専用のページを表示したり、別のテンプレートを読み込んだりしていたけど、Media Queriesを使えば、ページ自体のソースはそのままで、デバイスの表示サイズに応じてCSSをリアルタイムに適用できるようになる。よくありがちな、スマートフォン用の汎用テンプレートでどこのサイトかわからないようなのから脱却できるわけだ。

CSS 3の機能を使うので、CSS 3未対応のIE9以下向けとしてhead要素内に、

<!--[if lt IE 9]>
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

と書いて、GoogleCodeからIEでMedia Queriesを使えるようにするcss3-mediaqueries.jsを読み込む。ついでに、html5.jsも読み込んでおくといいと思う。

そうしておいて、CSSで例えば、

#container {
	width: 960px; /*フルブラウザ・iPad横のとき*/
}
@media screen and (max-width:960px){
	#container {
		width: 720px /*iPad縦のとき*/
	}
}
@media screen and (max-width:768px){
	#container {
		width: 468px /*iPhone横のとき*/
	}
}
@media screen and (max-width:480px){
	#container {
		width: 300px /*iPhone縦のとき*/
	}
}

と書けば、4タイプのデバイス表示幅を想定してそれぞれのwidthを設定することができる。
ちなみに、今回からSCSSとCompassを使うようになったので、次のように簡略化して書くことができる。

#container {
	width: 960px; /*フルブラウザ・iPad横のとき*/
	@media screen and (max-width:960px){
		width: 720px /*iPad縦のとき*/
	}
	@media screen and (max-width:768px){
		width: 468px /*iPhone横のとき*/
	}
	@media screen and (max-width:480px){
		width: 300px /*iPhone縦のとき*/
	}
}

Compassを使うと、他にも一行だけで各ベンダープレフィックスに対応できるなどかなり便利なのでおすすめ。
余談だけど、リセット系のCSSも今まではいろんなところのを参考にして独自のリセット用CSSをつくってそれを使い回すようにしてきたけど、今回からはCompassのライブラリを使うことにした。Media Queriesでレスポンシブなデザインにするとどうしても複雑なCSSになってしまうので、少ない記述で済むCompassは必須かと思う。

Media Queriesの具体的な使い方等については、以下のサイトが参考になると思う。

[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル

なお、iOSの場合、デフォルトではフォントサイズが自動的に調整されてしまうので、向きを変えたときに文字の大きさが意図しないものになってしまうことがある。
以下のように、フォントサイズの自動調節をなしにするCSSを追加しておくとよい。

body {
	-webkit-text-size-adjust: none;
}

CSSで日本語のフォント指定

日本語フォント指定については、いままでもかなり頭を悩ませてきた。ずいぶん前に「三点リーダとCSSのフォント指定」というのを書いたけど、あれでは不十分なので、この際、どのブラウザでも必ず三点リーダがちゃんと表示されるというのを目指したいと思う。
目標としては、Macではヒラギノ、Windowsではメイリオで表示されるようにしたい。そこで問題となるのは、Macにメイリオをインストールしている場合、およびWindowsにヒラギノをインストールしている場合だ。割合としてはとても少ないだろうけど、そういう人はたいていヘビーユーザーなので、やはりきちんと表示できるほうが素敵だ。

というわけで、目的のためには少々手荒い手段を用いることにする。
PHPでユーザーエージェントを判別して、MacとWindowsで別々のフォント指定をしたCSSを読み込む。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if(preg_match('/Windows/', $ua)){
	echo '<link rel="stylesheet" href="/shared/css/win.css" />';
}else{
	echo '<link rel="stylesheet" href="/shared/css/mac.css" />';
}
?>

上記コードでは、ユーザーエージェントから「Windows」の文字列を探して、一致すればWindows用のCSSを、そうでなければWindow以外用のCSSを読み込むようにしている。ファイル名は便宜上、mac.cssになっているけど、Windowのフルブラウザ以外向けのものとなっている。

Windows用のCSSは、

@charset "utf-8";
@font-face {
  font-family: "MeiryoArial";
  src: local("Meiryo");
}
@font-face {
  font-family: "MeiryoArial";
  src: local("Arial");
}
@font-face {
  font-family: "MeiryoArial";
  src: local("Meiryo");
  unicode-range: U+2026;
}
body {
  font-family: "MeiryoArial", sans-serif;
}

として欧文はArial、和文はメイリオが表示されるようにしている。メイリオの英数はあんまりなので。なお、最初に欧文フォントを指定した場合、欧文の下付きドット3つのellipsisと和文の三点リーダがユニコードで同じコード「U+2026」が割り当てられているため三点リーダがArialのellipsisで表示されてしまうのを回避するために、CSS 3のユニコードレンジ指定で決め打ちでメイリオをしていするというちょっとトリッキーなことをしている。そのあたりのことは下記のサイトが詳しい。

[WebDev]三点リーダ問題、webfontでついに解決！……か？ - orangeProse

そして、Windows以外のほうは、

@charset "utf-8";
body {
 	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", Osaka, sans-serif;
}

これは、Safariのデフォルトがセリフ系フォントなので、それをゴシック系にしたいというだけなのであっさり。「Hiragino Kaku Gothic ProN」を指定することで、iOSでも三点リーダがちゃんと表示される。
なお、iOS以外のスマートフォン・タブレットは残念ながら未検証。もう少し改良の余地があるかもしれない。

retinaimages.phpでiOSのRetina対応

iOSがRetina化されてからサイト上のピクセル等倍の画像がRetina端末では2倍の解像度になるので鮮明に表示されないというのが問題になった。今まで気にはなっていたけど、そもそもモバイル用の表示を用意していない場合、980pxを基準にデバイスの横幅いっぱいに縮小して表示されるのでiPhoneに限って言えばそんなに気になることではないと思って放置してきた。しかし、Media Queriesでモバイル最適化するとなると、話は別。特にサイト名のロゴに背景画像を使っている場合など、ぼやけているとかっこ悪いので、この際きちんと対応しておきたい。

Retina対応は、JavaScriptで2倍の解像度の画像に差し替えてしまおうというRetina.jsが有名だけど、これだとクライアント側のマシンに負担がかかる上に無駄なトラフィックが発生するのが欠点。そこで、.htaccessのリダイレクトで2倍画像に差し替えるretinaimages.phpを使うことにした。詳しい使い方は以下のページが参考になる。

ウェブサイトのRetina化 - [FLAT] Develop

ロゴなど背景画像などを用いる部分には、@2xの画像を予め用意しておくとして、問題はブログ記事内の画像だ。ブログ記事内の画像もそれぞれ@2xを用意するというのはあまりにも面倒で現実的でないので、長辺が1024px程度の大きめの画像をアップして縮小表示することにした。レスポンシブで表示サイズも変わるから、スマートフォン向けのときは無駄に大きなサイズの画像を表示することになるけど、ここは目をつぶろうと思う。
ブログでの画像のアップロードでRetina対応というのは、CMS側の問題もあるので、retinaimages.phpを使う前提のプラグインをつくるといいのかもしれない。ただ、デバイス幅が小さいときにも大きな画像が表示される問題は残ってしまう。

ついでに、IEで大きな画像を縮小表示するとジャギーが出て美しくないので、できるだけジャストサイズの画像を用意するというのが今までの常識だったわけだけど、実は以下のCSSを書くことで改善できる。

img {
 	-ms-interpolation-mode: bicubic;
}

それにしても、IEはどうしてこんなにへんてこ仕様なんでしょうね｡

jQueryのプラグインやJavaScript関係

もはや、ウェブ制作はこれなしでは行えない、というくらいスタンダードになった感のあるjQuery。以前はprototype.jsが流行っていたけど、ここ2〜3年はjQueryのほうが圧倒的だ。jQueryには便利で楽しいプラグインがたくさんあるけど、あまりたくさん入れるとメンテナンス性も下がるので必要最小限の使用に留めた。主なものとしては、

jQuery.fancybox

prototype.jsの時代にLightboxが登場して以来、さまざまな類似プラグインが現れては消えていったけど、今のところfancyboxが一番気に入っている。

fancyBox - Fancy jQuery Lightbox Alternative

jQuery.fitVids.js

YouTubeやVimeoの埋め込み動画のサイズを変更できるようにするプラグイン。レスポンシブデザインのサイトでは必須とも言える。

FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

jQuery.zip2addr.js

AjaxZipなど郵便番号から住所を自動入力してくれるライブラリは以前からあったけど、これはそのjQuery版ともいえるもので、Google日本語入力APIを利用しているそうで、郵便番号データの更新等はいっさい不要、メンテナンスフリーで使える優れもの。

jQuery.zip2addr.js - GitHub

プラグイン以外

jQueryのプラグイン以外では、コードの表示用にSyntaxHightlighterを入れた。この記事のように、コードを多用するときには非常に便利。

それから、これはこのブログに限ったことだけど、写真のキャプション的に入れているカメラ名 / レンズ名を直接書かずにリンクのtitle属性とか画像のtitle属性からJavaScriptで取得して挿入することにした。このブログでは、記事の最初に写真を貼ってそのあとに本文がはじまるというパターンが多いけど、こうすることで、例えばトップページにブログの一覧を表示して本文から抜粋で2行ほど表示させたいときなど、いきなりカメラ名が書いてあって意味不明な抜粋になるのを回避できる。

<div class="imgbox c"> <!--画像をレイアウトするdiv.imgbox-->
<img src="xxx.jpg" alt="写真" /></p> <!--画像-->
<p>Leica M8 / Summaron 35mm F2.8</p> <!--カメラ名 / レンズ名のキャプション-->
</div>

以前は、このように書いていたのを、

<div class="imgbox c">
<p><img src="xxx.jpg" alt="写真" title="Leica M8 / Summaron 35mm F2.8" /></p>
</div>

キャプションに入れたいテキストを画像のtitle属性に書く。そして、次のようなJavaScriptを追加。

$(function(){
	$('.c').each(function(){
		$(this).append('<p>'+$(this).find('img').attr('title')+'</p>');
	});
});

これで、title属性のテキストがキャプションに自動的に表示されるようになる。Facebook等でシェアされた場合にも冒頭から本文が表示されるので精神衛生上非常によろしい。


その他もろもろ

その他、このブログに関しては、コメントにDisqusを使用（Livefyreも試してみたけど過去のコメントがインポートできるのかよくわからなかったのでDisqusのまま）とか、画像は全てFlickrにアップして、Flickr APIや埋め込みコードを使ってサイト内で表示とかも。

というわけで、ざーっと書いてきたけど、書いてみると自分のなかでも整理できるかと思ったら逆にこんがらかってしまった予感。
ともあれ、なにかの参考になれば。

Ads by Google

comments powered by Disqus