Chat UI
<h2>Chat Messages!</h2>
<div class="container myself">
<img src="http://placeimg.com/60/60/any" alt="Avatar" style="width:100%;">
<p class="hog">今の悩み、やりたいことを教えてください</p>
<span class="times time-right">18/02/02 11:00</span>
<button onclick="speak()">Speak</button>
</div>
<div class="container">
<img src="http://placeimg.com/100/100/any" alt="Avatar" class="right" style="width:100%;">
<p class="hog2">将来やりたい事が見つからないよ</p>
<span class="times time-left">18/02/02 11:01</span>
<button class="right" onclick="speak2()">Speak</button>
</div>
<div class="container myself">
<img src="http://placeimg.com/80/80/any" alt="Avatar" style="width:100%;">
<p>Sweet! So, what do you wanna do today?</p>
<span class="times time-right">18/02/02 11:02</span>
</div>
<div class="container">
<img src="http://placeimg.com/120/120/any" alt="Avatar" style="width:100%;">
<p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
<span class="times time-left">18/02/02 11:05</span>
</div>
<!--
<p>
<input id="text" type="text" size="60" value="吾輩は猫である。">
<p id="hog">母さん、おれおれ</p> <button id="play">音声読み上げ</button>
</p>
-->
/*
https://qiita.com/wks/items/a5dfae0909956a3002bd
http://jsdo.it/wakasamasao/webspeachapi1
http://an.hatenablog.jp/entry/2016/10/15/121700
*/
function speak() {
var text = document.querySelector(".hog").innerHTML;
console.log(text);
speechSynthesis.speak(new SpeechSynthesisUtterance(text));
}
function speak2() {
var text2 = document.querySelector(".hog2").innerHTML;
console.log(text2);
speechSynthesis.speak(new SpeechSynthesisUtterance(text2));
}
// document.getElementById("play").addEventListener("click", function( {
// // var text = document.getElementById("text").value;
// var text = document.querySelector('.hog').innerHTML;
// speak(text);
// });
// var tmp;
// function speak(text) {
// // 再生中の音声をキャンセル
// speechSynthesis.cancel(tmp);
// // 日本語音声で読み上げ
// var speech = new SpeechSynthesisUtterance();
// speech.lang = "ja-JP";
// speech.text = text;
// speechSynthesis.speak(speech);
// tmp = speech;
// }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
max-width: 800px;
padding: 0 20px;
min-height: 100vh;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
background: rgb(93, 122, 139);
background: linear-gradient(
135deg,
rgba(93, 122, 139, 0.2) 0%,
rgba(78, 147, 176, 0.8) 0%,
rgba(169, 240, 255, 0.3) 100%
);
color: #444;
}
h2 {
font-weight: 400;
font-size: 2rem;
}
.container {
width: 80%;
border: 1px solid #eee;
background-color: rgba(255, 255, 255, 0.1);
padding: 10px;
margin: 10px 0;
+ .container {
margin-top: 30px;
}
&.myself {
float: left;
border-radius: 8px 25px 8px 25px;
color: teal;
// background: #ffe;
}
&:not(.myself) {
float: right;
border: 1px solid #eee;
border-radius: 25px 8px 25px 8px;
color: tomato;
// background: #eff;
}
&::after {
content: "";
clear: both;
display: table;
}
img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
}
.times {
font-size: 85%;
color: #666;
&.time-right {
float: right;
}
&.time-left {
float: left;
}
}
button {
float: left;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.5);
padding: 4px 12px;
border-radius: 4px;
color: teal;
&.right {
float: right;
color: tomato;
}
}