Ajax – Mach3.laBlog https://blog.mach3.jp Sun, 15 Dec 2013 01:18:38 +0000 ja hourly 1 https://wordpress.org/?v=6.9 "Pjax" – Alphabetical Advent Calendar 2013 https://blog.mach3.jp/2013/12/15/jaac2013-p-pjax.html Sun, 15 Dec 2013 01:18:38 +0000 http://blog.mach3.jp/?p=3736 “P” は Pjax の “P”。

P

Pjax

Pjax とは、pushState + Ajax から作られた言葉で、 History の pushState メソッドでURLを管理しつつ、 コンテンツの遷移を Ajax を使って行う手法です。

おおまかな流れはこのような感じ。

  1. ページ内のリンクをクリックした時にページ遷移を行わずに、 対象のHTMLファイルの内容を Ajax で取得します。
  2. 取得に成功したら History.pushState でURLを変更して履歴に追加します。
  3. ファイルの内容から必要なコンテンツ部分を抽出して、コンテンツのコンテナに流し込みます。

ページごと遷移しない為余計な部分の再描画が必要なく、 遷移時に好みのエフェクトをかけられる点などが特徴です。 また、サイト全体に共通にかかるような JavaScript などの処理をページ移動毎に行わなくて済む為、 高速化にも一役かっています。

その実用性についてはこちらにまとまっていましたので、ご参考までに。

Pjax コンテンツを習作してみる

実装の仕方は様々あると思いますが、ここで一例習作してみましょう。 （例をシンプルにする為にjQueryを使用します）

HTML構造を共通化する

<ul id="navi">
    <li><a href="/" data-pjax>Home</a></li>
    <li><a href="/foo.html" data-pjax>Foo</a></li>
    <li><a href="/bar.html" data-pjax>Bar</a></li>
    <li><a href="/baz.html" data-pjax>Baz</a></li>
</ul>

<div id="content">
    <!-- ここの内容を差し替えます -->
    <h1>Hello, Pjax</h1>
</div>

まずこのようなHTMLを想定します。 上のナビゲーション部分のリンクをクリックすると Ajax でリンク先のHTMLファイルを取得し、 #content の内容を差し替えます。

HTMLの構造は、遷移元・遷移先共に共通にしておきましょう。 例えば下のコードは Foo をクリックした時に表示する為の foo.html です。

<!-- foo.html -->
<head>
    <title>Page Foo</title>
</head>
...
<ul id="navi">...</ul>

<div id="content">
    <h1>Foo</h1>
    <p>Lorem ipsum ...</p>
</div>

pushState のサポートをチェックする

if(! history.pushState || ! history.replaceState){
    return;
}

この例では pushState / replaceState 共に実装されていなければ正常に動かないので、 サポートしていない環境では以降の処理をスキップし、そのままネイティブの機能でページを移動してもらいます。

リンクの制御

クリックの制御は イベントのバブリング を利用して document にて行う事にします。 これならば、コンテンツ部分に新たに生成されるリンクも制御できます。 Pjax で遷移するリンクを明示する為に、ここでは data-pjax 属性を使用しています。

$(document).on("click", "[data-pjax]", function(e){
    e.preventDefault();
    var href = e.currentTarget.href;
    $.get(href, function(html, status, xhr){
        // コンテンツを更新する
        updateContent(html);
        // 履歴に追加する
        history.pushState({url: href, html: html}, "", href);
    }, "html");
});

コンテンツの更新

上のコードで使用している updateContent() 内でHTML文字列から必要な部分を抽出してコンテンツを更新します。 今回必要とするのは #content の中身と title です。

var updateContent = function(html){
    var title = (function(){
        var m = html.match(/<title.*?>([\s\S]+?)<\/title>/i);
        return m ? m[1] : "";
    }());
    var content = (function(){
        var m = html.match(/<body.*?>([\s\S]+?)<\/body>/i);
        if(m){
            var content = $("<div>").append(m[1]).find("#content");
            return content.length ? content.html() : "";
        }
        return "";
    }());
    document.title = title;
    $("#content").hide().html(content).fadeIn();
};

