Skip to content

ayati/edjiki

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

edjiki

自動タイムスタンプ降順テキストエディタ。PC / Android Chrome で動作する単一 HTML アプリです。

  • 新規エントリを先頭に挿入し、常に降順(新しい順)で管理
  • ローカルは localStorage に自動保存(debounce 300ms)
  • .txt のダウンロード / インポート(UTF-8 / Shift-JIS を自動判別、出力は UTF-8 固定)
  • Google Drive への保存・読込(マージ方式)
  • public / private フラグ
  • private エントリのパスワード保護(AES-GCM 256bit 暗号化)
  • 編集の簡易 undo(最大 5 ステップ)
  • 全画面編集モード(集中執筆向け。PC はホバーで ⛶、スマホはメニューから)
  • 年別アーカイブ(Drive 専用フォルダに jkYYYY.txt / .zip を保存し、古いエントリをローカルから切り捨て)
  • 配色テーマのプリセット(7種類)
  • フォントサイズ・行間・書体を自由にカスタマイズ
  • ファイル形式設定(改行コード: LF / CRLF、日付区切り: YYYY/MM/DD / YYYY-MM-DD

ファイル構成

ファイル 役割
edjiki.html 本体(単一ファイル、ビルド不要)
config.sample.js 設定ファイルのひな形
config.js 自分で作成config.sample.js をコピーして実値を入れる。.gitignore 済み)
LICENSE MIT License

クイックスタート(ローカル確認)

file:// で直接開くと Google OAuth が動作しないため、必ず HTTP 経由で起動してください。

cd edjiki
python3 -m http.server 8080

ブラウザで http://localhost:8080/edjiki.html を開きます。

Google Drive 連携が不要であれば、config.js がなくてもエディタとしてすぐ使えます。


基本的な使い方

エントリの作成

次のいずれかの方法で新規エントリを先頭に追加できます。

  • ヘッダ右上の +新規 ボタン
  • 画面右下の丸い ボタン(FAB)
  • キーボードショートカット Ctrl+D / Ctrl+N / Ctrl+M

テキストエリアに本文を入力すると、300ms のデバウンスで自動保存されます。

エントリの編集

操作 方法
本文編集 テキストエリアを直接クリックして入力
タイムスタンプ変更 エントリ上部の日時表示をクリック → 秒単位まで編集可能
public / private 切替 エントリ上部の 🔓 public / 🔒 private ボタン、または Ctrl+P(パスワード設定時のみ有効)
削除 エントリ上部の ボタン(確認ダイアログなし。全画面モード中は非表示)
全画面モード マウス: エントリにカーソルを乗せると右上に ⛶ が現れる。スマホ・PC共通: ⋯ メニュー →「全画面モードへ」または Ctrl+Enter。終了は ✕ 閉じる または Esc

テキストエリアからフォーカスが外れると、空行の削除・末尾空白の除去が自動で行われます。本文が空になったエントリは自動削除されます。

元に戻す(Undo)

直近 5 ステップまで操作を取り消せます。

操作 方法
1 ステップ戻る Ctrl+Z(テキスト入力中は無効)
メニューから選ぶ ↩ 元に戻す (N)

スナップショットが取得されるタイミング:

  • テキストエリアにフォーカスしたとき(編集開始前)
  • 削除ボタンを押す直前

テキストエリア内での Ctrl+Z はブラウザ標準のテキスト編集 undo として動作します。フォーカスをエリア外に移してから押すとアプリ全体の undo になります。

パスワード保護

設定パネル()からパスワードを設定できます。設定後は private エントリが AES-GCM 256bit で暗号化されて localStorage に保存されます。

操作 方法
パスワード設定 ⚙ →「🔐 パスワードを設定...」
解除(セッション中) ヘッダの 🔐 ボタン → パスワード入力
ロック ヘッダの 🔓 ボタン
パスワード変更 / 削除 ⚙ →「🔑 パスワードを変更...」/「🔓 パスワードを削除...」
  • パスワード未設定時は private への切替ができません。 暗号化するには先に⚙でパスワードを設定してください。
  • パスワードを忘れると private エントリは復元できません。 定期的に Drive へ保存してください(Drive の .txt は平文で保存されます)。
  • ロック中の private エントリは検索・編集・エクスポートできません。削除は可能です。
  • ページをリロードすると自動的にロックされます。
  • .txt ダウンロード時に private エントリが含まれる場合は警告が表示されます(出力は常に平文です)。

