Top > Movable Type > バージョン別 > 3.11-ja [全て開く]
2004年12月 6日

サイドメニュー折りたたみスクリプト(cookie等改善版)

December 6,2004 2:00 AM
Tag:[]
Permalink

サイドメニュー折りたたみスクリプトを改版致しました。
現在公開中のサイドメニュー折りたたみスクリプト(menufolder.js)は、

  • cookie消費が大きい
  • カスタマイズ性がよくない

という問題がありました。cookieは「1つのコンピュータに対し最大20までしか保持できない」という仕様です。現状の折りたたみスクリプトでは1メニューに対して1cookieを利用しているため、20近いメニューに折りたたみを設定している場合、同一コンピュータで使用している他のcookieが無効になる可能性があります。
今回は cookie を最大2個しか使用しない方式に変更致しました。なお本方式は日頃お世話になっている facet-divers さんよりアドバイス頂きました。この場をお借りしてお礼申し上げます。ありがとうございました。

またカスタマイズ性については、例えばBlogPeople等のメニューでリンク数を表示する場合、aタグを数えてからバナー等の不要なリンク数分をスクリプト内で減算するようにしています(下リスト参照)。

if (idName == "link1") {
    counter = objItems.length - 3;
} else if (idName == "link2") {
         :

が、複数のリンクを追加する場合、ここに id 属性分のプログラムを新たに実装しなければならないため、この設定方法はJavaScriptを書けない方には障壁になります。またその他の設定についてもプログラムを変更しなければならない実装になっており、その部分のカスタマイズについては説明を省いていました。さらに途中で状態保持や動作遅延対処の機能追加を行った関係で、最初からエントリーを追ってカスタマイズを進めて頂くのも非効率的に感じておりました。今回の改版では他の設定も含めてプログラムの先頭で提供する機能のカスタマイズが可能な方式に改善しております。
そういう訳で手順を含めてこのエントリーにまとめました。はじめてご利用になる方もこちらを参照頂ければ幸いです。

折りたたみスクリプトの主な仕様は下記の通りです。

  • サイドバーのメニューを折りたたむことができます。
  • 折りたたみマークをメニュータイトル部分に表示します。折りたたみマークはタイトルの左右または左端・右端のいずれかに表示します。表示位置は設定により切り替えられます。また折りたたみマークは任意の文字に変更できます。
  • メニュー内のリスト数をタイトル部分に表示することができます。リスト数表示・非表示は設定によりメニュー単位で切り替えられます。リスト数はタイトルの左右に表示します。表示位置は設定により切り替えられます。またリスト数を"()"や"[]"等の任意の文字で括ることができます。
  • cookieを利用して折りたたみ状態を保持することができます。また状態保持の有効・無効を設定により切り替えられます。
  • サブカテゴリーのリスト数表示を li タグ数で収集します。また従来の一括表示での収集方法を設定により切り替えられます。

以下設定手順です。なおこれまでの menufolder.js をご利用下さっている方でご利用になる場合、基本的に必要な作業としては新しい menufolder.js への差し替えと2項の設定です。ただし文字コードや id 属性名によっては他の項目についても変更が必要になります。また念のためこれまでの js ファイルもバックアップとして保存しておいてください。

1.menufolder.js ダウンロード

下記のリンクをクリックするとスクリプトのページへジャンプします。そこで menufolder.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合(Shift_JIS/EUC-JP等)は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。scriptタグの設定については3項に記してますのでお試し頂ければ幸いです。

2.menufolder.js の設定内容を修正

ブログの設定内容に合わせてファイルの先頭にある下記の赤字部分を修正します。

// サイドメニュー用折りたたみマーク
var openMarkForSideBarMenu  = '';
var closeMarkForSideBarMenu = '';
 
// 折りたたみマーク挿入位置
// タイトル前に折りたたみマークを配置:true
// タイトル後に折りたたみマークを配置:false
// 左端または右端に折りたたみマークを配置(スタイルシートの設定が必要です):true
var preMarkForSideBarMenu = true;
 
// リスト数表示位置
// タイトル前にリスト数を表示:true
// タイトル後にリスト数を表示:false
var listNumberPosition = true;
 
// リスト数表示を括るマーク
var leftMarkForListNumber = '';
var rightMarkForListNumber = '';
 
// タイトル表示位置補正方向(スタイルシートで左端または右端に配置した場合)
// タイトルを右方向に移動:true
// タイトルを左方向に移動:false
var centeringPosition = true;
 
// タイトル表示位置補正オフセット(スタイルシートで左端または右端に配置した場合)
var offsetForCentering = 2;
 
// リンクメニュー数
// 他にリンク数を減算する必要があるメニューもここに含めてください
var linkNumber = 2;
 
// 各リンクメニューのオフセット値
// 注:id属性名は「linkx(xは数字)」であること
var offsetValue = new Array(linkNumber);
offsetValue[0] = 3;
offsetValue[1] = 2;
 
// トラックバック数の除数
// 注:id属性名は「trackback」であること
var trackbackNumber = 2;
 
// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応:true
// 従来のカテゴリーに対応:false
var subCategoryCount = false;
 
// 状態保持フラグ
// 状態保持を有効にする:true
// 状態保持を無効にする:false
var holdState = true;

設定方法の詳細は下記の通りです。上記リストの青字部分が該当行、赤字が設定値を示しています。

openMarkForSideBarMenu/closeMarkForSideBarMenu

  • 名称:サイドメニュー用折りたたみマーク
  • 用途:サイドメニューのタイトル横に表示する折りたたみ用リンクのマーク
  • 設定値:任意の文字(設定したマークを''で括るように)

preMarkForSideBarMenu

  • 名称:マーク挿入位置
  • 用途:折りたたみマークをタイトルの前後どちらに表示するかを設定します。
  • 設定値: true:タイトルの前に表示/false:タイトルの後に表示。ただしメニューの左端または右端に表示する場合は true を設定(スタイルシートで位置を調整します)

listNumberPosition

  • 名称:リスト数表示位置
  • 用途:リスト数表示位置をタイトルの前後どちらに表示するかを設定します
  • 設定値: true:タイトルの前に表示/false:タイトルの後に表示

leftMarkForListNumber/rightMarkForListNumber

  • 名称:リスト数表示を括るマーク
  • 用途:「left?」には左側の文字('('、'['等)、「right?」には右側の文字(')'、']'等)を設定します。何も設定しない場合はいずれも '' という状態にしてください。また片方だけの設定も可能です。
  • 設定値:任意の文字

centeringPosition

  • 名称:タイトル表示位置補正方向
  • 用途:スタイルシートで折りたたみマークを左端または右端に配置する場合、タイトルがメニュー中央から外れるので、タイトル位置を補正するための方向を設定します。補正する必要がない場合は本項目はそのままの状態にして、次の offsetForCentering の値に「0」を設定してください。
  • 設定値: true:タイトルを左方向に移動/false:タイトルを右方向に移動

offsetForCentering

  • 名称:タイトル表示位置補正オフセット
  • 用途:上記の centeringPosition で補正する方向のオフセットを半角数字で指定します。なお「1」は半角1文字に相当します。
  • 設定値:任意の値。不要な場合は「0」を設定。

linkNumber

  • 名称:リンクメニュー数
  • 用途:BlogPeople・MyBlogList等のリンクリストの数を半角数字で設定します。
  • 設定値:任意の数字(1つであれば「1」)。リンクリストがない場合は「0」。

setValue[x]

  • 名称:各リンクのオフセット数
  • 用途:タイトル左にリスト数を表示する際、a タグの数の合計を表示するのですが、リンクリストの場合はバナー等の計数に不要な a タグが含まれている場合があります。この不要な a タグの数をメニュー毎に設定します。また [x] の部分にはそのメニューが(リンクの中で)何番目に表示されるかを指定します。 1番目に表示されるものはプログラムの都合上 [0] 、2番目に表示されるものは [1] …という具合に設定してください。メニューが表示される順番は画面の左上から右下です。エントリーやカテゴリー等の他のメニューは数に含みません。先に指定した linkNumber で何番目に表示されるかを計算します。linkNumber を「0」に設定した場合はこの設定を変更する必要はありませんので、そのままにしておいてください。
  • 設定値:任意の数字(1つ減算する場合は「1」)

trackbackNumber

  • 名称:トラックバック数の除数
  • 用途:トラックバックのリスト数を表示する場合、aタグの数の合計を表示するのですが、トラックバック先のリンクとトラックバック元のリンクを同時に表示しているとリスト数が倍になってしまいます。この値はその除数を指定するものです。「2」となっている場合はリスト数の合計を2で割ります。
  • 設定値:除数を半角数字で設定

subCategoryCount

  • 名称:カテゴリーリスト数計算方法
  • 用途:カテゴリーリスト数計算方法を li タグ(サブカテゴリー表示)で計数するか、a タグ(従来の一括表示)で計数するかを指定します。
  • 設定値: true:li タグで計数/false:a タグで計数

holdState

  • 名称:状態保持フラグ
  • 用途:折りたたみ状態を cookie に保持する/しないを設定します。「保持」を設定した場合、最後に変更した折りたたみ状態が他のページへのジャンプ時やブラウザ起動時、および更新時に反映されます。
  • 設定値: true:有効/false:無効

設定内容の変更に自信のない方はそのままお使いください(右端に折りたたみマークを設定・リスト数をタイトル前に表示する設定になっています)。その際、6項のスタイルシートは一番最初のものをお使いくださいますようお願い致します。
修正の際にはカスタマイズ箇所以外の部分に全角文字(全角空白)を含まないようお気をつけください。

3.menufolder.js 配置

menufolder.js の修正が終わったら保存し、ローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

4.テンプレートの設定1(menufolder.js のインクルード文追加)

折りたたみを利用する各テンプレートの <head>~</head> の間に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

5.テンプレートの設定2(各メニューに id 属性追加)

下記の要領で、折りたたみたいサイドメニューのタイトルに「id="xxname"」、リストの方に「id="xxlist"」を付与します。"name"と"list"は固定名称です。"xx"の部分にはメニュー毎に異なる名称を付与します(例えばカテゴリーリストは"category"、エントリーは"entry"等)。同じ名称が存在すると正常に動作しませんのでご注意ください。
下記は設定例です。この例と同じように各メニューに青色部分の id 属性を追加してください。

<div class="sidetitle" id="categoryname">
Categories
</div>
 
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>

なおリスト数表示を補正する必要がある BlogPeople や MyBlogList 等のリンクメニューにつきましてはid属性を "linkx?"(xは半角数字)で統一してください。その場合のタイトル部は「id="link1name"」、リスト部は「id="link1list"」という具合になります(複数存在する場合は数字の部分が増えていきます)。

6.テンプレートの設定3(menufolder.js 実行スクリプトを追加)

折りたたみたい各メニューの下(サンプルは5項のカテゴリーリスト)に青色部分のスクリプトを追加します。

<div class="sidetitle" id="categoryname">
Categories
</div>
 
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
 
<script type="text/javascript">
<!--
FoldNavigation('idName','initState',viewListNumber);
//-->
</script>

赤字部分は適宜変更します。それぞれの意味と設定値は下記の通りです。

idName

  • 名称:id属性名
  • 用途:折りたたむメニューのid属性を指定します。
  • 設定値:このスクリプトの直前のメニューのid属性名("name"または"list"を除去した形)

initState

  • 名称:初期状態
  • 用途:ページを最初に表示した時の折りたたみ状態を指定します
  • 設定値: on:開いた状態/off:閉じた状態

viewListNumber

  • 名称:リスト数表示
  • 用途:メニュータイトル横にリスト数の表示・非表示を設定します
  • 設定値: true:表示/false:非表示

例えば、カテゴリーリストメニュー用のid属性に"category"を指定、初期状態は「開く」、リスト数を表示する場合、カテゴリリストメニューの直下に、

<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>
という内容で配置します。

7.スタイルシート設定

スタイルシート(styles-site.css)の .sidetitle の下に下記(注:青色部分のみ)を内容を追加します。以前のものと異なりますが動作的には同じです(多分)。2項の設定パターンによってスタイルシートの設定内容が若干異なりますので該当するものをお選びください。

右端にマークを表示
.sidetitle a.foldmark {
    float: right; /* マークを右端に配置 */
    font-size:9px; /* マークのフォントサイズ */
    padding-right:3px; /* 右端からのパディング */
    text-decoration: none; /* マークの文字装飾(何も表示しない) */
}
左端にマークを表示
.sidetitle a.foldmark {
    float: left; /* マークを左端に配置 */
    font-size:9px; /* マークのフォントサイズ */
    padding-left:3px; /* 左端からのパディング */
    text-decoration: none; /* マークの文字装飾(何も表示しない) */
}
タイトル前にマークを表示
.sidetitle a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    padding-right:3px; /* タイトルとマーク間のパディング */
    text-decoration: none; /* マークの文字装飾(何も表示しない) */
}
タイトル後にマークを表示
.sidetitle a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    padding-left:3px; /* タイトルとマーク間のパディング */
    text-decoration: none; /* マークの文字装飾(何も表示しない) */
}

