「ブラウザ」タグアーカイブ

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

ブラウザのファビコンでライブストリーム

ファビコンでアニメーションとかは以前からあるネタなので、その延長にあるアイデアというか。ファビコンでカメラが映した映像を表示させるというプログラムです。

作者の方がツイッターに動画を上げています。

ウェブカムに向かって手を振ってる様子がわかるでしょうか?

自分で試したい場合、こちらのサイトをChrome/Firefoxなどで開き、カメラへのアクセスを許可する必要があります。

# Safari では動かないというレポートがあります

ソースコードはこちら。短いですね。

via Hacker News

ブラウザのアドレスバーをイコライザーっぽく

URL のハッシュ部分を書き換えることで、ブラウザのアドレスバーをグラフィックイコライザーにするというアイデアです。

これのソースコードがなんと2ツイートに収まるサイズ。

MediaDevices.getUserMedia()でマイクからの音声を取り込み、

動いた!

しかし、ブラウザの履歴がたいへんなことに!

replaceState()を使った、履歴が壊れないバージョンも提案されています。

ブラウザで動くWindows 95風マインスイーパー

ブラウザで動くマインスイーパーですが、単にマインスイーパーをブラウザ上に実装するのではなく、なぜか Windows 95 を再現しそこでマインスイーパーを動かすというもの。

並んだアイコンから Minesweeper をダブルクリックしないとゲームが始まりません。

ソースコードもGitHubで公開されていて、今後はスタートメニューやウィンドウの移動、他のアプリケーションの追加など、Windows 95の再現度を上げる方向で頑張るそうです。

Windows 10 にはもうマインスイーパーは入ってないんですね。アプリとして”Microsoft Minesweeper”を無料で追加することは可能ですが、こちらはいろいろと今風に改良されたもののようです。

ブラウザを開けばあの懐かしいマインスイーパーが、Windows 95風のランチャーつきで楽しめる、ということで、ノスタルジックな需要があるのかもしれません。

via Hacker News

Hacker Tab – GitHubのtrendingプロジェクトをブラウザの新規タブに表示するChrome拡張

新たに公開されたHacker Tab Chromeブラウザ拡張は、ブラウザの新規タブで表示されるページを、Google検索ではなく GitHub のホットなプロジェクト(trending)に差し替えてくれます。

プログラミング言語/集計期間を選んで絞り込むこともできます。

拡張機能のソースコードはこちら。GitHub の trending の取得にはこちらのスクレイピングライブラリを使っているようです。

ブラウザのタブが表示されるたびにチェックすることになるので新たな面白いオープンソースプロジェクトの発見につながるかもしれませんね。

Cookiesの利用許可を訊かれなくするブラウザ拡張 I don’t care about cookies

I don’t care about cookies(クッキーなんて気にしないよ)は、ヨーロッパのウェブサイト(や、ヨーロッパからもアクセスされるアメリカ他のウェブサイトでも)で最初に訪問した際によく出てくる、「cookies を使ってもいいかな? Yes / No 」というポップアップ等のダイアログを消してしまうブラウザ拡張機能です。

クロアチアのダニエル・クラドニクさん(Daniel Kladnik)が開発し、公開したこのブラウザ拡張、ChromeFirefox、。AdBlock Plus/uBlock など、多くのブラウザ環境に対応しています。

動作例

通常状態でアクセスすると、こんな風に画面の半分を「Cookie 使うよ」という警告で埋めてしまうようなサイトに対して、

拡張をオンにしてアクセスすると、こんな風になります

意味があって同意を求めているのだから、自動的に無視なんてすべきではない、という意見もあるかとは思いますが、ほとんどのサイトでこのような警告には考えずに承認して先へ進んでいる人も多いのではないでしょうか。どうせ承認するのなら、最初から飛ばしてしまうこの拡張、仕事の効率化と言えなくもありません。

サイトごとに一度承認すればいいだけ、ではあるのですが、PCを新しくしたり、ブラウザを乗り換えたり、何かの不調で cookies を含んだ履歴を削除したり、いろんな理由で承認した記録がなくなってしまうこともあるでしょう。

この拡張が自動的に承認している、わけではなく、承認を尋ねるダイアログを見えなくしているため、本来の手順を迂回してアクセスしてるという見方もできますが、このような cookies 使用の同意を取ることにどれほど意味があるのか、疑問に思っている人も多そうです。

ソースコード

閲覧したウェブサイトの情報をアクセスする拡張機能なので、インストール時にはいろいろ権限を要求されます。念のためインストール前に Chrome 版のソースコードを眺めてみましたが、(今のバージョンでは)特に怪しいところは無さそうです。

サイト毎にcookie警告の表示方式は多岐に渡っていて、どうやって警告を抑制してるのかなと思ったのですが、ソースコードを見るとたいへんな力業だとわかりました。サイトごとに、警告に関する CSS セレクタ名などを持っていて、マッチするものを表示させなくしています。また、ページ遷移などがあるものについては、個別に対応コードを用意しています。つまり、拡張がすでに知っているサイトの cookies 警告を止めているわけです。

参考

EUはクッキーの読み書きでユーザの承諾を義務化–ヨーロッパのインターネット業界は墓場になるね | TechCrunch Japan

欧州「クッキー法」、対応が必要なクッキータイプ:あなたのサイトは大丈夫? | DIGIDAY[日本版]