Mojolicious::LiteでPJAXしてみた

Mojolicious::Lite

でPJAXしてみた

その前に

Kyoto.pm

設立

おめでとう

ございます!

自己紹介

名前

若林 信敬

Twitter

@nqounet

Facebook

やってます

職業
フリー
エンジニア

IT Office 西宮原

Perlの仕事
ください

今日の発表

の前に

皆さん

use strict;

してますか?

という事で

Perl入学式を
よろしく
お願いします

今日の発表

Mojolicious::Lite

でPJAXしてみた

PJAXとは
何か?

簡単に言うと

AJAXの

問題点を

克服した

次世代型

非同期通信

AJAXの

問題点

その1

ブラウザの

戻るボタンで

戻れない

(字余り)

その2

JavaScript

オフ

orz

AJAXの

「J」は

JavaScriptの

「J」

出来なくても

仕方ない!

(困ります)

大丈夫

ご安心ください

PJAXが

それらの問題点の

すべてを

解決いたします!

PJAX

jQueryの

プラグイン

jquery-pjax

超便利

DEMO

PJAXとは

何か?

pushState
+
AJAX

PJAXの
仕組み

その1

ブラウザの
戻る/進む
が使える

pushState

ブラウザの履歴を

追加できる

history.pushState(data, title [, url])

    

その2

クローラに
やさしい
固定リンク

綺麗なURLで

しかも

JavaScript

オフ

OK

つまり

wget

OK

そして

curl

OK

AJAXの問題点が

全て解決

何度も言いますが

PJAXとは

次世代型

非同期通信

実装

Mojolicious::Lite
&
jquery-pjax

ポイント

jquery-pjaxは

PJAXでの
リクエスト時

HTTPヘッダに

"X-PJAX: true"

送信

Mojolicious::Lite

このヘッダを
読み取って

真の場合は

PJAX用の

layout

偽の場合は

通常の

layout

この分岐を

全てのルート上に

作成

どうするか?

一つの解

under

最初に定義する

root/app.pl

          under sub {
            my $self = shift;
            $self->layout(
              $self->req->headers->header('X-PJAX')
                ? 'pjax' : 'default'
            );
            1;
          };
    

全てのルートが

ここを通る

次にlayoutを作成

root/template/layouts/default.html.ep

          <html>
            <head><title><%= title %></title></head>
            <body>
              <div id="pjaxbody"><%= content %></div>
              <%= javascript '/js/jquery.js' %>
              <%= javascript '/js/app.js' %>
            </body>
          </html>
    

id付のdivで囲む

あとは

jQueryで

root/public/js/app.js

          jQuery( function($) {
            $("a.pjaxlink").pjax('#pjaxbody');
          });
    

PJAXにしたい

リンクに

バインドさせる

この場合は

PJAXにしたいリンクを

class="pjaxlink"

とすれば

OK

Mojolicious::Lite & jquery-pjax

          https://github.com/nqounet/p5-mojo-pjax
    

まとめ

PJAX

次世代型

非同期通信

質問

ご清聴
ありがとう
ございました