AIでつくってためそ 本棚

YouTubeチャンネル「AIでつくってためそ」でAIに作らせたアプリを、本棚のように並べたページです。 背表紙を選ぶと、動きのプレビューと「遊ぶ」ボタンが出ます。

見せ方は「背表紙」（縦に並べる）と「表紙」（表紙を向けて立てかけ、表紙の中でプレビューが動く）を切りかえられます。「ジャンルごとの棚」にすると、ジャンル別に棚が分かれ、表紙の見せ方では1ジャンル1段の横スクロールになります。

気に入った本には「しおり」を挟めます。本を開いて「🔖 しおりを挟む」を押すと、背表紙の上にしおりが出て、ジャンルの横の「🔖 しおり」で挟んだ本だけを表示できます。しおりは見ている人のブラウザにだけ残ります。

公開ページ：https://ai-tsukuttetameso.github.io/tsukutte-tameso-shelf/

公開用ページと管理用ページ

• index.html（公開用）：見るだけのページです。設定ボタンはなく、いつもリポジトリの shelf.json の内容を表示します。
• admin.html（管理用）：本の追加・編集、太さ、色、バックアップができます。編集はそのブラウザの中だけに保存され、公開ページは変わりません。
• 公開ページに反映するには、管理用ページで書き出した shelf.json をリポジトリに入れます（GitHub に書き込める人だけができます）。だれかが管理用ページを開いても、公開ページを書き換えることはできません。

自分の本棚として使うには

このページの中身は shelf.json 1つで決まります。プログラムを書き換える必要はありません。

1. このリポジトリをコピーします（GitHub の「Fork」か「Use this template」）。
2. コピーしたリポジトリの「Settings」→「Pages」で、「Source」を「Deploy from a branch」、ブランチを main、フォルダを / (root) にして保存します。数分で https://（あなたのユーザー名）.github.io/（リポジトリ名）/ で公開されます。
3. 管理用ページを開きます。例：https://（あなたのユーザー名）.github.io/（リポジトリ名）/admin.html
4. 右上の「本棚の設定」で本を追加・編集します。入力するとすぐ本棚に反映され、このブラウザに保存されます。
5. 「バックアップ」タブの「バックアップを書き出す」で shelf.json を書き出し、リポジトリの shelf.json と置き換えます。
6. プレビューの画像・動画は previews/ に置き、本の設定の「プレビュー」「コマ送りの画像」にパスを書きます（mp4・webm・画像に対応）。

手元のパソコンで試すとき

index.html をダブルクリックで開くと、ブラウザの決まりで shelf.json を読み込めません。フォルダの中でHTTPサーバーを動かして開いてください。

cd 本棚のフォルダ
python3 -m http.server 8000

ブラウザで http://localhost:8000/ （管理用は http://localhost:8000/admin.html）を開きます。

気をつけること

• 画像・動画はJSONに入りません。 shelf.json には画像・動画の「場所（パス）」だけが入ります。ほかの場所へ移すときは、previews/ フォルダもいっしょにコピーしてください。
• 同じIDの本を読み込むと、追加ではなく上書きになります。 1冊ずつ書き出したファイル（book-○○.json）を「バックアップから戻す」で選ぶと、同じIDの本があればその本を置き換え、なければ追加します。
• 「バックアップから戻す」で問題のあるファイルを選んだときは、本棚は変わりません。 理由（どの本のどの項目か）が表示されます。
• 並べ替え（↑↓）は、巻の番号を入れ替えます。
• 管理用ページでは、このブラウザで編集中の内容が、リポジトリの shelf.json より優先されます。 リポジトリの shelf.json を直接書き換えたときは、管理用ページの「バックアップ」タブで「元の本棚に戻す」を押すと、最新の shelf.json が表示されます（その前に、必要なら書き出しておいてください）。
• リンクに使えるのは http://・https:// で始まるURLと、サイト内のパスだけです。 それ以外（javascript: など）は外されます。
• 公開予定の日時（releaseAt）は、2026-10-25T19:00:00+09:00 のように時差をつけて書きます。 時差がない・書き方が正しくないときは、その本の公開を保留します（遊ぶボタンが押せません）。管理用ページで日時を選ぶと、自動でこの書き方になります。

いちばん小さい shelf.json の例

{
  "format": "app-shelf",
  "version": 1,
  "site": { "title": "わたしの本棚" },
  "genres": [{ "id": "game", "name": "ゲーム" }],
  "apps": [
    {
      "id": "my-first-app",
      "title": "はじめてのアプリ",
      "genre": "game",
      "summary": "ひとことの説明",
      "links": [{ "label": "遊ぶ", "url": "https://example.com/my-first-app/" }]
    }
  ]
}

必須なのは apps と、各本の title だけです。ほかの項目は省略すると、次の決まった値になります：タイトル「わたしの本棚」、巻の番号は並び順、背表紙の印はタイトルの1文字目、太さは「自動」、文字の雰囲気は「しっかり（明朝）」。

バックアップ

「バックアップを書き出す」で、サイト情報・ジャンル・すべての本が1つの shelf.json にまとまります。「バックアップから戻す」でそのファイルを選ぶと、そのときの本棚に戻ります。

shelf.json の項目

項目	内容
site	本棚のタイトル、説明、作った人、作った人のリンク（ownerUrl）、アクセント色、背表紙の太さ（thickness）、色のそろえ方（colorBy：book / genre）、文字の雰囲気（font。14種類：classic・elegant・old・clean・ud・pop・soft・kawaii・hand・pen・brush・bold・showa・retro）、巻の書き方（volumeLabel。{n} が数字）
genres	ジャンルの一覧（id、name、color、thickness）。id は重ならないようにします。site.colorBy を genre にするとジャンルの色で背表紙がそろいます
apps	本の一覧。id（URLの末尾 #id に使う英数字。重ならないように）、title（必須）、volume（巻）、genre、icon（背表紙の印）、color（背表紙の色）、summary、description、tags、madeBy、thickness（背表紙の太さ：inherit / auto / xthin / thin / normal / thick。inherit はジャンル・全体の設定に合わせる）、date（公開日。2026-10-17 の形）、releaseAt（公開予定。時差つき。過ぎるまでボタンを押せない）、preview（動画）、poster（動画の止め絵）、frames（コマ送りの画像の一覧。入れると動画の代わりに切りかえて見せる）、links（遊ぶボタン。[{ "label": "遊ぶ", "url": "https://…" }] の形で複数可）、video（紹介動画のURL）

通信と保存について

• 入力した内容や操作の記録を、外部へ送ることはありません。
• 文字の書体（フォント）は Google Fonts から読み込みます。このとき、見ている人のブラウザから Google のサーバーへ接続します。
• shelf.json に外部の画像・動画のURLを書いた場合は、その場所から読み込みます。
• 管理用ページの編集内容と、しおり・表示の設定は、お使いのブラウザの中（localStorage）だけに保存されます。