設置・改造ガイド

うちの子 Webマスコット / 試作 v0.1

まず、どのファイルを開く？

見本を見るなら index.html をブラウザで開きます。画像とセリフを変えるなら mascot/config.js をテキストエディタで開きます。編集する前に、このガイドの該当手順を確認してください。

はじめに

このZIPは販売前の試作 v0.1です。index.html をブラウザで開くと見本が動きます。ZIPは必ず解凍してください。PCでテキストファイルを編集し、サイトへファイルをアップロードできる方向けです。

1．最初に見本を開く

index.htmlをChrome・Edge・Firefox・Safariなどで開き、キャラを押してください。3つの表情とセリフが順番に変わります。動作確認対象は今後確定します。WordPress・ノーコードサービス・OBSへの導入はこの試作の対象外です。

2．画像を入れる

mascot/images/ に自分のPNGを入れます。推奨：背景透過・360×360px以上の正方形。表情差分は同じキャンバスサイズ・位置にそろえると切り替えが自然です。ファイル名は normal.png / happy.png / surprise.png にすれば設定変更不要です。写真など正方形でない画像も縦横比を保って枠内に収まります。

3．セリフと画像を変える

mascot/config.js をVS Codeなどのプレーンテキストエディタで開き、textの引用符の中を変更します。画像名を変えた場合はimageも変更します。日本語を使えます。引用符やカンマを消さないでください。セリフ内の半角ダブルクォートは避けると簡単です。HTMLタグは使えず、文字として表示されます。

画像1枚で使う

states の中を次の1行にします。押しても同じセリフ・画像のままです。画像を1枚のままセリフだけ変える場合は、同じimageを指定した行を複数用意してください。

states: [
  { image: "mascot/images/normal.png", text: "こんにちは！" }
]

4．サイトに組み込む

最初は設置先のHTMLをバックアップします。そのHTMLと同じ階層に mascot フォルダごとコピーしてください。HTMLの </head> の直前に次の3行を貼ります。

<link rel="stylesheet" href="mascot/mascot.css">
<script src="mascot/config.js" defer></script>
<script src="mascot/mascot.js" defer></script>

表示位置を選ぶ

ページの表示したい位置に <div data-uchinoko></div> を1つ貼ります。この部品はページ内に1体だけ設置できます。元に戻す場合は追加した3行とdivを削除してください。別階層のページに設置するときはlink・scriptのパスとconfig.js内の画像パスを、設置先HTMLから見た位置に合わせます。

5．見た目を変える

config.js の size は横幅80〜320px、color は吹き出しの背景色、animate は true（動く）/ false（止める）です。暗い背景色を選ぶと白い文字が読みやすくなります。端末の「視差効果を減らす」設定が有効な場合は動きを止めます。画面の動き停止操作は再読込すると初期設定へ戻ります。

6．公開する

設置先HTMLとmascotフォルダを同じ構成のままサーバーへアップロードします。既存サイトの公開先を使えますが、サーバー費用等は別途です。手元の見本だけならサーバー不要です。公開後も実際のURLから確認してください。

困ったとき

画像が出ない：画像名・拡張子・大文字小文字・相対パスを確認。反応しない：config.jsの引用符とカンマ、3つの読み込み行、ブラウザのJavaScript設定を確認。変更が反映されない：保存・アップロード後に再読込。ページ全体がおかしい：バックアップへ戻し、まず見本が動くか確認。既存サイトのCSSが強く指定されていると見た目に影響する場合があります。スマホで動かない場合も、まず公開URLとファイル配置を確認してください。

利用条件（試作）

はねまるによる動作確認・改造用の試作品です。販売版の利用条件は未確定です。サンプルのミント色キャラは本キット用のオリジナル図形素材です。第三者の画像を使用する場合は使用権限を確認してください。公開サイトではHTML/CSS/JS・画像を閲覧者が取得できるため、秘密情報を入れないでください。

販売前に残っている確認

PC・スマホの各対象ブラウザでの実機確認、初心者による設置テスト、サンプルキャラの採用判断、商用利用・改造・再配布の規約確定、サポート方針の確定。設置代行や個別サイトの改造は商品に含めない想定です。

仕組みを知りたい人へ：ファイルの役割

index.html：見本のページ。JavaScriptを読み込み、表示場所を用意します。
mascot/config.js：設定表。画像の場所、セリフ、大きさ、色を指定します。
mascot/mascot.js：動かす係。設定を読み、画像や吹き出しを作り、クリックに反応します。
mascot/mascot.css：見た目の指定。配置や吹き出し、アニメーションを担当します。
mascot/images/：キャラクター画像の置き場です。

<div data-uchinoko></div> は設置場所の目印です。div自身が処理を呼ぶのではなく、mascot.jsが目印を探して、その中にキャラを表示します。scriptのdefer指定により、HTMLを読み終えてからconfig.js → mascot.jsの順で実行します。