Noratetsu Lab

動じないために。

タグの定義・詳細

Dialogue Outliner

Twitter×アウトライナー的な自作ツール。
目指したもの

  • Twitterにつぶやくように書ける(≒書いたものをTwitterのタイムラインのように見れる)
  • アウトライナーのように操作できる
  • 平面配置で表示できる
  • 自然にもうひとりの自分と対話できる

命名

  • 前提として「メモをなぐり書きではなくきちんと文章で書くには読み手が必要だ」という話があった。

記事

Screenshot
①メインのアウトライナー(編集する場所)

画像

②右側のタイムライン(マウスオーバーでスライドイン)
画像

③左側のアウトラインのマップ表示(仮)(アウトライナーの内容を面状に配置したもの/マウスオーバーでスライドイン)
画像

Backlinks

他の「のらてつ製デジタルノートツール」カテゴリの語句

「Dialogue Outliner」タグの記事一覧

2022/11/02

アウトライナー×つぶやき×平面配置②~ツール紹介編~

 メモを雑に書いたままゾンビ化させないために、「つぶやくように書けて、アウトライナーのように操作できて、平面配置で表示されて、自然にもう一人の自分と対話できるツール」を作ろうという話のツール紹介編。ここに至る経緯は前回の記事をご参照のこと。


 前回の最後にも貼ったが、まずメイン画面のスクリーンショットはこちら。

画像

 なお撮影用に余計な情報が写らないようにしたため実際の画面とはレイアウトが若干違っている(実際よりちょっと窮屈な画面になっている)
 コンセプトとしては「アウトライナー×Twitter×面」ということになるが、書き込んで操作する部分はアウトライナーである。なので名付けるとしたら○○アウトライナーということになるだろう。
 そして左右にちらっと映っているのが他のビューで、普段はこんな感じで中途半端に端っこが見えている状態で控えており、マウスオーバーするとアウトライナー部分に重なるようにスライドインするようになっている。それぞれのスクリーンショットはこんな感じ。
画像

画像

 動かしている様子は動画にしてTwitterに投稿したので、ご興味のある方はそちらもどうぞ。

 機能ごとに詳細を書いておこうと思う。(例によってツールもコードも公開していないが、考え方や所感が誰かの何かの役に立つかもと思って書いている。)

アウトライナー

画像

 アウトライナー部分は、フォーカス以外の一通りのアウトライン操作ができるようになっている。ほぼ普通のアウトライナーである。
 違っているのは、各ノードに個別のアイコンを設定できることと、編集時に文字数カウントが表示できることだ。

 アイコンはCtrl+←/→で簡単にくるくる変更できるのだが、挙動の仕組みとしては、全てのノードが何らかの種別を持ち、その種別に対応するアイコンが自動的に表示されているということを意味する。(HTML的にどうなっているかというと、li要素にカスタム属性を設定し(data-typeとした)、その値が「topic」とか「date」とか「A」とかいうふうに変更されていくということだ。)
 前回書いたように、アウトラインに行を追加した時にはデフォルトで「二つに分けた自分の一方」を示すアイコンが表示されるようにしてある。サンプルでは「自分A」ということにして赤丸の「A」のアイコンにしてある(実際は全然違うアイコンを使っているし、自分A自分Bという呼び方でもない)
 こうすると、とりあえず自分Aとして考えたことを書くことになり、自分A以外に他の自分がいるはずであること、自分の中でも偏った視点でしかないかもしれないこと、をなんとなく意識する。(前回詳しく書いたが、そうなるように私自身が既に訓練されていたところがある。以下、「こういうことが起きる」として書いてあるのはあくまで私の中でのことである。)
 自分A以外に人がいるのに、自分Aにしかわからない独りよがりな書き方をすると他の存在が関われなくなるので、恰も他の誰かが見ているかのようにきちんと書こうという気持ちが働く。別にきちんとさせないで自分Bをいきなり登場させてもいいのだが、そうすると対話の体を成していないという気持ち悪さに私が耐えられなくなるのである。
 自分Aが書いたものに自分Bという別の視点をぶつけてみた時、それでも納得できるのか、ツッコミどころを見つけて「いやそれはおかしいでしょ」と自分で批判することになるのか、それはその時次第だが、とりあえず自分で穴を探すというチェックが働く。自分同士である以上どうしたって完璧なチェック機能にはならないが、それでも結構な頻度で「いや、ちょっと待てよ」が発生するし、「じゃあこういうのはどうか」と新たなアイデアを閃くことも多い。必然的に、思考はどんどん拡張していく。
 自分Aと自分Bというのはどう分けているのかというと、前回の繰り返しになるが、「合理的っぽい自分」と「本音っぽい自分」という二つの軸をイメージしたものになっている。なので自分Bから話がスタートすることもある。どちらも「っぽい」であって、そんなにはっきり分かれているわけではなく、よく考えるとこれ逆だったのではということもある。どっちがどうというより、二つの軸で考えるということが肝心である。

 字数カウントも大事な要素になっている。見た目としてはこういうことになる。