検索

ヘッダの 🔍 ボタン、または Ctrl+F で検索バーを開きます。

  • 本文の部分一致検索
  • YYYY/MM/DD または YYYY-MM-DD の前方一致検索(例: 2026/042026-04 と入力するとその月のエントリだけ表示)

Esc キーまたは ボタンで検索バーを閉じます。


ショートカット一覧

キー 動作
Ctrl+D / N / M 新規エントリを先頭に追加
Ctrl+Z 元に戻す(最大 5 ステップ。テキスト入力中は無効)
Ctrl+S ローカル保存(即時フラッシュ)
Ctrl+Shift+S .txt ファイルをダウンロード
Ctrl+Shift+D Google Drive に保存
Ctrl+P フォーカス中エントリの public / private 切替
Ctrl+Enter フォーカス中エントリを全画面表示 / 全画面を終了
Ctrl+F 検索バーを開く
Esc 全画面を終了 / 検索バーを閉じる

テキストファイル形式

ダウンロード・インポート・アーカイブで使用するテキストファイルの形式です。

2026/04/13 21:43:10 公開エントリの本文
複数行の本文も可
2026/04/13 -20:15:00 非公開エントリの本文(秒の前にハイフン)

ルール

  • 行頭が YYYY/MM/DD HH:MM:SS または YYYY-MM-DD HH:MM:SS の行がエントリのヘッダ。それ以降の行が本文。
  • 秒の直前に - があれば private エントリ。
  • 空行は禁止(インポート時に無視されます)。

文字コードと改行コード

設定 出力(ダウンロード・Drive 保存) 読込(インポート・Drive 読込)
文字コード UTF-8 固定 UTF-8 / Shift-JIS を自動判別(BOM 付き UTF-8 にも対応)
改行コード LF または CRLF(⚙ で選択) LF / CRLF どちらも自動対応
日付区切り / または -(⚙ で選択) /- どちらも自動認識

アーカイブファイル(jk2025.txt など)も同じ形式のため、⋯ → ファイルから読込 でそのままインポートできます。


表示のカスタマイズ(設定パネル)

ヘッダの ボタンで設定パネルを開きます。設定は localStorage に保存され、次回起動時に復元されます。

配色テーマ

7種類のプリセットから選択できます。各テーマは色見本(背景色+アクセント色)付きで表示されます。

テーマ 特徴
自動 OS のダーク / ライト設定に追従(デフォルト)
ダーク VS Code 風の落ち着いたダーク
ライト シンプルな白ベース
セピア 和紙・古書のような暖色系。長時間の読み書きに
さくら 桜の淡いピンク
ブルー 深海・夜の水面を思わせるダークブルー
ノルド 北欧の冬をイメージした人気の Nord パレット

フォントサイズ

スライダーで 12px〜24px の範囲を 1px 刻みで調整できます(デフォルト: 16px)。

行間

スライダーで 1.2〜2.0 の範囲を 0.1 刻みで調整できます(デフォルト: 1.6)。

フォント

書体名はそれぞれの書体でプレビュー表示されます。

カテゴリ フォント名 特徴
ゴシック BIZ UDPGothic UD 書体。読みやすさ重視(デフォルト)
ゴシック M PLUS 1p すっきりとした現代的なゴシック
ゴシック M PLUS Rounded 1c 丸みのある柔らかなゴシック
ゴシック Noto Sans JP Google の標準的な和文サンセリフ
明朝 Noto Serif JP Google の標準的な和文明朝
明朝 ZEN オールド明朝 伝統的な活字の雰囲気
明朝 しっぽり明朝 活字らしい本格的な明朝体
明朝 さわらび明朝 細くすっきりした明朝体
明朝 ひな明朝 やや手書き風の明朝体
汎用 汎用セリフ OS 標準のセリフ体(Windows: 游明朝など)
汎用 汎用サンセリフ OS 標準のサンセリフ体
等幅 ui-monospace 等幅フォント(開発者向け)

Google Fonts のフォントは初回アクセス時にバックグラウンドで読み込まれます。display=swap を使用しているため、読み込み中はシステムフォントで表示され、完了次第切り替わります。

ファイル形式

