ホーム

Movable Type で、カテゴリを列挙して表示したい。

Movable Type で例えばエントリの一番最後 (例は、このエントリの最後の Post あたりをご覧ください) にそのエントリのカテゴリを列挙するには、以下のコードをテンプレートに埋め込むとよい。「glue=" | "」で指定している記号が、区切り記号となる。
<MTEntryCategories glue=" | ">
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
</MTEntryCategories>
Movable Type で例えばエントリの一番最後 (例は、このエントリの最後の Post あたりをご覧ください) にそのエントリのカテゴリを列挙するには、以下のコードをテンプレートに埋め込むとよい。「glue=" | "」で指定している記号が、区切り記号となる。
<MTEntryCategories glue=" | ">
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
</MTEntryCategories>
Posted on 2006-01-13 by yas |

Perl で、Google の PageRank を表示する方法

Perl で、Google の PageRank を表示するには以下のモジュールを使う。
ここではクライアント／サーバ間の通信、画面表示に AJAX を使っている。

  1. ブラウザに URL を入力し、「チェック」ボタンを押す。
  2. ブラウザからサーバに URL が送られる。
  3. サーバ側で PageRank を計算し、ブラウザに XML として返す
  4. ブラウザで XML を受け取り、表示

ここで、ブラウザ側 (JavaScript) で XML を受け取るには、以下の部分が重要である。

var xml = xmlHttp.responseXML;
var pagerank = xml.documentElement
                  .getElementsByTagName('PageRank')[0]
                  .childNodes[0]
                  .nodeValue;

以下はサーバ側コード、XML のフォーマット、クライアント側 JavaScript である。

使用するモジュール

use WWW::Google::PageRank;

サーバ側の CGI (Perl) コード

#!/usr/bin/perl

# created by yas 2006/01/08

use lib 'WWW::Google::PageRank モジュールまでのパス: …/lib/perl5/site_perl';

use strict;
use utf8;
use WWW::Google::PageRank;
use CGI;

our $XML_HEADER = "Content-type: text/xml\n\n"   # XML を送るときは絶対にこれが必要!!! MUST!!!
                . "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; #  XML Header

my $CGI   = new CGI;
my $proxy = new WWW::Google::PageRank;

my $pagerank = $proxy->get($CGI->param('url'));

my $xml = "$XML_HEADER"
        . qq|<xml><PageRank>$pagerank</PageRank></xml>\n|;
print $xml;

1;

サーバがクライアントに送る XML の例 (～で囲まれた「1」の部分が PageRank であるのでサーバがブラウザから受け取った URL によって毎回変わる)

Content-type: text/xml

<?xml version="1.0" encoding="UTF-8"?>
<xml><PageRank>1</PageRank></xml>

クライアント (ブラウザ) 側のコード

//<![CDATA[

var BASE_URL = '/perltips';
var CGI_FILE = '/pagerank.cgi';

// 特に IE に対応するために、XMLHttpRequest オブジェクトをブラウザによって作成
function createXmlHttp() {

    try {
        return new ActiveXObject ('Msxml2.XMLHTTP');
    } catch(e) {
        try {
            return new ActiveXObject ('Microsoft.XMLHTTP');
        } catch(e1) {
            try {
                return new XMLHttpRequest();
            } catch(e2) {
                return null;
            }
        }
    }
}

// メイン部分。HTML <input type="button" onClick="getPageRank"> タグの
// onClick で関連付けられている。ボタンが押されると呼び出される。
function getPageRank() {

    if ((xmlhttp = createXmlHttp()) == null) {
        window.alert('XMLHTTP Initialization Failed.');
    } else {
        xmlhttp.abort();    // 連続して HTTP 通信する場合は必ず呼び出す。
    }

    post('url=' + document.getElementById('url').value);  // submit から url を取得
}

function repaint(xml) {

   var pagerank = '';

    if(xml) {

        // IE の場合はより厳密にチェックが必要、Firefox は xml だけでよい
        if(xml.documentElement) {
            pagerank = xml.documentElement
                          .getElementsByTagName('PageRank')[0]
                          .childNodes[0]
                          .nodeValue;
        }
    }

    // このスクリプトが呼ばれる HTML には、<div id="PageRank"></div> があるとする。
    document.getElementById('PageRank').innerHTML = 'PageRank: ' + pagerank;
}

// post メソッドは、例えば getPath メソッドから呼ばれる
function post(data) {

    var xmlHttp = createXmlHttp();

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4) {
            var xml = xmlHttp.responseXML;
            repaint(xml);
        }
    }

    xmlHttp.open('POST', BASE_URL + CGI_FILE, true);
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttp.send(data);
}

