LINE風チャット画面を作った

ぬいぐるみに詰まっているところを話しかけると、問題点が整理されて問題解決ができるという手法があるけれど、返事が返ってこないのはつまらないので気軽に話しかけられるチャットボットを作成した

作成したのはChromeExtention
ボタンを押すとチャット画面が出てきて話しかけられるような仕組みになっている

フォルダ構成

以下のようにファイルを配置する
jqueryやbootstrapをローカルにダウンロードして配置している

├── css
│   └── popup.css
├── images
│   ├── background_sky.jpg
│   ├── bot_128.png
│   ├── bot_16.png
│   └── bot_48.png
├── lib
│   ├── css
│   │   ├── bootstrap-theme.min.css
│   │   ├── bootstrap-theme.min.css.map
│   │   ├── bootstrap.min.css
│   │   └── bootstrap.min.css.map
│   └── js
│   ├── bootstrap.min.js
│   └── jquery.min.js
├── manifest.json
├── popup.html
└── popup.js

bot_16.pngなどのアイコンはこのサイトからとりました →　icooon-mono
背景の空（？）はそれっぽい画像を適当に拾ってきました

各ファイル

マニフェストファイル
主にChromeExtentionの設定ファイルのようなもの

manifest.json

{
    "name": "Chat Bot",
    "version": "1.0",
    "manifest_version": 2,
    "description": "気軽な話し相手",
    "content_security_policy": "script-src 'self'; object-src 'self'",
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": "images/bot_16.png"
    },
    "permissions": [
        "tabs",
        "http://*/"
    ],
    "icons": {
        "16": "images/bot_16.png",
        "48": "images/bot_48.png",
        "128": "images/bot_128.png"
    }
}

ChromeExtentionのpopupのメイン

popup.html

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>ChatBot</title>
    <link rel="stylesheet" href="lib/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="css/popup.css" type="text/css">
    <script src="lib/js/jquery.min.js"></script>
    <script src="lib/js/bootstrap.min.js"></script>
    <script src="popup.js"></script>
</head>

<body>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h1 class="panel-title">Chat Bot</h1>
        </div>
        <div class="panel-body">
            <div id='chat'></div>
        </div>
    </div>
    <div class='inputText'>
        <textarea rows="5" id="txt" class="form-control" placeholder="Shift+Enterで送信"></textarea>
        <button type="button" class="btn btn-info chat-btn">送信</button>
    </div>
</body>

</html>

popup.css

body {
    width: 400px;
    margin: 0px;
    min-width: 357px;
    overflow-x: hidden;
    font-family: "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic Pro", "Lucida Grande", Verdana, Arial, Meiryo, "メイリオ", sans-serif;
}

.panel {
    margin: 0;
    background-image: url("../images/background_sky.jpg");
}

.panel-body {
    height: 400px;
    overflow: auto;
}

.chatBox {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.chatBalloon {
    display: inline-block;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
    background-color: white;
}

.bot {
    float: left;
    display: inline-block;
}

.usr {
    float: right;
    background-color: Lime;
}

.inputText {
    text-align: right;
}

popup.js

function getBotSpeech() {
　　　　　　　　// 入力したテキストを取得
    var inputText = $('#txt').val();

　　　　　　　　// 入力したテキストをチャット画面に表示
    var messageMine = $("<div class='chatBox'><div class='usr chatBalloon'>" + esc(inputText) + "</div></div>");
    $('#chat').append(messageMine);
　　　　　　　　
　　　　　　　　　// botの返答を取得＆表示
    $.ajax({
        // パラメータで文言を送信
        url: "ここにbotの文言を取得するURLを入力?text=" + encodeURI(inputText),
        type: "GET",
        async: true,
        cache: false
    }).done(function(data) {
　　　　　　　　　　　　　　　　// 返答をチャット画面に表示
        var chat = $("<div class='chatBox'><div class='bot chatBalloon'>" + esc(data) + "</div></div>");
        $('#chat').append(chat);
    }).fail(function(data) {}).always(function(data) {});
　　　　　　　　
    //返答したらテキストボックスは空に
    $('#txt').val('').focus();
}

function esc(s) {
    return s.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;');
}

function clickHandler(e) {
    getBotSpeech();
}

function textareaHandler(e) {
    if (!(e.keyCode == 13 && e.shiftKey)) return;
    getBotSpeech();
}

document.addEventListener('DOMContentLoaded', function() {
　　　　// 送信ボタンをおしたとき
    document.querySelector('.chat-btn').addEventListener('click', clickHandler);
　　　　// Shift + Enterでも送信できるように
    document.querySelector('#txt').addEventListener('keyup', textareaHandler);
});

botの作成

botは以下の本を参考に作りました
とても丁寧に記述してあり、初心者の私でも作成することができました
Pythonによるスクレイピング&機械学習開発テクニック BeautifulSoup,scikit-learn,TensorFlowを使ってみよう

おわりに

アイコンをつけられたら完璧なんですが・・・

Chrome上ですぐにできるLINE風チャット画面を作った

LINE風チャット画面を作った

フォルダ構成

各ファイル

botの作成

おわりに