はじめに
デモ用に作ったNode-REDツンデレチャット、今後も使うかもしれないのでもったいない精神で置いておきます。
環境
Node-RED on Bluemix
手順
まず、どこでもいいのでNode−REDの環境をご用意ください。
そこに、いつものChatのコードをインポート。
次に、このチャットをツンデレ仕様にします。
ツンデレノード作成
チェンジノードをいれて、以下をセットするだけ。
チャットしてみる
ツンデレになった気持ちで、嫌い！と罵倒してみる。
するとチャット画面には、、、
改良
社内の女性社員から、
ツンデレ感を出す例文であれば
「嫌い」→「好き」よりも、逆の例の方がしっくりくるかもしれませんね。
ただ気になってアドバイスしただけなんだからねっ！
べ、別に中嶋さんの事なんて好きじゃないんだから！
とご指摘いただいたので、ツンデレノードに変換辞書を追加。
上記の文を入力すると、
格段に胸キュン度が高まった気がします。更に改良点求む。
コード
ツンデレVER2
[{
"id": "479e7e8b.4423",
"type": "websocket-listener",
"path": "/ws/chat",
"wholemsg": "false"
}, {
"id": "a3cc8311.624988",
"type": "websocket in",
"z": "7f773501.8088cc",
"name": "",
"server": "479e7e8b.4423",
"client": "",
"x": 217,
"y": 169,
"wires": [
["fecc51c7.0da528"]
]
}, {
"id": "54493aa8.591264",
"type": "function",
"z": "7f773501.8088cc",
"name": "",
"func": "delete msg._session;\n\nreturn msg;\n\n",
"outputs": 1,
"noerr": 0,
"x": 575,
"y": 166,
"wires": [
["bd61bb46.61a2d8"]
]
}, {
"id": "bd61bb46.61a2d8",
"type": "websocket out",
"z": "7f773501.8088cc",
"name": "",
"server": "479e7e8b.4423",
"x": 728,
"y": 166,
"wires": []
}, {
"id": "940713f0.af888",
"type": "http in",
"z": "7f773501.8088cc",
"name": "",
"url": "/chat",
"method": "get",
"swaggerDoc": "",
"x": 225,
"y": 237,
"wires": [
["930606f8.e42ed8"]
]
}, {
"id": "930606f8.e42ed8",
"type": "template",
"z": "7f773501.8088cc",
"name": "",
"field": "",
"fieldType": "msg",
"syntax": "mustache",
"template": "<head>\n <meta name=\"viewport\" content=\"width=320, initial-scale=1\">\n <title>Chat</title>\n</head>\n\n<body>\n <div id=\"wrapper\">\n <div id=\"chat_box\" class=\"content\"></div>\n\n <div id=\"footer\">\n <div class=\"content\">\n <input type=\"text\" id=\"user\" placeholder=\"Who are you?\" />\n <input type=\"text\" id=\"message\" placeholder=\"What do you want to say?\" />\n <input type=\"button\" id=\"send_btn\" value=\"Send\" onclick=\"sendMessage()\">\n </div>\n </div>\n </div>\n</body>\n\n<script type=\"text/javascript\">\n var wsUri = \"ws://{{req.headers.host}}/ws/chat\";\n var ws = new WebSocket(wsUri);\n\n function createSystemMessage(message) {\n var message = document.createTextNode(message);\n\n var messageBox = document.createElement('p');\n messageBox.className = 'system';\n\n messageBox.appendChild(message);\n\n var chat = document.getElementById('chat_box');\n chat.appendChild(messageBox);\n }\n\n function createUserMessage(user, message) {\n var user = document.createTextNode(user + ': ');\n\n var userBox = document.createElement('span');\n userBox.className = 'username';\n userBox.appendChild(user);\n\n var message = document.createTextNode(message);\n\n var messageBox = document.createElement('p');\n messageBox.appendChild(userBox);\n messageBox.appendChild(message);\n\n var chat = document.getElementById('chat_box');\n chat.appendChild(messageBox);\n }\n\n ws.onopen = function(ev) {\n createSystemMessage('[Connected]');\n };\n\n ws.onclose = function(ev) {\n createSystemMessage('[Disconnected]');\n }\n\n ws.onmessage = function(ev) {\n var payload = JSON.parse(ev.data);\n createUserMessage(payload.user, payload.message);\n\n var chat = document.getElementById('chat_box');\n chat.scrollTop = chat.scrollHeight;\n }\n\n function sendMessage() {\n var user = document.getElementById('user');\n var message = document.getElementById('message');\n\n var payload = {\n message: message.value,\n user: user.value,\n ts: (new Date()).getTime()\n };\n\n ws.send(JSON.stringify(payload));\n message.value = \"\";\n };\n</script>\n\n<style type=\"text/css\">\n * {\n font-family: \"Palatino Linotype\", \"Book Antiqua\", Palatino, serif;\n font-style: italic;\n font-size: 24px;\n }\n\n html, body, #wrapper {\n margin: 0;\n padding: 0;\n height: 100%;\n }\n\n #wrapper {\n background-color: #ecf0f1;\n }\n\n #chat_box {\n box-sizing: border-box;\n height: 100%;\n overflow: auto;\n padding-bottom: 50px;\n }\n\n #footer {\n box-sizing: border-box;\n position: fixed;\n bottom: 0;\n height: 50px;\n width: 100%;\n background-color: #2980b9;\n }\n\n #footer .content {\n padding-top: 4px;\n position: relative;\n }\n\n #user { width: 20%; }\n #message { width: 68%; }\n #send_btn {\n width: 10%;\n position: absolute;\n right: 0;\n bottom: 0;\n margin: 0;\n }\n\n .content {\n width: 70%;\n margin: 0 auto;\n }\n\n input[type=\"text\"],\n input[type=\"button\"] {\n border: 0;\n color: #fff;\n }\n\n input[type=\"text\"] {\n background-color: #146EA8;\n padding: 3px 10px;\n }\n\n input[type=\"button\"] {\n background-color: #f39c12;\n border-right: 2px solid #e67e22;\n border-bottom: 2px solid #e67e22;\n min-width: 70px;\n display: inline-block;\n }\n\n input[type=\"button\"]:hover {\n background-color: #e67e22;\n border-right: 2px solid #f39c12;\n border-bottom: 2px solid #f39c12;\n cursor: pointer;\n }\n\n .system,\n .username {\n color: #aaa;\n font-style: italic;\n font-family: monospace;\n font-size: 16px;\n }\n\n @media(max-width: 1000px) {\n .content { width: 90%; }\n }\n\n @media(max-width: 780px) {\n #footer { height: 91px; }\n #chat_box { padding-bottom: 91px; }\n\n #user { width: 100%; }\n #message { width: 80%; }\n }\n\n @media(max-width: 400px) {\n #footer { height: 135px; }\n #chat_box { padding-bottom: 135px; }\n\n #message { width: 100%; }\n #send_btn {\n position: relative;\n margin-top: 3px;\n width: 100%;\n }\n }\n</style>\n",
"x": 391,
"y": 237,
"wires": [
["6074165e.fc8278"]
]
}, {
"id": "6074165e.fc8278",
"type": "http response",
"z": "7f773501.8088cc",
"name": "",
"x": 534,
"y": 237,
"wires": []
}, {
"id": "fecc51c7.0da528",
"type": "change",
"z": "7f773501.8088cc",
"name": "ツンデレ",
"rules": [{
"t": "change",
"p": "payload",
"pt": "msg",
"from": "嫌い",
"fromt": "str",
"to": "好き",
"tot": "str"
}, {
"t": "change",
"p": "payload",
"pt": "msg",
"from": "好き",
"fromt": "str",
"to": "嫌い",
"tot": "str"
}, {
"t": "change",
"p": "payload",
"pt": "msg",
"from": "べ、別に",
"fromt": "str",
"to": "ホントは",
"tot": "str"
}],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 400.5,
"y": 167.5,
"wires": [
["54493aa8.591264"]
]
}]