//]]>

Perl で、Google の PageRank を表示するには以下のモジュールを使う。
ここではクライアント／サーバ間の通信、画面表示に AJAX を使っている。

  1. ブラウザに URL を入力し、「チェック」ボタンを押す。
  2. ブラウザからサーバに URL が送られる。
  3. サーバ側で PageRank を計算し、ブラウザに XML として返す
  4. ブラウザで XML を受け取り、表示

ここで、ブラウザ側 (JavaScript) で XML を受け取るには、以下の部分が重要である。

var xml = xmlHttp.responseXML;
var pagerank = xml.documentElement
                  .getElementsByTagName('PageRank')[0]
                  .childNodes[0]
                  .nodeValue;

以下はサーバ側コード、XML のフォーマット、クライアント側 JavaScript である。

使用するモジュール

use WWW::Google::PageRank;

サーバ側の CGI (Perl) コード

#!/usr/bin/perl

# created by yas 2006/01/08

use lib 'WWW::Google::PageRank モジュールまでのパス: …/lib/perl5/site_perl';

use strict;
use utf8;
use WWW::Google::PageRank;
use CGI;

our $XML_HEADER = "Content-type: text/xml\n\n"   # XML を送るときは絶対にこれが必要!!! MUST!!!
                . "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; #  XML Header

my $CGI   = new CGI;
my $proxy = new WWW::Google::PageRank;

my $pagerank = $proxy->get($CGI->param('url'));

my $xml = "$XML_HEADER"
        . qq|<xml><PageRank>$pagerank</PageRank></xml>\n|;
print $xml;

1;

サーバがクライアントに送る XML の例 (～で囲まれた「1」の部分が PageRank であるのでサーバがブラウザから受け取った URL によって毎回変わる)

Content-type: text/xml

<?xml version="1.0" encoding="UTF-8"?>
<xml><PageRank>1</PageRank></xml>

クライアント (ブラウザ) 側のコード

//<![CDATA[

var BASE_URL = '/perltips';
var CGI_FILE = '/pagerank.cgi';

// 特に IE に対応するために、XMLHttpRequest オブジェクトをブラウザによって作成
function createXmlHttp() {

    try {
        return new ActiveXObject ('Msxml2.XMLHTTP');
    } catch(e) {
        try {
            return new ActiveXObject ('Microsoft.XMLHTTP');
        } catch(e1) {
            try {
                return new XMLHttpRequest();
            } catch(e2) {
                return null;
            }
        }
    }
}

// メイン部分。HTML <input type="button" onClick="getPageRank"> タグの
// onClick で関連付けられている。ボタンが押されると呼び出される。
function getPageRank() {

    if ((xmlhttp = createXmlHttp()) == null) {
        window.alert('XMLHTTP Initialization Failed.');
    } else {
        xmlhttp.abort();    // 連続して HTTP 通信する場合は必ず呼び出す。
    }

    post('url=' + document.getElementById('url').value);  // submit から url を取得
}

function repaint(xml) {

   var pagerank = '';

    if(xml) {

        // IE の場合はより厳密にチェックが必要、Firefox は xml だけでよい
        if(xml.documentElement) {
            pagerank = xml.documentElement
                          .getElementsByTagName('PageRank')[0]
                          .childNodes[0]
                          .nodeValue;
        }
    }

    // このスクリプトが呼ばれる HTML には、<div id="PageRank"></div> があるとする。
    document.getElementById('PageRank').innerHTML = 'PageRank: ' + pagerank;
}

// post メソッドは、例えば getPath メソッドから呼ばれる
function post(data) {

    var xmlHttp = createXmlHttp();

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4) {
            var xml = xmlHttp.responseXML;
            repaint(xml);
        }
    }

    xmlHttp.open('POST', BASE_URL + CGI_FILE, true);
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttp.send(data);
}

//]]>

Posted on 2006-01-10 by yas |

Perl での、文字列の扱い:<br />シングルクォートとダブルクォーテーションの違い

