search
LoginSignup
31

More than 5 years have passed since last update.

posted at

updated at

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

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

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

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

スクリーンショット 2017-06-26 23.11.15.png

フォルダ構成

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

├── 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を使ってみよう

おわりに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
31