HTML5 Web Applicationのつくりかた

もちろん、作ろうとするサイト・アプリケーションにもよりますが、表示内容を変更しようとする際にスクリプトを読む必要がないのは大きなメリットではないでしょうか。今回JavaScriptはページ遷移、アバターの描画を担当しています。

表示要素は全ページまとめて1枚のHTMLに記述しました。ページごとのリクエストが不要で、遷移時にタイムラグをなくすことができます。

ページ遷移にはHTML5で新たに追加されたwindow.onhashchangeを使っています。URLの#以降が変更されたときに指定のページを表示させています。iOS, Androidどちらのブラウザも対応していたこと、サーチエンジンやページキャッシュへの対応が必要なかったため採用しました。

<a href="#eye">次へ</a>をタップ(クリック)

→URLがhttp://~~~.jp/#eyeに変更される

Custom Data Attribute

Data URI Scheme

・HTML・CSS

Sass

・構造化
#confirm{
.lead{
margin: 15px 0 0;
font-weight: bold;
text-align: center;
}

.submitArea{
margin: 59px 0 0;
}

・ループ
@for $i from 0 through 6 {
ul[data-parts="face"] li[data-item="#{$i}"] { background-position: removePx((-11 + -$i) * $thumbWidth) removePx(-10 * $thumbWidth); }
}

・関数
@function removePx($v){
@if $v == 0{
@return $v;
} @else {
@return #{$v}px;
}
}

・Mixin
@mixin border-radius($radius: 4) {
-moz-border-radius: removePx($radius);
-webkit-border-radius: removePx($radius);
border-radius: removePx($radius);
}

続いて、今後のWebで重要なトピックスである高速化について、今回実施したことをまとめます。

大前提はHTTPリクエストを減らすこと

Googleが検索順位決定の要素に速度を追加していくと発表したこと、ユーザーの利用時間の奪い合いが激化していること、スマートフォンに代表されるモバイル環境の普及・マルチデバイス化などの理由でWebサイトの高速化はますます重要なトピックスになってきていきます。
Webサイトの速度に関する多くの時間はファイルのダウンロードに費やされています。そのため高速化を考える際にはまずHTTPリクエストを減らすこと、つまりHTML, CSS, JavaScript, 画像ファイル, swf等ファイル数を減らす必要があります。

CSS Sprites

画像のHTTPリクエストを減らす方法として画像をひとまとめにするCSS Spriteがあります。
CSS でbackground-image, background-positionを指定して表示させます。
また、Data URI Scheme(前述)を使うことも有効な手段です。

画像最適化

PhotoshopやFireworksで書き出された画像データの多くには表示には必要のないデータが含まれています。OptiPNGなどのツールを使うことでそれらのデータを除去し、ファイルサイズを減らすことができます。

今回は約3%(79KB→77KB)データサイズを減らすことができました。

画像と同様にCSSファイル、JavaScriptファイルを結合することでHTTPリクエストを減らすことができます。今回のプロジェクトでは計7つのファイル(HTML 1つ、CSS 1つ、JavaScript 2つ、JSON 1つ、画像 2つ)に収めています。

仕上げにgzip圧縮転送の設定をします。こちらはサーバー側の設定になりますが、 Apache, mod_deflateで設定することができます。画像ファイル、pdfファイル等に設定すると容量が増えてしまうことがあるので、テキスト系のデータのみ設定する必要があります。

大体、70%程データサイズを削減することができます。

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-startup-image" href="起動時の画像">