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

OpenVim – ブラウザで動く Vim 入門

OpenVim は、ブラウザ上で動く Vim のインタラクティブなチュートリアルです。

20章にわかれたチュートリアルをこなしていくことで、Vim の基本的なコマンドを一通り知ることができます。

Unix サーバの管理を初めてまかされた、どうしよう、みたいな人には、コマンド表を見て覚えるよりちょっといいかもしれません。

ソースコードも公開されていて、たくさんのバグ報告や改善案が寄せられているようです。

Never-Blink ウェブカメラ対戦型の「まばたき我慢」ゲーム

Never-Blink は、まばたきを我慢し合うゲームです。

サーバにつながった中からランダムな相手が決まり、その相手とwebカメラがついたブラウザ経由でにらめっこのように向き合います。

最初に持っているヒットポイントは、まばたきをするたびに減っていき、ゼロになると負け。

類似の先行例として、2017年にBBCが人気ドラマ「ドクター・フー」のプロモーションで短期公開した、“Don’t Blink”(まばたきするな)があるそうです。こちらは他人との対戦ではなく、ウェブカメラをみながらどれだけまばたきを我慢できるかというゲームだったよう。

ランダムにつながるというあたりは、一時期世界中で話題となった Chatroulette を思い出しますね。単にランダムにつなげるより、そこにゲームが有った方が楽しいという人はいるかもしれません。

ソースコードがGitHub に公開されていますが、今のバージョンは処理が重いそうで、どこかのサーバに載せて一般公開はできていないということ。自分でインストールした上で相手を探して遊ぶのはちょと大変かもしれませんね。

モバイルゲームとして手軽に遊べれば、そこそこ流行るかもしれません。

via Hacker News

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