上記サンプルはそのままでも使える値に設定していますがデザインに応じて適宜変更ください。

2005.06.08 追記
6項の記述を修正しました。

2006.04.04 追記
リストから language 属性を削除しました(HTML4.01/XHTMLで非推奨あるいは廃止されているため)。

Comments [82] | Trackbacks [68]
2004年12月 5日

サイドメニューの折りたたみスクリプト改修中

December 5,2004 3:25 AM
Tag:[]
Permalink

公開中のサイドバー折りたたみスクリプトですが、cookie保持の改善版をただいま鋭意作成中です。本当は土曜日中にエントリーを公開したかったのですが、他の改善も含めて色々と修正していたら間に合わなくなってしまいました。カスタマイズ手順もこれまでのものをまとめて、新たに作り直す予定です。

ということで、かなりゴージャスなスクリプトに生まれ変わって登場する予定です(設定がかえってややこしくなるという噂も…)。乞うご期待ください!

Comments [2] | Trackbacks [0]
2004年12月 1日

カテゴリーアーカイブで全カテゴリーリスト表示の記事修正

December 1,2004 1:20 PM
Tag:[]
Permalink

お詫びです。先日エントリーしたカテゴリーアーカイブで全カテゴリーリストを表示で正規な表示方法があることが判明致しました。

