Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

サブドメイン環境で Ajax やってみる

Jun012008
Vote:
http://bizcaz.com/archives/2008/06/01-030409.php
Categories: Customize, Template
Tags: Ajax, Cross Domain
Social Bookmark

Prev Page: RegexReplace プラグイン
Next Page: MTIfFileExist プラグイン for MT4.x

こんばんわ^^

一昨日、サブドメイン環境を作って Ajax のテストしてみました。
とりあえず、問題なく通信ができたようなのでご紹介します。

そもそも Ajax はドメインを跨った（クロスドメイン）通信ができません。
セキュリティ上の問題で http://AAA.bizcaz.com/ から http://bizcaz.com/ にあるファイルにアクセスすることができないんです。要するに同一ドメイン内での通信のみ可能ということになります。

で、わたしのサイトで配布してるテンプレートではブログ検索、コメント投稿など随所で Ajax を使用してます。
要するに以下のような環境の場合にはテンプレートは設置できても Ajax が使用できないため、コメント投稿などが機能しなくなってしまいます。

　http://bizcaz.com/
　 |
　 +-- mt/
　http://blog.bizcaz.com/
　 |
　 +-- index.php
　 |
　 +-- archives/
　 | +-- index.php
　 |
　 | +-- category/

http://bizcaz.com/（メイン）側に Movable Type をインストールして、http://blog.bizcaz.com/（サブドメイン）側にブログを設置するようなケースでは通常では Ajax は使用できないことになります。

以前からご連絡は頂いていたのですが、最近になってようやくクロスドメインの方法を教わって実際に試したところうまくいったので参考にしてください。

クロスドメインで Ajax を利用する方法

クロスドメインで Ajax を利用するには主に 2 つの方法があるようです。

中継プログラムを介して目的のファイルにアクセスする
わたしはこの方法を教わって、中継プログラムを作って確認しました。
中継プログラムとは、サブドメイン側のフォルダ内に CGI を置いて、JavaScript からその CGI を介して目的のファイルを読み出したり、実行したりします。
その結果を受け取った中継プログラムが折り返し、JavaScript に返します。
JSONP を使用する
以前、占いランキングや天気予報表示の方法をご紹介したことがありました。
- MovableType用占いランキングを表示してみる
- MovableTypeで天気予報を表示してみる
drk7.jp さんとこで公開されてる XML を出力する URL にアクセスしてその結果を JOSON に変換するサービスを利用した JavaScript になります。
- XML を JSON に変換するサービス - ベータ版を公開

他に AJAX Cross Domain - ACD というサービスもあります。

主なやり方は上記 2 通りのようです。
今回わたしが実装したのは、1. の中継プログラムによる Ajax です。

中継プログラムについて

中継プログラムのコードを以下に記します。

　#!/usr/bin/perl
　use LWP::UserAgent;
　my $mturl = 'http://●●●/mt/';
　my $ua = LWP::UserAgent->new;
　my $method = $ENV{'REQUEST_METHOD'};
　my $url;
　my $query;
　if ($method eq "POST") {
　 read(STDIN, $query, $ENV{'CONTENT_LENGTH'});
　 if ($query =~ m/switch=comment/) {
　 $url = $mturl . 'mt-comments.cgi';
　 }
　 else {
　 exit;# parameter error
　 }
　 our $req = HTTP::Request->new(POST => $url);
　 $req->content_type('application/x-www-form-urlencoded');
　 $req->content($query);
　}
　else {
　 $query = $ENV{'QUERY_STRING'};
　 if ($query =~ m/switch=search/) {
　 $url = $mturl . 'mt-search.cgi?' . $query;
　 }
　 else {
　 $query =~ s/\&/\?/;
　 $url = $query;
　 $url =~ tr/+/ /;
　 $url =~ s/%([0-9A-Fa-f][0-9A-Fa-f])/pack('H2', $1)/eg;
　 }
　 our $req = HTTP::Request->new(GET => $url);
　}
　my $res = $ua->request($req);
　print "Content-type: text/html charset=utf-8";
　if ($res->is_success) {
　 print $res->as_string;
　}
　else {
　 print 'Request Error!!';
　}
　1;

上記コードは、Movable Type MEMO で配布するテンプレート専用の中継プログラムです。汎用的には作ってません。

上記中継プログラムを適当なファイル名（たとえば、handling.cgi）で保存して、サブドメイン側にアップロードすれば利用可能になります。
JavaScript はこの中継プログラムに対してリクエストすることになります。

クロスドメインで Movable Type MEMO を利用する場合

サブドメイン対応したテンプレートセットはアップロード済みです。
以下の手順で各自の環境に合わせることでクロスドメインによる Ajax が利用できます。
※テンプレートセットがインストール済みで、テンプレートの適用を行っていることを前提として説明します。

中継プログラムを各自の環境に合わせます。
圧縮ファイル中の mt_memo/js/prototype/handling.cgi をテキストエディタで開きます。そして、以下の行を各自の環境に合わせて変更してください。
- 5 行目
  各自の Movable Type のインストール先 URL に変更します。
- 44 行目
  文字コードに UTF-8 以外を使用される場合には、Content-type の charset に Shift_JIS、または EUC-JP に変更します。
保存してサーバにアップロードします。
保存する際、文字コードに注意してください。デフォルトでは UTF-8 で保存してます。それ以外の文字コードを使用されてる場合には、各自の環境に合わせて保存してください。
また、アップロード先は mt_memo/js/prototype/ フォルダの中にアップロードします。