の作業記録
うちあわせCastな木曜日
- 作業記録の共有
- Textbox+付箋の扱い
- うちあわせCast収録
- Textbox+sheetの扱い
8:00
おはようございます。今日は午後からうちあわせCastの収録です。午前中は、昨日に引き続き付箋の扱い機能を実装します。
Textbox:
付箋を選択したときに、imaginaryCardを表示させるところまではできています。ここからの実装。
まず、そのimaginaryCardを編集可能にします。
＊ ＊ ＊
contenteditableをtrueに。これは簡単です。
＊ ＊ ＊
タイトル行を表示するように。
見た目は暫定で。
タイトル行はサイズを大きくしたいので、現状のコードでは厳しい。HTML的には見出しにすべきなので、現状のように単にテキストを連続して表示するのではなく、要素を追加したい。でもって、UL/liにして、アウトライン的な操作も可能にしたい。
＊ ＊ ＊
現状は、付箋がクリックされると、そのinnerTextが配列に保存されて、クリック操作のたびにその配列でカードの中身を生成している。操作がクリックだけならばこれで問題ない。しかし、カードの中身を編集できるようになると、この方式では難しいところが出てくる。
まず、追記されたテキストがあっても、付箋の操作があるたびにその内容が消えてしまう（追記されたテキストは配列に含まれていないから）。
次に、カード上で付箋のテキストが編集されとして、次に付箋操作をしたら、やっぱりその編集内容がリセットされる。つまり、カード上での編集を配列に戻すことが必要。
あるいは、配列を使わずに、付箋をクリックしたらその内容が単にHTML的にappendされるようにする？そのHTML要素に暫定的なIDを割り振って付箋とづけしておいて、付箋の操作と対応させる？
ふむ。だんだんややこしくなってきた。
＊ ＊ ＊
カード上で操作をするたびに、その内容を配列に反映させるのが良さそうな気がする。
しかしそうすると、カード上で付箋の内容を書き換えたあとに、付箋を二回目のクリックをしても、それを消せなくなる（内容の一致で配列の要素を削除しているから）。それこそIDの割り当てが必要となる。
＊ ＊ ＊
こういうときに、モードを区切れば話は簡単になる。まず付箋を選ぶモードがあり、その状態ではこれまで通りの動作ができる。で、編集ボタンを押すと編集がはじまり、そこでは並行して付箋の操作はできなくなる。その代わり自由にテキストを編集できる。編集モードに入ると、付箋とカードの接続は失われるので、お互いの編集は影響を与えない。
こういうモードの切り分けならば、上記のようなややこしい話は考えなくてもよくなる。が、あまり面白くはない。
＊ ＊ ＊
ただ、現実的に考えたときに、カード上で編集した付箋内容をその後クリックして消したくなることがあるのかどうか。ほとんどないような気がする。
付箋の出し入れは、だいたいテキスト編集作業が始まる前までであろう。付箋を追加して、そのテキストを編集して、「やっぱり違う」と戻すなんてことはほぼ起きない気がする。
が、とりあえずID方式を少し考えよう。
＊ ＊ ＊
付箋をクリックしたときに、配列のlengthを見て、その長さ+1のidをattrで与えておく。カード上にliを作るときに同じidを割り当てておく。付箋がもう一度クリックされたらそのIDを見て対応するliを消せばいい。
では、カード上で行移動が起こったら？
その際、配列から要素を再描写してしまうと、IDの割り当ても変わってしまう。つまり、新しく付箋が追加でクリックされたら全体を再描写するのではなく、単にappendした方がいい。あるいは、配列にテキストだけでなくidも一緒に保存する（この場合は、ハッシュなどで適当な数字を当てておいてもいい）。で、カード上で行移動が起こったら、配列の順番も動かす。
＊ ＊ ＊
行移動の場合はともかく、keyupのたびに、それを配列に保存するのはあまりスマートではない気がする。まあ、気がするだけだけども。どうせそこまで大きい量にはならないし、複数開くこともないので可能ではある。
＊ ＊ ＊
整理しよう。
まず配列は「選択された付箋とそのID」を保存する装置だと捉える。で、追加と削除の場合だけ、それを使う。いや、というかそれならば別に配列は不要か。要素にIDを割り振って、あとは単にHTMLをappendしていけばいい。配列をまったく使わないパターンだ。
次に配列を、カードのもとデータだとする捉え方。すべての操作においてその配列を変更し、その配列をベースにカードを再描写する。
一見面倒そうだが、それぞれの操作で配列への処理を行い、あとはカード描写のfunctionを走らせればいいだけなのでコードの構造自体はシンプルになる。少なくとも、何をしているのかはわかりやすくなる。
とりあえず、付箋に加えて、追記される本文とタイトルの存在がある。配列を使わない場合は、描写されたカードがその保存場所となる。配列を使う場合は、そこにも本文とタイトルが保存される。
でもって、カードを書いた後には「保存」の作業が待っている。それは第一にページ上に他のカードと同じように配置することと、その内容をどこかのjsonに書き込むことの二つを意味する。その際に、どちらの方がやりやすいか。
まあ、あまり変わりないか。配列を使う場合でも、それはカードのもとデータであるわけで、結局カードそのものとほとんどかわりがない。つまり、どっちでもいい、ということだ。
＊ ＊ ＊
ID方式に切り替えました。とりあえず順調に動いております。
＊ ＊ ＊
いよいよ次のステップ。カードを書いたとして、それをどうするか。
基本的には「保存」だろう。ボタンをつけて、それを押したら内容をどこか別の場所に移動する、というのがよくある流れ。
しかし、一度でもimCardの中でkeyupイベントが起こったら、というトリガーもありえるだろう。逆に言えば、何もキー操作をしないと保存されない、ということでもある。その方が良さそう。
keyupイベントのたびに、そのクローンをページ内の「カード置き場」に複写する、というのはどうか。imCardが存在している限り、その監視は続く。
では、どうすれば終わるのか。xボタンをつける？ダブルクリック？
新しい付箋の選択？ それは追加の選択とどう区別する？ shiftを押しながらクリックなら？
フォーカスが外れたら、というのは違う。ボタンが一番簡単だが、どうするか。
shift + return、という手があるか。チャットアプリとかと同じように、改行と送信をshiftで分ける。
ようは、キーボード操作なのかマウス操作なのか、という点が重要なのだろう。
12:00
Textbox:
だいたいできました。
付箋を選択→イマジナリーカードの表示→カード上でkeyup→そのカードをcard-listのdivに転写。shift+enterでイマジナリーカードのremove。保存はまだですが、これでかなりそれっぽいことができます。というか、保存も、カードボードの保存を延長すればそのまま作れますね。
あとは一度設置を終えたカードを再編集できるようにする機能です。
このとき、再び付箋を選択状態にするのかどうか、という問題がありますね。あとshift+enterを押したときに、もともとの付箋にも何かしらの処理を加えたいところです。この時点で正式なIDを割り当ててもいいですね。
＊ ＊ ＊
14:00
うちあわせCast:
収録します。
＊ ＊ ＊
18:00
Textbox:
カードからシート、という流れのプロトタイプ。
