の作業記録
断片の扱いについて考える
- 作業記録の共有
- Textbox+付箋の扱い
8:00
おはようございます。原稿を進めたいところですが、もう少しでブレイクスルーしそうなので、昨日の続きを考えます。
Textbox:
一行だけの書き込みをjsonにまとめ、そのjsonを参照して以下のような表示を作りました。
で、問題はここからどうするか、です。これらをどのように操作して、どんな状態に持っていきたいのか。それがわかれば、フィードバックして、ここでの表示がどのようなものであれば嬉しいのかが見えてきます。
＊ ＊ ＊
アイデア１．進化型。ここでの進化はダーウィンのそれではなく、ゲームなどでの進化です。
付箋が並んだUIにおいて、ある付箋を別の付箋に重ねるとそれが「進化」して、ステージが変わる。つまり一つ上の領域に移動する（β領域）。でもって、その領域でも付箋と付箋が重なると進化して、ステージが変わる。
そんな風にどんどん所属するdivが移り変わっていくイメージ。これはメタノートのメタファを拝借。
あるいは領域を移動せずに、単にその領域の先頭に移動する方式もある。これは押し出しファイリングの考え方。こちらは領域の管理が不要になる代わりに、重なった付箋とそうでない付箋の見た目をどう管理するのか、という問題がある。
＊ ＊ ＊
で、もっと大きな問題。そうやって付箋をくっつけていくだけでいいのか、ということ。あと、ここでの付箋をくっつけるとは情報的にどんな意味があるのか、ということ。
たしかに付箋を並べていけば、そのなかでくっつけられるものは見つけられるだろう。それを繰り返していくことで、付箋に含まれたテキストは増えていくだろう。で、それだけでよいのだろうか。
ここでまた、「この操作において、自分は何を欲しているのか」という問題に突き当たることになる。
＊ ＊ ＊
ここに並んでいるものは、一つの記事の種になることもあれば、暖めている企画案の要素になることもある。使われ方は結構異なる。その意味で、単純統一的な操作は考えないほうがいいだろう。いくつかのルートがあって欲しい。
＊ ＊ ＊
一番簡単なのは、上に並んでいるカード群(tracknoteのもともとのパーツ)にドラッグして、その一要素とすること。これが一番直感的な操作であり、たしかにそういう断片を求めている断片もあるだろう。でも、それだけではない。
まだどこに位置するのかはわからないけれども、断片同士で関連性を持つものもあるだろうし、それ単独で何かの媒体で記事にしたいと感じる核のようなものもある。これらはドラッグすべきカード先を持たない。
では、どうするか。
＊ ＊ ＊
実際的な話を先に考えてみる。同一領域で付箋を扱う場合（押し出しファイリング）、付箋を二つ重ねたとき、その表示をどうするのか、という問題がある。
単純にテキストを追加する場合、付箋のheightは固定されているので下の文字列は見えなくなる。でもって、追加が増えても同じ。つまり、付箋を追加しても変化が可視化されない。
tracknoteのようにリアルに（つまりliオブジェクトを）並べると厚みが出てくる。つまり、変化が可視化できる。その代わり、全体の内容を見るために特殊な操作が必要となる（前者ならスクロールすればいい）。
付箋を重ねることで、background-colorが変化する、というのはデジタル的なやり方だろう。だんだん色が濃くなっていく、的なこと。これはJavaScriptを使えばまったく問題なく実現できる。
なんにせよ、何かが変わったら、その変わった感じを可視化した方が良い気がする。その方が「操作している感覚」（広義のエージェンシー）を育むだろう。
＊ ＊ ＊
付箋の一つに「サイドバー恐怖症」というものがあり、これに関しては今週のメルマガ原稿で書こうと思っている。で、仮に書いたとしてその付箋をどのように扱うのか。そのままにするのか、削除するのか、それとも使用済みのマークを付けるのか。
でもって、先回りしていえば、「メルマガの原稿で書こう」と思っているその気持ちを、この付箋群においてどう反映させるのか。メルマガというcardsetを作り、そこにappendすればそれをなしたことになるのかどうか。
＊ ＊ ＊
メタ・ノートはアナログ手法なので、あるノートに書いたものを別ノートに書き写す、という作業が発生する。
デジタルの場合、それこそドラッグでその操作が代替できる。
本当に代替できていると言えるのだろうか。
この「書き写す」をデジタル的にレストアできないだろうか。
＊ ＊ ＊
付箋を消して、新しく付箋を書き直す。という作業を補助するUI。
＊ ＊ ＊
メタ・ノートは、少しずつ広い領域を割り当てているのがポイントとなる。
それを再現できないか。
＊ ＊ ＊
付箋に対してクリックかダブルクリックをすると、たとえば色が変わる。色は複数の色を移り変わっていくのがよい。
で、特定の色がついた付箋を「集める」という作業ができたり、それらの付箋を「使用済み」にできたりしたらどうか。
＊ ＊ ＊
関数型プログラミング。
データ ⇒ f(データ) ⇒ データ´ ⇒ g(データ´) ⇒ データ´´
おおもとの付箋を直接書き換えるのではなく、それをデータとして受け取り、新しい付箋（あるいは別のもの）として出力する。そういう流れを考える。
関数型であれば、このときおおもとのデータには変更を加えないわけだが、アイデアの扱いの場合、「一度使われた」的な目印をつけるのはよいかもしれない。
＊ ＊ ＊
先ほどの付箋の進化も似たようなものだろう。二つの付箋をくっつけるというよりは、二つの付箋を選んで、そこから新しい付箋（あるいは別のもの）を生み出す、という操作。その操作の結果として、二つの付箋の距離が近づいたり、何か印がついたりすることはある（ようするにcallback処理）けれども、直接二つをくっつけてしまう、ということはしない。
そういう路線で考えてみよう。
＊ ＊ ＊
まず、付箋をベースに新しい付箋を作る、というのがある。文言を補強したり追記したりといったこと。
このとき、内容物が本文+内容という感じになるのなら、それはもう付箋ではなくカードだろう。それは別の領域に移動させた方がいいかもしれない。
あるいは、上にあるcardsetに追記したいこともある。これをどうするか。
＊ ＊ ＊
ここまでの発見をまとめておくと、付箋リストはinboxではない、となる。その中身を移動させてどうこう、という考え方から一度遠ざかること。
＊ ＊ ＊
メタノート的に「広い領域に移動させる」はどのように実現すればいいだろうか。単純にwidthとheightを広げた別のdivに入れたらいいだろうか。
17:00
Textbox:
まったく新しいUIを作っていました。プロトタイプが以下です。
付箋をクリックすると、仮想的なカードが表示されてそこに選んだ付箋の内容が追加される、というものです。で、この仮想的なカードから実際のカードを生成する、という流れにする予定です。
＊ ＊ ＊
仮想的なカード（イマジナリーカードと呼んでいます）は現在fixedで固定表示しているが、他に方法はないか。下の付箋が見えなくなるのが気になる。
あらかじめ領域を空けておく？ 付箋の中に埋め込んでしまう？
＊ ＊ ＊
はじめはheightを小さくして、要素が増えるたびにそれを増やす？
18:00
R-style:
記事を書きます。
＊ ＊ ＊
publish:Evernoteのノートリンクとバックリンク | R-style