画像

 意義は前回書いたので繰り返さないが、結構馬鹿にならない影響がある。必ず100字以上140字以下で書くぞ、というようなルールを設けているわけではないし、実際その字数に至っているのはせいぜい半分くらいではないかと思うが、目安があることで常に「まだ不完全だからもうちょっと考えられるなら考えよう」という意識を持つようになっている。
 また、字数カウントによる目安というのはきちんと文章化して書いていなければ意味を成さないので、ここでも「人が読める文章」を書こうというインセンティブが働いている。

 なお、各ノードはそれぞれ作成日時と編集日時が記録されており、そのことによって次に紹介するタイムライン機能が実現されている。

タイムライン

画像

 右側からスライドインしてくるタイムライン画面は、見た目に明らかな通りTwitterのタイムラインを参考にしたものである。
画像

 ここで直接編集はできないが、ダブルクリックすればアウトライナーの当該ノードがフォーカス状態になってすぐ編集に取り掛かれるので、編集と閲覧の行き来は簡単である。
 タイムライン機能を考えた最初の動機は、ツリー構造とは別に「考えた順」に並べたいという気持ちが前々からあったことだ。アウトライナーは内容を基準としてツリー状に形を成していて、いつでもどこにでも書き加えられて書き加えるほど成長していくのは良いのだが、その場所から離れてしまうと「さっき考えたあれ」に戻るのがまあまあ面倒である。データの構造としては内容が基準になっていて良いのだが、それはそれとして「最近追加または編集したノード」が時系列順に並んでほしい。そういうことから、アウトライナーのノードに日時を記録し、それを元に時系列に並べたビューを作ればいいという構想が浮かんだ。そこにTwitter風にしたら面白そうというアイデアが加わってこういう形になった。
 さて今まで自分が書いたメモをずらっと並べるということは幾度となく試みたのだが、どうにもしっくりきていないところがあり、その原因は何かしばらくわからなかったのだが、多分「絵がない」ということだったのだと思う。ツイート履歴ならずっと見ていられるのだが、それはおそらく本文の隣にアイコンがあるからである。自分自身の(あるいは特定のアカウントの)ツイートを追う限り、ただ同じアイコンがひたすら並んでいるのだからアイコンに情報は何ひとつ含まれていないのだが、しかしアイコンを取り払ってしまえばいいかというとそれはそうではない。ただただ文字が並んでいるのを見ていると、内容がどうであるかには関係なく正直うんざりしてくる。私の中ではそれは文が読みやすいか否か以前の問題なのだろうと思う。
 また、今は親ノードのIDに対して@を付けてメンションを飛ばしている風の見た目にしているが、最初はそうしていなかった。メンション風にする前、タイムライン上の各書き込みはそれぞれ別の話題に対しての書き込みなのに、宛先を明示していないと続けて読もうとしてしまい、頭が混乱していた。そのことに気がついたのでこの形にしてみたのだが、そうすると、見ただけでどこ宛てかはわからなくとも、宛先を表示していれば「どこかの何かに宛てている」ということが前提となるので、文脈の混在が気にならなくなった。それは普段、Twitterのタイムラインで当たり前にやっている脳の処理であろう。

マップ

画像

 左側の平面配置は、アウトライナー部分のアウトラインについて、日付ノードを除いたものをCSSでいい感じに整えたものだ。アウトライナーでの表示と見比べるとこんな感じ。
画像

画像

 各階層について、兄弟ノードは横方向、子ノードは縦方向に並んでいる。各ノードのサイズは文字数と横方向の個数に応じて適当に伸縮する。階層が深くなると背景色が濃くなる(なんとなくそうしている)

 私が作ったものを他の人が今ぱっと見てわかりやすく思うかは微妙なところだと思うが、私にとっては自分で作ったアウトラインが変形しているので(つまり書いてある内容は既に一度頭に入っている)、ひと目で全体の構造がわかるというありがたみを感じている。平面上にみっちり敷き詰められた状態で、更に各項目について文字数が多すぎるものはスクロールするようにしているので(項目のブロックが縦長にならないようになっている)、画面にはかなりの情報量が入る。
 また、topicのノードについて背景色を変えているように、data-type属性の値(≒アイコンの種類)によってCSSを変えて見やすくすることもできる。例えば結論用のアイコンを作って背景色を赤系統にする、ということをしている。
 なお、これも各項目をダブルクリックすればアウトライナーのノードがフォーカスされるのですぐ編集に取り掛かることができる。