content のパースは厄介なので、jQueryで一時的に要素を生成してフィルタリングしています。 遷移時にはコンテンツ部分がフェードインするようにしてみました。

popstate イベントの設定

これだけではリンクをクリックした時だけしかコンテンツが変わらないので、 ブラウザの進む・戻るボタン等で履歴を移動した場合にもコンテンツが切り替わるように、 popstate イベントの設定をします。

$(window).on("popstate", function(e){
    var state = e.originalEvent.state;
    if(state && state.html){
        updateContent(state.html);
    }
});

jQuery.fn.on でイベント設定した場合は e.state ではなく e.originalEvent.state と辿らなければいけないので注意が必要です。 pushState で登録しておいた html が state から取得出来るので、それを使用してコンテンツをその時の状態に戻します。

現在いるページで初期化をする

一番最初に訪れたページの内容で、state の初期化を行います。 そうしなければ、ページ遷移を行ったあとに一番はじめのページまで履歴をさかのぼった時に state が空っぽな為、コンテンツを更新してくれません。

history.replaceState({url: location.href, html: $("html").html()}, "", location.href);

ファイナルコード

シンプルな構成ですが、こんな感じになりました。 実際にはエラー時の処理や、コンテンツのキャッシュ等も入るかもしれません。

(function(){

    if(! history.pushState || ! history.replaceState){
        return;
    }

    var updateContent = function(html){
        var title = (function(){
            var m = html.match(/<title.*?>([\s\S]+?)<\/title>/i);
            return m ? m[1] : "";
        }());
        var content = (function(){
            var m = html.match(/<body.*?>([\s\S]+?)<\/body>/i);
            if(m){
                var content = $("<div>").append(m[1]).find("#content");
                return content.length ? content.html() : "";
            }
            return "";
        }());
        document.title = title;
        $("#content").hide().html(content).fadeIn();
    };

    $(document).on("click", "[data-pjax]", function(e){
        e.preventDefault();
        var href = e.currentTarget.href;
        $.get(href, function(html, status, xhr){
            updateContent(html);
            history.pushState({url: href, html: html}, "", href);
        }, "html");
    });

    $(window).on("popstate", function(e){
        var state = e.originalEvent.state;
        if(state && state.html){
            updateContent(state.html);
        }
    });

    history.replaceState({url: location.href, html: $("html").html()}, "", location.href);

}());

ライブラリを利用する

上の説明用のコードは単機能で汎用性にも欠け、いささか面倒です。 既に Pjax のライブラリは多くの方が公開していると思いますので、 それを利用させてもらいましょう。

jquery-pjax

https://github.com/defunkt/jquery-pjax

jquery-pjax は名前の通り Pjax の面倒な処理ひと通りこなしてくれるjQueryプラグインです。

$(document).pjax("a[data-pjax]", "#container");

jquery-pjax は Ajaxのリクエストに X-PJAX というヘッダを追加してくれます。 サーバサイドでそのヘッダを検知して、共通レイアウトを省いたコンテンツ部分のみを出力するようにすれば、 データ量の節約になるという寸法です。

レイアウトを省かないHTMLを読み込んで部分だけ使用したい場合（上であげたコードのようなケース）は、 fragment オプションでセレクタを指定する必要がありますので注意しましょう。

$(document).pjax("a[data-pjax]", "#container", {
    fragment: "#container"
});

参考資料

]]> Googleスプレッドシートを簡易DBとして利用する -　PHP+Ajax編 https://blog.mach3.jp/2013/06/04/spreadsheet-as-db-for-php-ajax.html Tue, 04 Jun 2013 01:32:29 +0000 http://blog.mach3.jp/?p=3114 このお題は以前にも何度か関連記事を書いていますが、 いずれの方法もパフォーマンスがあまり良くなかったり、安定性に問題があるなどしました。 今回はその辺を解決する為のライブラリを考えてみるお話です。

Googleスプレッドシートを簡易DBとして利用する -　PHP+Ajax編

  1. やりたい事
  2. 書いてみたもの
  3. 基本的な使い方
  4. Ajaxで利用する
  5. JSONPで利用する
  6. その他オプション・機能など
  7. 必ず気をつけなければならないこと
  8. まとめ : Googleスプレッドシートの活用について

