# ひかりのエンボス工房 — 作り方とプロンプト

一言：好きな言葉を紙と箔に押し、光をなぞって仕上げる小さな工房。
完成物：https://okemonogatari-hash.github.io/html-share-box/astra-emboss-2026-10-03/
サムネ：poster.png

2026-10-03制作。親がブラウザから保存した1280×1024の初期PNGをサムネイルに使用しています。

## 本人の頼み方（原文）

同プロジェクトの水車作品 `PROCESS.md` に親担当が保存した、今回の実験室制作の依頼原文です。

> この水野さんの朝のAI発信のYouTubeスクリプトを見てきて、また内容の把握と、あとなんかChatGPTのお気に入り作品集みたいなものがまた増えてるみたいだから、アストラのね、3D実験室とかアストラ実験室、おけもん実験室の棚をまたどんどん増やしていきましょう。ちょうど5日までに切れるチケットがあるから、もう遠慮せずにフルパワーでどんどん回していきましょう、そこまでは。

参考の紹介はClaude公式のお気に入り作品でした。親担当が公開投稿と紹介内容を確認しています。ここではエンボスの着想を持ち帰り、独自の工房として制作しました。

## AIに渡したプロンプト原文

[制作担当へ渡した全文](prompts/build-brief.md)に保存しています。親担当は参考紹介の確認、既存作品との重複確認、ブラウザ受入、公開と棚への統合を所有。制作担当はこの作品フォルダだけを編集し、別担当がソースと保存画像を独立レビューします。

## 道具とモデル指定

- ユーザーの指定: CodexでAstra ultraを使い、2026-10-05まで実験室の作品を増やす。制作担当に渡った指示にもAstra ultraの指定があります。モデルの要求値とバックエンドの実行証跡を同一視せず、この記録単独では実行モデルの独立確認を主張しません。
- Codex native subagent: JavaScript、HTML、CSS、検査、制作資料の作成。
- Canvas 2D: 紙の粒子と繊維、入力字形、太陽の印、額縁、照明と反射、PNG出力。
- `apply_patch`、シェル、Node.js: ソース制作、構文確認、入力・光方向の境界テスト。
- Python標準HTTPサーバー: 親担当のローカルプレビュー。
- 追加パッケージ、画像生成、有料API、外部フォント、Three.jsは使用していません。

## 素材の出どころ

