BlogTop > Archives > 2010年2月 Archive

2010年2月 Archive

« 2010年1月 | 2010年2月 | 2010年3月 »

メモ:mtReplyCommentOnClick関数のカスタマイズ

  • Posted by: maRk
  • JavaScript
  • はてなブックマークに追加

Movable Typeのコメント返信機能で「返信」をクリックした時になにかをおこなうというカスタマイズです。

コメント返信をするときに、<a href="#comment-xxx">@ダレソレ</a>という具合に「@コメンテーター」のリンクをテキストエリアに置くというカスタマイズをやってみます。MTのJavaScriptファイル(mt.js)に少し手を加えます。

なお、コメントの動作には好みなどありますし、実装レヴェルというよりはコメント返信機能のしくみの確認といった感じで捉えていただいたほうがよいのでないかとおもいます(確認はMTOS5,Picoテーマに依るものです)。

具体的には以下のキャプチャのようになります。

コメントリプライ時にテキストエリアにコメンテーターのリンクを挿入

下準備

まずはじめに、このカスタマイズはコメントにリンクのタグを挿入するものですから、ブログの初期設定でコメント内のHTMLタグの使用が許可されている設定となっている必要があります。

記事ページのパーマリンク取得のために、HTMLヘッダーテンプレートに以下を追記します。変数名は他で使用しないものであれば適当で。例ではブログ毎で一意になるようBlogIDを使っています。編集後、スタティックなページでは反映されるよう再構築する必要があります。

<mt:if name="entry_template">
<script type="text/javascript">
bid<$MTBlogID$>_permalink="<$MTEntryPermalink$>";
</script>
</mt:if>
<mt:Ignore>JavaScriptテンプレートのリンクより上に記載のこと。</mt:Ignore>

JavaScriptテンプレートの編集

JavaScriptテンプレート(mt.js)でmtReplyCommentOnClick関数を検索します。

var reply_text = '(省略...) の下に以下を追記します。

  • var reply_commenter = '\<a href=\"'+ bid<$MTBlogID$>_permalink +'#comment-__PARENT__\"\>@__AUTHOR__<\/a\>';

reply_text = reply_text.replace(/__AUTHOR__/, author);の下に以下を追記します。

   reply_commenter = reply_commenter.replace(/__PARENT__/, parent_id);
   reply_commenter = reply_commenter.replace(/__AUTHOR__/, author);

text.focus();の次に以下を追記します。

  • text.value = reply_commenter;

JavaScriptテンプレートを再構築して更新します。確認したいページでページをリロードしたのち動作を確認します。

今利用しているサーヴィス、ブログの関係をちょっと図にしてみました

  • Posted by: maRk
  • myown | net
  • はてなブックマークに追加

このブログや他のブログサーヴィスおよびその他サーヴィスとの関係を図にあらわしてみました。

とかいっても、エクセルでオートシェイプを使っただけという粗末なものですが。図があれなので本人でないとわかりにくいかも知れません。赤色の形の異なる矢印で、クロスポスト等による投稿の流れを示してみました。

因みにですが、FOAFのファイル(foaf.rdf)をW3C RDF Validation ServiceのGraphで表示させたものが元ネタです。

my_blogs_and_services.gif

図中のmaRkのつれづれぼっくすはVoxサービスが終了となりました。

今月のいらんことしい(2010年2月)

今月(2010年2月)、ブログのカスタマイズをおこなった記録を綴るエントリです。

そういえば今月はあまり記事書いてないですね。。

  • jQuery For MTプラグインをいれてみた。
  • TypePad(Micro)に登録。独自のActionStreamsを作ってみた

