JavaScript Archive

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テンプレートを再構築して更新します。確認したいページでページをリロードしたのち動作を確認します。

Google Friend Connectのガジェットのコードを複数ある場合にまとめてしまうというものです

ガジェットとかConnectの説明は省略ということで、ここでは、メンバーガジェットとコメントガジェットを同一ページに表示する場合でみていきます。

なお、以下に示す方法は、Googleが仕様を変更をおこなったときに使えなくなるかもしれません。

1. 同じ配色で２つのガジェットを表示する場合

コメントガジェットもメンバーガジェット（以下それぞれ「コメント」、「メンバー」と表記）も同じ配色の場合で説明します。

あらかじめコメントとメンバーのガジェットのコードを取得しておきます。

最初にガジェットが入るDIVを用意します（その前に、Connectの本体のスクリプトファイル（friendconnect.js）は呼び出ししてあるものとします）。

取得済みのコードのDefine the div tag where the gadget will be inserted.というコメントの次にある、id属性のついたdiv要素をそれぞれを表示したい箇所に並べておけばよいでしょう。

<div id="div-0123456789012345678" style="width:200px;border:1px solid #cccccc;"></div><div id="div-0987654321098765432" style="width:200px;border:1px solid #cccccc;"></div>

自分のやり方だと、コメントのガジェットのほうが設定（要するにコード）が多いので、コメントのほうのコードをベースにメンバーのコードを足すという方法でおこなっています。この辺はお好みですが。

次にRender the gadget into a div.というコメント以下のコードを見ていきます。

var skin = で宣言されている変数の値（例えばskin['FONT_FAMILY']　 連想配列のようですが）のうち、共通でないものを追加していきます。

メンバーがコメントに共通しないものはskin['NUMBER_ROWS'] = '4';のようですので、これをコメントのほうのコードにペーストします。

あとはgoogle.friendconnect.container.renderMembersGadget();が表示のための関数のようなのでこれもコメントのほうにペーストします。上で示した例のIDですと以下のようなコードになるでしょう。

google.friendconnect.container.renderMembersGadget(
 { id: 'div-0987654321098765432',
   site: '00000000000000000000' },
  skin);

このコードの部分は自分の場合、外部JavaScriptとして作成して呼び出すようにしてます。テンプレート等に直接書いても同じことです。

コメントとメンバーガジェットをひとまとめにしたコードは以上です。

2. 配色のことなる２つのガジェットを表示する場合

コードをまとめるという意味は薄れるのですが、Render the gadgetの部分を外部JavaScriptにすれば、このファイルの変更のみでスタイル変更が楽になるかも？程度のものです。

簡単にいうと、変数をコメントとメンバーとで変えればよいのです。

• var skin = {}, skin_2 = {};

みたいに宣言しておいて、

• skin_2['FONT_FAMILY'] = 'sans-serif';
  : : :

といった具合にに2つ目のガジェットのコードを書き換えて、google.friendconnect.container.renderMembersGadget();の第二引数にskin_2を入れると。

以上まとめますと。。

• Friend Connectのコードを取得する
• friendconnect.jsを呼び出しておく
• 表示したい箇所にdivタグを配置する
• Render the gadget into a div.以下のコードを外部ファイルとして、コメントとメンバーのコードを1つにまとめる

となります。このサイトですと、/blog/web/ 以下のページだとかaboutページだとかで確認できます。

ということで新年あけてからだいぶ経ちましたけど今年初エントリでした。そんな感じで今年もマイペースでやっていこうかなと思います。m(u.u;)m

jQueryを使いタグの情報のはいったXMLファイルを読み込んでAjaxなタグリストを表示してみます

ということで、この前の続きになります。

さっと要点だけ申し上げますと、Movable Typeのタグまわりのテンプレートタグを利用して、タグの情報のはいったXMLファイルを作成する、というところまでをやりました。

このファイルを活用して何かしようということで(ご想像のとおりで)、jQueryを使ってAjaxなタグ一覧のようなものを作ってみました。

jQueryによるXMLファイルの読み込み

前回作成したファイル名をtags.xmlとして出力させたものとします。