ダウンロードおよび Drive 保存時の出力形式を設定します。読込時はいずれの形式も自動認識されます。

設定 選択肢 デフォルト
改行コード LF(Unix / macOS)/ CRLF(Windows) LF
日付区切り YYYY/MM/DD(標準)/ YYYY-MM-DD(ISO 8601) YYYY/MM/DD

Google Drive 連携

概要

  • マイドライブ(または指定フォルダ)に単一のテキストファイルを保存・読込します。
  • 複数端末で編集した場合、保存・読込時に マージ が行われ、双方の変更が保持されます。
  • 使用するスコープは drive.file(このアプリが作成または開いたファイルのみにアクセス可能)です。
  • Drive 接続時はヘッダのタイトルが「フォルダ名 / ファイル名」に変わります。

Drive 未保存インジケーター

Drive 連携が設定されている状態でエントリを追加・編集すると、ヘッダに ボタンが表示されます。クリックすると即座に Drive へ保存されます。Drive に保存した後、変更がなければ自動的に非表示になります。

初回セットアップ

1. Google Cloud Console でプロジェクトを準備する

  1. Google Cloud Console でプロジェクトを作成(既存のプロジェクトを使っても構いません)。
  2. 「API とサービス」→「ライブラリ」Google Drive API を有効化。
  3. 「OAuth 同意画面」 を設定します。
    • 「外部」を選択し、「テストユーザー」に自分の Google アカウントを追加してください(公開申請は不要です)。
  4. 「認証情報」→「認証情報を作成」→「OAuth クライアント ID」 を選択。
    • アプリの種類: 「ウェブアプリケーション」
    • 承認済みの JavaScript 生成元に以下を追加:
      https://www.ayati.com
      http://localhost:8080        (ローカル確認用)
      
  5. 発行された クライアント ID をコピーしておきます。

2. config.js を作成する

config.sample.js をコピーして config.js を作成し、クライアント ID を記入します。

cp config.sample.js config.js
// config.js
window.EDJIKI_CLIENT_ID = "1234567890-xxxxxxxx.apps.googleusercontent.com";

3. 動作確認

ローカルサーバーで http://localhost:8080/edjiki.html を開き、ヘッダの メニューから「Drive に保存」を実行します。初回は Google アカウントの認証ダイアログが表示されます。


保存先のカスタマイズ

デフォルトはマイドライブ直下に edjiki.txt として保存されます。保存先は ⋯ → Drive 設定 から変更できます。また config.js で初期値を指定することもできます。

// config.js(カスタマイズ例)
window.EDJIKI_CLIENT_ID       = "1234567890-xxxxxxxx.apps.googleusercontent.com";
window.EDJIKI_DRIVE_FILENAME  = "memo.txt";          // ファイル名を変更
window.EDJIKI_DRIVE_FOLDER_ID = "1AbCdEfGhIjKlMnO"; // 保存先フォルダを指定(初期値)
window.EDJIKI_DRIVE_FILE_ID   = "1AbCdEfGhIjKlMnO"; // 既存ファイルを直接指定(後述)

Drive 設定パネル

⋯ → Drive 設定... で開くパネルから、Drive に関するすべての設定が行えます。

セクション 内容
Google Drive 連携 メインデータの保存先フォルダを URL で指定。設定後はヘッダにフォルダ名 / ファイル名を表示
アーカイブフォルダ 年別アーカイブ(jkYYYY.txt / .zip)の保存先フォルダを設定
データ管理 ストレージ使用量確認・保持日数設定・アーカイブ実行
Drive ファイル直接指定 他のアプリで作成した .txt ファイルを使う上級者向け設定(drive スコープに昇格)

Drive 操作メニュー

ヘッダの ボタンから以下の操作が行えます。

メニュー項目 動作
↩ 元に戻す (N) 直前の操作を取り消す(N = 残りステップ数)
💾 ダウンロード (.txt) 現在のデータをテキストファイルとして保存
📂 ファイルから読込 ローカルの .txt ファイルをインポート(現在のデータとマージ)。UTF-8 / Shift-JIS を自動判別
☁ Drive に保存 Google Drive にアップロード。Drive 側が更新されていればマージ確認ダイアログを表示
☁ Drive から読込 Google Drive からダウンロードしてローカルとマージ。UTF-8 / Shift-JIS を自動判別
⚙ Drive 設定... Drive 設定パネルを開く(保存先フォルダ・アーカイブ・ファイル直接指定)
❓ ヘルプ 操作ガイドを表示
ログアウト (Drive) アクセストークンを破棄(ページを閉じると自動的に失効します)

