Noratetsu Lab

　「のらてつの茶の間」というミニブログを作った（半年前に）。位置づけとしてはTwitterとScrapboxの間のものである。
　Twitterでは時々茶の間茶の間と言っているのだが、それが何なのかということについてきちんと書いたことはなかったので、今更ながら記事にしておこうと思った。読んでもらいたいというより、言語化したものを置いておきたいという意味で書いた記事になっている。

※2023/02/08追記
（リニューアルして極限までシンプルな形に変更しました。現在は記事内の説明とは全く異なったものになっています。）

　見た目はこんな感じ。

　スマートフォンの画面だとちょっと狭くて苦しいが、サイドメニューがないと自分が使いづらいため強引に2カラムにしている。

　形としてはGitHubのpages機能を利用して個人サイトを公開したという格好だ。中身のデータをJSONファイルで公開リポジトリにプッシュ（≒アップロード）し、それを訪問者がHTMLを開いた時点で読み込んで表示している。
　各ノートはタグで整理され、本文内のリンクで他のノートやキーワードとネットワークを形成する。タグとリンクの挙動はそれぞれ結構こだわっている。

　冒頭でも書いたように一応これを「ミニブログ」と位置づけているが、発信用であると同時に、自分が自分のノートを管理しやすいようにと作ったシステムでもある。

　Scrapboxがあるのにわざわざ別のものを自作した理由のひとつとして、ついさっき書いたように「タグ」と「リンク」の機能がそれぞれ欲しいということがある。タグは「こういう領域の話」、リンクは「これについての話」というふうに使い分けている。私の中では、どうもこの二つに混ざってもらっちゃ困るようなのである。
　スクリーンショット内にあるように、タグの方には「生きる」とか「前に進む」とか、ベクトルを表してはいるが何の話なのかは示していないワードを設定している。これらのワードは話の対象を表してはいないので、基本的に本文中には登場しない。
　自分が自分の書いたものを探す時、キーワードで検索することもあるが、「こういう気持ちでこういう方向性の話を書いたんだよなあ」という形で覚えていることが多々あり、それはキーワードでは検索しづらい。なので「雰囲気」とか「ベクトル」で括っておくものが必要なのだ。
　それはリンクと一緒では駄目なのだろうか、と考えると、「一緒にするのは無理ではないが、一緒にすることにメリットはない」というのが今のところの結論である。自分の頭の中で「こういう領域」と「これについて」は混ざっていないので、わざわざごちゃごちゃにする必要がない。それぞれ同じワードが使われる可能性はあるが、それらは明らかに違う意味合いで使っているのである。

　一方リンクは、本文中に含まれる類のキーワードである。Scrapboxはハッシュタグを兼ねているが、茶の間では本文にあるワードやフレーズをダブルブラケットで括る形のみをリンクとして使っている。
　リンク欄には、本文内にリンクがあるキーワードと、開いているノートに対するバックリンクのほか、Scrapboxを参考に「同じワードをリンクしているノート」もリンク欄に子項目として表示している。
　更に、「このノートのタイトルについて、リンクでない形で言及しているノート」と「他のノートではリンクにしているがこのノート内ではリンクでない形で言及しているワード」を表示するようにしている。それぞれ「非明示的バックリンク」「非明示的フォワードリンク」と呼んでいる（一般的にどう呼ぶのかよくわからなかった）。
　非明示的バックリンクは、ScrapboxにはなくてRoam ResearchとLogseqにはある機能だ。茶の間では、例えば「JavaScript」というワードを開いてみると、明示的にリンクを貼ってJavaScriptの話を積極的にしているノートと、話の流れでJavaScriptというワードも出したという程度のノートとが、色で区別された状態で両方列挙されている。つまり検索結果が関連度別に並んでいるということなのだが、これが結構便利である。
　非明示的フォワードリンクの方は、はっきり機能として搭載しているツールはあまり見たことがない。でもずっと欲していた機能で、Scrapboxにはそれがないから「全部見直してリンク貼り直すか…？」とかいう血迷ったことが頭をよぎったりする。もちろんScrapboxも「とりあえずキーワードは全部リンク」ってやっていけば良いだけの話ではあるのだが、個人的には「他のページではこの本文中にあるこのキーワードをリンクにしていますよ」というのが表示されていると非常にありがたい。ので、作った。
　ちなみに、どこかでリンクにしているキーワードの一覧を「リンク済みキーワード一覧」としてサイドメニュー上部のピン欄から確認できるようにしている。便利というほど実用性を実感しているわけではないが、全体を把握できる安心感があるので気に入っている。

　ツールとしての茶の間の存在意義はこんなところだが、もうひとつ、敢えてこういう形でミニブログを作った理由がある。急な方向転換で恐縮だが、先に進む前に次の記事をお読みいただければと思う。文量としては短めでするっと読めるものなので、構えなくて大丈夫です。はいカチッとクリック。あるいはペタッとタップ。

• 個人の総合的な表現 - Word Piece

