ブラウザ上でキャラクターに、マンガのように吹き出しで会話を表示させたいと思います。
セリフのデータを与えると、その文字を図のように次々、画面に表示させます。
可能であれば、キャラクターの表情も変えられるともっといいです。
キャラクターは固定(たとえば決まった10名しか使わない)でOKですが、その画像はこちらで指定したいです。
flashは使わないとすると、どのような方法で実現すればいいか、だいたいの方針を教えてください。
よろしくお願いいたします。
(あるいは、すでに便利なWebサービスがありますか？)
ベストアンサー
-
a-kuma3
満足1000pt
Flash なしなら、HTML をプログラムで書きだす、でしょうか。
CSS で吹き出しを作って、データは javascript で書き出します。
"css 吹き出し 会話" でググると、いろいろと見つかります。
例えば、こんなの。
https://moriawase.net/kaiwa-text
そこの例では、ひとつのセリフがこんな感じで書かれます。<div class="balloon">
<figure class="balloon-image-left">
<img src="画像のパス（URL）" alt="画像名">
<figcaption class="balloon-image-description">
人の名前や画像の説明
</figcaption>
</figure>
<div class="balloon-text-right">
<p>
吹き出しの中のテキスト
</p>
</div>
</div>データとして置き換えたいところは、赤字にしたところでしょうか。
キャラクターの数は決まっているので、「画像の URL」は CSS にできます。
あと、表情の指定も。Ｊ尼「日本ニ、軽クテ重イプレゼント、アリマス」
を、こんな感じに展開します。
<div class="balloon">
<figure class="balloon-image-left">
<div class="charactor J-normal"></div>
<figcaption class="balloon-image-description">
Ｊ尼
</figcaption>
</figure>
<div class="balloon-text-right">
<p>
日本ニ、軽クテ重イプレゼント、アリマス
</p>
</div>
</div>データは、JSON と言われる形式にしておくのが良いかな、と思います。
こんな感じで。<script type="text/serif"> [ { "name": "J", "face": "normal", "text": "日本ニ、軽クテ重イプレゼント、アリマス", "pos" : "left" }, { "name": "B", "face": "normal", "text": "何なの？", "pos" : "right" }, ... { "name": "J", "face": "wink", "text": "コノプレゼント、何カ、ワカリマスカ？", "pos" : "left" } ] </script> -
lionfan2その他の回答
この質問へのコメント
質問の情報
- 登録日時
- 2018-03-06 07:40:27
- 終了日時
- 2018-03-06 16:39:04
- 回答条件
- 1人1回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…
匿名質問者
1
1
-
不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者11
-
日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者
-
共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者2
-
内定してほしいポケモンはいますか？匿名質問者