- 発想の入口: [Claude公式のお気に入り作品紹介](https://x.com/claudeai/status/2106125468365918268)内のエンボス例。投稿の内容確認は親担当の研究記録にあります。
- 取り入れた発想: 紙面の文字の凹凸が、光の方向で見え方を変える体験。
- 文字の高さと法線、紙の粒子と繊維、箔のむらと反射帯、太陽の印、画面構成: この作品向けに独自コードで制作。
- フォント: 端末にある日本語明朝体と標準欧文。端末による字形差があります。
- 参考作品のコード、画像、音声は使用していません。入力と描画は端末内で処理します。

## 描画のしくみ

1. 入力を最大42 graphemesに整え、日本語・英数字を紙の幅に合わせて折り返す。
2. 1280×1024のCanvasへ白い字形と印を描き、透明度のマスクを取り出す。
3. 大小のぼかしを混ぜ、文字のふちを丸めた高さの配列にする。
4. 左右上下の高さの差から面の向き（法線）を求め、光方向に応じて明暗をつける。
5. 箔では反射の帯、細かなむら、ふちの光を加える。くぼませる時は高さの向きを反転する。
6. 同じCanvasの画像をPNGへ変換する。操作用の光マーカーなど、画面のUIは保存画像に含めない。

光学的に厳密な物理シミュレーションや実際の印刷条件の予測ではなく、入力した言葉の質感を楽しむ2D表現です。

## 再制作・修正の手順

1. [README](README.md)のHTTPサーバーから工房を開く。
2. `model.mjs`で入力・改行・光の境界、`renderer.mjs`で紙色・粒子・文字組版・ぼかし・法線・箔反射を変更する。
3. `app.mjs`で操作を変更し、対応する`index.html`のラベル・aria属性も合わせる。
4. `node --test qa/model.test.mjs`と`node qa/check-static.mjs`を実行する。
5. PCと375pxで、3素材、両方の押し方、深さと光の両端、日本語入力と長文、矢印キー、リセットを操作する。
6. PNGを取得し、保存時の文字・素材・光と一致することを目視する。生成リンクからも同じ画像へ到達できるか確認する。
7. 親担当が受入後にサムネイルと公開URLを追記し、公開先の実画面を再確認する。

## 制作担当の確認と修正

- `qa/model.test.mjs`: 入力8項目の境界テスト。日本語の長文、3段を超える改行、複合絵文字、結合文字、改行コード、禁則の一部、長い英数字、光の有限値を確認。
- 独立レビューから、4段目以降の改行を空白に置換する際に文字数へ加算されず、42字を超えられる指摘を受領。置換空白も計上するよう修正し、44文字4段と連続改行50個の再現ケースをテストに追加。
- ネイティブ入力上限を2048 UTF-16単位とし、実際の42字制限はgrapheme単位で適用。日本語IMEの変換中には書き換えず、確定時に整えます。
- `qa/static-report.json`: 構文、HTML要素の対応、ローカル依存、入力のHTML化がないこと、PNG経路、URL解放、ゼロ寸法の防御、初期フォント待ち、時刻差計算がないこと、ポインタ中断・キーボード・モバイル定義の確認。
- 描画は固定解像度で、操作時だけ更新。初回フレームの負の時刻差やリサイズの0寸法から画像サイズを作りません。
- PNG生成時に同じ状態を描き直し、その瞬間のCanvasを`toBlob`へ渡します。ファイル名も同時点で確定し、生成後に素材を変えても保存画像と名前が食い違わないようにしました。
- Canvasや画像URLを無制限に追加せず、高さ・法線の配列は現行テキスト用、紙のキャッシュは現行素材用だけ保持します。保存リンクは次回生成時に旧URLを解放します。

制作担当はブラウザを操作していません。親担当から、PCの3素材、入力、ドラッグ、両押し方、深さ10/100%、光と全体のリセット、サンプル、PNG3種の実取得、375×812表示、42字境界、矢印キーの受入報告を受けています。別担当も保存された金・黒・綿のPNGを目視し、追加修正要求なしと報告しました。親の実観測と公開確認は別のQA記録を参照してください。実際の日本語IME変換・実機タッチは、この制作担当の静的検査だけでは確認できていません。

親の追加依頼で、作り方の画面に「プロンプトをコピー」を追加。Clipboard APIが使えない場合は本文を選択し、端末のコピー操作を案内します。このボタンの実操作は親担当が受け入れます。

## そのまま貼れるプロンプト

道具：Codex（Astra ultra指定）／Canvas 2D

```text
「ひかりのエンボス工房」という、触れるブラウザ作品を作って。好きな短文を紙の浮彫りと箔押しにし、指で光を動かすと文字の凹凸と箔の反射がはっきり変わるように。コットン紙・シャンパン箔・黒箔、浮き出す／くぼませる、深さ、光の位置、リセット、今見ている光のままPNG保存を付けて。最初は「光を、ひと押し。」を美しく組版し、静かな日本語UIと贅沢な余白にして。日本語・英数字・長文・スマホに対応し、画像素材や有料APIを使わずCanvas 2Dで独自に描画して。参考例のコードや素材はコピーせず、PROCESS.mdに頼み方・道具・素材の出どころ・再制作手順を残して。
```

## 親の受入

2026-10-03、実ブラウザで日本語入力、3素材、浮き/くぼみ、深さ10/100、ドラッグと矢印の光操作、初期化、PNG3種の保存を確認しました。375×812の実表示幅で操作と保存へ到達し、横はみ出しなし。制作していない担当が原寸の金箔・黒箔・綿紙を受入、上限文字数の指摘は修正後に再確認済みです。作り方のコピー操作では「コピーしました」の完了表示を確認しました。