簡易ブックマーク管理ツールを作ったことで、CSVファイルから自由にHTML要素を作る術を得ることができました。表のデータにレイアウトやデザインというものを結びつけることができるようになったわけです。
最初はブックマークの整理のことしか考えていませんでしたが、それができるようになってみると、今度は得たものを応用して別の何かを作ってみたくなりました。
この時自分の中に問題意識としてあったのは、せっかく書いたメモがそのまま埋もれて死んでしまっているということです。メモが死蔵される原因のひとつが「テキストの連続の中に混じってしまっている」ことにあり、見た目に存在感を持たせれば見返しやすくなるのではないか、と考えました。
そこで作ったのが、メモをカード風にして並べていくツールです。（なお画像は後述のエディタ版です。）
このレイアウトとコンセプトは、Scrapboxと、倉下忠憲さんのMindGardenの影響を受けています。
この時期はとにかく乱数を使いたかったので（プログラミングやってる感があるので）、カードをランダムにピックアップする処理をツールのキモとして作りました。
当初はブラウザ上でデータを編集して保存する術をまだ知らなかったので、このツールはビューワでしかありませんでした。CSVファイルに手動入力してデータを作り、このツールを通して見るという形です。
やがてlocalStorageの使い方とJSONを覚えると、ビューワからエディタへとクラスチェンジしました。ノートのテイキングが可能になったわけです。ようやくNTA-DIY（ノートテイキングアプリケーションのDIY）に至ったということですが、この進歩は劇的です。
localStorageという機能を知る前は、ノートテイキングアプリとして成り立たせるにはどうしたらいいのかいまいち想像できなかったので、こうすればいいのかという感動はかなり大きなものでした。
localStorageなるものは初耳だという方に簡単に説明すると、localStorageというのはWebブラウザの保存領域にデータを文字列で保存する仕組みのことです。ブラウザではセキュリティの問題から直接ローカルファイルを編集することができませんが、ブラウザの中にならデータを置いておけるのです。ただしブラウザに依存するので他の端末からはアクセスできない上、容量には限りがあるので（ブラウザによって異なり、ドメインごとに5～10MB）、万事を解決するものではありません。その問題については後々他のやり方で打破することになります。
さてツールとして成り立たせる術は得ましたが、いきなり実用性のあるツールを作れるはずはないことは解っていたので、実用的なツールを目指しはしながらも「実際役に立つかはさておき、この挙動が実現できるか試したい」というような発想でコーディングしていきました。
そうして作ったものがこれです。（スマホからもアクセスはできますがPC用です。）
目的と仕様
- 思いついたメモと誰かの言葉の引用を溜めることを目的としています。
- カードをクリックすると編集画面が表示されます。
- 各欄の編集履歴が全部保存されます。
- attribute欄に特定の文字列を入力するとカードの種類を設定できます。
- 「！」：重要（文字色が変わる）
- 「P」：ピックアップ（右側の列に表示される）
- 「X」：トラッシュ（非表示にできるようになる）
- その他色指定（マウスオーバーで有効な文字列を表示）
- カードの番号を指定して抽出する範囲を決められます。
- 指定した枚数をランダムにピックアップできます。
自分用のため親切設計にはなっていませんが、データはお使いのブラウザのlocalStorageに保存されるので、実際に使用することができます。なお編集履歴の保存は「必要は多分ないけど思いついたのでやってみた」というタイプの機能です。
CSSをそれなりに整えるとそれなりのものができている感じに見えるかもしれませんが、特に難しいことはしていません（何しろ始めて一ヶ月経っていない初学者です）。技術的にはごくごく初歩的な範囲だけで自分の希望にそれなりに沿うものができることがわかりました。これは驚くべき発見です。
当初は「一年後には何か小さいアプリケーションを作れたらいいな」と思っていたわけですが、そこで思い描いていた「小さいアプリケーション」は開始一ヶ月弱でもう実装可能になってしまいました。最初の予想がちょっと頓珍漢だったとは思いますが、それだけプログラミングというのは高い壁に思えていたのです。
もちろん「良いコード」は全然書けません。エラーが発生しないようにツールの使い方のほうを気をつけるということも多々ありました。重要なのは、「人間の目にはめちゃくちゃでもコンピュータが解釈できれば動く」ということです。力技が許されるならできることはたくさんある、ということをこのツールを作る中で知りました。そうなると、肝になるのはスキルより如何に思いつくかの方です。
なおコードは一年前に書いたものそのままではなく、今現在のスキルで全面リファクタリングしたものです。ゼロから作り直したわけではないので、今作るとしたらそうはしないという処理がちらほら残っていますが、気力が尽きたのでこんなもんでいいだろということにしています。リファクタリングにあたり色々得たこともあるので、格闘した甲斐はありました。コーディングのアイデアがいろいろ生まれたのと、当時の工夫に価値を感じる部分をいくつか発見しました。
例えばattribute欄に文字列で設定というのは、未熟な頃に編み出した「なるべくレベルの低い処理でどうにかしたい」という苦し紛れの策で、今見るととてもダサい感じがします。今ならチェックボックスやカラーピッカーなどを当たり前に設置します。
でも自分しか使わないツールでUI上のそういう「わかりやすさ」が本当に必要なのか、と思えてきました。重要なカードだという設定をするにあたり、この形式なら「！」のたった一文字で済むところが、もしinput要素のデータを個別に扱って「"important": true」とかやったらデータの文字数が何倍にも増えることになるわけです。「重要な内容でピックアップ指定にもしていたけど不要になったのでトラッシュに設定した」というニュアンスが「！PX」だけで済んでしまうのは実に省スペースです。
頑張って作ったこのツールを当時バリバリ使ったかというとそれほどでもないのですが、それなりに面白いツールを作っていたなと思います。
当時は他のツールなどで作成したデータを加工して取り込むというようなことを考えなかったので、ツールを作ったらそのツールのデータというのはツール上でゼロから作っていくものでしたが、今なら過去の記述を整形してガッとインポートするみたいなこともやろうと思えばできるので、大量のメモが入った時の使用感が実際どんなもんかそのうち試してみてもいいかもしれないと思いました。
このシリーズ記事の概要はこちら→ノートテイキングアプリDIY体験記