まずはこのエントリのタイトルにある「シングルクォート ('…') とダブルクォーテーション ("…")」、なぜ 「クォート」 と 「クォーテーション」 なのか? という細かい＾＾；質問は置いておいて、Perl で文字列を表現する方法は実はいくつかあるのだということに注意したい。基本的にはシングルクォートとダブルクォーテーションの違いがある。シングルクォートの場合は、その中に書いた文字列はそのまま文字列として Perl に解釈される。特にダブルクォーテーションの場合は、文字列の中に変数を埋め込める。これは便利な反面、やっかいなことになることがある。例えばメールアドレスをダブルクォーテーションで囲んだ場合には、メールアドレスには必ずアットマーク 「@」 があり、この文字に Perl が出くわしたときに 「配列 」と解釈してしまうため、多くの場合は自分の予期しない結果か、エラーとなる。
my $str = 'Perl では';
print $str . '文字列をシングルクォートで囲むのが基本';
print "$str このように、ダブルクォーテーションで囲むことができる";
なお、文字列の連結にはピリオド「.」を使う。
print '文字列を' . '連結する';
また、'…' と "…" はそれぞれ以下のように書くことができる。
print q|これはシングルクォートで囲ったのと同じ意味|;
print qq|これはダブルクォーテーションで囲ったのと同じ意味|;

print q/…qの後にくる記号はスラッシュとかも使える/;
print qq/…同じく qqの後にくる記号はスラッシュとかも使える/;
my $mail = 'support@twinkle.cc';
print $mail;
→これはきちんと support@twinkle.cc と表示される。

$mail = "support@twinkle.cc";
print $mail;
→ こちらは support.cc と表示される。なぜなら、@twinkle が変数とみなされるからである。
→ use strict を使ったらエラーとなる。
まずはこのエントリのタイトルにある「シングルクォート ('…') とダブルクォーテーション ("…")」、なぜ 「クォート」 と 「クォーテーション」 なのか? という細かい＾＾；質問は置いておいて、Perl で文字列を表現する方法は実はいくつかあるのだということに注意したい。基本的にはシングルクォートとダブルクォーテーションの違いがある。シングルクォートの場合は、その中に書いた文字列はそのまま文字列として Perl に解釈される。特にダブルクォーテーションの場合は、文字列の中に変数を埋め込める。これは便利な反面、やっかいなことになることがある。例えばメールアドレスをダブルクォーテーションで囲んだ場合には、メールアドレスには必ずアットマーク 「@」 があり、この文字に Perl が出くわしたときに 「配列 」と解釈してしまうため、多くの場合は自分の予期しない結果か、エラーとなる。
my $str = 'Perl では';
print $str . '文字列をシングルクォートで囲むのが基本';
print "$str このように、ダブルクォーテーションで囲むことができる";
なお、文字列の連結にはピリオド「.」を使う。
print '文字列を' . '連結する';
また、'…' と "…" はそれぞれ以下のように書くことができる。
print q|これはシングルクォートで囲ったのと同じ意味|;
print qq|これはダブルクォーテーションで囲ったのと同じ意味|;

print q/…qの後にくる記号はスラッシュとかも使える/;
print qq/…同じく qqの後にくる記号はスラッシュとかも使える/;
my $mail = 'support@twinkle.cc';
print $mail;
→これはきちんと support@twinkle.cc と表示される。

$mail = "support@twinkle.cc";
print $mail;
→ こちらは support.cc と表示される。なぜなら、@twinkle が変数とみなされるからである。
→ use strict を使ったらエラーとなる。
Posted on 2006-01-07 by yas |

Google Maps API で、地図上に経路 / ルート (パス) を表示する

これは、Perl で、Goolge Maps からルートを検索する方法 に対するブラウザ側の処理の例である。以下のコードを参考にして欲しい。repaint メソッドの中でパスを描画している。前提としては以下の通り。
  1. このスクリプトは呼び出し元の HTML から your_ajax_script.js としてリンクされている。
  2. このスクリプトが呼ばれる HTML には、
    があるとする。
  3. init メソッドは、HTML の onLoad から呼ばれるものとする。
your_ajax_script.js の例
//<![CDATA[

var BASE_URL = 'https://yourdomain.com';
var CGI_FILE = '/path_to_cgi_dir/your.cgi';
var DEFAULT_ZOOM = 5;

var map;
var currentPoint;

// init は、HTML の onLoad から呼ばれるものとする。
function init() {

    currentPoint = new GPoint(-122.13930130004883, 37.40248284497232);
    map = new GMap(document.getElementById('map'));

    GEvent.addListener(map, 'moveend', function() {
        // add your code here
    });

    GEvent.addListener(map, 'click', function(o, p) {
        // add your code here
    });

    GEvent.addListener(map, 'infowindowopen', function() {
        // add your code here
    });

    GEvent.addListener(map, 'infowindowclose', function() {
        // add your code here
    });

    map.setMapType(G_MAP_TYPE);
    map.centerAndZoom(currentPoint, DEFAULT_ZOOM);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl());
}

