« Previous | Next » (Home)     [カテゴリー:Movabletype ]

2005.02.19

Movabletypeの軽量化・・・(Movabletype)

Blogもエントリー数が増えて、かつ個別アーカイブのページなどにもメインページと表示を合わせるためにサイドパネルを付けていると、Rebuild作業が長くなりイライラする。
このためにMTPagenateというツールを使ってアーカイブの分割を行ったり、最近のコメントの内容をphpファイルでモジュール化して外部に追い出すなどの記事がネット上で多く見られる。
私のところも既にphpが動く環境になっていたので、試みたが従来のhtmlファイルへのアクセスをRedirectしてphpファイルにアクセスを行わせるため.htaccessファイルを作ったり、アーカイブファイルの名前を変えたり手間が掛かる。
その割にはドラスティックな効果とは言えないと思われ、正規に行うべきか否か悩んでいたが、fenrirさんがJavaScriptを使ってサイドパネルの内容を共通化するという記事を見つけ、やってみることにした。
最初はfenrirさんの記事のとおりに最近のコメントを追い出したが、 <MTComments lastn=”10″ sort_order=”descend”>
で、lastnの数を増やすとエラーになり、さんざん悩み、ついにfenrirさんに質問までしたが、最後にエントリータイトルに”(ダブルクォート)が含まれているものが見つかり、文字を変更して綺麗に動作するようになった。

方法を記すと、
テンプレートの一覧の表示画面で、「新しいテンプレートを作る」をクリックし、開いた画面で「テンプレートの名前」に「共通サイドバー」といれ出力ファイル名をsidebar.jsとして、下記の内容を入れて保存する。
fenrirさんと違い、使い慣れたオーソドックスとするため以下のようなものとした。

function getRecentComment(){
var html = "<h2>最近のコメント</h2><ul>";
<MTEntries recently_commented_on="100">
html += "<li><a href='<$MTEntryPermalink$>'><$MTEntryTitle$>
</a><br>";
<MTComments lastn="10">
html += "<$MTCommentAuthor$>
[<$MTCommentDate format="%m/%d %X"$>]<br />";
</MTComments>
html += "</li>";
</MTEntries>
html += "</ul>";
return html;
}

そして、保存に続いてこのファイルを再構築すると、sidebar.jsが吐き出される。
その後、各ページ(メインページ、カテゴリー・アーカイブ、個別エントリーアーカイブ、日付アーカイブ)の<head>の直前に以下を挿入する。

<script language="javascript" type="text/javascript"
src="<$MTBlogURL$>sidebar.js"></script>

さらに、最近のコメントを表示する部分を以下で置き換える。

<script language="javascript" type="text/javascript">
<!--
document.write(getRecentComment());
//-->
</script>

そして、サイトの再構築して、最近のコメントが現れるのを確認して完了。
あまりに、うまくいったのでサイドパネルで「外部リンク」を除き全て追い出した。
「外部リンク」だけ残したのは、リンクの付け方を やっと覚えた初心者を混乱させないためである。
私の作った共通サイドバーの右側部分を示すと以下のとおりである。

function getCounter(){
var html = "<div class="counter"><center>";
html += "<img
src="/cgi-bin/Count.cgi?df=tejima.dat&srgb=00ff00&prgb=ceb684">";
html += "</center></div>";
return html;
}
function getCalendar(){
var html = "<div id="calendar">";
html += "<table><caption><$MTDate
format='%B %Y'$></caption>";
html += "<tr>";
html += "<th abbr='日曜日'>日</th>";
html += "<th abbr='月曜日'>月</th>";
html += "<th abbr='火曜日'>火</th>";
html += "<th abbr='水曜日'>水</th>";
html += "<th abbr='木曜日'>木</th>";
html += "<th abbr='金曜日'>金</th>";
html += "<th abbr='土曜日'>土</th>";
html += "</tr><tr>";
<MTCalendar>
<MTCalendarWeekHeader>
html += "<tr>";
</MTCalendarWeekHeader>
html += "<td>";
<MTCalendarIfEntries>
<MTEntries lastn="1">
html += "<a href='<$MTEntryPermalink$>'><$MTCalendarDay$>
</a>";
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
html += "<$MTCalendarDay$>";
</MTCalendarIfNoEntries>
<MTCalendarIfBlank>
html += " ";
</MTCalendarIfBlank>
</MTCalendar>
html += "</td></tr></table></div>";
return html;
}
function getTrackBack(){
var html = "<h2>最近のトラックバック</h2>";
html += "<ul>";
<MTPings lastn="10">
html += "<li><a href='<$MTPingURL$>'><$MTPingTitle$></a>";
html += "<br> from <$MTPingBlogName$></li>";
</MTPings>
html += "</ul>";
return html;
}
function getRecentComment(){
var html = "<h2>最近のコメント</h2><ul>";
<MTEntries recently_commented_on="100">
html += "<li><a href='<$MTEntryPermalink$>'><$MTEntryTitle$>
</a><br>";
<MTComments lastn="10">
html += "<$MTCommentAuthor$>[<$MTCommentDate
format="%m/%d %X"$>]<br />";
</MTComments>
html += "</li>";
</MTEntries>
html += "</ul>";
return html;
}

