TopMovable Typeカスタマイズその他 > 2005年8月
2005年8月30日

Tag Cloud のページを作る

TagsページTag Cloud(左画像)のページを作るカスタマイズです。

注:3.3 以降はエントリー・タグが標準機能として用意されていますので、本カスタマイズを行わなくても Tag Cloud のページを作ることができます。

当サイトを訪れてくださるカスタマイズ志向の方であれば下記のページ、一度はご覧になったことがあると思います。

Ogawa::Memoranda:Tags

そのページにある説明を引用します。

このページは、そのキーワードをアルファベット順に列挙し、文字の大小でその出現頻度を示したものです。興味があるキーワードがあれば、そのキーワードをクリックしてみてください。そのキーワードが設定されているエントリーの一覧が見られますよ。

「キーワード」とは、エントリーのキーワード欄に設定された文字列(以下タグ)を指しています。ひとつのエントリーに対して複数のタグを設定することもでき、同一のタグが複数のエントリーに設定されているほど「(タグの)出現頻度が高い」とみなされます。

引用文に書かれている通り、Ogawa さんのこのページではタグのリンクをクリックするとタグに関連づけられたエントリーの一覧を表示する仕組みになっており、サイト内の情報分類および閲覧機能として非常に優れたものであると感じています。
仮にそれを差し引いてもこのアートな印象のページに強く惹かれてまして、このサイトでもようやくTagsを設置しました(キーワードがほとんど設定できていませんので正式にリンクさせていません)。

このカスタマイズを行うためには Ogawa::memoranda さんのサイト、都合3つのエントリーを横断する必要がありますが、このエントリーで設定手順をまとめてみました。なお SixApart より「Tags Plugin」というものが少し前にリリースされていますが、こちらはキーワード欄に記述されたタグをカテゴリーとしてひとまとめにしてしまうようです。カテゴリーと独立した分類を行うのであれば Ogawa さんのプラグインをお勧めします。

1.Tagwire Plugin プラグインのダウンロード

下記のページより tagwire.zip をダウンロードします。

Tagwire Plugin

アーカイブを解凍して tagwire.pl を plugin ディレクトリにアップロードしてください。

2.MT-XSearch プラグインのダウンロード

下記のページより mt-plus version 1.01 をダウンロードします(「Download mt-plus」のフォームボタンをクリックします)。ダウンロード前にセレクトボックスで該当のアーカイブ形式(Windows または UNIX/Mac)を選択してください。次のページで「I accept the mt-plus licensing terms.」をチェックして「Continue>>>」をクリックします。

Appnel Internet SolutionsDownload mt-plus

アーカイブを解凍して、下記のファイルをそれぞれ同じ名称のディレクトリにアップロードしてください。mt-xsearch.cgi はCGIPath(mt.cgi があるディレクトリ)にアップロードします。

  • mt-xsearch.cgi
  • plugins/mt-xsearch.pl
  • extlib/MT/XSearch.pm

なおアップロード前に3項を実施してください。

3.パッチの設定

下記のエントリーの2項を参考に、mt-xsearch.cgi と mt-xsearch.pl にパッチ(ソースコードの修正)をあててください。

TagwireとMT-XSearchによる動的タグアーカイブ

「パッチをあてる」の具体的な作業は、上記リスト内の行の一番左に「-」がある行を消して、「+」の行を追加すればOKです(「---」や「+++」の行は関係ありません)。

4.テンプレートモジュールの作成

先ほどのエントリー

TagwireとMT-XSearchによる動的タグアーカイブ

の3項の設定を行います。具体的には管理メニューの「テンプレート」をクリックし、次のページの一番下にある「テンプレート・モジュール」欄の右にある「新しいテンプレート・モジュールを作る」をクリックします。次のページで下記を設定します。

  • テンプレートの名前:XSearch Tagwire
  • このテンプレートにリンクするファイル:空白
  • テンプレートの中身:3項にあるリストを丸ごとコピー&ペースト

