人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【B美クイズ専門エディタを作りたい】
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手がわかりません。
詳しい方、教えていただけないでしょうか。よろしくお願いいたします。

●質問者: lionfan2
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●1000ポイント ベストアンサー

前の回答のコメントに書いた中にある

 //会話作成関数(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 のままだと、キャラの名前が文字化けします。


lionfan2さんのコメント
a-kuma3様、本当にありがとうございます!! それではこれから取り組みます、 index.jsはUTF-8 に変換しました。もう直します。

lionfan2さんのコメント
akuma3様、動きました。今回は本当にありがとうございました!! Web版 http://quiz.minibird.jp/conversation/bmiquiz_manga/bmiquiz_manga.html

a-kuma3さんのコメント
結果が JSON の文字列じゃなくなったので、id="output" に指定している width: 90% は、外しても良いかも、ですね。 # クイズよりは得意、かな <tt>:-)</tt>

lionfan2さんのコメント
a-kuma3様、その後、キャラクター(I穂)を増やし、表情も増やしました。 width: 90%も外しました。本当にありがとうございます!! クイズの方も、ぜひ回答いただければと思います。 今回は正解を、このソフトで作ったサイトでも示す予定です。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