これまで editabro という、ブラウザの blank ページを一つの巨大な textarea にしてしまう拡張機能を使い、簡単なメモ帳やブックマーク変わりに使っていた。
VS Code のエディタ部分に由来する Monaco Editor が使われていて、URLに対し Ctrl+ クリックやホバーで開くことができたのだが、アップデートにて至ってシンプルな HTML の textarea に置き換えられたことでそれらができなくなってしまった。
当該拡張の便利な点として複数デバイス間で textarea の内容が同期されるのでクリップボード共有のように使えるという点があり、そこは今でも機能するのだが、URLクリックが出来ないのは地味に困った。
困るんですけどぉと作者に訴えたらforkしろと言われてしまったので今後のアップデートで機能として復活する見込みもない。
拡張の作り自体はそう複雑なものでもないので、AI にでも頼めば fork して自分の好きなように作り替えることもできるのだが、野良拡張として取り回すのが地味に面倒くさい。
どうせ AI に頼むのであれば別アプローチとしてブラウザのスタートページを作らせ、メモやブックマーク代わりとして使えデバイス間で同期、あるいは同等に機能するものを作ろうと考えた。AI に自分用のスタートページやダッシュボードを作らせるのもよく聞く話で興味もあった。
というわけで仕事中にチマチマと AI と会話して作ってもらった。
AIによるざっくり解説#
全体#
- AI サービスのクラウドではなく、自宅サーバーに設置している
- 自分の端末（自宅 PC、スマホ）のブラウザのスタートページにする、個人用の 1 枚ページ
- tailnet の中だけに出し、アプリ自体のログインは設けない
- Node 22 の標準機能（
node:http、node:sqlite）だけで動き、npm パッケージは使わない。フロントもビルドなしの素の HTML / CSS / JS - 「今日」・ブックマーク・メモ・Bluesky投稿フォーム・フィードの新着記事
- 変更は Server-Sent Events で他の端末にすぐ伝わる
今日（時計・祝日・検索）#
- 小さな時計と日付。今日の祝日と、次の祝日まであと何日かを出す
- 祝日は外から取らず、祝日法の決まりと春分・秋分の近似式で計算する（振替休日・国民の休日も含む）
- 検索欄はブックマークの絞り込みと Web 検索を兼ねる
/でフォーカスする- Enter は、合うブックマークがあればその先頭を開き、無ければ Web を検索する
- Shift+Enter は必ず検索する
- 頭に
gで Google、dで DuckDuckGo
ブックマーク#
- グループごとの見出しとリンク。favicon 付きで、新しいタブで開く
- 先頭の 9 件に 1〜9 の番号が付き、入力欄の外でそのキーを押すと開く
- 編集はモーダルで行う。グループとリンクの追加・変更・削除、ドラッグでの並べ替え（グループ間も可）
- 別の端末と編集がぶつかったら、版番号で検出して読み直す
メモ（端末間で同期するテキスト）#
- クリップボード代わりの欄。入力が 0.3 秒止まると保存し、他の端末にすぐ反映する
- 入力中に他の端末で更新されたら、勝手に差し替えず「読み込む」を出す
- 入力しながら Markdown を装飾する（見出し・太字・コード・引用・箇条書き・URL）。記号は消さずに薄く残すので、元の文字列は崩れない
- カーソルが URL の中にあると「↗ 開く」が出る。PC では Ctrl（Mac は ⌘）+ クリックでも開く
- 履歴は最新 50 件。1 件選ぶと書き戻せる。全消去と、履歴ごと消すボタンもある（パスワードを貼ったあと用）
- 枠の高さをドラッグで変えられる。「⤢ 大きく」でモーダルに広げて編集できる
メモのタブに並べる Obsidian のノート#
- 保管庫のツリーからノートを選び、メモのタブに並べて直接編集する（最大 30）
- 「今日」のタブに、今日のデイリーノートを常に出す。場所・名前・テンプレートは Obsidian の設定に従う。まだ無ければテンプレートを見せるだけで、書き足したときに初めて作る
- Obsidian と Resilio Sync も同じファイルを書くので、開いたときの中身と違っていれば書かずに「読み込む／上書きする」を選ばせる
- 外で書き換えられたら検知して読み直す（入力中なら知らせだけ）
Bluesky への投稿欄#
- 文は 300 字まで。リンク・ハッシュタグ・メンションは自動で認識する。Ctrl+Enter で投稿
- 画像は 4 枚まで（貼り付け・ドロップ可、代替テキスト付き）。大きい画像は画面の側で縮める
- 本文の最初の URL からリンクカードの見本を出す（× で外せる。画像を付けたらカードは付けない）
- 投稿したら「ポストを開く」のリンクを出す。書きかけの文は端末ごとに残す
- 資格情報（アプリパスワード）が無ければ、欄そのものを出さない
左の列の並べ替え・畳む#
- 「今日」より下のコンテナは、見出しの ⋮⋮ をドラッグして並べ替え、見出しを押して畳める
- 並びは全端末で共通、畳んでいるかは端末ごと
右の列: 新着記事（RSS / Atom）#
- RSS 2.0、RSS 1.0（RDF）、Atom に対応。解析器は自前で、30 分ごとに取得する（「今すぐ更新」もある）
- フィードに自分でカテゴリーを付け、上のタブで切り替える
- 表示は「フィードごと」と、全フィードを新着順に並べる「混ぜる」の 2 通り。「すべて」のタブは常に混ぜた一覧
- 記事の行は favicon、題（2 行まで）、ドメイン、時刻
- 新着の印と既読は全端末で共有する。PC で読んだ記事は、スマホでも既読になる
- 古い記事もフィードごとに 300 件まで残し、前後のページで辿れる
- 英語の題は、ローカルで動かしている翻訳モデル（PLaMo 3 Translate）で日本語に訳す。訳すかはフィードごとに決め、favicon を押すと原題と訳が切り替わる
- favicon はサーバーが代わりに取って控える（閲覧の記録を外へ出さないため）。うるさくならないよう彩度を落とし、マウスを重ねたときだけ元の色に戻す
- 取得に失敗したフィードは、見出しに印とエラーの内容を出す
下の状態の欄#
- 画面の下に常に出る細い 1 行。同期の接続、フィードの取得（前回と次回）、失敗したフィード、翻訳の待ち件数、DB のスナップショットの状態
- 右端にテーマの切り替え（自動・ライト・ダーク、端末ごと）と、fx の切り替え
見えないところ#
- 安全:
HostとOriginを検査し、他のサイトからブラウザ経由で書き込まれるのを防ぐ。CSP を付け、リンクを踏んでもホスト名を相手に送らない - バックアップ: 毎日 03:00 と起動時に DB のスナップショットを作り、7 世代を保つ
- クリックの記録: 記事とブックマークのクリックを記録だけしている（将来、AI による記事の推薦・解説に使うため。画面には出さない）
作っての雑感#
AI に作ったものをそのまま公開し、自分または他人がそのまま使えるようにするという機能は、Claude Artifacts、ChatGPT sites、Gemini Canvas、Grok Build と、各社それぞれが用意してくれている。多くの人はそれを利用していると思う。
自分の場合は自宅サーバーとして Ubuntu を24時間起動しており、obsidian などのローカルリソースも扱いたかったので自宅サーバーに設置することにした。
元々がちょっとしたメモ書きが目的だったが、似たような用途である obsidian と作業場所がブレていたので、入り口は増やしつつ出口を obsidian に統合できたのはよかった。
ダッシュボードとスタートページのなんとなくのイメージの違いとして、前者は個人的なデータをグラフや表を用いて1つの画面に分かりやすく一覧表示するツール。後者は、ブラウザのそれは、ブラウジングなどインターネット利用における出発点という感覚。自分が必要なのは後者側だったので、未読メールやカレンダーなどいかにもそれっぽい情報は今のところ不要と考えている。
フィードについて RSS リーダー自体は使っているが、その瞬間の新着の話題などを知りたい場合、要するに暇なのでなんかおもろいことないんけというタイミングで雑に開くという感じでは使っていないので、見逃しても問題ない TL という感覚で置いている。
非常にタイミングが良かったのは PLaMo 3 Translate がオープンウェイトで公開されたこと。Hacker News など海外キュレーションサイトは見たい気持ちはあるがいかんせん英語が読めないので利用しづらかったのだが、見出しを翻訳して並べることができるようになった。PLaMo 3 Translate については 2B を llama.cpp で CPU 稼動させている。問題無い速度は出ている。
まだ未実装だが、自分の観測範囲外の新着ニュース記事などを AI に集めさせ追加で表示させたい。また政治だ国際情勢だのとてもこうどでむつかしい話題について簡単な解説をつけて表示させたいとも考えている。
有用かどうか#
作ってみたはいいがこれが本当に使いやすいのか、継続利用するのか、なんとも言えない。すぐ飽きる自分も簡単に想像できる。
とはいえ、いざ作ろうと思うとなんとも面倒なものも、AI に頼めばわがまま放題言っている間に動くものが出来てしまうのだからすごいことだ。
遊び#
機能が一通り揃ったところでなんとなく本体の機能には関わらない部分で遊びたいと思った。
映画やゲームの画面を真似て、いかにも SF かサイバーフィクションかというような見た目にするとかっこいいのでは、と。
バカうるさい。