<MTSubCategories>~</MTSubCategories>

<MTTopLevelCategories>~</MTTopLevelCategories>

に置き換えるだけでできました。
この方法はNotebook :: Hibi no Noteさんから頂いたコメントより判明致しました。

ということで該当のエントリーの内容を修正するとともに、誤解を招くカスタマイズ方法を公開したことをこの場をお借りしてお詫び申し上げます。
なおモジュール化によるカスタマイズをされたものにつきましては変更の必要はございません(上記タグを使用する方が本来的ですが変更されても動作は変わりません)。またモジュール化自体につきましてもメリットが多いので、そのままご利用頂ければ幸いです。

Comments [0] | Trackbacks [0]
2004年11月29日

再構築時の500エラーを解消する

November 29,2004 11:50 AM
Tag:[]
Permalink

昨日より爆発的(?)に広がってる話題に便乗してご紹介を。
エントリーが増えてくると再構築(エントリーの新規投稿含む)で500エラーが発生する話をよく耳にします。どうやら BerkeleyDB を使用している場合に発生するようで、その原因に db ディレクトリに配置される fileinfo.db の肥大化(10MByte以上とか)が挙げられていました。このファイルにはサイトに配置されているファイル情報等が記録されており再構築時にこのファイルが更新されますが、冗長なファイル情報が残ってしまうみたいです。
肥大化の技術的な原因はogawaさんの言葉を引用させて頂くと、すでにある fileinfo.db を remove してから(データを)追加すべき処理で、

  • remove してもその分の BerkeleyDB の空き領域が開放されない
  • remove しているがうまく削除できていない

ということで、この両方の相乗効果でサイズが肥大化しているようです。
以下参照および関連記事です。ありがとうございました。

参照記事
Magic White500エラーと投稿時遅延解消法/500エラーと投稿時遅延解消法その2
我楽新規エントリー投稿時に500エラー。(泣)
 
上記から参照している元記事
TITO's Web PageMovable Type「fileinfo.db」の肥大化
 
リンクサイトで対処された方々(不足ご容赦ください)
V.J.Catkick@fileinfo.db を削除する
やむやむ「fileinfo.db」 のスリム化
体験手記レポート部エントリー投稿時に500エラーが出るのをどうにかする方法

対処については当初「fileinfo.db を手動削除」という手段(バックアップ要保存)が出回ってましたが、 Ogawa::Memoranda さんが削除用スクリプト(下記)を速攻で作成くださいました。個人的にはこちらのスクリプトを使用されることを推奨します(2004.11.30 プラグイン化されております)。

対処用スクリプト
Ogawa::Memorandamt-shrinkfinfo.cgi
mt-shrinkfinfo.cgi詳細は上記サイトを参照ください。なおこのスクリプトを実行し、成功すると下記のような画面が表示され、fileinfo.db のサイズが適正なサイズに縮小されます。 私もありがたく使わせて頂きます。ありがとうございました。

追記:fileinfo.db のサイズを管理画面に表示する方法を

ShrinkFInfo Plugin で fileinfo.db サイズを表示する

に掲載しました。

2004.11.30 追記
プラグインが提供されまして、管理画面からのクリックで実行できるようになりました。設定方法を簡単に記しておきます。詳細は先のリンクまたはMagic Whitemt-shrinkfinfo.cgiがプラグインに。を参照ください。

  • mt.cfg の DataSource を相対パスから絶対パスに修正。
  • ShrinkFInfo.zipをダウンロード、解凍。
  • 解凍した「ShrinkFInfo」をフォルダごと plugins フォルダ内に配置(レンタルサーバの場合、パーミッションの設定がありますのでご注意ください)。

