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

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)

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

• 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

このブログでつかっていた、Lightbox2をjQuery Lightbox Pluginに移行してみました。 移行の時に設定したことなどメモしておきます。

Lightboxの説明はナシ、ということで。。これまで使っていたLightboxは以下のページのものでした。

• Lightbox 2

jQueryに移植されたLightboxはいくつかあったと思うのですが、そのなかで、jQuery Lightbox Plugin (balupton edition)を利用することにしました。プラグインのページは以下にあります。

• jQuery Lightbox Plugin (balupton edition)

内容については以下のテキストにありますが、個人の都合で書いたものですので設置方法をお探しの方にはおすすめできません。

• memo-jquery-lightbox-balupton.txt

準備が整ったら、テンプレートを保存して、記事アーカイブを再構築します。ワタくシの場合はLightboxを利用した記事がそれ程多くないので、MT管理画面からrel="lightboxで検索して出てきた記事だけを保存しなおしという形で変更を反映しました。

Lightboxのグループ化の部分ですが、jQuery Lightbox Plugin用の書き方に変更しておきます。rel="lightbox[hoge]"とあるものを、rel="lightbox-hoge"のように-（ハイフン）のあとに任意の文字列という形に変更しておけば移行は完了です。

• ぬり絵原画ぎゃらりぃ（過去分）

Movable Typeの記事編集画面のツールバーをドラッグできるようにしてみました。

以下の内容は、Movable Type 4系に関するものです

Movable Type 4では記事の内容のエリアの縦サイズは可変になるようになっています。ところが、ワタくシのように記事の「続き（extend）」を使わずに、ほとんどが「本文」のみで書いており、長い記事の編集中にテキスト部分をスクロールバーが出ないように長くしていると、ツールバー（テキスト編集のためのボタン群）が上のほうに送られることで画面から隠れてしまうケースがあります。

これを解決する方法で思いつくのはこのようなところです。

• 可変バーのところを使ってテキスト部分を短くする
• 連続改行を入力していくことで下のほうにあるテキストを中央に持っていく
• 「かたつむりくんのWWW」さまにて全画面表示のプラグインが提供されているので利用してみる（Movable Type の記事投稿のエディタ部分を全画面表示（フルスクリーン）にするプラグイン ）

そこで、MTのツールバーもドラッグで任意の位置にもっていくことができるようにしてみたというわけです（というのはタテマエでdraggableのオプションを試すのが目的だと言う話もあります）。

方法ですが、先般書いた、「メモ：MTでファイルアップロード等のダイアログが画面内に収まり切らない時の対処」の記事内のダイアログをドラッグする方法にコードを追加します。追加する（している）コードは以下のようになります。

jQuery(function(){
     //  エディタツールバーにz-index設定し、テキスト部分に潜り込まないようにする
       $('#editor-content-toolbar').css("z-index","1");
     //  draggable の設定をする
       $('#editor-content-toolbar').draggable({
        snap: ".tab",
        cursor: "move",
        containment: "#content-inner",
        drag: function(event, ui){$(".field-buttons-formatting").css("visibility","hidden");},
        stop: function(event, ui){$(".field-buttons-formatting").css("visibility","visible");}
        });
});

導入までの手順の簡単なオサライです。

1. https://www.movabletype.jp/faq/modal-dialog.htmlの代替テンプレートをダウンロード
2. /alt-tmpl/ディレクトリ以下に指定された箇所にアップ。ダイアログの動作を確認。
3. jQuery本体、jQuery UI（ui.core.js、ui.draggable.js）を用意する
4. 代替テンプレートを書き換えて再びアップする

動作確認はMTOS4.3-jaとおよびこのブログでのMovable Type Pro 4.261、ブラウザはFirefox3.0.13とIE7です。動作的にはFirefoxのほうを推奨します。

あと、特定の要素を指定していますから、テンプレートの構造とか要素が変更になると動作しなくなります。なお、draggableのオプション設定については以下を参考にしました。

• Draggable [ jQuery ] - StackTrace（stacktrace.jp）
• UI/API/1.7.2/Draggable - jQuery JavaScript Library（jquery.com）

Firefoxのアドオン、「Operator」のユーザスクリプトを使って、Twitterにポストするものを書いてみました。

Operatorのユーザースクリプトの「hAtom.js」を利用しますため、あらかじめ、以下のページからコードを入手しておく必要があります。

• Operator User Scripts（Mike's Musings）

hAtom.jsのセットの方法は、わかりにくいものでよければ以下のページに記載してあります。

• Operatorユーザスクリプト、hAtom.js

Operator経由でTwitterにポストするためのコードは、以下となります。なお、コチラがユーザスクリプトの書き方をよく把握してないので、書き方があっているのかどうかは不明なのと、Microformatsが書かれていないと動作できないことから、テストしたページは少ないです。（自分のトコのページだけでは限界が。。）

実用性とかはギモンなのですが、参考程度と個人の覚書ということで晒しておきます。

セットのときは任意のファイル名で拡張子.jsとして保存しておき、Operatorのオプションメニューから登録します。登録のときに、Operatorのオプションメニューの「動作」のtabから、「Submit to Twitter」を追加します。

