「メッセンジャー」タグアーカイブ

ブログでチャット風の会話を表示するCSS

先日の記事「電話番号間違ってますよ」がどうしても信じてもらえない! 内で、チャットのやりとりを表現したかったので、フキダシ会話っぽく見える CSS を書きました。

WordPress の場合は、[外観]-[カスタマイズ]-[追加CSS]に貼りつけてください。特定のポストでだけ使いたい場合は .post-9067 とかを全部の前につけます。

アイコンの画像はこのCSSの中に URL を書き込んであります。別のアイコンにしたければそこを変えてください。


.akky_conv {
padding-top: 1em;
}
.akky_conv li {
display: flex;
flex-direction: row;
max-width: 95%;
}
.akky_conv li div {
width: 32px;
height: 32px;
box-shadow: 2px 2px 0px #aaa;
flex-shrink: 0;
flex-grow: 0;
z-index: 1;
}
.akky_conv li:not(.me) div {
background:url('/akky/wp-content/uploads/2017/04/user-alt-1_0.png') center no-repeat;
background-color: #fcf;
}
.akky_conv li.me {
justify-content: flex-end;
}
.akky_conv li.me div {
background:url('/akky/wp-content/uploads/2017/04/user-alt-2.png') center no-repeat;
background-color: #cff;
order: 2;

position: relative;
bottom: -3em;
}
.akky_conv li p {
background-color: #ddd;
margin: 1em;
padding: 1em;
position: relative;
text-align: center;
}
.akky_conv li.me p{
order: 1;
}
/* 吹き出し */
.akky_conv li p:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
}
.akky_conv li:not(.me) p:before {
border-right: 12px solid #ddd;
border-bottom: 12px solid transparent;
top: 0px;
left: -12px;
}
.akky_conv li.me p:before {
border-left: 12px solid #ddd;
border-top: 12px solid transparent;
bottom: 0px;
right: -12px;
}

会話の方はこんなかんじ。右の発言の人には、li 要素に me クラスをつけます。


<ul class="akky_conv">
<li>
<div></div>
<p>左の人の発言</p>
</li>
<li class="me">
<div></div>
<p>右の人の発言と思いねえ</p>
</li>
</ul>

その結果

  • 左の人の発言

  • 右の人の発言と思いねえ

WaitChatter チャットの待ち時間に外国語の単語を覚えさせるMITの研究

WaitChatter は、ネットのメッセージサービスで相手の返答が無いなどの待ち時間を活用して、英単語などを覚えようという実験と、そのツールです。

チャット画面で、[Alt]+J を押すか下の部分をクリックすると、

英語-スペイン語の単語の組が示されます。(スペイン語はデフォルトがそうだったので。フランス語に切り替えることもできます)

その単語を「知ってたか」「知らなかったか」尋ねられるので、どちらか答えます。いくつかの閲覧が終わると、こんどはクイズのモードになり、

スペイン語に対する英語、または英語に対するスペイン語、を答えさせられます。「知らなかった」と答えた単語に関して何度か正しい回答をすると、

「この単語を覚えました」というメッセージがでます。

Chrome拡張のボタンを押すと、上のようにこれまでの学習の経過を見ることができます。

Chrome拡張機能は、Googleトーク 内でWaitChatter を動かすようになっていて、Gmail 内のチャットが Google Hangout に切り替わってる人は、Googleトークに戻さないと試すことができません。

切り替えても、こんなメッセージが出てきてしまうのですけれど。

GoogleトークにChrome拡張という組み合わせ、メジャーでもないしもうすぐ使えなくなってしまうようですが、実験としては組み込み安かったチャットサービスなのでしょうね。今は、メッセージの送信時にサードパーティーのソフトウェアに入出力を扱わせてくれるメッセージサービスもあまりないかもしれませんが、研究の結果学習の効果がある、ということになれば、相手の返信を待つ間に細切れに学習や仕事をする、みたいなのが普及したりするのかもしれません。

MITのデモ動画では、WiFiの接続待ちやアプリのデータ読み込み待ち、メールの(自動応答で返事が来ることがわかっている時とかの)返事待ち、に、単語クイズを1問2問できる、ような例を出しています。

待ち時間のあるツールやアプリで何といっても有効なのは広告でしょうけど、広告を見せる代わりに勉強させるような機能をつけることで、既存のツールがちょっと違う差別化できるという場合もでるのかも。