Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OSC 2011 KeySnail

8,751 views

Published on

最終鬼畜キーボードブラウジング

OSC 2011 KeySnail

  1. 1. KeySnailHow to become a Real Programmerid: mooz / @stillpedant
  2. 2. ーー1982年
  3. 3. “Real Programmers Don’t Use Pascal”「本物のプログラマはPascalを使わない」 ーー Ed Post
  4. 4. ントは不要である。 コードは一目瞭然なのだ。本物のプログラマは9時から5時まで働いたりしない。本物のログラマはネクタイをしない。本物のプログラマはLISなど使わない。本物のプログラマはハイヒールを履かない。本物のプログラマは構造化プログラミングを共産主義者の陰謀だと考えている。本物のプログラマはHaskeを使う。本物のプログラマはマウスを使わない。本物のプログラマは昼食時間に合わせて出勤する。本物のプログラマは妻の名を知らないかもしれない。しかし、ASCコードテーブル(か EBCDIC)はしっかり憶えている。本のプログラマは、GOTO を恐れずに使う。本物のプログラマは、5ページにわたる長い DO ループを混乱せずに書ける。本物のプログラマはOperaを使う。本物のプログラマは料理の仕方を知らない。食料品店は午前3時
  5. 5. ントは不要である。 コードは一目瞭然なのだ。本物のプログラマは9時から5時まで働いたりしない。本物のログラマはネクタイをしない。本物のプログラマはLISなど使わない。本物のプログラマはハイヒールを履かない。本物のプログラマは構造化プログラミングを共産主義者の陰謀だと考えている。本物のプログラマはHaskeを使う。本物のプログラマはマウスを使わない。本物のプログラマは昼食時間に合わせて出勤する。本物のプログラマは妻の名を知らないかもしれない。しかし、ASCコードテーブル(か EBCDIC)はしっかり憶えている。本のプログラマは、GOTO を恐れずに使う。本物のプログラマは、5ページにわたる長い DO ループを混乱せずに書ける。本物のプログラマはOperaを使う。本物のプログラマは料理の仕方を知らない。食料品店は午前3時
  6. 6. “Real Programmers Don’t Use Mouse”「本物のプログラマはマウスを使わない」
  7. 7. (c) http://www.nongnu.org/ratpoison/
  8. 8. 「マウスを使わずにWebブラウジングがしたい?」
  9. 9. 「そんな君にオススメのアプリがあるんだ」
  10. 10. KeySnailHow to become a Real Programmerid: mooz / @stillpedant
  11. 11. 自己紹介
  12. 12. id: mooz / @stillpedantAdd-ons for Firefox KeySnail Emacs 版 Vimperator.本日紹介. Clipple クリップボードマネージャ. gpum Gmail の未読メールを管理.Others percol UNIX のパイプに新風を.コマンドラインで anything.el Rios::Proxy expect にさよなら.Ruby でコマンドラインにフック. zlc.el Emacs のミニバッフゔ補完を zsh ライクに. org.js JavaScript で書かれた org-mode 記法のパーサ.
  13. 13. KeySnail
  14. 14. Emacs 版 Vimperator
  15. 15. KeySnail と Vimperator の比較KeySnail / Vimperator 両方が提供する機能 • 独自の設定フゔイルによるカスタマイズ • 独自のプラグインシステム • vim や zsh ライクなコマンド入力インタフェース • anything.el / unite.vim ライクなインタフェースKeySnail にしかない機能 • 様々な組み込みキーバインド(Emacs, Vim, w3m) • GUI によるカスタマイズ機能 • Emacs ユーザ向けの機能 (キルリング,前置引数) • プラグインの管理 UI + 自動更新確認機能Vimperator にしかない機能 • 要素の文字列を元にした Hit a Hint • 豊富なプラグインの数々 • その他,私の把握していない機能たくさん ;)
  16. 16. GUI による設定
  17. 17. 様々な組み込みのキーバインド
  18. 18. 簡単プラグインインストール
  19. 19. プラグインマネージャ
  20. 20. キーボードブラウジング入門には最適
  21. 21. 演習問題1. マウスを使わずにリンクを開く2. マウスを使わずに画像を Tumblr へ投稿3. マウスを使わずにテキストを選択し Tumblr へ投稿4. マウスを使わずに SlideShare のスライドを閲覧5. マウスを使わずに HTML の select を選択
  22. 22. マウスを使わずにリンクを開く問題 • 普通はマウスでリンクをクリックする • キーボードだけでこれを行うには?解法1: Firefox のキャレットブラウズモードを使う • Firefox に組み込まれている機能 • F7 キーで切り替えが可能 • 手順 1. F7 キーを押しコンテンツ内にキャレット(カーソル)を表示 2. 十字キーを使ってリンクまでキャレットを移動 3. Enter を押してリンクをたどる解法2: KeySnail の Hit a Hint プラグインを使う • hok.ks.js
  23. 23. マウスを使わずに画像を Tumblr へ投稿問題 • Tombloo をインストールしていることが前提 • 画像を右クリックして Reblog を選択する • キーボードだけで画像を選択するには?解法: hok.ks.js と kungfloo.ks.js を使う • HoK はリンク以外の要素も選択できる • 選択対象を CSS のセレクタ形式で記述可能 • kungfloo.ks.js は Tombloo のラッパー • HoK によって選択された要素を Tombloo 経由でリブログする
  24. 24. マウスを使わずにテキストを選択し Tumblr へ投稿 問題 • Tombloo をインストールしていることが前提 • テキストを選択して Reblog を選択する • キーボードだけでテキストを選択するには? 解法: hok.ks.js + kungfloo.ks.js + caret-hint.ks.js • caret-hint.ks.js は HoK によるキャレットの移動を可能に • キャレットを選択したいテキストの大体の位置に動かしたら • Ctrl + Space を押してマークを設定 (Emacs ユーザにおなじみ) • hjkl によりキャレットを移動し,テキストを選択し • kungfloo のリブログコマンドを実行
  25. 25. マウスを使わずにSlideShareのスライドを閲覧問題 • SlideShare のスライドは Flash / HTML5 • Flash 版にはショートカットキーが用意されていない • HTML5 版では ← と → でスライド送りが可能 • マウスでポチポチとクリックするのは面倒 • キーボードだけで快適に閲覧するには?解法: slidehsare.ks.js を使う • ページ送り / フルスクリーンの切り替えがキーボードで可能に • Flash 版でも問題なく動作
  26. 26. マウスを使わずに HTML の select を選択問題 • 都道府県の選択など,やたらと option の多い select 要素 • マウスを使って選択するのは面倒 • キーボードだけで高速に目当ての要素を選択するには?解法: prompt.selector() を使う • http://d.hatena.ne.jp/mooz/20100206/p1 • anything.el ライクなインタフェース • 様々な候補を受け取り,それをリスト形式で表示 • ユーザが文字を打ち込むと,マッチする候補に絞り込まれる • ユーザが候補を選択すると,選択された要素がコールバック関数へ渡る – 複数のコールバック関数を指定することも可能(ゕクション) • シンプルなインタフェースだが,可能性は無限大!
  27. 27. ご清聴ありがとうございました

×