2009年11月アーカイブ

検索テンプレートは&とかが、&と実体参照されていないので、Validになりません。が、どうしてもValidにしたい場合の、あまり役立たないTipsです。

【2009-11-28 追記】
保存していたつもりが、途中で切れていました。

mt/lib/MT/Template/ContextHandlers.pmとmt/lib/MT/Template/Context/Search.pmを書き換えます。

ContextHandlers.pmは、19977行目

if ( $link ) {
	if ( index($link, '?') > 0 ) {
		$link .= '&';
	}

if ( $link ) {
	if ( index($link, '?') > 0 ) {
		$link .= '&';
	}

19984行目

$link .= "limit=$limit";
$link .= "&offset=$offset" if $offset;
return $link;

を、

$link .= "limit=$limit";
$link .= "&offset=$offset" if $offset;
return $link;

に変更。

Search.pmは、387行目

if ( my $include_blogs = $ctx->stash('include_blogs') ) {
	$link .= "&IncludeBlogs=$include_blogs";
}

if ( my $include_blogs = $ctx->stash('include_blogs') ) {
	$link .= "&IncludeBlogs=$include_blogs";
}

とします。

mt.jsは、コメントにしか利用しないので、HTMLヘッダーテンプレートから

<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>

を削除して、ブログ記事アーカイブテンプレートに記述しなおしたら、検索テンプレートで次の個所でスクリプトエラーが発生。

var xh = mtGetXmlHttp();

「mt.jsの呼び出しを元に戻したら、スクリプトエラーが無くなった」という覚書でした。

IE6でa:hover疑似クラスで背景指定した場合の注意点の覚書。

.content-nav li a {
  display: inline-block;
  padding: 3px 4px;
  color: #43a52a;
  background: #ffffff;
  border: 1px solid #94cc3d;
}
.content-nav li a:hover {
  color: #ffffff;
  background: #94cc3d;
  border: 1px solid #43a52a;
}

というように、背景やボーダーを指定した場合はIE6では背景が指定通りにならなかったり、隣接するボックスの挙動をおかしくしたりします。

そんな場合は面倒でも、

.content-nav a {
  display: inline-block;
  padding: 3px 4px;
}
.content-nav a:link,
.content-nav a:visited {
  color: #43a52a;
  background: #ffffff;
  border: 1px solid #94cc3d;
}
.content-nav a:hover,
.content-nav a:active {
  color: #ffffff;
  background: #94cc3d;
  border: 1px solid #43a52a;
}

と、すべてのa:疑似クラスを順番に指定すればいいようです。

隣接したボックスへの対策には、

_zoom: 1;  
overflow: hidden;

を指定することで回避できることもありますが、面倒がらずに原因個所の記述をしっかりしたほうが後々の保守なためにも精神衛生上よろしいようです。

LightBoxプラグインで自動化という記事で、「a要素にrel="lightbox"を毎回書くのは大変なので、自動化させたいが、ソースコードを書きかえるのは面倒だし、間違いのもとにもなりですし、かといって完全に自動化するのもどうか?」と書きましたが、LightBoxで画像のタイトルを表示させるには、画像へのアンカーにtitle属性がないといけません。LightBoxを使わないにしろ、title属性が有るに越したことはありません。

というわけで、禁断のソースコードに手を加えます(笑)必ずバックアップを取ってください。

mt/lib/MT/Asset/Image.pmに手を加えます。334行目あたりの

if ( $param->{thumb} ) {
    $text = sprintf(
        '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
        MT::Util::encode_html( $asset->url ),
        MT::Util::encode_html( $asset->label ),
        MT::Util::encode_html( $thumb->url ),
        $dimensions,
        $wrap_style,
    );
}

if ( $param->{thumb} ) {
    $text = sprintf(
        '<a href="%s" title="%s"><img alt="%s" src="%s" %s %s /></a>',
        MT::Util::encode_html( $asset->url ),
        MT::Util::encode_html( $asset->label ),
        MT::Util::encode_html( $asset->label ),
        MT::Util::encode_html( $thumb->url ),
        $dimensions,
        $wrap_style,
    );
}

と書きかえれば、画像へのアンカーにtitle属性が付加されます。一応アイテムの名前が、title="アイテムの名前"というふうに挿入されます。

参考までに、

MT::Util::encode_html( $asset->label ),

MT::Util::encode_html( $asset->description ),

とすれば、アイテムの概要が挿入されます。

関連エントリー

タグって活用されています?

記事を書くたびにタグを入力するのは面倒なので、はてなブックマークのように、自動でタグを表示してくれて、あとはマウスで選択するようなものはないかと探していたら、MovableType プラグインを利用して最強タグ付け環境を作る - Open MagicVox.netに、面倒な記事のタグ付けを自動化する:AutoTagging | スカイアークシステムというプラグインが紹介されていましたが、このサイトのような商用ライセンスでは利用できません。

配布元のスカイアークシステムのサイトを探していたら、自動ではないけれど、これまで使用したタグの中からリストを表示せてマウスで選択できるプラグイン、記事編集時にマウスクリックだけでタグ付けを行える:EasyTagSelector | スカイアークシステムが紹介されていました。

ブログ記事の編集画面(EasyTagSelector)

MovableTypeのpluginsディレクトリにアップロードするだけですぐに利用できます。お試しあれ。

新着エントリーに新着表示マークをつけるには、JavaScriptを使う方法がありますが、このサイトではメインページ以外のサイドバーの新着記事リストを「Ajax によるモジュール化」により行っているため、新着表示マークを表示させるためには再度JavaScriptを読み込ませなくてはいけません。

そこで、MTタグで自動で消える"New"マークを表示する | 石輪っぷり! | 有限会社 Willさんいんで紹介されている、MTタグのみで行う方法にしてみました。

実際のテンプレートは次の通りです。

<mt:SetVarBlock name="today"><$mt:Date format="%Y%j"%></mt:SetVarBlock>
<h2>ブログ最新</h2>
<div class="widget-content">
  <ul>
  <mt:Entries lastn="10">
    <li><a href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>に移動します"><$mt:EntryTitle encode_html="1"$></a> (<$mt:EntryDate format="%b月%e日"$>)
    <mt:SetVarBlock name="passed"><$mt:EntryDate format="%Y%j"%></mt:SetVarBlock>
    <mt:SetVar name="passed" value="$today" op="sub">
    <mt:If name="passed" ge="-5">
     <span class="newmark">New!</span>
    </mt:If>
    <mt:If name="passed" ge="-640">
      <mt:If name="passed" le="-635">
       <span class="newmark">New!</span>
      </mt:If>
    </mt:If>
    </li>
  </mt:Entries>
  </ul>
</div>
関連エントリー

リアルタイムに他サイトのFeedを表示するには、藤本壱氏のThe blog of H.Fujimotoのリアルタイム再構築プラグインを使う方法があります。

Movable Type 4付属の Feeds.App Lite プラグインを利用するため、表示項目の制限はありますが、現在は、この方法で表示しています。

なお、有償版の Feeds.App は、さらに詳細なカスタマイズが可能です。(Personal License は、$40)

具体的な方法は、リアルタイム再構築プラグイン(MT4専用版・その1)をお読み下さい。

なお、解説ページは、その1からその4まであります。

【2010-01-12 追記】
Movable Type 5 からは、Movable Type 5.01 へのアップグレードメモにも書いたとおり、FeedAppLiteでは文字化けするので、Movable Type 5.01 ではjsRSS.cgiを使っています。
関連エントリー

別のサイトで使っているBBSは、Movable Typeとは別のCGIプログラムを使っています。このBBSはFeedを出力できるので、そのFeedを読み込んでトップページで表示させています。

他サイトのFeedを読み込んで表示するにはいくつかの方法があります。まずCGIを使う方法を紹介します。

Movable Type 4には、FeedAppLiteというプラグインがインストールされており、簡単にFeedを表示するテンプレートが作れますが、このテンプレートを再構築しない限り、最新の情報に更新されません。

ここでは、FeedAppLiteを使わずに、大黒屋本舗で公開されている、jsRSS++ v3.15というCGIを使ってリアルタイムにFeedを表示させています。

大黒屋本舗からCGIをダウンロードして、任意のフォルダにアップロードし、テンプレートを好みにあわせて書き換えればいいだけで、非常に簡単に行えます。

【2010-01-12 追記】
Movable Type 5 からは、Movable Type 5.01 へのアップグレードメモにも書いたとおり、FeedAppLiteでは文字化けするので、Movable Type 5.01 ではjsRSS.cgiを使っています。
関連エントリー

前回、ブログにRetweetボタンをつけるという記事を書きましたが、その続きです。

簡単にReTweetボタンが設置できるReTweet 0.3 プラグインを紹介します。

前回の記事では、JavaScriptによりReTweetボタンを設置する方法でしたが、今回はプラグインによりReTweetボタンが設置できるもので、bit.lyのAPIやユーザー名やScriptに直接書きこむことに抵う場合や、JavaScriptを極力減らしたいという場合に便利です。

ダウンロード・設置方法に関しては、ReTweet 0.3 プラグインをご覧いただくとして、私が設置する際に躓いた点をメモ代わりに書いておきます。

どのバージョンを使うか

ReTweet 0.3 プラグインには、WWW::Shorten::Bitlyなしと、WWW::Shorten::Bitly必須の2バージョンあって、それぞれ、zip形式とtar.gz形式で配布されています。

WWW::Shorten::BitlyなしのReTweetMaker 0.3
  • zip形式 ReTweetMaker_WSBless_0.3.zip
  • tar.gz形式 ReTweetMaker_0.3.tar.gz
WWW::Shorten::Bitly必須のReTweetMaker 0.3
  • zip形式 ReTweetMaker_0.3.zip
  • tar.gz形式 ReTweetMaker_0.3.tar.gz

一般的なレンタルサーバーでは、WWW::Shorten::BitlyなしのReTweetMaker 0.3をダウンロードすればよいと思います。

MultiBlogで運用している場合の注意

私の場合、運営しているサイトのほとんどが複数のブログで運用しています。そのため思わぬ落とし穴にはまってしまいました。

ReTweet 0.3 プラグイン設定画面

設置が正しければ、設定画面の赤い矢印の示す部分クリック(具体的には、"
http://www.hogehoge.com/mt/plugins/ReTweet/retweetmaker.cgi/最新エントリーのエントリーid"というリンク)すると、現在全部のブログにある最新のエントリーのReTweetへ遷移するはずです。

遷移後の画面

ところが、ReTweet 0.3 プラグインは各ブログごとに設定個所がありますから、ブログA(一番新しいエントリーidが仮に99)とブログB(一番新しいエントリーidが仮に29)と2つのブログを運用していたとして、最新エントリーのあるブログAではなくブログBで先に設定すると、"
http://www.hogehoge.com/mt/plugins/ReTweet/retweetmaker.cgi/99"というURIに飛びますが、ブログBには99というエントリーidを持ったエントリーがないために、ブラウザは真っ白な画面を表示するだけで、設定が完了しません。

この点だけ注意すれば設置は簡単だと思います。「さくらスタンダード」「チカッパ」「ATW plus」で、Movable Type 4.261で動作確認しました。

なお、Movable Type 4.23ではいずれのサーバーでも

エラーが発生しました。
close Undefined subroutine &JSON::from_json called

というメッセージが出力されて、動作しなかったので、Movable Type 4.261にアップグレードを行ってから動作確認しました。

どうぞお試しください。

関連エントリー

ブログにRetweetボタンをつけてみました。John Resig - Easy Retweet Buttonが出典もとです。

日本語での解説はasterisk* | ブログに「Twitterに送る(Retweet)」ボタンを追加するにありました。解説そのままですが、若干補足です。

スクリプト

RT @TwitterID <ブログ名>:<記事のタイトル> サイト記事URI(bit.lyによる短縮URI)

具体的には、

RT @h_shikida せんむの技術ブログ:ブログにRetweetボタンをつける http://bit.ly/3e1WdA

としたかったので、retweet.jsをi次のように変更します。prefixに自分のIDを入れるだけです。

prefix: "RT @TwitterID ",

テンプレート

テンプレート中のRetweetボタンのタグを、

<a href="<$MT:EntryPermalink$>" class="retweet"><$MT:EntryTitle$></a>

を以下のようにします。

<a href="<$MT:EntryPermalink$>" class="retweet"><$MT:BlogName$>:<$MT:EntryTitle$></a>

スタイル

retweet.js内に、スタイルシートも記述されているので必要に応じて書き替えてください。このあたりはお好みでどうそ。

それから、ReTweetプラグインもありますが、bit.lyバージョンは私の環境ではエラーが出てうまく導入できませんでした。

【2009-11-06 追記】
JavaScript多用しまくっているので、できればプラグインで対応したいので、ReTweetプラグインについては、エラーの原因突き止めてインストール出来たらまた報告します。
【2009-11-08 追記】
エラーの原因がわかりReTweetプラグインがンストール出来ました。「簡単にReTweetボタンが設置できるReTweet 0.3 プラグイン

オリジナルのエラーページ

| コメント(0) | トラックバック(0)

イントロダクション

【2009-11-06 追記】
勘違いがあったので全面書き直し

MTWriteToFileプラグインでフォルダアーカイブ特定のフォルダをフィルタリングという記事の続きです。

サーバーの出力するエラーページ(404.htmlなど)ではあまりにも淋しいので、検索窓や問い合わせ先が書いてあるオリジナルのエラーページをウェブページで作ることになりました。

  1. errorフォルダ(/error)を作ります。
  2. ここにウェブページでエラーページを作ります。 特定のフォルダをフィルタリングという記事のとおり、errorフォルダアーカイブは作成されません。 エラーページにはフォルダーアーカイブはいりませんから、errorフォルダにフィルタリングしたわけです。
  3. .htaccessファイルに、以下の記述を加えてアップロードして完成です。
    ErrorDocument 401 /error/401.html
    ErrorDocument 403 /error/403.html
    ErrorDocument 404 /error/404.html
    ErrorDocument 500 /error/500.html

次の課題

ところがいくつかのサーバーでは、エラーページがrootにいないと出力されませんでした。その場合、rootフォルダーに直接エラーページを作ることにします。また、.htaccessファイルも以下のようになります。

ErrorDocument 401 /401.html
ErrorDocument 403 /403.html
ErrorDocument 404 /404.html
ErrorDocument 500 /500.html

さらに、サードバーには目次やらなんやらと、エラーページには要らないウイジットがありますが、フォルダーでフィルタリングが出来ないので、カスタムフィールド(名前:目次に表示、ベースネーム:show_list、テンプレートタグpagedata_show_list、種類:チェックボックス)を作ります。エラーページの編集画面で出来たチェックボックスにチェックを入れます。

次にサイドバーのところで、これを利用して2段階のフィルタリングをかけます。

<mt:SetVarBlock name="showlist"><mt:pagedata_show_list></mt:SetVarBlock>
<mt:If name="showlist" eq="1">

でエラーページ以外のウェブページに目次を出力させます。カスタムフィールドの値が1(チエックボックスにチェックした状態)を上記のコードで取得してフルタリングします。

さらに、そのままではウェブページの目次にエラーページも出力されて並んでしまうので、

<mt:Pages field:show_list="1" lastn="10">
<li><a href="<$mt:PagePermalink$>"><$mt:PageTitle encode_html="1"$></a></li>
</mt:Pages>

とMTPagesタグにfield:カスタムフィールドのベースネームを使ったフィルタリングをします。

<mt:If name="page_template">
<mt:SetVarBlock name="showlist"><mt:pagedata_show_list></mt:SetVarBlock>
<mt:If name="showlist" eq="1">
<h2>目次</h2>
<div class="widget-content">
<ul>
<mt:Pages field:show_list="1" lastn="10">
<li><a href="<$mt:PagePermalink$>"><$mt:PageTitle encode_html="1"$></a></li>
</mt:Pages>
</ul>
</div>
<$mt:Include module="sh_ダウンロード"$>
</mt:If>
<mt:ElseIf name="entry_template">
以下続く...

これで、エラーページ以外には目次が出力されます。ポイントはカスタムフィールドのベースネームとテンプレートタグの使い分けです。

このアーカイブについて

このページには、2009年11月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2009年10月です。

次のアーカイブは2009年12月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Twitter Updates

OpenID対応しています OpenIDについて
Powered by Movable Type 4.27-ja