このブログは更新を終了しました。移転先はこちらです。

2023-12-27

デジタルなノートを作った

 先週末から新しいツールを作り始め、昨日の時点でほぼ完成した。

 

(※まだ公開はしていません。)

画像

 とっても紙のノートっぽいアプリケーションになっていると思う。

 手書きではないというのが最大の違いだが、それを除けば「紙のノートの延長」と言える感じになった。

 

 デジタルツールなので、ページの入れ替えはもちろん可能だし、ページ間リンクも設定できる。大学ノート風の見た目だがルーズリーフのように差し替えられ、かつ、ルーズリーフと違って裏表の縛りはない。単位は1枚でも見開きでもなく1ページである。

 上のスクリーンショットだと左に1ページ目、右に2ページ目が表示されている。この状態で「次のページ」に移動すると、1ページずれて左に2ページ目、右に3ページ目が表示される。つまり、表示は見開きだが見開き単位でめくるのではない。紙のノート及びルーズリーフで微妙に困っていたのが「ページと見開き」の関係だったのだが、このツールではそこに困ることはない*1

 なお、連結されたページの塊をノートブックと見なしている。連結は自由に組み替えられ、ノートブックはいくらでも作ることができる。連結を切ればそこでノートブックは二冊になる。

 紙面の制約もない。基本的には普通に表示される範囲で収まるように書くが、別に大幅にオーバーしても構わない。ページ内でスクロールできるようになっている。

 Markdown記法を使えるようにしているので、書き方の幅も結構広い。ちょっとした表とか画像が使えるようになっているとやはり便利だ。(あんまり凝ると手間ばかりかかるので、手で書いた方が早いなら手元の紙のノートに書くけども。)

 

 いつでもすぐ開きたいページは、pin設定すれば左端にインデックス付箋風にリンクが作られる。先頭の1文字しか表示していないが、マウスオーバーで本文を確認できるので迷うことはない。

 右端のインデックス付箋で色々な機能にアクセスできる。検索とかページ一覧とか。付箋風のメニューにすることで「ボタンやアイコンがごちゃごちゃあって煩わしい」という気分を回避している。それらの機能は右ページの領域に表示され、見た目としては大学ノートの裏表紙裏のような感じになる。

画像

 右下にちらっと端が見えているのは簡易入力欄(メモパッドと呼んでいる)。諸々設定可能なちゃんとした編集画面は左ページの領域に表示されるのだが、「パッと入力できる」感はあまりないので、簡易入力欄を別に用意し、マウスオーバーでスッと開いてサッと書いてワンクリックですぐページ化できるようにした。

 他にも色々搭載してある。紙のノートを使っていて「こうだったらいいのにな」と思っていた部分の解決をあの手この手で試みている。

 

 今のところ、順番に並ぶことに全く意味がない情報は他のツール(例えばScrapboxやObsidian)でやるべきだが、前後関係を踏まえたい情報はこれで良さそうという感じがしている。

 紙のノートの使い方が各々独特なように、このツールも私に最適化しているので、見た目の素朴なアナログ感とは裏腹に万人向けツールにはならない(UIを万人向けに設計しづらい)。なのでサンプル公開はどうするか考え中。

 

 それにしても爆速で作れたなと思う。コーディングもCSSも随分自由になった。その前に作った「TextManager」と比べるとかなりの違いがある。


*1: 紙のノートは見開きが単位になるが、ルーズリーフは1枚が単位なので、見開き単位では扱いにくい。そのどうにもしようがない違いがいつも気になっていた。