Noratetsu Lab

　いよいよ具体的に作ったツールの話がメインになります。
　今回は少し前の記事（前日譚②～JavaScriptを書けると何が嬉しいの？～（NTA-DIY：前日譚②～JavaScriptを書けると何が嬉しいの？～））で触れたブックマーク管理ツールの話です。

　管理と言っても、まだツール上でデータを編集するわけではありません。とりあえずCSVファイルにデータを用意しておいて、それを使っていい感じの見た目を作ろう、というものです。ツールというよりはビューワと言った方が表現としては合っているかもしれません。
　実際に作ったもの（のコードを今の書き方で綺麗にしたもの）をサンプルとして見れるようにしてみました。

• Bookmark Viewer

　データのCSVはこちら。「tag」「title」「url」「favicon」「description」の5つの項目を設定しています。説明がわかりやすいように一部を取り出すとこんな感じ。

tag,title,url,favicon,description  
SNS,Twitter（@Foam_Crab）,https://twitter.com/Foam_Crab,,  
Writing,Noratetsu Lab,https://noratetsu.blogspot.com/,,メインのブログ  
Scrapbox,Noratetsu's Room（のらてつ研究所）,https://scrapbox.io/noratetsu/,https://gyazo.com/8e76071e5281e7396c84c83d32554939/thumb/1000,  

　必須なのは「tag」「title」「url」です。どこに配置するかを「tag」で決めています。どのtagがどのカラムになるかはJavaScriptのコード内で指定しています。
　「favicon」はアイコンとして表示したい画像のURLです。省略すればデフォルトのfaviconを「http://www.google.com/s2/favicons?domain=${url}」で取得して表示します。
　「description」はそのページについてのメモです。どういうサイトだったか、何でログインするんだったか、といった情報を必要に応じて書いておきます。Webブラウザのブックマークは基本的にメモ欄がありませんが、メモできると「なんだったっけ」と考えるロスが減ります。

　なぜこのようなツールを作ったかというと、個人的にWebブラウザのブックマーク機能のあのリスト形式が好きじゃないからです。具体的にどこがどう嫌かというのはズバッと言語化できないのですが（明確な理由があるものではないのだと思います）、嫌だという気持ちははっきりしていて、そのせいでブックマークをうまく使えない状態が長きにわたり続いていました。
　フォルダ整理という形式がうまくいかなさの原因かなと思ったこともありましたが、多分問題はそこではなく、どういう見た目をしているかなのだと思います。早い話が、楽しいか楽しくないかの問題です。
　ブックマーク機能を提供するサービスや拡張機能というのも世の中には色々ありますが、そういうのを試してみると、機能が大仰過ぎて面倒な気持ちがまさってしまいました。簡単さの面ではブラウザのブックマーク程度で良いのです。サッと見れるのが大事です。
　ではどういうビューなら自分が納得するかと考えてみても、それは自明のことではなく、考え出すのにはそれなりに苦労しました。最終的に冒頭で貼ったサンプルのようになったのですが、多分自分以外の人には中途半端なデザインに見えるだろうと思います。私自身、理屈で考えていたらもっと違う形にしようとしたのではないかと思います。ですが、これでいいのです。イケてるかどうかは知りませんが、「認識するのが楽」なのがこの形なのです。

　このブックマーク管理ツールはJavaScriptのありがたみを理解する上で大きな一歩となりました。そして当時「JavaScriptでできたら嬉しいこと」として唯一具体的に思い描けていたのがこの「CSVを元にHTML要素を作る」という処理です。
　最初、このツール（というかビューワ）は内容を全部HTMLにベタ打ちして作っていました。一応ブックマークレットを使い、登録したいページで実行すれば必要なタグを全部つけた状態で一発コピーできるようにしていましたが、ただ貼り付けるのは簡単でも、並べ替えなどの操作は非常に面倒でした。そこで「データはデータで作って、自動でHTML化したい」という願望が生まれ、「そういうのこそJavaScriptってやつでできるんじゃあないのか」となったのです。
　願望としてあったのはそれだけだったので、これを実現した時点でゴールに到達してしまったようなものでした。ノートテイキングアプリを自分で作ってしまう、なんてことはこの時点ではそれほど考えていなかったと思います。そこまでできると思っていなかったからです。何しろ何をどうしたらアプリケーションの体を成すのかわからなかったのです。
　ですが、このビューワを作ったことにより、JavaScriptとはつまり何ができるものなのかということをイメージできるようになりました。これができるってことはじゃああれもできるんじゃないか、とアイデアが浮かぶようになり、それができたらじゃあこれ、これができたらじゃああれ、と飛び石を渡っているうちに可能性がどんどん広がっていったわけです。