簡易検索

 現状、AND、OR、NOT検索はできないが、特定のキーワードを含むノードをピックアップすることはできるようにしてある。
 検索を実行すると、アウトライナー画面は該当するノードの背景色が黄色くハイライトされ、タイムライン画面は該当ノードだけ表示されるようにフィルタリングされる。タイムラインは他に期間指定とdata-type属性(≒アイコン)でフィルターできる。
 あと全データから「#」を付けた文字列を取得してオートコンプリートを設定しているので(検索欄をクリックしたり↓を押したりすれば候補が出る)、Twitterのようにハッシュタグを使うこともできる。
 必要が生じれば、AND、OR、NOT検索をはじめもっと細かい高度な検索も実装するかもしれないが、今のところは別にいいかなという感じでいる。

 細かいところまで色々書いたが、重要なのはCtrl+←/→という簡単な操作でノードの属性を変えられるようにしたことと、アウトライン構造を維持したままアウトライナー的でないビューを実現したことだ。自分Aと自分Bその他の切り替えに何クリックも必要だったら続かないだろうし、せっかくメモが捗っても書けば書くほどビューに難を感じてしまったらしょうがない。
 今までアウトライナー系のツールは色々と作っており、どれもその時点では自分の中で革新的だったのだが、今回が一番会心の出来という感じがする。データ構造や必要な操作としてはシンプルで、自力でやらなければならない処理はほとんどなく、それでいて今まで抱えていたもやもやを一度に晴らせるものになった気がしている。

 ちなみにこのツールの保存形式はOPMLなので、Dynalistなど他のアウトライナーにそのままインポートできる(ただしdata-type属性は消失する)
 

2022/10/31

アウトライナー×つぶやき×平面配置①~経緯編~

 前回メモを取ろうとすると文にできなくなる件、Twitterなら十分に読みやすいメモを書けるのに自分だけが見るメモ用のツールにメモをしようとすると雑に書いてしまうのが不本意だ、という主旨のことを書いた。
 そのことを解決するデジタルノートツールを作ったので、そこに至るまでの経緯とツールの様子について書いていくことにする。長くなるので前半後半に分け、今回は経緯の話をする。


 R-styleで前回の記事を取り上げてくださった。

 こちらの記事内で、次のような指摘がある。

誰が読むのかはわからなくても、「誰かが読むかもしれない」という想定があるだけで書かれるものは変わってくるし、誰も読む可能性がないものはそれに見合った書き方をしてしまう。
 そして「できればツイート画面だろうがメモ用ツールだろうが変わらず淡々と書けるようになりたい」という私の願いに対して、「おそらく叶わないだろう」として次のように書かれている。
