Hit-a-HintのためのChrome拡張機能を作った

Chrome ウェブストア - Moly HaH

キーボードの入力でリンクに飛べるHit-a-Hintを実現するためのChrome Extensionを作った。
Hit-a-Hint (HaH)とは、特定のキーを叩くと各リンク上にヒントとなる文字列が表示され、その文字列を入力するとリンクに飛べる機能。
画像は、ヒントを表示させた時のもの(初期設定では"E"に割当て)。

実のところ、すでにChrome WebStoreには同様の機能を実現する拡張機能がいくつか存在している。
しかし、FireFoxのKeysnailアドオンのHoKプラグインによるHaHの快適さに敵うものは、探してみても見つからない。
というわけで、このMoly HaHを自作した。
もっとも、この拡張機能を利用するような場合、大抵はVichromeやKeyconfigなどの一般的なキーバインド拡張機能と一緒に使うことになると思う。
それらの拡張機能自身もHaHを提供しているが、その機能のかわりにこのMoly HaHをアサインすると、より快適なキーボードによるブラウジングができるようになる。といいなー

(2013.9.7 追記)
この拡張機能との併用に最適なキーバインド拡張機能Moly Keysを作った。

キーバインドが簡単にできるJavaScriptライブラリを作った

GitHub - slaypni/hapt: A key bindings listener for JavaScript.

押されたショートカットキーを手軽に監視するためのJSライブラリを書いた。
使い方の簡単な例はこんなかんじ。

// load hapt.js before executing following scripts.

hapt.listen(function(keys){
  switch (keys.join(' ')) {
    case 'E':
      // do something.
      return false; // prevent event propagation.
    case 'Shift Alt A':
      // do something.
      return false;
  }
  return true;
});

addEventListener()とかから書くよりも全然楽になるはず。

macでtmux導入したときの参考記事まとめ

先日、
近頃の開発環境 : Mosh、z、tmux、Emacs、Perl について
の記事を読んで、tmuxでemacsとshellを並べるのイイ!と思ったので、自分の環境に導入したときのまとめも

tmux

まずは
tmuxのすすめ
を参考にemacs風な初期設定

bind 0 kill-pane

とかも設定ファイルに追加した

tmuxではマウス操作が便利らしいので
tmux を使う
を参考に機能を有効にする

しばらく使っていると、tmuxの内と外でクリップボードが別々なのが不便!だったので
X環境のクリップボードやOS Xのペーストボードとtmuxのバッファを連携する方法
でいいかんじに
reattach-to-user-namespaceはbrew installでも導入できる

emacs (terminal)

emacsをtmuxのなかで使っていると、"C-."など一部のキーバインディングが効かないという事態が発生
ターミナルのEmacsでも特殊キーコンボ
を参考にiTermの設定を変更したら動くようになった

python-mode.elで"C-c C-c"したときの挙動をpopwin.elで改善

emacspython-mode.elで"C-c C-c"(py-execute-buffer)で編集中のbufferを実行できる。
でもそのときにipythonを表示するために行われるwindowの分割があまり良い感じじゃない。
ipythonのshellを表示するバッファが選択中のwindowを乗っ取るような具合に表示されてしまう。

そこでpopwin.elも使って挙動を良い感じにしてみた。
init.elに

(defadvice py-execute-buffer (after popwin-python-shell-window activate)
    (popwin:popup-buffer "*IPython*"))
(setq py-split-windows-on-execute-p nil)

これでインタラクティブシェルはpopwinを使って画面下で開くようになる。

ブレストと発想術

イデアを出す方法としてよく挙げられる"ブレスト"と"発想術"。
さらに、そのそれぞれにもやり方はいろいろあると思います。
このエントリでは、それら(のいくつか)に共通してそうな概念から、いわゆる"アイデアの出しかた"を考察してみます。

"アイデアのだしかた"では、次の3ステップを何度も反復することで"良いアイデア"にたどり着くことを試みてそうです。

1. いろいろな要素(単語)をとりあえず出してみる。
2. それらとテーマを結びつけて、なんでもいいから言ってみる。
3. 出てきたいろいろなアイデアのなかから良さそうなのを次のテーマとする

また、この反復を開始する前に、もとにするテーマは決めておきます。
"発想術"は、これらのステップ(のいずれか)をサポートする役割をしているといえそうです。
また"ブレスト"では、複数人で行うので、より突飛と感じられる要素がでてきそうです。
それは、より斬新なアイデアにつながることもありそうですが、場合によってはそれを否定したくなることもあるかもしれません。
でも、1から2のステップですべきなのはいろんなアイデアをだすことです。
"とりあえずいろいろ言ってみる"ということが、否定によって滞ってしまうのは避けるべきです。
とりあえずたくさんアイデアをだしておいて、そのなかから良さそうなものを選べばいいのです。

この方法が必ずしも唯一ではないでしょうが、このコンセプトで説明できそうなのはいろいろな気がします。

リンク先サイトのサムネイルをポップアップ表示するブックマークレットを作ってみた

リンク先サイトのサムネイルをポップアップ表示するブックマークレットを作ってみた。
Anchor Thumbnail Glass

動機は、リンクのリストがずらーっと並んでるページで、手早くリンク先サイトを眺めたいなー、と思ったことから。
て、この動機は先の記事Anchor Thumbnails Catalogといっしょだったりだけど。
実際、このスクリプトAnchor Thumbnails Catalogの準備みたいな感じで作ったものだったり。

このブックマークレットを使うと、カーソルを合わせたときに、リンク先のサイトをポップアップで表示する。

サムネイルはiframeで表示しているので、ポップアップ表示のまま表示されてるサイトを操作できる。

Anchor Thumbnail Glass

リンク先サイトのサムネイルを一覧表示するブックマークレットを作ってみた

リンク先サイトのサムネイルを一覧表示するブックマークレットを作ってみた。
Anchor Thumbnails Catalog

動機は、リンクのリストがずらーっと並んでるページで、手早くリンク先サイトを眺めたいなー、と思ったことから。

サムネイルを表示する方法は、2種類から選択できるようにした。
"imageモード"は、サムネイル生成サービスを利用して、画像をサムネイルとした方法。
"iframeモード"は、iframeを使ってサイトを表示する方法で、表示されてるサイトを直接操作できる。

"iframeモード"では、CSSのtransformを使うことで、サイトを縮小して表示している。
ただし、この方法では、リンク数などによってはCPUやメモリなどのリソース消費が膨大になる。
そういった場合は、"imageモード"を選択すれば快適。

http://hp.vector.co.jp/authors/VA038583/images/anchor_thumbnails_catalog_min.png

Anchor Thumbnails Catalog