Perl と jQuery で JSONP を使うメモです。
今回、別サーバ上にあるデータを WordPress に表示させたいと思い JSONP を簡単に試してみました。
今回試した内容は以下の順で説明していきたいと思います。
- Perl + jQuery + JSONP を使ったデモ
- Perl モジュールのインストールと CGI のサンプルコード
- jQuery のサンプルコード
スポンサーリンク
Perl + jQuery + JSONP を使ったデモ
今回は JSONP を利用して以下のようなデモを作ってみました。
“GET” ボタンを押すと別サーバ上の “現在の時間” を取得して “yyyy/mm/dd h:m:s” 形式と “unix time” 形式で表示するという内容です。
ボタンを押す度に更新しますが若干ラグがあるかもです。
PerlモジュールのインストールとCGIのサンプルコード
Perl で JSON を使うには Perl モジュールの “JSON” を使うのが簡単です。
今回はインストール権限のないユーザーだったので、以下のような感じにユーザーディレクトリ内にモジュールをインストールしています。
// モジュールインストール用のディレクトリを作成 # mkdir -p /home/hoge/work/perl/src # cd /home/hoge/work/perl/src // ソースコードを CPAN から取ってくる # wget http://search.cpan.org/CPAN/authors/id/M/MA/MAKAMAKA/JSON-2.59.tar.gz # tar xfz JSON-2.59.tar.gz # cd JSON-2.59/ // prefix の指定 # perl Makefile.PL PREFIX=/home/hoge/work/perl # make # make test # make install
モジュールをインストール後、以下のような CGI を書きます。
# file path: /home/hoge/htdocs/output_jsonp.cgi #!/usr/bin/perl use strict; use warnings; use CGI; use Encode; use Time::Local; # インストールしたパスを設定 use lib qw( /home/hoge/work/perl/lib/perl5/site_perl ); use JSON; my $q = CGI->new; my $callback = $q->param('callback') || exit; # 日付データの変換処理 my ( $sec, $min, $hour, $mday, $mon, $year ) = localtime( time ); $year = $year + 1900; $mon++; my $date = sprintf("%04d/%02d/%02d %02d:%02d:%02d", $year, $mon, $mday, $hour, $min, $sec ); # それぞれのデータを hash に格納 my $hash = { 'unixtime' => time(), 'date' => $date, }; # JSON データの作成 my $json = to_json( $hash, {utf8 => 1} ); # JSONP データの出力 print $q->header(-type => 'text/x-json', -charset=>'utf-8'),"$callback($json)"; exit;
こんな感じでシンプルに書けます。
jQuery から POST される callback 変数に JSON データを入れて返すって感じですかね。
firebug で確認すると JSONP は以下の様なフォーマットになってます。
jQuery2000684208045184267_1372416576685({"date":"2013/06/28 19:27:38","unixtime":1372415258})
別に JSONP は必要なく、普通の JSON データを出力したいという場合は、 16 行目を削除し 34 行目を以下に変更するだけでいけます。
# JSONP データの出力 print $q->header(-type => 'text/x-json', -charset=>'utf-8'),$json; #~~~~~~~ exit;
この場合はこんな JSON を出力します。
{"date":"2013/06/28 19:27:38","unixtime":1372415258}
jQuery のサンプルコード
次は jQuery のサンプルコードです。jQuery の ajax を使って JSONP を取得します。
(function ($) { $("#jsonp [type=text]").val(''); $("#jsonp [type=button]").click(function(){ $.ajax({ url: "https://example.worklog.be/output_jsonp.cgi", dataType: "jsonp", async: "ture" }).done(function(callback){ // JSONP 取得成功時の処理内容 $("#jsonp [name=date]").val(callback.date); $("#jsonp [name=unix]").val(callback.unixtime); }).fail(function(){ // JSONP 取得失敗時の処理内容 var err = "jsonp get error"; $("#jsonp [type=text]").val(err); }); }); })(jQuery);
html はこんな感じに。
<div id="jsonp"> <p><input type="text" name="date" readonly="readonly" /></p> <p><input type="text" name="unix" readonly="readonly" /></p> <input type="button" value="GET"/> </div>
後は動作確認をしてデモのように動けばとりあえず OK です。
簡単ですが、Perl で JSONP を使うについては以上になります。