これで、表示部分は以下のように、すっきりしたものとなる。

<script language="javascript" type="text/javascript">
<!--
document.write(getCounter());
document.write(getCalendar());
document.write(getTrackBack());
document.write(getRecentComment());
//-->
</script>

左側のサイドパネルの要素も追加して、ブログ全体の再構築を行ったら、実行時間が大幅に短縮され、感動的であった。
さいごに、下記に私のところの共通サイドバーの全体を載せておく:Download file

2005.02.15

Text-formatter(その2)・・・(Movabletype)

<pre>と</pre>で囲まれた領域で改行が不要に入るのを防ぐ改造を行ったが、http://・・・・のような部分を自動リンクにして欲しいとの要望があり、Util.pmを再度改造しました。
最初の失敗はhttp://・・・・・pics.jpgのような画像ファイルへのリンクも自動リンクになってしまって、画像が表示されなくなってしまったことでした。
結局jpg, jpeg, JPG, gifを除くようにしました。 これ以外の拡張子を持つ画像ファイルがアップロードされると困るのですが、そのときは除外する拡張子を追加することとします。
さらに、最初失敗したのですが、文中の語句にリンクアイコンを使ってリンクを貼るとそこで生成されたURLに重ねて自動リンクを施そうとして、おかしなことになってしまいます。
これを防ぐため、”href”が現れた場合も既にリンクとなっていると判断して自動リンクから除くようにする必要がありました。
以下の赤字が以前より追加した部分です。

sub html_text_transform {
my $str = shift;
$str ||= '';
my @paras = split /r?nr?n/, $str;
my $preflag = 0;     # add var
for my $p (@paras) {
if($p =~ m@<pre@){   $preflag = 1;  } # add pre check.
if (!$preflag and $p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|table
|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote
|address|div|hr)@) {
if (!$preflag and $p =~ m@http@ and $p !~ m@(href|jpg|JPG|jpeg|gif)@){
$p =~ s!(http:([^x00-x20()<>x7F-xFF])*)!&make_link($1)!gex;
}
$p =~ s!r?n!<br />n!g;
$p = "<p>$p</p>";
}
if($p =~ m@</pre@){  $preflag = 0;  }
}
join "nn", @paras;
}
sub make_link {
$_ = shift;
return qq|<a href="$_">$_</a>|;
}

2005.02.13

Text-formatter・・・(Movabletype)

通常文章を書くときはテキストフォーマットは「改行を変換する」を選ぶ。
もし、「なし」を選ぶと自分で文章中の改行したいところに<br>を挿入しておかなければならないので大変不便である。
ところが、プログラムソースを貼り付けて示したいときは一行毎に<br>が入って間が抜けた表示になり甚だ具合がわるい。
それで、<pre>と</pre>で囲めば改行を入れないようになると思って、<pre>の自動挿入アイコンも設けたが、どうもうまく機能しない。
テキストのフォーマットは/lib/MT下にあるUtil.pmで行っているが、調べたら空白行毎に切って処理しているので空白行があると<pre>と</pre>で囲まれた領域であるのを忘れてしまうようになっている。
ネットを調べると同じ悩みに行き着いた御仁がいらっしゃるようで、ちゃんと解決法が書かれていた。
$prefagという変数を追加して<pre>がでてきたら</pre>が出てくるまで状態を覚えておこうと言うものです。
早速使わせていただいたが、これでも記述部分にhtmlのタグがでて来るとBrowserが反応してしまうので&gt; &lt;(&は便宜上全幅で書いています)を用いてescapeしてやる必要がありますが、快適です。
以下の赤字部分がUtil.pmの修正部分です。

