Noratetsu Lab

　昨年の一月末からJavaScriptを勉強し始め、今日でちょうど丸一年になる。私の人生に於けるプログラミング元年だった。

　スタート時は一年の間に「何か動くもの」を作れたらいいという気でいたが、実際に一年経ってみると「自分にとって理想的なツール」に迫るところまで来れた。一年間の集大成として今使っている自作デジタルノートツールについて書くことにする。

※こうするとすごく快適だぞ、という話ではありません。

　用語集というのは先日書いた（Noratetsu Lab Dict.（記事リンク））、Scrapboxの公開プロジェクトのことです。

• Noratetsu Lab Dict.（Scrapboxへのリンク）

　このブログに登場する名詞・概念の類を「あれ」と指せるように作っているものです。ブログの記事は「あれ」を単位として書いていないため、「前にも書きましたが」と言って記事をリンクとして貼ってもわかりにくい、という問題の解消が目的です。読み手のためという気持ちもありますが、自分がブログを書く際の不便をなくしてすいすい進みたいということの方が重要かもしれません。

　

　今のところ90ページ弱作成していますが、ただ並んでいると雑然とし過ぎていて不親切な感じがするので索引ページを作ることにしました。

• 索引

　

　ページとページの間の繋がりはScrapboxの得意なリンク機能で示すとして、「つまるところ何があるのか」を可視化するにはやはり書籍にあるような索引が必要だなと。

　何より自分自身が「つまるところ何があるのか」をわかっていなかったので、索引を作る過程で随分認識が整理されました。どういう切り口で整理して索引にすればいいのかも自明ではありませんでした。整理する過程はいわゆるアウトライン・プロセッシングだったのだろうと思います。

　

　あとCSSをちょっと整備しました。このブログの付属品として存在しているものなので、なるべくデザインが近い方が良いだろうと。元々使っていた公開プロジェクトのNoratetsu's Room（のらてつ研究所）のようには細々とこだわってはいませんが、このくらいで十分だろうという感じです。

　索引的なページはそのNoratetsu's Roomでも作ろうとしたのですが、その時はあまり有意義には感じませんでした。多分、ページの単位が名詞ではなかったからだと思います。

　

　こちらの記事を読んだ。

• 焦がれたものリスト - Word Piece

　なるほど面白い自己対話だと思い、自分にも「焦がれたもの」を問うてみることにした。

　副題：最強のデジタルノートツールを作ったらむしろ紙のメモが増えた件。

こちらの投稿に関連して。

• 今年の目標は決めましたか？ - by 倉下忠憲@rashita2 - トンネルChannel

こちらの投稿を読みました。（読んで考え始めてから随分経ちました。）

• 過去のリスト、未来のリスト、そして…… - by 倉下忠憲@rashita2 - トンネルChannel

　アイコンを替えることにした。

After（四代目）

Before（三代目）

　前回（三代目）が去年の八月末からだったので、四ヶ月ちょっとでの変更ということになる。初代と二代目はもう少し長く使っていたから最短の交替。イラストとしては気に入っていたのだが、ちょっと理由があってずっと変更を考えながら使っていた。

　

　いずれにしても蟹であることには変わりないけれども（蟹である理由などはこちら→泡を吐く蟹）、印象はまあ全然違ったものになったと思われる。一番違うのは「目」の存在感だろうなと思う。

　ブログだとブログを書いている間も読む間もアイコンなんてのは気にしないので、どんなアイコンでも大した差はないし、そもそもアイコンはなくてもいい。多分アイコンの存在を私自身が気にしていないから今まさに書いているような文体で書いていられているのだと思う。

　一方、短文投稿サイトの類は話が違ってくる。TwitterやMastodonの投稿には常にアイコンが伴い、自分がそのアイコンの顔で喋っているということを強く意識している。そういう意識があるからなるべく滑稽なアイコンにしようと思って作ったのが二代目や三代目のアイコンだった。いちおう自分なりに面白い存在でいようと思ってのことだ。

　

　で、攻撃性の低いとぼけたような感じにしようと思ってそうしたのだが、特に三代目に替えてからひとつの問題を感じていた。なんとなく、丁寧語で喋りづらいのである。丁寧に書こうと意識した時は丁寧語で投稿したが、丁寧に書こうというくらいの改まった意識を持たないと丁寧語にならない。雑に喋るほうが自然な感じがしてしまう。

　初代のアイコンの時は多分そうではなかった。その変化は「『のらてつ』でいることに慣れてしまった」ということかとも思っていたのだが、しかしどちらかというと、「顔が変わった」ことの影響の方が大きいような感じがする。

　具体的には、とぼけた感じの顔であることにより、丁寧に書こうとすると逆に圧があるような気がしてしまったということがある。これは他の世界で感じていたことを引きずっているせいもあるのかもしれない。

　普段攻撃性も隠さずにおちゃらけている如何にもツイッタラーらしいツイッタラーが、「ちゃんとするとこはちゃんとしますからね」という感じで人一倍きっちりとした口調で何かを発信した時の、あの感じ。ものすごい圧である（と私は感じていた）。本当はちゃんと考えて動いていますから変な絡みはしてこないでくださいね、みたいなメッセージが実際に込められていただろうと思う。圧！！！！

