Node.js 초보자가 Node.js + Watson Conversation에서 채팅봇을 구현해 보았습니다.
19660 단어 거친 c 집 t. 이오BluemixWatsonNode.js
처음에
기출의 기사가 많이 있는 느낌도 있습니다만, 로컬 환경에서도 움직일 수 있는 챗봇을 편하게 만들어 보았습니다. 이 기사에서는 Node.js + Socket.io를 사용하여 채팅 도구에 API를 통합하여 채팅 기능을 만드는 방법을 설명합니다.
※Watson Conversation의 개발 방법에 대해서는 여기를 참조해 주세요.
(정말은 Node-RED로 짜 보고 싶었는데, 샘플조차 잘 움직이지 않고 단념…
구성 정보
이번에는 아래와 같은 구성으로 만들고 있습니다. 아래는 모두 인스톨이 끝났다고 하는 전제로 진행해 갑니다.
· npm
· Node.js
· Express
· ejs
프로젝트 만들기
먼저 express exp01 -e ejs 에서 프로젝트를 만듭니다.
그런 다음 프로젝트 디렉토리로 이동하여 npm install 에 필요한 모듈을 프로젝트에 추가합니다.
이것만으로 아래와 같은 구성의 기본적인 프로그램을 작성할 수 있었습니다.
빨리 node bin/www 를 실행해 봅시다.
포트등을 변경하고 있지 않으면, http://localhost:3000 로 액세스 할 수 버립니다.
이런 화면이 생기면 일단 준비 작업은 완료입니다. 매우 간단합니다.
필요한 모듈 설치
그런 다음 Socket.io 및 watson-developer-cloud 를 추가합니다. package.json 의 dependencies 에 아래의 2행을 추가합시다.
"socket.io": "2.0.3",
"watson-developer-cloud": "2.39.2"
다시 npm install 를 실행합니다.
이제 필요한 모든 모듈이 있습니다.
API 호출 처리 포함
그런 다음 bin/www 를 편집합니다.
/**
* Create HTTP server.
*/
var server = http.createServer(app);
뒤에 아래 소스 코드를 추가합니다.
Conversation API를 사용하는 방법은 여기을 참조했습니다.
또한 Socket.IO 튜토리얼도 기반으로 합니다.
var io = require('socket.io').listen(server);
io.on('connection', function(socket){
var ConversationV1 = require('watson-developer-cloud/conversation/v1');
// Set up Conversation service.
var conversation = new ConversationV1({
url: 'https://gateway.watsonplatform.net/conversation/api',
username: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // ユーザー名を置き換えてください。
password: 'xxxxxxxxxxxx', // パスワードを置き換えてください。
path: { workspace_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }, // ワークスペースIDを置き換えてください。
version_date: 'YYYY-MM-DD'//何でもいいのかも？
});
var res = [];
// このページにアクセスしたときに、空のメッセージをConversationに投げる
conversation.message({}, processResponse);
// Conversationのレスポンスを取得する
function processResponse(err, response) {
if (err) {
console.error(err); // something went wrong
return;
}
// intentがマッチしたらコンソールに出力する
if (response.intents.length > 0) {
console.log('chat message', 'Detected intent: #' + response.intents[0].intent);
}
// 何らかの返答があれば、それをbotからの返答として全て返す(ループはjump to の時に必要)
for (var i = 0, len = response.output.text.length; i < len; i++) {
if(response.output.text[i] !== ''){
io.to(socket.id).emit('bot message', response.output.text[i]);
}
}
res[socket.id] = response;
}
//新しいメッセージを受信したときの動作
socket.on('chat message', function(msg){
//受信したメッセージをそのまま、チャット画面に表示
io.to(socket.id).emit('chat message',msg);
// 受信したメッセージをAPIに投げる
conversation.message({
input: { text: msg },
context : res[socket.id].context
}, processResponse);
});
});
덧붙여서, 유저명과 패스워드는 대시보드의 서비스 자격증명, 작업 공간 ID는 Conversation의 대시보드로부터, 자신이 만든 앱의 오른쪽 상단에 있다…를 클릭→view details로부터 참조 가능합니다.
마지막으로 /views/index.ejs 와 /stylesheets/style.css 를 각각 다시 씁니다.
index.ejs
<!doctype html>
<html>
<head>
<title>チャットボットテスト</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div class="chat-box">
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg).addClass('chat-hukidashi someone').wrap('<div />'));
});
socket.on('bot message', function(msg){
$('#messages').append($('<li>').text('ＱＡ botくん：'+msg).addClass('chat-hukidashi').wrap('<div />'));
});
});
</script>
</body>
</html>
style.css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin:auto 0; padding: 0; }
#messages li { padding: 5px 10px; display: block }
/* チャットレイアウト */
.chat-box {
width: 80%;
height: auto;
overflow: hidden; /*floatの解除*/
margin-bottom: 20px;
}
.chat-face {
float: left;
margin-right: -120px;
}
.chat-face img{
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-area {
width: 100%;
float: right;
}
.chat-hukidashi {
display: inline-block; /*コメントの文字数に合わせて可変*/
padding: 15px 20px;
margin-left: 120px;
margin-top: 8px;
margin-right: 20px;
border-radius: 10px;
position: relative;
background-color: #D9F0FF;
}
.chat-hukidashi:after {
content: "";
position: absolute;
top: 50%; left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-right: 10px solid #D9F0FF;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;}
.someone {
background-color: #BCF5A9;
}
.someone:after {
left: auto;
right: -8px;
border-right: none;
border-left: 10px solid #BCF5A9;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
이제 node bin/www를 다시 실행해 봅시다.
http://localhost:3000 에 액세스하면, 이런 식으로 Conversation과 대화를 할 수 있게 된다고 생각합니다.
이런 간단한 순서로, 챗봇같은 것이 생겼습니다. API의 이용의 용이성이 bluemix의 좋은 곳이지요.
농담이있어 매우 재미 있습니다. 여러분도 꼭 시험해 보세요.
Reference
이 문제에 관하여(Node.js 초보자가 Node.js + Watson Conversation에서 채팅봇을 구현해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/motuo/items/5d22512fd4d0be110508
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이번에는 아래와 같은 구성으로 만들고 있습니다. 아래는 모두 인스톨이 끝났다고 하는 전제로 진행해 갑니다.
· npm
· Node.js
· Express
· ejs
프로젝트 만들기
먼저 express exp01 -e ejs 에서 프로젝트를 만듭니다.
그런 다음 프로젝트 디렉토리로 이동하여 npm install 에 필요한 모듈을 프로젝트에 추가합니다.
이것만으로 아래와 같은 구성의 기본적인 프로그램을 작성할 수 있었습니다.
빨리 node bin/www 를 실행해 봅시다.
포트등을 변경하고 있지 않으면, http://localhost:3000 로 액세스 할 수 버립니다.
이런 화면이 생기면 일단 준비 작업은 완료입니다. 매우 간단합니다.
필요한 모듈 설치
그런 다음 Socket.io 및 watson-developer-cloud 를 추가합니다. package.json 의 dependencies 에 아래의 2행을 추가합시다.
"socket.io": "2.0.3",
"watson-developer-cloud": "2.39.2"
다시 npm install 를 실행합니다.
이제 필요한 모든 모듈이 있습니다.
API 호출 처리 포함
그런 다음 bin/www 를 편집합니다.
/**
* Create HTTP server.
*/
var server = http.createServer(app);
뒤에 아래 소스 코드를 추가합니다.
Conversation API를 사용하는 방법은 여기을 참조했습니다.
또한 Socket.IO 튜토리얼도 기반으로 합니다.
var io = require('socket.io').listen(server);
io.on('connection', function(socket){
var ConversationV1 = require('watson-developer-cloud/conversation/v1');
// Set up Conversation service.
var conversation = new ConversationV1({
url: 'https://gateway.watsonplatform.net/conversation/api',
username: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // ユーザー名を置き換えてください。
password: 'xxxxxxxxxxxx', // パスワードを置き換えてください。
path: { workspace_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }, // ワークスペースIDを置き換えてください。
version_date: 'YYYY-MM-DD'//何でもいいのかも？
});
var res = [];
// このページにアクセスしたときに、空のメッセージをConversationに投げる
conversation.message({}, processResponse);
// Conversationのレスポンスを取得する
function processResponse(err, response) {
if (err) {
console.error(err); // something went wrong
return;
}
// intentがマッチしたらコンソールに出力する
if (response.intents.length > 0) {
console.log('chat message', 'Detected intent: #' + response.intents[0].intent);
}
// 何らかの返答があれば、それをbotからの返答として全て返す(ループはjump to の時に必要)
for (var i = 0, len = response.output.text.length; i < len; i++) {
if(response.output.text[i] !== ''){
io.to(socket.id).emit('bot message', response.output.text[i]);
}
}
res[socket.id] = response;
}
//新しいメッセージを受信したときの動作
socket.on('chat message', function(msg){
//受信したメッセージをそのまま、チャット画面に表示
io.to(socket.id).emit('chat message',msg);
// 受信したメッセージをAPIに投げる
conversation.message({
input: { text: msg },
context : res[socket.id].context
}, processResponse);
});
});
덧붙여서, 유저명과 패스워드는 대시보드의 서비스 자격증명, 작업 공간 ID는 Conversation의 대시보드로부터, 자신이 만든 앱의 오른쪽 상단에 있다…를 클릭→view details로부터 참조 가능합니다.
마지막으로 /views/index.ejs 와 /stylesheets/style.css 를 각각 다시 씁니다.
index.ejs
<!doctype html>
<html>
<head>
<title>チャットボットテスト</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div class="chat-box">
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg).addClass('chat-hukidashi someone').wrap('<div />'));
});
socket.on('bot message', function(msg){
$('#messages').append($('<li>').text('ＱＡ botくん：'+msg).addClass('chat-hukidashi').wrap('<div />'));
});
});
</script>
</body>
</html>
style.css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin:auto 0; padding: 0; }
#messages li { padding: 5px 10px; display: block }
/* チャットレイアウト */
.chat-box {
width: 80%;
height: auto;
overflow: hidden; /*floatの解除*/
margin-bottom: 20px;
}
.chat-face {
float: left;
margin-right: -120px;
}
.chat-face img{
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-area {
width: 100%;
float: right;
}
.chat-hukidashi {
display: inline-block; /*コメントの文字数に合わせて可変*/
padding: 15px 20px;
margin-left: 120px;
margin-top: 8px;
margin-right: 20px;
border-radius: 10px;
position: relative;
background-color: #D9F0FF;
}
.chat-hukidashi:after {
content: "";
position: absolute;
top: 50%; left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-right: 10px solid #D9F0FF;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;}
.someone {
background-color: #BCF5A9;
}
.someone:after {
left: auto;
right: -8px;
border-right: none;
border-left: 10px solid #BCF5A9;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
이제 node bin/www를 다시 실행해 봅시다.
http://localhost:3000 에 액세스하면, 이런 식으로 Conversation과 대화를 할 수 있게 된다고 생각합니다.
이런 간단한 순서로, 챗봇같은 것이 생겼습니다. API의 이용의 용이성이 bluemix의 좋은 곳이지요.
농담이있어 매우 재미 있습니다. 여러분도 꼭 시험해 보세요.
Reference
이 문제에 관하여(Node.js 초보자가 Node.js + Watson Conversation에서 채팅봇을 구현해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/motuo/items/5d22512fd4d0be110508
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
그런 다음
Socket.io 및 watson-developer-cloud 를 추가합니다. package.json 의 dependencies 에 아래의 2행을 추가합시다."socket.io": "2.0.3",
"watson-developer-cloud": "2.39.2"
다시
npm install 를 실행합니다.이제 필요한 모든 모듈이 있습니다.
API 호출 처리 포함
그런 다음 bin/www 를 편집합니다.
/**
* Create HTTP server.
*/
var server = http.createServer(app);
뒤에 아래 소스 코드를 추가합니다.
Conversation API를 사용하는 방법은 여기을 참조했습니다.
또한 Socket.IO 튜토리얼도 기반으로 합니다.
var io = require('socket.io').listen(server);
io.on('connection', function(socket){
var ConversationV1 = require('watson-developer-cloud/conversation/v1');
// Set up Conversation service.
var conversation = new ConversationV1({
url: 'https://gateway.watsonplatform.net/conversation/api',
username: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // ユーザー名を置き換えてください。
password: 'xxxxxxxxxxxx', // パスワードを置き換えてください。
path: { workspace_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }, // ワークスペースIDを置き換えてください。
version_date: 'YYYY-MM-DD'//何でもいいのかも？
});
var res = [];
// このページにアクセスしたときに、空のメッセージをConversationに投げる
conversation.message({}, processResponse);
// Conversationのレスポンスを取得する
function processResponse(err, response) {
if (err) {
console.error(err); // something went wrong
return;
}
// intentがマッチしたらコンソールに出力する
if (response.intents.length > 0) {
console.log('chat message', 'Detected intent: #' + response.intents[0].intent);
}
// 何らかの返答があれば、それをbotからの返答として全て返す(ループはjump to の時に必要)
for (var i = 0, len = response.output.text.length; i < len; i++) {
if(response.output.text[i] !== ''){
io.to(socket.id).emit('bot message', response.output.text[i]);
}
}
res[socket.id] = response;
}
//新しいメッセージを受信したときの動作
socket.on('chat message', function(msg){
//受信したメッセージをそのまま、チャット画面に表示
io.to(socket.id).emit('chat message',msg);
// 受信したメッセージをAPIに投げる
conversation.message({
input: { text: msg },
context : res[socket.id].context
}, processResponse);
});
});
덧붙여서, 유저명과 패스워드는 대시보드의 서비스 자격증명, 작업 공간 ID는 Conversation의 대시보드로부터, 자신이 만든 앱의 오른쪽 상단에 있다…를 클릭→view details로부터 참조 가능합니다.
마지막으로 /views/index.ejs 와 /stylesheets/style.css 를 각각 다시 씁니다.
index.ejs
<!doctype html>
<html>
<head>
<title>チャットボットテスト</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div class="chat-box">
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg).addClass('chat-hukidashi someone').wrap('<div />'));
});
socket.on('bot message', function(msg){
$('#messages').append($('<li>').text('ＱＡ botくん：'+msg).addClass('chat-hukidashi').wrap('<div />'));
});
});
</script>
</body>
</html>
style.css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin:auto 0; padding: 0; }
#messages li { padding: 5px 10px; display: block }
/* チャットレイアウト */
.chat-box {
width: 80%;
height: auto;
overflow: hidden; /*floatの解除*/
margin-bottom: 20px;
}
.chat-face {
float: left;
margin-right: -120px;
}
.chat-face img{
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-area {
width: 100%;
float: right;
}
.chat-hukidashi {
display: inline-block; /*コメントの文字数に合わせて可変*/
padding: 15px 20px;
margin-left: 120px;
margin-top: 8px;
margin-right: 20px;
border-radius: 10px;
position: relative;
background-color: #D9F0FF;
}
.chat-hukidashi:after {
content: "";
position: absolute;
top: 50%; left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-right: 10px solid #D9F0FF;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;}
.someone {
background-color: #BCF5A9;
}
.someone:after {
left: auto;
right: -8px;
border-right: none;
border-left: 10px solid #BCF5A9;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
이제 node bin/www를 다시 실행해 봅시다.
http://localhost:3000 에 액세스하면, 이런 식으로 Conversation과 대화를 할 수 있게 된다고 생각합니다.
이런 간단한 순서로, 챗봇같은 것이 생겼습니다. API의 이용의 용이성이 bluemix의 좋은 곳이지요.
농담이있어 매우 재미 있습니다. 여러분도 꼭 시험해 보세요.
Reference
이 문제에 관하여(Node.js 초보자가 Node.js + Watson Conversation에서 채팅봇을 구현해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/motuo/items/5d22512fd4d0be110508
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
/**
* Create HTTP server.
*/
var server = http.createServer(app);
var io = require('socket.io').listen(server);
io.on('connection', function(socket){
var ConversationV1 = require('watson-developer-cloud/conversation/v1');
// Set up Conversation service.
var conversation = new ConversationV1({
url: 'https://gateway.watsonplatform.net/conversation/api',
username: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // ユーザー名を置き換えてください。
password: 'xxxxxxxxxxxx', // パスワードを置き換えてください。
path: { workspace_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }, // ワークスペースIDを置き換えてください。
version_date: 'YYYY-MM-DD'//何でもいいのかも？
});
var res = [];
// このページにアクセスしたときに、空のメッセージをConversationに投げる
conversation.message({}, processResponse);
// Conversationのレスポンスを取得する
function processResponse(err, response) {
if (err) {
console.error(err); // something went wrong
return;
}
// intentがマッチしたらコンソールに出力する
if (response.intents.length > 0) {
console.log('chat message', 'Detected intent: #' + response.intents[0].intent);
}
// 何らかの返答があれば、それをbotからの返答として全て返す(ループはjump to の時に必要)
for (var i = 0, len = response.output.text.length; i < len; i++) {
if(response.output.text[i] !== ''){
io.to(socket.id).emit('bot message', response.output.text[i]);
}
}
res[socket.id] = response;
}
//新しいメッセージを受信したときの動作
socket.on('chat message', function(msg){
//受信したメッセージをそのまま、チャット画面に表示
io.to(socket.id).emit('chat message',msg);
// 受信したメッセージをAPIに投げる
conversation.message({
input: { text: msg },
context : res[socket.id].context
}, processResponse);
});
});
<!doctype html>
<html>
<head>
<title>チャットボットテスト</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div class="chat-box">
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg).addClass('chat-hukidashi someone').wrap('<div />'));
});
socket.on('bot message', function(msg){
$('#messages').append($('<li>').text('ＱＡ botくん：'+msg).addClass('chat-hukidashi').wrap('<div />'));
});
});
</script>
</body>
</html>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin:auto 0; padding: 0; }
#messages li { padding: 5px 10px; display: block }
/* チャットレイアウト */
.chat-box {
width: 80%;
height: auto;
overflow: hidden; /*floatの解除*/
margin-bottom: 20px;
}
.chat-face {
float: left;
margin-right: -120px;
}
.chat-face img{
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-area {
width: 100%;
float: right;
}
.chat-hukidashi {
display: inline-block; /*コメントの文字数に合わせて可変*/
padding: 15px 20px;
margin-left: 120px;
margin-top: 8px;
margin-right: 20px;
border-radius: 10px;
position: relative;
background-color: #D9F0FF;
}
.chat-hukidashi:after {
content: "";
position: absolute;
top: 50%; left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-right: 10px solid #D9F0FF;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;}
.someone {
background-color: #BCF5A9;
}
.someone:after {
left: auto;
right: -8px;
border-right: none;
border-left: 10px solid #BCF5A9;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
Reference
이 문제에 관하여(Node.js 초보자가 Node.js + Watson Conversation에서 채팅봇을 구현해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/motuo/items/5d22512fd4d0be110508텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