jQuery For MTについてはこちら( <http://www.markdiary.com/archives/2010/02-01091250.php>)に記したとおりです。MT4.xな環境でjQueryで書かれたコードを編集画面にとりいれることを実現するものです

さて、既にサイドバーのElsewhereにあるんですが、TypePad(typepad.com)に登録してみました(こちらです。maRkzMICRO)。TypePadにPostしたものを取り込みます。

ところで、TypePadでダッシュボードのクイック投稿フォームからの投稿をおこなった場合にフィードのほうが、title要素が空で出力されています。

この対応としまして、YAMLファイルには要素を置き換えという方法(summary要素をtitle要素と置き換える)で対処しました。

ActionStreams関連のドキュメントは用意されているのですが、熟読するよりやってみないことには始まらない、というのが今回やってみた教訓というかなんというか、そんなところです。ActionStreams関連はあつかわないと前に宣言しましたんでこの辺で。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録があります。

link要素にアーカイブ

Movable Typeでlink要素にarchivesというLink typeをいれてみるというものです。

毎回、毎回つかいどころのわからないものを、「ネタ」と称して公開するのはちょっと気が引けるのですがいってみます。

このカスタマイズは<link rel="archives" ... />というのをhead内にいれるというもの。ワタくシが見かけたなかでは、月別アーカイブのリンクをその値としてるものがあるようでしたので、それに倣ってやってみます。

月別アーカイブのウィジェットのコードを参考にしますと、おそらくこのような形になるかと

<mt:IfArchiveTypeEnabled archive_type="Monthly">
<MTArchiveList archive_type="Monthly" lastn="1">
<link rel='archives' title='<$mt:ArchiveTitle$>' href='<$mt:ArchiveLink$>' />
</MTArchiveList>
</mt:IfArchiveTypeEnabled>

しかしながら、スタティックパブリッシングでは各記事において再構築されるまでは、その時点のアーカイブリストとなる問題(*これは正確には、常に最新のアーカイブリストで表示したいとう、運用上の都合での問題です)もあります。

そこで、PHP環境前提になりますが、以下のようにしてみました。*MTArchiveTitleを使わないので、出力が月別アーカイブのタイトルの書式に揃わないことがあります。

<?php
echo "<mtentries lastn=1>";
$latest_year=<$MTEntryDate format=%Y$>;
$latest_month="<$MTEntryDate format=%m$>";
echo "<link rel='archives' title='".$latest_year."年 ".$latest_month."月' href='<$MTBlogURL$>".$latest_year."/".$latest_month."/' />\n";
echo "</mtentries>";
?>

再構築をおこなった月に最低1つは記事がある、という場合は「MTDate」を使うという手もあるのでないでしょうか。(MTEntriesタグを使わなくてよくなるなど)

で、実装後の使いどころですが

にあるように、link要素表示のところに、rel='archives'の場合を追記することで、ナビゲーションにアーカイブが反映されたりします。

jQuery For MTプラグインをいれてみました

Movable Type 4 の管理画面に jQueryをつかえるようにするための、jQuery For MTプラグインを使ってみることにしました。

MTのアップデートの際にAltTemplateをアップするのを忘れてて動いてないなあ、とか実際にやってまして。プラグインならば、いつもアップデートのときに、旧MTディレクトリからごっそりコピーしてくるのでそういった凡ミスはほぼないってことです。

プラグインは以下からダウンロードできるようです。

以下、Movable Type 4系での話として進めていきたいと思います。

これまで、管理画面でjQueryを使うのに、AltTemplateを使っていました。これを、jQuery For MTに移行する手順は以下のとおりです。

  1. プラグインを入手する
  2. 展開してpluginsフォルダ以下はシステムのplugins以下に、mt-static/plugins以下の「jQueryForMT」をシステムのmt-static/plugins以下にそれぞれアップロードする(ダウンロードページの詳細のとおり)
  3. user.jsに、alt-tmplディレクトリ以下にある、AltTemplateファイル(.tmplのファイルなど)に記載されている、JavaScriptのコードを入れる
  4. 編集後、user.jsをアップする
  5. alt-tmplディレクトリ以下を削除する(他に使用する代替テンプレートがある場合は当該ファイルのみ削除しあとは残しておく)

それと一点だけ気づいた点ですが、jQueryのプラグインなどを利用したいときに、user.jsにプラグインのコードを貼るのもあれなので、動的に.jsファイルを呼び出すようにuser.jsに書くようにしました。AltTemplateでは、<script src='path/to/hogehoge.js'></script>みたいに直接HTMLで書けるわけで、こういったところはAltTemplateとの違いでしょうか。

もっともプラグインのplファイル弄ればなんとかなりそうですけれども(というか、そんなにコテコテにカスタマイズしてどうする、とかなんとか)。

追記:メモです。システムメニューでjQueryを使わないという都合ができた(個人の環境によるものです)ので、plファイルの出力関連のコードに以下のタグに包含するとしました。

  • <mt:unless name="system_overview_nav"></mt:unless>

Index of all entries

BlogTop > Archives > 2010年2月 Archive

Feeds
Elsewhere

Action Streams

logo

Comment powered by DISQUS

Return to page top