Webkitベースの軽量ブラウザluakitを使ってみた(vimperatorユーザーにオススメ!)

今まではFirefoxにvimのような操作感を追加するプラグインvimperatorを使用していましたが、Firefoxよりも軽量で、細かく設定可能なWebkitベースのブラウザであるluakitの紹介をしたいと思います。

- [luakit](https://mason-larobina.github.io/luakit/)

筆者の環境:

- Ubuntu 14.04

インストール
============

コンパイルしない場合
--------------------

aptでインストールするなら、簡単にインストールできると思います。

```
sudo apt-get install luakit
```

端末から

```
luakit
```

で起動できることを確かめてください。

自分でコンパイルする場合
------------------------

自分でコンパイルする場合も、GitHubのREADMEを参考にしながら落ち着いてやれば、簡単にインストールできると思います。

- [luakit/README.md at develop · mason-larobina/luakit](https://github.com/mason-larobina/luakit/blob/develop/README.md)

Webkitのコンパイルまで自分でやろうとするとすごく時間がかかるらしい([Gentoo in Review - Luakit install and discussion - YouTube](https://www.youtube.com/watch?v=AgT--YpKh40))ので、ものぐさな人はやっぱりaptなどでバイナリバージョンをインストールしてきたほうがいいと思います。

必要なパッケージはREADMEにも書いてありますが、対応するUbuntuでのパッケージ名がわからずに苦労していたので、一応成功した場合のコマンドを残しておきます。

```
sudo apt-get install webkit-image-gtk libwebkit-dev libgtk2.0-dev sqlite3 sqlite3-pcre libsqlite3-dev gperf lua5.1 liblua5.1-0-dev libunique-dev lua-filesystem
```

これでひと通りインストールできるかと思います。

luakitのソースコードをGitHubのリポジトリから適当なところにクローンします。

```
git clone https://github.com/mason-larobina/luakit.git ~/.git/luakit
```

そうしたら、

```
cd ~/.git/luakit
make
sudo make install
```

でエラーメッセージなくコンパイル、インストールができれば完了です。パッケージが足りないとメッセージが出た時には、必要なパッケージを入れてからもう一度やってみましょう。


基本的な使い方
==============

luakitを起動させると、下にステータスバーがあるだけのシンプルなウェブブラウザが立ち上がるかと思います。
以下にはこれだけ抑えればとりあえず最初触れる程度の説明を書いておきます。
お前の長々とした説明なんていらねぇよという方はとりあえず`:help`でEnterしてください。ここに説明している以上のことが書いてあります。

画面移動
--------

`j`,`k`,`h`,`l`で上下左右の移動、など、画面操作に関してはvimと同じ感覚で操作することができます。
`Ctrl`+`f`,`Ctrl`+`b`で1画面上下にスクロール、`Ctrl`+`d`,`Ctrl`+`u`で半画面上下にスクロールするところも同じ。
`gg`でページトップ、`G`でページの最後に行くのも同じ。


ページを開く
------------

vimperatorと同じように、`o`を押すとステータスバーに`:open `と表示されるので、ここにURLを貼り付けてEnterキーを押すと、そのURLのウェブサイトを閲覧することができます。
また、検索エンジンを用いたキーワード検索を行うこともできるので、`o`を押した後にいくつかキーワードを入れてからエンターを押せば検索結果が表示されます。
ただし、デフォルトではluakitのページを検索するようになっているので、`:open google luakit search_engines`のように一つ目の要素にサーチエンジンを指定するワードを入れてやると、この例ではGoogleで検索をかけることができます。
ここらへんは後で設定をいじる際に扱います。

同じように`t`を押すことで`:tabopen `と出るので、これでURLやキーワードを指定して実行すると、新しいタブで検索結果を表示します。
`w`だと`:winopen `となって、ページは新しいウィンドウに表示されます。

`Shift`キーを押しながら`o`,`t`,`w`で、現在開いているページのURLを貼り付けた状態で上と同じ操作を行うことができます。
ニコニコで`?eco=1`などしたいとき便利。


リンクを開く
------------

それから、これもvimperatorと同じですが、`f`キーを押すことで、リンクなどがハイライトされて左側に番号が振られた状態になります。
この状態で飛びたいリンクの番号を押せば、同じタブ内でそのリンクを読み込むことができます。
ただし、たまにバグなのか仕様なのかわかりませんが、明らかに一つしか候補がないはずなのに複数ハイライトされたままの時があるので、そういった場合には`Tab`キーで緑色のフォーカスを移してからEnterキーを押せば大丈夫です。
数字は押しにくいのでアルファベットにしたいと思われると思うので、その設定も後で紹介します。
また、デフォルトでは文字が小さく、番号のブロックの色が見にくいので、ハイライトのスタイルの指定の仕方も後で紹介します。


タブの操作
----------

タブの移動は`gt`で次のタブ、`gT`で前のタブ、`Alt`+数字キーで好きな番号のタブに飛べます。
`>`,`<`でタブの順番を入れ替えられます。
`d`で現在開いているタブを閉じます。
`u`で閉じたタブを復元。
`r`を押すと再読み込みです。

ブックマーク
------------

`gb`と押すとブックマークページ(`luakit://bookmarks/`)が開きます(`gB`で新しいタブに開く)。
登録したブックマークはこちらに表示されます。
登録は、登録したいページを開いた状態で`B`キーを押すとブックマークページが開いて登録を行うことができます。


履歴等
------

ブラウジングの履歴は`:history`とすれば出てきます。
また、`o`、`t`で新しくページを開くときに`Tab`キーを押すと、この履歴も表示されるので、活用できると思います。
`M`を押した後にアルファベットのキーを押すと、クイックマークに登録され、`go`の後にそのキーを押すと同じタブ内でそのページを開くことができます。
同じように`gn`で新しいタブで、`gw`で新しいウィンドウで開くことができます。

`:qmarks`で現在登録されいるマークを確認でき、`:qmarkedit アルファベット`で、キーに登録されているURLを編集することができます。


luakitを閉じる
--------------------

普通に閉じるボタン等で閉じてもいいですが、コマンドやショートカットでも閉じれます。

- `ZZ` : 現在のセッション(タブ履歴等)を保持して終了
- `ZQ`/`D` : 現在のセッションを破棄して終了
- `:quit` : 現在のウィンドウを終了



設定編
======

さて、それでは基本的な使い方はわかったところで、色々と設定したいところが出てきたと思うので、それらの設定をしていきたいと思います。
タイトルにやりたいことを書いて、どうするかを書いてく感じで進めていきましょう。

めんどくさがりは僕の設定ファイルと並べてvimdiffしながら見てください。

- [dotfiles/luakit at master · ssh0/dotfiles](https://github.com/ssh0/dotfiles)

(その前に)準備
--------------

設定ファイルをコピーしてユーザー用の設定ファイルを作っておきます。

```
cp -r /etc/xdg/luakit ~/.config
```


フォントが汚いのを何とかしたい
------------------------------

`globals.lua`の該当行(後ろの方)に以下のようにフォントとフォントサイズを指定しておきます。

```lua:~/.config/luakit/globals.lua
domain_props = {
    ["all"] = {
        default_font_family = "TakaoPGothic",
        sans_serif_font_family = "TakaoPGothic",
        serif_font_family = "TakaoPMincho",
        fantasy_font_family = "TakaoPMincho",
        cursive_font_family = "TakaoPMincho",
        monospace_font_family = "Inconsolata for Powerline",
        default_font_size = 12,
        default_monospace_font_size = 13,
        minimum_font_size = 8,
        ・・・
    },
    ・・・
}
```

これでページのフォントは改善されたと思います。
しかし、現段階ではFirefoxのような太字の表示のされ方がされないので、改善でき次第まとめたいと思います。

それから、ステータスバーやタブのフォントは`theme.lua`で

```lua:~/.config/luakit/theme.lua
theme.font = "TakaoPGothic normal 9"
```

のように好きなフォントを指定すれば良いです。


ホームページを変更したい
------------------------

ホームページを変更するには、`globals.lua`の最初の方で

```lua:~/.config/luakit/globals.lua
-- Global variables for luakit
globals = {
    homepage            = "luakit://bookmarks/",
    ・・・
}
```

のようにして指定します。ブックマークページを開くようにすると何かと便利でした。


サーチエンジンの設定がしたい
----------------------------

`globals.lua`に、以下のように書きます。
コメント行にもあるとおり、'%s'にurlエンコードされたキーワードが入ることになります。

```lua:~/.config/luakit/globals.lua
-- List of search engines. Each item must contain a single %s which is
-- replaced by URI encoded search terms. All other occurances of the percent
-- character (%) may need to be escaped by placing another % before or after
-- it to avoid collisions with lua's string.format characters.
-- See: http://www.lua.org/manual/5.1/manual.html#pdf-string.format
search_engines = {
    -- default: Google検索
    default_search = "https://www.google.co.jp/search?q=%s",
    -- I'm feeling lucky!
    l = "https://www.google.co.jp/search?q=%s&btnI=I",
    -- "w": Wikipedia
    w = "https:ja.wikipedia.org/wiki/%s",
    -- "n": niconico動画
    n = "http://www.nicovideo.jp/search/%s",
    -- "nd": ニコニコ大百科
    nd = "http://dic.nicovideo.jp/s/al/a/%s",
    -- "p": Google画像検索
    p = "http://www.google.com/search?hl=ja&site=imghp&tbm=isch&source=hp&q=%s&oq=%s",
    -- "m": Google Map
    m = "https://www.google.com/maps/place/%s",
    -- "mfh": Google Map Navigation "from Home to ***"
    -- if you set the searching language 'English',
    -- then replace "自宅" to "Home"
    mfh = "https://www.google.com/maps/dir/自宅/%s",
    -- "mfw": Google Map Navigation "from Work to ***"
    -- if you set the searching language 'English',
    -- then replace "職場" to "Work"
    mfw = "https://www.google.com/maps/dir/職場/%s",
    -- "mfh": Google Map Navigation "from *** to Home"
    -- if you set the searching language 'English',
    -- then replace "自宅" to "Home"
    mth = "https://www.google.com/maps/dir/%s/自宅",
    -- "mfw": Google Map Navigation "from *** to Work"
    -- if you set the searching language 'English',
    -- then replace "職場" to "Work"
    mtw = "https://www.google.com/maps/dir/%s/職場",
    -- "ip": IP address search
    ip = "http://www.ip-adress.com/whois/%s",
    -- 'f': flickr
    f = "https://www.flickr.com/search/?text=%s&safe_search=3",
    -- "y": Youtubeで検索
    y = "http://www.youtube.com/results?search_query=%s&sm=3",
    -- "rt" Yahooリアルタイム検索
    rt = "http://realtime.search.yahoo.co.jp/search?p=%s&ei=UTF-8",
    -- "sc" Google Scholar検索
    sc = "http://scholar.google.co.jp/scholar?as_vis=1&q=%s&hl=ja&as_sdt=1,5",
    -- "q" Qiita 検索
    q = "http://qiita.com/search?q=%s",
    -- "g" Githubを検索
    g = "https://github.com/search?q=%s",
    -- "gu" Githubを検索(ユーザーを検索)
    gu = "https://github.com/search?q=%s&type=Users",
    -- "gs" Gistを検索
    gs = "https://gist.github.com/search?utf8=✓&q=%s",
    -- "t": 翻訳
    t = "http://ejje.weblio.jp/content/%s",
}

-- Set google as fallback search engine
search_engines.default = search_engines.default_search
```

ここで上げている設定は、自作の検索補助ツール[websearch](https://github.com/ssh0/web_search)でも使っているものです。
サーチエンジンの名称は何でもいいですが、そのワードを検索欄の一番初めに入れてしまう恐れのある名前を付けるのはやめましょう。あと長いのも使いにくいはず。

最後の行でデフォルトのサーチエンジンを指定しています。


タブとステータスバー、コマンドメニューの見た目を変更したい
---------------------------------------------------------

`theme.lua`を編集してください(雑)。

自分の設定は[ここ](https://github.com/ssh0/dotfiles/blob/master/luakit/theme.lua)にあるので、参考にしてもらっても構いません。


followモードを数字でなくアルファベットで選択するようにしたい
------------------------------------------------------------

`rc.lua`で、

```lua:~/.config/luakit/rc.lua
require "follow"
```

の後のコメントをコメントアウトします。自分の場合、そのままの配列だとやりづらかったので、vimperatorから持ってきたのを貼り付けて、以下のようにします。

```lua:~/.config/luakit/rc.lua
-- Use a custom charater set for hint labels
local s = follow.label_styles
follow.label_maker = s.charset("fjkasdhguonmerwc")
```


followモードの見た目を変更したい
--------------------------------

同じように`rc.lua`で`require "follow"`の後に、以下のように追記します。

```lua:~/.config/luakit/rc.lua
follow.stylesheet = [===[
#luakit_follow_overlay {
    position: absolute;
    left: 0;
    top: 0;
}

#luakit_follow_overlay .hint_overlay {
    display: block;
    position: absolute;
    background-color: #ffff99;
    opacity: 0.3;
    z-index: 999999999;
}

#luakit_follow_overlay .hint_label {
    display: block;
    position: absolute;
    background-color: #1c1c1c;
    color: #fefefe;
    padding: 1px 1px;
    font-family: monospace, courier, sans-serif;
    font-size: 12px;
    z-index: 99999999;
}

#luakit_follow_overlay .hint_overlay_body {
    background-color: #e4efff;
}

#luakit_follow_overlay .hint_selected {
    background-color: #00ff00 !important;
}
]===]
```

この設定では以下のように表示されます。

![screen_003.png](https://qiita-image-store.s3.amazonaws.com/0/54869/f0c3429c-1b5a-9403-358c-186d4028a3b5.png)


open等で補完するときにBookmarkが先に候補に上がって欲しい
--------------------------------------------------------

`rc.lua`で、`require "completion"`の後に以下のように書く:

```lua:~/.config/luakit/rc.lua
-- Add command completion
require "completion"`
-- Order of completion items
completion.order = {
    completion.funcs.command,
    completion.funcs.bookmarks,
    completion.funcs.history,
}
```


キーバインドを変更したい
------------------------

luakit標準の機能を呼びだすキーバインドであれば、`binds.lua`を編集することで、好きなようにキーバインドの設定を行うことができます。

自分がデフォルトから変更しているキーバインドを紹介しておきます。

### `y`でヤンクしたURLはクリップボードにも入れる。

```lua:~/.config/luakit/binds.lua
-- Yanking
key({}, "y", "Yank current URI to primary selection.",
    function (w)
        local uri = string.gsub(w.view.uri or "", " ", "%%20")
        luakit.selection.primary = uri
        luakit.selection.clipboard = luakit.selection.primary -- yank to clipboard too.
        w:notify("Yanked uri: " .. uri)
    end),
```


### `Y`でページのタイトルをヤンクする

```lua:~/.config/luakit/binds.lua
key({}, "Y", "Yank current title to primary selection.",
    function (w)
        local title = w.view.title or ""
        luakit.selection.primary = title
        luakit.selection.clipboard = luakit.selection.primary
        w:notify("Yanked title: " .. title)
    end),
```


### `Control` + `c`で選択範囲をクリップボードにコピーする

```lua:~/.config/luakit/binds.lua
key({"Control"}, "c", "Copy (as-in) control-c control-v",
    function (w)
        luakit.selection.clipboard = luakit.selection.primary
    end),
```


### `Alt` + `h`/`l`で隣のタブに移動する

```lua:~/.config/luakit/binds.lua
key({"Mod1"}, "h", "Go to previous tab.",
    function (w) w:prev_tab() end),

key({"Mod1"}, "l", "Go to next tab.",
    function (w) w:next_tab() end),
```
最近tmuxにこの設定を入れたら捗ったので。


### ex-followモードでヤンクしたURL等もクリップボードに移す

```lua:~/.config/luakit/binds.lua
ex_follow_bindings = {
    -- Yank element uri or description into primary selection
    key({}, "y", [[Hint all links (as defined by the `follow.selectors.uri`
        selector) and set the primary selection to the matched elements URI.]],
        function (w)
            w:set_mode("follow", {
                prompt = "yank", selector = "uri", evaluator = "uri",
                func = function (uri)
                    assert(type(uri) == "string")
                    uri = string.gsub(uri, " ", "%%20")
                    -- capi.luakit.selection.primary = uri
                    luakit.selection.primary = uri
                    luakit.selection.clipboard = luakit.selection.primary -- inserted
                    w:notify("Yanked uri: " .. uri, false)
                end
            })
        end),

    -- Yank element description
    key({}, "Y", [[Hint all links (as defined by the `follow.selectors.uri`
        selector) and set the primary selection to the matched elements URI.]],
        function (w)
            w:set_mode("follow", {
                prompt = "yank desc", selector = "desc", evaluator = "desc",
                func = function (desc)
                    assert(type(desc) == "string")
                    -- capi.luakit.selection.primary = desc
                    luakit.selection.primary = desc
                    luakit.selection.clipboard = luakit.selection.primary -- inserted
                    w:notify("Yanked desc: " .. desc)
                end
            })
        end),
}

add_binds({"ex-follow"}, ex_follow_bindings)
```

もともとのソースコード`/usr/local/share/luakit/lib/follow.lua`を直接編集してコードを挿入してもよかったのだが、まぁ変更したのは手元で見れる方がいいかなと思ったので、`binds.lua`で登録しています。
ただし、libにあるキーバインドを消す方法がわからなかったので、helpページをみるとex-followモードにyとYの説明が二つずつ書いてあって気持ち悪い。
きちんと動作しているので、気にしなければ問題はないですが、後々解決したいですね。



Uで:undolistを表示する
----------------

vimperator使ってる時もこのキーバインドをしていたので。

`u`で閉じたタブを復元するというのはundocloseというライブラリの中での機能なので、これをインポートした後に設定する必要がある。
`rc.lua`で`require "undoclose"`の後に

```lua:~/.config/luakit/rc.lua
-- Add command to list closed tabs & bind to open closed tabs
require "undoclose"

local key = lousy.bind.key
add_binds("normal", {
    key({}, "U", "View closed tabs in a list.",
        function (w) w:set_mode("undolist")  end),
})
```

のようにします。


ダウンロード先を指定したい
--------------------------

`rc.lua`で`require "downloads"`などの後に以下のように記述。
`os.getenv("HOME")`で環境変数`$HOME`の値が取れるみたいです。

```lua:~/.config/luakit/rc.lua
-- Add download support
require "downloads"
require "downloads_chrome"

-- Set download location
downloads.default_dir = os.getenv("HOME") .. "/Downloads"
downloads.add_signal("download-location", function (uri, file)
    if not file or file == "" then
        file = (string.match(uri, "/([^/]+)$")
            or string.match(uri, "^%w+://(.+)")
            or string.gsub(uri, "/", "_")
            or "untitled")
    end
    return downloads.default_dir .. "/" .. file
end)
```


ウィンドウタイトルに表示する文字列を変更したい
----------------------------------------------

ウィンドウマネージャによると思いますが、ウィンドウのタイトルがページ名ではなくて"luakit"とかで始まった方が検索しやすくて便利、というのはあると思います。
こういったのを変更するのもplugin等入れなくても簡単に編集できるのも魅力の一つですね。

`window.lua`の該当行(`<<<`の行)を編集:

```lua:~/.config/luakit/window.lua
update_win_title = function (w)
    local uri, title = w.view.uri, w.view.title
    title = "luakit" .. ((title and " - " .. title) or "") -- <<<
    local max = globals.max_title_len or 80
    if #title > max then title = string.sub(title, 1, max) .. "..." end
    w.win.title = title
end,
```


読み込み時以外はステータスバーを非表示にする
--------------------------------------------

これはvimperatorではなかなか難しかったように記憶していますが、luakitでは簡単に設定できます。

`window.lua`の該当行(`<<<`の行)を編集:

```lua:~/.config/luakit/window.lua
update_progress = function (w)
    local p = w.view.progress
    local loaded = w.sbar.l.loaded
    if not w.view:loading() or p == 1 then
        loaded:hide()
        w.sbar.ebox:hide()           -- <<<
        w.sbar.hidden = true         -- <<<
    else
        w.sbar.ebox:show()           -- <<<
        w.sbar.hidden = false        -- <<<
        loaded:show()
        loaded.text = string.format("(%d%%)", p * 100)
    end
end,
```


広告を非表示にしたい、adblockを入れたい
------------------------

これはプラグインを入れることで実現することができます。

- [AdBlock Lua module · mason-larobina/luakit Wiki](https://wiki.archlinux.org/index.php/Luakit#Adblock)
- [Luakit - ArchWiki](https://github.com/mason-larobina/luakit/wiki/AdBlock-Lua-module)

を参考に、まずadblock.luaとadblock_chrome.luaをインストールしてきます。

```
wget https://raw.githubusercontent.com/Plaque-fcc/luakit-adblock/master/adblock.lua -O ~/.config/luakit/plugins/adblock.lua
wget https://raw.githubusercontent.com/Plaque-fcc/luakit-adblock/master/adblock_chrome.lua -O ~/.config/luakit/plugins/adblock.lua
```

次に、adblockでブロックするサイトのリストを、好きなページからダウンロードしてきます。公式のeasylist.txtは強すぎたので使いません。

```
wget http://tofukko.r.ribbon.to/Adblock_Plus_list.txt -O ~/.local/share/luakit/adblock/Adblock_Plus_list.txt
```

この他にも追加したいものがあれば、`~/.local/share/luakit/adblock/`以下に拡張子".txt"をつけて保存します。

`adblock.lua`と`adblock_chrome.lua`を読み込むために、`rc.lua`の`-- Optional user script loading --`の行の後に、以下のように記述します:

```lua:~/.config/luakit/rc.lua
-- adblock
require "plugins.adblock"
require "plugins.adblock_chrome"
```

このように設定してからluakitを`:restart`で再起動し、`gA`を押すと、adblockの設定状況を表示したページに移動することができます。
`:adblock-enable`で機能をオンにし、`:adblock-list-enable 番号`で、画面右側に表示されている番号を指定して、アクティブにするフィルタを選ぶことができます。

ただし、ブロックした後に"読み込めませんでした"的なコメントが埋め込まれて表示されることもあって、見た目がよくなるわけでもない感じ。
そこら辺Firefoxのadblockplusはすごいよなぁと思う。


プライベートモードみたいなのが欲しい
------------------------------

デフォルトでは、プライベートモードのように履歴を残さずにブラウジングすることはできませんが(全部保存しないという方法はある)、
[private_browsing_tabs](https://github.com/weeezes/luakit_private_browsing_tabs)というプラグインを使うと、`:pr`というコマンドで、今開いているタブから開いたリンクや`:tabopen`で開いたタブの履歴は保存されなくなります。
ただし、匿名化を行ったりしてプライバシーを保証するわけではないので、単に履歴に残したくない場合にのみ有効だと思っていてください。

インストールは、端末から

```
git clone https://github.com/weeezes/luakit_private_browsing_tabs.git ~/.config/luakit/plugins/private_browsing_tabs
cp ~/.config/luakit/plugins/private_browsing_tabs/private_browsing_tabs.lua ~/.config/luakit/plugins/private_browsing_tabs.lua
```

としてダウンロードした後、`rc.lua`の`-- Optional user script loading --`の行の後に、以下のように記述します:

```lua:~/.config/luakit/rc.lua
-- private browsing tabs
require "plugins.private_browsing_tabs"
```

`:pr`で機能の有効無効をトグルすることができます。
また、プライベートモードではそのタブの色を変え、タブの名称も"(Private)"固定となっています。
デフォルトの色から変更したい場合には、直接`~/.config/luakit/plugins/private_browsing_tabs.lua`内の`-- Private tab label`以降の値を変えればいいです
ね。



まとめ
======

vimperatorに完全に勝てるかといったら、まだ力不足といった感じもするけれど、以前入れたときに比べると謎のCPU100%事件も起きてないし、設定がとっても自由なのは魅力的だし、何よりFirefoxやchromeに比べて超高速に起動するのが魅力的。
普段のブラウジングは全部これでやって、うまくいかないのはFirefox、Googleマップとか明らかにchrome優遇されてるやつなんかはchrome開くみたいな感じでいいかも。