昨年の一月末からJavaScriptを勉強し始め、今日でちょうど丸一年になる。私の人生に於けるプログラミング元年だった。
スタート時は一年の間に「何か動くもの」を作れたらいいという気でいたが、実際に一年経ってみると「自分にとって理想的なツール」に迫るところまで来れた。一年間の集大成として今使っている自作デジタルノートツールについて書くことにする。
先日の記事（雑なメモは雑に書かれなければならない）にもスクリーンショットを一枚貼ったけれども、機能のごく一部の部分だけなので、ちゃんと記事にしておこうと思う。
と言っても、言葉で説明するのは到底無理なレベルであれこれ細かい挙動を搭載しているので、処理がどうなっているかより主にどの位置にどんな情報があるのかというレイアウトの話になる。
全体像を先に示しておくと、以下の五つのビューモードを持つツールになっている。
なお内部的にデータがどうなっているかというと、ScrapboxやObsidianのようなページの集合体のイメージで、JavaScriptの実装としては16のキーを持つオブジェクトの配列の形になっている。
最大の特徴として、ひとつのデータがプレーンテキスト（＝本文）、アウトライン、ホワイトボード、テーブルを持てるということがある。更にプレーンテキストはプレーン、Markdown記法、Scrapbox記法のどれかを選択でき、選択に応じてHTMLタグが構築されてビューが作られる。ブラケティングによってページ間リンクを設定できる。
データの多くはプレーンテキストだけかアウトラインだけ、またはその二つを使っていて、ホワイトボードとテーブルはそんなに頻繁には使わないが、使いたい時に使えるように組み込んでおくことで情報の分散を防いでいる。
画面は上記の画像にある通り五種類ある。アウトラインモードのビュー、ホワイトボードモードのビュー、そしてデータベースモードのページビュー、カードビュー、テーブルビューという形になっている。複雑なようだが、複数のツールでやるところをひとつにまとめているというだけで、使っている中で複雑に感じるわけではない。
アウトラインモード
三種類のアウトラインが表示されている。もちろん全て編集可能であり、アウトライナーの基本機能が使える。
- インプットアウトライン（左）
- デイリーアウトライン（中央上部）
- メインアウトライン（中央下部）
左にとりあえず書く場所としてのアウトラインがある（「Input Outline」というタイトルのデータがあり、それを指定してアウトラインデータを表示させている形）。中央上部にはデイリーアウトラインの領域があり、日毎に作られるページのアウトラインデータを表示している（直近十日分）。中央下部はカテゴリデータに「Hot」と記述してあるページのアウトラインデータを並べている。
それぞれタイトルをクリックすればページの詳細画面が開く。また各行がフォーカスされる度に右上のメタデータ欄にページの情報が一部取得される。本文を確認することもできる。
右には全ページのアウトラインデータの中で特定の属性を設定されたノードを取得して表示する欄がある。アウトラインは各行に予め設定した任意の属性を選択して付与することができ、そのデータから抽出している。
細かい機能は他に色々あるが割愛するとして、この画面構成によって今現在把握しておきたいことを一覧できるように試みているというのがアウトラインモードの特徴である。
ホワイトボードモード
左の細いカラムはホワイトボードデータが存在するページの一覧。下半分には今開いているページのホワイトボードデータを表示している。上半分は今開いているホワイトボードデータと関連付けているページのアウトラインデータを平面的に表示している。関連ページは複数設定可で、縦に並んでいく。このスクリーンショットでは「Input Outline」ページひとつと関連付けている状態が表示されている。
ホワイトボード的なものを使いたいタイミングというのは横断的に考え事をする時が多いので、他の複数のページを関連付けて俯瞰できるようにしている。（なお、他のページとの横断ではなく、自身のページ内のアウトラインデータや本文データと突き合わせたい時は、ページ詳細画面でボードを編集することができる。）
このモードによって、俯瞰した思索や位置という感覚的なものを使った考え事をできるようになっている。
データベースモード
データベースモードというのはつまり全データを管理する場所ということで、ページビュー、カードビュー、テーブルビューの三つの画面がある。
ページビュー
| アウトラインが非表示の時は全体が本文になる |
| テキストとアウトラインを同時に表示した状態 |
各ページデータの詳細を編集する画面である。中央に本文（プレーンテキスト）とアウトラインの表示領域、左に本文部分に含まれるリンクとキーワードから構築したリンク欄、右にページのメタデータの欄がある。アウトラインは右の欄にチェックを入れると中央カラムの下半分に表示される。ホワイトボードデータとテーブルデータは右の欄にチェックでポップアップ表示される（スクリーンショットは省略）。
このテーブルデータというのは後述のテーブルビューとは全然関係がなく、ページ内のデータとして表を作ることができるというものである。でも本文はMarkdownで書けるのでMarkdown書式で本文内に表を作ることもできる。本文とは別にしたい時はテーブルデータを使う。現時点ではただtable要素を簡単に作れるというだけのおまけ機能だが、やろうと思えば表にソート機能をつけるなども一応可能だろうと思う。
ちなみに本文部分に画像ファイルをドラッグアンドドロップすると、Gyazoの自分のアカウントにアップロードしてそのリンクが本文に追記されるようにしてある。便利。あとダブルブラケットの左括弧を入力して文字列を打つと、括弧からキャレット位置までの間にある文字列をタイトル（またはエイリアス）に含むページをサジェストするようになっている。
また、右カラムにある「データベース化」のチェックとその下の「Option Key」の部分によって、後述のテーブルビューにデータベースとして表示することができる。詳しくはテーブルビューの項で。
更にクイズ機能もあって、各ページに一問一答を設定でき、全ページのクイズをまとめて表示して解くこともできたりするが、それは本格的におまけである。（おまけだが割と重要。）
スクリーンショットではQuizは一問だけ設定してあるが、複数設定可能である。
カードビュー
Scrapboxを参考にしたグリッド配置のビューで、クリックすればページの詳細画面が開く。上部にカテゴリ選択欄があり、そのカテゴリを含むページを表示する（カテゴリは各ページ複数設定可、自由にカテゴリ追加可）。
右上の設定欄でグリッド表示／リスト表示、サムネイルの有無、本文冒頭部分の表示有無、表示順の種類と順番を切り替えられる。
Ctrlを押しながらマウスオーバーで中身の本文を確認できるようにもしてある。全体的にScrapboxにこんな機能があったら私個人は嬉しいという機能を実装した（Scrapboxにそうなってほしいというのではない）。
なおスクリーンショット内の「日本史」「世界史」は次のテーブルビューの見本のためのカテゴリ。
テーブルビュー
自分の中で会心のアイデアなのだが、各ページにはメタデータを自由に設定できるようにしてあり、更に「データベース化」という項目をチェックしておくとそのページはデータベースのデータとして扱われ、メタデータの任意の項目を表に表示することができる。
例えば「人物」をまとめたデータベースを作ることができる。重要なのは、そのページがどのカテゴリにあるかとは別にデータベース化できるということだ。例えば「日本史」カテゴリと「世界史」カテゴリを作ってそれぞれに人物ページを作り、「人物」データベースを作ってまとめることもできる。
自分が作った機能の可能性に自分が追いついていない状態なので活用はこれからだが、ExcelやAccessでするような（しかしわざわざそれらのアプリケーションを使うほどのものでもないような）データのまとめを作れるようにしたのは、自分の中で非常に大きいツールの進化である。
やろうと思えば本当に色々なことができるし、記法を決めれば関数を使うとかいうことも一応不可能ではない（このツールに搭載しても便利ではなさそうだが）。きちんとデータとして管理する必要のある大規模なものは当然専用のアプリケーションを使うべきだが、自分で作ったノートの管理を支援するものとしてはこれでも十分だろうと思う。
結果的にNotionのような感じになっているが、設計思想としては多分結構違っている。
お試し
今回のツールは以下のリンク先で試せるようにした。
https://nora-tetsu.github.io/mypage/HyperDatabase/
注意書き
- PC限定です。
- 編集はできますが保存はされません。
- 上述の画像ドロップは無効になっています。
- 入力欄やクリック可能な場所は大体マウスオーバーで説明が出ます。
- アウトライン部分のノードのドラッグは、「▶」「▼」部分ではなく、入力してある文字列の後ろの余白あたりでドラッグしてください。つまりこの文で言えばこのあたり→
- 自分用ツールをついでに公開しただけなので親切設計にはなっていません。私が便利ならそれでいいやつです。
- 何かおかしくなったらタブリロードでリセットしてください。
- 右クリックに機能を設定する際にデフォルトの挙動を止めるのを忘れていたので、いちいちコンテキストメニューが表示されます。（Electronではコンテキストメニューが出ないので設定し忘れていた。）
- 環境によってCSSの設定が適切でない箇所があります。
余談と現況
ちなみに、前に貼ったスクリーンショット内では「Hyper Outliner」ということにしていたが、アウトライナーの範疇は大きく逸脱しているので仮称として「HyperDatabase」ということにした（HyperText的な意味なので空白はなくした）。まあ名前はなんでもよくて、私自身はコードネーム的に「hyper」と呼んでいる。
色々な機能を搭載しているのだが、これらは今までばらばらにツールとして作っていたようなもので、今回それを統合した形だ。それぞれ思いついた時にはその機能を中心機能にしたツールを頑張って作るということしかできなかったが、今回はそれらを適切に組み合わせてデザインするというところまで行き着いた。
今現在、デジタルノートツールはScrapboxとDynalistとこのHyperDatabaseの三つを使っている。なおHyperDatabaseにはScrapboxのjsonデータを一発で取り込むことができ、Dynalistのopmlデータもやろうと思えば取り込む機能を作ることができるので、ツールを使い分けてはいるが最終的な可能性としてデータは統合された気分で使っている。
頑張ってツールを作っていても所詮は素人なので、いつどのタイミングで想定外のことが起こるかわからないし（最近はそんなには起こらないが稀に「あっ」となる）、ちゃんとしたプログラマーが作ったちゃんとしたツールはやはり使い続ける必要を感じている。バグが発生した時にその場で対処する余裕があるタイミングならいいのだが、「さっとメモしたい」みたいな時にバグと直面すると非常に困る。なので、ScrapboxやDynalistはHyperDatabaseとゆるく連携したツールとして現役だ。HyperDatabaseが本部でScrapboxとDynalistが支部みたいなものかもしれない。支部の方が現場としては優秀である。
このブログを本格的に始めた時の連載の最初で「情報管理の『系』を作り上げていく」ということを書いた。プログラミングと一年間格闘して、その姿が見えてきたかもしれない。