設定は以上です。管理画面にを開くとShrinkFInfo Plugin が表示されているはずですので、そこをクリックすればCGIが実行されます。

2004.12.11 追記
fileinfo.db のサイズを表示する方法を追記しました。

Comments [16] | Trackbacks [5]
2004年11月27日

コメント投稿時のPerlエラーを解消する

November 27,2004 1:17 AM
Tag:[]
Permalink

私のウェブログは自宅サーバで運用しています。OSは Windows XP です。
で、当初はそれほどでもなかった(というか皆無)Perlのエラーダイアログが、3.11にアップグレードした辺りから画面に5?10枚/日ほど表示されるようになりました。どうもコメント投稿等やエントリー投稿が引き金になっているようです。自分のPCでコメントを投稿しても発生します。またコメント投稿等も正常終了しない(応答が返ってこない)ことがしばしばありました。そのまま放っておくとコメントが二重投稿されてしまうケースもあるようで投稿された方には大変ご迷惑をおかけ致しました。

時間が経過してもいっこうに回復する気配もない(というか待ってて直るはずもない)ので、さすがに困りました。サイトを検索してもそれらしき情報がみつかりません。Perlのバージョンを入れ替えようか、または Movable Type を新規インストールにしようかと策を講じておりました。
が、しつこくサイトを検索していたところようやく下記の記事にたどり着きました。

Skip Factory - Blogコメントのエラー修正しました
Movable Type 3.x 導入手順コメントの投稿 未登録許可の27番目のコメント

対処は mt.cfg に下記の1行を追加するというものです。

LaunchBackgroundTasks 0

記事と私の事象は微妙に異なるようですが、「WindowsのPerlでは対応していない機能がある」という文言になんとなくピンときて(笑)、この設定を行ってみることにしました。デフォルトの mt.cfg ではこの値に関する記述はありませんので(追記:記述がないのは 3.0D の mt.cfg です)ファイルの一番下にちょろっと追加。ちなみにこのオプションについては

Movable Type ユーザー・マニュアル:設定ガイド

の下から6番目に説明があります。下記は該当部分の抜粋です。

LaunchBackgroundTasks
タスクの中には、デフォルトで、バックグラウンドで実行されているものもあります。 この仕組みによって、Movable Typeがたとえば再構築など重要なタスクを実行している間、ユーザーや別のソフトウエアはアプリケーションを継続して使うことができます。 ただしこの機能はホスティング環境によっては機能しないこともあります。 効果のない機能がある場合は、LaunchBackgroundTasks 0 を設定してみてください。

具体的な原因は「(Movable Typeが使用する)PerlIS.DLL がfork関数に対応していない(実装されていない)ためにエラーが発生する」ということらしいです。forkというのは簡単に申しますと、いくつかのプログラムを同時に走らせるためのもので、同時に走らせることで処理を早く終わらせられます。ちなみにforkを行っているのは

lib/MT/Util.pm

の1000行目辺りにある、下記関数の青字部分1ヶ所だけです。

sub start_background_task {
    my ($func) = @_;
    if (!launch_background_tasks()) { $func->() }
    else {
        $| = 1;            # Flush open filehandles
        my $pid = fork();
        if (!$pid) {
            # child
            close STDIN; open STDIN, "</dev/null";
            close STDOUT; open STDOUT, ">/dev/null"; 
 
            MT::Object->driver->init();
 
            $func->();
            CORE::exit(0) if defined($pid) && !$pid;
        } else {
            MT::Object->driver->init();
        }
    }
}

この対処を実施してからすでに1週間以上経つのですが、エラーは発生しなくなりました。コメントも(やや時間がかかりますが)正常終了します。その代償として新規エントリーの投稿にえらく時間がかかりようになりました(笑)。おそらく並列処理をやめて直列で処理を行っている分、時間がプラスされたのでしょう。コメント投稿も完了するまでに数十秒ほどかかるようです。申し訳ございませんが気長にお待ちになってやってください。

追記:本事象は3.0Dからのアップグレードによるものでした。動作が変化した原因につきましては(o)さんから頂いたコメントを参照ください。

Comments [2] | Trackbacks [0]
2004年11月26日

個別エントリーアーカイブでの文字化けの原因

November 26,2004 1:38 AM
Tag:[]
Permalink

個別エントリーアーカイブでのコメント投稿後やTypeKey認証後の文字化けを解消する記事をこちらに投稿しましたが、Daily noteさんのアドバイスより「『続きを読む』を折りたたむスクリプトを入れると文字化けする」とのことで(確認&ご連絡ありがとうございました)、早速試験サイトで試してみました。

実験結果は、試験サイトでも「続きを読む」がある記事へコメントを投稿すると100%文字化けしました。さらに続きを読むの部分(HTML/JavaScript)を色々切り分けた結果、JavaScriptの ShowHide 関数

function showHide(entryID, entryLink, htmlObj) {
    extTextDivID = ('Text' + (entryID));
    extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
        if( document.getElementById(extTextDivID).style.display ) {
            if( entryLink != 0 ) {
                document.getElementById(extTextDivID).style.display = "block";
                document.getElementById(extLinkDivID).style.display = "none";
                htmlObj.blur();
            } else { 
                document.getElementById(extTextDivID).style.display = "none";
                document.getElementById(extLinkDivID).style.display = "block";
            }
        } else {
            location.href = entryLink;
            return true;
        }
    } else {
        location.href = entryLink;
        return true;
    }
}

この中の赤色部分

document.getElementById(extTextDivID).style.display

の記述で文字化けが発生しているようです(この行と下の同じような記述を削除すると発生しませんでした)。さらに厳密に言うと、

document.getElementById(extTextDivID).style

で発生します。つまりHTMLのstyle属性を参照するところで文字化けを引き起こしています(getElementById までであれば発生しません)。このJavaScriptは「続きを読む」をクリックしないと起動されない(onclick属性で起動)スクリプトなのですが、投稿後のレンダリング時点で文字化けを発生させます。

