HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

iPhoneサイトを構築する際のviewport設定について、以前に記事を書きました。
スマートフォンの画面サイズとフォントサイズ
今回、この設定で構築したサイトで1つ問題が発生しました。

iPhoneのブラウザでサイトを閲覧したときに、横にスクロールしてしまうという問題です。

言葉だけではうまく説明できないので、以下に図を示します。
viewport

※図はダミーです。Yahooさんのサイトで実際にはこうなりません。

一般的に、スマートフォンサイトでは横幅を320pxとしてデザインし、後にviewportでデバイス毎に横幅をフィットするように調整してサイトを構築します。

さて、iPhone4からディスプレイの解像度が2倍になったようです。
ここで何が問題かというと、これまで通り320pxでデザイン、構築した場合、解像度が倍になったiPhone4で閲覧してみると、画像が荒れて、または、ぼやけて表示されるという事です。つまり、iPhone4にとっては640pxが最適という事ですね。

iPhone4で画像があれるイメージ

解像度が倍になったことで画像があれるということは、

tentou_100x100

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は各メーカーオリジナルの日本語フォントが入ってるケースもあるそうです

毎度の事ですが、Javascriptでメールフォームなどのチェックを実装する場合に、
「selectの場合はこれでよかったっけ」、「checkboxの値の取り方は。。。」と調べなおしてしまいます。
分かっているつもりでも、仕事上、使う場面が頻繁でもないのでうっかり忘れてしまいます。

困ったときの手間を省くために、ここのメモに書き留めていきたいと思います。

最近ではjQueryの組み込みがデフォルトになってきたので、サンプルはjQueryベースとなっています。ここでjQueryの使い方についての詳細は省きます。

HTMLフォームのsubmitボタンを連続でクリックしてしまうと、意図しないデータが多重に送信されてしまうという問題があります。

これを防止するために、JavaScriptで二重にクリックするのを抑止する方法があります。
シンプルなしくみだと、一度クリックされたらフラグをオンにしてボタンクリックを無効にしたり、押されたボタンにdisabledをセットして非活性にしてしまうなど、比較的簡単な処理で済みます。しかし、深いところまで突き詰めて完全に抑止しようとすると、めんどくさい設計と処理を実装が必要となります。さらに、コーディング規約やフレームワークのルールなどで制限されている環境だと、さらに難しい問題となってふりかかります。

例えば、今回私が実装した環境では以下のような前提がありました。

  • サブミットまでの処理で極力JSを使わない
  • フォームのボタンタイプは「type=”image”」
  • 複数のボタンが存在しサーバ処理を分岐している

フラグを用いた方法だと、複数個所にJSを埋め込む必要があったので、却下しました。また、disabledをセットする方法では押されたボタンの情報はPOSTされないので、サーバ側でどのボタンが押されたのか判断できなくなるため、却下しました。

HTML5には新しいタグがいくつか追加されています。それらの中には文書構造に意味を持つものもあり、今後のコーディングにおいては各々のタグの役割を理解することが重要になるかもしれません。
そこで、今回は、HTML5のアウトラインを意識して、このブログの文書構造を調整したいと思います。

HTML5アウトラインを可視化する

アウトラインを可視化するツールとしては、Google Chromeのプラグイン「HTML5 Outliner」があります。
HTML5 Outliner – chrome ウェブストア
その他には、Webツールもあります。
HTML 5 Outliner
2つで可視化した結果、構造に大きな差はありませんが、後者は画像のaltを見出しとして読み込んでくれる点など、若干の違いはあります。ただ、HTML5の定義が厳密でない現時点では、優劣をつけるのは難しいです。

以下は、このブログをHTML5 Outlinerで可視化した結果です。
html5outline1

どうやら、意味を持つ要素に対して見出しが設定されていない箇所が多いようです。

CSS3のプロパティ「text-shadow」を使ってフォントを装飾する方法です。

フォントにシャドウを付ける

以下のように設定することで、フォントに影を付けることができます。

text-shadow: 1px 2px 3px #ff0000;

それぞれの値は、
右方向に1pxずらして(マイナスだと左方向)、
下方向に2pxずらして(マイナスだと上方向)、
ぼかし具合を3px、
影の色は「#ff0000」にというように指定してあります。

text-shadowのサンプルです。

もちろん、text-shadowが使えるのはCSS3に対応しているブラウザに限りますが、私の環境では、Firefox5とGoogle Chrome 12で表示できていることを確認できています。残念ながらIEは対応していません。

Monthly Archives

Search