「新しくなったスプレッドシートと簡易データベース化」でGhostsheetが使えなくなったと書きましたが、新スプレッドシートでもAPIが整備された様で、2014年11月20日現在では正常に動作する事を確認しています。但し、スクリーンショット類は古い物なのでご注意ください。（スプレッドシートIDの取得はURLを参照されるのが良いでしょう）

やりたい事

  • Googleスプレッドシートからデータを利用して展開したい
  • データは分かりやすい形に加工しておきたい
  • 直接JSONで読めるけど、毎回読みに行くのは非効率なのでなんとかしたい
  • スプレッドシートがメンテ中の時も対応したい

つまり、サーバ上に加工したデータをキャッシュとして保存しておけば良いわけですね。

書いてみたもの

Ghostsheet by mach3

Ghostsheet

今回はPHPで書いてみました。こんな感じにはたらきます。

  1. 渡されたIDを頼りにスプレッドシートをJSONで読み込んできます
  2. 加工したデータをキャッシュに保存し、返します
  3. 二回目以降のリクエストは、キャッシュの期限内であればキャッシュから返します
  4. キャッシュが期限切れならば再度リモートから読み込んできます

基本的な使い方

1. スプレッドシートを作る

Googleドライブ で、簡易DBにするスプレッドシートを作成します。 一行目はフィールドのキーで構成されるヘッダ行にします。これらのキーを元にデータは加工されます。

キーの末尾に書かれている :integer 等の文字は、値の型です。 これを指定しておくと、データを加工する際に値をその型にキャストするように頑張ってくれます。 省略時の初期設定は”string”です。 “integer”, “boolean”, “float”等が使用できるほか、”array” ではカンマで区切った配列が、 “json” ではJSON文字列としてパースされた結果が格納されます。

2. スプレッドシートを公開 & IDを取得する

「ファイル」→「ウェブに公開」でシートの公開設定ができます。

ウェブに公開

  1. 「公開開始」ボタンを押して公開します
  2. 「公開データへのリンクを取得」で「RSS」を選択します。

すると、次のようなURLが表示されるので、

https://spreadsheets.google.com/feeds/list/XXxxxxXXXxxxXx/od6/public/basic?alt=rss

太文字の “XXxxxxXXXxxxXx/od6” にあたる部分をコピーします。 これはこの後スプレッドシートのIDとして使用されます。

3. Ghostsheetで読み込む

Ghostsheet.php を任意の場所に設置してrequireし、初期化してスプレッドシートを読み込みます。

require "Ghostsheet.php";

$gs = new Ghostsheet();

// キャッシュ用のディレクトリを設定しておきます
// config() で配列を渡すこともできます
$gs->set("cacheDir", "./gscache/");

$mySpreadsheetId = "XXxxxxXXXxxxXx/od6";
$data = $gs->load($mySpreadsheetId); // $dataに加工されたデータが格納されます

あとは、読み込まれたデータを好きな様に料理してください。

Ajaxで利用する

Ghostsheetには、Ajaxで簡単に利用する為の ajax() メソッドが用意されています。 ajax() は引数の配列（省略時のデフォルトは $_GET）を使用して処理し、JSON形式でレスポンスを返します。

ajax.php

require "Ghostsheet.php";

$gs = new Ghostsheet();
$gs->set("cacheDir", "./gscache/");
$gs->ajax();

jQueryによる読み込み例

$.getJSON("ajax.php", {
    id : "XXxxxxXXXxxxXx/od6"
})
.then(function(data){
    console.log(data.items);
});

JSONPで利用する

Ajax同様にJSONPでレスポンスを返すことも出来ます。 あまりおすすめできる機能ではないので、初期設定では無効化されています。

require "Ghostsheet.php";

$gs = new Ghostsheet();
$gs->config(array(
    "cacheDir" => "./gscache",
    "jsonp" => true // JSONP機能を有効に
));
$gs->ajax();

受け取るidのホワイトリストを作ったり、 キャッシュディレクトリを非公開にするなどの対策をして使用した方が良いかな、と思います。