設定が終わったら「保存」をクリックします。このテンプレートはタグのリンクをクリックした後に動的に生成され、エントリーの一覧として表示されるページになります。

5.Tags テンプレートの作成

Tags の一覧を表示するページのテンプレートを作ります。
管理メニューの「テンプレート」をクリックし、次のページで「インデックステンプレート」欄の右にある「新しいインデックス・テンプレートを作る」をクリックします。次のページで下記を設定します。

  • テンプレートの名前:Tags(何でもいいです)
  • 出力ファイル名:tags.html
  • このテンプレートにリンクするファイル:空白
  • 再構築オプション:チェックする
  • テンプレートの中身:下記のページにあるリストを丸ごとコピー&ペースト

TagwireでTagCloud

設定が終わったらとりあえず「保存」をクリックしてください(次項で修正を行うので再構築は後で結構です)。

6.テンプレートの修正

前項で設定したテンプレートから4項のテンプレートモジュールを呼び出せるようにするために、テンプレートの一部(アンカー)を下記のように修正します。修正箇所を青色と赤色で示しています。

修正前

<ul id="tags">
<MTTags>
<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>"><a
 title="Tag: <$MTTag$>" 
 href="<$MTBlogURL$>tag/<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
</ul>

修正後

<ul id="tags">
<MTTags>
<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>"><a href="<$MTCGIPath$>mt-xsearch.cgi?blog_id=<$MTBlogID$>&search_key=Tagwire&search=<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
</ul>

修正が終わったら「保存」「再構築」を行います。修正部分のソースは下記のページの「使い方」の中にある「タグアーカイブリンク:」のソースの一部を利用しています。
なお本修正を行わずに .htaccess を利用してジャンプする方法もありますので、詳細につきましては

Ogawa::MemorandaTagwireとMT-XSearchによる動的タグアーカイブ

を参照ください。

設定完了後の画面 表示用ページに関する設定は以上です。ここまでの状態で tags.html を表示してみます。画像のようになっていればOKです。

7.エントリー編集画面の変更

エントリーにキーワードを設定できるようにします。デフォルトのエントリー編集画面ではキーワードを入力できないため、編集画面(新規エントリー・任意のエントリーのどちらでもOK)の下にある「この画面の表示をカスタマイズする」をクリックします。表示されたウィンドウで「カスタム」を選択し、表示したい項目をそれぞれチェックします。この時「キーワード」を必ずチェックしてください。設定が終わったら「保存」をクリックします。
余談ですが「ボタンの表示場所」を「ページの上と下」を選択するとフォームボタンが上下に表示されるので結構便利です。

8.「キーワード」の設定

エントリーのキーワード欄にタグを設定して保存します。ここでは「MovableType」と入力してみます(半角空白は含めないでください)。
複数のタグを設定する場合、基本的に空白文字が区切り文字となります。したがって「Movable Type」と入力すると「Movable」と「Type」という2つのタグとして認識されます。ひとつのタグとして認識させたい場合はブラケット([])やシングルクォート、ダブルクォートで括ればOKです(例えば[Movable Type]等)。日本語の設定も可能です。
設定の詳細につきましては、

Ogawa::MemorandaTagwire Plugin

の「タグ形式」の項をご覧ください。

9.動作確認

タグ表示画面エントリー保存後、tags.html を表示してみます。画像のように「MovableType」が表示されていればOKです。表示されない場合、5項の設定で「再構築オプション」がチェックされていない可能性がありますのでご確認ください。
タグ選択画面また、tags.html に表示された「MovableType」のリンクをクリックし、次のページで画像のように表示されれば全て完了です(エントリータイトルは「てすと」で試しています)。

以上です。
CSSにつきましては各自でお好みのスタイルを設定してください。

Comments [41] | Trackbacks [27]
2005年8月 4日

Firefox・Netscapeで連続した半角文字を折り返す

