iPhoneサイトを構築する際のviewport設定について、以前に記事を書きました。
スマートフォンの画面サイズとフォントサイズ
今回、この設定で構築したサイトで１つ問題が発生しました。
iPhoneのブラウザでサイトを閲覧したときに、横にスクロールしてしまうという問題です。
言葉だけではうまく説明できないので、以下に図を示します。
※図はダミーです。Yahooさんのサイトで実際にはこうなりません。
Windowsの開発PCなどでApacheのバーチャルホストを活用する際に、hostsファイルを書き換えることがあります。
hostsファイルはWindows XP以前では、テキストエディタで開き、編集した後に上書き保存するだけでした。
しかし、Windows Vista以降では、新しく権限のしくみが組み込まれたため、編集するためにはファイルを管理者権限で開く、また、開く際に確認のアラートが鳴るという仕様になっています。
Webの仕事をしていると、とにかくhostsをよく書き換えます。
たいした事ではありませんが、深い階層にあるhostsファイルを管理者権限で開くという操作の繰り返しは若干のストレスになります。Webで探してみても、決定的な簡易的管理方法はみつかりません。。。
こんなことで悩んでいるのは私だけでしょうか。。。
そこで、どうにかスマートに管理できないものかと、私なりに考えてみました。
縦幅の長い、縦スクロールが発生するようなサイトを閲覧しているときにブラウザをリロードすると、画面はページのトップではなく、リロード前の位置で再読み込みされます。
未確認ですが、ここ1年の間での最新のブラウザに機能として追加されたようです。
とりあえず、現時点での最新のブラウザ、IE9、GoogleChrome18、Firefox11で、この動作を確認することができます。
スクロールした後にリロードした場合にも「読んでいたところを再表示する」という親切な機能かもしれませんが、逆に困ることもあります。
例えば最近ではパララックス効果など、意図的に縦長サイトをFlashのようなリッチコンテンツ風に構築されたサイトがあります。オープニングなどの演出で、初期表示は必ずトップを見てほしいという場合です。
一般的に、スマートフォンサイトでは横幅を320pxとしてデザインし、後にviewportでデバイス毎に横幅をフィットするように調整してサイトを構築します。
さて、iPhone4からディスプレイの解像度が2倍になったようです。
ここで何が問題かというと、これまで通り320pxでデザイン、構築した場合、解像度が倍になったiPhone4で閲覧してみると、画像が荒れて、または、ぼやけて表示されるという事です。つまり、iPhone4にとっては640pxが最適という事ですね。
iPhone4で画像があれるイメージ
解像度が倍になったことで画像があれるということは、
以前に以下のような記事を書きました。
CakePHPで「404 NOT FOUND」などのエラー画面を構築する
こちらで「cakeError」を使用する方法を紹介しましたが、実は欠点があります。
「cakeError」をコールすると、そのコントローラ内の処理が全てキャンセルされるという点です。
私の場合、コントローラ内の「beforeFilter」でレイアウトのヘッダやフッタを構成する処理を実装していたのですが、「cakeError」によりそれらが実行されず、結果的に作成したエラー画面で意図しないシステムエラーメッセージが表示される事態になってしまいました。
「beforeFilter」などに実装した処理を実行させるためには、AppErrorをオーバーライドしたり、コアファイルを修正して「beforeFilter」を実行するように改良する方法があるようです。
しかし、私の場合、エラーが発生する・しないに関わらず、コントローラ毎にベースとして実行する処理は「beforeFilter」にまとめてあるので、なるべくはコアファイルなどに変更をかけずに対策したいと考えてました。
jQueryではanimateという関数を使ってアニメーション効果を得ることができます。
アニメーションといえば、Flashなどでは初速と終速をコントロールしたイージング効果を加えることができますが、jQuery単体で利用できるのは「linear」と「swing」の二つの効果のみです。
jQueryでさまざまなイージング効果を実現するためには、以下のプラグインを組み込みます。
jQuery Easing Plugin
実装方法
実装方法ですが、本サイトからソースを取得し、jQueryをベースに読み込みます。
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
例えば、animateでイージング効果「easeOutCubic」を実装する場合、以下のように指定します。
$('#sample').animate({left: "+=100px", top: "+=100px", opacity: 0}, 1000, 'easeOutCubic');
この場合、サンプルオブジェクト「id=sample」がフェードアウトしながら右下に移動するのに、イージング効果がプラスされます。
jQueryの仕様については割愛します。
LightboxはjavascriptとCSSで、ブラウザの同一画面の上に画像を上書きするように表示させるスクリプトです。現在は「Lightbox 2」になっているようですね。
Lightbox 2
同様のスクリプトは数多く存在しますが、その総称は「Lightbox」と呼ばれているのが一般的です。それだけ当初のインパクトが強かったんでしょうね。
それぞれ、メリット・デメリットはあるのですが、最近ではもっぱら「colorbox」を使っています。
ColorBox, A jQuery Lightbox
導入方法は難しくなく、本サイトやサンプルを見れば簡単に組み込むことができます。
さて、なぜ「colorbox」なのかを、代表的なスクリプトと比較してみたいと思います。
iPhoneでスマートフォンサイトをみていたら、ピンチで画像を拡大できない。
という問題が発生しました。
ピンチとは2本指で画面をつまむようにして、画面を拡大・縮小することです。
結果からいうと、viewportの設定が原因でした。
viewportはスマートフォンサイトを画面にフィットさせるためのメタ情報であり、これまでは「おまじない」感覚で下記のように設定していました。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
これら要素を一つ一つ確認してみると、なんてことはない、きちんと理解していれば解決できる問題でした。
スマートフォン用のサイトを構築する場合、コンテンツの容量を極力おさえるために、画像を多用せずに、HTML5とCSS3で作成するのが一般的です。
CSS3の表現力を活用すれば、これまで画像として切り出していたバナーやボタンなどの要素を代替することが可能です。
この時、一つ問題になるのは日本語デバイスフォントです。
コーディング作業ではデザインを元にサイトを構築するのですが、デザインのバナーやボタンには多種多様な日本語フォントが使用されていることが多いです。これをスマートフォンのデバイスフォントで忠実に再現しようとすると難しい場合があります。
なぜなら、スマートフォンで使用できる日本語フォントは限られているからです。
代表的なスマートフォンで、デフォルトで用意されている日本語フォントは以下のとおりです。
| iPhone | ヒラギノ角ゴ W3 ヒラギノ角ゴ W6 ヒラギノ明朝 ProN（iSO 5のみ） |
|---|---|
| Android | Droid Font ※日本産のAndroidは各メーカーオリジナルの日本語フォントが入ってるケースもあるそうです |
旧PCから新PCへ作業環境を移すにあたり、FirefoxとThunderbirdを移行したので、その作業メモです。
FirefoxもThunderbirdもMozillaの製品であり、その移行方法は基本的に同じです。
何れも、プログラム部分と個人設定などを含むプロファイルのディレクトリが分かれているので、移行はそのプロファイルを移すことになります。
移行環境
今回、私が実施したのは「Windows7 32bit」から「Windows7 64bit」マシンへの移行です。新旧マシンの共に、Firefoxのバージョンは8.0.1、Thunderbirdのバージョンは9.0.1です。
これより古いバージョンについては未検証ですが、近いバージョンであれば、同じ手順での移行は問題ないと思います。
※後日、「Windows7 64bit」から「Windows8.1 64bit」でも移行しましたが、同手順で問題ありませんでした。