ここのところ、HTML+CSS+JavaScriptでマンダラート的ツールの自作に取り組んでいた。
現時点で搭載したい機能は全部搭載完了したので、この辺でブログに書いておきたいと思う。
なお、後述するが今のところ公開は予定していない。いつかするかもしれないが、少なくとも今すぐにはできそうにない。
さて画面はこんな感じ。メインの3x3とその下のノート欄で内容を編集できる。項目は右のアウトラインでも確認できる。
マンダラートっぽい俯瞰モードもある。
特定の項目以下の範囲で検索かけられたり(項目は複数指定可)。
他にもノート欄に他の項目へのリンクを貼れたりバックリンクを確認できたりハッシュタグ機能があったり、自分が欲しいものは頑張って全部搭載した。一方で余計な機能をつけると、できることが増えただけにもかかわらず、何故かそれまでやれていたことが逆にやりにくくなってしまったりするので、例えば画像を貼るなどといった機能は付けていない。
このツールを作り始めたのは、先日うちあわせCastでマンダラートの話をされていたのを聞いて、「そういえばやろうとしていたことがあったな」と思い出したからである。
その当時はあっさり挫折したのだが、それはマンダラートというメソッドが合わなかったとかではなく、道具として継続的に使いたくなるものがなかったからである。紙に書くとなると綺麗に作るのが結構難しいし、個人的な好みの問題としてマスの中に手書きした時の見た目がなんだかあまり好きじゃなかった。一方Excelを使うとなると、それもそれでその当時は如何にもExcel感漂う見た目のものしか作れず、いまいち愛着が湧かなかった。
そこで、プログラミングのスキルを少し得た今マンダラートというものを考えた時、自分で専用のツールを作れるのではないかと思ったのである。アウトラインと組み合わせること、上階層表示や任意の項目のプレビュー(マウスオーバーで表示)を用意することを思いついて、よし作ってみようと思い立った。
そんな感じだったので作り始めた時点では「マンダラートのツール」を作るつもりでいたのだが(そしてつい一昨日まで「マンダラートツール」と呼んでいたのだが)、実のところ、自分の中ではそういうものではないなという感じがする。
如何にもマンダラートな見た目であり、子項目を展開した81マスの俯瞰もできるわけで、もちろんマンダラートのメソッドを実践することは可能である。中心にテーマを置き、掘り下げるべきことを8項目設定し、それぞれについて発想を膨らませたり詳細に検討したりして全体像を作るということは、当然ながら普通にできる。
ただ、自分がこれを使っていて思うのは、マスを埋める力によって前に進んでいけるということよりも、「上から下に並べなくて良い」ことが私の中で大きいということだ。つまり、アウトライナーの変形としてのこの形という認識がある。
それを強く感じたのが、日記を書いてみた時である。
具体的な中身は見せられないので空欄の状態だが、一週間の俯瞰モードのイメージはこうなる。
各日に起きたことや注目すべきことが8個を超えることはあまりないので、基本的にはこれで全部を俯瞰できる。8個を超えたとしても、別に1項目に1つのことしか書いてはならないというルールはないし、粒度の小さなものについては「○○/××」みたいな形で詰め込んでしまえば俯瞰は可能だ。
Kakauのような特別なものを除き、通常のアウトライナーだと一列に縦に並ぶので、81行を一画面で俯瞰することは難しい。何らかの手段で2列表示できるようにするか、表示サイズをかなり縮小するかという手はあるが、手段としてちょっと強引であまり現実的には思えない。しかしマスにしてタイル状に並べてしまえば可読性を保ったまま81項目(重複部分を除けば73項目)を一覧することができる。
81マスを一度に確認できるとなると、それまで必要を感じていた「一週間の俯瞰のためのまとめ直し」が全く不要になるので、全体像の把握が随分楽になる。なお、まとめ直しではなく「一週間の振り返り」については、週の8マス目が空いているので、そこに書くことにする。
また、空欄が多い日は「普通に特別なこともなく滞りなく進んだ」というのがわかるし(あるいは「忙しすぎて何ひとつ書けなかった」という可能性もある)、みっちり詰まっていれば「たまたま色々なことがあった」「てんてこ舞いだった」というようなことがわかる。この場合はひねり出して8マス埋めようとしない方がその後情報として意味を持つわけである。
アウトライナーを使っていて、アウトライナーの持つ構造や操作性は情報(特に文章)を扱う上でとても良いものと感じているが、個人的には縦に全部並ぶ見た目に馴染めないところがあった。スクロールを繰り返してうろうろするのにはどこか「頑張って使っている」という感がある。それは眺めながら把握するためにやることなので、じゃあ検索でジャンプすればいいじゃんという話にはならない。
おそらく根本的な問題(?)として、「文章を書くために使っているわけではない」ということがあるだろう。もしも文章ならば、完成形がリニアなので、そこに至るまでのアウトラインがリニアに表示されることには何も違和感がない。私も執筆作業にマンダラート風の見た目を取り入れたいとはあまり思わない。本を読んでメモするにあたってはマス目を埋めて俯瞰するとわかりやすいと感じているが、自分が書くという時は少し話が違ってくるのである。現にこの記事を書くためのメモはMarkdownで箇条書きして作った。
ゆえに、「線のアウトライナー」と「面のアウトライナー」の二つが必要なのではないか、と思うのである。万人に必要かはわからないが、とりあえず私には必要だったように思う。そしてマンダラートというアウトライナーとは一応別物として存在しているメソッドの形態が、アウトライン表示の追加やドラッグアンドドロップ操作の実装などにより、結果として「面のアウトライナー」と呼べそうなものになった。なので、最初は自分が作っているものを「マンダラートツール」と呼んでいたが、最終的に「Plane Outliner(平面のアウトライナー)」と名付けることにした。
「面」の形にすることで発生する制限としては、各項目に子項目が8項目までに限られるということが大きい。ただ、個人的な体感としては、十や二十の項目がずらっと並ぶ状態は構造の粒度がうまくないことが多い。あるいは、「ツリー状に列挙できる」ということによってのみアウトライナーを使っている状態で、アウトラインをプロセスする的な扱いの必要のない情報の場合である。それはそもそも「面」の形にする必要がなく、通常のアウトライナーやEvernoteやScrapboxなど他の数多の情報管理ツールから選択すれば良い。
ただ、本を読んだメモをこのツール上で取りたいと思っており、その場合には何かしらの基準で8冊ずつに区切って格納することが必要になる。ジャンルや年月日で区切っていくことになるだろう。そうすると階層が形式的にどんどん深くなってしまう可能性があるが、「Plane Outliner」に於いては、リンクやピン機能ですぐアクセスできるようにすることは可能だし、検索機能もあるので辿り着くのに苦労するということを避ける手立ては一応ある。
「面のアウトライナー」では、情報はツリー状かつ放射状に伸びていくので、マインドマップと似たような構造になる。マインドマップ的な使い方をすることも可能であろう。
ただマインドマップとは異なり、紙面の制約に悩まされることはない。各項目が数十字の文章になっていても(それが適切な粒度かは別途検討が必要として)、場所を取りすぎてマップを作る邪魔になるということにはならない。
もちろんマインドマップでしかできないこともあり、それは例えば二段階以上先まで含めた俯瞰である。とりあえず現時点での「Plane Outliner」では、マンダラートらしい81マスの俯瞰まではできるが、それより更に潜った先を含めて一望することはできない。もしその先の内容まで含めたいならば、各項目をその下位にある内容を含めた要約的な内容にすることによって、その先を一覧できなくても把握できるようにするというような工夫が多少必要になってくる。とはいえ、全ての項目についてその項目を中心として81マス俯瞰ができるので、無理して一度に全体を見ようと思わなければ支障はない。
マインドマップにそれほど思いを巡らせたことがないのでマインドマップとの類似点と相違点を詳しく語ることはできないが、ある程度共通したことができるということは確かである。マインドマップで考えたことを「面のアウトライナー」でまとめ直しても良いかもしれないし、そうすると更に通常のアウトライナーにも取り込みやすいかもしれない。
今までいくつかツールを作った時にはできなかったことで、今回から導入に成功したことが、「OPMLでの保存・出力」である。OPMLとはざっくり言うとアウトライン構造の共通規格だが(多分)、これを生成できるようにすればOPMLのインポートに対応しているアウトライナーにそのままデータを取り込める。例えばDynalistに取り込めることを確認した。
取り込み先で使っていないメタデータは削除されてしまうと思われるので、(メタデータが全て保存されるDrummerを除いては)データを行ったり来たりさせるのは現実的でないが、いざとなれば他のものに移せるという互換性を持たせられたことは自分仕様のツールを製作する上で大きな一歩になったことは間違いない。
また今回の場合には、「面のアウトライナー」の形式で文章について考え始めたものの、これ以上は通常の「線のアウトライナー」でやったほうがいいな、となった時に移すという使い方も考えられる。アウトライン表示は実装してあるが、操作の感覚が通常のアウトライナーとは違っているので、ビューより操作性の問題でツール自体を変えた方が良い場合もあるだろう。
ということで、マンダラート用ツールを作ってみたら結果的に「面」のビューを持ったアウトライナーとして新しい道が拓けたという話をした。
ここまで語っておいて公開はしないのかという話だが、以下の理由により現時点では難しい。
微妙に解消されていないバグがある(コピペ周りが地味に厄介)。
まだ自分で使っている期間が短く検証が足りないので品質が保証できない。
動くコードは書けているがツール開発の勝手が全くわかっていないので、ツールの公開についての常識がわからない。
諸々解決したらそのうち公開するかもしれない。
Backlinks
関連度が高いかもしれない記事
- よくわかるNoratetsu Lab(2022年版)~前編~
- ツール製作日誌:三ヶ月で劇的ビフォーアフター① 自作ツール紹介編
- アウトライナーを前にしてやりたくなること
- タイムライン型・カード型・デスクトップ型②~デスクトップ型~
- ツール製作日誌:タスク&スケジュール把握ツール
他の「面のアウトライナー」タグの記事
他の「Plane Outliner」タグの記事
他の「アウトライナー」タグの記事
- ノードの本文を判定して任意のスタイルを設定する(Dynalist)
- 「文脈エディタ」としてのアウトライナー
- ライフ・アウトライン日記: ノート欄を楽しむ
- ノート欄に本文を貼る(Dynalist)
- 知見ノートを作る/タグ機能と仲良くなった②(Dynalist)
- Chrome拡張機能を自分で作って活用する(Dynalist)
- ブックマークレットを活用する(Dynalist)
- タグ機能と仲良くなった(Dynalist)
- ノート機能と仲良くなった(Dynalist)
- ファイル・フォルダ機能と仲良くなった(Dynalist)
- アウトライナー(Dynalist)と仲良くなった
- アウトライナーを前にしてやりたくなること
- アウトライナー×つぶやき×平面配置②~ツール紹介編~
- アウトライナー×つぶやき×平面配置①~経緯編~
- アウトラインではなくキューを作る
- ツール製作日誌:カード式アウトライナー③カードっていうかルーズリーフだった編
- アウトライナーと手帳と表紙
- タイムライン型・カード型・デスクトップ型②~デスクトップ型~
- タイムライン型・カード型・デスクトップ型①~タイムライン型とカード型を使い分ける~
- ツール製作日誌:カード式アウトライナー②背景説明編
- ツール製作日誌:カード式アウトライナー①機能説明編
- アウトライナー日誌:バレットを「┠」にしたらバレット感に邪魔されなくなった
- デジタル日記の試み④~Dynalistに日記と日誌のファイルを作る~
- アウトライナー日誌:アウトライナーとは何型のメモなのか
- 発想を文脈から解放するには④~余談~
- アウトライナー日誌:「設計図」または「説明図」という意識を持ってみた
- アウトライナーの使い方ド下手問題~はじめに~
他の「プログラミング」タグの記事