連続した半角文字が折り返さない状態FirefoxやNetscape 等、Geckoエンジンを用いたブラウザでは、連続した半角文字(長いURLや半角空白のないスクリプト等)を途中で折り返せないという既知のバグがあります。当サイトでもMTタグをリストとして掲載している記事をFirefox・Netscape等で表示すると、画像のようにブロックからはみ出して表示されてしまいます。
FirefoxまとめサイトURLっぽい文字列が右端で折り返されずレイアウトが乱れます

FirefoxではURLの折り返しについては url_breaker という拡張が公開されており、これがスタンダードな対処方法になっているようです。

あすかぜ・ねっとurl_breaker

またURL以外のテキストにも適用したい場合、url_breker_plus が公開されています。

outsider reflexFirefoxで長いURIを折り返す
(本文中にダウンロードのリンクがあります)

まず、上記を Firefox拡張として利用する場合は、下記の手順で設定します。GreaseMonkey という拡張を利用する GreaseMonkey 版と、url_breaker を直接拡張として利用するXPI版があります。作業はいずれも Firefox で行います。

GreaseMonkey版

  • GreaseMonkeyのページにある「Install Greasemonkey 0.3.5.」をクリック
  • 「今すぐインストール」をクリック
  • 再起動(これで追加した拡張が有効になります)
  • url_breakerまたはFirefoxで長いURIを折り返すのページにある url_breaker.user.js または url_breaker_plus.user.js(リンク自体は文章です) のリンクを右クリックして「Install User Script...」を選択
  • 開いた画面で「OK」をクリック

XPI版(url_breker のみ)

  • url_breakerのページにある「インストール/ダウンロード」のリンクをクリック
  • 「今すぐインストール」をクリック
  • 再起動(これで追加した拡張が有効になります)

となっています。

次に、url_breaker は本来 Firefox拡張ですが、ブラウザやユーザ設定に依存しない(例えばNetscapeに適用させたい等)方法という意味で、通常のJavaScritpと同様に設定するカスタマイズについても併せてご紹介致します。
#Firefox拡張との競合や機能の認識不足等で問題があるようでしたら本エントリーのカスタマイズは行わない旨を改めて掲載したいと思います。

1.スクリプトのダウンロード
上記の url_breaker または url_breker_plus をダウンロードします。

2.スクリプトのアップロード
どちらもアーカイブ形式ではありませんので、ダウンロードしたスクリプト(url_breaker.user.js または url_breaker_plus.user.js)をそのままローカル・サイト・パス(index.htmlが置かれているところ)にアップロードします。

3.テンプレートの修正
スクリプトを適用したいテンプレートの最後の方に

         :
<script src="<$MTBlogURL$>url_breaker_plus.user.js"  type="text/javascript"></script>
</html>

という風に青色部分を追加します(例は url_breaker_plus.user.js の場合です)。
ページの最後に設定する理由は、このスクリプトがページが表示された後に実行される必要があるためです。逆に <head>~</head> の部分に挿入しても効果はありませんのでご注意ください。

改善後の表示拡張機能またはスクリプトの導入で表示が改善されました(左)。スクリプトの動作は、スクリプト内に記述された特定の半角文字列の後方に <wbr> を挿入するというもので、ウィンドウ幅のリサイズに伴って折り返し位置を変えてくれますので、固定カラムだけでなく可変カラムデザインのサイトにもかなり有効です。

4.スクリプトの修正
IE系ブラウザで本スクリプトを動作させるとJavaScriptエラーが発生しますので、スクリプトに、

(function () {
if(navigator.appName == 'Netscape'){
     :
   (中略)
     :
}
})();

と青色の2行を加え、Mozilla系ブラウザのみで動作するようにしてください。

以上です。

2005.08.05 追記
機能の認識不足で誤解を招く説明になっていたため、本文を一部修正致しました。併せてタイトルも修正しました。

2005.09.27 追記
IEでJavaScriptエラーになるのを避けるため、スクリプトの修正を必須項目に変更しました。

Comments [8] | Trackbacks [10]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3