はじめに
みんな大好き90年代スタイルの、私的ナレッジベースツールを作りました。
映画を観るにしても音楽を聴くにしても、自然に手が伸びるのは当時楽しんだ90年代の作品ばかりです。年々、その傾向は強くなっているかもしれません。
ゲームも90年代タイトルのリメイクばかり遊んでいますし、アニメも当時の作品のリメイクを追いかけ、漫画も当時読んでいたものを改めて買い集めたりしています。
このツールは、そんな懐かしの90年代の雰囲気にひたりながら、趣味や日常のこと、そして90年代の思い出をまとめて、個人的に楽しむためのナレッジベースとして作りました。
まずは、実際の画面を見てください。
カード表示画面
Detroit Techno についてまとめたスタックの Jeff Mills について書いたカードです。
レトロなウィンドウ、太めの枠線、立体感のあるボタン。90年代のデスクトップアプリに見られた、シンプルで物理的な操作感を意識したUIを、HTML / CSS / JavaScriptだけで再現しています。
デモも公開していますが、このツールは GitHub から HTML / CSS / JavaScript をダウンロードして、それぞれのローカル環境で使用することを想定しています。
このツールでできること
このツールは、
ブラウザだけで動く、ローカル完結のカード式ナレッジベース
であり、外部との通信は必要ありません。
- 1枚＝1トピックのカード
- タイトル・本文・画像を登録
- カードをめくるように前後移動
- データはすべて localStorage に保存
それぞれのローカル環境で使用することを想定しており、もちろんアカウント登録も必要ありません。
⚠️ なお、フォント表示には Google Fonts を利用しているため、その点に限っては外部との通信が発生します。
カード一覧を見る（Index）
Index ボタンを押すと、登録されているカードが一覧で表示されます。
- タイトルだけをざっと眺める
- 見たいカードをクリックして開く
「フォルダを開いてファイルを選ぶ」ような感覚で使えることを意識しました。
カードを検索する（Find）
Find では、タイトルと本文を対象にした簡易検索ができます。
入力して Go を押すと、一致したカードが下に一覧表示され、そのまま開けます。
カードを作成・編集する（Edit）
Edit ボタンを押すと編集モードに入ります。
- Title：カードのタイトル
- Image path：画像パス
- Body：本文（複数段落OK）
Editボタンはトグルになっていて、Saveすると自動的に閲覧モードに戻る仕様です。
画像の雰囲気を調整
編集画面の左側では、画像を 1-bit（白黒）＋ディザ処理でプレビューできます。
- Pixel size
- Threshold
を調整しながら、現代の写真を入れても現代的にならないようにします。
カードの追加・削除・リセット（New / Delete / Clear）
カード操作まわりには、編集以外にもいくつかの基本操作を用意しています。
New：新しいカードを作成します
Delete：表示中のカードを削除します
Clear：ローカルに保存されているすべてのカードデータを削除し、初期状態に戻します
いずれも操作はシンプルで、カードを気軽に追加したり、整理したり、必要に応じてリセットできるようになっています。
⚠️ Clear はすべてのローカルデータを削除します。元に戻せないため、必要に応じて Export によるバックアップをおすすめします。
右上のボタンで全画面化
カード表示画面の右上にあるボタンを押すと、ウィンドウを 画面いっぱいに最大化できます。
画面を広く使って読みたいときに使える機能です。
なお、本ツールでは全画面表示にしない場合、ウィンドウの外側に当時のデスクトップ風の背景を用意しています。
この最大化ボタンは必須機能というよりも、操作の幅を少し広げるための、控えめなギミックです。
データの扱い（Export / Import）
- Export：JSONとしてデータを書き出し
- Import：JSONを読み込んで復元
⚠️ Importは 現在のデータを全置き換えします。バックアップ用途を想定しています。
ファイル構成
retro-90s-kb/
├─ index.html # メイン画面
├─ app.js # カード操作・状態管理
├─ styles.css # UI全体のスタイル
├─ image-editor.js # 画像編集UI（スライダー・プレビュー）
├─ image-processor.js # 1-bit変換・ディザ処理のロジック
├─ images/ # カード用画像（任意）
│ ├─ example.png
└─ README.md
このツールは、HTML / CSS / JavaScript の静的ファイルのみで構成されています。
GitHubからダウンロードしてそのままブラウザでindex.htmlを開くだけで動作します。
カードに画像を指定する際、Image path のデフォルトは images/ になっています。
カードの内容や状態は localStorage に保存され、データが外部に送信されることはありません（※ フォント表示に Google Fonts を使用しているため、その点のみ外部通信があります）。
どんな人向け？
- 90年代のUIや、当時のデスクトップの雰囲気が忘れられない方
- メモや記録を、効率的に「管理する」よりも、見返すこと自体を楽しみたい方
- クラウドサービスを使わず、ローカル環境で完結したツールを使いたい方
- 音楽・映画・漫画など、趣味に関する情報をひとまとめにして残しておきたい方
こうした志向を持つ方でには楽しんで使ってもらえるツールだと思います。
おわりに
もちろん、もっと高機能で便利なナレッジベースツールはいくらでもありますので、このツールは触っていて楽しいかどうかを大事にしました。
自分の趣味を満足させる方向に振り切っていますが、同じ趣味の方には気軽に触っていろいろな使い方をしてもらえたらうれしいです。