function repaint(xml) {

    var list_html = '';

    if(xml) {

        // IE の場合はより厳密にチェックが必要、Firefox は xml だけでよい
        if(xml.documentElement) {

            var path = xml.documentElement.getElementsByTagName('path');

            var points = [];
            for (var i = 0; i < path.length; i++) {
                points.push(new GPoint( path[i].getAttribute('lng'),
                                        path[i].getAttribute('lat')));
            } // End of for

            var route = xml.documentElement.getElementsByTagName('route');
            list_html += route.length > 0 ? '<ol>' : '';
            for (var i = 0; i < route.length; i++) {
                list_html += '<li>' + route[i].getAttribute('description') + '</li>';
            } // End of for
            list_html += route.length > 0 ? '</ol>' : '';
        }
    }

    // このスクリプトが呼ばれる HTML には、<div id="list"></div> があるとする。
    document.getElementById('list').innerHTML =  list_html;
    map.addOverlay(new GPolyline(points));
}

// getPath メソッドは、マウスでボタンが押された、などのイベントに反応する
function getPath(lng, lat) {

    currentPoint = new GPoint(lng, lat);

    post(    'do=path'
        +    '&toX=' + lng
        +    '&toY=' + lat);
}

// post メソッドは、例えば getPath メソッドから呼ばれる
function post(data) {

    var xmlHttp = GXmlHttp.create();

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4) {
            var xml = xmlHttp.responseXML;
            repaint(xml);
        }
    }

    xmlHttp.open('POST', BASE_URL + CGI_FILE, true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.send(data);
}

//]]>
これは、Perl で、Goolge Maps からルートを検索する方法 に対するブラウザ側の処理の例である。以下のコードを参考にして欲しい。repaint メソッドの中でパスを描画している。前提としては以下の通り。
  1. このスクリプトは呼び出し元の HTML から your_ajax_script.js としてリンクされている。
  2. このスクリプトが呼ばれる HTML には、
    があるとする。
  3. init メソッドは、HTML の onLoad から呼ばれるものとする。
your_ajax_script.js の例
//<![CDATA[

var BASE_URL = 'https://yourdomain.com';
var CGI_FILE = '/path_to_cgi_dir/your.cgi';
var DEFAULT_ZOOM = 5;

var map;
var currentPoint;

// init は、HTML の onLoad から呼ばれるものとする。
function init() {

    currentPoint = new GPoint(-122.13930130004883, 37.40248284497232);
    map = new GMap(document.getElementById('map'));

    GEvent.addListener(map, 'moveend', function() {
        // add your code here
    });

    GEvent.addListener(map, 'click', function(o, p) {
        // add your code here
    });

    GEvent.addListener(map, 'infowindowopen', function() {
        // add your code here
    });

    GEvent.addListener(map, 'infowindowclose', function() {
        // add your code here
    });

    map.setMapType(G_MAP_TYPE);
    map.centerAndZoom(currentPoint, DEFAULT_ZOOM);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl());
}

function repaint(xml) {

    var list_html = '';

    if(xml) {

        // IE の場合はより厳密にチェックが必要、Firefox は xml だけでよい
        if(xml.documentElement) {

            var path = xml.documentElement.getElementsByTagName('path');

            var points = [];
            for (var i = 0; i < path.length; i++) {
                points.push(new GPoint( path[i].getAttribute('lng'),
                                        path[i].getAttribute('lat')));
            } // End of for

            var route = xml.documentElement.getElementsByTagName('route');
            list_html += route.length > 0 ? '<ol>' : '';
            for (var i = 0; i < route.length; i++) {
                list_html += '<li>' + route[i].getAttribute('description') + '</li>';
            } // End of for
            list_html += route.length > 0 ? '</ol>' : '';
        }
    }

    // このスクリプトが呼ばれる HTML には、<div id="list"></div> があるとする。
    document.getElementById('list').innerHTML =  list_html;
    map.addOverlay(new GPolyline(points));
}

// getPath メソッドは、マウスでボタンが押された、などのイベントに反応する
function getPath(lng, lat) {

    currentPoint = new GPoint(lng, lat);

    post(    'do=path'
        +    '&toX=' + lng
        +    '&toY=' + lat);
}

// post メソッドは、例えば getPath メソッドから呼ばれる
function post(data) {

    var xmlHttp = GXmlHttp.create();

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4) {
            var xml = xmlHttp.responseXML;
            repaint(xml);
        }
    }

    xmlHttp.open('POST', BASE_URL + CGI_FILE, true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.send(data);
}

//]]>
Posted on 2006-01-04 by yas |
« 先頭‹ 前…686970717273747576…次 ›最終 »