タグ: チャット

カテゴリー
技術

css-only-chat CSSだけで動くブラウザチャット

ケビン・クッチャさん(Kevin Kuchta)のkkuchta/css-only-chat は、JavaScript を使わない非同期ウェブチャットサーバーです。

二つ(以上)のブラウザからこのサーバに接続し、アルファベットをクリックしてメッセージを作り送信すると、同じサーバに接続した他のブラウザでも即時表示される、いわゆるブラウザチャットです。しかし面白いのは、このページで JavaScript は使われていないというところ。

送信側

CSS の :active 疑似クラスを使うことで、ある領域をクリックした際に、はじめて画像ファイルを読み込ませることができます。つまり、ボタンが押されたタイミングを画像ファイルの読み込みでサーバ側から検知できるということ。

「同じボタンが2度目押された時は(画像はもうブラウザ側にロード済なので)サーバはわからないのでは?」となりますが、たとえば “a””a” と押した時は、接続しっぱなしの状態で、元のボタンを隠し、新たに「”a”を押した」という情報を持った別の画像ファイル名を持つボタンを表示しているようです。これをすべてのボタンに対して行うことで、ボタンが持つ画像ファイルのパスが、過去のすべてのタイプ内容を保持することになります。

受信側

表示はどうやって更新してるのか、も解説されています。接続しっぱなしの状態で、これまで送った html が不要になったら、style タグを送って過去の要素を display:none で隠し、新たにページ内容を追記します。

これを、自身か他のブラウザから新たなデータが届くまで待機しながら繰り返しているということ。じゃあソースコードはとても長くなるのでは、と思って Chrome でソースを表示しようとしましたが、何も表示されません。Firefox では何千桁もある一行のソースコードを確認できました。

今のところデモサイトは用意されていないので、試すには自分で動かす必要があります。

via Hacker News

カテゴリー
ネットのサービス

Expensive Chat – 一文字あたり1￠。お金を払ってメッセージを書き込むチャットサービス

Expensive Chat(高価なチャット)は、「支払った者だけが発言できる」ブラウザ上のグローバルチャットです。

チャットルームは全世界でただ一つだけ。ここで、一文字1セントをクレジットカードで支払うことで、発言することができます。

メッセージボックスに書き込むと、右側の料金カウンタも上がっていきます。日本語も一文字1￠で正しく数えていますね。

“Send”ボタンを押すと、投稿者名とクレジットカード番号の入力になり、試してませんがカード情報の入力で即投稿されるようです。

# 運営者を信用できないので、さすがにクレジットカード支払いする気にはなれませんでした。これがPayPalクレジットぐらいなら支払ってみても良かったんですが。ここで宣伝など書き込んでみようというかたはプリペイドdebit等使うなど注意してどうぞ

左側には、これまでの累計のユーザーとその支払額。ヘビーユーザーのランキングということですね。

今のところ、ほとんどの書き込みは数文字の書いてみた・試してみた、というものか、ドメイン名やURL、サービス名を書き込んだ宣伝がほとんどです。

一枚ページのウェブサイトを公開して、少額を払わせて書き込みさせる、というアイデアは、2005年に大ヒットしたミリオンダラーホームページ(The Million Dollar Homepage)を思わせますね。ミリオンダラーホームページの成功を受けて、類似のサイトがいくつも登場していたことをご紹介したことがありますが、今回のexpensive chat もとても似ているように思います。

結局のところこういった一発ネタの成功はサービスの技術的な高度さではなく注目を集められるかどうかがすべてですね。expsive chat はせっかく支払って頑張ってもログが上に流れて行ってしまうあたり、我も我もと急いで参加させる仕組みに欠けるように思いますが、そこを何か改良したフォロワーがでれば、流行ることも無いとはいえないかもしれません。

今なら数千円も払えばトップランカーとなり多少の宣伝になるかもしれませんが、数千円でそうなれるということはサービスの初動としてはあまり良くないということでもありますね。

カテゴリー
技術

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

その結果

  • 左の人の発言

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