　ということで、「ふざけた顔」で「丁寧なことを言う」というのが自分の中にどうも抵抗を生じていて、結果として「ふざけた顔で雑なことを言う（もしくは雑になりそうだから黙る）」というのが自然になってきてしまった。それは良くない！　私がやりたかったのは「面白く在る」ことであって、「雑に在る」ことではない。雑というのは必然的に攻撃性の高まりも伴ってしまう。

　

　そんな感じで問題意識は以前からあったのでアイコンの変更は割と前から検討していたものの、じゃあどう替えるのかということをしばらく考えあぐねていた。可能な限り単純化したいという気持ちは前々からあって、実際代を重ねるごとに単純にしていったが、もっと抽象的な感じにならないだろうかと悩んでいた。

　泡とハサミだけで蟹を表現してはどうか、と思ったりもしたが、肝心なのは「泡を吐いている」ところであって、泡そのものではないし、蟹そのものでもない。しかし「泡を吐いている」という要素を不可欠としたらこれ以上抽象的にならない気がする……。

　答えが出ないので「如何にせむ」とTwitterにつぶやいたら、ツイートボタンを押した瞬間にハッと思いついた（自分でびっくりした）。頭に浮かんだのは、以前いくつかのスマホゲームで見かけたドット絵風の3DCGだ。ボクセルアートというのだろうか。あんな感じにできたらいいのでは……いっそ頑張ってモデリングの勉強もするとか……とも思ったが、さすがに大変なので、ボクセルアート風にわざわざ描くか、2Dのドット絵にしてみるかと考えて、ひとまずはドット絵に落ち着いた。

　ドット絵にしてみると、一言で言えばゲームっぽくなった。ゲームをイメージしてたどり着いたのだから当たり前だけども、やはりドット絵と言えばゲームである。では「どうではなくなったのか」と考えると、多分「キャラクター的でなくなった」と言えるだろうと思う。

　キャラクターからゲームのユニットへ。それらは何が違うのか？　大袈裟に表現すれば、「叙情」から「叙事」への変化みたいなものがあるのではないかと感じている。叙情的表現が相応しい見た目か、それとも叙事的表現が相応しい見た目か。自分自身がその境界上にいるようなところがあり、恐らく見た目でどちらに流れるかが大きく左右される。

　初代のアイコンはキャラクター的でなく、描き方もどちらかというと絵画的だった。ゲームとは逆方向の若干（本当に若干）リアル寄りの雰囲気だったけれども、いずれにしろ表情という要素がなく「キャラクター」からの遠さという意味ではドット絵と同程度に思える。叙事的表現が合う見た目だったのだろう。

　新しいアイコンが自分にどういう影響を及ぼすのかは長い期間の観察が必要になるだろうけれど、そういう自己観察もある種の楽しさがある。（ただし不本意な自分を直視することもセットである。）

　

---

　

　ちなみに、新しいアイコンは自分で描いたドット絵なのだが、ドット絵を描くツールを自分で作ったりした。HTML+CSS+JavaScript（+Node.js+Electron）製。

　こんな感じ。マスの数を指定してtable要素を作り、使う色をinput要素で用意して、td要素の数字を書き換えることで番号に対応した色が適用される。input要素で色のコードを変えれば、対応するマスの色が全部変わるようになっている。

　保存すると、色データ（カラーコードを並べた配列）と配置データ（数字の二次元配列）が入ったJSONファイル、マスごとに要素を作って描画したSVGファイル、SVGを変換したPNGファイルが出力される。

　難易度の高いプログラムなわけではないものの、結構色々な処理をしているので、説明はちょっと難しいかもしれない。設計に関して参考にしたものとかは特にない。そのうち試用できるように公開する予定（いつになるかはわからないよ）。

　必要かつ十分な機能があればいい、自分で作れば習熟に労力を費やす必要がない、あとコーディングの経験値を得たい、という理由で自分でツールを作ったわけだが、ドット絵を描くというだけならPCでもスマホでも専用ツールがたくさんあるので、自分もドット絵を描いてみたくなったという人はそちらをお使いになられますよう。

　ごく細かい部分ですがいくつか修正を加えました。

1. 上部のリンク集の内容を変更

2. 上部のリンク集をクリック時に新規タブを開くように修正

3. 記事ページの下部に前後の記事へのリンクを表示

　リンク集には各投稿先へのリンクを並べていましたが、先日ホームページ的なものを作ったので（Noratetsu's page）、それを「マイページ」としてそこから各地に飛べるようにしてリンク欄は整理しました。

　リンク集クリック時の挙動は変え方がわかっていなかったのでそのままになっていたのですが、久々にHTMLのカスタマイズ画面を見たら普通に「ここを変えればいいな」とわかったので変更しました。（BloggerのHTMLは見慣れない記法が多くて初学者にはちょっと難易度が高い…。）

　前後の記事へのリンクはなぜか非表示にしていたので復活させました。なぜ非表示にしていたのか。

　ブログの補助的なScrapboxプロジェクトを作りました。

• Noratetsu Lab Dict.

　ブログ上部のリンクリストに「用語集」と書いてあるのはこのプロジェクトへのリンクです。