// Submit to Twitter
var submit_to_twitter = {
  description: "Submit to Twitter",
  shortDescription: "Submit twitter",
  scope: {
    semantic: {
      "hAtom-hFeed": "hAtom-hFeed",
      "hAtom-hEntry": "hAtom-hEntry",
      "hCard" : "url",
    }
  },
  doAction: function(semanticObject, semanticObjectType, propertyIndex) {
    if(semanticObjectType == "hAtom-hFeed"||semanticObjectType == "hAtom-hEntry"){
      var _url = window._content.document.location.href;
      var _title = window._content.document.title;
      return "http://twitter.com/home?status=" + encodeURIComponent(_title) + "%20" + encodeURIComponent(_url) ;
      }
    if(semanticObjectType == "hCard"){
      var _urlvcard;
      var property = this.scope.semantic[semanticObjectType];
      _urlvcard = semanticObject[property];
     return "http://twitter.com/home?status=" + _urlvcard;
      }
  }
};

SemanticActions.add("submit_to_twitter", submit_to_twitter);

ページで、hAtomが埋め込まれていたときは、そのページのタイトルとURI、hCardでURL情報があるときは、単にURLの情報だけをPOSTします。Operator経由であることを示す語句を添えれば、そのページがMicroformatsが埋め込まれているということを知らせることができるカモ（？）。

Movable Typeのアーカイブインデックスを改修してみました。Ajax JSON Searchの検索用テキストを再利用することでアーカイブリストを表示します。

Ajax JSON Searchって何よ、というかたは以下のページをご覧ください。で、設置した上でのハナシとして以下進めさせていただきます。

• 今日のMovable Type：Ajaxを利用したMT用超高速検索システムはスゴすぎる！　世界中の１％の人々へ（dakiny.com）

この検索で利用するテキストデータ（search_data.txt）なのですが、実はやってることが全アーカイブリストの出力。コレが意味するのは、コアの部分はアーカイブインデックスとほぼ同一内容のリストを作っているようなもの、ということになるのでは。。

それと、Ajax検索で検索ボックスに何も検索語をいれずに実行すると、全エントリが出力されるようになってます。入力されていないことをアラートで警告することもできるのでしょうが、恐らく敢えてやっていないのだと思われます。

以上のことをふまえて、search_data.txtを使い回ししてアーカイブ全出力するテンプレートをおもいついたというわけです（＃くだらないけど）。

まずは、その元となるテンプレートを作ってみました。ページを開いて、ボタンを押すとエントリの検索が実行されて全エントリのリストが表示されます。

• all entries template test

しくみは簡単です。blog_ajax_json_search.jsは本来、検索することが目的ですので、検索に関わる出力部分を少し改造します。具体的には、「○件ヒット」とかを表示しないように、build_search_result_html関数のところを書き換えます。

あとは、blogAjaxJsonSearch関数の第二引数を「,''」にして検索語のない状態として実行するだけです。

余談で、show_all_backnumbersみたいなのがあるのですけど、多分全リストを表示させるようなものだと思うのですがコレ動くんですかね。試してないですが。

てすとページでは、ボタン押下でblogAjaxJsonSearchを実行してますが、body要素のonload属性を使って実行のようにもできます。あえてやっていないのは、ナヴィゲーションリンクとかから、現在見ているページに流し込みできるんじゃね、みたいなハナシがしたかったからとか（＃...ブツブツ）。

実際のページは、テンプレートのグローバルナビの「Archives」より確認できます。あとおまけでタグ検索の検索窓もつけてみました。以上です。

以前、自分のDelicious Bookmarkの新着Postエントリを表示するウェブページでDeliciousのfeeds API v2に対応するために更新。

ブックマークリストページ作ったにあるように、Deliciousに登録した最新記事を表示させるページを作ったのですが、その後のリニューアル等もあってブックマークページを更新しました。あと今現在、「Favicon API」が休止中とのことでそれにあわせて表示しないようにしています。

リニューアル後のJSON形式のURLについては、以下のHELPページを参照します。

• Feeds Delicious data feeds for news readers and third-party applications

http://feeds.delicious.com/v2/{format}/

以上が基本のURLとなっており、JSONPを利用した方法で表示を試みます。なお、JSONPとか詳しくないために、まったく説明できませんorz。以下の記事を参考にさせていただきました。手順および説明等詳しく助かりました。

• [鏡] 入門 JSON 3 -- JSONP とコールバック関数 -- 戯れ言++（baldanders.info）

以下忘れたときのメモ用に

JSONscriptRequestを使うとのことなので、以下のページからjsr_class.jsというファイルを入手。（.zipのファイルのリンクがソレです）

• JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScriptXML.com

v2での自分のユーザ名と?callback={js call}をつけたURLは以下のようなかたちとなる。

http://feeds.delicious.com/v2/json/{USER}?callback=hundler

上記のようにアクセスした場合は以下。

hundler([･･･JSONデータ･･･])

JSONPにての通信は以下のように

bObj = new JSONscriptRequest('通信するURL');
bObj.buildScriptTag();
bObj.addScriptTag();

生成したJavaScriptコードを削除するのにremoveScriptTag メソッドを使う。

bObj.removeScriptTag();

ブックマークリストページ

• Bookmarks - www.maRkdiary.com