2005.02.22
text-formatterのpreの処理のまずさを修正し、ｈttp:で始まるURLはオートリンクの処置をほどこしたが、preの中味の”<“や”>”を＆ｌｔ；や＆gt:（便宜上”&”は全幅の文字で書いている)にエディター等を使って置換しなければならず、やっかいである。
そこで、性懲りもなく３たびUtil.pmを修正してエスケープ処理を自動で行わせるようにした。
しかし、Movabletypeのtext-formatter部は空行で分けたパラグラフ単位で処理しているので、１行づつの処理のように細かいことはできない。
結局、preの領域内で単純に< → ＆gt: < → ＆lt:の処理を行ったが、これではpreの先頭指定の<pre> や終端の</pre>もエスケープ処理されてしまう。
また、赤字指定の＆lt;font color=#ff0000＆gt;と＆lt;/font＆gt;も変換され赤字指定が無効になる。
これらは、置き換え処理の最後に再度元に戻すという強引な方法で対処した。
だんだん、汚くなってきた。 いつか、行単位の処理で細かな処理を行うよう、全面的に書き換えた方が良いかも知れない。
しかし、細かい処理を重ねると、実行速度が低下する副作用も気になる。
ともかく、下記に追加個所を赤字にしてtext-formatter部分を修正したものを示す。
&、<ならびに>は便宜上全幅の文字で示している部分があるので要注意。
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($preflag){
$_ = $p; s!<!＆lt;!g; s!>!＆gt;!g;
s!＆lt;pre＆gt;!＜pre＞!g; s!＆lt;/pre＆gt;!＜/pre＞!g;
s!＆lt;font color=#ff0000＆gt;!＜font color =#ff0000＞!g;
s!＆lt;/font＆gt;!＜/font＞!g; $p = $_;
}
if($p =~ m@</pre@){ $preflag = 0; }
}
join "nn", @paras;
}
2005.02.20
Movabletypeで知り合いなどのリンクをサイドパネルに入れるのには通常メインインデックスに直接書き込むが、大したことは無いと言いながらネットに不慣れな人はhtmlの知識も十分でないから抵抗があると思う。
そこで、mtperlscriptというテンプレート内にperlで記述できるpluginが見つかったので、これを用いて簡単にリンクを付けられるようにした。
mtperlscritの圧縮ファイルを解凍して説明にしたがって、mt.cgiのあるディレクトリー内のextlibに移ってbradchoateというディレクトリーを作り、ここにperlscript.pmを入れる。
#mkdir bradchoate
#cd bradchoate
# cp (perlscript.pmのあるディレクトリー)/perlscript.pm .
次にperlscript.plをmt.cgiのディレクトリー内のpliginsにコピーする。
さて、リンクの記述だが、テンプレートの一覧のページで「新しいインデックス・テンプレートを作る」をクリックして「テンプレートの名前」にリンクリストとでも入れ、「出力ファイル名」をlink.txtと入れる。
そして、リンクしたい人の名前とリンク先URLを1つ以上のスペース(全角はダメ)を入れて下記のように記入する。
○○○さんへのリンク http://www.abc.com/tarou/
△△△さんへのリンク http://www.xyz.co.jp/
・
・
記入したら保存し再構築する。 これでlink.txtが出来上がる。
次にメインインデックスを開いて、リンクを表示したい場所に次のperl実行文を入れる。
<MTPerlScript>
print "<h2>リンク</h2>n";
print "<div class="sidebar">n";
print "<ul>n";
open(IN , "<$MTBlogSitePath$>link.txt");
@buff = <IN>;
close(IN);
foreach(@buff){
chomp;
if (/(http:([^x00-x20()<>x7F-xFF])*)/){
$link = $1;
s/$link//;s/ //g;
$data = $_;
$link = "'$link'";
}
if($data){
print "<li><a href=$link>$data</a></li>n";
}
}
print "</ul></div>n";
</MTPerlScript>
これで、保存して再構築すれば、リンクが貼られる。
以降はlink.txtに追加していけば良い。らくチンでしょう！！
2005.02.19
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
<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
通常文章を書くときはテキストフォーマットは「改行を変換する」を選ぶ。
もし、「なし」を選ぶと自分で文章中の改行したいところに<br>を挿入しておかなければならないので大変不便である。
ところが、プログラムソースを貼り付けて示したいときは一行毎に<br>が入って間が抜けた表示になり甚だ具合がわるい。
それで、<pre>と</pre>で囲めば改行を入れないようになると思って、<pre>の自動挿入アイコンも設けたが、どうもうまく機能しない。
テキストのフォーマットは/lib/MT下にあるUtil.pmで行っているが、調べたら空白行毎に切って処理しているので空白行があると<pre>と</pre>で囲まれた領域であるのを忘れてしまうようになっている。
ネットを調べると同じ悩みに行き着いた御仁がいらっしゃるようで、ちゃんと解決法が書かれていた。
$prefagという変数を追加して<pre>がでてきたら</pre>が出てくるまで状態を覚えておこうと言うものです。
早速使わせていただいたが、これでも記述部分にhtmlのタグがでて来るとBrowserが反応してしまうので＆gt; ＆ｌｔ；(＆は便宜上全幅で書いています)を用いて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;
}