用意するのは、jQuery本体(ここではヴァージョン・1.3.2ということにしておきます）でjQuery本体は先に読み込んでおくとします。

ページには、以下のようなタグリストが差し込まれる要素を埋め込んでおきます。

<ul>
    <li class="firstChild">Tag list here.</li>
</ul>

そして、XMLファイルを解析するコードを追加します。

$(function(){
    $.ajax({
    url: '<$MTBlogURL$>tags.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert("Error loading XML file.");
    },
    success: function(xml){
    $('.firstChild').remove();
    $(xml).find('items').each(function(){
        var tag = $(this).find('tagName').text();
        var link = $(this).find('link').text();
        var count = $(this).find('tagCount').text();
        var rank = $(this).find('tagRank').text();
        $('<li></li>')
            .html('<a href=\"'+link+'\" class=\"rank-'+rank+'\">'+tag+'</a>'+' ( '+count+' )')
            .appendTo('ul');
       });
   }
   });
});

このファイルは、外部のJavaScriptとして読み込めばコードがすっきりするでしょう。<$MTBlogURL$>の箇所は、インデックステンプレートでこのJavaScriptファイルを作成した場合のものです。JavaScriptファイルをMTを使わず作成するときは実際に出力されたXMLファイルまでのパスと置き換えします。

で、これを実際にやったのが以下となります。ここのブログでよく使われているタグ50件分をXMLファイルとしています。

• http://www.markdiary.com/sample/ajax_taglist.html

timeoutの数値を先に示したコードより長めにしてますが、サーヴァの状況により読み込みに時間がかかり失敗しているようならば、時間をおいてから読み込んでみてください。

Operatorアドオンのユーザースクリプトを使ってはてなブックマークのブクマユーザ数を表示するリンクを作る試み

参考にしたページは以下。

• はてなブックマーク数(users)のリンクをつくるブックマークレット - ぼくはまちちゃん！(Hatena)

でもって、Operaterアドオンでなんかするようなのは以下に色色書いてます。

• Operatorユーザスクリプト、hAtom.js
• FirefoxアドオンのOperator→はてブの特定タグの注目エントリに

ま、正直なところ、ブックマークレットでOK。だとか、それ、Make Link。なのですがそういうかたはそのようにつかったらいいだけの話でしょう。

ということで、これは個人メモ程度かネタかどちらか。個人のメモだからつかったらイカんよ、とはいいませんけども得にも損にもならないような、どうでもよさそうな話です。

で、このようなコードをテキトーに拡張子.jsのファイルにして、Operatorに登録しました。なお、コードを参考にしたページは先に示しましたとおりです。

var hatebentrylink = {
  description: "to make hateb link",
  shortDescription: "make bookmarklink",
  scope: {
    semantic: {
      "hAtom-hEntry" : "bookmark.link",
    }
},
  doAction: function(semanticObject, semanticObjectType) {
    if (semanticObjectType == "hAtom-hEntry") {
      var _entryTitle = semanticObject['entry-title'];
      var _bookmarklink = semanticObject.bookmark.link;
      window._content.prompt('', '<a href="http://b.hatena.ne.jp/entry/'+_bookmarklink.replace(/#/g,'\u002523').replace(/^http:\/\//,'')+'"><img src="http://b.hatena.ne.jp/entry/image/'+_bookmarklink.replace(/#/g,'\u002523')+'" alt="\u306F\u3066\u306A\u30D6\u30C3\u30AF\u30DE\u30FC\u30AF\u0020\u002D\u0020\u000A'+ _entryTitle +'" /></a>');
    }
  }
};
SemanticActions.add("hatebentrylink", hatebentrylink);

やりたかったのはrel-boookmarkなとき抽出されて、ブクマエントリページとユーザー数のリンクを作るプロンプトが出る、というもの。

ちょっとやってみることにします。自前のページでrel-bookmarkがあるページを使ってもいいのだけど、Google リーダーで「AideRSS」のGreasemonkeyを利用しているときの状態でやってみます。これを入れているとき、hAtomが入っていることになっているようなので。

AidsRSSの説明などはコチラを。

• Mozilla Re-Mix: Google リーダーでスコアの高い人気記事だけを抽出して読むことができるFirefoxアドオン「AideRSS」(mozilla-remix.seesaa.net)

そしたら、とりあえずGoogle リーダーを開いてみます。

Click to Enlarge

アクションが実行されると、以下のようにプロンプトが表示。

――とはいっても、実際は使う場面があまりないのですけども(おぃ）。未だにユーザースクリプトで既存のスクリプトにアクションを追加するやり方がよくわかってないのでした。orz