ホーム サンプルコード一覧 5. Page Preloader

5. Page Preloader

実現される機能

非同期通信を利用することで、全てのページ遷移をダイナミックなものとし、ページ切り替えを高速にします。
表示するページを、hashとしてURLに記憶するため、
各ページにURLが割り当てられたかのような状態を作り出すことができます。

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

基本デモ - top

基本デモ - photos

基本デモ - settings

ページ上部にあるリンクは、ページ間のリンクになっています。
これらのリンクは、具体的なページヘのリンクではなく、hashの変更となっています。
Page Preloaderは、hashの変更を監視し、hashに対応するコンテンツをAPIから取得し、
その結果をページ内に反映させるようになっています。

いきなりhash付きのURLを開いた時でも、同様の処理を行います。
このようにして、hash付きのURLが、実在するURLであるかのように振る舞います。

使用手順

1. 依存ライブラリの読み込み

Page Preloaderが依存する、以下のライブラリを読み込みます。

<script src="[yourDirectoryHere]/jquery.min.js"></script>
<script src="[yourDirectoryHere]/underscore-min.js"></script>
<script src="[yourDirectoryHere]/backbone-min.js"></script>
<script src="[yourDirectoryHere]/jquery.jsonp-2.4.0.min.js"></script>

Page Preloader本体である hashchangerouter.js を読み込みます。

<script src="[yourDirectoryHere]/hashchangerouter.js"></script>

2. 必要な要素を用意

必要な要素をページ内に準備します。用意するのは以下です。

<div id="pageLoader" class="pageLoader"></div>

ページ読み込み時に表示するローディングを格納する要素です。

<div id="pageRoot"></div>

ページ内容が差し込まれるコンテナです。

このデモでは、上記の要素を使用していますが、classやidを変更したい場合、
必要に応じ、hashchangerouter.js内を書き換えてください。

3. APIを用意

ページ内容を返すAPIを用意します。
このサンプルでは、ダミーのAPIをPHPで用意しています。
そして、APIのパスを、以下にしています。

../dummyApi/pageData.php

このAPIのパスは、hashchangerouter.js内に書かれているため、自身のものへ書き換えてください。

このAPIは、GETパラメータidを受け取り、対応するページのHTMLのメイン部分を返すように設計します。
このデモでは、topphotossettingsの3つの値に対応しています。

APIが別ドメインとなるため、返すデータの形式は、JSONPです。
例えばtopでは、以下の様な値を返しています。

callback({
  "tmpl": "<div class=\"tabs\">\n  <a href=\"#/p/top\" class=\"tab tabA tab-active\"></a>\n  <a href=\"#/p/photos\" class=\"tab tabB\"></a>\n  <a href=\"#/p/settings\" class=\"tab tabC\"></a>\n</div>\n<img class=\"img\" src=\"../imgs/photos/1.png\" width=\"280\" height=\"186\" alt=\"\">\n<p class=\"p\">彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。 彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。</p>"
});

このtmplキーの内容として、ページのHTMLを入れます。

4. 動作確認

Page Preloaderは、ページのhashが以下の形式であった場合、

#/p/[ID]

[ID]の値を前述のAPIに投げ、返されたデータで、ページ内の#pageRootの中身を置き換えます。
APIのレスポンスを待っている間は、#pagLoaderが表示されます。

以上が、Page Preloaderの基本的な動作です。

機能拡張

Page Preloaderは、上記の様な動作をするルーターの基本部分の実装のみの内容となっています。
機能を追加したい場合は、独自にコードを書き足す必要があります。
app.Routerにて、URLのルールを指定できますので、このオブジェクトを拡張していく形となります。

その他

当スケルトンのディレクリ直下にあるjsonGeneratorは、当スケルトンにて使用するJSONPレスポンスのデータを手軽に作るためのツールが格納されたディレクトリです。Gruntで動作します。本スケルトンは、JSONPを返すダミーのAPIをPHPで作っています。