タブ整理の為のchrome拡張機能
開発動機
私はいつもこんな感じで開いたタブを整理しています。
まず溜っているタブから適当に1つ選び、何を調べていた時のものか思い出す
1つのタブだけで思い出せなければ、前後のタブも見る
思い出せれば、タブの並びや、ページタイトルなどから近くの不要なタブを判断する
この時点で判断が付けば1つ1つのタブを開かずに整理が出来るのですが、大量にタブを開いているとページタイトルは全く見えなくなり、結局1つ1つタブを開く羽目になります。 この時にタブがサスペンド状態だったりしたら、閉じる為にサスペンド状態を戻すことになり、何となく無駄な感じが否めません。
そこで丁度Elmで何か作ってみたい、というのもあったので拡張機能を自分で作ることにしました。
機能
- 全ウィンドウ、タブを一覧で見える
- タイトル、URLでタブを検索できる
- タブをまとめて削除できる
- タブをまとめて別ウィンドウに移動できる
以下ライブラリを利用することでfirefoxでも動作します。 github.com
Elmについて
ここを参考に作りましたが拡張機能作成という点において、Elmであることで極端に作成しづらいということはなかったです。 当然ながらAPIを呼び出す時にPortsを介さないといけないというElm特有の点はありますが、それ以外の点で(気付いていないだけかもしれませんが)特に面倒な点はありませんでした。
- ネストしたrecordの更新
- モジュール分割方法
他にも分からないことが多々ありますが、Elmアーキテクチャに沿って開発をすることで一貫性を保ち易いのではないかと感じました。 またreactやvueに比べると変化のスピードもそこまで早くないので、学習したことがすぐに陳腐化することもないのではないでしょうか。 今後も機会を見つけ利用したいです。
試した拡張機能
そもそも大量のタブが開かないようにする、タブを開ける数を制限する拡張機能を試しました。ただ、本来の作業(調べもの等)をしている最中に別の作業(タブの数を調整)が割り込んでくることになり、その点が煩わしくなり、使うのを止めました。
タブのリスト化をしてくれる拡張機能で OneTab を使ったのですが、一旦タブを全て閉じるという挙動がイメージに合いませんでした。あと、簡単に開いているタブを保存できる/しちゃうことで、整理するタイミングを失い、そのままタブを死蔵させそうな気もしました。
Asciidoctor Docker Container 日本語対応
上記をベースに日本語を使えるようした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
UML ダイアグラム
PlantUML に比べると機能は少ないが、javascript 製なので導入が容易
Railroad-diagram Generator
https://tabatkins.github.io/railroad-diagrams/generator.html
railroad ダイアグラム
javascript 製、Python 版もあり
出力形式は、svg
Syntrax
railroad ダイアグラム
Python 製
State Machine cat
diagrams
他のツールと異なり、ダイアグラム生成ツールのラッパー
javascript 製、ラッパー対象ツールもすべて javascript 製
以下ツールのコマンドライン化
AsciiDoc エディタ
動機
以前にオンライン AsciiDoc エディタを web サービスとして公開していましたが、ドメインの失効とともにサイトは閉じました。
CodeMirror を使い Vim / Emacs ライクなキーバインドを実装していたものの、やはり操作感は別物であり不満がありました。
そこで今回は公開サービスではなく、個人用サービスとして機能を簡素化し、エディタから簡単に使えるようにしました。
特徴
変換したファイルを /tmp/memoroux で管理する以外、データの保存は何も行いません。
拡張機能については、今後増やす予定です。
個人用と言ってもネット上に公開はされていますので、気になる方は Heroku の環境変数 USERNAME / PASSWORD を設定することで、Basic 認証を設定できるようにしています。
ブラウザでの使い方
Heroku 上に作成したサイトへアクセスし、AsciiDoc の編集を行います。
左のテキストエリアに入力し、画面上部の convert ボタンにより、右に変換結果が表示されます。
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 追記
faux の Vim キーバインド対応
faux で Vim キーバインドを使えるように対応を行った時に調べた CodeMirror (v5) のキーバインド拡張についてのメモです。
CodeMirror のキーバインドの拡張
https://codemirror.net/doc/manual.html#option_extraKeys
キーバインドの簡単な拡張方法として、extraKeys オプションを利用する方法があります。
ただし、この方法でキーバインドを追加した場合は KeyMap の設定に関わらず常に有効な設定となります。
今回は KeyMap 毎に別のキーバインドを追加したいので、この方法は利用できません。
KeyMap 毎の拡張方法を調べたのですが残念ながら見つけられず、諦めて各々の KeyMap 設定に直接追加する方法で拡張を行いました。
KeyMap 設定は、CodeMirror.keyMap オブジェクトにそれぞれ格納されており、標準の KeyMap であれば CodeMirror.keyMap.basic、 Emacs であれば CodeMirror.keyMap.emacs となります。
例えば Emacs であれば、以下のように任意のキーバインドを追加できます。
CodeMirror.keyMap.emacs['Ctrl-X Ctrl-C'] = function() { alert('bye!') };
しかし Vim はモードがある為か事情が異なり、この方法では追加できません。ただしその代わりに API が存在します。
Vim キーバインドの拡張
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 っぽい簡単なメモツール
デモ: https://naduma.github.io/faux/
CodeMirror を利用して、どこまで Emacs っぽいものを作れるのかを試したくなり、作成したツールです。
機能
課題
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 を実装しています。
あとは、日本語入力のオン/オフの影響を受けてしまいます。
最後に
dignod リリース
企業のブログを読んでいると、技術の最新トレンドやサービスの開発手法などを知ることができます。
その会社がどんな技術を使っているか、職場の雰囲気はどんな感じか、といったこともブログを通じて分かることがあります。
そんな企業のブログをどこかでまとめて読むことが出来ればと、 dignod を作りました。
ブログの他にも、
もまとめています。