タブ整理の為のchrome拡張機能

chrome.google.com

開発動機

私はいつもこんな感じで開いたタブを整理しています。

  1. まず溜っているタブから適当に1つ選び、何を調べていた時のものか思い出す

  2. 1つのタブだけで思い出せなければ、前後のタブも見る

  3. 思い出せれば、タブの並びや、ページタイトルなどから近くの不要なタブを判断する

この時点で判断が付けば1つ1つのタブを開かずに整理が出来るのですが、大量にタブを開いているとページタイトルは全く見えなくなり、結局1つ1つタブを開く羽目になります。 この時にタブがサスペンド状態だったりしたら、閉じる為にサスペンド状態を戻すことになり、何となく無駄な感じが否めません。

そこで丁度Elmで何か作ってみたい、というのもあったので拡張機能を自分で作ることにしました。

機能

  • 全ウィンドウ、タブを一覧で見える
  • タイトル、URLでタブを検索できる
  • タブをまとめて削除できる
  • タブをまとめて別ウィンドウに移動できる

以下ライブラリを利用することでfirefoxでも動作します。 github.com

Elmについて

qiita.com

ここを参考に作りましたが拡張機能作成という点において、Elmであることで極端に作成しづらいということはなかったです。 当然ながらAPIを呼び出す時にPortsを介さないといけないというElm特有の点はありますが、それ以外の点で(気付いていないだけかもしれませんが)特に面倒な点はありませんでした。

  • ネストしたrecordの更新
  • モジュール分割方法

他にも分からないことが多々ありますが、Elmアーキテクチャに沿って開発をすることで一貫性を保ち易いのではないかと感じました。 またreactやvueに比べると変化のスピードもそこまで早くないので、学習したことがすぐに陳腐化することもないのではないでしょうか。 今後も機会を見つけ利用したいです。

試した拡張機能

そもそも大量のタブが開かないようにする、タブを開ける数を制限する拡張機能を試しました。ただ、本来の作業(調べもの等)をしている最中に別の作業(タブの数を調整)が割り込んでくることになり、その点が煩わしくなり、使うのを止めました。

タブのリスト化をしてくれる拡張機能で OneTab を使ったのですが、一旦タブを全て閉じるという挙動がイメージに合いませんでした。あと、簡単に開いているタブを保存できる/しちゃうことで、整理するタイミングを失い、そのままタブを死蔵させそうな気もしました。

Asciidoctor Docker Container 日本語対応

GitHub - asciidoctor/docker-asciidoctor: A Docker image for using the Asciidoctor toolchain to process AsciiDoc content

上記をベースに日本語を使えるようしたDockerコンテナです。

https://hub.docker.com/r/nazuma/docker-asciidoctor-jp

カスタマイズした内容は主に以下となります。

  • 日本語フォント追加

  • asciidoctor-diagram で利用するツール等に日本語フォント設定の追加

詳しくは以下を見てください。

GitHub - naduma/docker-asciidoctor-jp: Asciidoctor Docker Container 日本語対応

ダイアグラムツール

ditaa, Graphviz(dot), PlantUML のようなテキストから図を作成するツールについての備忘録。

Asciidoctor Diagram に記載されていないものを対象にする。

nomnoml

github.com

Railroad-diagram Generator

github.com

Syntrax

github.com

State Machine cat

github.com

diagrams

github.com

AsciiDoc エディタ

github.com

動機

以前にオンライン AsciiDoc エディタを web サービスとして公開していましたが、ドメインの失効とともにサイトは閉じました。

CodeMirror を使い Vim / Emacs ライクなキーバインドを実装していたものの、やはり操作感は別物であり不満がありました。

そこで今回は公開サービスではなく、個人用サービスとして機能を簡素化し、エディタから簡単に使えるようにしました。

特徴

  • Heroku Button よる手軽な環境構築

  • HTML / PDF への出力

  • 一部拡張機能が利用可能 ( ditaa / Graphviz / PlantUML )

変換したファイルを /tmp/memoroux で管理する以外、データの保存は何も行いません。

拡張機能については、今後増やす予定です。

個人用と言ってもネット上に公開はされていますので、気になる方は Heroku の環境変数 USERNAME / PASSWORD を設定することで、Basic 認証を設定できるようにしています。

ブラウザでの使い方

Heroku 上に作成したサイトへアクセスし、AsciiDoc の編集を行います。

左のテキストエリアに入力し、画面上部の convert ボタンにより、右に変換結果が表示されます。

f:id:nazuma:20190213171339p:plain

API での使い方

私は Emacs を利用しているので、Emacs での使用例を書きます。

Emacs で以下の関数を定義します。その後、AsciiDoc ファイルを編集しては関数を呼び出し、その時に表示されるアドレスをブラウザで開くことで変換結果を確認できます。

なお Emacs のバージョンは、24.5.1 です。

