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 を書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | # file path: /home/hoge/htdocs/output_jsonp.cgi#!/usr/bin/perluse 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 行目を以下に変更するだけでいけます。
33 34 35 36 | # 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 を取得します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | (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 はこんな感じに。
1 2 3 4 5 | <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 を使うについては以上になります。