なお根本的な解決案は現在のところ見つかっておりません(ということで先の対処が生まれました)。個別アーカイブに「続きを読む」をご利用の方にはご迷惑おかけ致しまして大変申し訳ございません。この場をお借りしてお詫び申し上げます。m(__)m

Comments [12] | Trackbacks [0]
2004年11月25日

フレーム利用時に表示がずれる不具合を解消する

November 25,2004 1:30 AM
Tag:[]
Permalink
フレーム利用時に表示がずれる不具合を解消 可変3カラムの公開テンプレートをフレームに収めると、右サイドバーの各メニューがスクロールバー側に寄った状態で表示されます。またウィンドウをリサイズをするとメニューが中央カラム側にずれてしまい(図)、センタリングされません。なお表示はブラウザやHTMLによって異なるかも知れません。

対処としてはウェブログを表示する frame タグに scrolling 属性(青色部分)を付与すると解消します。この属性を付与することで解消するということはフレームにした場合、レンダリングでスクロールバーの存在を適正に認識できていないことが原因と考えられます。

<frame src="http://?/" scrolling="yes">

scrolling 属性には

  • yes:常に表示
  • no:常に非表示
  • auto:自動

の3種類があります。「no」は対象外として、正常にレンダリングされるのは「yes」のみです。「auto」はデフォルト値のため、記述しても設定しない場合と同じ効果しか得られません。なお「yes」に設定するためスクロールが不要な場合もスクロールバーエリアが表示されます。予めご容赦ください。

Comments [10] | Trackbacks [0]
2004年11月23日

.htaccessによる文字化け対策

November 23,2004 2:25 PM
Tag:[]
Permalink

TypeKey認証やコメント投稿の後で文字化けが発生するという質問を最近何件か頂いています。TypeKeyの文字化けについてはHTTPリダイレクトを伴っており、ページ直前のHTTPレスポンスで返却されたcharsetを見てしまうのが文字化けの要因と思われます(発生するサイトとしないサイトの違いは不明です)。下記のサイトに解説があります。

エンタープライズ:Linux Tipsリダイレクト先で文字化けしてしまう

ただしコメント投稿後の文字化けは原因不明(リダイレクトではないという認識)です。

上記のサイトにも少し書かれていますが、リダイレクトによる文字化け解消について .htaccess を利用する方法がありましたのでご紹介します。

1..htaccess ファイル作成
まず .htaccess というファイルをテキストエディタ等で新たに作成し(既に存在する場合はその中)、そこに下記のいずれかの青字部分を記述します(とりあえず上の方をお試しください)。記述例は文字コードが UTF-8 でファイルの拡張子が .html の場合です。

明示的に文字セットを指定していない応答に追加されるデフォルトの文字セット
AddDefaultCharset UTF-8
ファイル名の拡張子を指定されたコンテントタイプにマップ
AddType "text/html; charset=UTF-8" .html

上の設定はHTTPヘッダで charset が設定されていない時に文字コードを指定するものです。
下の設定は拡張子に対応するコンテントタイプ(MIMEタイプ)の設定が目的です。phpファイルも対象に含む場合は

AddType "text/html; charset=UTF-8" .html .php

としてください(拡張子の間は半角空白、拡張子のピリオドはなくてもいいようです)。
記述した行の最後は改行してください。文字コードの部分は「EUC-JP」「Shift_JIS」等、使用されている文字コードに適宜修正ください。
技術的な話をすると、上記はいずれも Apache ディレクティブですのでHTTPサーバに Apache が使われていることが前提になります(多分この文章は無視されても大丈夫だと思います…)。

2.ファイル配置
.htaccess を配置(アップロード)します。このファイルの内容は、ファイルを配置したディレクトリおよびそのサブディレクトリ全てに適用されますので(サイトのトップディレクトリにあると思われる)index.htmlが配置されているディレクトリに配置します。

以上です。なお上記の対策は動作を確認できてないこともあり、完全な不具合解消を保証するものではありませんので予めご了承ください。また本設定がコメント投稿後のページ表示にも適用されればいいのですが(CGIからの出力は一旦HTTPアクセスが行われると思っているので適用されそう?)、そうでなければカスタマイズされたページのどこかに文字化けの要因が潜んでいると考えられます(感覚的にはHTMLタグの文法エラー等ですが改善性については未知です)ので、申し訳ございませんが「デフォルトのテンプレートから少しずつカスタマイズして動作をチェックしてみてください」という原始的なアドバイスしかできません。併せてご了承願います。
↑一応動作確認できているサイトあります。なお文字化けの原因は「続きを読む」を折りたたむスクリプトにあるようでした。ご利用中の方にはご迷惑おかけして大変申し訳ございません。とり急ぎお詫びまで。

Comments [31] | Trackbacks [7]
2004年11月17日

MTIfNonZeroタグでコメント表示方法を制御する

November 17,2004 1:35 AM
Tag:[]
Permalink

個別エントリーアーカイブの中で、「トラックバック数が0件でなければトラックバックを表示する」ために利用する

MTIfNonZero

というタグが使われています。このタグを使うとちょっとした条件分岐ができ、ページへの表示を制御することができます。
参照サイトは下記です。ありがとうございました。

Magic WhiteMTIfNonZeroタグ利用してみました。
HINAGATAマニュアルに無いMTIfNonZeroタグ

このエントリーでは MTIfNonZero タグを利用して、コメント投稿数が0件の時に

  • 個別エントリーアーカイブの「コメント」タイトルを表示しない
  • 個別エントリーアーカイブの「コメント」タイトル下に「コメントがありません」という表示をする

の2通りの方法を紹介します。私のサイトは下の方法でカスタマイズしてみました。

「コメント」タイトルを表示しない
個別エントリーアーカイブテンプレートの下記の部分に青色のタグを挿入すれば、コメントが0件の場合にコメントのタイトルを非表示にすることができます。</MTIfNonZero> の挿入位置は「コメント」と書かれた次の行でも問題ないと思いますが、コメント表示タグ全体を括らないのはスッキリしないので個人的には下記を推奨します。

        :
<MTEntryIfAllowComments>
<MTIfNonZero tag="MTEntryCommentCount">
<div id="comments" class="comments-head"><a name="comments"></a>コメント</div>
 