memoroux-host には、作成した Heroku サイトのアドレスを指定してください。

(defvar memoroux-host "https://(app-name).herokuapp.com")

(defun adoc ()
  (interactive)
  (let ((url-request-method "POST")
        (url-request-extra-headers
         '(("Content-Type" . "application/json")))
        (url-request-data
         (json-encode-alist `((id . ,(md5 (buffer-file-name)))
                              (content . ,(buffer-string))
                              (type . "html"))))
        (url (concat memoroux-host "/convert")))
    (switch-to-buffer
     (url-retrieve-synchronously url))
    (goto-char (point-min))
    (re-search-forward "\n\n")
    (princ (concat memoroux-host
                   (assoc-default
                    'url
                    (json-read-from-string
                     (buffer-substring-no-properties (point) (point-max))))))
    (kill-buffer (current-buffer))))

2020.02.11 追記

Basic認証にも対応したelispを作成しました。

gist.github.com

faux の Vim キーバインド対応

github.com

faux で Vim キーバインドを使えるように対応を行った時に調べた CodeMirror (v5) のキーバインド拡張についてのメモです。

CodeMirror のキーバインドの拡張

https://codemirror.net/doc/manual.html#option_extraKeys

キーバインドの簡単な拡張方法として、extraKeys オプションを利用する方法があります。

ただし、この方法でキーバインドを追加した場合は KeyMap の設定に関わらず常に有効な設定となります。

今回は KeyMap 毎に別のキーバインドを追加したいので、この方法は利用できません。

KeyMap 毎の拡張方法を調べたのですが残念ながら見つけられず、諦めて各々の KeyMap 設定に直接追加する方法で拡張を行いました。

KeyMap 設定は、CodeMirror.keyMap オブジェクトにそれぞれ格納されており、標準の KeyMap であれば CodeMirror.keyMap.basicEmacs であれば CodeMirror.keyMap.emacs となります。

例えば Emacs であれば、以下のように任意のキーバインドを追加できます。

CodeMirror.keyMap.emacs['Ctrl-X Ctrl-C'] = function() { alert('bye!') };

しかし Vim はモードがある為か事情が異なり、この方法では追加できません。ただしその代わりに API が存在します。

Vim キーバインドの拡張

VIM Mode API

CodeMirror.Vim オブジェクトを通じて API を利用する形となります。

キーバインドの追加には、map または mapCommand を利用します。

map

map(lhs: string, rhs: string, ?context: string)

map はキーとコマンドのマッピング設定を行えます。

あるキーから別のキーやコマンドへ、または、あるコマンドから別のコマンドやキーへとマッピングすることができます。

例: gonextline コマンドで j を押した時と同じ動作をする

CodeMirror.Vim.map(':gonextline', 'j');

mapCommand

mapCommand(keys: string, type: string, name: string, ?args: object, ?extra: object)

mapCommand はキーに対応するコマンドのマッピング設定を行えます。

type に motion / operator / action などを指定し、name で実行するコマンド名を指定します。

新しいコマンドが必要な時は、defineMotion / defineOperator / defineAction で定義できます。

例:キー ZQ で bye とメッセージを表示する

CodeMirror.Vim.defineAction('end', function() { alert('bye'); });
CodeMirror.Vim.mapCommand('ZQ', 'action', 'end', {});

Emacs っぽい簡単なメモツール

github.com

デモ: https://naduma.github.io/faux/

CodeMirror を利用して、どこまで Emacs っぽいものを作れるのかを試したくなり、作成したツールです。

機能

課題

Emacs bindings demo

Also note that a lot of browsers disallow certain keys from being captured. For example,
Chrome blocks both Ctrl-W and Ctrl-N, with the result that idiomatic use of Emacs keys
will constantly close your tab or open a new window.

上記の通りブラウザにより一部キーがブロックされているので、上手く動かない部分があります。

OSにもよりますが、「Ctrl-N で新規ウィンドウが開く」「Ctrl-P で印刷画面が開く」などです。

また、CodeMirror の Emacs キーバインドには redo がありません。「Ctrl-G」がキャンセルのみの機能となっており、redo が出来ません。そこで今回はとりあえず「Ctrl-X Ctrl-/」など別のキーバインドredo を実装しています。

あとは、日本語入力のオン/オフの影響を受けてしまいます。

最後に

vim の方が再現性が高そうなので、vim バージョンを今度作ってみたいです。

dignod リリース

www.dignod.com

企業のブログを読んでいると、技術の最新トレンドやサービスの開発手法などを知ることができます。

その会社がどんな技術を使っているか、職場の雰囲気はどんな感じか、といったこともブログを通じて分かることがあります。

そんな企業のブログをどこかでまとめて読むことが出来ればと、 dignod を作りました。

ブログの他にも、

  • 公開しているコード(github

  • 勉強会などのイベント(connpass

もまとめています。