Top > November 2005 [全て開く]

リアルタイムカレンダー修正のお知らせ

November 30,2005 11:55 PM
Category:[カレンダー]
Tag:[]
Permalink

昨日エントリーしたリアルタイムカレンダー(JavaScript版)ですが、本日の日付がハイパーリンクになっている場合、枠表示の装飾ができないという情けない不具合がありました。この場をお借りしてお詫び申し上げます。
リストは修正致しましたので、2005/11/30 23:50 以前にリストを取得された方はお手数ですが、2項の作業を再度行ってくださいますよう、よろしくお願い致します。

なお <MTCalendar> ? </MTCalendar> の間の改行は変更されないよう、そのままお使いください。改行を変更されると Mozzila系ブラウザで装飾が行われなくなる可能性があります。

Comments [0] | Trackbacks [0]

リアルタイムカレンダー(JavaScript版)

November 29,2005 11:57 PM
Category:[カレンダー]
Tag:[, , ]
Permalink

カレンダー公開中のリアルタイムカレンダーの JavaScript 版です。

リアルタイムカレンダーとその経緯について改めて説明しますと、まず Movable Type のカレンダー(*1)には「本日」を判断するためのMTタグ MTCalendarIfToday があります。このタグを利用することで、本日の日付に枠をつけたり色を変更するといった装飾を行うことができます。
ところがこのタグの弱点は、エントリーの投稿やコメント等でページの再構築が発生しないとカレンダーの日付が更新されないということです。例えばエントリーを投稿せず、コメントもない状態が数日間続くと、カレンダーの本日表示は全く更新されません。

そんな中、PHPを利用したリアルタイムカレンダー(と勝手に命名しました)が kamishiro.net さんの記事(*2)で公開されており、当サイトでも若干アレンジして紹介させて頂きました。PHPを利用することにより、ブラウザを開いたり更新するだけで本日の日付が更新されるようになります。

ただしPHP化のカスタマイズ作業でつまづく方が少なくないのも事実で、これに月送り等の機能を組み合わせると結構複雑な作業になってしまうのが難点でした。またファイル名を変更することでデッドリンクになる可能性もあり、それを回避するため、さらに .htaccess というファイルでリダイレクト制御をしたりするとかなり面倒です。

しばらく「カレンダー = PHP」という先入観にとらわれてしまい、カレンダー関係のカスタマイズ記事ではPHP化を併用しておりましたが、よく考えてみると現在の日付は JavaScript でも取得できます。
ということで、JavaScript 版のリアルタイムカレンダーを作りました。まずは1ヶ月表示用を公開します。巷では Kinarie&May さんの flashカレンダーがすっかり有名になりましたが、月送り版等も追々公開する予定です。

また 3.2-ja 以降、ついにカレンダーがデフォルトテンプレートから姿を消し、カレンダーの作り方や存在自体もご存知ない方が増えてくるのも何なので、公開テンプレート用と併せてデフォルトテンプレートでも使えるデザインを用意しました。スクリーンショットはデフォルトテンプレートのサイドメニューへの設定例です。

前置きが長くなりましたが以下、カレンダーの設定方法です。

1.日別アーカイブの有効化

カレンダーは日別アーカイブを有効にしないと表示されないようにしています。カレンダーの日付からのリンクに日別アーカイブを設定しているためです(*3)。
管理画面の「設定」→「公開」→「アーカイブ・マッピング」で「アーカイブ種類」の「日付」のチェックボックスをチェックして、一番下の「変更を保存」をクリックします。

2.テンプレートの設定

管理画面の「テンプレート」から、カレンダーを表示したいテンプレート(メインページ/カテゴリー・アーカイブ/月別アーカイブ/エントリー・アーカイブ等)の編集画面を開きます。そして下記のリストを丸ごとコピーし、表示したい位置にペーストします。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="module-calendar module">
<h2 class="module-header"><$MTDate format="%B %Y"$></h2>
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%B %Y"$>">
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
</MTIfArchiveTypeEnabled>
<!-- カレンダー終了 -->
 
