http://q.hatena.ne.jp/1520289627 の質問の続きです。
a-kuma3様の回答によって、たとえばテキストエリアに小説を下のように書くと
J尼「日本ニ、軽クテ重イプレゼント、アリマス」(笑)左
別のテキストエリアに、以下のようにJSONの表現に置換してくれる
{
"name":"J",
"face":"laugh",
"text":"日本ニ、軽クテ重イプレゼント、アリマス",
"pos":"left"
},
プログラムまでは作りました。
Web版 http://quiz.minibird.jp/conversation/bmiquiz_manga/bmiquiz_manga.html
DL版 http://quiz.minibird.jp/conversation/bmiquiz_manga.zip
ここまできたら、完全にマンガにして表示させたいのですが、最後の1手がわかりません。
詳しい方、教えていただけないでしょうか。よろしくお願いいたします。
前の回答のコメントに書いた中にある
//会話作成関数(JSONデータ、出力先) function create_conversation(json, dest)
は、やっつけで作ったものですが、幸いにして使いまわせます。
エディタの HTML にある、関数 rep() の末尾を書き換えます。
function rep() { ... str="[\n"+str+"\n]\n"; $('AFTER').value=str; // $('output').innerHTML =str; 元の文字列で表示してたやつ // ここから追加 let output = $('output'); output.innerHTML = ""; create_conversation(JSON.parse(str), output); }
あと、index.js の文字コードが Shift_JIS になっているので、UTF-8 に変換します。
文字コードが Shift_JIS のままだと、キャラの名前が文字化けします。
結果が JSON の文字列じゃなくなったので、id="output" に指定している width: 90% は、外しても良いかも、ですね。
2018/03/07 15:20:00# クイズよりは得意、かな :-)
a-kuma3様、その後、キャラクター(I穂)を増やし、表情も増やしました。
2018/03/07 17:56:36width: 90%も外しました。本当にありがとうございます!!
クイズの方も、ぜひ回答いただければと思います。
今回は正解を、このソフトで作ったサイトでも示す予定です。