<MTComments>
<a name="<$MTCommentID$>"></a>
<div id="c<$MTCommentID$>" class="comments-body">
<$MTCommentBody$>
<div class="comments-post">Posted by <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> <MTCommentAuthorIdentity> at <$MTCommentDate$></div>
</div>
</MTComments>
</MTIfNonZero>
<MTEntryIfCommentsOpen>
        :

意味的には、MTIfNonZero の tag属性 MTEntryCommentCount(=エントリーのコメント数)が0でなければ <MTIfNonZero>~</MTIfNonZero> で囲まれた部分を表示(厳密には有効に)する、というものです。

「コメント」タイトル下に「コメントがありません」という表示をする
上記同様、青色のタグを該当位置に挿入すれば、コメントが0件の場合にコメントのタイトル下に「コメントがありません。」というメッセージを表示することができます。タイトルはいずれの場合も表示するので MTIfNonZero タグの中に入れないようにします。divタグは公開テンプレート用に併せて書いてありますので適宜変更してください。

        :
<MTEntryIfAllowComments>
<div id="comments" class="comments-head"><a name="comments"></a>コメント</div>
<MTIfNonZero tag="MTEntryCommentCount">
<MTComments>
<a name="<$MTCommentID$>"></a>
<div id="c<$MTCommentID$>" class="comments-body">
<$MTCommentBody$>
<div class="comments-post">Posted by <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$> <MTCommentAuthorIdentity> at <$MTCommentDate$></div>
</div>
</MTComments>
<MTElse>
<div class="comments-body">コメントはまだありません。</div>
</MTElse>
</MTIfNonZero>
<MTEntryIfCommentsOpen>
        :

この処理をおおざっぱに書くと

<MTIfNonZero tag="MTEntryCommentCount">
            :
  コメントが0件でない時の処理を記述
            :
<MTElse>
            :
  コメントが0件の時の処理を記述
            :
</MTElse>
</MTIfNonZero>

という感じになります。MTElse というタグは MTIfNonZero の条件にマッチしなかった場合のものを有効にするためのタグです。

Comments [4] | Trackbacks [3]
2004年11月16日

コメントのリンクを新しいウィンドウで表示する

November 16,2004 12:15 AM
Tag:[]
Permalink

Movable Type のコメントに挿入するHTMLタグはサニタイジングの関係で使用が制限されています。デフォルトで使用可能なタグ(属性含む)は

a href、b、br、p、strong、em、ul、li、blockquote

です。つまり a タグで許容されている属性は href のみですので、target 属性を付与しても Movable Type が自動的に target 属性を削除するため別ウィンドウで表示することはできません。

下記に target 属性を有効にするための変更方法を記します。なおこの機能を利用する場合の注意事項として、コメントのリンクを有効にする方法は

  1. http://? を直接コメントとして記述したものに自動的にリンク(=aタグ)を付与する
  2. <a href="http://?" target="_blank">~</a>を手入力してリンクする

の2通りがありますが、両者は排他的ですのでいずれかの機能しか有効にできません。

リンク設定左図は管理画面の設定箇所の抜粋です。図のように上の「コメントでのHTMLの利用を許可する」をチェックすればHTMLタグが利用できます。下の「URLを自動的にリンクにする」をチェックすればコメントに記したURLに自動的にリンクが与えられます。上にチェックがついている場合、下のチェックは無効になります。これらを踏まえてどちらのカスタマイズを実施するかを選択ください。

1.の場合

1.1 target 属性を許可する(方法その1)

カスタマイズ先と同じ画面で最初の「一般的な設定」の「除去機能」のラジオボタンより「カスタマイズ」を選択し、ラジオボタンの右側にあるテキストボックスに下記の文字列をそのまま設定し、「保存」をクリックします。再構築は不要です。図のような設定状態になります。
a href,a href target,b,br/,p,strong,em,ul,li,blockquote

1.2 target 属性を許可する(方法その2)

mt.cfgの358行目の下記の部分を変更する

変更前

# GlobalSanitizeSpec br/,p

変更後(先頭の"#"および半角空白を削除)

GlobalSanitizeSpec a href,a href target,b,br/,p,strong,em,ul,li,blockquote

カスタマイズはどちらか一方で大丈夫です。なおいずれの方法も他のタグを事前に追加されている場合は引き継いでください(上記はデフォルトの設定に target 属性を追加しているだけです)。

・リンクに target 属性を自動付与する
上記のいずれかの対処に加え、

lib/MT/Util.pm

の500行目辺りにある下記の関数に青色部分を追加してください。
これでコメント内の http://? と書かれたURLにtarget属性付きのリンクが自動で付与されます。