　コードの説明も書こうかと思いましたが、独学の我流でありオーソドックスな書き方になっているのかわからないのと、毎度言及していると大変過ぎて更新が捗らなくなることから、コードの詳細については説明を省略します。（質問を受けたら答えます）
　コードは右クリック→「ページのソースを表示」を選択すると読めます。
　ツールの挙動としては当時（つまり勉強開始二十日目くらい）から変えていませんが、コーディングは結構違っています。当時のコードを今見ると、知っているメソッド・書き方だけで頑張って作っているなと思いますが、工夫の積み重ねとは裏腹に、読むにあたっては何がなんだかわからないので、そのまま公開しない方が良いだろうと判断しました。
　なおブックマークの管理のために別途CSVを編集するというのはあまり自然な流れではないので、半年くらい後に違うやり方に変えました。具体的には……とここで書こうかと思いましたが、それはいずれ記事にするのでお楽しみにということにします。

　ところで、公開したサンプルは単にツールの様子を見せるために作ったものですが、個人サイトの一コンテンツとして置いておいてもいいかもと思いました。よく使う便利ツールのリンクなどを充実させると面白いかもしれないですね。
　

　JavaScriptの勉強を始めておよそ三ヶ月になる（1/27スタート）。この間に自分のデジタルライフは大きく変わっていった。

　まずHTML+CSS+JavaScriptの三要素を習得したことによって、ある程度実用的な情報管理ツールを作れるようになった。
　現時点で形を成しているツール・サイトが六つある。それらについて書いていくが、ツール名が「～.html」となっているのは「名無し」と同じ意味。

①Bookmarks.html（ブラウザ上）

　ブラウザのブックマーク機能にどうもしっくり来ておらず、どうしてもリスト状でない形のブックマーク管理ツールが欲しかった。既存のブックマーク管理サービスは多機能過ぎ、しかも見た目もぴたりと好みにはまらないので、自分で作るほかなかった。
　この見た目と機能はHTML+CSSだけで作れるのでJavaScriptの勉強開始以前に既に完成していたのだが、データがHTMLに手打ちだったため整理があまりにも面倒だった。そこでCSVにデータを作ってJavaScriptで読み込んで要素を構築できたらどんなにいいだろうと思ったのが、JavaScriptを勉強し始めた動機のひとつである。
　コードの長さは130行。ブラウザ上での編集機能は無し。

②Cards.html（ブラウザ上→Electron）

　CSVから要素を作れることがわかると、今度は他に整理がついていないものを同じ方法でどうにかしたくなった。その頃倉下忠憲さんのTextBoxの話を見聞きしていたこともあって、「すぐには使わないがいつか使えそうな気がするメモ」を溜めてピックアップするようなツールを作ろうと思ってこれができた。
　JavaScriptの勉強の最初の方で乱数を繰り返し使っていたので、乱数でメモをランダムピックアップするというのがその時点ではごく自然な発想の展開だった。
　作り始めた時点ではローカルのCSVからデータを構築してブラウザで見るという「メモビューワ」だったが、途中でlocalStorage（ブラウザへのデータの保存）の使い方を覚えたので「メモエディタ」にクラスチェンジした。それに伴いJSONの扱いにも慣れ、カードのメタデータを細かく設定したり編集履歴を保存できるようにしたり色々な機能を盛り込んだ。
　コードの長さは500行。

③Outline.html（ブラウザ上→Electron）