sub html_text_transform {
my $str = shift;
$str ||= '';
my @paras = split /r?nr?n/, $str;
    my $preflag = 0;     # add var
for my $p (@paras) {
       if($p =~ m@<pre@){   $preflag = 1;  } # add pre check.
if (!$preflag and  $p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|table
|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote
|address|div|hr)@) {
$p =~ s!r?n!<br />n!g;
$p = "$preflag<p>$p</p>";
}
if($p =~ m@</pre@){  $preflag = 0;  }
}
join "nn", @paras;
}

2005.02.06

post2blog・・・(Movabletype)

携帯電話を含めてメールからBlogが書き込めるツールとして、post2blogを使わせていただいている。
post2blogの載っているサーバ以外のBlogにも書き込めるという優れものだし、無駄のない素晴らしいコードです。
まず、以下のpackageを入れておく。

(1) packageのdevelからp5-POE-Component-Server-XMLRPC
(2) graphicsからp5-Image-Info

これで、動くが、以下のような2つの改造を加えることとした。順次示す。
なお、最後に私が作った修正版を以下に載せて置くのでご希望の方は自由にご利用ください。
(1) 投稿可能なメールアドレスを規定

オリジナルなpost2blogは受信するためのメールアドレスが漏洩すると誰でも書き込み可能である。
厳密に守る必要も無いとは思うが、受け付けるメールアドレスを規制したいと思い以下を追加した。
まず、最初の部分に@authadresの記入を追加。 ここに許可するメールアドレスを”,”で区切って書いておく。 それとflag用の変数$authを宣言。

my $url = 'http://TARGET/URL/DIRECTRY/MT/mt-xmlrpc.cgi';
# CGIPath + 'mt-xmlrpc.cgi'
my $blog_id = 8;
my $username = 'USERNAME';
my $password = 'PASSWORD';
my $MT_DIR = '/YOUR_DIRECTRY_TO/mt/';
my $parse_path = '/tmp/post2blog';
my @authadrs = ('abcd@xxxx.yyyy.com','aabbcc@yyyy.xxxx.co.jp');
my $auth;

そして、判定文を書く。
Mail Addressの取り出しは簡易な方法であるが、厳密に行いたいなら正規なmail_regexを利用するのが良いが、単純に自分が設定したアドレスだけが取り出せれば良いので、これでも十分だろう。

if($from =~ /([-,0-9,a-z,A-Z,-,_,.]+@[-,0-9,a-z,A-Z,-,.]+)/){
foreach (@authadrs){
if($_ eq $1){$auth = 1;}
}
}
if($auth != 1){print "Not authorized mail address : $fromn";exit;}

(2) サムネイルの作成

post2blogでは画像はサムネイルを作らず、オリジナルの画像を表示の”width”と”height”を指定することで横幅を330pixで表示している。
これでも表示上は問題ないが、Blogのページを表示するのに元の大きな画像ファイルを読み込むことになるので、たくさんの画像を貼り付けたページでは表示速度が遅くなる。
この改良のため、横幅が330pixel以上の画像はサムネイルを作ることとし、さらに横幅が800pixel以上の画像は元の画像も800pixelに縮小した(これは好みの問題でもあろう)。

