1. dreamCanvas.zip（必要なファイル）をダウンロードして、解凍しておいてください。
2. 名前変換したいテキストを含む吹きだしからテキストを消した画像を用意してください。使える画像形式は jpg か pngです。

   

   自作画像用意しない場合は、サンプル画像で作る体験だけしてみることもできます。
3. 自作体験のフォームから画像を読みこませてください。

   

4. ページ下部に出現したテキストエリアに台詞を記入して、変換したい語句（名前）は「※」と入力してください。
   利用フォントがしっぽりアンチックなので濁音文字も使えます。
   [注意] 半角引用符とバックスラッシュと半角@は使えません（全角なら使えます）。

   

5. 初期配置で左上に表示されているテキストを、ふきだしに収まる位置・サイズになるように、X位置（左右）・Y位置（上下）・文字大を調整してください。
   [注意]名前変換によって、名前部分は1～3文字で変動するので、多少ゆとりを持たせてください。

   

6. イイ感じに配置できたら画像下の[データ作成]をクリックし、表示されたテキストエリア内のコードをコピペして html ファイルとして保存してください。文字コードはUTF-8で。

   

7. コードをコピペしたHTMLファイルと、画像ファイルと、先にダウンロードしたdreamCanvasShipporiAntique.woff2（.ttf）と dreamCanvas-tategaki.jsを同じ階層（フォルダ）内に置いてください。

   

8. コードをコピペしたHTMLファイルをブラウザで表示して、画像やテキストが表示されているか、名前変換できるかを確認して、問題なければ完成です。

   
   ⇒完成サンプル

画像や入力したデータはサーバーや他のどこにも送信されたり保存されたりしません。 作成途中でも、ブラウザを閉じたりページを更新したりすると全て消えるので注意してください。

完成したもの（HTML/画像）をWebで公開して頂いても構いません。作成されたHTMLデータ（JavaScriptコードを含む）は自由に編集して構いません。公開における責任は負いません。 イベント等での頒布の際は同梱のフォントファイルやtategaki.jsのライセンス（dreamCanvas.txt参照）をご自身で今一度ご確認ください。

JS書ける人は myName というCookieを取得するコード書いてそのデータ使うのもいいですし、てっとりばやいのはHTMLのJSコード内に直接dream.phpの変換コード書くことです。 dream.phpのバージョンによってHTMLタグ込みで出力されるので、最新のバージョンを使ってください。 必ず引用符をつけることと、末尾「;」にしちゃわないこと（指定が続くので半角カンマ）に注意してください。

DreamViewerの場合

name = "{{NAME0}}", //★名前情報

PHPコードで書く場合

name = "<?php myName('0'); ?>", //★名前情報

名前の入力フォームについて以下三か所削除。

<!-- ▼変換フォーム -->
<p>
  <label>名前変換（3文字以下） <input type="text" value="ナマエ" size="10" maxlength="3" id="dreamName"></label>
  <button id="dreamNameChange" type="button">変換</button>
</p>

dreamName = document.getElementById('dreamName'),
dreamChange = document.getElementById('dreamNameChange'),

//名前変換
dreamNameChange.addEventListener('click', ()=>{
  dreamDraw();
});

DreamViewerを使う場合、dirフォルダ（作品用）に画像やフォントファイルを入れても.htaccess効いてると読み込めないので、フォントファイルやtategaki.jsはskinフォルダに、画像はdirフォルダ外に新たに画像用フォルダを作ったりして、各ファイルの読み込みパスを書き換えてください。

1箇所めの文字入れ分で、全体ソースをコピーしてHTMLファイルを作成してください。

引き続き、ふきだし内容の記述を書き換えて位置を調整し、再度[データ作成]ボタンをクリックしてください。2箇所め以降は文字入れデータだけコピーして、最初に作ったHTML内のコード内の▼文字入れデータ以降に書き足してください。

img.addEventListener("load", () =>{
    ctx.drawImage(img, 0, 0);
    //▼文字入れデータ
    fukidashi("1つ目のふきだし",200,20);
    fukidashi("2つ目のふきだし",10,20); //←足した
    fukidashi("3つ目のふきだし",130,50); // ←足した
});

現状のコードだと、できないことはないですが、ちょっと変更点が多いので（説明が）難しいです。JS分かる方は自由に改変してください。名前変換要らない画像であれば<img>で表示できます。

dreamCanvasShipporiAntiqueは、「しっぽりアンチック」をWebフォント用にコンバートしたファイルです。「ひらがな」「カタカナ」「アルファベット」「数字」「一部の記号など」「第一水準漢字 + 常用漢字」「第二水準漢字の中で私が独自チョイスした漢字」「濁音字に該当する外字」を含んでいます。（詳しくは同梱のdreamCanvas.txtを参照してください）

完全にJavaScriptに依存しているので、JavaScriptが使えない環境や、レガシーな環境だとなにも表示されません。フォールバックとして以下の対応が可能です。

[方法1] JavaScriptや<canvas>が非対応の環境には、名前変換しない画像を<img>で表示させる（名前変換あり画像と同じものだと、名前変換されるふきだし部分が空で表示されるので、画像が二種類必要です）。

<canvas id="dreamCanvas" width="500" height="300" data-src="名前変換あり画像"> 
  <img src="名前変換なし漫画画像" alt=">
</canvas>

[方法2] 表現したいものが「ストーリー」ならいっそ文字で書く

<canvas id="dreamCanvas" width="500" height="300" data-src="名前変換あり画像"> 
  男「昨日お会いした●●どのは元気にしておられるだろうか」
</canvas>

• Win: Chrome/Edge/Firefox
• iPhone Safari
• Android13 Chrome
• macbook でも動いていることをご連絡頂きました

• 同梱フォントの「ゃ」の濁点該当外字、他「!?」系の一部外字漏れ修正
• 文字色の変更 / フォントに丸ゴシックや明朝体も使えるように
• 画像上のテキストをドラッグドロップで位置調整できるように
• 複数の画像、複数の文字入れを一度にできるように
• クリスタのストーリエディタみたいに一括文字入れ
• 文字の滲み感修正