　普段アウトライナーを使っていて、項目そのものに種類がないことが不便に感じる瞬間があり、それをなんとかできたらいいのになと前々から思っていた。例えば引用をメモする時に、引用文と引用元の情報とは見た目が明らかに違っていた方が良いといったことだ。例えばDynalistではカラー機能とCSSを組み合わせて書式を作るというようなことも不可能ではなく、色々工夫してはいたのだが、なんとなく納得しきれないところがあった。欲を言うとバレットが項目の種類ごとに別のアイコンになったらいいな、というようなことを思っていた。項目にメタデータを設定したかったのである。
　Drummerというアウトライナーが少し前に登場したのだが（アウトライナーの父、デイブ・ワイナー氏が開発）、各項目に完全に自由にメタデータを付与できることに衝撃を受けた。その上Drummerではなんとツール上でJavaScriptを操作できるので、多分勉強すればDrummer内で自分好みのデザインを作り出せるのではないかとも思うのだが、ワイナー氏の感性に最適化されたツールゆえに色々難しく、具体的に何をどうしたらいいのか見当がつかなかった。
　なので、もういっそ自分でアウトライナーを作ってしまえと思ってやってみたのがこれである。
　出来はどうかというと正直に言って微妙なのだが、とりあえずこのくらいのものは自力でなんとかなるらしいということがわかったのはものすごく大きな一歩になった。ドラッグアンドドロップ操作やショートカットキー設定、複数箇所を同期してデータ更新するといった、一段複雑な処理ができるようになった。気分としてはメタルキングを倒した感じである。
　コードの長さは1100行。倍以上に増えた。

④Fusen.html（ブラウザ上→Electron）

　具体的なきっかけがあったかどうだったか忘れたが、ふと自由配置の付箋ツールを作りたくなって制作し始めたのがこれ。とにかく色々貼りたいと思った。
　アウトラインのブロックを動かせたら良いのにということはずっと前から思っていて、例えばExcel上にメモブロックとしてアウトライン機能付きのテキストボックスがあれば絶対便利だみたいなことをイメージしていた。Excel上に生み出すことはできないが、とりあえず画面上で自由に配置できたら色々使い勝手が良いだろうと思って付箋のひとつとしてアウトライン付箋を作ってみた。（なおデスクトップに貼っておけるタイプの付箋ツールとしてはsosuisenさんが開発していらっしゃるものが興味深い。）
　アウトライン付箋を作ったのは予想通り便利だったが、別にアウトライン付箋を貼りたいがためのツールではなく、他に画像、YouTube動画、mp4、mp3を付箋として貼れるようにした。お気に入りの絵画や音楽などを一度に視界に入れたかったからである。実際の画面は見せられない且つ適当なサンプルを用意するのがちょっと億劫なので見た目の紹介は省略。
　このツールを作ったときには「お気に入りのものを集める」以外の使い方はそんなに具体的にイメージできてはいなかったのだが、調べ物のメモに使ったところとても便利だった（上のスクリーンショットがその状態。なおメモの内容は誤りを含んでいる可能性がある）。「この情報をどのくらい視界に留めておきたいか」というようなことをコントロールできるのが良い。ページやカードで内容が分かれてしまうものだと、その点であまりうまくいかなかったのである。
　コードの長さは880行。

⑤のらてつの茶の間（ミニブログサイト）

　Twitter（ないしScrapbox）とブログの間の存在が欲しいと思って作った。
　ScrapboxやObsidianのリンクを参考に、「このノートでリンクにしているキーワード」「このノートに対してリンクしているノート」「他のノートではリンクにしているがこのノートではリンクにしていないキーワード」「このノートに対して言及しているがリンクはしていないノート」をガッと表示できるようにするなど色々工夫している。このサイトについては別途記事を書くと思う。
　サイトの挙動はいいのだが私の文章生産速度がそれに全く見合っていないのが目下の悩み。内容が遅々として増えていかない理由は明白で、プログラミングばっかりやっているからです。
　コードの長さは650行。エディタ機能がない割には長い。

⑥Plane Outliner（ブラウザ上）　

　これについては先日記事を書いたので挙動についての言及は省略（ツール製作日誌：「面のアウトライナー」）。
　デザインは茶の間を流用しているので、ツールの見た目としてそれまで恒例になっていた和柄からは離れたことになる。このブログや茶の間と同じ雰囲気なので特に違和感はない。3×3のマスにグレーを2段階使っているので背景はなくて正解という感じがする。
　「ここに来てやっと、初めに勉強した教材の意味がわかった」と感じる瞬間がしばしばあった。オブジェクトはこう使えばよかったんだとか、無名関数はこう使うのかとか、色々腑に落ちた。これまでのツールは馬鹿の一つ覚え的に同じやり方を繰り返していたところがあったが、ふっとそこから抜け出せるようになった感じがある。
　コードの長さは1900行。記述が圧倒的に多い。しかし多い割に随分クリアな感じがしている。

　このような感じで、プログラミング経験値ほぼゼロの状態から三ヶ月間であれこれやってきた。今回は作ったものの紹介までにして、次の記事でこの三ヶ月で起きた変化などについて書いていくことにする。