sub munge_comment {
    my($text, $blog) = @_;
    unless ($blog->allow_comment_html) {
        $text = remove_html($text);
        if ($blog->autolink_urls) {
            $text =~ s!(http://\S+)!<a href="$1" target="_blank">$1</a>!g;
        }
    }
    $text;
}

2.の場合

1項の「target属性を有効にする」のいずれかを実施すれば、コメント内に記述した a タグの target 属性指定が有効になります。なお1の「target 属性を自動付与する」を実施しても自動付与はされませんので、手入力で target 属性を指定してください。
Comments [6] | Trackbacks [4]
2004年11月14日

コメント・プレビュー画面の typo 修正

November 14,2004 11:00 AM
Tag:[]
Permalink

やむやむ:さえらさんから頂いたご質問の対処です(素晴らしい校正スキルに感謝します!)
コメントでHTMLを利用可能にしている場合、個別エントリーアーカイブのコメント欄に

コメント: (書式を変更するような一部のHTMLタグを使うことができます)

と表示されますが、コメント・プレビュー画面およびコメント・エラー画面では

コメント: (スタイル用の HTLM タグが使えます)

と、明らかな typo が存在します。これを修正する方法ですが、

lib/MT/L10N/ja.pm

の1314行目の赤字部分

'(You may use HTML tags for style)' => '(スタイル用の HTLM タグが使えます)',

を(書くまでもありませんが)青色

'(You may use HTML tags for style)' => '(スタイル用の HTML タグが使えます)',

に修正します。いっそ個別エントリーアーカイブと表示内容を揃えた方が良いかも知れません。
レンタルサーバの方は該当ファイルを一旦PCのローカルファイルとしてダウンロードし修正(保存時の文字コードにお気をつけください)、再度アップロードという手順です。再構築は不要です。

日本語化に関する情報はこのファイルに集約されています。

Comments [7] | Trackbacks [2]
2004年11月12日

コメント欄とトラックバック欄にメッセージ追加

November 12,2004 12:25 AM
Tag:[]
Permalink
コメントとトラックバックにメッセージ追加

個別アーカイブのコメント投稿欄の下とトラックバックURLの下にメッセージを追加しました。他の方のサイトでもコメント投稿についての説明を結構みかけるので、私もそれに倣ってみました。

メッセージは投稿・送信時の注意点を記してますが、目的は重複に対して「気にしなくていいですよ」という内容です。またトラックバックは「タイムアウト=送信先に届いていない」と思われている方が少なくないので、以前のタイムアウト記事へのリンクも追加してみました。記載内容は運用状況によって適宜変更したいと思います。

批判的なコメントやトラックバックはほとんどゼロで、おかげさまでウェブログを楽しく運営させて頂いてます。そういった意味ではコメントやトラックバックの重複は全く問題でなく、消去するのもたいした手間ではございませんので(投稿者の方は気になるかも知れませんが)、どしどしお送りください。

Comments [2] | Trackbacks [0]
2004年11月10日

個別エントリーアーカイブにコメント・トラックバックのアンカー追加

November 10,2004 12:50 PM
Tag:[]
Permalink

当サイトのメインページ記事下にある「Comments」「Trackbacks」のリンクに対応する個別エントリーアーカイブ内のアンカータグが欠落していましたので追加しました。

      :
<MTEntryIfAllowPings>
<a id="trackbacks" name="trackbacks"></a>
      :
<MTEntryIfAllowComments>
<div id="comments" class="comments-head">
<a id="comments" name="comments"></a>
コメント
</div>
      :

これで対応する位置へジャンプするようになりました。なお公開テンプレートには影響ありませんは別途修正致します(初期のものを除く)。自分の使っているテンプレートが未整理な証拠です。

(お勉強モード)先のタグはメインページ・カテゴリーアーカイブページ・日付アーカイブページの下記の青色部分に対応しています。

      :
<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">Comments</a> [<$MTEntryCommentCount$>]
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">Trackbacks</a> [<$MTEntryTrackbackCount$>]
</MTEntryIfAllowPings>
      :

期待通りにジャンプしない場合はこの対応が誤っている可能性があります。なおページが指定位置までスクロールできない場合もトップや中途半端な位置にジャンプします。

参考までに、公開テンプレートのメインページ・カテゴリーアーカイブページ・日付アーカイブページからの個別エントリーアーカイブページへの各リンク動作は下記のようになっています(多分)。

メインページ・アーカイブページ(カテゴリー・日別)個別エントリーアーカイブページのジャンプ先
記事下の時間トップへ
記事下のComments「コメント」へ
記事下のTrackbacks「トラックバック」へ
サイドメニュー・RecentCommentsの記事名トップへ
サイドメニュー・RecentCommentsの記事に対する投稿者該当コメント位置へ

追記
我楽さんからのアドバイスでXHTMLの記法に準拠し、id属性を追加しました。ありがとうございました。

Comments [5] | Trackbacks [1]
2004年11月 9日

保存したエントリーをすぐに確認する

November 9,2004 12:43 PM
Tag:[]
Permalink

投稿したエントリーがどのようにページに反映されたか確認する時、私は管理メニューの「サイトの確認」をクリックしてウェブログのトップページにジャンプします(別のブラウザでウェブログを開いておいて更新、という時もあります)。新しいエントリーはそれで問題ないのですが、古い記事を修正した時は該当のページまで辿っていくのが結構大変です。
つまり

「エントリーを保存したらすぐに該当ページを表示できないだろうか?」

という不満が常々あったのですが、3.11で改善されてました。

「エントリーの確認」というリンク新規エントリーであれば保存後の編集画面右上、投稿済みのエントリーであれば編集画面右上に「エントリーの確認」というリンクが追加されています。リンクをクリックすると(デフォルトの設定であれば)個別アーカイブにジャンプします。いきなり便利になりました。 「もしかして3.01もあったのか?」と思い、念のため確認したところ何も出てきませんでした。

いや?、全く気がついていませんでした…(灯台もと暗し、みたいな)。

Comments [3] | Trackbacks [2]

Feed Validator警告除去(Onclick属性削除プラグイン)

November 9,2004 12:30 AM
Tag:[]
Permalink
警告表示Atomフィード(atom.xml)を Validationサービスのひとつである Feed Validator for Atom and RSS でValidate(検証)したところ、画像のような onclick に関する警告が表示されました。画像をポップアップして表示する記事のタグでひっかかっているようです。
Atom Congratulations!画面なお単なる「警告」なので一応画面下の方に「Congratulations!」が表示されていました。とはいえスッキリしたものではありません。
RSS Congratulations!画面Movable Typeではメタデータフォーマット(RSS(1.0/2.0)/Atom/RSD)がデフォルトで用意されています(RSDは用途がちょっと異なるようです)。それぞれに対応したテンプレートもあり、他のアーカイブページと同様、エントリーの投稿等を契機に Movable Type のルートフォルダ配下に、RSS/Atom/RSDに対応するXML形式のファイルがそれぞれ更新されます。
先のValidationサービスでRSS1.0(index.rdf)、RSS2.0(index.xml)、Atom(atom.xml)のURLを入力して「Validate」をクリックすれば自動的に正常性を検証してくれます。「RSS」や「Atom」のバナーを貼りつけているサイトは、それぞれのページがValidationサ?ビスでValid(妥当な)となった証として表示されている訳です。
ちなみに同じページのRSSフィード(1.0/2.0)はValidでした。RSSでも同様の事象が発生するらしいのですが、これはMovable Typeが用意しているAtom用テンプレートがcontent要素を用いて記事をCDATAとして全て引き込んでいるためでしょう(RSS用デフォルトテンプレートにはcontent要素が付与されていません)。

話を戻しまして、先の警告について検索すると下記のサイトで対処プラグインを1ヶ月ほど前に公開されておりまして、早速インストールさせて頂きました。ありがとうございました。

nlog(n)Onclick 属性削除プラグイン

このプラグインは指定のタグで挟まれた箇所のonclick属性およびonkeypress属性を削除してくれます。
以下記事を引用させて頂いてのインストールおよび設定手順メモです。詳細につきましては上記サイトを参照ください。

  • 先のサイトより「Onclick 属性削除プラグイン」をダウンロード
  • アーカイブを解凍してその中の removeonclick.pl を plugins フォルダに配置
  • 「Atomフィード」テンプレート(3.01はAtom Index)の編集画面で青色部分のタグを追加
          :
<content type="text/html" mode="escaped" xml:lang="<$MTDefaultLanguage$>" xml:base="<$MTBlogURL encode_xml="1"$>">
<MTCRemoveOnclick>
<$MTEntryBody encode_xml="1"$>
<$MTEntryMore encode_xml="1"$>
</MTCRemoveOnclick>
</content>
          :
  • 保存・再構築
Valid画面これで再度ValidateしたところValidになりました。プラグインの本来の目的はRSSリーダーが正常に取得できるRSSフィードやAtomフィードを提供することです(と勝手に断定していますがRSSリーダーは使っていないので警告による影響は?ですので定かではありません)。 このプラグインはcontent要素(その中に本文が含まれる、つまりonclickやonkeypress属性が含まれる)を用いたフィードに効果的です。
Comments [0] | Trackbacks [0]
2004年11月 5日

TypeKeyの使い方

November 5,2004 1:50 PM
Tag:[]
Permalink

TypeKeyシックス・アパートのサービスのひとつで、ウェブログにコメントする時に利用するIDです。TypeKeyを利用することでウェブログはコメントスパムを防止することが可能になります(現実にはコメント投稿の利便性を考慮しているサイトが多く、結果的に完全な防止には至らないようです)。
すでにあちこちのサイトで書かれているようですが、このエントリーではTypeKeyについて

  • アカウント取得
  • TypeKey認証によるコメント投稿が可能なサイトにする
  • TypeKey認証によるコメント投稿

の3つの項目に分けて記します。なお機能を完全に把握できている訳ではございませんので認識誤り等ございましたら予めご了承ください。

TypeKeyアカウント取得

TypeKeyを利用する人が共通して行う作業として「TypeKeyアカウントの取得」があります。
TypeKeyウェブサイトのTypeKeyへのよくある質問に「Type Keyアカウントの取得方法」が掲載されておりますので参照ください。TypeKeyの登録は無料です。

TypeKey認証によるコメント投稿が可能なサイトにする

TypeKeyウェブサイトまずTypekeyウェブサイトへウェブログのURL登録を行います。 上記で取得したアカウントでTypeKeyウェブサイトにログインし、ログイン画面で「アカウント設定」タブ内の一番下に表示されている「ウェブログの設定」にサイトのURL(注:mt.cfgのCGIPathに設定したURL)を登録して「保存」をクリックしてください。またここに表示されている「TypeKeyトークン(20文字のランダムな半角英数文字)」を次の設定で使いますので画面を閉じる前にコピーしてやってください。 ウェブログは1つのアカウントで同時に5サイトまで登録することができます。
Typekey認証を有効にする設定次にウェブログでTypekey認証を有効にする設定をします。 Movable Type管理メニューの「ウェブログの設定」クリック→次ページ右上の「設定」をクリック→次ページ真中辺りにある「コメントの設定」の「登録されたコメンターのコメントは許可する」をチェックします。 チェックするとサブメニューが開きますので、その中の「TypeKeyトークン」を設定します。ここに先程コピーしたTypeKeyトークンを入力・保存し、サイトの再構築を行ってください。少なくとも個別エントリーアーカイブの再構築をしないと設定が反映されないようです。他のチェック項目は任意です。 なお先のTypeKeyウェブサイト登録との順序性はありませんのでどちらの作業から行っても大丈夫です。

TypeKey認証によるコメント投稿

Movable Typeを用いたウェブログ(注:TypeKeyは他のアプリケーションでも利用可能みたいです)で個別エントリーアーカイブのコメント入力欄の上に

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

とあるのをよく見かけると思います。これを利用することでTypekey認証によるコメント投稿が可能になります。TypeKey認証を行えば名前・メールアドレスの入力は不要です。この表示がないサイトはTypeKey認証によるコメント投稿を利用していないか、管理画面でTypeKey設定を行っていても(多分)3.0以前のバージョンの個別エントリーアーカイブテンプレートを用いているためページに反映されていない可能性があります。

サイン・イン画面サイン・インします。 このリンクをクリックすると左のTypeKeyログイン画面にジャンプします。サイン・インはコメントを入力する前に実施してください。サイン・イン前に入力したコメントはTypeKey認証後反映されません。

TypeKeyアカウントを取得されているのであればログイン画面からログインすることでコメント画面に戻り、先の表示が

サイン・インを確認しました、hogehoge. さん。コメントしてください。 (サイン・アウト)

に変わります。これでTypeKey認証されましたのでコメントを投稿します。投稿したコメントの投稿者欄にはTypeKeyによる投稿を行ったコメンターマークコメンターマークが表示されます。TypeKey認証を終了する場合は上記の「サイン・アウト」をクリックします。

サイン・イン画面(メールアドレス入力要求有)サイト管理者が管理メニューの「ウェブログの設定」の中で「TypeKey からメールアドレスを取得する」をチェックしている場合は、サイン・イン時のTypeKeyログイン時に画面のようにメールアドレスの送信を求められます。「いいえ」を選択するとコメント投稿はできません。
サイン・インNG画面サイトのTypeKey設定が適正に行われていない場合、サイン・イン時のTyp