Movable Typeでキーボードショートカットを導入
users
個別エントリーのページでお気づきの方もいらっしゃるかとは思いますが、当ブログにキーボードショートカットを導入しました。これがブログ合宿の小さな小さな成果の1つです。
トップページおよび月別アーカイブ、カテゴリアーカイブでは、「J」を押すと次のエントリーへ進み、「K」を押すと前のエントリーに戻ります。個別エントリーの場合、「N」で先のエントリー、「P」で前のエントリー、「M」でメインページ、つまりTOPページを表示。アルファベットは自由にいじれるので、「M」あたりは「T」に変更するかもしれません。
今回もまた自力ではなく、みらのさんの手ほどきで導入しました。そもそもこのショートカット自体、すでにみらのさんのブログで紹介されているのです。
Milano::Monolog: ホットキーに対応してみました
http://rebecca.ac/milano/mt/archives/001260.html
実はわたくし、知り合った人のブログを過去ログから読みまくるというおかしな習性を持っております。みらのさんのブログも以前に過去ログからすべてむさぼり読んだ経験があるのですが、その時にこのショートカットは非常に便利だったので、「これうちのブログでもやってみたいなあ」と密かに思っていたところ、ちょうどブログで教えを請う機会を得られたので導入に相成ったという経緯。
というわけで今回もMovable Type 3.3のタグクラウド設定に引き続き、教わったキーボードショートカットのMovable Type導入方法をまとめてみたいと思いますよ。
大まかな流れを説明すると、このキーボードショートカットはJavascriptで動いていて、<A>タグの中で「name=ほげほげ」という部分を見つけて動作するという寸法。なのでJavascriptのファイルをアップロードし、HTMLでjavascriptの記述を追記したら、表示したい部分部分に「name-ほげほげ」を設定していくことになります。
まずは一番重要なJavascriptのファイルですが、みらのさんのブログからダウンロードできます。本人許可もいただいておりますのでこちらからダウンロードしてください。というかそもそもがBloglinesのJavascriptベースということですが。ダウンロードしたファイルは、自分のサーバーの任意の場所にアップロードしましょう。
次にJavascriptを動作させるための記述。Movable Typeの「テンプレート」で任意のテンプレートを選択。まずは<head>の中に以下の記述を追加します。
<script language="javascript" src=">$MTBlogURL$</hotkey.js"></script>
<$MTBlogURL$>/hotkey.jsの部分は、自分がJavascriptをアップロードした場所を指定して下さい。いれる場所は</head>の直前とかがいいかな。
次に<body>タグに onKeyPress="hotkey(event)"を追加します。3カラムのうちのブログの場合はこんな感じ。
<body class="layout-three-column" onKeyPress="hotkey(event)">
ここまではどのキーを押すかに関係ない共通設定で、ショートカットの設定がいろいろつめこんだパックを使えるようにしたというところ。次はそのパックの中から、実際にどの機能を使うかを個別に設定していきます。
TOPページの場合、エントリーごとのタイトルに移動させるので、エントリーごとのタイトルを表示する<$MTEntryTitle$>に
name="article-<$MTEntryID$>"
を追記します。<$MTEntryID$>というのは各エントリーに割り当てられたIDの数値を呼び出すMTタグですね。で、せっかくエントリー移動ができるので、読みたいエントリーを個別に表示できるよう、リンク先も設定しておきました。実際に設定するとこうなります。MTentryTitleを文字列検索して、そこにこの設定を張り付けちゃえばOK。
<a href="<$MTEntryPermalink$>" name="article-<$MTEntryID$>"><$MTEntryTitle$></a>
これで「J」と「K」の設定は終わりました。Jを押すと、article-ほげほげと設定されたエントリーで数の多いもの（新しいもの）から少ないものへ、Kの場合は少ないものから多いものへと進んでいくことでエントリーの移動が可能になります。さらにエンターボタンを押すと該当のエントリー個別ページが表示されるという寸法。
これ以外の設定も基本は同じ。JavascriptのアップロードとHTMLの記述までを行なったあとで、個別エントリーページの場合、過去に戻る<MTEntryPrevious>には name="prev"を、先に進む<MTEntryNext>には name="next"を、メインページには name="main"を設定すると、それぞれのnameごとに設定されたjavascriptが動作します。私の設定例はこちら。
<MTEntryPrevious><a href="<$MTEntryPermalink$>" name="prev" title="shortcut:p">« <$MTEntryTitle$></a>（P） |</MTEntryPrevious>（エントリーを戻る設定）
<a href="<$MTBlogURL$>" name="main">メイン</a>（M） （TOPを表示設定）
<MTEntryNext>| <a href="<$MTEntryPermalink$>" name="next" title="shortcut:n"><$MTEntryTitle$> »</a>（N）</MTEntryNext>（エントリーを進む設定）
青いところはショートカットがわかりやすいように補足したテキスト。<<や>>は単なるマークなので気にしないで大丈夫です。
さて、せっかくショートカットを覚えたので、次はオリジナルのショートカットを設定してみました。ここからはちょっと話がややこしくなりますので「続きを読む」でお伝えします。
まずはJavascriptの流れから。ダウンロードしたhotkey.jsのファイルを「メモ帳」「秀丸」などのテキストエディタで開いてみて下さい。どのnameを設定すればどのキーが反応するかが書いてあります。
ちょっと読みにくいですが、ダウンロードしてきたままのファイルから124行目と131行目を見て下さい。
124行目：function gotoMainIndex(nav4) {
138行目： if( document.anchors[i].name.substring(0, 4) == "main" ) {
カナーリはしょった説明ですが、この場合「gotoMainIndex」という機能は、"main"が設定されているところを対象にするよ、ということになります。ちなみに(0, 4)の4は文字の数を表しており、「main」は4文字なので4ということに。
さらに画面下に行くと、「gotoMainIndex」をどのキーで動かすかが記述されています。「gotoMainIndex」で検索かけると見つかりやすいかな。
ちょっとややこしいですが、ここは数字でキーボードが指定されています。コメントでm - Mainという説明もされていますが、大事なのはwhichCode == 109のほう。mには文字コードで109という番号がついていて、あとはアルファベット順に連番ですのでnは110、lなら108ということになってます。
これで一通りの仕様がわかったので、次は自分でカスタマイズ。まずは先にfunctionのうち、「N」「M」「P」のようなURLリンク先に飛ぶものをコピーし、赤字の部分を変更した上で記述を追加しました。
function hatebu(nav4) {
var i=0;
var documentPosY = nav4 ? window.pageYOffset : document.documentElement.scrollTop;
var posb;
// find matching article
for (i=document.anchors.length - 1; i >= 0; i--) {
if( document.anchors[i].name.substring(0, 6) == "hatebu" ) {
window.location.href=document.anchors[i].href;
}
}
return;
}
name=hatebuと設定した場所のリンク先を表示するということですね。すでに何がやりたいかバレバレな気もしますが、次にキーボード指定も追加。以下の記述をreturn true;の前に追加します。
else if( whichCode == 98 ) {
// b - hatena bookmark
cancelEvent(e);
hatebu(nav4);
return false;
}
これで上記の機能を「b」を押した時に発動させます。// b - hatena bookmarkのところは単なるコメント説明なので、実際には「98番」である「b」を押したら「hatebu」という名称のファンクションを発動するだわさ、ということです。
最後にHTMLではてなブックマークの被リンク表示数の記述を変更。被リンク数の設定自体はこちらをご覧ください。
カイ氏伝: Movable Typeでエントリーのはてなブックマーク数を表示
http://blogging.from.tv/archives/000135.html
で、実際の変更手順ですが、
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="http://b.hatena.ne.jp/entry/image/large/<$MTEntryPermalink$>"></a>
に、赤い部分を追記しました。
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" name="hatebu"><img src="http://b.hatena.ne.jp/entry/image/large/<$MTEntryPermalink$>"></a>
と追記。これでキーボードの「b」を押すと、はてなブックマークの該当ページが表示されるようになりました。私のJavascriptファイル自体はこちらに置いてありますので、興味ある人はみらのさんのと見比べてみるといいかもです。素人の下手いじりなのであまりカンペキなものではありませんが恥ずかしながらご参考まで。