その他のオプション・機能など

ざっくりとしか書いてませんが、APIドキュメントをどうぞ。

Ghostsheet : API Doc

必ず気をつけなければならないこと

Googleスプレッドシートを簡易的なCMSとして使用する上で、気をつければならないこと。

非公開情報は載せない

「Webで公開」機能を利用しないと使えないライブラリなので、 そのスプレッドシートの内容は全て公開されてしまいます。

共有設定に気をつけて

第三者が編集できるような状態にしない。 クライアントと共有したい場合は、限定公開でユーザーを決め打ちしましょう。

「変更が加えられると自動的に再公開する」のチェックはオフに

編集途中の状態で公開されて恥ずかしい思いをする可能性があります。 自動公開ではなく、編集が終わったら都度「今すぐ再公開」ボタンを押すようにしましょう。

まとめ : Googleスプレッドシートの活用について

私は、優秀なクローンでも出ない限り、テーブルの編集でGoogleスプレッドシートの右に出るサービスは無いと思っています。 そして、WYSIWIGではなくテーブルでの管理をしたいWebコンテンツというのも多くあるでしょう。 例えば、

  • お店のメニュー表
  • 製品リスト
  • 詳細画面の要らないニュースリスト
  • その他リストコンテンツ

などなど。このようなデータコレクション的なコンテンツは、 CMSでがんばって実装したりするよりはテーブルで管理出来たほうが メンテナンスの効率も良いと感じるのです。

また、WordPressはわからないけどExcelならいつもつかってるからわかるよ！ というWeb担当者も多くいらっしゃると思います。 （専任の枠を割けずに総務の方が兼任しているようなケースでは特に）

そんなわけで、私はこのお題を執拗に探求しているのであります。

]]> 2010年に出会った愛すべきリソース達*11 https://blog.mach3.jp/2010/12/29/lovely-resources-2010.html Wed, 29 Dec 2010 08:46:00 +0000 http://blog.mach3.jp/?p=1284 2010年も残りわずか。CS5やらHTML5やらiナントカやら忙しい1年でしたが、
せっかくなので今年出会った素晴らしいリソースを振り返ってみます。

Great Resources 2010

@anywhere

@anywhere

Welcome to @Anywhere | dev.twitter.com

Twitterの機能がどのサイトでも活用出来るようになるJavaScriptリソース。
認証からタイムライン読み込み、パーツのレンダリングまで。
連携サービスを組むならおさえておきたい。

jsLint

jsLint

JSLint, The JavaScript Code Quality Tool

JavaScriptをストリクトに書く為のチェックツール。
前はWSH版がダウンロード出来たんですけど見つからなくなってますね。
Githubのを使ってなんやかんやするんでしょうか。こんど試してみよう。

LESS

LESS

LESS – Leaner CSS

変数に代入したり、ネストしたり、ミックスインしたり…
CSSコーディングが素晴らしくスピードアップするCSS開発キット。
エディタからも簡単に呼び出せるので重宝しています。
似たようなプロジェクトに「Sass」というのもあります。

jsDoc Toolkit

jsDoc Toolkit

jsdoc-toolkit – Project Hosting on Google Code

JavaScript版のドキュメント生成ツール。
こちらもエディタから使うと大変便利。

Modernizr

Modernizr

Modernizr

HTML5の新機能等が使用可能かどうかを判別してくれるライブラリ。
判別の結果はhtml要素のクラスとして出力してくれる他、
メンバを直接参照する事でも結果を知ることが出来ます。

便利なスクリプトなのですが、最近Head.jsに持って行かれた感が…
こちらは未検証なのでまた後ほどレポートを。

Raphael / gRaphael

gRaphael

gRaphaël—Charting JavaScript Library

Raphaelは、ベクターグラフィックを簡単に扱うためのJavaScriptライブラリ。
gRaphaelはそれをグラフ描画用に拡張する為のプラグインです。
投稿した時はまだドキュメントが不備でしたが…今見に行きましたがまだありませんでした！

IE9.js

IE9.js

ie7-js – Project Hosting on Google Code