マージの仕組み

複数端末で同じファイルを編集しても、保存・読込時に以下のルールで自動マージされます。

  1. エントリ ID が一致 → 同一エントリとみなし、タイムスタンプが新しい方を採用
  2. ID が一致しないが内容(日時・public/private・本文)が同じ → 重複とみなして片方を破棄
  3. ID も内容も一致しない → 別エントリとして追加

アーカイブ・過去エントリ切り捨て

機能の目的

localStorage の容量(上限 約 5MB)を圧迫しないよう、一定期間より古いエントリをローカルから削除する機能です。削除したエントリは Google Drive の専用フォルダに年別ファイルとして保存されるため、5年日記・10年日記として過去の記録をいつでも参照できます

アーカイブファイルは edjiki のテキスト形式なので、必要に応じて ⋯ → ファイルから読込 で現行データに取り込むことができます。

アーカイブファイルの仕様

ファイル名 内容
jk2024.txt 2024年の全エントリ(1月1日〜12月31日)
jk2024.zip jk2024.txt をそのまま ZIP 圧縮したもの
jk2025.txt 2025年の全エントリ(同上)
jk2025.zip 同上
jk2026.txt 2026年の元旦〜直近のアーカイブ実行時点まで
jk2026.zip 同上

txt と zip は常にセットで保存されます。 txt はテキストエディタで直接閲覧でき、zip はファイル整理・長期保存に使えます。

完全性の保証

アーカイブを複数回実行しても、年別ファイルは常に「元旦からの欠けのない記録」になります。

仕組み:実行時に Drive 上の既存 jkY.txt をダウンロードして今回の切り捨て分とマージしてから再アップロードします。たとえば:

  • 3月に実行(保持 60日、カットオフ = 1月中旬)→ jk2026.txt = 1月1日〜1月中旬
  • 6月に実行(同)→ Drive の jk2026.txt(1月分)+ 今回の切り捨て分(1月中旬〜4月初旬)をマージ → jk2026.txt = 1月1日〜4月初旬(欠けなし)

セットアップ

アーカイブ機能は Google Drive 設定(config.jsEDJIKI_CLIENT_ID)が必要です。

1. Drive にアーカイブ専用フォルダを作成する

Google Drive で任意の場所に専用フォルダを作成します(例: jiki_archive)。メインデータの保存フォルダとは別にすることを推奨します。

2. フォルダ ID を edjiki に設定する

⋯ → Drive 設定 →「📁 アーカイブフォルダを設定...」

  1. Google Drive でアーカイブフォルダを開く
  2. アドレスバーの URL をコピーしてダイアログに貼り付ける
https://drive.google.com/drive/folders/1AbCdEfGhIjKlMnOpQrStUvWxYz
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ この部分

設定後はデータ管理セクションに「✓ 設定済」と表示されます。

アーカイブの実行

⋯ → Drive 設定 →「📦 アーカイブして切り捨て...」

保持日数の設定

「保持日数」(デフォルト: 60日)以内のエントリが現行データに残り、それより古いエントリがアーカイブ対象になります。

  • 今日から 60日前より古いエントリ → アーカイブ対象(Drive に保存 → ローカルから削除)
  • 今日から 60日以内のエントリ → 現行データとして残る

設定画面で切り捨て対象の件数・年範囲をプレビューできます。

処理の流れ

  1. 確認ダイアログ(件数・年範囲・private エントリ警告などを表示)
  2. Google Drive 認証(未認証の場合は OAuth フローが起動)
  3. 年ごとに処理:
    • Drive の既存 jkY.txt をダウンロードしてマージ
    • 完全版 jkY.txt を Drive にアップロード(上書き)
    • jkY.zip を Drive にアップロード(上書き)
  4. アップロード成功した年のエントリをローカルから削除

アップロードに失敗した年のエントリはローカルに残ります。

