動じないために。
Twitter×アウトライナー的な自作ツール。
目指したもの
命名
記事
Screenshot
①メインのアウトライナー（編集する場所）
Backlinks
他の「のらてつ製デジタルノートツール」カテゴリの語句
メモを雑に書いたままゾンビ化させないために、「つぶやくように書けて、アウトライナーのように操作できて、平面配置で表示されて、自然にもう一人の自分と対話できるツール」を作ろうという話のツール紹介編。ここに至る経緯は前回の記事をご参照のこと。
前回の最後にも貼ったが、まずメイン画面のスクリーンショットはこちら。
機能ごとに詳細を書いておこうと思う。（例によってツールもコードも公開していないが、考え方や所感が誰かの何かの役に立つかもと思って書いている。）
アイコンはCtrl+←/→で簡単にくるくる変更できるのだが、挙動の仕組みとしては、全てのノードが何らかの種別を持ち、その種別に対応するアイコンが自動的に表示されているということを意味する。（HTML的にどうなっているかというと、li要素にカスタム属性を設定し（data-typeとした）、その値が「topic」とか「date」とか「A」とかいうふうに変更されていくということだ。）
前回書いたように、アウトラインに行を追加した時にはデフォルトで「二つに分けた自分の一方」を示すアイコンが表示されるようにしてある。サンプルでは「自分A」ということにして赤丸の「A」のアイコンにしてある（実際は全然違うアイコンを使っているし、自分A自分Bという呼び方でもない）。
こうすると、とりあえず自分Aとして考えたことを書くことになり、自分A以外に他の自分がいるはずであること、自分の中でも偏った視点でしかないかもしれないこと、をなんとなく意識する。（前回詳しく書いたが、そうなるように私自身が既に訓練されていたところがある。以下、「こういうことが起きる」として書いてあるのはあくまで私の中でのことである。）
自分A以外に人がいるのに、自分Aにしかわからない独りよがりな書き方をすると他の存在が関われなくなるので、恰も他の誰かが見ているかのようにきちんと書こうという気持ちが働く。別にきちんとさせないで自分Bをいきなり登場させてもいいのだが、そうすると対話の体を成していないという気持ち悪さに私が耐えられなくなるのである。
自分Aが書いたものに自分Bという別の視点をぶつけてみた時、それでも納得できるのか、ツッコミどころを見つけて「いやそれはおかしいでしょ」と自分で批判することになるのか、それはその時次第だが、とりあえず自分で穴を探すというチェックが働く。自分同士である以上どうしたって完璧なチェック機能にはならないが、それでも結構な頻度で「いや、ちょっと待てよ」が発生するし、「じゃあこういうのはどうか」と新たなアイデアを閃くことも多い。必然的に、思考はどんどん拡張していく。
自分Aと自分Bというのはどう分けているのかというと、前回の繰り返しになるが、「合理的っぽい自分」と「本音っぽい自分」という二つの軸をイメージしたものになっている。なので自分Bから話がスタートすることもある。どちらも「っぽい」であって、そんなにはっきり分かれているわけではなく、よく考えるとこれ逆だったのではということもある。どっちがどうというより、二つの軸で考えるということが肝心である。
字数カウントも大事な要素になっている。見た目としてはこういうことになる。
なお、各ノードはそれぞれ作成日時と編集日時が記録されており、そのことによって次に紹介するタイムライン機能が実現されている。
私が作ったものを他の人が今ぱっと見てわかりやすく思うかは微妙なところだと思うが、私にとっては自分で作ったアウトラインが変形しているので（つまり書いてある内容は既に一度頭に入っている）、ひと目で全体の構造がわかるというありがたみを感じている。平面上にみっちり敷き詰められた状態で、更に各項目について文字数が多すぎるものはスクロールするようにしているので（項目のブロックが縦長にならないようになっている）、画面にはかなりの情報量が入る。
また、topicのノードについて背景色を変えているように、data-type属性の値（≒アイコンの種類）によってCSSを変えて見やすくすることもできる。例えば結論用のアイコンを作って背景色を赤系統にする、ということをしている。
なお、これも各項目をダブルクリックすればアウトライナーのノードがフォーカスされるのですぐ編集に取り掛かることができる。
現状、AND、OR、NOT検索はできないが、特定のキーワードを含むノードをピックアップすることはできるようにしてある。
検索を実行すると、アウトライナー画面は該当するノードの背景色が黄色くハイライトされ、タイムライン画面は該当ノードだけ表示されるようにフィルタリングされる。タイムラインは他に期間指定とdata-type属性（≒アイコン）でフィルターできる。
あと全データから「#」を付けた文字列を取得してオートコンプリートを設定しているので（検索欄をクリックしたり↓を押したりすれば候補が出る）、Twitterのようにハッシュタグを使うこともできる。
必要が生じれば、AND、OR、NOT検索をはじめもっと細かい高度な検索も実装するかもしれないが、今のところは別にいいかなという感じでいる。
細かいところまで色々書いたが、重要なのはCtrl+←/→という簡単な操作でノードの属性を変えられるようにしたことと、アウトライン構造を維持したままアウトライナー的でないビューを実現したことだ。自分Aと自分Bその他の切り替えに何クリックも必要だったら続かないだろうし、せっかくメモが捗っても書けば書くほどビューに難を感じてしまったらしょうがない。
今までアウトライナー系のツールは色々と作っており、どれもその時点では自分の中で革新的だったのだが、今回が一番会心の出来という感じがする。データ構造や必要な操作としてはシンプルで、自力でやらなければならない処理はほとんどなく、それでいて今まで抱えていたもやもやを一度に晴らせるものになった気がしている。
ちなみにこのツールの保存形式はOPMLなので、Dynalistなど他のアウトライナーにそのままインポートできる（ただしdata-type属性は消失する）。
前回（メモを取ろうとすると文にできなくなる件）、Twitterなら十分に読みやすいメモを書けるのに自分だけが見るメモ用のツールにメモをしようとすると雑に書いてしまうのが不本意だ、という主旨のことを書いた。
そのことを解決するデジタルノートツールを作ったので、そこに至るまでの経緯とツールの様子について書いていくことにする。長くなるので前半後半に分け、今回は経緯の話をする。
R-styleで前回の記事を取り上げてくださった。
こちらの記事内で、次のような指摘がある。
誰が読むのかはわからなくても、「誰かが読むかもしれない」という想定があるだけで書かれるものは変わってくるし、誰も読む可能性がないものはそれに見合った書き方をしてしまう。
そして「できればツイート画面だろうがメモ用ツールだろうが変わらず淡々と書けるようになりたい」という私の願いに対して、「おそらく叶わないだろう」として次のように書かれている。
もちろん、人間の脳は可塑性があるので、訓練すればできるようになる可能性はある。（中略）あるはメモツールを開いたときに「これはもう一人の自分に語りかける窓なのだ」と強く信じられるようになるしかないだろう。
その通りだと思う。拝読した時点では「そうだよな～そもそも無茶な願いだよな～」と思ってこの話はお終いにしかけたのだが、いや待てよと思い直した。
倉下さんは「メモツールを開いたときに『これはもう一人の自分に語りかける窓なのだ』と強く信じられるようになるしかない」とお書きになっており、そうすれば実現し得るという条件でありながら、しかし到底無理であるという感が漂っている。なぜかと言えば、メモツールにはどう見ても「他に人はいない」からである。「強く信じる」ということをしなければ「もう一人の自分」などというものがそこには現れてくれない。「メモはちゃんと取ろう」という心がけすら貫けないのに、もう一人の自分がいるのだとただ信じ続けるなんてできようはずもない。
しかし逆に言うと、「もう一人の自分がいると自然に考えられるメモツール」があったとすれば、自分の信じる力に頼るという無理をする必要はなくなるように思える。そこをどうにかすれば、どうにかなるんじゃないか？ そう思って、自分の意思の如何から離れ、具体的なツールの設計を考え始めた。
設計の話に移るにあたり、少し話題を戻して、私はどういう状況下でメモが捗り、どういうツールにやりにくさを感じているのかを振り返る。
前回、Twitterなら捗るということを書いたわけだが、その理由としては大きく二点ある。
まず「人が見る可能性がある」ということだ。これは倉下さんもご指摘の通りで、読み手がいるとなればそれに合わせて思考が自動的に動いてくれるところがある。フォロワーのタイムラインに流してしまうものであるからには、フォロワーが「なんじゃこりゃ」と思うものは避けたいし（自由気ままに生きたいもののあからさまに迷惑になりたくはないのである）、一応は読めるものにしようと心がけることになる。
もうひとつは、140字という字数制限だ。これが日本語話者にとっては絶妙な数字で、無駄な言葉を省きつつちゃんと全部埋めれば、ひとつのツイートでひとつの意味を示せるぐらいの長さなのである。それを超過するのは大概意味が整理されないまま複数混在してしまっているということだろうし、100字にも満たないような短さだと情報として不十分な場合が多い。格言的な一言を投げるのでもなければ、考えの言語化というのはそう短く済みはしない。140字を埋めるということは十分な言語化のための丁度良い目安になる。このことにより、140字を埋めようという気持ちになりさえすれば、読み手のいない非公開アカウントでのメモも比較的きちんと書きやすい。（誰しも自然にそうなるはずだと言いたいのではない。）
この二点は「書く」時に捗る理由だが、Twitterには他にも好ましい要素がある。まずツイートの見た目が良い。ひとつのツイートがひとつのブロックにきちんと収まっており、左にアイコン、上下に周辺情報が書いてある。以前情報カードの特徴について少し考えたことがあるが（デジタルツールでの情報カード性および文脈との結びつきの在り方）、本文の他にその周辺情報が近くに添えられていると認識の助けになるし、直接その情報を「使う」ということはなくともなんとなく安心感を覚える。（この感覚は人それぞれかもしれない。）
加えて、ツイート検索をした場合、条件に合うものが抽出された状態でタイムラインとほぼ同じ見た目で並ぶということになるが、これもまた個人的に気に入っている挙動だ。検索結果のスタイルが通常画面と同じ状態で並ぶ、というのはそんなに当たり前のことではないように思う。検索用の画面に従った検索結果用のスタイルで表示される場合の方が多いだろう。このことはTwitterでの投稿がツイートという単位で行われていることで実現できることなのだろうと思う。
さて、それではTwitterをメモツールにしてしまえばいいじゃないかという話になるのだが、話はそう簡単ではない。Twitterは自分用メモのためのサービスではないし、書くのは良くてもその後操作することが不可能だということがメモとしてはネックになる。ツイートしたデータを何らかの形で取得して何らかのプログラムで加工して…ということは考えられなくはないが、明らかに回りくどいし、適切なメモツールが他にあればそれを使うに越したことはない。
メモを書いた後に必要になる操作は、メモ自体をより望ましい表現に編集すること、そのメモに新たなメモを足していくこと、他のメモと関連付けていくこと、といったことである。用が済めば消すことも必要だろうし、「消す」と言っても「削除する」のか「アーカイブする」のか「取り消し線を引く」のか「薄い色にする」のか、欲する動きはメモの役割次第で違ってくる。
小さい単位での操作と言えば、それを得意とするのがアウトライナーであろう。編集も加筆も並べ替えも簡単だし、「消す」操作もいろいろなパターンがあり得て、好きな形を自分で選択できる。ツイートがアウトライナー上に並んで、それを操作・編集できればかなりいい感じだろう。例えばデイブ・ワイナーが公開しているアウトライナー（Drummerほか）は、アウトライナー上からTwitterに投稿できるようになっている。
じゃあアウトライナーでいいんじゃん、と思いたくもなるが、ところがどっこいそうはいかない。そうはいかないというのは私の性質と照らせばということであって、アウトライナーで全然問題ない人はもちろんたくさんいるだろうし、別にアウトライナーの至らなさを批判しようというのではない。
現在私がアウトライナーをメインのツールとして活用しづらく感じる理由は、操作性の問題ではなく、ビューが自分の感覚と合っていないことにある。
アウトライナーは書けば書くほど縦長になっていき、俯瞰するとなればスクロールを繰り返すしかない。「畳む」ということで全体を把握できるのがアウトライナーの売りだが、俯瞰というのは必ずしも「より上位のレベルの記述に絞る」ということで達成できるものでもない。全体が見たいというのは全体が見たいということであって、要約していきたいという気持ちとはまた別なのである。
また、アウトライナーは「行」を縦に積んでいる状態のため、記述が数文字でも横幅いっぱいでも、その行が占める面積というのは同じである。短いメモが続くと右側には空白が目立つが、縦方向には一行は一行としてどんどん積まれて伸びていく。つまり、情報量に対して使用される面積が大きくなってしまう。その結果、内容としては大した濃さでもないのに全体を見渡せないということになる。
例えばKakauはカラムの概念によってこのもったいなさを解決している。教室の黒板のように使えて、情報をまとめるにあたってはとても有用なツールである。
少し前に自分が作ったデジタルノートツールでは、ノードをアウトライン構造から解放し、付箋状に分解して平面に自由に配置できるようにすることを試みた。挙動の実装は一応できたものの、その機能がそんなに嬉しいかというと、案外そうでもなかった。平面配置できるのはいいのだが、平面配置させるということにいちいち手間を使っていられない感じがしたのである。
ということで、今回考えたのは、アウトライン構造を保ったまま横方向にも表示するという手である。当然、自力で配置するのではなく、プログラムが自動でそのように配置してくれるということだ。というか、ほとんどCSSの力でそのように表示されるようにした。
つまりまとめると、
というツールを設計しよう、と考えたわけである。（つまりビューは三通りあるということだ。）
こうしてツールの使用感とビューの問題は解決したとして、肝心の「もう一人の自分がいると自然に考えられる」という状況はどうセッティングすればいいのか。
これは私個人の経緯が根幹を成すものになってしまうので、同じツールを使えば他の人も同じように感じられるということではないが、とりあえず自分は解決したので記しておこうと思う。
まず前提として、私は頭の中に「規範意識と合理性に沿った判断をしたい自分」と「自分の性質に正直に従ってカオスに生きたい自分」のふたつが存在しているということを強く感じている。別に人格が分かれているという話ではないのだが、判断基準が二つあるとか、片方の判断がそれと矛盾したもう一方の要素によって台無しにされるとか、そういうことを常に感じるということだ。かつては規範意識と合理性の側が勝ってしまいがちで、自分の本質を抑えつけて「真っ当」っぽい選択をしようとして、その結果精神を壊してしまうことにもなった。よって後者の側を解放しなければならないと思ったのである。
とはいえ規範意識と合理性を潰してしまえばいいかというとそれも間違っている。あくまで「二つの基準を併せ持っている」のであって、抑圧されてきた側が本当の私というのではないのだ。つまり両方が対等に並ぶ必要がある。
そこで、私は二つの絵文字を使って、合理性っぽい側と本音っぽい側に分けて自分の思いを整理するようになった。それはメリットとデメリットで分けてそれぞれリストアップ、ということではなく、自分Aと自分Bの対話という形を取っている。交互にセリフを書いていくようなものだ。折り合うまで対話を続けることになる。
いつもそれをやっているわけではないし、最近は合理性がむやみに決めてしまうこともなくなったので対話の頻度も下がっていたが、今回「もう一人の自分」ということを考えた時、このスタイルを再現すればいいのではないかと思い至った。
もともと絵文字で視覚的に区別を付けていたことから、Twitter風のビューを採用するなら同様のアイコンを作って可視化すれば都合が良いと考えた。そしてそれをアウトライナー上でもわかるようにすれば完璧である。
何か思いを書く時には、基本的に自分Aと自分Bのどちらかを選択して書くことにする。すると、どちらかが選択されたからには次はもう一方にも喋らせたくなる。そこでおおよそ交互に話すという形態が成り立つためには、きちんと互いに情報を渡す形にせねばと考える。そうして、ただメモをちゃちゃっと書いていた時よりずっとしっかりしたメモを書き残せるようになった。
これらを如何にしてデジタルノートツールとして実現したか、というのは次回に詳しく書くことにする。
文章だけだとあまりにもイメージが曖昧なので、フライングで一枚スクリーンショットを貼っておく。
のらてつ Noratetsu