use Image::Size;
use Image::Magick;
foreach my $fileref (@attachs) {
my ($file, $orgfilename) = @$fileref;
my ($filename, $filepath, $suffix) = fileparse($file,
'.(jpe?g|gif|png)');
##################################
       $mkthumb = 0;
my ($imgx, $imgy) = imgsize($file);
if($imgx > 330){$mkthumb = 1;}
if($mkthumb == 1){
$thumbfile = $filepath . 'tn_' . $filename . $suffix;
my $i =  Image::Magick->new;
$i->Read("$file");
$i = $i->Transform(geometry=>330);
$i->Write("$thumbfile");
undef $i;
my ($imgx, $imgy) = imgsize($file);
if($imgx > 800){
$i =  Image::Magick->new;
$i->Read("$file");
$i = $i->Transform(geometry=>800);
$i->Write("$file");
undef $i;
}
}

画像のサイズ変更はImageMagickのmoduleを使用した。
なお、変数の$mkthumb, $thumbfileなども最初の部分に宣言を入れておく必要がある。
そして、サムネイルを作ったときは、これもBlogに転送する必要があるので以下を追加。

        close(BIN);
my $ret = $rpc->call('metaWeblog.newMediaObject',
$blog_id,
$username,
$password,
{
'bits' => $bindata,
'name' => $filename.$suffix
},
1
);
   if($mkthumb == 1){
($thumbfilename, $filepath, $suffix) = fileparse($thumbfile,
'.(jpe?g|gif|png)');
open(BIN, $thumbfile);
$bindata ="";
while (<BIN>) {
$bindata = $bindata.$_;
}
}
$returl = $ret->result->{url};
        close(BIN);
$ret = $rpc->call('metaWeblog.newMediaObject',
$blog_id,
$username,
$password,
{
'bits' => $bindata,
'name' => $thumbfilename.$suffix
},
1
);
#print Dumper $ret->result;
#print Dumper $ret->fault;
      if($mkthumb == 1){
$tnreturl = $ret->result->{url};
}
      if ($returl =~ /.jpe?g$/i) {
my $info = image_info($file);
if (ref $info) {
my @lats = $info->{GPSLatitude};

そして、最後に画像へのリンク方法を修正する。

        if ($returl =~ /.(jpe?g|gif|png)$/i) {
           if($mkthumb != 1){$tnreturl = $returl;}
$description = "<a href="$returl">
<img src="$tnreturl" alt="$orgfilename" border="0"></a>
<br/>$description";
} else {
$description = "<a href="$returl">$orgfilename</a>
<br />$description";
}
}

最後に私が作った修正版を以下に載せて置く。
Download file

2005.02.03

Movabletype 画像枠線の削除・・・(Movabletype)

1. 画像の枠線の削除

Movable Type 3.122に入れ替えたら、画像の枠線が付いている。
2.66のときはついていなかったので、同じにしたいと思って調べたら、以下のところをを修正すればよい事がわかった。

mtディレクトリー内の/lib/MT/App/CMS.pmを修正

HTML
} elsif ($q->param('include')) {
(my $fname = $url) =~ s!^.*/!!;
if ($thumb) {
return <<HTML;
<a href="$url">
<img alt="$fname" src="$thumb" width="$thumb_width"
height="$thumb_height" border="0"/></a>
HTML
} else {
return <<HTML;
<img alt="$fname" src="$url" width="$width" height="$height"
border="0">

ついでに、最近mail-entry.cgiから乗り換えて使わせてもらっているpost2blogにもborder=”0″を追加しておこう。

$description = "<a href="$returl"><img src="$returl" width=
"$imgx"height="$imgy" alt="$orgfilename" border="0"></a><br/>
$description";

2. 編集ボタンの追加

おー、今度はMozillaでもエントリーBodyの記入枠の上にBold, Italic, Undeline, Link, Blockquoteなどの挿入アイコンが付く。
ファイルのアップロードが新設されたのも便利に使えそうだ。
あとは、Preを付けておくのだが、今回は簡単で・・・mt/tmpl/cms内のedit_entry.tmplをQuote(blockquote)の記述をコピーして追加しQuoteをPreに’blockquote’を’pre’とするだけでよい。
2箇所ある。

        write('<a title="<MT_TRANS phrase="Pre">"
href="#" onclick="return formatStr(document.entry_form.text,
'pre')"><img src="<TMPL_VAR NAME=STATIC_URI>
images/html-pre.gif" alt="<MT_TRANS phrase="Pre">"
width="22" height="16" /></a>');

ついでに赤字を指定する”Red”も付けておこう。
しかし、赤字は閉じるタグは開始タグに”/”をつければ良いとは行かない。
<font color=#ff0000>文が入る< /font>としなければならない。
結局mt.cgiと同じディレクトリにあるmt.jsに以下のようなformatStr2を追加した。

function formatStr2 (e, v) {
if (!canFormat) return;
var str = getSelection(e);
if (!str) return;
setSelection(e, '<' + v + '>' + str + '</font>');
return false;
}

これで準備が整ったのでedit-entry.tmplに以下を追加する。
formatStr2にして、新しくmt.jsに追加したfunctionを呼んでいるのに注意。

write('<a title="<MT_TRANS phrase="Red">" href="#" onclick="return
formatStr2(document.entry_form.text, 'font
color=#ff0000')"><img src="<TMPL_VAR NAM
E=STATIC_URI>images/html-red.gif"
alt="<MT_TRANS phrase="Red">" width="22" heigh
t="16" /></a>');

« Previous | Next »