このブログサイトの概要と主な機能

一言でいうと

多言語対応の、個人＆開発者向けブログ基盤です。ひとつの記事を最大5言語（英語・日本語・ロシア語・ドイツ語・フランス語）で公開でき、機械翻訳を「一級市民」として扱いつつ、必ず人間がレビューして仕上げるワークフローを前提にしています。

そして、できるかぎりクラウドの無料枠の範囲で、ほぼゼロ円で運用できること、かつ**いつでも別のサービスに引っ越せる（ポータブルである）**ことを設計の柱に据えました。

ブログの名前は "The Save Room"。ゲーマーならピンとくるかもしれません。トップページの背景にはラクーンシティの警察署が夜の霧と雨の向こうに佇んでいます（他人のドット絵は一切借りず、すべてをCSSだけでClaudeに描いてもらった）。ネオダイアリー ── 現代版の日記帳 ── として長く使っていくつもりです。

なお、「いいね」機能とコメント機能は意図的に実装していません。ここは静かに書くための場所だからです。

システムは実質2つ

このプロジェクトは、ひとつのリポジトリの中に2つのアプリを持っています。

アプリ	役割
公開サイト（web）	読者が訪れる、記事を表示する側。多言語対応。
管理コンソール（console）	私だけが使う、記事を書く側。認証付きエディタ・翻訳・アップロード・タグ／リンク管理・エクスポート。

両者は同じ「記事のデータ」と「本文レンダリングの仕組み」を共有しています。だからコンソールのプレビュー画面は、公開サイトの見え方と設計上ピクセル単位で一致します。書きながら見えているものが、そのまま公開される姿です。

主な機能

1. 多言語コンテンツモデル

1つの記事は、「記事本体」1行に対して、言語ごとの「翻訳」を最大5行ぶら下げる構造になっています。それぞれの言語は独立して下書き／公開できます。

英語だけ公開して、日本語はまだ下書き ── といった状態が自然に表現できます。
ある言語で「公開済みの翻訳」が存在するときだけ、その言語のサイトに記事が現れます。 これはUIの都合ではなく、データベースへの問い合わせのレベルで保証されています。だから「うっかり未完成の翻訳が表に出る」ことが原理的に起こりません。

2. 機械翻訳＋人間のレビュー

ベース言語で書いた記事を、ボタンひとつで他の4言語のうち好きな組み合わせに機械翻訳できます。翻訳された文章は「機械翻訳フラグ付きの下書き」として保存され、手で直せば「編集済み」の印がつきます。（現時点では「編集済み」の印が編集者のコンソールのみで表示されます）

ここで一番こだわったのが 「翻訳で壊れないマスキング」 です。翻訳APIに文章を渡す前に、コードブロック・インラインコード・独自ショートコード・Markdownのリンク先URLを、いったん特殊な記号トークンに置き換えます。翻訳が返ってきたら元に戻します。この工夫のおかげで、Markdownの構造や記号は1バイトも壊れずに機械翻訳を通過します（実際のGoogle翻訳APIに通して検証済みです）。

3. リッチな本文 ── ショートコード

本文はMarkdownで書きますが、それだけでは物足りない要素は「ショートコード」という独自記法で埋め込めます。

記法	効果
`{{image}}`	画像を挿入（未使用の次の1枚、または指定した1枚）
`{{gallery 3}}`	次の3枚をスワイプできるカルーセルに
`{{youtube <id> t=1m30s}}`	クリックするまで読み込まないYouTube埋め込み（開始位置指定つき）
`{{pdf}}`	PDFのインラインプレビュー＋ダウンロードリンク
`{{audio}}`	オーディオプレイヤー
`{{video}}`	ビデオプレイヤー
`{{link <key> text="ラベル"}}`	表示言語ごとにURLを出し分けるリンク

この仕組みは「レジストリ」として設計してあり、新しい埋め込み種を足すのは、レンダラーを1つ書くだけ。データベースの変更はゼロです。実際、後から音声・動画をこの仕組みに乗せました。

4. 執筆コンソール

言語タブ付きのMarkdownエディタ。400msのディレイでライブプレビューが更新されます。
メディアパネル：ドラッグ＆ドロップで複数ファイルを一括アップロード、進捗表示つき。altテキスト編集、並べ替え、カバー画像の選択まで。
- 画像・PDFはサーバー経由でアップロード。画像は長辺を2000pxに抑え、400pxのサムネイルを生成します。アニメーションGIFはそのまま通します。
- 音声・動画はブラウザから直接クラウドストレージへアップロード。大きなファイルがアプリのサーバーを一切経由しないので、サーバーレスの容量制限にも引っかかりません。
タグ管理（言語ごとの表示名）、記事ごとのリンク管理、スラッグ編集、論理削除（ゴミ箱と復元）、タイトル全文検索、ページング。
ワンクリック・エクスポート：全テーブルをJSONに、自前ホストの全ファイルを添えたZIPを出力。これは「いつでも引っ越せる」ための脱出ハッチです。

5. 公開サイト

言語の判定は「URL → Cookie → ブラウザの言語設定 → 英語」の順。
記事ページは共有パイプラインでフル描画：サニタイズ済みMarkdown、スワイプできる画像カルーセル、クリックで読み込むYouTube、PDFプレビュー、自作オーディオプレイヤー、シーク対応の動画、言語別リンク。
機械翻訳されたページには「これは機械翻訳です」という注記と、原文へのリンクが出ます。
レイアウトはモバイルファースト。サイドバー（アバター・言語切替・タグ一覧）はスマホではハンバーガーメニューに畳まれます。ヘッダーには言語ごとの引用句が入れ替わりで表示されます。