プロジェクト名としては「IE7.js」ですが、
その中に含まれるIE8.js、IE9.jsやie7-squish.jsが結構便利。
JavaScriptが動く事が前提になりますが、擬似クラスやHTML5の新要素の対応もしてくれます。

YUI Compressor

YUI Compressor

YUI Compressor

Yahoo!がおくる、JavaScriptやCSSを圧縮するツール。
Webページのパフォーマンス向上を図るのに欠かせません。
ご一緒にYSlow（Firebugプラグイン）も是非。

mustache

mustache

{{ mustache }}

マルチランゲージテンプレートエンジン！（言い切った！）
様々な言語に対応する、シンプルで使いやすいテンプレートエンジンです。

Sammy.js

Sammy.js

Sammy.js

Ajaxコンテンツのセッションを操る為のjQueryプラグイン。
要するに、location.hashによるルーティングをウマイこと処理してくれるスクリプトです。

jQueryMobile

jQueryMobile

jQueryの作者が送る、スマートフォン向けのjQueryUIのようなもの。
ルールに従ったマークアップをするだけで、各要素をそれっぽくレンダリングしてくれます。
1月に正式版がリリースされる予定。

結構色々ありましたね、2010年。
来年もまた素晴らしい技術に出会えますように。

皆様よいお年を！

]]> jQueryはJSONPの理解の妨げになるか？ https://blog.mach3.jp/2010/10/19/jquery-jsonp.html Tue, 19 Oct 2010 02:17:15 +0000 http://blog.mach3.jp/?p=922 コンパクトで汎用的な「JSON」は、今やWebサービスの連携になくてはならない存在ですね。
各種APIもXML以上にJSON対応が必要とされていると思います。
今日はそんなJSON/JSONPと、jQueryが便利すぎて逆に困ってしまう！というお話。

jQueryはJSONPの理解の妨げになるか？

JSON

JSONとは「JavaScript Object Node」の略で、
その名の通りJavaScriptのオブジェクトを表した物。
中身は勿論JavaScriptのオブジェクトリテラルです。

{
    "status" : "success",
    "content" : [ "hoge", "fuga", "foo", "bar" ]
}

昨今はXMLにかわって情報をやり取りする際のフォーマットとして
頻繁に使われるようになりました。

ただ、外部サービスと通信する際に、
AjaxでJSONをやり取りするには「クロスドメイン」という壁があります。
つまり、他ドメインに属するファイルはAjaxでは基本的に取得出来ないのです。

そこでJSONPの出番です。

JSONP

JSONP(JSON with Padding）というのは、
コールバック関数を介してJSONのデータを受け取る手法です。

myfunc({
    "status" : "success",
    "content" : [ "hoge", "fuga", "foo", "bar" ]
});

JSONを出力する側では、こんな感じに関数の引数に渡してやります。

上では関数名が「myfunc」になっていますが、
APIを公開している多くのサービスは、
大抵この関数名をパラメータで指定出来るようになっています。

<script type="text/javascript">
function myfunc(data){
    console.log( data );
}
</script>
<script type="text/javascript" src="http://example.com/hoge.json?callback=myfunc"></script>

コールバック関数を宣言したら、あとはscript要素でAPIにアクセスする。
「myfunc」内でJSONのデータを受け取り、煮たり焼いたりしましょう。
思いのほかシンプル。

そんなJSONPですが、
jQueryを通すとJSONPの仕組みが隠蔽されたような形になります。

jQueryでJSONPを使うと…

jQuery.ajax

$.ajax({
    url:"http://example.com/hoge.json",
    dataType:"jsonp",
    jsonp:"callback",
    success:function(data){
        console.log( data );
    }
});

上の例と同じ処理をしているわけですが、
普通のAjaxとほぼ同じ書式で出来てしまいますね。
違うのは、dataTypeパラメータとjsonpパラメータぐらい。

script要素の追加、コールバック関数の指定等は、
jQueryが勝手に代理で行ってくれます。

<script type="text/javascript" src="http://example.com/hoge.json?calback=jsonp1287411860619"></script>

DOMを見ていると、こんな感じのscript要素が生成されています。
コールバック関数名も動的に生成し、その中身をsuccessで設定した関数にしているわけですね。

まずは生JSで書いてみた方が良いと思う

前半で紹介したとおり、JSONPは全くもってシンプルな手法なのですが、
このようにjQueryを用いることで得体の知れない物になってしまっていませんか？
面倒な処理を代理で行ってくれるのがフレームワークなのですが、
その親切が学習する上での妨げになってしまう事があります。
（JSONPの例に限った話ではなく）

まずは、フレームワークに頼らない生のスクリプトで実験してみる。

そうする事が、その技術に対する理解を深められるだけでなく、
フレームワークをより上手く活用出来るようになる為の近道になるのではないかと
自戒の意も含めてここに記しておきます。

]]> Sammy.jsでAjaxコンテンツのセッションを操る https://blog.mach3.jp/2010/09/22/sammy-js.html Wed, 22 Sep 2010 02:25:21 +0000 http://blog.mach3.jp/?p=735 この記事の情報は古くなっています。
Sammy.js はAPIも一新されてより強力なフレームワークになっています。
公式ドキュメントをご参照ください。

