あと味

たくさん情報を食べて、たくさん発信すると、あとになって味わい深い。

流行りっぽいツールを組み合わせたミニマルpjaxサンプル書いた

CSS Perl JavaScript

先日、Meteorっていうツールが話題になっていて、いろいろ見てみたんですけど、pjaxいいなぁと思って、今まで実装したことなかったので、Mojolicious::Liteで実装してみました。

ついでに流行りっぽいツールを組み合わせてみました。

利用したツール

  • Mojolicious::Lite
  • Backbone.js
  • jQuery
  • CoffeeScript
  • LESS

実装するにあたり、以下の記事を参考にしました。

サンプル

1ファイルなので、ミニマルですってことです。コードもなるべく短くなるようにしました。

ここで使ってるツールは流行ってるし、オシャレですね。

どうもMojolicious::Liteが一番流行ってなさそうですね。流行らせたいですね。

公式サイトのオシャレさはピカイチなんですけどね。

もとい、自分の周りからでもPerl流行らせたいですね。

実行した時の画面

f:id:jdg:20120414164302p:image

ナビをクリックすると、fadeInとともにオシャレにあいさつ文が変わるだけのサンプルです。

試す方法

Perl5.10.1以上が入ってる環境で、以下の手順でミニマルpjaxサンプルを試せます。

  1. http://mojolicio.us/のトップページからtar.gzで圧縮されたMojoliciousをダウンロード（インストールしてもよいです）
  2. ダウンロードしたMojoliciousの最終バージョンを解凍し、mojoとでも付けておく
  3. 上記のgistのファイルをmojoディレクトリに設置する
  4. 設置したapp.plの2行目に、use lib "lib";を追加する
  5. ターミナルでmojoディレクトリに移動する
  6. そのディレクトリ内で以下のコマンドを叩く
$ ./script/morbo app.pl

最後にlocalhost:3000にアクセスすれば試せます。

まとめ

流行ってる感じでオシャレ。

まじめなまとめ

pjax、初めて試しましたが、とても良いですね。特にユーザー側に不便をかけるわけでもなく、反応速度が上がるってのが良い。

しかも、後からpjaxに対応しても、そんなに手間じゃないのがいいですね。

ただ、pushStateに対応していないブラウザは、Backbone.jsのRouterがハッシュのついたURLに変更してしまうので、その辺りが採用できるかできないかの基準になるかなと思います。

Mojoliciousのせいなのかわかりませんが、IEでどうしても$c->req->headers->is_xhrが取れなかったので、jquery-pjaxと同じように、リクエスト時のパラメータに_pjax=trueを付けるという対応にしました。

LESSとCoffeeScriptのファイルを読み込む時は、これらのリクエストがis_xhrではないので、レイアウトを読み込んでしまうのを避けるために、_pjaxを指定しています。

今回のサンプルはCoffeeScriptとかLESSを直接パースするようにしていますし、CDNからファイルを持ってきているので、実運用では、コンパイルするものはコンパイルして、サーバーに置くものはダウンロードして、publicディレクトリに入れておくべきだと思います。

以上、まじめなまとめでした。