JavaScript Archive

Firefox にてページでコンテキストメニュー無効化を許可しない設定です。

あるサイトにいくと、コンテキストメニュー（右クリックなどで開く補助メニュー）の表示を禁止されている場合があり、 Make Link などコンテキストメニューを使うようなアドオンを使っていると不便に感じることがあります。

Mac版　Firefox 35.0.1 のときで確認していますが、about:config をロケーションバーに入力して、警告表示とか出てる場合は、警告内のボタンを押して、contextmenu　などと検索します。

dom.event.contextmenu.enabled　の値を trueになっていたら、false に変更します（真偽値なので、反転表示の状態でクリックすれば切り替わります）

変更後の値は以下です。元に戻すときは、値を 初期設定値 | true に切り替えるだけです。

これで、コンテキストメニュー表示が禁止されてるページで動作確認します。

今月（2014年7月）、ブログでカスタマイズした箇所をまとめたエントリです。

• FancyBox プラグインをバージョンアップ
• CoreServer 、PHP／Apache バージョンアップメンテナンスに伴い、WordPressでのPHPのCGI版による動作を解除

FancyBox は以下からダウンロード。

• fancyBox - Fancy jQuery Lightbox Alternative

トラブルをさけるために、展開後のフォルダ階層をオリジナルと同じにしてアップロードします。

FancyBox 用のモジュールテンプレートを更新して、FancyBox を適用している記事をフィルタして再構築。

サムネイル（50x50pix）使用する表示のときオーバーレイが真っ黒になるので、デフォルトの状態に修正しました。

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

• 当ブログのカスタマイズ記録

テキストリンクの一部分をコピーするとき楽にするための JavaScript です。

小粋空間さんのところにて、テキストリンクの部分コピーの方法についてまとめられていました。

• テキストリンクの一部をコピーする方法のまとめ: 小粋空間

やりかたについては、リンクの上側をなぞるとか、以前訓練した覚えはあります。しかしながら、やりにくい場合もありますので、これを選択しやすくするための JavaScript を作ってみました。

以下のようなものを、ブラウザのコンソールで実行するか Bookmarklet 化します。

(function(){
  var a = document.querySelectorAll("a"), d;

  for (var i=0; i<a.length; i++){
    a[i].addEventListener( "mouseover", rmHref, false);
    a[i].addEventListener("mouseout" ,rmSelhelper , false);
  }

  function rmHref(){
    d = this.getAttribute("href")||"";
    this.setAttribute("data-selecthelper-href", d);
    this.removeAttribute("href");
  }

  function rmSelhelper(){
    d = this.getAttribute("data-selecthelper-href")||"";
    this.setAttribute("href" , d);
    this.removeAttribute("data-selecthelper-href");
  }
})();

リンクのマウスオーバーでテキストのリンクが削除（動作はdata-*に置き換えで退避）されるので選択しやすくなります。

• 対象セレクターを絞り込む場合の対応で querySelectorAll のほうを使っています。
• 実際のハイパーリンクが動作するところまで考慮してませんので、改造するならば、なんらかの条件で removeEventListener を実行すればいいと思います(ページリロードしたほうが早そうだけど)。
• 元ページでほかにイベントリスナーが設定されている場合の動作まで検証してないので、あくまでも純粋なテキストリンクむけです
• あと、クロスブラウザまで考えていませんので

Movable Type の管理画面のアイテムの編集のところで、アイテムの埋め込みにサムネイルつきの画像へのリンクのコードを追加表示させるためのブックマークレットです。

（なお、Movable Type 6.0.1での動作確認です）

画像アイテムのページでは、「アイテムの埋め込み」にはURLしか表示されていません。

記事内で使用するときには、それほど問題はないのですが、他の場所でその画像を使いたい場合、自前でHTMLをかく必要があります。

このブックマークレットでは、このページでの情報から、画像へのサムネイルつきの画像リンクを作成して、ページ内の「アイテムの埋め込み」に追加します。プロンプトで表示します。

コードを Hatena::Let に置いておきました。

• Movable Type アイテム埋め込みコード作成 - Hatena::Let

リンク先の Movable Type アイテム埋め込みコード作成のリンクを右クリックからブックマークするか、ツールバーにドラッグするなどしてブラウザに登録します。

使用すると、プロンプトで埋め込みコードが入って出力されます。

コードの中身を提示しておきます（はてなからの呼び出しは気持ちよくない場合に。画像以外にも改造できるかと）

(function($){
  var itemview = $("div.asset-preview");
  if(!itemview) return;
  var imgthumb, imgthumb_src, imgthumb_w, imgthumb_h, imgthumb_htm, item_embed;
  var item_uri = $("#asset-url").val();
  if($(itemview).hasClass("asset-type-image")){
    imgthumb = $("div .thumbnail img");
    imgthumb_src = imgthumb.attr("src");
    imgthumb_w = imgthumb.attr("width");
    imgthumb_h = imgthumb.attr("height");
    imgthumb_htm = '<img src="' + imgthumb_src + '" width="' + imgthumb_w +'" height="' + imgthumb_h +'" alt="" />';
    item_embed = '<a href="' + item_uri + '">' + imgthumb_htm + '</a>';
    return prompt("　　　　　　　　　　　アイテムの埋め込み　　　　　　　　　　", item_embed);
  } else {
    return;
  }
})(jQuery);

以上を適当にJavaScriptファイルとして作成してサーバーにあげておき、このファイルのJS Loader ぽいコードを作り、それをブックマークレットにすれば同じような動作になるはずです。

余談ですが、アイテムの編集のところでform要素のなかにtextarea を流し込むと、「説明」というフィールドがおかしくなるみたいでした（なので、とりあえずプロンプト）。

具体的には、上で作ったHTMLをappendToする、その後textareaが追加・表示されてから、「変更を保存」を押すとappendしたほうのフィールドが説明のフィールドに置き換わってしまいます。

mt.Vicuna Simple テンプレートに Pinterest の Pin it ボタンを設置してみます

はじめに

すでに使っている人向けで記述してますので、HTML構造については、本家サイト(vicuna.jp)など参照してください。

参考にしているのは、 Pinterest ブログ上に設置されているコードで、旧タイプのボタンをカスタマイズしたものです。

通常は、Pin It Button for Web Sites （http://pinterest.com/about/goodies/）のフォームにサイトのURL をいれて得たコードをもとに URLのパラメータを Movable Type 用のテンプレートタグに置き換えするなどしてカスタマイズします（このページではこの方法の説明はしません）。