ページを移動させずにサクサクと展開していくのがAjaxコンテンツの魅力ですが、
移動しないが故にURLとしてセッションを保持出来ないという弱点があります。
オーソドックスな解決法は「location.hash」を用いる物ですが、
その処理を簡単にしてくれるのがSammy.jsです。

Sammy.js

おおざっぱな話

Sammy.js

Sammy :: Quirkey.com

Sammy.jsは、location.hashを用いたルーティングを
効率化してくれるjQueryプラグインです。

location.hashとは

通常ページ内リンク等に使用される、
URL末尾の#に続く文字列の事。

http://www.example.com/hoge.html#foobar

簡単な使い方

先ず、$.sammy()を使用してルーティングを定義します。
myRouteにはSammyオブジェクトが渡されます。
※あとで初期化を行う為に格納しておきます

var myRoute = $.sammy(function(){
    this.get("#/home", function(){
        // #/homeにアクセスした時の処理
    });
    this.get("#/profile", function(){
        // #/profileにアクセスした時の処理
    });
    this.get("", function(){
        // location.hashが空だった時の処理
    });
});

定義する為に用意されたgetメソッドには、
第一引数にlocation.hashの値、
第二引数に実行したい処理（function）を渡します。
※get以外にもpost等がありますが、公式に任せて割愛

ルーティングを初期化する為には、runメソッドを呼びます。

$(function(){
    myRoute.run();
});

とても簡単ですね。

正規表現を使って一括管理

getメソッドの第一引数は、文字列の他に正規表現も渡せます。
これを使用して一つのfunctionで一括管理する事も出来ますね。

this.get( /^#\/[a-zA-Z0-9_-]+$/ , function(){
    switch( this.path ){
        case "#/home" :
            // do something
            break;
        case "#/profile" :
            // do something
            break;
        default:
            this.redirect("#/home");
            break;
    }
});

さりげなく使ってる、this.pathとthis.redirect()ですが、
function内のスコープはSammyオブジェクトになっていて、
色々な便利な機能が使えます。

path
location.hashの値が格納されています
redirect()
文字通り、別のlocation.hashにリダイレクトします

他にも色々ありますが、詳しくは公式のドキュメントをご参照ください。
Sammy – Documentation – API :: Quirkey.com

デモページ

デモページは閉鎖しています。

内容はやや複雑化してますが、
基本的にはそれぞれのリンクに相応するファイルをAjaxで読み込んでいるだけです。
ファイルが見つからない場合はconfirmでHomeにリダイレクトするか、
history.back()させるかを選択させています。

まとめ

postメソッド等を利用することでAjaxで展開するカートなんかが作れるようで、
チュートリアルも公式に掲載されていました。
Sammy – Tutorials :: Quirkey.com

似たような働きをするライブラリにFlash向けのswfaddressなんていうのもありましたね。
Sammy.jsはjQueryプラグインということもあって導入しやすく、期待大です。
色々試してみよう…

]]>