アウトライナー（Dynalist）と仲良くなったという話。最後はChrome拡張機能の活用について。

• アウトライナー（Dynalist）と仲良くなった

• ファイル・フォルダ機能と仲良くなった（Dynalist）

• ノート機能と仲良くなった（Dynalist）

• タグ機能と仲良くなった（Dynalist）

• ブックマークレットを活用する（Dynalist）

　前回同様、Dynalistが備えている機能の話ではない。Webブラウザの拡張機能を自分で作り、Dynalistのページ上で実行することで自分が欲しい機能を実現しよう、という試みである。

　必然的に実践にはJavaScriptの知識が必要となってしまうが、未経験の人もJavaScriptで何ができるかのイメージを持てれば今後の可能性が広がると思うので、よかったら参考にしてほしい。

　

Chrome拡張機能は自分で開発できる

　Chrome拡張機能というのは普通は「ストアに行って欲しいものを検索してインストールするもの」だろう。ストアには多種多様の無数の拡張機能が公開されており、Chromiumベースのブラウザを使う人ならほとんどが何かをインストールして使っているのではないだろうか。

　誰かすごいプログラマーが作ってくれるすごいもの、というイメージの強いChrome拡張機能だが、実は簡単に開発することができる。ストアに公開するのは色々と満たさなければならない条件があって大変だが、自分だけが使う分には自由に作って自由に実行できる。ローカルの任意のフォルダ内に必要なファイルを用意し、ブラウザの拡張機能ページで「開発者モード」をオンにしてフォルダを指定するだけだ。言語はJavaScript以外には必要ない。

　簡単と言っても理解のために格闘しなければならないことは色々あるので、JavaScriptでのコーディングにあまり不自由しなくなってきたくらいの段階で挑んでみると良いのではないかと思う^*1。（何事も苦労はある。）

　

Dynalistを快適な文章用テキストエディタにする

　簡単に作れるはいいとして、じゃあ何を作るのか。「Chrome拡張機能でできること」は多分ほとんど無限の広がりになってしまうので、例によって今回は私が実際にやっていることだけ書いておくことにする。^*2

　Dynalistに於いてChrome拡張機能で実現していることは、一言でいうと「Dynalistを快適な文章用テキストエディタにする」ということだ。アウトラインの整理・操作に留まらず、本文までDynalist上で書いてしまうために、不足を感じる要素を自分で書いたプログラムで補ってしまおうということである。（なおDynalistでブログ記事を書くということについては以前トンネルChannelに書いたことがある^*3。）

　現時点で実現している機能は以下の三つである。

• 文字数カウント

• 疑似2ペイン（編集はできないが表示はできるサイドパネルの設置）

• Blogger用HTMLの生成

　Dynalistで本文を書こうとした時、気になるのは「文字数がひと目でわからない」「1ペインしかないのでアウトラインを確認しようとするとスクロールが必要になる」ということだ。まあこの不便さは致命的なものではないので我慢できることではあるのだが、解消できるならするに越したことはない。

　また、このブログに投稿する際、ブログのエディタ画面で画像の指定や見出しの調整などをやっていたのだが、決まった設定を毎度ぽちぽちやるのが面倒に感じたので、もうDynalistに書いたものをその場でHTMLにしてしまうことにした。（BloggerはHTMLモードで記事を作ることができる。）

　これらの機能を追加した状態（+CSSを書き換えた状態）のスクリーンショットを撮るとこうなる。右のエリアが追加した領域。

　説明を加えるとこんな感じ。

　

実例

　具体的にどうやっているのかの話もしたいが、全部の話をすると大変なことになるので、今回見せるコードは文字数カウントの部分だけにしておく。他の二つはまだ改良中で決定版に至っていないということもある。

　Chrome拡張機能の実行方法はいくつかあり、「特定のページで自動で実行する」「アドレスバー横にアイコンを表示してアイコンクリック時に実行する」「htmlファイルを用意し、ブラウザ起動時にそのページを開いて実行する」といった形がある。今回はDynalistを開くと自動で実行する形で作る。

　この場合、必要なファイルは実行するコードを書いたjsファイルと「manifest.json」という設定ファイルの二つ。アイコンを作らないので画像は要らないし、ページを作って開くこともないのでhtmlファイルも要らない。

　jsファイルのコードはこんな感じ。シェアしてはいるがあくまでこれは私個人用のものなので、コードの出来がおかしくても気にするべからず。なおファイル名は「counter.js」とする。

https://gist.github.com/nora-tetsu/6f5f0afd1b44f281b824979b409d010e

　

　次にmanifest.json。作る機能によって与える権限が変わるのでそれに応じて記述を変える必要がある。今回はどのURLの時にどのファイルを実行するかを指定するだけで良いのでシンプルなものになっている。

https://gist.github.com/nora-tetsu/65c9c99f2ffe5ccf6434a52045f3a30d

　この二つを同じフォルダに入れ、ChromiumベースのWebブラウザ（ChromeとかEdgeとか）の拡張機能ページで開発者モードをオンにしてフォルダを読み込み、Dynalistをリロードすると機能を使えるようになる（はず）。

　

　こんな感じで必要な機能を勝手にDynalistに追加し、Dynalistの利便性をブーストしている。Dynalist API^*4も活用すれば可能性は無限に思える。

　やれそうなことを想像し始めたらキリがないので、時間と労力を空費しないためにも「できそう」かどうかではなく今現実に「必要」かどうかで考えることにして、これさえあればと強く思うものを自分で補えるとツールの使用感は随分変わってくるのではないかと思う。

---

*1: やってやろうじゃんという人はChrome Extension development basics - Chrome for Developersへ。検索すれば試行錯誤を日本語で説明してくれている記事もいろいろ見つかる。

*2: 今回の例に関しては、ブックマークレットでも実行可能なコードであり、Chrome拡張機能でなければできないというわけではない。ただ、ブックマークレットにはブラウザによって文字数制限があること、文字数制限回避のための外部スクリプト読み込みの手法が禁じられているサイトがあること、コードをブックマークレット化する手間がかかること、実行は手動になることなどから、Chrome拡張機能を使った方がより自由度が高くメンテナンスも簡単になると言える。

*3: Dynalistでブログを書く - by のらてつ @Foam_Crab

*4: Dynalist API