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 を使うについては以上になります。