注意事項

  • 操作は元に戻せません。 Drive への保存を確認してからローカルデータを削除します。Drive アップロードが成功した年のみ削除されます。
  • ロック中(パスワード解除前)の private エントリはアーカイブに含まれません。 ロック中エントリはアーカイブ実行後も現行データに残ります。パスワードを解除してからアーカイブを実行することを推奨します。
  • アーカイブファイルは平文(暗号化なし)で Drive に保存されます。 private エントリを含む場合は確認ダイアログで警告が表示されます。
  • アーカイブ操作には Drive の drive.file スコープを使用します。edjiki が作成した jkY.txt / jkY.zip のみアクセスできます(手動でアップロードした同名ファイルは認識されません)。

データモデル

localStorage["edjiki.data"] に以下の JSON 形式で保存されます。

{
  version: 1 | 2,              // 2 はパスワード設定済
  updatedAt: "2026-04-13T21:50:00+09:00",
  driveFileId: "1AbC..." | null,
  driveFileName: "edjiki.txt",
  driveFolderId: "1AbC..." | null,      // メインデータの保存フォルダ ID
  driveFolderName: "フォルダ名" | null, // Drive API から取得したフォルダ名(ヘッダ表示用)
  drivePinnedFileId: "1AbC..." | null,  // ファイル直接指定 ID
  driveModifiedTime: "2026-04-13T12:50:00.000Z" | null,
  archiveFolderId: "1AbC..." | null,    // アーカイブ専用フォルダ ID
  // パスワード設定時のみ存在
  cryptoSalt: "Base64...",     // PBKDF2 用 salt(16 bytes)
  cryptoVerifier: { iv, ct },  // パスワード検証用("edjiki-verified" を暗号化)
  entries: [
    // public エントリ(暗号化なし)
    { id: "uuid", time: "2026-04-13T21:43:10+09:00", private: false, text: "本文" },
    // private エントリ(パスワード未設定)
    { id: "uuid", time: "...", private: true, text: "本文" },
    // private エントリ(パスワード設定済 → 暗号化)
    { id: "uuid", time: "...", private: true, enc: { iv: "Base64...", ct: "Base64..." } },
  ]
}
  • entries は常に time 降順。
  • text はフォーカスを外した時点で正規化(空行削除・末尾空白削除)。空になったエントリは自動削除。
  • パスワード設定時、private エントリは enc フィールドに AES-GCM 暗号文として保存され text は含まれません。

localStorage["edjiki.settings"] には表示・出力設定が保存されます(日記データとは独立)。

{
  theme: "auto",        // 配色テーマ
  fontSize: 16,         // フォントサイズ(px)
  lineHeight: 1.6,      // 行間
  fontKey: "biz-ud",    // フォント
  daysToKeep: 60,       // アーカイブ保持日数
  lineEnding: "LF",     // 改行コード("LF" | "CRLF")
  dateSep: "/"          // 日付区切り("/" | "-")
}

本番配信

edjiki.htmlconfig.js を Web サーバーに配置します。

https://www.ayati.com/
  ├── edjiki.html
  └── config.js       ← .gitignore に含めること

Android Chrome からそのURLをブックマークまたはホーム画面に追加して使用します。


既知の制約

制約 補足
localStorage 容量は約 5MB アーカイブ機能で古いエントリを Drive に退避することで解消できます
Drive アクセストークンはタブを閉じると失効 次回操作時にサイレント再認証されます
drive.file スコープの制限 他のアプリが作成した同名ファイルにはアクセス不可。メインデータは「Drive ファイル直接指定」で、アーカイブは edjiki が初回作成したファイルを使い続けることで回避
アーカイブの手動アップロードファイルは不認識 drive.file の仕様。edjiki が初回作成した jkY.txt / jkY.zip のみ上書き更新可能
file:// では動作しない OAuth の制限により、必ず HTTP サーバー経由で開いてください
パスワード紛失時の復旧不可 private エントリは復元できません。Drive への定期保存(平文 .txt)を推奨します
ロック中の Drive 操作不可 Drive に保存・読込・アーカイブを行うにはパスワード解除が必要です
Undo はページ再読み込みでリセット undo スタックはメモリのみ。再読み込み後は 0 ステップから再開します
Shift-JIS での出力は非対応 出力(ダウンロード・Drive 保存)は常に UTF-8。読込時のみ自動判別します

About

自動タイムスタンプ降順テキストエディタ / PC & Android Chrome / single-file HTML with Google Drive sync

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors