3.4 簡易メモ帳

AI生成コンテンツ / AI-generated content

ネットで見かけた情報や、AIが答えてくれたアイデアなど、ちょっとしたことをすぐに書き留めておきたい場面は多い。付箋紙にペンで書くよりも情報量が多く、URLを含んだメモを、いつでもどこでも書き込める場所がほしい。そこで本項では、Markdown形式で文章を書き、パソコンのローカル・ストレージに保存する「簡易メモ帳」（pahooMemoWin.html）を作る。

まず作成の動機を説明し、続いてChromeのWebページをアプリ化する機能を使い、Windows 11のタスクバーに常駐アプリのように登録する方法を紹介する。そのうえで、JavaScriptがかつてローカルにデータを保存できなかった理由と、localStorageが登場した経緯、ブラウザによって保存場所が異なる点を解説し、最後にpahooMemoWin.htmlのプログラム仕様書を示す。

作成の動機

ネットの記事で見つけた有用な情報、生成AIが答えてくれたアイデア、ふと思いついた作業メモなど、日々の中で「今すぐ書き留めておきたい」情報は数多くある。紙の付箋紙やホワイトボードは手軽だが、書ける文字数が限られるうえ、URLのような長い文字列を貼り付けるのには向かない。かといって、そのつどクラウドのメモアプリにログインして書き込むのも面倒である。

下表に、メモを取る主な手段を比較する。

メモを取る手段の比較
手段	情報量	URL・書式	外部送信
紙の付箋紙	少ない	手書きのみ	なし
OS標準のメモ帳アプリ	普通	基本はプレーンテキスト	なし（一部クラウド同期あり）
クラウド型メモサービス	多い	リンクや画像に対応	あり（サーバーに保存）
自作の簡易メモ帳（本項）	多い	Markdownで見出し・箇条書き・リンクに対応	なし（ブラウザ内で完結）

自作のメモ帳であれば、社外秘の情報や個人的なアイデアを外部のサーバーに送信することなく、Markdown形式で見出しや箇条書き、リンクを含んだメモを自由に書き留められる。保存先はパソコンのローカル・ストレージとし、ブラウザを閉じてもデータが消えないようにする。次節では、このメモ帳をいつでもすぐに呼び出せるようにする工夫を紹介する。

Webページを常駐アプリのようにタスクバーへ登録する

簡易メモ帳はブラウザで動くWebページであり、そのままではブラウザのタブの1つとして開くことになる。そのたびにブラウザを起動してブックマークからページを開くのは手間がかかる。Google ChromeやMicrosoft Edgeには、特定のWebページを「アプリ」として切り出し、アドレスバーやタブのない単独のウィンドウで開けるようにする機能が用意されている。この機能を使うと、常駐アプリのような使い勝手でメモ帳を呼び出せるようになる。

下表の手順で、簡易メモ帳をWindows 11のタスクバーに登録できる。

WebページをWindows 11のタスクバーへ登録する手順
手順	操作
1	Chromeで pahooMemoWin.html を開く
2	右上の「︙」（設定など）メニューから「保存と共有」→「ページをアプリとしてインストール」を選ぶ
3	ダイアログでアプリ名を確認し、「インストール」をクリックする
4	タスクバーに表示されたアイコンを右クリックし、「タスクバーにピン留めする」を選ぶ

この機能は、Webページを本物のデスクトップ・アプリに変換しているわけではない。実体はChromeが作る専用のウィンドウであり、Chromeがインストールされていることが前提になる。とはいえ、アドレスバーやタブが表示されないため見た目は独立したアプリのようになり、タスクバーのアイコンをクリックするだけで簡易メモ帳をすぐに呼び出せるようになる（[Webサイトを「アプリとしてインストール」するChrome/Edge機能:title=知らなかったかも！Webサイトを「アプリとしてインストール」するChrome/Edge機能の便利さ]）。

JavaScriptとローカル・ストレージ

今でこそ、ブラウザで動くJavaScriptだけでデータをパソコンに保存できるのは当たり前になっているが、以前はそうではなかった。かつてWebページがパソコンに情報を残す手段は、事実上Cookie（クッキー）しかなかった。Cookieは、サーバーとの通信のたびに毎回自動的に送信され、1つのドメインあたり保存できる容量もおよそ4キロバイトと小さい。しかも、暗号化された通信（HTTPS）でなければ、Cookieの中身がそのままネットワークに流れてしまう。メモの内容のような、ある程度まとまった量のテキストを保存する用途には向いていなかった。

AI生成コンテンツ / AI-generated content

大きな写真

（1672×941 ピクセル, 128 Kbyte）

この状況を変えたのが、HTML5の仕様の一部として標準化されたWeb Storage API（localStorageとsessionStorage）である。localStorageは、Webページの発行元（オリジン）ごとに、5〜10メガバイト程度のデータをキーと値の組み合わせで保存できる。データがサーバーに送信されることはなく、ブラウザを閉じても、明示的に削除しない限りデータは残り続ける。簡易メモ帳では、このlocalStorageにメモのタイトルや内容、作成日時・更新日時を保存する。

ただし、localStorageのデータをパソコンのどこに、どのような形式で保存するかは、ブラウザによって異なる。下表に主なブラウザの違いを示す。

ブラウザによるlocalStorageの保存形式・保存場所の違い（Windowsの例）
ブラウザ	保存形式	保存場所の例
Google Chrome／Microsoft Edge	LevelDB（キーと値を保存する専用形式）	%LocalAppData%\Google\Chrome\User Data\Default\Local Storage\leveldb\
Mozilla Firefox（現行方式）	サイトごとのSQLiteデータベース	%AppData%\Mozilla\Firefox\Profiles\(プロファイル名)\storage\default\(サイト名)\ls\data.sqlite

このように保存形式は異なっても、localStorage.setItem()やlocalStorage.getItem()といったJavaScriptの命令自体は、どのブラウザでも共通である。簡易メモ帳を作るうえでは保存場所の違いを意識する必要はなく、標準化されたAPIを呼び出すだけでよい。

なお、簡易メモ帳のようにサーバーを介さず、HTMLファイルをパソコン上で直接開いて使う場合、アドレスはfile://から始まる。localStorageは本来「オリジン（スキーム・ホスト名・ポート番号の組み合わせ）」ごとに区別されるが、file://のようにホスト名を持たないアドレスでの扱いは仕様上定義されておらず、ブラウザによって挙動が異なる可能性がある。現在の主なブラウザでは、file://のURLごとに別々の保存領域を持つのが一般的だが、この挙動に頼りすぎず、pahooMemoWin.htmlを常に同じ場所（同じパス）に置いて開くようにするのが安全である。

簡易メモ帳のプログラム仕様書

以上を踏まえて、簡易メモ帳「pahooMemoWin.html」のプログラム仕様書を示す。これがCodexに渡すプロンプトそのものになる。

プログラム仕様書（プロンプト）

# 目標
さまざまなコンテンツをメモのような形でパソコンのローカル・ストレージに保存する。

# プログラム・ファイル名
pahooMemoWin.html

# プロジェクト・フォルダ作成
- プログラム・ファイル名の拡張子を除いた主ファイル名と同じ名前のサブフォルダを作成し、以降の作業はサブフォルダで行う。
- すでにサブフォルダがあれば、そのサブフォルダに移動して以降の作業を進める。

## 入力
- ユーザーはメモしたい内容とタイトルをテキストボックスに入力する。
- 書式はマークダウン方式
- 「登録」ボタンをクリックすると、ローカルストレージに保存する。このとき、作成日時、更新日時を登録する。

## マークダウン方式
1. 見出し
行頭に # を付けます。# が少ないほど大きな見出しです。
2. 箇条書き
行頭に -、*、+ のいずれかを付けます。
3. 強調
**必ず守る条件**
*補足事項*
4. 引用
行頭に > を付けます。
5. コードブロック
前後を3個のバッククォートで囲みます。
6. 区切り線
---
7. 表
| 項目 | 内容 |
|---|---|
8. チェックリスト
- [x] 背景を透明にする
- [x] 影を消す
- [ ] キャラクターの色を変更する
9. リンク
[OpenAI公式サイト](https://openai.com/)
ローカルストレージの場合は file://

## 処理
- メモ内容の入力、保存、検索（抽出）、表示

## 通信
- 原則として外部と通信しない。
- ただし、画像ファイルや動画ファイルのサムネイル表示のための通信は許可する。

## 出力
- プログラム上部にタイトル「簡易メモ帳」、バージョン番号、製作者「(c)pahoo.org Powerd by Codex」と記載する。
- メモした内容の一覧を表示する
タイトル
内容
作成日時
更新日時
- タイトル、作成日時、更新日時のいずれか1つのキーで並べ替えができる。
- タイトルまたは内容の絞り込み検索ができる。
- タイトルをクリックするとメモの内容を表示する
- 表示はマークダウンにしたがう
 - リンクはハイパーリンク形式
 - 画像はサムネイルを表示
 - 動画も可能であればサムネイルを表示
 - 音声その他のコンテンツはアイコン表示
- 「編集」ボタンをクリックすると、タイトルと内容を編集できる。「登録」ボタンをクリックすると、ローカルストレージに保存する。このとき、更新日時を更新する。一覧画面に戻る。
- 各行にチェックボックスがあり、「削除」ボタンをクリックすると、チェックボックスの行にあるメモを削除する。削除前に確認メッセージを表示すること。

## 例外・エラー処理
- 無限ループに陥ったり、システム・エラーが出たときは、画面にエラー情報を表示して終了すること。

## 記録
なし。

# テスト観点・合格条件
- Codexは、ダミーのメモを10本作成し、上記仕様の通りに動作するか検証する。
- 前提条件、制約条件が守られていること。

# 前提条件
- 仕様で分からないことがあれば、ユーザーに質問すること。
- JavaScriptを使った1本のプログラム・ファイルにすること。
- クライアントPCのブラウザ（OSやブラウザの種類は問わない）で動作すること。
- スマホでも利用できること。
- httpサーバなどやNode.jsなどサーバ技術は使わず、ブラウザの機能で完結すること。
- コーディングは「Airbnb JavaScript Style Guide」にのっとること。
- プログラムファイルにコメントとして次の情報を記載すること。
  - プログラムの名称
  - バージョン
  - 目的
  - 動作環境
  - 著作権表示および使用条件
  - インストール方法
  - お問い合わせ

# 制約条件
- 外部ライブラリを使用する場合は、下記のサイトに限定すること
  https://cdn.jsdelivr.net/
  https://cdnjs.cloudflare.com/
  https://ajax.googleapis.com/
  https://code.jquery.com/
  https://ajax.aspnetcdn.com/
- プログラムがMIT Licenseに違反していないこと。

「## 入力」と「## マークダウン方式」にメモの書式を、「## 出力」に一覧表示・並べ替え・検索・編集・削除といった機能を、「## 通信」に画像・動画のサムネイル表示のみ通信を許可する例外を書き込んである。この仕様書をCodexに渡すと、Markdown形式のメモをlocalStorageに保存し、一覧の並べ替えや絞り込み検索まで備えた簡易メモ帳が生成される。