表題のとおりに、mt.Vicuna テンプレートでの貼付け法で、ほぼ初期の状態で設置の動作を確認したものです。カスタマイズされたものについてはこのとおりに動作しない場合もあり得ます。

設置について

ボタンをつける箇所は、ブログ記事テンプレートの タイトル下の ul .info のリストに追加するということとして説明しています。

Pin itボタンパーツ

<li class="pint">
     <a class="pinit" onclick="pinitbtn(this);return false;" href="http://pinterest.com/">
        <img src="http://passets-ec.pinterest.com/images/pinit_preview_none.png" width="49" height="25" alt="pin it" />
     </a>
</li>

<ul class="info"></ul> 内にいれます。

Pin it をおこなう部分

前掲のコードはすでに設置されているものとして、以下のコードを</body> より前に設置

以下は、テンプレートタグを利用して直接 JavaScript コードを埋め込む場合です。

<script type="text/javascript">
//<![CDATA[
var pinitbtn = function(elm){
  var desc,url,media='', image='', section;
  desc = '<$mt:EntryTitle remove_html="1" encode_js="1"$>';
  url = '<$mt:EntryPermalink encode_js="1"$>';
 
  section = elm.parentNode.parentNode.parentNode.getElementsByTagName('DIV')[0];

      if (section) {
        image = section.getElementsByTagName('IMG')[0];
        if (section.getAttribute('class','textBody') && image && image.src) {
          media = image.src;
        }

      if (desc && url && media) {      
        window.open( 'http://pinterest.com/pin/create/button/?url='
        + encodeURIComponent(url)
        + '&media='
            + encodeURIComponent(media)
        + '&description='
            + encodeURIComponent(desc)
       , 'signin'
       , 'width=665,height=300,scrollbars=1,resizable=1');
      }
}
};
//]>
</script>

詳細

外部ファイルにしたいとき

タイトルなどの情報を JavaScript から取得する形にしたいときはそれぞれ url は location.href とか、rel=canonical(指定してあるとき)など、 desc はPin itしたときテキストエリアに入るテキストで、タイトルでいいときは document.title などです。

section でエントリの部分を拾ってきます。要素がカスタマイズされているとノードの取得がうまくいかないかもしれませんので適宜調整がいるでしょう。

記事に画像があるときとないときがあるような場合、記事中の画像の有無でふり分けて出力といった方法が考えられます。

Pinterest ブログのほうでは、ボタン設置の a要素の内容は空として、背景画像にボタンの画像をあてているようです。

mt.Vicuna Simple テンプレート

• mt5-theme-mtvicuna-simple GitHub

Pluploadでのメモ。アップロード先のディレクトリについてなど

以下は正しい情報でない可能性が高く個人のメモ以上のものはありませんのであしからずです。

• Plupload

上記サイトのダウンロードよりGPLv2ライセンスのものを一式もらってくる

今の時点では、Version 1.5.2 (2012-01-06)

examplesフォルダのcusom.html とか、jqueryフォルダ内のhtmlファイルをブラウザで開く（php動作下）。

アップロードしたファイルは、MAMPの環境だと、MAMP/temp/php/. に入っている

これをテストフォルダにするには、upload.phpファイルを開き、以下の行をコメントにする

• $targetDir = ini_get("Directive") . DIRECTORY_SEPARATOR . "plupload";

ちなみに、upload_tmp_dir はphp.iniのupload_tmp_dir = に記述されている場所にあたる。

MAMPだと、スタートページを開いて、phpinfoタブからupload_tmp_dir ディレクティブを調べれば確認できる

そして、$targetDir = 'uploads'; のコメント（//） を外すと、upload.phpが入っているのと同じ階層にuploadsフォルダが作られる

ローカルの場合ではセーフモードなしなので、本番サーヴァの場合にセーフモード対策も考慮しないといけないことになるかもしれない(5.3系ので試してるからそこまで考えてないけど)。

jqueryフォルダ内のページで、queue widget の HTML5 runtime などが動かなかったので、以下の対処。

upload.php というファイルが読み込めないことがエラーの原因なので、// General settings のurl: を正しいパスに書き換えればよいとおもわれる。

自分の場合はupload.php をjqueryフォルダ内にコピーしておこないました。

jQueryのLightbox効果のプラグインをFancyboxに移行することにしました。

サンプルのコードをよく読んでいなかったりして、コチラの手際が悪くて躓いていましたのでメモとして残しておきます。自分でも使い方はよくわかっていなくて、細かな解説ができませんのでそこのところはよろしく--ということで

