前回の続きです。付箋ツールに色々な機能を搭載していく話になります。
四種類の付箋を作る
まず付箋に種類を作ろうと思いました。最初に思いついたのはテキスト、URL、画像、アウトライナーです。
今ならテキスト・URL・画像をわざわざ分けることはせずに、replaceと正規表現を使ってHTMLタグをちゃちゃっと作ってしまうか、markedライブラリを使ってMarkdown形式のテキストを自動で整えるかするのですが、当時はよくわかっていなかったので、種類ごとにそれぞれ異なる入力欄を構築して表示できるようにしていました。入力したい時（マウスオーバー時）に複数の入力欄を付箋の下部に表示し、入力が終わったら結果を反映させて入力欄を閉じる、というなかなか面倒くさいことを頑張って作りました。
今となっては無意味な複雑化としか言いようのないやり方ですが、おかげでイベントリスナーがどうこうということにはだいぶ慣れました。
アウトライナー付箋を作る
2ヶ月目の一発目でアウトライナーの自作について書きましたが、この頃はアウトライナーと他の概念の掛け合わせのようなことに関心を強めていたので、付箋ツールにもアウトライナーの要素を取り入れたくなりました。付箋の一枚一枚を箇条書き型のアウトライナーにするというアイデアです。
アウトライナー付箋については、sosuisen氏が開発なさっているツールのデモ映像が多いに刺激になりました。
最初に作ったアウトライナーでドラッグアンドドロップの処理としぬほど格闘していたので、付箋間のノード移動とかもなんとかなりました。データはHTMLで丸ごと保存する形式を取っていたので、単にDOM要素の位置が変わればオッケーで（つまりデータベースの書き換えの処理がない）、挙動の複雑さの割に簡単に済みました。（現在はJSONで保存することにしているので、色々変更を反映する処理が必要になるわけです。）
付箋間のノード移動は実際にやる必要が生じることはあまりないのですが、そうできないとなると気分的に不自由な感じがするので実装していました。気楽に付箋を作るには、作った後にどうにでもできるという保証が必要と思ったのです。
ページを複数にする
次に、ページを複数作れるようにして表示を切り替える形を作ることにしました。
一応画面からはみ出すように付箋を移動すればその分だけ紙面の範囲は広がるようになっているのですが（CSSでoverflow:auto;を設定するだけです）、一方でディスプレイのサイズは変わらないので、表示できるサイズというのはどう頑張ってもディスプレイの大きさの分だけに限られます。滑らかな拡大縮小の挙動はさすがに作れなかったので、画面外の箇所を確認するにはスクロールするしかありません。その状態はあんまり嬉しくない感じがします。内容によって場所を分けたい気持ちもあります。
そういうわけで、付箋ツールとは言っても大きな壁やホワイトボードに貼るイメージというよりは、ノートの見開きに小さい付箋を貼っていくくらいのイメージを持つことにして、ページの切り替えや付箋のページ間移動を簡単にできるようにしようと考えました。
左側にタブがありますが、タブの数と同じだけ右側のメインの領域にdiv要素が作られており、アクティブになっているもの以外がdisplay:none;で非表示になっています。タブ切り替えの挙動の作り方は「タブ切り替え JavaScript」で検索すればずらっと出てきますし、基本はclassの付け外しだけなので難しくはありません。
付箋をタブにドロップすると、他のページに付箋を移動することができます。付箋の位置はドラッグ開始時に保存します。このドロップの処理も前回紹介したjQuery UIが活躍しています。jQuery UIのDroppableは何をドロップした時に実行するのかを簡単に指定できるので、書くのが非常に楽になります。
ページの切り替えというのは実装が簡単な割にできた時の感動が大きい要素な気がします。クリックすると切り替わるというのは、やたらとボタンを押したがる子どもの気分を思い出させるのかもしれません。
付箋ごとに色とフォントサイズを変える
付箋ツールとして実用に必要な要素はこれで大体完成です。しかしまだ何かしてみたくなります。
今度は付箋ごとに色や文字サイズを変えられたらいいなということを思いました。色の設定はここまでに作ってきたカードツールとアウトライナーでも実装していましたし、postalkを見てああいうふうになったら良さそうとも考えたのだったと思います。
しかし、どうやって指定するかというのは難問でした。当時は右クリックメニューを作るということがちょっとできなかったので（難しそうな気がして選択肢に上がらなかった）、他の何らかの手段で入力する必要がありました。結局はマウスオーバーで入力欄とボタンを表示し、予め定めた書式で文字列を入力するという形にしました。
これは自分用のツールだからできることです。他の人にも使ってもらうツールでこんな独特で直感的でないUIは採用できません。しかし、自分用なら世の中にあるような洗練されたUIでなくともよいのです。実行したいことが実行できる形であればよいのであって、それがどれだけ妙な姿をしていても何も問題はありません。つまり、「素敵なUIを作るセンス」はなくてもどうにかなります。
洗練されたUIを求めるタイプなのにそれが自分で実現できない、となれば当分はもどかしい日々を送ることにはなりますが、どうあってほしいのかがわかれば、そのうち自分にとって良いUIは作れるようになるのではないかと思います。「そうでないもの」と付き合わざるを得ない自作ツール作りの過程で、「こうだったらいいのに！」という思いがより具体的になる可能性もあります。漫然とカッコいいアプリケーションを使っていた時より、自分のこだわりは明確になるかもしれません。
検索機能をつける
いい加減長くなってきましたが、最後にもうひとつ。付箋がごちゃごちゃ増えてきた時のことを考えて、検索機能をつけることにしました。
検索と言っても検索結果をずらっと並べるという形ではなく、条件に合わないものを半透明にして条件に合うものだけがはっきり見えるようにするものです。classの付け外しなので実装は比較的簡単です。以下は「表示」の二文字を含まないものを半透明にしている状態です。
付箋ツールの使い方として検索機能が必要になるパターンは多分そんなにないので、すごく役に立つというものではありませんが、「探したい時に探せる」という保証があると安心感が高まります。
ちなみにその他には、動画付箋や音楽付箋を作ったり、アウトライン付箋の内容を1クリックでScrapboxに書き出せるようにしたりしました。当時思いついたことを片っ端からやってみたという感じです。実用というよりは「何ができるか」を追求していました。
そしてコードはもじゃもじゃになる
こんな感じで、ちょっとできることが増えてくると、あれも付け足そうこれも盛り込もうと言ってどんどんコードが膨らんでいきます。うまく一度に処理する形が作れなかったりして、二度手間になるような処理を書かざるを得ないことも多々あります。あっという間にスパゲッティです。（複雑に絡み合った見通しの悪いコードをスパゲッティコードと言います。）
この付箋ツールは、その後間をおいて何度もリファクタリングしてコードを整理していきました。JavaScriptの理解が深まるのに合わせて、考え方を改めて書き直したわけです。
最初はオブジェクト指向の考え方が全然わかっていなかったので、記述がどことどこで絡んでいるかわからないような形で複雑に組み合わさり、ひとつの大きなもじゃもじゃとしたプログラムを作っていました。それからだんだんと、小さい単位で関数にまとめるようになり、オブジェクトにまとめるようになり、そして外から操作できないようにパーツ毎にカプセル化するようになっていきました。
レベルアップするたびに、それ以前のコードに「なんて変な処理をしているんだ！」と嘆くことになるのですが、変な処理をするのは初学者には避けられないことでしょう。何度も書きますが、ともかく動けば良いのです。変な処理をするな、と誰かに叱られていたら、びくびくしてしまって前には進めなかったと思います。
さて今回のサンプルはこちらです。（PC用です）
https://nora-tetsu.github.io/demo/Fusen/
色々と機能について語っておいてなんですが、このサンプルでは前回書いた基本的な機能のほかは、複数ページの切り替え機能のみ実装しています。アウトライン付箋や色変更、検索などの機能はつけていません。
この前に作ったアウトライナーまでは実用面では今ひとつのところがありましたが、この付箋ツールはそれに比べると実用度が幾分高まりました。二ヶ月目に作ったものはアウトライナーと付箋ツールだけですが、ここまでに得たものを踏まえて、この先は実際に使うためのツールを作ることに取り組んでいくことになります。
このシリーズ記事の概要はこちら→ノートテイキングアプリDIY体験記