OperaでもVimperatorとHit-a-Hintぐらいできるよ

と、Firefoxユーザーに言ってやる方法。

この人がおもしろいOperaの設定を公開している。

記事の一番下にある、"vimperopera.ini"というファイルをダウンロードして、opera:config#Keyboard Configurationのフォルダに入れて、Operaを再起動してから「詳細設定」の「ショートカット」で新しく追加されたvimperoperaというキーボード設定を選び、OKを押す。

Vimperatorでよく使うキーボードショートカットは全部再現したらしい。

OperaVimっぽく使う

  • 要はアドレス欄をVimコマンドラインに見立ててあるのだが、「コマンドラインは下だろーが!」という人はアドレスバーを右クリックして「カスタマイズ」を選び、表示場所を下にすればいい。
  • コマンドラインとショートカットでなんでもできるんだから、アドレスバーのボタンは全部消してしまえばいい。
  • Opera 9.5から採用になった新スキンはアドレスバーが太すぎて不格好だと思うなら、Opera Standard Slim Skinあたりを入れる。
  • Googleを開いたときに入力欄にフォーカスが移ってしまってウザイなら、同じページにある"blurgoogle.js"というスクリプトを入れよう。Google以外でも同じくウザイというならStop Form Focusを入れよう。
  • アドレス欄にフォーカスを移すショートカットは「:」なので、ここから実行したいページや操作はニックネームをつけてブックマークしておこう。
    • 作者自身は:bmarksと:bmarkをそれぞれGoogle Bookmarksを表示とGoogle Bookmarksに追加としているそうだ。
  • 標準の動作はすべてアドレスバーにフォーカスがない状態で、1キーまたは2キー連続押しショートカットを使う。

ショートカットの一覧はネタ元のサイトで見ることが出来る。

「f」キーにHint Mode、「;」キーにExtended HIint Modeというのがあるが、これが実はHit-a-Hintのことだ。

Hit-a-Hintを行うブックマークレット

「f」キーは

javascript:var bgcolor = '#FF0';var color = '#000';var hintlist = new Array();var hintedlinks = new Array();var map = new Array();var mapindex = 0;var choice = '';var keycodemapping = {'48':'0','49':'1','50':'2','51':'3','52':'4','53':'5','54':'6','55':'7','56':'8','57':'9','13':'Enter','27':'Esc','8':'Bkspc'};var originalTitle = document.title;function drawHints(){document.addEventListener('keypress',interpretKeyStroke,true);document.title+=' - ';var allLinks = document.getElementsByTagName('a');var viewportStart = window.pageYOffset - 5;var viewportEnd = viewportStart + window.innerHeight + 10;for (var i = 0;i<allLinks.length; i++){linkYcoord = getAbsoluteY(allLinks[i]);if(linkYcoord > viewportStart && linkYcoord < viewportEnd && allLinks[i].href != '') {hintedlinks.push(allLinks[i]);}}for (var i = 0;i<hintedlinks.length; i++){var hint = document.createElement('span');hintlist.push(hint);hint.style.backgroundColor=bgcolor;hint.style.color=color;hint.style.position='absolute';hint.innerHTML = mapindex;map[mapindex]=hintedlinks[i].href;mapindex++;hintedlinks[i].appendChild(hint,hintedlinks[i]);}}function getAbsoluteY(element){var y = 0;while (element) {y += element.offsetTop;element = element.offsetParent;}return y;}function removeHints(){for (var i=0; i<hintedlinks.length; i++){hintedlinks[i].removeChild(hintlist[i],hintedlinks[i]);}choice='';document.title=originalTitle;document.removeEventListener('keypress',interpretKeyStroke,true);delete map;delete hintlist;delete hintedlinks;}function getURLchoice(){return (map[choice]==undefined) ? False : map[choice];}function interpretKeyStroke(e){var key=keycodemapping[(typeof event!='undefined')?window.event.keyCode:e.keyCode];if(key=='Enter'){window.open(getURLchoice());removeHints();}else if(key=='Esc'){removeHints();}else if(key=='Bkspc'){choice=choice.slice(0,-1);document.title=document.title.slice(0,-1);}else if(key == undefined){removeHints();}else{choice+=key;document.title+=key;if((''+choice).length>=(''+mapindex).length){window.open(getURLchoice());removeHints();}}}drawHints();