Movable Typeテーマ、mtVicuna Simple(https://github.com/naoaki011/mt5-theme-mtvicuna-simple)を使われている環境のかたは、bundleされているようですのでプラグイン上で設定されたほうが早いです（たぶん）

設置までの大まかな流れ

• Fancybox一式をダウンロード、展開、サーヴァーにあげる
• jQuery本体の読み込み（CDN経由を推奨するとFacyboxのサイトには記載されている）
• Fancyboxのプラグインファイルとlightbox効果のスタイルシートを読み込ませる
• Fancyboxを有効にする
• 記事内で使用する箇所をFancybox用に調整する
• 編集記事を更新して完了

Facyboxのダウンロードは以下より。この記事作成の時点でヴァージョンは1.3.4でした

• Fancybox (Downloadのリンクバナーから)　

jQueryのロードは、Google APIs経由で

Lightbox表示のためのスタイルをhead要素に

<link rel="stylesheet" href="PATH/TO/fancybox/jquery.fancybox-1.3.4.css" />
 <!-- ファイル名の箇所はfancyboxフォルダ内のCSSファイルを参照のこと -->

次のようなことでFacyboxが使えるようになるみたいです。これがないと通常の画像リンクをクリックしたときと同じです。

class属性の値がfacyboxというものだったとして

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

<a href="test1.jpg" class="fancybox">
    <img src="test1_thumb.jpg" alt="" />
</a>

グループを使う場合は（my_groupというclassがあるとして）、

<script type="text/javascript">
$(document).ready(function() {

    $(a[rel=my_group]).fancybox({
                   'transitionIn'       : 'none',
                   'transitionOut'    : 'none',
                   'titlePosition'      : 'over'
   });

});
</script>

・・・・・・
<a href="test1.jpg" rel="my_group" title="test1">
    <img src="test1_thumb.jpg" alt="" />
</a>
<a href="test2.jpg" rel="my_group" title="test2">
    <img src="test2_thumb.jpg" alt="" />
</a>

・・・・・・

あと細かなカスタマイズとかは、
Tips & Tricks をみるといろいろ記載されているようです

オプションとかメソッドの一覧は以下に

• Fancy lightbox alternative| API & Options

久々のCustom Editor Button用追加ボタンです。投稿日のフォームへ秒数を00にして切り上げた状態のものをセットします。

最近公開時間の秒数を00にそろえるというのが自分のマイブームとなっています（何をやってるんだか）。ようするにきっちりと揃えたいというだけなのです。前は現在時刻をフォームにいれるボタンを使っていましたが、秒数だけ修正するのに面倒になってきたのでボタンを作ることにしました。

config.yamlファイル

name: PublishDateSetZeroSecondsButton
id: PublishDateSetZeroSecondsButton
key: PublishDateSetZeroSecondsButton
author_link: http://www.markdiary.com/
author_name: maRk
description: utility button for Custom Editor Button2 plugins
version: 0.1
#
# require Custom Editor Button 2 Plugin https://github.com/aklaswad/mt-plugin-custom-editor-button-2/
#
buttons:
    util_curtime2:
        title: Publish Date would set as zero seconds to Current Time
        image: images/now0.png
        code: |
            function ceb_util_curtime2 (text, args) {
                function zp(num) {
                    if(num < 10){num = '0' + num;}
                    return num;
                }
                var now = new Date();
                    if (zp(now.getMinutes()) < 59 ){
                        var date = '' + now.getFullYear() + '-' + zp(now.getMonth() + 1) + '-' + zp(now.getDate());
                        var time = zp(now.getHours()) + ':' + zp(now.getMinutes() + 1) + ':00';
                        document.entry_form.authored_on_date.value = date;
                        document.entry_form.authored_on_time.value = time;
                    } else if (zp(now.getHours()) != 23 && zp(now.getMinutes()) == 59) {
                        var time = zp(now.getHours()+1) + ':' +'00:00';
                        document.entry_form.authored_on_time.value = time;
                    } else { var time = zp(now.getHours()) + ':' + zp(now.getMinutes()) + ':00';
                      alert('wait few minutes');
                }
                return undefined;
            }

config.yamlは、PublishDateSetZeroSecondsButtonフォルダにいれてpluginsディレクトリへ。now0.pngは適当な画像を/mt-static/plugins/PublishDateSetZeroSecondsButton/images/.にいれるとします。

＊　Custom Editor Button 2プラグインが必要です

カテゴリ一覧のページに新はてなブックマークボタンを仕込んでおきました。

• 使いやすくなりました! はてなブックマークボタン

上のページでフォーム内でリンクを入力すると、なんか新しいはてなブックマークボタン作成のコードが作成されるらしいです。

あ、というか本題とはあまり関係ないですね。とかいってそのまま続けますが、このようなブックマークレットをブラウザに登録して使っています（←使っているといっている割にはブログ記事で活用してません）。

javascript:(function(){
var%20h='http://b.hatena.ne.jp/guide/bbutton?url=';
var%20u=encodeURIComponent(location.href)+'&title=';
var%20t=encodeURIComponent(document.title);
window.location.href=h+u+t;
})();

新はてなブックマークボタンのMovable Typeでのつけ方（というよりはコードのvalid指南？）は、小粋空間さんのページにまとめられているので参考になると思います。

• 新しいはてなブックマークボタンを(X)HTML validにする方法: 小粋空間

簡単に要点だけ拾っていくと（勝手に当方で解釈して付け足してる部分があります）以下のようです（「動く」という表現はスクリプトだかが動作するという意味です。いちおう）。

• 属性のdata-*はつけてなくても動く
• data-hatena-bookmark-layoutがないとブックマークボタンのスタイルがスタンダード（ブックマークボタン「B!」とブックマーク数の表示、通常サイズ）になる
• data-hatena-bookmark-titleがなくてもタイトルを自動で読んでくれる（たいていdocument.titleぽいですが、登録済みのエントリはそのブックマークエントリのタイトルなのか？？）
• async属性を外しても動く
• 複数のはてなブックマークボタン設置でもbookmark_button.jsは一回だけロードしておけばよい
• a要素のhref、ブクマエントリのページのリンク(http://b.hatena.ne.jp/entry/)＋MTEntryPermalink

どうでもいいことですが、ワタくシの場合はcreateElement()でスクリプト読み込むようにしてますです。アーカイブリストページにボタンを使う理由は――ええと、何だっけ。以上です

ウェブページのサイドバーの部分でAjaxなる読み込みをjQuery.ajax()関数を利用するというのをやってみました。

テンプレートのある部分をモジュール化させる方法はいくつかあるわけですが、jQuery+Ajaxで読み込むという方法もありましたのでやってみることにします。

とりあえず、新規エントリとかをサイドバーに読みこませる、みたいなものを想定してやるとします。

まずはjQuery.ajax()という関数を使います。モジュールを読み込むには、

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

のような形になります。(上記コードはjQuery.ajax(options) - jQuery 日本語リファレンスより抜粋させていただきました)

これをプラグイン化しますと以下に。なお、掲載コードはURLについて階層がフラットな状態でテストしたときのままとなっております。

(function() {  
       jQuery.fn.modules = function(config){
               config = jQuery.extend({
                        // デフォルトURL（引数省略のとき読み込むファイル）
                               url: "entries.html",
                       },config);

               var target = this;
               jQuery.ajax({
                      url: config.url,
                      cache: false,
                      success: function(html){
                               target.append(html);
                      }
                      });
}
})(jQuery);

プラグイン化の元ネタは、jQuery のプラグインを作成する : ブログの新着記事を表示：Goodpicにあるとおりなのでそちらを参照されたほうがわかりやすいとおもいます。

これをここではajax_modules.jsというファイル名で保存しておきます。

実際に読み込んで使うようなのは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="jquery.js"></script>
<script src="ajax_modules.js"></script>
<script> 
$(document).ready(function(){
  $("#entries").modules({url: "entries.html" });
  $("#category").modules({url: "category.html" });
});
</script>
</head>
<body>
<div id="entries"></div>
<div id="category"></div>
</body></html>

jQuery本体はいつものように先に読み込ませます。次に先のプラグイン化したファイルを読み込みます。

entriesというIDにモジュールを取り込みたいときは以下のように記述します。示したコードはサンプルにつき、流し込み先の要素を用意しましたが、$(element)にappendすることになってますので、既存の要素に追加する形でモジュール表示させることもできるでしょう。

$("#entries").modules({url: "entries.html" });

.modulesは先のajax_modules.jsのjQuery.fnの次に書いたものです（任意）。

今月（2010年7月）テンプレートなどカスタマイズした点をまとめた記事です

今月はほとんど触ってなくて、あれこれ弄ってないほうが安定しているというか普通なのですが。

• カテゴリページのはてなスターをはずした
• search_data.txtのXML宣言をとってみた
• search_data.txtのMIME Typeをapplication/jsonにしてみた

まったくカスタマイズというかんじではないのですが、気にせずいきます。

Ajax JSON検索のsearch_data.txtの先頭のXML宣言の役割とか未だにわからなくて、おそらくとりはずしても動くのでないかと思って外してみました。外すとまずいのかなあ、どうなんでしょうか。

3番目のやつはネタがなかったので無理矢理です。通常は配布元が説明されているとおりで動くことになってます（のはず）。

さてJSONのMIMEタイプですが、RFC 4627でapplication/jsonとして公開されています。

Ajax検索用のJSONファイルはtext/planeでも動いてたわけですがあえて（？）かえてみました。以下、.htaccessへの追加コード。備忘用です。

<Files "search_data.txt">
AddType application/json .txt
</Files>

あー、あとMTで拡張子.jsonなファイルができたかどうか試してなかった。。変更後の置換が面倒だったので（というよりお試し程度のことで再構築したくないような）.txtのまま使うことにしました。.jsonでやったとしても（httpd.confになければ）AddTypeはいるかも。

今月のカスタマイズは以上です。

バックナンバーは以下にあります。

• 当ブログのカスタマイズ記録

Movable Typeの管理画面カスタマイズで、プラグイン経由でフッターのJavaScriptにコードを追加しようとするときに、jq_js_includeにappendするとダイアログ表示にもコードが追加されることがあります。

MTの管理画面でjQueryを追加してカスタマイズするとき、footer.tmplファイルにある、<mt:var name="jq_js_include">にappendする（append=1として変数に追加する）という方法を以前このブログ内において公開していたのですが、これをおこなったときにダイアログを表示（テンプレートの初期化とか、エントリ編集画面のファイル・画像アップロードのときとか）したときにも追加されることがあるのを確認できました（MTOS 5.02）。

追加したコードの書き方によっては必要もない箇所でカスタマイズしたコードの読み込みがおこなわれることもあるのでないかとおもい、その対処を考えてみました。

なお、これが再現されるのはTransformerプラグインでsetvarblockを使いappend=1というオプションを利用したなどの場合で、直接当該テンプレートのコピーをalt-templeでカスタマイズした場合には問題ないものとおもわれます。

（１）footer.tmplの代替テンプレートを作り、カスタマイズ用の変数をセットする

先述の現象は、/MTシステムフォルダ/tmpl/cms/dialog/footer.tmpl で<mt:var name="jq_js_include">が記述されていることによります。

つまるところダイアログのテンプレートを除外すればいいわけなんですが、ここは条件式なしで変数をセットしておいてそこに追加させるという方法で対処してみます。

• /MTシステムフォルダ/tmpl/cms/include/footer.tmplファイルをコピーしてalt-tmplフォルダ以下に/cms/include/footer.tmplをおきます
• （コピー先の）footer.tmplをエディタで開いて、このリスト下に示すコードを追加します
• 編集後はサーヴァにローカルと同じ構成でアップロードします

footer.tmplに追加するコード。

追加の場所は</body>の上に。ここでは変数名をjq_custom_includeとした。

<script type="text/javascript">
jQuery(function($){
<mt:var name="jq_custom_include">
});
</script>
<!-- 追加コードここまで -->
    </body>
</html>

勿論、上記コードのscript内およびjQuery(function...内に直接になんらかの処理のコードを書くということもできます（このエントリではプラグイン等でappendを利用することを想定したつもりですが）。scriptタグ自体を追加側（setvarblock内）のコードに委ねるというのであれば変数の呼び出し（mt:var name=）だけ置けばよいことになるでしょう。

ちなみに追加させるほうのコードについては、jQuery()といった書き方を$()で書くことができるという寸法であります。

jQueryのコードの追加

あとは、setvarblockで任意のコードをappendです。

<mt:setvarblock name="jq_custom_include" append="1">
/* append code
 $("#foo").css("background", "#ffffff");
*/
</mt:setvarblock>

（２）スクリプトがダイアログのとき動作しないようにする

コードを書くにあたって、ダイアログと当該テンプレートで共通しないidかclassを参照するようにするのがコツなのですが、カスタマイズのスクリプトがダイアログのときは動かないようにコードで分岐しておく、ということも考えられます。

これには、dialog.tmplでルート要素にdialogというIDがつけられていることを利用します（ヴァージョンアップ等でなくなる可能性はあるかもです）。

以下は、jQuery('#dialog')でIDをgetして分岐するコードです。＊else{以降は適当な（動作に影響をおよぼさない）コードを。

<mt:setvarblock name="jq_js_include" append="1">
var gt_html_id = jQuery('#dialog');
if(gt_html_id==""){return;} 
else {
//  Do Something
jQuery('#bootstrapper').removeAttr('class');
}
</mt:setvarblock>

この例では、ID bootstrapperのclassがダイアログのiframeでリムーヴされずに残っているはずです。（Firebug等のツールで確認します）

（３）プラグインで対策してみる

例えば、include/header.tmpl でrelated_contentという変数がセットされており、/dialog/header.tmplではセットされていないことからこれを置換する形で。。

   my $old = qq(<mt:setvarblock name="related_content">);
   my $new = <<EOT;
#
# ここにappend予定のsetvarblock !
#
<mt:setvarblock name="related_content">
EOT

   $$tmpl_ref =~ s/$old/$new/;

あとこまかな事など

cms/dialog/header.tmplにおいて、<mt:var name="html_head">、<mt:var name="js_include">の記述があるので、appendする場合についても同じ状況になることがあるかも知れません。

以上の内容は自分が試した環境に基づいています。早い話、MT編集画面のカスタマイズをしていなければこれらの問題はまずおこらないということです。確認にはFirefox + Firebug でダイアログ表示のiframeを別のウィンドウで表示させたうえでページのHTMLをチェックしました。

個人的には、何かの操作ボタンを追加するとかいったカスタマイズについて、或る操作の時だけ必要というようなものはブックマークレットでもいいのではないかと考えています。

おもいつくままで整理できずにまとめたので、ちょっと何いってるのか分からないかんじで申し訳ありません。

Movable Type管理画面のブログのテンプレートリストのうち、インデックステンプレート一覧においてファイル名等でフィルタするためのブックマークレットを作りました。

また管理画面ネタ（何）なのですが今回はブックマークレットによる管理画面の操作です。

自分用で作ったので使えていればそれで満足というシロモノです。

javascript:(function(){
   var t;t=prompt('input: extension or keyword');
   if(t==null||t==''){return;}
   else{ 
    var gtTbl=document.getElementById('index-listing-table');
    var gtTD=gtTbl.getElementsByTagName('td');
     for(var i=0;i<gtTD.length;i++){var gtClass=gtTD[i].className;
       if(gtClass=='output-file'){
         var ndTxt=gtTD[i].firstChild.nodeValue;
            if(t=='@'){
                       gtTD[i].parentNode.style.display='';}
            else if(ndTxt.indexOf(t)==-1){
                       gtTD[i].parentNode.style.display='none';}
        }
     }
  }return;
})()

Movable Type 4.27でしか確認して（使って）いません。出力ファイルのファイル名とか拡張子を入力しましてそれ以外のインデックステンプレートを画面上から非表示にするというだけです。

なぜフィルタが必要かというとMT3.x時代の名残とでもいいましょうか。インデックステンプレートが増えてくるからなのですね。そういうことです。

いちいちフィルタするキーワード入力もメンドーというので拡張子によるものも併せて作成しました。一連のブックマークレットは以下のページにおいてあります（いちおうNETSCAPE-Bookmark-file-1形式になってます。たしかDelicious Bookmarkで登録できたとおもいましたがこの形式によるインポートは一回しか試したことないので自信なし。Firefoxの場合は「HTMLからインポート」です）。

• Filter index template list - Bookmarklets

追記： 2012/2

Movable Type 5.x 系では、以下を利用してください。

javascript:(function(){
   var t;t=prompt('input: extension or keyword');
   if(t==null||t==''){return;}
   else{ 
    var gtTbl=document.getElementById('index-listing-table');
    var gtTD=gtTbl.getElementsByTagName('td');
     for(var i=0;i<gtTD.length;i++){var gtClass=gtTD[i].className;
       if(gtClass.indexOf('output-file') > -1){
         var ndTxt=gtTD[i].firstChild.nodeValue;
            if(t=='@'){
                       gtTD[i].parentNode.style.display='';}
            else if(ndTxt.indexOf(t)==-1){
                       gtTD[i].parentNode.style.display='none';}
        }
     }
  }return;
  })();

練習がてらにGoogle AJAX SEARCH APIを利用してImage検索の検索ボックスをつくってみました。

以下順をおって記していきます。APIとおよびCode Playgroundについては確認した時点での動作に基づいてますので仕様変更・改良がおこなわれた場合はご容赦ねがいます。

それと前提としてですが、Googleのイメージ検索の結果で（自分のところのサイトが）サムネイル表示できるようになっているというのがあります。

Ⅰ: If you'd like to put an AJAX Search-Box...

Google AJAX SEARCH APIを開始するのにとりあえず以下ページを見にいきます。

追記： developers.google.com への移行などでドキュメントが存在しなくなっています。https://developers.google.com/image-search/v1/reference を参照してみるか、Googleカスタム検索を導入して、画像検索を有効にして運用すればAPIを使うことなく検索結果に画像を含めることができます。

サンプルコードのページです

• サンプル コード - Google AJAX Search API - Google Code

「基本」のセクションにあるサンプルをみにいくと、Code Playgroundに遷移します。ここでPick an APIに並ぶリスト内から自分の希望するものを選ぶとウェブ上でコードを試すことができます。今回はImage Searchを利用します(と、ここまでいってしまえばこの記事に戻ってくる必要はたぶん無いとおもうんですが)。

Ⅰ-ⅰ: About AJAX API Key

APIキーについては以下のページを参照してみてください。キーの使用については任意である等が記載されています。

• AJAX API キーの使用 - Google AJAX Search API - Google Code

ちなみに、「http://www.google.com/jsapi?key=」以下の文字列のことです。

Ⅱ: To make image search-box

Google Code PlaygroundのImage Searchで自分のサイトのイメージ検索ボックスを作ってみます

• Google Code Playground #site_restrict

ここで自分のドメインで試してみます。Edit HTMLのボタンをクリックして編集します（自分が試したときは初期値に"nasa.gov"[米NASA Home]がはいっていました）。setSiteRestriction()の値を自分のドメインに変えてみます。

• [例]imageSearch.setSiteRestriction('markdiary.com');

たいていは、execute()の値も変えないと自分のサイトの結果が出ないとおもいます。なので適当にImage検索でヒットするワードにするか、値をなしにしてみます（あるいはコメントアウト?）。

• [例1] searchControl.execute('nurie');
• [例2] searchControl.execute();

ここまでできたら、Run Codeボタンを押して実行してみます。

Edit Codeのコードをまるまるコピーするか、下向き三角印のメニューからExportするなどしてサンプルをゲットします。

Ⅲ: Completed page

完成したページは以下のようになります。

あとはスタイルなど自分のページにあわせた加工をするなどしてページに組み込みます。

• Google AJAX Search API サイト検索：イメージ

ページのテキストを選択し反転表示になってる状態でテキストの内容をフォームにというやつです。

テストページとして作成したものです。

• Selected textの何か

document.getSelectionとか、その辺のです。よくマウスでテキスト選択したら何かあらわれてくるみたいな。ヒトによってはお節介にみえるというか。。

テストページでVicunaテンプレートのID名とか使わせてもらいましたが、本当のところは実装してみようかなとか思ってたのですけど、完成度がいまいちだったので取りやめにしました。

Movable Typeのmt.jsファイルに追記することで、イベント表示のようなものを表示するカスタマイズを考えました。

この時期でイベントというと、「エイプリルフール」でしょうね。

でもちょっと大がかりな（謎）ものを思いついても、時間ねーとかなるし、MTなんかは場合によってはテンプレートに再構築が必要にもなってきてちょっと手間だったり。

こんなときmt.jsファイルに少しコードを追加してみたらどうよ、というのを思いつきました。ネタなので思いつきだけで終わってもいいんですがとりあえずやってみました。

だいたいこのような感じです。中身だとか時間の取得とかはてきとうです。getElementByIdでも任意なところに追加してもいいかも。実行されるとページの上のほうに何か表示されるということになってます。

<mt:IfBlog>
function event(){
    var today = new Date();
    var month = today.getMonth();
    var day = today.getDay();

    if (month==3 || day == 1 ){
        var mybody = document.getElementsByTagName("body")[0];
      if(mybody){
        var message = document.createElement("div");
        var atr= document.createAttribute("id");
        atr.nodeValue= "event";
        message.setAttributeNode(atr);
        var htm='<span class="event" style="position: absolute;top:0;left:0;margin:0 3px;width: 90%;">message here.</span>';

        mybody.appendChild(message);
        message.innerHTML=(htm);
       }
    }
}

window.onload = function() {
event();
}

</mt:IfBlog>

feedをパースするjQueryのプラグインを使ってこのブログのフィードを読み込んでみました。

以下が提供もとのサイトです。Windowsで試すにtar.gzが展開できるアプリケーションがいるかもです。ローカルで試すのにローカルサーヴァの環境が必要かと

• jFeed: JavaScript jQuery RSS/ATOM feed parser plugin - jf-hovinne.blog

1. jQueryとjFeedを読み込む

展開後のexample.htmlなんかがシンプルなサンプルかと。お決まりな感じですが、先にjQuery（同梱されてます）とjfeed.jsか、jfeed.pack.jsを読み込んでおきます

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jfeed.pack.js"></script>

2. ちょっとパースさせてみる

今回はブログのAtomフィードをつかうってことで置き換えてみます。

サンプルと一緒ですが、

jQuery.getFeed({ url: 'atom.xml', success: function(feed) {
           alert(feed.title);
       }
});

でフィードのタイトル（要素の中身）がアラートとなります。

3. フィードの読み込み

jFeed関係であれこれみていると、.getFeed()のsuccess:のところに関数をあてて別途関数を用意するといった書き方をされてるようなんでそれに倣ってみます。

$(function() { jQuery.getFeed ({ 
url: 'blog/atom.xml',
      success: readFeed
   })
});

url: の箇所に読み込むフィードのURLをいれます。

としたうえでreadFeed(){}を用意すると。

要素を得るには、先頭にfeedのつくプロパティと、先頭にentryのつくプロパティとがあり、エントリタイトルを得るには、entry.titleというように、コードをみれば直感的にわかるようになってます。

4. Authorだとかcategoryもパースしたい

サンプルとかみてるとカテゴリとかAuthorなんかを拾ってないようなので追加してみました。

jquery.jfeed.jsを以下のようにカスタマイズしてみました。（実のところ、Atomしか読まないのであればsrcフォルダにjatom.jsといったファイルが用意されていたりします）

item/ JFeedItem.prototype = というところに、

    // ↑　省略　↑
    id: '',
    author: '',
    category: ''
}

という具合に取り込みたい要素を追記します。

そうしたら今度はJAtom.prototype = の

jQuery('entry', xml).each( function() {
のところで、

item.author = jQuery(this).find('name').eq(0).text();           
item.category = jQuery(this).find('category').eq(0).attr('term');

上記のコードを似たような（というか真似ただけですが）記述のとこに追記して上書保存します。

categoryは、category/@term の値を読んでますが、正確には（MTのフィードでは）category[@schem="category"]を持つ要素のterm属性の値をもってこないといけないんだと思います（jQueryのセレクタの書き方をいまいち理解してませんorz）。

まあカテゴリ未設定なんてことは殆どないのでこんなんでもいいかなといったところです。

5. 一応完成品

• Test :: jFeed - jQuery feed parser plugin - atom feed

以上です。

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

Firefoxアドオン、Operatorのユーザスクリプトで、hAtomを抽出するものをためしてみたときのメモ。

ユーザスクリプトの入手（hAtom.js）

Operatorのユーザースクリプトについては、以下のページからコードを入手することができます。今回は一覧のなかにある「hAtom.js」というファイルです。

• Operator User Scripts（Mike's Musings）

ファイルを保存して登録する

jsファイルを開いて中身をコピーして、任意のテキストエディタで開き、（拡張子.jsで）保存します。

このファイルは登録後消してもかまわないので保存場所はデスクトップでもいいです。ワタくシは作業ファイルのフォルダにいれてますが。

オプション設定のユーザースクリプトタブのところで新規に先ほど作成しておいた、jsファイルを登録します。

次にオプション設定のところで以下のように、データ形式（hAtom-hEntry,hAtom-hFeed）を追加してあげます。

実際にウェブページを開いて確認してみる

hAtom対応のページをみて動作を調べてみます。

operatorツールバーを表示しているのならば、Atom Entry(s)、Atom Feed(s)というメニューが追加されています。

このブログでは今の時点でhAtom未対応なので、はじめから対応されている、ActionStreamsのページで確認するとします。

hFeedにhAtom to Atom/RSS transcoderへ送る動作をつけてみた

hAtom-EntryにはFirefoxのブックマークに登録する動作がついているのですが、それだけでもアレなので、hAtom transcoder という、hAtomからフィードに変換するツールに、当該ページを送信するという動作を追加してみました。以下のようなコードです。

ちなみに、或るページを変換するには

http://tools.microformatic.com/transcode/<output format（atom|rss）>/hatom/URL

のような形式です。ブックマークレットでできるよ、みたいな話ですがまぁよしとします。

// hAtom to Atom/RSS transcoder
var hatom_to_transcoder = {
  description: "to hAtom transcoder",
  shortDescription: "to hAtom transcoder",
  scope: {
    semantic: {
      "hAtom-hFeed": "hAtom-hFeed",
    }
  },
  doAction: function(semanticObject, semanticObjectType) {
    if (semanticObjectType == "hAtom-hFeed") {
      var url = window._content.document.location.href;
      return "http://tools.microformatic.com/transcode/atom/hatom/" + url;
    }
  }
};

SemanticActions.add("hatom_to_transcoder", hatom_to_transcoder);

実際の動作は以下のようになります

以下はtranscoderにURLを送ったとき生成されたフィードの状態です。

Firefoxのアドオン、Operatorのユーザースクリプト。はてなブックマークの特定のタグの注目エントリ一覧に飛べるようなものを書いてみました

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

• Postal Search APIs & Solutions ブログ: Firefox Addon Operator のユーザスクリプトを作ってみました

で、以下のページにサンプルコードなどがころがっているそうなので参考にしました。

• Mike's Musings » Operator User Scripts

はてなブックマークのタグの注目エントリ一覧のページにキーワードを投げるには

• http://b.hatena.ne.jp/t/タグ

のようにするといいようです。

書いたとかいっても、書き換えしてるだけですが以下のようにしてみました。文字のエンコードのしかたがわからなくて英語表記になってしまた。

// Hatena::Bookmark

var hateb_tags = {
  description: "HatenaBookmark TagSearch",
  shortDescription: "Hatena::Bookmark",
  scope: {
    semantic: {
      "tag" : "tag"
    }
  },
  doAction: function(semanticObject, semanticObjectType) {
    if (semanticObject.tag) {
      return "http://b.hatena.ne.jp/t/" + encodeURIComponent(semanticObject.tag);
    }
  }
};

SemanticActions.add("hateb_tags", hateb_tags);

動作は、はてなブックマークの自分のページだと以下のような感じです。導入方法とかは、前掲のサイトの記事に説明されています。

使いどころ

rel-tagがついてるページのところから、はてブでのタグの注目|新着 記事を検索したりとかできまする。

URLのとことか変えたりすれば、他のサービスとかもいけるかも

検索ボックスのカスタマイズです。JavaScriptでフォーカスのときにスタイルがかわるというのを試してみました。

Movable Typeを使っているかたは、プラグインでお世話になってることの多いMovalog(movalog.com)のデザインですが、グローバルメニューのところに、検索窓があって、フォーカス時に横幅が広がって、視覚的にスタイルが違うことがわかるようになっています。

検索窓がフォーカスされたとき、スタイルシートのclassを切り替えるという仕組みのようでした。

ということで、真似して作ってみましたのですが、IE(IE6）だと、スタイルが切り替わってないもよう。

で、調べたら、「IE の getAttribute / setAttribute: Days on the Moon」にて、getAttribute / setAttributeについてまとめられていました。そんなわけで、IEで動きそうなものということで作ったのが以下のページです。

• 検索ボックスのカスタマイズ
• 検索ボックスのカスタマイズ（2）

最初のほうは、style.cssTextを使って一度にスタイルの書き換えをさせたものです。（２）のほうは、document.getElementByIdを使ってclassの書き換えをしたものです。

どちらがいいかとかいうと、どっちもどっちもいう感じなんですけど、ま小ネタ程度ということで。
＃「:focus擬似クラスがあるじゃない」とかいわれそうなやかん。

ブログのカスタマイズネタとか好きなものでよくチェックしたりするのですけど、カスタマイズすることによる副作用とかもあるみたいでして。

風流さんのブログ、風柳亭 - 別館：書庫のある庵 -をちょっと別のフィードリーダーに登録しようとして気づいたんですけど、ブログのdescriptionのところに妙な記述がありました。atomフィードから一部を抜粋してみます。

きまぐれな風のつぶやきwindow.ccSOstyles=[[ 　...途中省略... 小技メモきまぐれな風書庫積読メモ伝言板

＃実際は改行コードが入ってるみたいですが、当方で編集させていただきました。

ここに記載されているのは、/atom.xmlのtagline要素で、atom1.0でいうとsubtitle要素にあたる部分です。

なんかスクリプトのコードっぽいなと思って調べたら、以下のページでカスタマイズされていたんですね。

• 【ココログ】SideOff：必要に応じてサイドバーを隠すボタン

ココログの仕様がどうなってるか、使っていないためにわかりませんが、このカスタマイズはサイドバー側で設置できないのがミソなのではないでしょうか。つまりこういうことでしょう。サイドバーの表示をoffにするボタンがサイドバー内にあったら、押してしまったらそれ以降、再びサイドバー表示させたいときに、クッキーを消したあとで再読み込みしないといけなくなりますから。

おそらく、そのような背景があって、ココログの「サブタイトル欄」にスクリプトを埋め込むというアイデアになったと読んだのですが。どうもこの部分、他のテンプレートで使いまわされているようで、フィードの場所にも反映されているようでした。

おそらくMTでいうところの、MTBlogDescriptionタグに、remove_htmlという、グローバルモディファイアが使われているためにこのような出力になっているのではないかと。

さて、このremove_htmlが指定されているとHTMLタグ除去がおこなわれます。このカスタマイズで紹介されているような場合、scriptタグの開始タグと終了タグが除去されてwindow.ccSOstyles=の箇所が出力されているというわけです。

ですのでフィードでスクリプトの部分が反映されなくするためには、メンテナンス性は落ちるかもしれないけど、読み込んでいる外部jsファイル内にスタイルの指定部分も入れるのがいいのかも。

＃本来、ブログの説明とかサブタイトルを書くところなので、できれば、このような場所にスクリプトを埋め込みたくはないですけどね。

del.icio.usのブックマークした記事リストを表示させる、よくあるリンクロールのページを作りました。今回は勉強という意味でJSONに挑戦することに

3ping.orgさまのページにBookmarkリストを表示させるページがあったので、なんかいいなと思って作ってみることにしました。

さてdel.icio.usには、JSON feedsが用意されてまして、以下のページにて解説があります。

• del.icio.us / help / json

JSON Post Feedsについては以下のページに解説とサンプルコードが掲載されています。

Delicious Help Feeds

• delicious/help/feeds

• JSON Post Feeds

おおまかな手順としてはじめに以下のURLを読み込ませておきます

<script type="text/javascript" src="http://del.icio.us/feeds/json/（ユーザ名）"></script>

なおデフォルトでは、15件の出力のようです。20件出力させるにはパラメータで「?count=20」のように指定します（デフォルトは15、最大100と説明に書いてあります）。

あとは、exampleのコードを参考に加工したりなんぞするわけです。

サンプルコードによれば、containerというidのつけられたDIVで括られた見出し要素のあとに、リストを追加するコードを記述しているようです。

ということで、作ったのが以下のページです。

• Bookmarks

JSONにtagについての情報が入っていましたので、それをもとにしてタグのリンクもつけるようにしてみました。

Continue reading

折りたたみのコンテンツ表示でAccordionというのがあるんですが、こういうのが需要があるのかどうか不明ですが、とりあえず作ってみました。

コンテンツが閉じたり開いたりするというアレです。ということで、つくってみたのがこちら

インデックス系ページでjQuery Accordion

ワタくシもよくわからずに作っている部分があるので、ソースとかかなりテキトーになってます。

Windows　IE7,Firefoxでしか確認してません。

jQueryプラグインの入手

http://plugins.jquery.com/project/accordion

jquery.accordion_2.zipというファイルをダウンロードします。jQueryも同梱されているようです

フォルダをサーバにアップしる

解凍したら、フォルダをアップします。

そのままのファイル構成でアップしました。例えば、ブログトップと同じディレクトリでしたら、

yourdomain.com 　[blog top]
      |--  js
            |---- jquery-accordion
                       |---- lib
                       |---- jquery.accordion.js

サンプルコードを参考にして埋め込む

プラグインを呼び出すコードは以下のようなものです

<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/chili-1.7.pack.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.easing.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/jquery.accordion.js"></script>

jQuery Accordionのデモページが用意されています。以下のページを参考にして色々カスタマイズします

http://jquery.bassistance.de/accordion/demo/

Vicunaのサイドバーでは、dl dt ddが使われていますので、With options, container is a definition list, header dt, content ddのサンプルを利用させてもらいました。

テンプレートでの修正箇所は、id:utilities以下のdlエレメントにて、折りたたみをおこないたい部分に対して、任意のidを与えます。デモページでは、「#list2」というidが付けられていますが、ここでは、#navigationとしておきました。

あとは、jQuery Accordionのデモページのソースをみたらだいたいわかることとおもいます。（説明放棄ｗ）

カスタマイズですが、event: 'mouseover'のところを、event: 'click'のように書くとオンクリックで開閉したりするみたいでした。

なお、Vicunaテンプレートでの動作確認のため、3ping.orgのwuさま提供の、スタイルテスト用ファイルを利用させていただきました。m(u.u)m

参照：　Vicunaのスキンをローカルで編集・調整する方法

JavaScriptを使った、タブによる表示の切り替えをやってみました。

月並みではあるんですが、JavaScriptを使い、ブログペットなどのブログパーツを切り替えて表示させるというのをやっておりまして。

これまでに、いくつかやり方が紹介されているのですが、自分用にともっとすっきりとした形のものがあったらいいな、と思っていろいろ調べたりなんやりしておりました。

で今回は、藤本壱さんが書かれました書籍、『JavaScript中級講座 - Ajaxを学ぶ前の基礎知識』（技術評論社）の内容からのスクリプトを利用させていただきました。

JavaScriptによってClassを書き換えるという方法で表示させる部分の切り替えをおこなう、というものです。ソースコードなどは書籍のほうに詳しく解説されていますので、ここでは省略します。

それで、一応できあがったのがこのページです。↓

切り替えサンプル

サンプルなので、ペットのコードのかわりにスクリーンショットにしてあります。また一部クラス名などをペット切り替え用として、こちらで書き換えさせていただきました。

ペット切り替えに特化することもないとは思いますので、応用すれば他の用途にも使えそうです。

情報としては既出なのですが、Google AJAX Feed API のDynamic Feed Control Wizardを使って特定ブログの新着記事のフィードを表示させてみます

http://marksanblog.blog119.fc2.com/ - PetBasketでここの新着記事を表示させていますが(現在運用していません)、そのやりかたです

まず、Dynamic Feed Control Wizard - Put feeds on Your Web Pageにアクセスして、取り込みたいフィードのソースを作成いたします

(1) Customize itにて、まずstyleを決めます。3種類用意されています。適当なスタイルのところのラジオボタンにチェックします。

Feeds Expressionにて取り込むフィードを指定します。ここではキーワードを指定することになっています。feedのURIを入れても反応しないようなのでご注意。ブログタイトルを入れると取り込んでくれるみたいです。

feedは複数指定も可能でFeeds Expressionの入力窓に入れるキーワードを、それぞれ半角カンマ（,）で区切ることで複数のフィードを指定できます（ためしに半角スペースのみで区切ったら、Jaikuのfeedがよみこまれてしまいました＞＜←それはそれで使えるかも）。

(2)Generate code for your web pageに貼り付け用ソースコードが表示されます。このソースをコピーして、表示させたいページに貼り付けします。なお、PetBasketのところでは、<head>～</head>にスクリプト部分を貼り付けして、<div id="feed-control"></div>は、表示させたい場所に貼り付けをしてあります。

Google AJAX API ですと、APIキーを取得しないといけなかったりするのですが、Wizardを使いますと、APIキーを取得しなくても利用することができます

参考

• AJAX Dynamic Feed Control - Google AJAX Feed API
• Getting Started - Google Feed API -- Google Developers(英語)

Lightbox2を使っている環境でBlogPetのようなフラッシュを使ったパーツと重なった場合の動作をテストしてみたました。

Lightbox JSでBlogPetがPNG背景の下になるように表示させる方法は、小粋空間さまにてしょうかいされています。

Lightbox JS/Litebox で BlogPet を背景画像の下に隠す
方法については再掲載のようでして、BlogPetでのソースコードが大幅に変更されたために、カスタマイズ方法がわからない、という声に応えてのエントリのようですね。BlogPetの配布するコードの中身の改変については、BlogPet側では改変されて使っているものについては、サポートできないようです。ですので、カスタマイズされたかたが、自分で対処しないといけないことになります。

それならば、BlogPetのソースを変更しなくても表現できるよう、代替のものを使うというほうが、後々のことを考えますと、利便性が高いのではないかと考えたわけです。

で、Lightbox2というものがありまして、これを導入させたらどうなるのか、というのを試しにやってみました。

» サンプルページ

動作としては、Lightboxを起動させると、フラッシュ部分が隠れるという表示になるみたいです。好みがわかれそうなんですが、オーバーレイの下にペットが表示されなくてもよくて、かつ画像が大きめである、というかたはこのような形で十分のように思います。

Lightbox2 はこちらからダウンロードできます。

» Lightbox 2

参考リンク

• 『Lightbox JS v2.0』の導入例
• Lightbox2.02入れました。