<script type="text/javascript">
<!--
data = new Date();
year = data.getYear();
year = (year < 2000) ? year + 1900 : year;
month = data.getMonth() + 1;
date = data.getDate();
table = document.getElementById('calendarTable');
flag = 0;
summary = table.getAttribute('summary');
if (month < 10) {
    month = '0' + month;
}
text = year + '年' + month + '月';
if (summary.indexOf(text) != -1) {
    elements = table.getElementsByTagName('span');
    for(k = 0; k < elements.length; k++) {
        if (elements[k].childNodes){
            if((elements[k].childNodes)[0].nodeName == 'A') {
                if((elements[k].childNodes)[0].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            } else {
                if (elements[k].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            }
        }
    }
}
//-->
</script>

公開テンプレートの場合は、上記リストの3-6行目(赤色部分)を

<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%B %Y"$>">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>

に変更してください。

デフォルトテンプレートで挿入位置が分からない方は、下記の位置に挿入すればページ右上に表示されます。

<div id="beta-inner" class="pkg">
 
      ここにリストを挿入
 
  <div class="module-search module">

3.スタイルシートの設定(デフォルトテンプレートの場合のみ)

管理画面の「テンプレート」から「スタイルシート」を選択し、下記のリストをコピー&ペーストしてください。公開テンプレートでは設定済なのでこの項はスキップしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    margin: 5px 0;
    text-align: center;
    color: #444444;
    background: none;
}
.calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
.red {
    color: #e50003;
}
.blue {
    color: blue;
}

設定が全て完了したら再構築して動作を確認してみてください。Windows自宅サーバで運用されている方は、「日付と時刻」の変更に連動して本日の日付表示が変化することを確認できます。

以上です。
日付取得のコードは下記のサイトを参考にさせて頂きました。ありがとうございました。

イヌでもわかるJavaScript講座日付や時間を取得/表示します

*1:3.2-ja 以降はデフォルトテンプレートから外されました。
*2:元記事は 404 File Not Found です。
*3:リンク先にエントリー・アーカイブを設定すればこの項は不要です。その代わり上記リストから

<MTIfArchiveTypeEnabled archive_type="Daily">

</MTIfArchiveTypeEnabled>

の2行を削除し、リスト内にある archive_type="Daily" を archive_type="Monthly" に変更します。

2005.11.30 追記
本日の日付がリンクになっている場合、日付を装飾できないという不具合がありましたので修正しました。

2005.12.04 追記
本日の日付がリンクでない場合、日付を装飾できないという不具合がありましたので修正しました。

2006.03.27 追記
当月が1?9月の場合の考慮がもれてましたのでスクリプトを修正しました。

Comments [11] | Trackbacks [0]

アーカイブ・マッピングについて

November 28,2005 11:58 PM
Category:[管理画面]
Tag:[, , ]
Permalink

以前記したアーカイブの設定についての 3.2-ja 版で、管理画面の「設定」→「公開」→「アーカイブ・マッピング」の内容についての説明です。

以下、それぞれの項目について説明します。

マッピングを新規作成
これは右肩にあるリンクを指しています。マッピングとは「関連付け」や「対応」を意味します。
テンプレートを新しく作成する時、テンプレートは何らかのアーカイブの種類(エントリー/日別/週別/月別/カテゴリー)と関連付ける必要があります。テンプレートにアーカイブの種類を関連付けることで、その中で使用するMTタグの意味が決まります。

例えば新しく作ったテンプレートの中で <$MTArchiveTitle$> というタグを使用している場合、「カテゴリー」というアーカイブに関連付けをすればカテゴリー名に、「エントリー」アーカイブに関連付けすればエントリーのタイトルに変換されます。

この項目(フォーム)で新たに作成したアーカイブ・マッピングは、その下にある一覧に追加されます。例えばカレンダー用テンプレート「カレンダー」を新たに作り、それを月別アーカイブとして関連付けを行えば、月別欄の「テンプレート」部分に「カレンダー」テンプレートが追加されます。

この設定項目をわざわざ隠しているのは、3.1x までこの項目は常に表示されており、誤って(追加)操作を行ってしまうことで、アーカイブ・マッピングに不要なテンプレートが追加されてしまい、それが元で再構築後のページ(のハイパーリンク)に不具合が発生したためと思われます。

アーカイブの種類
チェックボックスで使用するアーカイブを決定します。チェックされているアーカイブが再構築の対象になります。他のアーカイブページからリンクされているにもかかわらずチェックされていないと、再構築エラーになります。
アーカイブの種類を増減することはできません。

種類説明
エントリーエントリー別のページを作成します。デフォルトテンプレートや公開テンプレートではコメント入力フォームはこのアーカイブに属します。
日別日別のページを作成します。カレンダーからリンクされたページとして使われます。
週別ある週に属するエントリーを一括表示するページを作成します。
月別ある月に属するエントリーを一括表示するページを作成します。カレンダー自体はこのアーカイブを使用します。
カテゴリーあるカテゴリーに属するエントリーを一括表示するページを作成します。

テンプレート
アーカイブに関連付けられたテンプレートを表示します。

出力フォーマット
出力ファイルのフォーマットを決定します。3.1x 以前ではMTタグをここに設定していましたが、3.2-ja では新しいフォーマットが適用されています(MTタグも使えます)。
具体的なフォーマットについては下記のサイトで詳しく解説されています。

優先
前述の通り、一つのアーカイブは複数のテンプレートを持つことができます。その場合、それぞれのテンプレートを使ったアーカイブファイルが生成されますが、別のページからそのアーカイブファイルへリンクを生成する場合、archive_type 属性を使うことでリンクを簡単に作ることができます。
例えばメインページから月別アーカイブリストへのリンクを作る場合、

<MTArchiveList "archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br />
</MTArchiveList>

と赤色の archive_type 属性を Monthly とすることで青色の部分には月別アーカイブのリンクが設定されるわけです。Monthly を Categoly に変更すればカテゴリーリストができ、Daily にすれば日別のリストができるという仕組みです。

ただし、月別アーカイブに二つ以上のテンプレートが関連付けされている?仮に日付アーカイブテンプレートと新しく作ったカレンダー用のテンプレートが存在する?場合、archive_type 属性ではどちらか一方のリンクしか作ることができません。
それを決定するのがこの「優先」です。デフォルトの状態では何も表示されていませんが、ひとつのアーカイブに複数のテンプレートを関連つけた場合、ここにラジオボタンが現れます。そしてラジオボタンで選択した方が archive_type 属性の対象となります。

ちなみに、1つのアーカイブに複数のテンプレートを関連付けた場合は、それぞれのテンプレートの出力フォーマッをは異なるものにする必要があります(同じフォーマットにした場合、後から再構築されたテンプレートのファイルで上書きされてしまいます)。

Comments [0] | Trackbacks [1]

先週

November 27,2005 11:59 PM
Category:[ダジャレ]
Tag:[]
Permalink

楽だった

Comments [2] | Trackbacks [0]

Apache のチューニング(その3)・DiceによるWindows再起動

November 26,2005 11:58 PM
Category:[Apache]
Tag:[, ]
Permalink

Apache の再起動を周期的に行うことでメモリリークを回避する設定にしていますが、その2でお伝えした通り、再起動が正常に行われなかった場合、エラーが発生します。さらに Apache のプロセスが残る場合もあるようで(しかもそのプロセスが数十MBのメモリを喰ったまま)、あまりいい按配ではありません。

ということで Apache の方は現在の設定にして、Windows の再起動を行う方法を追加することにしました。Windows のタスクスケジューラで再起動できるようですが、Dice にプログラムスケジューラー機能があり、この中にシャットダウンや再起動も組み込まれていることを知りましたので、これを使って1日1回再起動を行ってみることにしました。以下 Windows XP での設定方法です。

DiceでのWindows再起動設定Dice の設定は「イベント」→「追加」で開いたダイアログをスクリーンショットのように設定します。
具体的には、メイン画面のメニューバーから「イベント」→「追加」を選択すると左のダイアログが開きます。ダイアログの「イベントタイプ」で「コマンド実行」を選択すると、その下のタブが切り替わるので、その中にある「シャットダウン」を選択。さらにプルダウンで「再起動」を選択して、右側のスケジュールを設定します。ここでは「1日に1回」で 5:00 に実行するようにスケジューリングしました。「イベントを有効」もチェックしておきます。

これだけでは再起動時のログインパスワード入力で止まってしますので Windows 再起動時にパスワード入力を不要にする設定を実施します。
「スタート」→「ファイル名を指定して実行」を選択して、

control userpasswords2

を入力して実行します。ユーザーアカウント画面が開くので「ユーザーがこのコンピュータを使うには、ユーザー名とパスワードの入力が必要」のチェックを外して「OK」をクリックします。その後自動ログオンの設定画面が開くので、ログオンする時のユーザー名とパスワードを設定して「OK」をクリックします。

参考サイトは下記です。ありがとうございました。

Dream SeedWindowsの定期再起動
Comments [2] | Trackbacks [0]

「カスタマイズについて」のページ更新

November 25,2005 11:55 PM
Category:[サイト変更履歴]
Tag:[, ]
Permalink

ナビゲーションバーにある「Customize(カスタマイズについて)」のページに、カスタマイズ記事へのリンクを掲載しました。
これまでは、人気のあるカスタマイズの紹介と検索方法の説明に留めるという手抜きな内容でしたが、初心者等の慣れない方への配慮と、過去の記事で役に立つと思われるものをこのまま埋もらせてしまうのも何なので、恒常的に使用可能と思われるカスタマイズを抜き出して列挙してみました(下記)。

カスタマイズ一覧

3.1x の記事が多く残っているので、サンプルリストのタグ等については 3.2 と若干相違があるかも知れません。予めご了承ください。
また掲載しているカスタマイズの適用範囲について「MT(Movable Type)「SB(Serene Bach」「その他」に分けて○×もつけてみようと思います。とりあえず欄だけは作りましたのでこれから少しずつ加えていきたいと思います。

Comments [2] | Trackbacks [0]

PowerPoint の罫線が矢印になる不具合を解消する

November 24,2005 11:53 PM
Category:[PC]
Tag:[, ]
Permalink

備忘録です。PowerPoint で表を作成すると、下のように表の線がすべて矢印になってしまう場合があります。

罫線が矢印になった表普通の線に戻すには、オートシェイプで直線「/」を選んでとりあえず適当な場所に描画します。その後、描画した直線の上で右クリックをして、「オートシェイプの規定値に設定」を選択します。これで不具合が解消されます。
Comments [0] | Trackbacks [0]

商品リンクをランダムに切り替える

November 23,2005 11:57 PM
Category:[JavaScript]
Tag:[]
Permalink

Amazon 等の商品リンクをランダムに切り替えて表示する方法です。具体的な動作は、JavaScript の乱数を利用して、ページを表示する毎に乱数に対応する id 属性で括られたHTML(=商品リンク)を表示するという方法です。当サイトのエントリー・アーカイブで試しに使っています。
以下、設定方法です。

まず表示したい商品のリンクを、テンプレートの任意の位置に並べて記述します。その際、リストのように id 属性を付与してください。ここでは amazon0、amazon1、amazon2 という名称にしています。属性名につけられた数字は必須で、0 から開始させてください。ここではリンクを3つにしていますが、いくつ作って構いません。

<div id="amazon0">
商品Aのリンク
</div>
<div id="amazon1">
商品Bのリンク
</div>
<div id="amazon2">
商品Cのリンク
</div>

次に、商品リンクの下に下記の JavaScript を追加してください。赤色部分に商品リンクの合計数を設定します。サンプルでは3つの商品を記述していますので、「3」を設定します。

<script type="text/javascript">
n = Math.floor(Math.random() * 3);
for(i = 0; i < 3; i++){
    document.getElementById('amazon'+i).style.display = 'none';
}
document.getElementById('amazon'+n).style.display = 'block';
</script>

保存・再構築すれば完成です。設定したページをリロードして、商品リンクが切り替わることを確認してください。
なお id 属性名を hogehoge0、hogehoge1… という風に設定したい場合は、リスト内の amazon という文字を

    document.getElementById('amazonhogehoge'+i).style.display = 'none';
}
document.getElementById('amazonhogehoge'+n).style.display = 'block';

と変更してください。

Comments [4] | Trackbacks [1]

Serene Bach の編集画面を広げる

November 22,2005 11:55 PM
Category:[管理画面]
Tag:[, , , ]
Permalink

Serene Bach 管理画面にある、新規記事・テンプレート編集画面のテキストエリアの幅および高さを変更するカスタマイズです。

変更前これはカスタマイズ前のテンプレート編集画面のスクリーンショットです。
変更前こちらがカスタマイズ後のスクリーンショットです。ごらんの通りテキストエリアの縦および横幅がひろがりました。行の折り返しが減り、情報量が増えることで編集作業が楽になります。

Movable Type では、

ですでに紹介していますが、Serene Bach でもやってみました。

1.記事編集テキストエリアの高さを変更する

新規記事および記事リストのテキストエリアの高さを変更します。ここでは2種類の方法を説明します。

1.1 Entry.pm を変更する

ひとつめはライブラリの内容を変更する方法です。下記のファイルをダウンロードし、任意のエディタで開きます。念のためファイルのバックアップはとっておきましょう。

lib/sb/Admin/Entry.pm

このファイルに記述されている下記の部分を検索し(BODYROW_STD で検索するとよいでしょう)、赤色を青色の値に変更します。2.03R では54行目にあります。
リストは 15 から 30 に変更する例を示しています。

sub BODYROW_STD  (){ 1530 };

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。

1.2 entry.html を変更する

もうひとつの方法は管理ページの html (のテンプレート)を変更する方法です。下記のファイルをダウンロードし、任意のエディタで開きます。念のためファイルのバックアップはとっておきましょう。

lib/resource/ja/entry.html

このファイルに記述されている下記の部分を検索し(sb_entry_body_rows で検索するとよいでしょう)、赤色を青色の値に変更します。2.03R では93行目にあります。
リストは 30 に変更する例を示しています。

<textarea name="entry_body" id="entry_body" rows="{sb_entry_body_rows}30" cols="40" class="text">{sb_entry_body}</textarea>

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。

2.テンプレート編集画面の高さを変更する

テンプレート編集画面のテキストエリアの高さを変更します。下記のファイルをダウンロードし、任意のエディタで開きます。

lib/resource/ja/template.html

このファイルに記述されている下記の部分を検索し、赤色を青色の値に変更します。2.03R では 78?122行目にあります。
リストは 20 から 30 に変更する例を示しています。

<dt class="note"><label accesskey="m" for="template_main">ベースHTMLテンプレート<span>[M]</span></label></dt>
<dd><textarea name="template_main" id="template_main" rows="2030" cols="40" class="text">{sb_temp_main}</textarea></dd>
                  :
<dt class="note"><label accesskey="s" for="template_css">CSSテンプレート<span>[S]</span></label></dt>
<dd><textarea name="template_css" id="template_css" rows="2030" cols="40" class="text">{sb_temp_css}</textarea></dd>
                  :
<dt class="note"><label accesskey="e" for="template_entry">個別エントリー用HTMLテンプレート<span>[E]</span></label></dt>
<dd><textarea name="template_entry" id="template_entry" rows="2030" cols="40" class="text">{sb_temp_entry}</textarea></dd>

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。
横幅を広げる時の cols 属性も指定されていますが、スタイルシートの設定が優先されるため、ここを変更しても効果はありません(横幅の変更方法は後述します)。また個別エントリー用HTMLを使用していない場合は一番下の変更は不要です。

3.横幅をひろげる(記事・テンプレート共通)

記事編集画面およびテンプレート編集画面の横幅をひろげます。この変更を行うと管理ページすべてのヘッダの横幅が広くなりますが、テキストエリア部分のみ横幅を広げているので、他のページのテーブル等はひろがりません。

下記のファイルをダウンロードし、任意のエディタで開きます。念のためファイルのバックアップはとっておきましょう。

lib/resource/ja/styles.css

このファイルに記述されている下記の部分を検索し、赤色を青色の値に変更します。2.03R では 177行目辺りおよび 273行目にあります。
リストは横幅を 200px ひろげる例を示しています。

div.body {
/* except MacIE \*/
    clear: both;
/* end for MacIE */
    width: 700px900px;
    margin: 5px 0px 0px 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    background-repeat: repeat-y;
}
        :
      (中略)
        :
dl.mainform dd textarea.text {
    width: 520px720px;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-width: 1px;
}

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。 変更が反映されない場合は、キャッシュにデータが残っている可能性がありますので、2項で変更した

lib/resource/ja/template.html

の cols 属性(例えばベースHTMLの部分)の値を一旦変更してみてください(スタイルシートの変更が反映されたら元に戻してください)。

4.フォントサイズを変更する

フォントの関係でテンプレート編集画面等は改行が結構頻繁に入ります。先のスタイルシートに青色の

dl.mainform dd textarea.text {
    width: 520px;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-width: 1px;
    font-size: 12px;
}

を追加すればフォントがやや小さくなり、改行が減るので見やすくなるかもしれません(画面の大きさもあるので一概には言えませんが)。

どのカスタマイズも値を色々試してみて、ご自身が使いやすいものを設定しましょう。

Comments [4] | Trackbacks [4]

Apache のチューニング(その2)

November 21,2005 11:57 PM
Category:[Apache]
Tag:[, , ]
Permalink

先日、その1で MaxRequestsPerChild でリクエスト数の上限を設定し、子プロセスを再起動するようにしましたが、下記のエラーが時々発生しています。

[crit] [Mon Nov dd hh:mm:ss 2005] file .\\server\\mpm\\winnt\\child.c, line 1060, assertion "(rv >= 0) && (rv < threads_created)" failed

ネットで同様の事象を検索したところ、下記の1件しかヒットしませんでした。

Another Apache error

対処は「バージョンを 2.1.8 にアップグレードする」と書かれています。Apache HTTP Server は現在 2.1.9-beta がリリースされていますが、Windows 版は 2.0.55 が最新のため、残念ながらこのエラーは回避できないようです。

Comments [0] | Trackbacks [0]

検索結果ページのページ分割

ページ分割シリーズの締めくくりは「検索ページのページ分割」です。
このカスタマイズを行うことで通常の検索エンジンのように一定件数毎にページを分割することができます。

この技は自分で発見したのではなく、かなり以前に caramell*vnilla さんと Document_Not_Bound さんのコメントのやりとりでみつけましたので、ご紹介まで(カスタマイズ方法は掲載されていないようです)。

以下、カスタマイズ方法です。

1.プラグインファイルのダウンロード

MT Extensions より MTPaginate をダウンロード(ページ上の方にある「Download」をクリック)。ファイルは任意のフォルダ(デスクトップ等)に保存します。古いバージョン(1.24)では2ページ目以降の表示ができなかったため、既にお使いの方も最新版をダウンロードされることをお勧めします。1.26では正常に動作しました。

2.プラグインファイルのアップロード

ダウンロードしたファイルを解凍し、その中の MTPaginate.pl を plugins ディレクトリにアップロードします。

注:この情報はバージョン1.28のものです。
ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。

plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl

3.検索用テンプレートの修正

検索用テンプレートは管理画面から編集できないため、ファイルを直接編集します。なお元のファイルはバックアップ(同じ内容のものを別のファイル名で保存)しておきましょう。

search_templates/default.tmpl

をダウンロード、任意のエディタで開き、検索結果テンプレートの MTSearchResults タグの前後に、下記のリストのように青色部分のタグを追加します。

<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
    <div class="paginate">
    <MTPaginateIfPreviousPage_>
    <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
    </MTPaginateIfPreviousPage_>
    <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
    <MTPaginateIfNextPage_>
    <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
    </MTPaginateIfNextPage_>
    </div>
    </MTPaginateIfMultiplePages>
    <MTPaginateContent max_sections="10">
 
    <MTSearchResults>
 
    <MTBlogResultHeader>
    <h2><MT_TRANS phrase="Search Results from"> <$MTBlogName$></h2>
    </MTBlogResultHeader>
 
    <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
    <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
    <p class="posted"><MT_TRANS phrase="Posted in"> <$MTBlogName$> <MT_TRANS phrase="on"> <$MTEntryDate$></p>
 
    <$MTPaginateSectionBreak$>
 
    </MTSearchResults>
 
    </MTPaginateContent>
 
</MTPaginate>

検索用テンプレートはCGIとして動作するため、上記リスト1行目の

mode="cgi"

は必須です。この設定を行っていない状態で検索を実行すると、検索結果画面で

The MTPaginate tag only works within PHP documents!
Make sure that the document extension is .php and that your server supports PHP documents.

というメッセージが表示されます。

赤色で示している div 要素はページ分割機能とは直接関係ありませんが、ページリンク用のスタイルを指定する場合を考慮して設定しています。必要に応じて下記のようなCSSをスタイルシート(styles-site.css)に追加してください。

.paginate {
    text-align: center;
    font-size: 9px;
}

編集が完了したら元のディレクトリにアップロードします。これで各ページから検索を実行してみてください。

4.日本語を利用する場合

このテンプレートに日本語を直接記述すると正常に動作しなくなる可能性があります。
日本語を表示したい場合、例えばページリンクの title 属性で日本語を表示したい場合は

<a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
                 :
<a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>

の赤色部分を青色の

<a href="<$MTPaginatePreviousPageLink$>" title="<MT_TRANS phrase="Previous Page Link">">&#65308;</a>
                 :
<a href="<$MTPaginateNextPageLink$>" title="<MT_TRANS phrase="Next Page Link">">&#65310;</a>

に変更します。
そして

lib/MT/L10N/ja.pm

を任意のエディタで開いて下記を追加します。

'Next Page Link' => '次のページへ',
'Previous Page Link' => '前のページへ',

「Previous Page Link」「Next Page Link」という文字列やそれに対応する日本語名ですが、MT_TRANS タグの phrase 属性の内容と
ja.pm の '' で括った英語が一致すればOKですので、お好きな内容を設定してください。
ただし ja.pm 内ですでに使われている phrase 属性と重複しないように気をつけてください。

また上記2行を挿入する位置はどこでも構いませんが、全体を括っている

%Lexicon = (
    :
);

の間に挿入してください。他と同じような設定があるので、それに並べて挿入すれば大丈夫でしょう。最初から設定されているものは行頭にタブがありますが、なくても問題ありません。

5.注意事項

当サイトで動作確認したところ、ページリンクの表示で若干不具合("All Pages" 横のセパレータ位置が妙)があるようです。
またページ遷移の度にCGIが起動されるため、サーバに若干負荷がかかりますのでご注意ください。

2007.05.04 追記
プラグインのバージョンアップに伴い、アップロード方法を修正しました。また 3.3 よりテンプレート化されたので、本文の一部を修正しました。

Comments [14] | Trackbacks [2]

イギリスの巨石文化

November 19,2005 11:50 PM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [3] | Trackbacks [0]

Serene Bach テンプレート

November 18,2005 1:00 AM
Category:[テンプレート]
Tag:[, ]
Permalink

Serene Bach・3カラムテンプレート Serene Bach 用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーを参照ください。

1.動作確認環境

動作確認は下記の環境で行っています。

  • OS:Windows2000/XP
  • ブラウザ:IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5
  • Serene Bach:2.00R?2.09R

Serene Bach は独自タグを除去すれば旧バージョンでも使用可能のようですが、情報が整理できていませんのでとりあえず 2.03R 用としています。

2.利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。

3.カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

  • 3カラム(カラム幅固定)
  • 3カラムリキッドレイアウト(中央カラム幅可変)
  • 2カラム(右サイドバー:カラム幅固定)
  • 2カラム(左サイドバー:カラム幅固定)
  • 2カラムリキッドレイアウト(右サイドバー:左カラム幅可変)
  • 2カラムリキッドレイアウト(左サイドバー:右カラム幅可変)
  • 1カラム(カラム幅固定)
  • 1カラムリキッドレイアウト(カラム幅可変)

の計8種類を用意しています(それぞれのサンプルはちょっと下にある画像をご覧ください)。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます(カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します)。例えば、3カラムレイアウトから2カラム・リキッドレイアウト(右サイドバー)に変更したい場合は、HTMLテンプレートの

<body class="layout-three-column">

の赤色部分を

<body class="layout-two-column-liquid-right">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

個別エントリー用HTMLありのテンプレートをお使いの場合、ベースHTMLと個別エントリー用HTMLで異なるレイアウトを設定することができます。例えばベースHTMLで3カラム、個別エントリー用HTMLで1カラムという設定も可能です。

以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。

<body class="layout-three-column">

Serene Bach・3カラムテンプレート3カラム

<body class="layout-three-column-liquid">

Serene Bach・3カラムテンプレート・リキッドレイアウト3カラム・リキッドレイアウト

<body class="layout-two-column-left">

Serene Bach・2カラムテンプレート(左サイドバー)2カラム(左サイドバー)

<body class="layout-two-column-liquid-left">

Serene Bach・2カラムテンプレート・リキッドレイアウト(左サイドバー)2カラム・リキッドレイアウト(左サイドバー)

<body class="layout-two-column-right">

Serene Bach・2カラムテンプレート(右サイドバー)2カラム(右サイドバー)

<body class="layout-two-column-liquid-right">

Serene Bach・2カラムテンプレート・リキッドレイアウト(右サイドバー)2カラム・リキッドレイアウト(右サイドバー)

<body class="layout-one-column">

Serene Bach・1カラムテンプレート1カラム

<body class="layout-one-column-liquid">

Serene Bach・1カラムテンプレート・リキッドレイアウト1カラム・リキッドレイアウト注:左右のマージンをなくすことも可能です。

公開テンプレートは一番上の3カラムレイアウトで配布しております。

次にカラム数を変更する場合の修正方法です。例えば3カラムから2カラム(左サイドバー)に変更する場合は、右カラムを表示する

<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
         :
 (ここに書かれているものをコピー)
         :
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

の間に書かれている必要なメニュー(検索・カテゴリー・バナー等)をコピーし、左カラム

<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
        :
    (ここにペースト)
        :
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->

にペーストしてください。そのあと

<!-- 右カラム開始 -->
       :
<!-- 右カラム終了 -->

を丸ごと削除します。1カラムに変更される場合は左右両方のカラムをごっそり削除してください。

4.1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています(言い換えると単にサイドバーをとっぱらっただけです)。個別エントリーとコメント・トラックバックは機能しますので、サイトを初めて訪れる方でも戸惑わずに閲覧することが可能です。

1カラムでご利用になる際は前項での左右カラムの削除および、テンプレート内に設定されている

<!-- for one column
<!-- BEGIN archives -->
<div id="archive">{archives_list}</div>
<!-- END archives -->
 
<div id="footer-one">
Powered by <a href="{script_webpage}"><strong>{script_name} {script_version}</strong></a><br />
<a href="http://www.koikikukan.com/"><img src="{site_parts}koikikukan.gif" alt="小粋空間" width="128" height="22" /></a>
</div>
/for one column -->

の赤色部分を削除してください(これで月別アーカイブリストとクレジットバナーがページの一番下に表示されます)。
またアーカイブリストはプルダウンメニューで表示することを想定していますので、上記の設定の後、

JUGEMカスタマイズ講座リストのプルダウンメニュー化

を実施して、スクリプトをページの最後の方に設定してください。なお ListSelector の起動パラメータは

ListSelector('archive',1,'月別アーカイブ');

としてください。

5.記事の日付表示について

Serene Bach では投稿日の日付が記事単位に付与されますが、本テンプレートでは JavaScript を用いてページの前方に同一日付の記事がある場合、日付を重複して表示しないようにしています。なおデフォルトの環境設定でのみ動作確認していますので不具合ございましたらご連絡ください。
この機能を無効にする場合はベースHTMLテンプレート下にある

<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
//-->
</script>

を削除してください。

6.XHTML1.0 Transitional valid

Valid XHTML 1.0 Transitional当サイトではWeb標準を推奨しています。テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。

7.その他

基本的な動作は確認したつもりですが、Serene Bach の確認を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。

8.ダウンロード

下のリンクからテンプレートをダウンロードできますのでご利用ください。「個別エントリー用HTMLあり」はテンプレートの個別エントリー用HTMLテンプレートにも反映されます。

2009.07.13 個別エントリーなしのテンプレートをリニューアルしました。

ダウンロードしたファイルを解凍し、中にある txt 形式のファイルを任意のディレクトリにアップロードしてください。そのあと管理画面の「テンプレート」→「インポート」のページで指定して「読込み」をクリックすればインポートされます。
「個別エントリー用HTMLあり」をダウンロードすると、個別エントリーページをインデックスや他のアーカイブページと異なるカラムレイアウトにすることが可能です。

2005.11.18 追記
個別エントリーのトラックバック表示に不具合があったためテンプレートを修正しました。

2005.12.01 追記
動作確認ができましたのでタイトルおよび対応バージョンを変更しました。

2006.02.26 追記
スタイルシートの全称セレクタから font-weight プロパティを削除し、見出し用のタイプセレクタを追加しました。またエントリー日付・コメントタイトル・トラックバックタイトルの配色用セレクタをまとめました。

2007.01.02 追記
動作可能バージョンを 2.09R までに変更しました。

Comments [116] | Trackbacks [18]

Google Maps で鈴鹿サーキット試走

November 17,2005 12:55 PM
Category:[blog]
Tag:[, , ]
Permalink

話題になってすでに一週間ほど経ちますがご紹介まで。

tech.nitoyon.comGoogle Maps でレーシングGoogle Mapsで鈴鹿サーキット試走

操作はスペースキーが前進、離すと減速、矢印の左右キーがハンドルです。操作すると真ん中にある勝手口のドア(失言)のような車がいい感じで動き出します。また走っているように見える仕組みの解説の通り、サーバ負荷も考慮されており、車が回転する24枚の画像を縦に並べて1枚の画像にし、JavaScript の style.top プロパティで表示を制御しています。

電車でGO!(やったことありませんが)のように、リアルな空間を手軽に擬似体験できる醍醐味が愉快です。

Comments [0] | Trackbacks [0]

Apache のチューニング(その1)

November 16,2005 11:53 PM
Category:[Apache]
Tag:[, , ]
Permalink

先日より続いているアクセス不具合についてチューニング(というほどのものではありませんが)を実施しました。何回か報告する機会がありそうなのでとりあえず「その1」に。

不具合に関連する事象で把握できているのは次の3点です。

  • Apache プロセスのメモリが増加し続け(メモリリーク)、1日で数百MBに膨れ上がる
  • 何らかの契機にレスポンスが突然遅くなる(お昼休み等、アクセスが集中すると×?)
  • Apache を再起動すればアクセスは正常になる

チューニング関連の記事を調べた結果、下記の2つのディレクティブについて httpd.conf に設定することにしました。

MaxRequestsPerChild

これは個々の子サーバが稼働中に扱うリクエスト数の上限で、このディレクティブに設定された値を超えると子プロセスは終了(再起動)します。デフォルトは 0(=子プロセスを終了しない)ですが、現在は 5000 に設定しています。記事によっては2桁?3桁で書かれているものもあり、どの程度の値にすればよいか悩みましたが、やや大きめの値にしています。

この設定で1日稼動させてみたところ、レスポンスが遅くなるという事象は収まったようです。ただログを確認するとプロセス再起動の周期がやや短いようなので、値の調節はもう少し必要かもしれません。

参考記事は下記です。

Win32DisableAcceptEx

もうひとつのディレクティブ Win32DisableAcceptEx は上記の検索をしている時にたまたまみつけたもので、Windows の winsock が原因で AcceptEx のエラー

指定されたネットワーク名は利用できません。  : winnt_accept: Asynchronous AcceptEx failed.
セマフォがタイムアウトしました。  : winnt_accept: Asynchronous AcceptEx failed.

が頻繁に発生するようです。VirtualHost 別のエラーログばかり見ていたので気がつかなかったのですが全体のエラーログに上記のエラーがかなり大量に頻繁に発生していました。

アクセス不具合との関連がないにしてもこれは回避しておきたいので、MPM_WinNT モジュール部分に Win32DisableAcceptEx を追加。これで上記のメッセージは止まりました。

参考記事は下記です。

まとめ

現在の httpd.conf の(該当箇所の)設定は次のようになっています。

<IfModule mpm_winnt.c>
ThreadsPerChild 250
MaxRequestsPerChild 05000
Win32DisableAcceptEx
</IfModule>

MaxRequestsPerChild はデフォルト値 0 を書き換え、Win32DisableAcceptEx は1行追加。ThreadsPerChild はデフォルトで設定された値をそのまま利用しています。

また上記と併せてPHPやCGIエラー等もエラーログを参照しながら除去しました。

Comments [0] | Trackbacks [0]

エントリーアーカイブのページ分割

November 15,2005 11:57 PM
Category:[ページ分割]
Tag:[, , , , ]
Permalink

MTPaginate プラグインを利用したページ分割はかなり普及していますが、このプラグインはひとつのエントリーをさらにページ分割することも可能です。

ということで、エントリーアーカイブ(個別エントリーアーカイブ)のページ分割をご紹介します。エントリーが長文になる場合の分割はもちろん、例えばアフィリエイトで Movable Type を利用している場合、カテゴリーアーカイブに複数の商品を紹介してエントリーアーカイブではひとつの商品を表示するというのが一般的と思われますが、エントリーアーカイブで複数の商品をすっきりと表示することも可能になります。

1ページ目を表示まず画像を使って完成イメージをご説明します。
左のサンプルはデフォルトテンプレートを使ったページ分割イメージです。上がタイトル、その下にカスタマイズで追加された分割ページのリンクがあり、その下が本文です。サンプルでは計3ページ(3段落)に分割されており、1ページ目の「段落1」という本文を表示している状態です。
2ページ目を表示「2」という2ページ目のリンクをクリックすると、分割された「段落2」という本文に切り替わります。
全ページ表示「All Pages」をクリックすると全ての段落が表示されます。この状態が通常の1エントリー表示と同じです。

このエントリーも実験台としてページ分割を施しています。ページリンクはエントリーの上下に設置しています。エントリー先頭がナビゲーションだらけになってるとかいうツッコミはおいといて、エントリーのページ分割を体感頂ければ幸いです。

次にカスタマイズ方法です。

1.プラグインファイルのダウンロード

MT Extensions より MTPaginate をダウンロード(ページ上の方にある「Download」をクリック)。ファイルは任意のフォルダ(デスクトップ等)に保存します。

2.プラグインファイルのアップロード

ダウンロードしたファイルを解凍し、その中の MTPaginate.pl を plugins ディレクトリにアップロードします。

注:この情報はバージョン1.28のものです。
ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。

plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl

3.(3.2以降の場合)アーカイブURL/アーカイブ・パスの設定

管理メニューの「設定」→「公開」にある「アーカイブの設定」のチェックボックスをチェックします。チェックするとその下に「アーカイブURL」「アーカイブ・パス」の項目が表示されるので、下記のように設定します。

  • アーカイブURL:サイトURL/archives/
  • アーカイブ・パス:サイト・パス/archives

サイトURLとサイト・パスは同じページに表示されている「サイトURL」「サイト・パス」の内容をそのままあてはめてください。例えばサイトURLが http://www.koikikukan.com/ であれば、アーカイブURLは

http://www.koikikukan.com/archives/

となります。
なおこれらはページ分割を行わない場合も設定することをお勧めします。

4.ファイル名の変更

3.1x まで:管理メニュー左の「ウェブログの設定」→「アーカイブの設定」の下にある「アーカイブ」欄の「アーカイブの種類」が「個別」の「アーカイブ・ファイルのテンプレート」のテキストボックス欄に下記を設定。
3.2x 以降:管理メニュー左の「設定」→「公開」で「アーカイブ・マッピング」欄の「アーカイブ種類」が「エントリー」の「出力フォーマット」のテキストボックス欄に下記を設定。

<$MTArchiveDate format="%Y/%m/%d/%H%M%S"$>.php

上記はMTタグを利用したものですが、3.2x 以降はフォーマットの簡略化が可能になっていますので下記の設定でもOKです。

%y/%m/%d/%h%n%s.php

設定フォーマットは「年/月/日/時分秒.php」というファイルを出力するようになっていますが、エントリーIDを利用した設定、

<$MTEntryID pad="1"$>.php

でも問題ありません(3.2 以降の簡略化フォーマットであれば "%e.php" )。フォーマットの詳細は公式サイトのユーザーズマニュアル・日付タグのフォーマットを参照ください(2005.11.15現在ではMTタグ用のフォーマットのみ記載されています)。

設定したら「変更を保存」をクリックしてください。

5.XML宣言の修正

ページを XHTML文書、例えば XHTML1.0 として適合させている場合、前項と同じ画面の「テンプレートの内容」の1行目に、

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>

という XML 宣言が記述されているケースがあります(記述されていなければこの項目はスキップしてください)が、php ファイルに変更するとサーバではこの行をPHPスクリプトとして誤認識してしまい、PHPエラーとなります。エラーが発生するとページが正常に生成されないため、結果的に真っ白なページが表示される可能性があります。

このような場合、下記のようにPHPスクリプトとして動作するように修正します。

<?php echo('<?xml version="1.0" encoding="<$MTPublishCharset$>"?>') ?>

6.テンプレートの修正

エントリーアーカイブテンプレートにページ分割用タグを設定します。
エントリーを分割するには分割するためのキーワード(セパレータ)が必要ですが、ここでは

  • HTML要素
  • エントリー内の文字列
  • セパレータ

の3種類を使った分割方法について説明します。

6.1 HTML要素でページ分割する

エントリーアーカイブの MTEntryBody の前後に下記の青色部分を追加します。リストはデフォルトテンプレートの場合です。

<MTPaginate>
<h3 class="entry-header"><$MTEntryTitle$></h3>
<div class="entry-content">
   <MTPaginateIfMultiplePages>
   <div class="paginate">
   <MTPaginateIfPreviousPage_>
   <a href="<$MTPaginatePreviousPageLink$>" title="前のページへ">&#65308;</a>
   </MTPaginateIfPreviousPage_>
   <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
   <MTPaginateIfNextPage_>
   <a href="<$MTPaginateNextPageLink$>" title="次のページへ">&#65310;</a>
   </MTPaginateIfNextPage_>
   </div>
   </MTPaginateIfMultiplePages>
   <MTPaginateContent max_words="1" section_start_tag="p">
   <div class="entry-body">
      <$MTEntryBody$>
   </div>
   <div id="more" class="entry-more">
      <$MTEntryMore$>
   </div>
   </MTPaginateContent>
</div>
</MTPaginate>

3.2-ja 公開テンプレートの場合は下記の通りです。HTMLは若干異なっていますがページ分割用タグの挿入位置は同じです。

<!-- エントリータイトル -->
<MTPaginate>
<h3 class="entry-header">●<$MTEntryTitle$></h3>
 
<!-- エントリー -->
<div class="entry-content">
   <MTPaginateIfMultiplePages>
   <div class="paginate">
   <MTPaginateIfPreviousPage_>
   <a href="<$MTPaginatePreviousPageLink$>" title="前のページへ">&#65308;</a>
   </MTPaginateIfPreviousPage_>
   <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
   <MTPaginateIfNextPage_>
   <a href="<$MTPaginateNextPageLink$>" title="次のページへ">&#65310;</a>
   </MTPaginateIfNextPage_>
   </div>
   </MTPaginateIfMultiplePages>
   <MTPaginateContent max_words="1" section_start_tag="p">
   <div class="entry-body"><$MTEntryBody$></div>
 
   <!-- 追記 -->
   <MTEntryIfExtended>
   <div id="more" class="entry-more"><$MTEntryMore$></div>
   </MTEntryIfExtended>
   </MTPaginateContent>
</div><!-- /entry-content -->
</MTPaginate>

上記リストの15行目(公開テンプレートのリストは18行目)にある、

section_start_tag="p"

が分割対象のタグを指定する部分です。赤色の p は p 要素を示しており、つまりこの例では p 要素で分割する設定になっています。この部分にセパレータにしたい任意のHTML要素名を設定してください。

p 要素はエントリーの編集画面の下にある「改行設定(3.1x以前は「テキストフォーマット」)」で「改行を変換する」という指定になっていれば、空行が p 要素に変換されます。したがって手動で付与する必要はありませんが、上記リストの設定では空行がページ分割のセパレータとなりますので、分割ページに空行を含む場合は他のHTML要素を指定するか、6.2項または6.3項の設定をお勧めします。

また section_start_tag 属性でページ分割する場合、max_words 属性(または max_bytes 属性)の設定が必須のようです。また max_xxx の設定が section_start_tag より優先されるため、これらに大きな値を設定していると、section_start_tag で指定したHTML要素が含まれていても、そこでページ分割されない可能性があります。
本来は両者を使ってページ分割を制御するようですが、とりあえずここでは最小値("1")を設定して常にHTML要素でページ分割される設定にしています。

赤色で示している div 要素はページ分割機能とは直接関係ありませんが、ページリンク用のスタイルを指定する場合を考慮して設定しています。必要に応じて下記のようなCSSをスタイルシート(styles-site.css)に追加してください。6.2項、6.3項も同様です。

.paginate {
    text-align: center;
    font-size: 9px;
}

6.2 エントリー内の文字列でページ分割する

次にエントリー内の文字列でページ分割する方法です。ここでは section_start 属性を利用します。
6.1項の

<MTPaginateContent max_words="1" section_start_tag="p">

の部分を

<MTPaginateContent max_words="1" section_start="&lt;div class=&quot;section&quot;&gt;">

に置き換えて設定します。赤色部分がセパレータとなります。この例では

&lt;div class=&quot;section&quot;&gt;

がセパレータですが、これは

<div class="section">

と同じで、つまりエントリー内に挿入した、class 属性が "section" という div 要素をセパレータとしてページ分割が行われます。タグの「<」 と「>」およびクォート「"」は文字実体参照にします。他の設定は6.1と同様です。

6.3 page_break で分割する

3つめは、エントリーにページ分割専用のセパレータを挿入する方法です。プラグインはこの特定のセパレータ(文字列)をサーチしてページ分割します。
例えば「=====」という文字列をセパレータにする場合、ページ分割したい段落と段落の間に、

段落1
 
=====
 
段落2

という具合にセパレータを挿入します(ここではセパレータの上下に空行を挿入することとします)。
6.2項と同様6.1項のリストの、

<MTPaginateContent max_words="1" section_start_tag="p">

の部分を、

<MTPaginateContent page_break="&lt;p&gt;=====&lt;/p&gt;">

に置き換えて設定します。赤色部分がセパレータとなります。この例では

&lt;p&gt;=====&lt;/p&gt;

がセパレータですが、エントリー登録時、エントリーの編集画面で「改行を変換する」という設定になっている場合、セパレートには p 要素が付与されて、実際のHTMLページでは

<p>=====</p>

となりますので、page_break 属性にはセパレータ文字列の「=====」と、その前後に文字実体参照にした 「&lt;p&gt;」と「&lt;/p&gt;」で挟んだ形で設定します。

注意点は、エントリーアーカイブでセパレータが設定されたページを一括表示した時、セパレータは表示されませんが、他のアーカイブやメインページ等ではセパレータが表示されます(他のページでは同じカスタマイズを施していないので当然ですが)。これが6.2項との大きな違いです。

ということで、本項の場合は表示されても差し支えないセパレータを付与するようにしてください。なお6.2項と同様にHTML要素を指定すると、エントリーアーカイブの一括表示で指定HTML要素が除去されてしまいますのでご注意ください。

7.ページリンク表示位置の変更

サンプルリストではエントリー本文の先頭にページリンクを表示するようにしていますが、エントリー本文の下に付与する場合、6.1項のリストを例に挙げると下記のように設定します。
<MTPaginate>
<h3 class="entry-header"><$MTEntryTitle$></h3>
<div class="entry-content">
   <MTPaginateContent max_words="1" section_start_tag="p">
   <div class="entry-body">
      <$MTEntryBody$>
   </div>
   </MTPaginateContent>
   <div id="more" class="entry-more">
      <$MTEntryMore$>
   </div>
</div>
   <MTPaginateIfMultiplePages>
   <div class="paginate">
   <MTPaginateIfPreviousPage_>
   <a href="<$MTPaginatePreviousPageLink$>" title="前のページへ">&#65308;</a>
   </MTPaginateIfPreviousPage_>
   <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
   <MTPaginateIfNextPage_>
   <a href="<$MTPaginateNextPageLink$>" title="次のページへ">&#65310;</a>
   </MTPaginateIfNextPage_>
   </div>
   </MTPaginateIfMultiplePages>
</MTPaginate>

6.1項のページリンクの設定を残しておけば上下両方に設定することも可能です。

8.追記を各ページに変更する

これまでの設定では追記もページ分割対象、つまり最後のページの最後に追記が表示されますが、追記の内容を各ページで表示したい場合、6.1項のリストを例に挙げると、

<MTPaginate>
<h3 class="entry-header"><$MTEntryTitle$></h3>
<div class="entry-content">
   <MTPaginateIfMultiplePages>
   <div class="paginate">
   <MTPaginateIfPreviousPage_>
   <a href="<$MTPaginatePreviousPageLink$>" title="前のページへ">&#65308;</a>
   </MTPaginateIfPreviousPage_>
   <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
   <MTPaginateIfNextPage_>
   <a href="<$MTPaginateNextPageLink$>" title="次のページへ">&#65310;</a>
   </MTPaginateIfNextPage_>
   </div>
   </MTPaginateIfMultiplePages>
   <MTPaginateContent max_words="1" section_start_tag="p">
   <div class="entry-body">
      <$MTEntryBody$>
   </div>
   </MTPaginateContent>
   <div id="more" class="entry-more">
      <$MTEntryMore$>
   </div>
</div>
</MTPaginate>

という具合に、

</MTPaginateContent>

を追記用タグの前に設定することで可能になります。
追記を利用して各ページ共通の情報を表示するテクニックです。

2005.11.16 追記
6.1項に公開テンプレート用のリストを追加しました。また本文の記述誤りを修正しました。

2005.11.20 追記
3.2-ja 以降用にアーカイブURL/アーカイブ・パスの設定を追記しました。

2007.05.04 追記
プラグインのバージョンアップに伴い、アップロード方法を修正しました。

Comments [2] | Trackbacks [5]

コエンザイム

November 14,2005 11:59 PM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [4] | Trackbacks [0]

トップページのページ分割

November 13,2005 11:52 PM
Category:[ページ分割]
Tag:[, , , ]
Permalink

Movable Type のトップページ(メインページ)のページ分割方法をご紹介します。
設定方法は以前エントリーしたカテゴリーアーカイブと月別アーカイブのページ分割とほとんど同じですが、考慮すべき点があることと、前記エントリーと内容を合体させるとタイトルを変更しなければならなくなるため、別エントリーでご紹介します。

1.プラグインファイルのダウンロード

MT Extensions より MTPaginate をダウンロード(ページ上の方にある「Download」をクリック)。ファイルは任意のフォルダ(デスクトップ等)に保存します。

2.プラグインファイルのアップロード

注:この情報はバージョン1.28のものです。
ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。

plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl

3.ファイル名の変更

テンプレートのメインページの編集画面を開き、「出力ファイル名」を index.html から index.php に変更して「保存」をクリックします。
もしファイル名が index.html のままになっていると、カスタマイズ終了後、ページを表示した時に

The MTPaginate tag only works within PHP documents!
Make sure that the document extension is .php and that your server supports PHP documents.

というメッセージが表示されますのでご注意ください。

4.XML宣言の修正

ページを XHTML文書、例えば XHTML1.0 として適合させている場合、前項と同じ画面の「テンプレートの内容」の1行目に、

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>

という XML 宣言が記述されているケースがあります(記述されていなければこの項目はスキップしてください)が、php ファイルに変更するとサーバではこの行をPHPスクリプトとして誤認識してしまい、PHPエラーとなります。エラーが発生するとページが正常に生成されないため、結果的に真っ白なページが表示される可能性があります。

このような場合、下記のようにPHPスクリプトとして動作するように修正します。

<?php echo('<?xml version="1.0" encoding="<$MTPublishCharset$>"?>') ?>

5.ページ分割の設定

テンプレートにページ分割用タグを設定します。
メインページのテンプレート編集画面の「テンプレートの内容」に、リストのように青色部分を追加します。一見複雑にみえますが <MTEntries> の直前と </MTEntries> の前後に加えるだけですので MTEntries という文字列を検索して編集すると良いでしょう。

     :
<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries lastn="30">
     :
   (省略)
     :
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>">&#65308;</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">&#65310;</a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
</MTPaginate>
     :

5.1 表示エントリー数の設定

リスト中の、

<MTPaginateContent max_sections="5">
<MTEntries lastn="30">

にある

max_sections="5"

は、1ページに表示する最大エントリー数を設定します。ここでは5エントリー表示する設定にしています。またその下の、

lastn="30"

は、全ページ合計の表示エントリー数です。ここでは30に設定しています。max_sections が1ページに5エントリーずつ表示する設定になっているので、トップページは計6ページに分割して表示することになります。lastn の値が max_sections より小さいとページ分割が行われませんのでご注意ください。

5.2 スタイルの設定

赤色の div 要素はスタイルを設定するために付与しています。必要に応じて下記のようなCSSをスタイルシート(styles-site.css)に追加してください。

.paginate {
    text-align: center;
    font-size: 9px;
}

設定が完了したら保存し、再構築します。 注:7項の作業を終えるまでページは確認しないでください。

6.ページリンクの設定

ページリンクサンプルリストをそのままご利用になると、ページリンクは画像のようなフォーマットで表示されます。ご覧の通り、各ページへのリンクと現在のページから前後のページへジャンプするのリンク、および全ページを一括表示するリンクがあります。各ページのリンクの現在のページはテキスト表示になります。また一番最初のページは「<」を表示せず、最後のページは「>」を表示しないようにプラグインで制御されています。

サンプルリストではページリンクをページの一番下に表示するように配置していますが、ページの上に表示したい場合は、

     :
<MTPaginate>
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>">&#65308;</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">&#65310;</a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
<MTPaginateContent max_sections="5">
<MTEntries lastn="30">
     :
   (省略)
     :
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
</MTPaginate>
     :

としてください。ページリンクはページの上下両方に付与することも可能です。
注意点としては、必ず MTPaginate タグと MTPaginateContent タグの間に設定してください。誤って MTPaginate の上に設定すると再構築エラーになり、MTPaginateContent の下に貼り付けると再構築はできますが何も表示されなくなりますのでご注意ください。

7.index.html の削除

トップページを index.html という出力ファイル名で再構築したことがある場合、index.html がサーバ上に残ります。このファイルが残っていると、

http://~/

という、最後が "/" で終了するURLの場合、html ファイルを優先に検索します。html ファイルが表示されるとページ分割は正常に動作しません。レンタルサーバの場合は任意のFTPソフトを使って index.html を直接削除してください(Movable Type にはファイルを削除する機能はありません)。

8.PHPのバージョンについて

ページ分割はPHP4.1以下では正常に動作しないようです。詳細については、Cool Gaming ! weBlogさんのカテゴリ、月別アーカイブのページ分割を参照ください。

2005.11.15 追記
MTPaginateIfMultiplePages タグの位置を変更しました。

2007.04.24 追記
プラグインのバージョンアップに伴い、アップロード方法を修正しました。

Comments [72] | Trackbacks [21]

演奏会のお知らせ

November 12,2005 11:50 PM
Category:[音楽]
Tag:[, , ]
Permalink

音楽ネタで恐縮ですが、明日は私の所属するマンドリンアンサンブルのコンサートです。入場無料ですのでご都合がよろしければ是非お越しください。

明日は集合時間が早いので早く寝ます。ご質問お待ちの方、申し訳ございませんが少々お時間ください。

Comments [0] | Trackbacks [0]

小粋空間テンプレートご利用の方へお願い

November 11,2005 11:57 PM
Category:[information, テンプレート]
Tag:[, ]
Permalink

当サイトにお越しくださりありがとうございます。
最近サイトアクセスが不安定になる事象が続いておりまして、ご利用者の皆様には大変ご迷惑をおかけしてしまい申し訳なく存じます。アクセス不具合の対策としてWebサーバ(Apache)のチューニングとアクセス負荷の軽減を考えておりますが、その一環でテンプレートご利用の皆様にお願いがあります。

アクセスログを確認したところ、テンプレートに付属している小粋空間クレジットバナーのURLが

<!-- クレジットバナー -->
       :
http://www.koikikukan.com/images/koikikukan.gif

のままになっている方がかなりいらっしゃるようです。

クレジットバナーURLの変更につきましてはテンプレートのページでお願いしておりますが、URLを変更されない場合、ご自身のサイトを表示すると同時に、クレジットバナー表示のために当サイトへのアクセスが同時に発生します。テンプレートご利用者数の増加に比例して、クレジットバナーへのアクセスも増加しており、現在ログ全体の約15%がバナーへのアクセスで占められています。

ということで、この場をお借りして改めてバナーURL変更のお願いです。

変更方法ですが、IEをお使いであればクレジットバナーの画像を右クリックして「対象をファイルに保存」を選択し、koikikukan.gif というファイル名(他の名称でもかまいません)で保存します。そして保存したファイルをご自身のサーバの任意のディレクトリにアップロードしてください。それからテンプレートに記述されているクレジットバナーのURLを、上記のURLから画像を配置されたURL、例えば index.html と同じディレクトリにアップロードされた場合であれば、

http://ご自身のブログURL/koikikukan.gif

にご変更ください。なお対象のテンプレートはメインページ/カテゴリーアーカイブ/日付アーカイブ/エントリー・アーカイブです。
お手数をかけて申し訳ございませんがサーバ負荷軽減のため、ご協力くださいますようどうぞよろしくお願い致します。

Comments [10] | Trackbacks [2]

JavaScript エラーを解消する

November 10,2005 11:50 PM
Category:[JavaScript]
Tag:[]
Permalink

JavaScriptエラーWindows IE6.0 でページを表示した時、ステータスバー左下に画像のような黄色いアイコンと「ページでエラーが発生しました」という情報が表示されることがあります。これがいわゆる「JavaScript エラー」で JavaScript の実装に問題があることを示しています。
エラーが発生するのは体裁の良いものではなく、場合によってはページが正常に表示されない場合もありますので、できれば解消したいところです。

ということで、JavaScript エラーの解消方法をご紹介します。ただしエラーを解消するには JavaScript の修正を伴うケースが少なくないため、プログラミングが苦手な方については原因発見までとなります(後はスクリプト配布元に問い合わせましょう)。

1.エラー詳細の表示

IEのJavaScriptエラー詳細IEの場合、JavaScript エラーが発生している状態でステータスバーに表示されている部分をダブルクリックすると左のようなダイアログが開き、そこにJavaScript エラーの詳細が表示されます(表示されていない場合は[詳細の表示]をクリックします)。
Firefox であれば [ツール]-[JavaScript コンソール] を選択します。Netscape7.1 は[ツール]-[Web開発]-[JacaScriptコンソール]です。Opera8 は[ツール]-[詳細ツール]-[JavaScriptコンソール]です。
以下、利用者が多く、エラーの確認が一番分かりやすい(と思われる) Firefox によるエラー原因の確認方法を説明します。

2.エラー原因の確認

FirefoxのJavaScriptエラー詳細Firefox で[ツール]-[エラーコンソール]を選択すると画像のようなダイアログが開き、現在のページで発生している JavaScript エラーが表示されます。何も表示されなければそのページに問題はありません(ただし4項に例外を記しています)。
この時、エラーコンソール左上のメニューが[すべて] または [エラー]が選択されている状態にしてください。[警告]や[メッセージ]ではエラーが表示されません。また エラーコンソールを開くと、それまでのページ表示で発生したエラーがすべて表示される可能性があります。この場合はコンソール右側にある[クリア] をクリックして情報を一旦クリアし、ページをリロードすれば現在のページのエラーだけが表示されます。

サンプルでは「func is not defined」というエラーが表示されています。これは 「func というスクリプトを起動しようとしているが、func 自体がみつからない」ということを示すエラーです。このようなエラーが発生した場合は、func というスクリプトが記述されている外部ファイルが正常に読み込まれていないか、あるいは起動元のスクリプト(関数)名が誤っていないか等を確認しましょう。

FirefoxのJavaScriptエラー詳細 また左の「element has no properties」というエラーは、「スクリプトは存在するが処理が誤っている」というエラーです。エラー画面のURL部分をクリックするとエラーとなっているファイルを表示し、エラー発生箇所を反転表示してくれます(下はその抜粋です)。

FirefoxのJavaScriptエラー詳細

具体的には、hogehoge という ID属性のスタイルを非表示にしようとしているのですが、hogehoge という ID属性自体が存在しないため、element という変数には何も設定されません。で、次の行で何も設定されていない変数(=スタイル)のプロパティを制御しようとしているためエラーになります。
この場合はスクリプトに hogehoge という ID属性がページに存在しないケースを考慮する if 文を追加して

function func() {
    element = document.getElementById("hogehoge");
    if (element) {
        element.style.display = 'none';
    }
}

とします。スクリプト修正後、コンソール右側にある[クリア] をクリックして情報を一旦クリアしてからブラウザを更新すればエラーは解消します。

3.外部ファイルが存在しない場合のエラーを発見する

下記リストのように JavaScript を外部ファイルとして読み込む場合があります。

<script type="text/javascript" src="http://www.koikikukan.com/menufolder.js"></script>

この menufolder.js 自体が存在しない場合、外部ファイルに書かれたスクリプトを起動する箇所で JavaScript エラーが発生し、結果的に外部ファイルが正常に読み込まれていないことが分かります。が、外部ファイルを単に読み込むだけで、ファイルに書かれたスクリプトをページで一切使用していない場合、Firefox のコンソールでは正常に読み込まれているかどうかまではチェックできません。

NetscapeのJavaScriptエラー詳細そもそも script タグ自体が冗長なのですが、Netscape7.1 の[ツール]-[Web開発]-[JavaScriptコンソール]を利用すれば、外部ファイルを引き込めない部分でエラーを発見することが可能です。Netscape では左図のように「syntax error」として表示され、リンクをクリックするとファイルが存在しない旨のHTMLソースが表示されます(IE/Firefox/Opera ではエラーは表示されませんでした)。

Netscape であれば2項のエラー解析も Firefox と同様の操作が可能なので、JavaScript エラー解消には Netscape7.1 をお勧めします。

2007.02.02 追記
Firefox の記述を Firefox 2 用に修正しました。

Comments [12] | Trackbacks [1]

「ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニック」発売

November 9,2005 11:50 PM
Category:[書籍]
Tag:[, , , , ]
Permalink

ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニックのエントリーでお知らせしておりました書籍が発売されました。

4774125660ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニック
藤本 壱

技術評論社 2005-11-08
売り上げランキング :

Amazonで詳しく見る
by G-Tools

早速購入致しました。

前回のブログ自由自在 Movable Type 上級カスタマイズ術の紙面が3色?刷りだったので今回もそういう感じかなと思ったら、オールカラーでした。ハウツー本でカラーページものは初級向けという印象がありますが、こちらはやや趣が異なり、Movable Type をカスタマイズされたい方にとっては、この本でほとんどまかなえるのではないかと思われる豊富な情報量です。
Movable Type 本来の機能の説明やMTタグの説明、テンプレートやCSSの変更を中心とした書籍が多い中、ここまでカスタマイズ中心に突っ込んだ解説をされた本は今のところこれしかないでしょう。

折りたたみ・カレンダー関連・スタイルシート切り替え・絵文字表示等の基本的なカスタマイズから、PHPモジュール化、ダイナミックパブリッシング、各種プラグイン、BIGPAPIによる編集画面のカスタマイズ、Moblog、バックアップ方法と、ペット系以外の必要な情報はかなり網羅されています。さらに BlogPeople、MyBlogList、Google Adsense、Amazon アフィリエイトツール、track feed 等のサービスの利用方法も書かれているので、他のブログをみて「このサイドバーにあるのは何だろう?」と、ネットで頑張って調べる手間もかなり省けると思います。

で、以前ご本人より伺っていた通り、当サイトのテンプレート・カスタマイズの紹介と、カスタマイズの説明で当サイトのテンプレートによるページが登場します。この場をお借りしてお礼申し上げます。

Comments [8] | Trackbacks [3]

ミサは

November 8,2005 11:58 PM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [2] | Trackbacks [1]

mt-site.js について(その3:cookie登録の改善)

November 7,2005 11:56 PM
Category:[JavaScript]
Tag:[, ]
Permalink

mt-site.js について(その2:注意事項)の最後で述べた、

コメント投稿フォームの「情報を登録しますか?」チェックボックスのチェックを外すと、mt-site.js の forgetMe が実行され、それまで入力していたコメント情報が消去されてしまいます。お世辞にも使い勝手が良いとは言えないので、別途修正案を提示したいと思います。

の修正案です。これを行う理由は、cookie非登録というチェックを外す操作によるフォーム情報のクリアはユーザが意図しない動作である、というところに基づいています。英語圏では等しいのかもしれませんが少なくとも私はそう感じましたので。

解決策はたいした内容ではありません。管理画面よりテンプレートの mt-site.js を選択し、「テンプレートの内容」にある、

function forgetMe (f) {
    deleteCookie('mtcmtmail', '/', '');
    deleteCookie('mtcmthome', '/', '');
    deleteCookie('mtcmtauth', '/', '');
    f.email.value = '';
    f.author.value = '';
    f.url.value = '';
}

の赤色部分を削除します。

2005.11.18 追記
mt-site.js について認識誤りがあったため本文を修正しました。

Comments [9] | Trackbacks [0]

検索オプションをつける

November 6,2005 11:51 PM
Category:[検索]
Tag:[, , ]
Permalink

検索ページにある「エントリー」「コメント」等のオプション指定方法についてご質問を頂きましたので、本エントリーでご紹介します。

この元ネタは Movable Type に付属している検索機能の、検索結果画面の設定

search_templates/default.tmpl

を利用しています。

まず「エントリー/コメント/両方」をオプション指定するには、検索フォームに下記のリストのように青色部分を追加します。

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<p><input name="search" class="search" size="31" value="" /> <input class="searchButton" type="submit" value="Search" /></p>
<p><input type="radio" name="SearchElement" value="entries" checked="checked" />エントリー
<input type="radio" name="SearchElement" value="comments" />コメント
<input type="radio" name="SearchElement" value="both" />両方</p>
</form>

下記のように label 要素を付与すれば文字の部分をクリックしても選択状態になるので、ユーザビリティが向上します(推奨)。

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<p><input name="search" class="search" size="31" value="" /> <input class="searchButton" type="submit" value="Search" /></p>
<p><input type="radio" id="entries" name="SearchElement" value="entries" checked="checked" /><label for="entries">エントリー</label>
<input type="radio" id="comments" name="SearchElement" value="comments" /><label for="comments">コメント</label>
<input type="radio" id="both" name="SearchElement" value="both" /><label for="both">両方</label></p>
</form>

サイドメニューの検索フォームに追加する場合は、幅を考慮して下記のようなプルダウンメニューにすると良いでしょう。とりあえず当サイトにもつけてみました(タグ・CSSは若干変更しています)。

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<p><input name="search" class="search" size="31" value="" /> <input class="searchButton" type="submit" value="Search" /></p>
<p><select name="SearchElement">
<option value="entries" selected="selected">エントリー</option>
<option value="comments">コメント</option>
<option value="both">両方</option>
</select></p>
</form>

CSS は select に対して下記のように設定します。

select {
    font-size: 10px;
}

検索結果画面と同じように「大文字/小文字を区別」や「正規表現で検索」を設定する場合は、さらに下記のチェックボックスをフォーム内に追加します。

<input type="checkbox" name="CaseSearch" /> 大文字/小文字を区別 <input type="checkbox" name="RegexSearch" /> 正規表現で検索

以上です。
なお、本来の検索結果画面での日本語部分は

<MT_TRANS phrase='xxxxx'>

というフォーマットになっていますが、Movable Type のCGIスクリプトを通さないのであれば、上記サンプルリストのように日本語を直接記述しましょう。

Comments [14] | Trackbacks [3]

mt-site.js について(その2:注意事項)

November 5,2005 11:58 PM
Category:[JavaScript]
Tag:[, ]
Permalink

Movable Type 3.2-ja 以降でデフォルト・テンプレートをご利用になるか、新たにテンプレートを作成される場合、mt-site.js の振る舞いの制約上、いくつか注意する点があります。またコメント・トラックバック関連の表示でいくつかの不具合が確認されていますので、下記の修正あるいは設定を推奨します。

1.cookie登録のチェックボックスを追加

修正の対象はコメント・プレビューテンプレートです。
エントリー・アーカイブには、コメント投稿フォームに cookie 登録用のチェックボックス

この情報を登録しますか?

が存在しますが、コメント・プレビューテンプレートにはこのチェックボックスが存在しません。このチェックボックスが存在しないと、ページを開いた時に

document.comments_form.bakecookie has no properties

という JavaScript エラーが発生します。これは mt-site.js の individualArchivesOnLoad に含まれるコード

if (mtcmtauth || mtcmthome) {
    document.comments_form.bakecookie.checked = true;
} else {
    document.comments_form.bakecookie.checked = false;
}

が実行される時に document.comments_form.bakecookie がみつからないためです。
ということで、本チェックボックス(青色部分)を下記の位置に追加しましょう。

   <p>
      <label for="comment-url">URL: </label>
      <input id="comment-url" name="url" size="30" value="<$MTCommentPreviewURL$>" />
   </p>
   <p>
      <label for="comment-bake-cookie"><input type="checkbox"
         id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
         この情報を登録しますか?</label>
   </p>
</div>

2.コメント関連タグのID属性について

mt-site.js はコメント投稿フォームにある下記のID属性を利用して表示・非表示を制御しています。

  • comments-open
  • comments-open-data
  • name-email
  • comments-open-text
  • comments-open-footer

mt-site.js ではこれらのID属性有無チェックは行っていないため、テンプレートを自作される場合(特に他へ公開される等)はこれらのタグを含むようにしましょう。

3.トラックバック関連タグのID属性について

mt-site.js はトラックバック欄にある下記のID属性を参照して、表示・非表示を制御しています。

  • trackbacks-info

3項と同様、テンプレートを自作される場合等はこれらのタグを含むようにしましょう。

4.その他1(commenter_name.js の削除)

コメント・プレビューテンプレートのヘッダ部分に記述されている

<script type="text/javascript" src="<MTStaticWebPath>js/commenter_name.js"></script>

は不要です。この行が残っているとコメント・プレビュー画面で JavaScript エラーが発生する可能性があるため削除しましょう。

commenter_name.js というファイルは、英語版の初期β版には含まれていましたが、それ以降は含まれていません。また commenter_name.js の内容は mt-site.js に包含されていますので削除しても問題はありません。

公開テンプレートでは現在コメントアウトしていますが、初期のテンプレートでは有効になっている場合があるため、JavaScript エラーになる場合はこの行を削除してください。

5.その他2(cookie登録用チェックボックスの振る舞い)

コメント投稿フォームの「情報を登録しますか?」チェックボックスのチェックを外すと、mt-site.js の forgetMe が実行され、それまで入力していたコメント情報が消去されてしまいます。お世辞にも使い勝手が良いとは言えないので、別途修正案を提示したいと思います。

とりあえず無闇にチェックを外はずないよう気をつけましょう。

Comments [8] | Trackbacks [4]

mt-site.js について(その1:仕組みと動作)

November 4,2005 11:50 PM
Category:[JavaScript]
Tag:[, , ]
Permalink

エントリー・アーカイブやコメント・プレビュー画面のヘッダ部分には、

<script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script>

という設定があります。
この mt-site.js は、エントリー・アーカイブやコメント・プレビュー画面でのコメント・トラックバック欄の表示・非表示および、TypeKey認証時のコメンター情報や投稿フォームの表示を制御するためのものです。

以下、mt-site.js の仕組みおよび動作について説明します。

1.インタフェース

mt-site.js では下記のインタフェース(関数)が定義されています(内部で利用されるインタフェースは省略しています)。

  • rememberMe:cookie に投稿者情報(名前・メールアドレス・URL)を保存
  • forgetMe:cookie から投稿者情報(名前・メールアドレス・URL)を削除し、フォームデータをクリア
  • individualArchivesOnLoad:設定状態によってコメント・トラックバック欄の表示・非表示を制御+cookieからコメント投稿者情報取得
  • writeTypeKeyGreeting:TypeKeyサイン・イン/サイン・アウト情報表示を制御

また、mt-site.js が取得された、つまりHTMLのヘッダに記述された冒頭の script 要素が読み込まれた時点で、

  • commenter_name

が生成(プログラム的には「変数定義」を指します)されます。commenter_name は TypeKey による投稿者のニックネームで、ニックネームを cookie あるいは Movable Type から取得するコードも同時に生成されます(生成契機は2項参照)。このコードも script 要素が読み込まれる契機に実行されます。

2.生成契機

mt-site.js は、テンプレートの再構築を契機に生成されるダイナミックなスクリプトです。ダイナミックな生成を行う理由は、ブログのコメント・トラックバックの設定内容によってスクリプトの振る舞いを変える必要があるためです。

例えば、コメントを「一切受け付けない」という設定にした場合、エントリー・アーカイブのコメント欄は表示されなくなり、コメント・プレビュー画面は当然それ自体にジャンプできなくなります。
これは設定に応じた mt-site.js が再構築によって自動生成され、エントリー・アーカイブを表示する時にコメント投稿フォーム表示させないように mt-site.js が制御しているためです。

mt-site.js は「インデックステンプレート」として登録されており、「インデックス・テンプレートの再構築」を契機に生成されます(メインページではなく「インデックス・テンプレート」であることに注意してください)。設定の変更を行って「インデックス・テンプレートの再構築」が促された場合は、再構築が必要であることを指します(再構築が不要な場合は表示されません)。
それ以外の契機でインデックス・テンプレートの再構築を行う場合は、再構築画面の「すべてを再構築」または「インデックス・テンプレートを再構築」を選択してください。

また設定画面の TypeKey 登録を行い、インデックス・テンプレートを再構築すると、mt-site.js の最後の辺りに TypeKey 投稿者のニックネームを取得する

if ('user-domain' != 'user-domain') {
    document.write('<script src="http://user-domain/mt/mt-comments.cgi?__mode=cmtr_name_js"></script>');
} else {
    commenter_name = getCookie('commenter_name');
}

が生成されます。

user-domain 同士を比較している部分は、実際には MTCGIHost と MTBlogHost が展開された値が設定されます。独自ドメインを取得している場合等には cookie からの取得ができない(ホスト名が異なるため)ので、

http://user-domain/mt/mt-comments.cgi?__mode=cmtr_name_js

が実行されます。ちなみにこのURLを実行すると、

var commenter_name = 'hogehoge';

というレスポンスになります。hogehoge の部分がコメンター情報で、つまりコメンター情報が JavaScript として直接HTMLに表示されるという仕組みです。

3.動作

エントリーアーカイブにおける、TypeKey サイン・インした後の TypeKey 関連情報の表示の流れを説明します(設定画面で TypeKey 登録が完了していることを前提としています)。

3.1 ニックネーム取得

ページが表示されると(厳密にはヘッダの script 要素が実行されると)、mt-site.js に記述された、

if ('user-domain' != 'user-domain') {
    document.write('<script src="http://user-domain/mt/mt-comments.cgi?__mode=cmtr_name_js"></script>');
} else {
    commenter_name = getCookie('commenter_name');
}

が実行されて、cookie あるいは Movable Type より投稿者のニックネームを取得。

3.2 名前・メールアドレスの表示制御

次に、body 要素の individualArchivesOnLoad が実行され、commenter_name が存在する場合は、コメント投稿フォームの名前・メールアドレス欄を非表示に、存在しない場合は表示します。

3.3 サイン・インの表示制御

最後に、投稿フォームの中にある writeTypeKeyGreeting が実行されて、commenter_name が存在する場合は、コメント投稿フォームに

サインインを受け付けました。hogehoge さん。コメントしてください。(サイン・アウト)

と表示し、存在しない場合は、

TypeKey IDを使ってサイン・インしてください。

と表示します。

2005.11.18 追記
本文を修正しました。

Comments [4] | Trackbacks [0]

VIEW ALTTE

November 3,2005 11:50 PM
Category:[小品文]
Tag:[, ]
Permalink

JR東日本の各駅に設置されている「VIEW ALTTE(ビューアルッテ)」、ご存知の方も多いと思います。私はこのコーナーの看板が「VIEW ATMコーナー」と書かれているので、てっきり「VIEWカード」しか使えないと思い込んでいたのですが、先日ふとこのコーナーの前で手荷物を整理していたら、「みずほ銀行のキャッシュカードも使えます」という張り紙が目に入ってきました。

いつも駅から少し離れたところにあるみずほのATMコーナーで下ろしていたので、急いでいる時などは便利かも、と思いました(手数料はかかるようです)。

JR東日本VIEW ALTTEの情報によると、提携カードについては、

  • 郵貯カード
  • 新銀行東京カード
  • みずほ銀行のキャッシュカード
  • 三井住友銀行のキャッシュカード

の4種類について預金(貯金)引出・残高照会が可能なようです。平日は銀行カードがかなり遅い時間(23:00?23:55あたり)まで使えるのがメリットでしょうか。三井住友銀行は10月24日から使えるようになりました。

設置駅や利用詳細は上記のサイトからご覧頂けます。

Comments [0] | Trackbacks [0]

文字実体参照について

November 2,2005 11:50 PM
Category:[ホームページ]
Tag:[, ]
Permalink

HTMLタグやMTタグを画面にそのまま表示する方法です。
例えば、

<MTEntries>

という文字をそのまま入力しても、画面には何も表示されません。これは「<」と「>」で括られた部分をマークアップの開始および終了文字、つまりHTMLタグと誤認してしまうためです。ブラウザ上でこれを表示させるためには、

&lt;MTEntries&gt;

と入力する必要があります。
この置き換えられた「&lt;」や「&gt;」等を「文字実体参照」といいます。分類的には「文字参照」という定義の中に「数値文字参照」と「文字実体参照」という定義が存在します。

文字実体参照

主な(というか、主観的によく使う)文字実体参照は下記の通りです。

文字文字実体参照
<&lt;
>&gt;
&&amp;
"&quot;
半角空白&nbsp;
«&laquo;
»&raquo;
©&copy;

他の文字実体参照は下記にあります。

WEB ARCHIVES REPRINTXHTML 文字実体参照
ばけらの HTML リファレンスHTMLで使える文字実体参照

数値文字参照

「数値文字参照」は、10進数または16進数によって該当文字を参照します。先の例であれば「<」は「&#60;」、「>」は「&#62;」となります。数値実体参照も文字実体参照と同じ効果です。
一覧はネットを検索すればすぐにみつかりますが、下記のページで簡単に文字を数値文字参照に変換することができます。また上記の文字実体参照一覧に掲載されていないものも変換できるので重宝しています。

Software CollectionsHTMLエンティティ化

文字参照の勧め

個人的にはこれらの文字参照を推奨します。理由は、全角文字の「<」や「>」で代用したり、他の文字に置き換えて表示した場合、コピー&ペースト後の修正に手間がかかることと、誤ってそのまま利用した場合に原因が発覚しにくいためです(個人的にこれで一度苦労した経験あり)。

また「&」については文字実体参照を行わなくても主要ブラウザで正常に表示されますが、ページをXHTML1.0として表示する場合、実体参照(&amp;)で記述することが定められています。ブラウザに表示されない箇所で使う場合(フォームのURL等)も実体参照が必要です。

参考サイトは下記です。ありがとうございました。

HTML 4.01仕様書(邦訳)5.3 文字参照
XHTML 1.0(邦訳)W3C勧告 2000年1月26日版

2005.11.04 追記
表に半角空白を追記しました。

2006.12.26 追記
実体参照に誤りがありましたので修正しました。

Comments [3] | Trackbacks [5]

Bcc: を使わずにメールアドレスを非表示にする方法

November 1,2005 11:56 PM
Category:[PC]
Tag:[]
Permalink

複数人に同じ内容のメールアドレスを送信し、かつ送信者に対してメールアドレスを非表示にする場合、Bcc: フィールドを利用するのが一般的ですが、

To: グループ名:メールアドレス1, メールアドレス2, … メールアドレスn;

という書き方があることを知りました。上記のように書くと、実際の送信先の To: フィールドには

To: グループ名:;

と表示されるだけで、後方のメールアドレスは全て非表示になるようです。グループ名は任意の文字列を設定することができます。

これは、

RFC822:6.2. SEMANTICS - 6.2.6. MULTIPLE MAILBOXES

に書かれている仕様ですが、Netscape Mail ではこのような設定はできませんでした。Windowsで対応するMUA(いわゆるメールソフト)はあるのでしょうか。
といっても困っている訳ではありませんが。

Comments [0] | Trackbacks [0]
Now loading...
Introduction
List of "November 2005"
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.02