「チャット」タグアーカイブ

ブログでチャット風の会話を表示する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>

その結果

  • 左の人の発言

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

「電話番号間違ってますよ」がどうしても信じてもらえない!

番号間違いがズレつづけていく(Wrong number gone wrong)。スマートフォンのメッセージアプリのスクリーンショットの形で英語で掲載されていたものです。おもしろかったので翻訳させてもらいました。

始まりは、娘を持つどこかのお母さんからのメッセージ。

  • 帰りに牛乳とランチを買ってきてくれるかしら

  • 電話番号をお間違えかと。私は既に家にいます。

  • ふざけてないでお店に戻ってくれない?

  • いいでしょう… でも… あなたの番号は間違ってるんです… お店には行きません。

  • ジェス、それを準備しないと、ブラッドとあなたを今夜の映画には連れていきませんよ。

  • 牛乳、ターキーにハム。

  • 牛乳とターキーは美味しそうですが、ハムは気持ち悪いな… 何の映画を見に行くの?

  • いつからハムが嫌いになったの? それはあなた次第でいいけど。確かあなたボスベイビーを観に行きたがってたでしょ?

  • ブラッドのご両親は帰りあなたを乗せてきてくれるの? それとも迎えに行く必要がある?

  • ええ… まあそこそこイケる、と言ってる人も知り合いに何人かいますよその映画… ハムはずっと嫌いですよ。あなたはなんだか私の話を聞いてないんじゃないかと思うんですけど。

  • そうですね。今晩迎えに来てくれるときに、ついでに店によってくださいな?

  • あなた変な子供ね。

  • そこまでわかってるというなら…

  • そういえば… もし誰かから間違いメッセージを貰ったら、知らない誰かのことを混乱させたりできるだろうなあなんて、よく夢見てたものです。

  • 今日がその日だったんですね…

  • OK?

  • その時のためにいろんなアイデアは持ってたんだけど、どれも大人向けのものなんですよね。

  • それでお店には行ったの?

  • まず水を飲んでみて、ああ、あなたはあなたの子供にメッセージしているんだなと少しずつ気づいてきた次第で。

  • あなたのお父さんは30分以内に家に戻ってランチするわよ。

  • 私はウィスコンシンに住む35歳の男です。誓って。あなたにもっとひどいイタズラで返すことだってできたけど、子供が絡んでることなので控えたんですよ。

  • 番号が間違ってます

  • ふざけるのは止めなさい。かわいくないわ。

  • これが私と妻です… あなたの夫はランチが無いことをひどく怒ると思いますよ。

  • ジェス、お父さんのために買い物に行ってきて。本気よ。今夜の映画もキャンセルするわよ

  • 1から10の数字から一つ選んでください

  • 誰これ? ブラッドの家族? これ以上続けるなら彼の両親に電話するわよ。

  • ああ、やめてください。あなたは電話番号を間違ってるんです。

  • 信じられないというなら、私に電話してください。妻や5歳の息子とだって話させますよ。もう一人の息子はまだ8か月なんでね。まだダーダーしか言えないんです。あなたは彼のダーダーじゃないし

  • 今彼の母親と電話で話したところ。映画は無し。今晩は他の姉妹の分のお手伝いも交替すること。

  • ねえ。私はとんでもなく真剣なんです… 電話番号が違うんです

  • ジェスにひどいことしないであげてください。彼女は今何が起こってるか、ほんとうに思いもよらないんですから。

  • 私のことが信じられないなら電話してください。

  • 本当に、このひどい会話は本来私には関係のないことで、今日たまたま休みで時間があって、携帯もフル充電だけど

  • あなたと遊ぶ時間はおしまい。数時間後に会いましょう。

  • 会えっこない。

  • あと… 今夜はブラッドの家に泊まってもいいかな…

  • CC(デート)はキャンセルです。もううんざり。

  • 私のクレジットカード(CC)をキャンセルしたりはしませんよ… それなしでどうやって生活しろっていうのさ?

  • (切れてる)怒ってる。お父さんはあなたが家にいないと言ってるから、店にいた方がいいわね。

  • 私は学校にいるはずじゃないの?

  • あなたどこにいるの?

  • ええ… あなたの言うとおりお店へ行って、ターキーと牛乳はゲットしましたよ。前にも言ったとおり、ハムは嫌いなんで買ってません。

  • パンも必要だったなってことで、今は妻が店へ向かってるところです。彼女に買ってきてもらいたいものありますか?

  • まさかまたドラッグやってるの? 家から追い出すわよ。間違っても妹に渡したりしないでね。

  • ははは。いや、2011年からこのかた、ドラッグはやってませんよ。

  • まあでもそれは、あなたの知ったこっちゃないですよね

  • 私はあなたの母親よ、何ひとつ面白くありません。あなた2011年には11歳だったのよジェス??? 今夜は長い長い話し合いになるわね。

  • 違います。私は2011年からドラッグは止めてて。ドラッグと飲酒がひどかったのは2000年と2001年のこと

  • あと参考までに… 一言申し添えておくと… ちょっと前からこの会話は本物じゃないんじゃないかと思ってて… 私の知ってる誰かが私のことからかってるのかなと… だからこの会話を続けてたというのもあって

  • (切れてる)と食べ物は届いてなかったわ。ファック

  • ろくでなしの嫌な奴。会社から家に帰ったら娘が寝てるのを見つけたわ。なるほど電話番号間違いね。夫は心(切れてる)

  • なんで私がろくでなし? 何度も何度も番号が違うって言ったし、私と妻の写真だって送ったでしょう

  • あなたの言い方は誠実に思えませんでした。あなたは私に電話することだってできたのに、子供っぽく振る舞った。

  • あなたみたいなやつと結婚する人がいるなんて信じられない。

  • 信じられないなら電話してください、って言いましたよ私は

  • 何度もね。どんな種類の親が、子供の電話番号を知らないって言うんです。私のせいじゃないし、間抜けはあなたでしょう

  • なんですって? 覚えてるけど打ち間違えて負け犬に送っちゃっただけよ!

  • なんてこった。すごい体験だな… これ絶対にネットにアップするよ

  • いいわよすれば? 素晴らしいわね。先週は母が亡くなって今日はこれ。エロ動画でも見た後にアップすればいいのよこの異常者

  • あなたみたいなタイプは絶対に変わらないわ。

  • 私は私自身のことは気に入ってますよ。なぜ変わらなきゃならないんだ

  • とにかくそうさせてもらうよ。これはネットで掘りあてた金鉱みたいなものだ

  • あなた自分の母親にもこんな調子なの?

  • うちの母は私の番号を知ってるよ…

  • そういえば… ブラッドとわたしはまだ今夜の映画に行けるの?

  • クソくらえ。