というブックマークレットになっている。fキーを一度押せば各リンクの後ろにヒントが表示され、ヒントを入力してエンターを押すとリンクを新しいページで開く。一々エンターを押さなくても、ヒントが一意に定まった時点でリンクを開いてくれる。デフォルトでは表示されるヒントは数字のみ。


「;」キーは

javascript:var bgcolor = '#FF0';var bghighlight = '#0F0';var color = '#000';var hintlist = new Array();var hintedlinks = new Array();var map = new Array();var choices = new Array();var mapindex = 0;var choice = '';var keycodemapping = {'48':'0','49':'1','50':'2','51':'3','52':'4','53':'5','54':'6','55':'7','56':'8','57':'9','13':'Enter','27':'Esc','8':'Bkspc','44':','};var originalTitle = document.title;function drawHints(){document.addEventListener('keypress',interpretKeyStroke,true);document.title+=' - ';var allLinks = document.getElementsByTagName('a');var viewportStart = window.pageYOffset - 5;var viewportEnd = viewportStart + window.innerHeight + 10;for (var i = 0;i<allLinks.length; i++){linkYcoord = getAbsoluteY(allLinks[i]);if(linkYcoord > viewportStart && linkYcoord < viewportEnd && allLinks[i].href != '') {hintedlinks.push(allLinks[i]);}}for (var i = 0; i<allLinks.length; i++){var hint = document.createElement('span');hintlist.push(hint);hint.style.backgroundColor=bgcolor;hint.style.color=color;hint.style.position='absolute';hint.innerHTML = mapindex;map[mapindex]=hintedlinks[i].href;mapindex++;hintedlinks[i].appendChild(hint,hintedlinks[i]);}}function getAbsoluteY(element){var y = 0;while (element) {y += element.offsetTop;element = element.offsetParent;}return y;}function removeHints(){for (var i=0; i<hintedlinks.length;i++){hintedlinks[i].removeChild(hintlist[i],hintedlinks[i]);}choice='';document.title=originalTitle;document.removeEventListener('keypress',interpretKeyStroke,true);delete map;delete hintlist;delete hintedlinks;delete choices;}function interpretKeyStroke(e){var key=keycodemapping[(typeof event!='undefined')?window.event.keyCode:e.keyCode];if(key=='Enter'){choices.push(choice);for (var i=0;i<choices.length;i++) {if(map[choices[i]]!=undefined){window.open(map[choices[i]]);}}removeHints();}else if(key==','){choices.push(choice);hintlist[choice].style.backgroundColor=bghighlight;choice = '';document.title+=',';}else if(key=='Esc'){removeHints();}else if(key=='Bkspc'){choice = (document.title.charAt(document.title.length-1)==',') ? choices.pop() : choice.slice(0,-1);hintlist[choice].style.backgroundColor=bgcolor;document.title=document.title.slice(0,-1);}else if(key == undefined){removeHints();}else{choice+=key;document.title+=key;}}drawHints();

となっていて、これを押すと同じようにヒントが表示されるのだが、今度はヒントが一意に定まってもリンクには飛べない。その代わり、コンマで区切ってヒントを何個も叩くことができる。エンターを押すと選択したリンクが全部開く。入力したヒントは、色が変わるのと同時にページのタイトルに付属していくので視覚的だ。


改良した。


あれこれ

  • この作者自身もFirefox+Vimperatorな環境から移行してきた人らしい。
  • 改善できる点があれば是非教えてほしいと書いてある。
  • Hit ModeとExtended Hint Modeは正直言って、FirefoxアドオンのHit-aHint 0.91とか0.80よりかなり完成度は上だと感じる。僕はVimもVimperatorも使わないのでVimperoperaは使わないと思うが、この二つは絶対に入れておきたい。
    • ヒントを数字ではなく好きな文字にする方法がわかる人はコメントください。
  • それにしても恐るべし、連続押しショートカット。

関連