こんにちは！
デザイナーのひろきちです！
最近は簡単に手間かかってる感がでてるようにできるJSライブラリとかを探したりしていたのですが、ドストライクなJS見つけました。
これはゲームなどでよく使われる会話シーンを実装できるJSです！
クライアントワークに使えるかどうかはおいといて見つけた瞬間わくわくが止まらなかったのでとりあえず試しに使ってみようと思います。
さっそくソースコードです。
HTML
<script type="text/javascript" src="./message_view.js"></script> <section id="sample" class="sample001"> <div class="messageView" id="default"> <div class="mv-contents"> <p class="mv-name"></p> <div class="mv-comment"> <p class="val"></p> <p class="pointer"><img src="./img/m.gif" alt="" width="40px" /></p> </div> <p class="mv-image character"><img src="" alt=""/></p> </div> </div> </section>
HTMLでは「message_view.js」を読み込んで、会話の型としてのレイアウトを書くだけです。
.pointerにはメッセージの右下に表示されるロードの画像を入れておきます。
それ以外は空にしておいてjsから読み込みます。
JS
document.addEventListener("DOMContentLoaded", function() {
var message = new MessageViewer({
"data": [{
"side_class": "right",
"name": "未来電子うさぎ",
"message": "はじめまして！",
"img_url": "./img/usagi.png"
},
{
"message": "こんにちは！"
},],
"option": {
"loop": true
}
});
}, false);
jsでは会話の流れを書きます。
ここではオプションで会話がループするように設定しています。
cssは公式からソースコードをコピペするだけでOKなので今回は省いておきます。
そしてこちらがデモです▼
メッセージ部分をクリックすると会話が進みます。
公式サイトでいくつかパターンも公開されていて対話式や小説風になんかもできます。
一応対話式のも作ってみました。
JS
document.addEventListener("DOMContentLoaded", function() {
var message = new MessageViewer({
"data": [{
"side_class": "right",
"name": "未来電子うさぎ",
"message": "はじめまして！",
"img_url": "./img/usagi.png"
},
{
"message": "こんにちは！僕は未来電子の非公式マスコットキャラクター未来電子うさぎだよ。非公式だよ。"
},
{
"side_class": "left",
"name": "？？？",
"message": "まてまてー、俺こそが真のマスコットキャラクターだ！",
"img_url": "./img/usagi3.png"
},
{
"side_class": "right",
"name": "未来電子うさぎ",
"message": "だ、、だれだお前は！",
"img_url": "./img/usagi.png"
},
{
"side_class": "left",
"name": "ニセ未来電子うさぎ",
"message": "はははー俺は「ニセ未来電子うさぎ」様だー",
"img_url": "./img/usagi2.png"
}],
"option": {
"loop": true
}
});
}, false);
デモがこちら▼
こんな感じのも簡単に作れちゃいます。
なにに使うかはわかりませんがかなり使えそうな気がしますね！
また楽しそうなJSライブラリを見つけたら紹介しようと思います！
では！
ソースコードは公式サイトから！
http://webcyou.com/message_view_js/demo/
参考サイト