もちろん、人間の脳は可塑性があるので、訓練すればできるようになる可能性はある。(中略)あるはメモツールを開いたときに「これはもう一人の自分に語りかける窓なのだ」と強く信じられるようになるしかないだろう。
 その通りだと思う。拝読した時点では「そうだよな~そもそも無茶な願いだよな~」と思ってこの話はお終いにしかけたのだが、いや待てよと思い直した。
 倉下さんは「メモツールを開いたときに『これはもう一人の自分に語りかける窓なのだ』と強く信じられるようになるしかない」とお書きになっており、そうすれば実現し得るという条件でありながら、しかし到底無理であるという感が漂っている。なぜかと言えば、メモツールにはどう見ても「他に人はいない」からである。「強く信じる」ということをしなければ「もう一人の自分」などというものがそこには現れてくれない。「メモはちゃんと取ろう」という心がけすら貫けないのに、もう一人の自分がいるのだとただ信じ続けるなんてできようはずもない。
 しかし逆に言うと、「もう一人の自分がいると自然に考えられるメモツール」があったとすれば、自分の信じる力に頼るという無理をする必要はなくなるように思える。そこをどうにかすれば、どうにかなるんじゃないか? そう思って、自分の意思の如何から離れ、具体的なツールの設計を考え始めた。

 設計の話に移るにあたり、少し話題を戻して、私はどういう状況下でメモが捗り、どういうツールにやりにくさを感じているのかを振り返る。
 前回、Twitterなら捗るということを書いたわけだが、その理由としては大きく二点ある。
 まず「人が見る可能性がある」ということだ。これは倉下さんもご指摘の通りで、読み手がいるとなればそれに合わせて思考が自動的に動いてくれるところがある。フォロワーのタイムラインに流してしまうものであるからには、フォロワーが「なんじゃこりゃ」と思うものは避けたいし(自由気ままに生きたいもののあからさまに迷惑になりたくはないのである)、一応は読めるものにしようと心がけることになる。
 もうひとつは、140字という字数制限だ。これが日本語話者にとっては絶妙な数字で、無駄な言葉を省きつつちゃんと全部埋めれば、ひとつのツイートでひとつの意味を示せるぐらいの長さなのである。それを超過するのは大概意味が整理されないまま複数混在してしまっているということだろうし、100字にも満たないような短さだと情報として不十分な場合が多い。格言的な一言を投げるのでもなければ、考えの言語化というのはそう短く済みはしない。140字を埋めるということは十分な言語化のための丁度良い目安になる。このことにより、140字を埋めようという気持ちになりさえすれば、読み手のいない非公開アカウントでのメモも比較的きちんと書きやすい。(誰しも自然にそうなるはずだと言いたいのではない。)
 この二点は「書く」時に捗る理由だが、Twitterには他にも好ましい要素がある。まずツイートの見た目が良い。ひとつのツイートがひとつのブロックにきちんと収まっており、左にアイコン、上下に周辺情報が書いてある。以前情報カードの特徴について少し考えたことがあるがデジタルツールでの情報カード性および文脈との結びつきの在り方、本文の他にその周辺情報が近くに添えられていると認識の助けになるし、直接その情報を「使う」ということはなくともなんとなく安心感を覚える。(この感覚は人それぞれかもしれない。)
 加えて、ツイート検索をした場合、条件に合うものが抽出された状態でタイムラインとほぼ同じ見た目で並ぶということになるが、これもまた個人的に気に入っている挙動だ。検索結果のスタイルが通常画面と同じ状態で並ぶ、というのはそんなに当たり前のことではないように思う。検索用の画面に従った検索結果用のスタイルで表示される場合の方が多いだろう。このことはTwitterでの投稿がツイートという単位で行われていることで実現できることなのだろうと思う。

 さて、それではTwitterをメモツールにしてしまえばいいじゃないかという話になるのだが、話はそう簡単ではない。Twitterは自分用メモのためのサービスではないし、書くのは良くてもその後操作することが不可能だということがメモとしてはネックになる。ツイートしたデータを何らかの形で取得して何らかのプログラムで加工して…ということは考えられなくはないが、明らかに回りくどいし、適切なメモツールが他にあればそれを使うに越したことはない。
 メモを書いた後に必要になる操作は、メモ自体をより望ましい表現に編集すること、そのメモに新たなメモを足していくこと、他のメモと関連付けていくこと、といったことである。用が済めば消すことも必要だろうし、「消す」と言っても「削除する」のか「アーカイブする」のか「取り消し線を引く」のか「薄い色にする」のか、欲する動きはメモの役割次第で違ってくる。
 小さい単位での操作と言えば、それを得意とするのがアウトライナーであろう。編集も加筆も並べ替えも簡単だし、「消す」操作もいろいろなパターンがあり得て、好きな形を自分で選択できる。ツイートがアウトライナー上に並んで、それを操作・編集できればかなりいい感じだろう。例えばデイブ・ワイナーが公開しているアウトライナー(Drummerほか)は、アウトライナー上からTwitterに投稿できるようになっている。
 じゃあアウトライナーでいいんじゃん、と思いたくもなるが、ところがどっこいそうはいかない。そうはいかないというのは私の性質と照らせばということであって、アウトライナーで全然問題ない人はもちろんたくさんいるだろうし、別にアウトライナーの至らなさを批判しようというのではない。

 現在私がアウトライナーをメインのツールとして活用しづらく感じる理由は、操作性の問題ではなく、ビューが自分の感覚と合っていないことにある。
 アウトライナーは書けば書くほど縦長になっていき、俯瞰するとなればスクロールを繰り返すしかない。「畳む」ということで全体を把握できるのがアウトライナーの売りだが、俯瞰というのは必ずしも「より上位のレベルの記述に絞る」ということで達成できるものでもない。全体が見たいというのは全体が見たいということであって、要約していきたいという気持ちとはまた別なのである。
 また、アウトライナーは「行」を縦に積んでいる状態のため、記述が数文字でも横幅いっぱいでも、その行が占める面積というのは同じである。短いメモが続くと右側には空白が目立つが、縦方向には一行は一行としてどんどん積まれて伸びていく。つまり、情報量に対して使用される面積が大きくなってしまう。その結果、内容としては大した濃さでもないのに全体を見渡せないということになる。
 例えばKakauはカラムの概念によってこのもったいなさを解決している。教室の黒板のように使えて、情報をまとめるにあたってはとても有用なツールである。
 少し前に自分が作ったデジタルノートツールでは、ノードをアウトライン構造から解放し、付箋状に分解して平面に自由に配置できるようにすることを試みた。挙動の実装は一応できたものの、その機能がそんなに嬉しいかというと、案外そうでもなかった。平面配置できるのはいいのだが、平面配置させるということにいちいち手間を使っていられない感じがしたのである。
 ということで、今回考えたのは、アウトライン構造を保ったまま横方向にも表示するという手である。当然、自力で配置するのではなく、プログラムが自動でそのように配置してくれるということだ。というか、ほとんどCSSの力でそのように表示されるようにした。

 つまりまとめると、

  • ツイートのように書き、タイムラインのように並べられて
  • アウトライナーのように操作・編集できて
  • 平面いっぱい活かした表示ができる