午前11時過ぎに始まったこの会話、午後3時過ぎまで掛かってやっと、「間違い番号だ」と相手に伝わったようです。

Japanese translation permitted by velakskin

icon credit: Defaulticon (under CC)

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

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

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

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

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

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

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

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

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

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

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

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

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

小説家が小説を書く様子を一緒に体験できる執筆ネットライブ – PCKWCK

pckwckは、小説家 ジョシュア・コーエンさん(Joshua Cohen)がまさに現在進行形で進めている、インターネットで中継しながら小説を一本書き上げるというプロジェクトです。

特設サイト上で著者が文章を追加し、推敲していく様子が見られるようになっています。

執筆スケジュールは10月12日から10月16日までの間、米国東海岸時間で13時~18時となります。日本時間では夜中の12時から朝5時ですかね。

pckwck-top

日本からだと寝てる間に執筆タイムが始まって終わってしまうので、実はまだライブに参加できてないんですが。ライブ中に見に来たファンとのやりとりは右側のチャットウィンドウで読むことができます。

江口寿史氏の古いギャグ漫画で、漫画家がミュージシャンの様にコンサートホールで漫画を描く様子をライブで見せる、というのがありましたが(Live ’83 / 寿五郎ショウ)、ネット時代には創作の過程も見たいというファンの小口の需要が技術によって満たされる、ということなのかもしれません。

でも、ほんとに見てて面白いのかしらこれ。

http://www.amazon.co.jp/dp/457593027X/

via TheNextWeb

Skypeが動画スタンプ “Moji” を開始

無料通話/チャットアプリの Skype が公式ブログで新機能 Moji を発表しました。

セサミ・ストリートでおなじみのマペット、カーミットが紹介する動画によると、この Moji というのは非常に短い用意された動画を、絵文字などと同様に感情を伝えるためにメッセージに添えて、あるいは単体で送るものです。

https://www.youtube.com/watch?v=k8uWuNOa7CQ

英語圏向けのキャラクターばかりなのでどうなのかなと思いましたが、Android では、昨日2015-09-05 の日付でリリースされているバージョンにて、この Moji が送れることを確認しました。

チャットのメッセージを書くボックスにある顔マークから、これまでの絵文字だけでなく、「ハリウッド」「BBC」「マペット」の選択肢が増えて、これらの動画スタンプを選べます。

(credit: Skype support)
(credit: Skype support)

Windows, Mac, iOS 版のSkypeでも、最新版にすれば使えるようになっているそうですが、手元の Windows 版ではまだ出てきませんでした。同じMicrosoftのWindows Phone 版はまだのようです。

“Moji” という機能名は、日本語の「文字」から来ているんでしょうね。emoji = 絵文字 から取ってきたのだと思います。動画スタンプ機能に「文字」は関係ないあたりが、日本人から見たら不思議な命名ですが、まあ emoji が emoji のまま覚えられてる海外では、覚えやすいかもしれません。

英語で一番使われる(笑)はLOLじゃなかった – Facebookの統計データから

Facebook Research の Sarah Larson さんが発表したのが、メッセージやコメントなどで「笑っている状態」を表現する文字についての統計です。

英語で「笑っているよ」を表現する方法としては、LOL = laugh out loud = 大笑い、とか LMAO = laugh my ass off などが有名かと思います。でも、こんな略語が本当に良く使われているんでしょうか?

Larson さんは、5月最終週のFacebookの投稿・コメントを正規表現を使って集計し、全体の15%のユーザーがこういった(笑)表現を使っていたという結果を得ました。さらにその内訳はというと、

(chart image: Facebook Research)
(chart image: Facebook Research)

このグラフのようになります。一番多かったのは”ha”、そしてそれを繰り返した”haha”, “hahaha”などのグループ。日本語で言うなら、コメントした後に”ハハハ”と書くような感じですね。

次が絵文字系、そして”he”, “hehe”(ヘヘ)と続きます。

LOLは1.9% の使用で、50分の1ぐらい。見ないわけでもないけど、そんなにみんなLOLを使っているわけでもない、ということがわかりました。

Facebookだけのデータではありますが、Facebookの英語圏での普及率や使われ方を考えると、ネット一般で見てもそれほど傾向は違わないのではないかなと想像します。

via VentureBeat