　この「個人の総合的な表現」という言い回しに甚く納得したのだが、人間の表現には話題や意味でスパスパ切り分けるわけにはいかない領域というものがあると思う。というか、そうやって分けてしまうとそこには現れることができなくなる種類の何かがある。その人が有機的に生きている存在であることを感じさせる何か、と言えるかもしれない。
　一行目にある、

このブログには「Diary」というカテゴリがあって、もちろんそれは「日記」を意味しているのだが、実際の「日記」が書かれることはまずない。
というのが、多分「ブログあるある」なことだが考えてみると深い話でもある。
　記事内では「単なる『日記』をブログに上げることは、昨今なぜか抵抗がある。」と続くので、ブログ内の「日記」の実態が日記として自然な形から離れているという意味合いが含まれていると思うが、本当の意味で日記らしくはないものが「日記」というカテゴリに収められるということの意味を考えると興味深い。
　おそらくは、カテゴライズできないもの、もっと言うとカテゴライズ「したくない」ものが、「日記」というラベルをつけて語られるのではないだろうか。この時、日記とは「私の日記」である。つまり、「私」という文脈に沿って読んでもらいたい、他の具体的な何かのキーワードにまつわる文脈によって恣意的に読まないでほしい、そんな願いがうっすら込められているように思う。「日記」というラベルを付けられた記事は、その筆者から分離し得ないものであり、「情報」として利用されることを筆者に全く望まれていないものなのだと思う。

　しかし筆者が望まなくとも、他人が部分を分離して語ることが容易な形態ならそうされてしまうリスクがある（現に今私がTak.さんの記事についてそうしているように）。
　ということは、とりあえず「分離して語ることが容易な形態」をやめればよいのではないか。そう思って、記事ごとにURLが発行されることがない形式のものを作ってみた。
　もちろん、そうするとブログと比べて失われるものはたくさんある。何人が読みに来たかわからないし、そもそも読みにくいので読まれにくいものになる。感想をもらえることもないだろう。言及しにくい形にしているのだから、当然言及されないのである。広告収入が入ることもない（そもそもブログでもそれは得ていないけれども）。ただただ「書きたいから書いた」だけがそこに蓄積する。
　まあでも、それでいいのです。そうでは困るものは他の場所に書けばよく、ここにはこの面倒臭さに付き合ってくれる人だけ（数にして3人もいなさそうですが）立ち寄ってくれればいい。つまり私を「情報」ではなく「生き物」として見ようと思ってくれる人向けの場所。ゆえに情報として役に立つようなことは何も書いていないし、啓発的なことも書いていないし、早い話が自分以外の存在にとって「良いこと」は何もない。でも生きている自分にとってのリアルを表現している。
　そういう意味でこれに「茶の間」と名付けている。誰でも読める形にしているけれど、外に向かっているわけではない。「開いている」が、「出る」ことはしていない。影響力を持たないのだから、誰かに存在を咎められる謂れもない。
　昔は「それがブログ」だったかもしれないけれど、ソーシャルな種々のサービスによってそうではなくなってしまった。読まれにくくなった割にリスクは高い。数字で言えば可能性はほぼゼロに等しいとしても、いつ何の咎で日本中から責められるかわからないのは恐ろしい。日本中まで炎上しなくたって、どこの誰かもわからない人間に突然謎の憤怒をぶつけられたらたまったものではない。
　そんな近年の殺伐とした時流の中で少しでも自由と安心を守るための試みとして、今更素人がHTMLやJavaScriptをちまちま書いて作ったのがこれなのである。

　なのである、と格好つけて言ってみたものの、正直そんなに活用できているわけでもない。というのも、長らく更新手段の整備に迷走していたからだ。
　最初はmdファイルを編集の場にして、茶の間の1ノートを1ファイルとしてデータを作り、Pythonを使ってmdファイル群からJSONファイルを生成していた（その時点ではNode.jsがわかっていなかったのでPythonを使っていた）。自分の中では「バラバラのmdファイルからミニブログのデータを作れる！」ということが画期的だったのだが、ちょっと他の作業との都合上、茶の間用のmdファイルの更新が捗らなくなっていった。
　次は自作のカード式アウトライナーで編集できるようにした。これも仕組みとしては自分の中で超すごいことだったのだが、mdファイルでの管理以上に更新の手は鈍った。うまくいくと信じて疑っていなかったので、この失敗は割とショックである。
　しばらく停滞が続き、やっと最近になって、茶の間自体にエディットモードを作って茶の間のビューの中で編集できるようにした。このためには、半年も前、つまりコーディングの技術が非常に未熟な頃に作ったスクリプトをほぼ全部書き直す必要があり（何がなんだかわからなくなっていたので）、大変な手間がかかった。しかしその甲斐あって、更新がものすごく楽になった。

　そんな感じで劇的に編集しやすくなり、ようやく軌道に乗りつつある、それに伴ってか、Noratetsu Lab（このブログ）やnoteの更新頻度も急に増している。
　ひょっとすると、茶の間自体が人に読まれることはどうでもよく、それ以外のものをどんどか生み出せるようにするための助走として私にとって重要なものなのかもしれない。
　

　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行。記述が圧倒的に多い。しかし多い割に随分クリアな感じがしている。

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