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つで決まります。プログラムを書き換える必要はありません。
- このリポジトリをコピーします（GitHub の「Fork」か「Use this template」）。
- コピーしたリポジトリの「Settings」→「Pages」で、「Source」を「Deploy from a branch」、ブランチを
main、フォルダを / (root) にして保存します。数分で https://（あなたのユーザー名）.github.io/（リポジトリ名）/ で公開されます。
- 管理用ページを開きます。例：
https://（あなたのユーザー名）.github.io/（リポジトリ名）/admin.html
- 右上の「本棚の設定」で本を追加・編集します。入力するとすぐ本棚に反映され、このブラウザに保存されます。
- 「バックアップ」タブの「バックアップを書き出す」で
shelf.json を書き出し、リポジトリの shelf.json と置き換えます。
- プレビューの画像・動画は
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）だけに保存されます。