というツールを設計しよう、と考えたわけである。(つまりビューは三通りあるということだ。)

 こうしてツールの使用感とビューの問題は解決したとして、肝心の「もう一人の自分がいると自然に考えられる」という状況はどうセッティングすればいいのか。
 これは私個人の経緯が根幹を成すものになってしまうので、同じツールを使えば他の人も同じように感じられるということではないが、とりあえず自分は解決したので記しておこうと思う。
 まず前提として、私は頭の中に「規範意識と合理性に沿った判断をしたい自分」と「自分の性質に正直に従ってカオスに生きたい自分」のふたつが存在しているということを強く感じている。別に人格が分かれているという話ではないのだが、判断基準が二つあるとか、片方の判断がそれと矛盾したもう一方の要素によって台無しにされるとか、そういうことを常に感じるということだ。かつては規範意識と合理性の側が勝ってしまいがちで、自分の本質を抑えつけて「真っ当」っぽい選択をしようとして、その結果精神を壊してしまうことにもなった。よって後者の側を解放しなければならないと思ったのである。
 とはいえ規範意識と合理性を潰してしまえばいいかというとそれも間違っている。あくまで「二つの基準を併せ持っている」のであって、抑圧されてきた側が本当の私というのではないのだ。つまり両方が対等に並ぶ必要がある。
 そこで、私は二つの絵文字を使って、合理性っぽい側と本音っぽい側に分けて自分の思いを整理するようになった。それはメリットとデメリットで分けてそれぞれリストアップ、ということではなく、自分Aと自分Bの対話という形を取っている。交互にセリフを書いていくようなものだ。折り合うまで対話を続けることになる。
 いつもそれをやっているわけではないし、最近は合理性がむやみに決めてしまうこともなくなったので対話の頻度も下がっていたが、今回「もう一人の自分」ということを考えた時、このスタイルを再現すればいいのではないかと思い至った。

 もともと絵文字で視覚的に区別を付けていたことから、Twitter風のビューを採用するなら同様のアイコンを作って可視化すれば都合が良いと考えた。そしてそれをアウトライナー上でもわかるようにすれば完璧である。
 何か思いを書く時には、基本的に自分Aと自分Bのどちらかを選択して書くことにする。すると、どちらかが選択されたからには次はもう一方にも喋らせたくなる。そこでおおよそ交互に話すという形態が成り立つためには、きちんと互いに情報を渡す形にせねばと考える。そうして、ただメモをちゃちゃっと書いていた時よりずっとしっかりしたメモを書き残せるようになった。

 これらを如何にしてデジタルノートツールとして実現したか、というのは次回に詳しく書くことにする。
 文章だけだとあまりにもイメージが曖昧なので、フライングで一枚スクリーンショットを貼っておく。

画像

 これはアウトライナー部分で、右にタイムライン、左に平面配置のビューがある。それらのスクリーンショットは次回の記事で。
 

管理人

アイコン画像

のらてつ Noratetsu

キーワード

このブログを検索

検索

ブログ アーカイブ

2025
2024
2023
2022
2021