ブラウザ on akky@サイボウズラボ・ブログ

NopeCHA - ブラウザにCAPTCHAを解かせるブラウザ拡張

Fri, 20 Jan 2023 00:00:00 +0000

NopeCHAは、いろいろなウェブサイトであなたが本当に人間ユーザーか確かめるために出てくる CAPTCHA を自動で解いてくれる Chrome 拡張機能です。

NopeCHA Chrome拡張の配布ページ

Google ReCAPTCHA のデモサイトで試してみた様子が以下の動画です。フォームが ReCAPTCHA を持っていると、この拡張機能が勝手にチャレンジを始め、信号やバスが映った画像をクリックしてくれます。

http://localhost:8099/wp-content/uploads/2023/01/NopeCHA.mp4

最も有名でどこででも見る ReCAPTCHA だけでなく、hCaptcha, FunCAPTCHA, AWS CAPTCHA, Text CAPTCHA など他社の同様の CAPTCHA にも対応しているようです。

メニューを見たところ、フリーで毎日一定回数が使えて、それを超えて使いたければ有料プランに入る、というビジネスモデルなのですね。

ウェブサイトへの訪問が人間ユーザーなのか、スクリプト等で回ってくるプログラムなのか、を判別するための CAPTCHA ではありますが、この拡張のようにプログラムで解けてしまうとなると、設置するサイト側も、入力を要求されるユーザー側も、誰も得しない状況になってきていますね。

なお、拡張が「すべてのウェブサイトへのアクセス権限」を要求してくるのが心配。CAPTCHAを解くために本当にそこまで必要なのかな、と。前期のように単体でお金を稼ぐ機能がついているので、お金が稼げている時は何も悪さはしないと思いますけれど。拡張をクリックした時だけデータ読み取りをするように変更することはできますが、その時は各種 CAPTCHA を見つけて勝手に解いてはくれなくなります。

ScrollyVideo.js - ブラウザのスクロールと動画ファイルを簡単に同期できるライブラリ

Wed, 18 Jan 2023 00:00:00 +0000

ScrollyVideo.js は、ブラウザの画面効果のためのライブラリで、mp4 で置いた動画ファイルをページのスクロールと連動してくれます。

と、言葉で書いても伝わってる気がしません。ScrollyVideo.js のサイトで見るのが一番わかりやすいと思います。

このデモでは、サンフランシスコのゴールデン・ゲート橋をドローンで空撮した mp4 ファイルが使われています。ページを下にスクロールしていくと、動画が先に進むため、スクロールに合わせてみている自分が前に飛んでいるような感覚が得られます。

デモでは単純なスクロールとの同期だけでなく、スクロールの途中でテキストボックスが流れたりもしていますが、vanilla JavaScript のデモ(ダウンロードしてブラウザで開くだけで動きます)では、非常に短いHTMLのコードで基本的な部分が動くのがわかります。

自分で撮影した mp4 ファイルでももちろん動きましたが、あまりこのライブラリで見栄えのするような動画がなく。

デモのように前後に進む動画がおそらくよく合うんでしょう。部屋を360度ぐるっと回ってみる動画とかを表示してみましたがあまりいいものになりませんでした。

ライブラリはプレーンなJavaScript の他、React, Svelte, Vue からも呼び出せるようになっていて、それぞれのデモファイルがあります。

via FlowingData

隕石衝突シミュレーターで、地球上の任意の場所に隕石を落とす

Tue, 06 Dec 2022 00:00:00 +0000

Neal.fun のAsteroid Launcher(小惑星発射)は、ブラウザ上で遊べる隕石落としシミュレーター。

地図で選んだ好きな場所に、好きなタイプの隕石を落とすことができます。落とす時に選べるパラメーターは

材質 (鉄、石、炭素、彗星、金)
直径
速度
進入角度

新国立競技場に直径1kmの彗星を秒速50km、45度の入射角で落としてみました。

東京に隕石落としてみた

できたクレーターのサイズは直径13km。クレーター内で蒸発した人口とかクレーターの深さとか、穏やかじゃない推定結果が表示されます。

この表示、下にどんどん続いていて、衝突後の火球の影響、衝撃波の到達距離と肺や耳をやられてしまう人口、爆風でつぶれる家屋や木々、起こる地震とそのマグニチュードなど、様々な影響が示されます。

デフォルトの地図の位置がニューヨーク周辺で、日本に持ってくるのにスクロールするしかなかったので、どこまでまじめに被害者数などの推定をしてるのかなと思い、同じ威力の隕石を奥多摩にも一発落としてみたのですが、人の被害は4941人とはるかに少なくなったので、人口データもまじめに取っていて落とす場所の周辺の人口密度を見ているようです。

こんなのが落ちてきたらどうしようもないなと思いますが、せめて落ちてくることが逃げる時間があるぐらい前に予測できるといいな、と。

via Hacker News

PomoChat - ポモドーロタイマー+チャットルームで世界の知らない人たちと集中作業+交流

Thu, 17 Nov 2022 00:00:00 +0000

Pomochatは、webブラウザ上で動くポモドーロタイマーに、チャットルームを組み合わせたサービスです。

ただのタイマーサービスと違うのは、サービスを使っている人の間でテキストチャットができること。

ポモドーロの1セッションは30分間で、そのあと10分の休憩。よく見るツールは25分作業して5分休憩が多いと思いますが、このあたり「正しい」決まりとかるんでしょうか。

30分間のセッション中はチャットルームはロックされ、誰も書き込めません。30分経つとセッション終了のアラームが鳴り、10分間チャットをすることができるようになります。

チャットルームはサービス全体で一つのようです。Hacker News のトップページに掲載されて来た人たちが30人ぐらい。全体で同じタイマーを使っているようで、セッション中に入るとそのセッションが終わるまでは何もできません。

PomoChat - 集中タイム中。最下段に残り時間が表示

休憩時間のチャットでは、自分が住んでる国や都市の天気の話をしたり、知らないどこかの人と交流が始まっていました。

個々のユーザーとプライベートチャットをすることもできるようですが、これも休憩中に限られています。他には右サイドバーでwebラジオ局がいくつか選局できますが、これは音楽を聴きながら作業する人のための機能のようですね。いつでもオンオフできます。

ユーザー登録もできますが、ゲストでも使えるようになっていて、今いる人のほとんどはゲストで入ってきていますね。

PomoChat は、一人で作業している時の孤独感を減らそうというwebサービスの一つだと思います。discord とかでそういうチャンネルに行くのでもいいとは思いますけれど。

世界から来ている特に統一感のない人たちとチャットすることが習慣になるかどうかはわかりませんが、ポモドーロタイマーに興味がある、ぐらいの共通点はあるので、そういう仕事の習慣ややり方みたいなコミュニティの方向に伸ばせればあるいは固定ユーザーも集まるのかな。

30分集中したら少し時間を残してこの記事が書けたので、休憩時間にまたチャットしてみようと思います。

[追記] 人気が出たら有料にするとかのモデルかなと思っていましたが、メニューの中にポイントの購入と、ポイントを使った広告という機能があるようです。お金を払って告知したいことをチャットの人たちに宣伝できる、というのが一つの収入源として設計されているよう。

via Hacker News

Floor796 - あらゆるmemeをアニメーションにして一つの拡大し続けるフロアに配置したアート

Wed, 16 Nov 2022 00:00:00 +0000

Floor796は、人工衛星の796階ワンフロアに映画やバンド、漫画・アニメ・ゲームなど色々なミームが混在するという設定で描かれた巨大なアニメーションアート・ウェブサイトです。

斜め上から見下ろしたクウォータービューで書かれたイラストは、スクロールすると次の部屋が表示されていきます。今の時点でもそうとう広いものですが、今も随時新しい部屋が拡張され続けていて、もっと大きなものを目指しているそう。

人やロボットなどはクリックできることが多く、作品名やキャラクター名が表示され、そのmemeを表すYouTube動画を開けるようにもなっています。

多数のキャラクターが描き込まれていて、中には海外でも知られている日本の漫画のキャラも見つかります。ざっと流して見つけたのは「北斗の拳」「ソニック」「食戟のソーマ」「FAIRY TAIL」「ダーリン・イン・ザ・フランキス」「スーパーマリオ」「リング」など。もっといろいろありそう。

もちろん海外発のキャラクターはアメリカのものを中心にもっと多く登場しています。向こうの人は知っているけど日本ではそれほど、といった作品を知るきっかけにもできそうです。

作品は専用エディタを用意してその上で製作しているそう。メイキングがいくつか動画としてあげられていますが、とんでもなく時間が掛かる作業だとわかります。

[Changes]メニューでは新memeが追加された日時を遡って確認できます。「ベルセルク」や「ヒロアカ」もいるのか。

via Hacker News

Plink! - ブラウザ上で世界の誰かと即興演奏

Mon, 05 Sep 2022 00:00:00 +0000

PLINK!は、Dinahmoe社によるブラウザ上での共同演奏の場です。

ブラウザで遠くの人たちと合奏できる Plink! のトップページ

左側の色のついた四角をクリックすると、楽器を変更できます。縦は下から上まで音階となっていて、マウスを押すと単音が出ます。押しっぱなしにすると連続演奏され、自分のカーソルは右へ進んでいきます。

ネットのどこかの人たちと4人で演奏中

言葉で説明するより、一回遊んでもらえばすぐにわかると思います。楽器や楽譜の知識は不要で、適当にやっていてもなんかそれなりの曲(らしきもの)ができています。他の人とチャットできたりはしないので、相手の出している音から何をやりたいか読み取ってうまく合わせられると、なんともいえない「伝わった感」が得られていることもあるような、ないような。楽しい。

多くて4人、少ない時は2人の時もありましたが、Hacker News のトップページに載っている今なら、セッションの相手には困らないのかもしれません。入れないということも無いようなので、もしかしたら何十人の訪問者を4人ずつ分けて別のセッションに入れてくれているのかもしれません。

via Hacker News

pixelguesser - あなたのwebデザインのサイズ感に挑戦するクイズ

Fri, 12 Aug 2022 00:00:00 +0000

Pixel Guesser(ピクセル当て)は、ブラウザ上でピクセル(px)指定されたサイズの矩形を答えるクイズサイトです。

幅と高さのpx がお題として出るので、マウスでそのサイズと自分が思う領域を指定します。

あなたが描いたサイズと正しいサイズがオーバーレイで示され、どれぐらい正解に近かったかに応じて点数が加算されます。10問解くと合計が出て終了。

ブラウザ上での矩形領域を勘で指定してうまく当てられると、デザインの速度にいい影響があったりしますかね? 日常的にデザインしてる人はやはりいい点数出るんでしょうか。

via Hacker News

Felt - 地図を作製・共有するためのWebサービス

Thu, 28 Jul 2022 00:00:00 +0000

Feltブランドロゴ

Felt は、ブラウザ上でオリジナルの地図を作成することができるサービスです。

線を引いたり、マーカーを置いたり、画像や動画を地図上に貼り付けたりという編集機能がブラウザで提供されています。

作成した地図はURLで共有したり、自分のサイトに埋め込んで表示したりできます。

上は以前から考えていた地図ネタ。地下鉄に乗らなくても地下鉄の通路を歩いて長距離行けるところがあるのでは? と思って作った「ぼくの考えた傘の要らない最長地下道ルート」。

隣の駅まで地下道でつながっている駅が結構あるので、地下鉄に乗らずに何駅分も歩けそうだな、と思ってたのを地図に描いてみました。

Feltで地図を作成している様子

なお、Felt社が全部作ってるわけではなく、地図はMapboxとOpenStreetMapを利用して作られているようです。

Feltが提供するレイヤーという形で、道路・鉄道・航路・自転車道、州境や自治体・選挙区・学区・郵便区・タイムゾーン、洪水・森林・山火事、学校・公園・発電所・国立公園、など様々なデータをプロットした地図が提供されており、これらを簡単に重ね合わせて使うことができるようです。

レイヤー選択画面 from Felt Media Kit

「地震」と「火山」のレイヤーを使って日本で地震が起こりやすいことを説明する地図、を作った人もいるようです。

現在は個人での利用が無料、将来的にはチーム向けの有料プランを準備しているということ。

via Hacker News

hexyzland - 数式で六角形の図形表示を動かす遊び場サイト

Wed, 29 Jun 2022 00:00:00 +0000

hexyzland は、六角形ベースの図形を6つの変数と数式で動かす、プログラミング実験場です。

Hexyzland トップページ

6つの変数は t(時間), r(中心からの距離), a(角度), x,y,z(3方向の座標) となっていて、各ヘックスの値を -1(真っ赤) から 1(真っ白)の間に変えることでヘックスのサイズと色が変わります。

あとは数学的な関数を組み合わせればアニメーションのできあがり。チュートリアルにたくさんの実例が出ています。

作成した図形は URL が生成されるので SNS 等で共有することもできますし、動いているところを動画として保存することもできます。

http://localhost:8099/wp-content/uploads/2022/06/hexyzland.webm

GitHub にサイトのソースコードも公開されています。

tixyland という正方形ベースの同様の遊び場があり、hexyzland はそれにインスパイアされたものだそうです。

tixy.land トップページ

A collection of colorful examples from https://t.co/664X7G2TH2:

// sin cos sin cos sin cos
// by @inky
(t,i,x,y)=>
((x^y)%2?sin:cos)(t)https://t.co/fp20uLGg2Z pic.twitter.com/ymY0kg6hCl
— Martin Kleppe (@aemkei) November 11, 2020

via reddit/programming

Claddar - 一文字違いの英単語を当てていくブラウザゲーム

Wed, 22 Jun 2022 00:00:00 +0000

Cladder は、英単語を当てるブラウザゲーム。最近よくある、 Wordle インスパイア系で毎日新しく出題されるやつです。

Claddar 回答中

まず今の英単語が一つ表示されます。上の例では “FOOT” 。

次の正解は、この単語の一文字だけを別の文字に変えたもの。直下には “silly person” と表示されていますが、これがその次の単語の意味やヒントとなっています。

最初はどの文字を変えるのかわかりませんが、時間が経つと変えるべき文字のところがヒントで黄色くなります。

制限時間内に10個解ければ達成。

Cladder 結果表示

どうしても思いつかない、という時に詰まってしまうのではと思いましたが、2回までパスをして無理やり先へ進むことができるので、どうしても思いつかずに時間を取り過ぎてるなと思ったらパスをうまく使うことも必要そうです。

「今日のお題」に挑戦する Play モードのほかに、寄付でアンロックできる難易度の高い Challenge モード、過去の出題を遊べる Archive モード、練習用の Practice モードがあります。

結果をコピーして twitter 等に貼り付けられるのも、いつもの Wordle系です。

#Cladder 92

✅ 6/10

🟩➖➖🟩
🟩➖➖🟩
🟩➖➖🟩
🟩➖➖🟩
🟩➖➖🟩
🟩➖➖🟩
🟨➖➖🟨
⬛➖➖⬛
⬛➖➖⬛
⬛➖➖⬛https://t.co/FKqoRFnblY
— Akky (@akky) June 22, 2022

3D Order Book - 仮想通貨の売買状況をブラウザで高速表示

Fri, 03 Jun 2022 00:00:00 +0000

3D Order Bookは、Bitcoin などの仮想通貨のリアルタイムでの取引状況をグラフにして見るwebサイトです。ただし、そのグラフは立体で表現されています。

上のスクリーンショットだと、左手の緑が買気配、右手の赤が売り気配の株数。売買が成立した時は谷底に黄色い球が見えますね。

スターウォーズの有名シーンのような X-Wing モードでは、時系列が逆で過去から現在へ向かって移動するように描画がされます。

Bitcoin 市場の動きを3D化した中を FPSのように動き回る

また、FPSモードで3Dグラフの中を自由に動き回ることもできます。なかなか思い通りに動けませんが。

ソースコードはGitHubで公開されているので、仮想通貨でなくても他の株式市場のデータなどを突っ込むことができるでしょう。

Worldle - 世界の国名を当てる Wordle インスパイア・クイズ

Fri, 03 Jun 2022 00:00:00 +0000

Worldleは、また別の世界+Wordl風ブラウザゲームです。

Worldle トップページ

毎日変わるお題は世界のどこかの国の形。その形だと思う国の名前を英語で入力して答えます。

6回まで回答の権利があり、6回のうちに当てる必要がある、と言うのは本家と同じです。

Worldle - 外れた時のヒント

正しい国ではない場合、正しい答えの国への距離、その方角が表示されます。距離と方角をあわせた回答の近さみたいな数字をパーセントでも示してくれます。この数字は正答にたどり着けば100%になります。

その日の経過と結果は、本家 Wordle でもおなじみの絵文字を使った記録として、twitter などの SNS に貼り付けやすい形で提供されます。

#Worldle #21 5/6
🟩🟩🟨⬜⬜
🟩🟨⬜⬜⬜
🟩🟩🟩⬜⬜
🟩🟩🟨⬜⬜
🟩🟩🟩🟩🟩https://t.co/WfVxKgABxW
— Akky (@akky) February 11, 2022

国名を英語で入れるのは難易度高いとは思いますが、何文字かタイプすると部分一致する国名のリストを返してくれるので、とんでもない物識りとかでなくても一応参加はできます。

国名のスペルを入れるとサジェストが出る

とはいっても、日本語の国名から綴りが思い浮かばないものとか、カ行といってもCなのかKなのかQなのかわからない、みたいな時は国名を探すのにも苦労はします。

そもそも知らない国は、場所が特定できても答えられない。カリブ海の島々の国とかアフリカの小国とか。なので、参考にしたであろう Worldle に比べるとやはり、遊ぶ人を選びすぎだなあという気のするゲームです。

小学校の社会科で都道府県を覚えさせられるので、都道府県で同様のクイズを作ると役立つターゲットもいるかもしれないですね。

lofi.co - 集中できる作業環境をブラウザで提供するフリーミアムサービス

Mon, 23 May 2022 00:00:00 +0000

lofi.co は、ブラウザで開きっぱなしにして使うBGM & 生産性向上ツール群というサービスです。

Lofi.co の入り口ページ

Lo-Fiの定義はWikipediaを読んでもよくわからなかったのですが、長時間再生できる作業用BGM を Lo-Fi と呼んでることもあるので、ここではそういう意味かなと思います。

Lofi.co で画像を選ぶ

無料で使える範囲は、カフェの背景画像、3種類の音楽ジャンルのBGM、都市のノイズ、雨だれ、タイピング音のようです。

Lofi.co の料金表

毎月$2.99 の有料プランを購読すると、背景画像や音楽の種類が増え、さらにポモドーロタイマー・メモ・計時ログ・ToDo リストなどの生産性ツールが使えるようになるそうです。

ブラウザのウィンドウ一つでこのサービスを常時表示しておき、そこで自分の作業環境に関わる多くを賄おうということでしょうね。

こういったブラウザで BGM + 環境音というサービスはたくさんあり、過去にも紹介したことがあります。参入者はとても多いのですが、人気が出てスケールした時にどうやって儲けるのか、という疑問は常に出てきます。

Lofi.co は定額課金という方式で来たわけですが、たとえばBGMなら YouTube で作業用BGMを検索して掛けっぱなしでも同じことは達成できるわけで、有料ユーザーがそんなに取れるのかな、とも思います。定期的に出てくるこういうサービス、どれもいい感じで発見した時は楽しんでるのですが。

Lofi.co は ToDo やタイマー等と併せることで課金を狙っているわけですが、この方向で普及するのか、それともまた来月は別のこういう新サービスをみんながいじっているのか。

via Hacker News

And. を5回続けて書くと Google Docs が落ちるバグが見つかる

Fri, 06 May 2022 00:00:00 +0000

Google Docs の公式サポートフォーラムで、不思議で面白い(中の人にとってはたいへんかもしれません)バグが報告されています。

“And. “を5回続けて書くことで、Google Docs で編集中のページがクラッシュしてしまうというのです。

Google Docs サポートフォーラムより、再現されたエラーのスクリーンショット

Chrome, Firefox で再現したというコメントがあるので自分も試してみたのですが、どうしても再現しません。今朝4時頃(日本時間で)のレポートに対して6時頃には Google の人が確認し修正中だと回答しているので、もう直っているのか、何か条件が違うのか。Google アカウントの言語は英語にして試しているのですが。

より詳細な再現手順は、“And. And. And. And. And.“と書き、改行してからページのリロード、ということ。“and. " と A を小文字にしてはダメで、ピリオドの後にはスペースを入れないといけないそう。

また、“But. “5回でも起こるそうですが、だからといって大文字で始まるどんな英単語でも起こるというわけではないということ。

Hacker Newsのコメントでは、Also, Therefore, And, Anyway, But, Who, Why, Besides, However などの英単語を使っても再現したそう。

特定の英単語でしか発生しないことから、英語に関する機能、つまりスペルチェッカ―が原因ではないか、という話が出てきています。実際、And. And. を打った時点でスペルチェックの青波線が出ていますね。メニューから Tools の Grammar suggestion をオフにするとクラッシュしなくなるという話も。(自分で再現できていないのでもどかしいです。)

via Hacker News

地図表示ライブラリ Leaflet がウクライナ支援を呼びかけ

Wed, 09 Mar 2022 00:00:00 +0000

OpenStreetMap を使ってウェブサイトに地図を表示できる JavaScript ライブラリ Leaflet のトップページがいつもと違う掲示になっています。

通常のドキュメントやダウンロード、プラグイン情報などはこちらに退避され、トップページ全面にてウクライナ支援に関する作者/メンテナー一同の意見表示が行われています。

Leaflet の作者はウクライナ・キエフ市民のウラジミル・アガフォンキンさん(Vladimir Agafonkin) @mourner。

ロシア軍の爆弾が降り注いでいるため、家族と共にキエフは脱出したところだそうです。

このページに署名している「Leaflet メインテナー一同」は、Leaflet ユーザーに対する、各国の政治家への働きかけや平和を求める活動への参加、Safelife.in.ua やウクライナ赤十字への寄付の呼びかけなどを書いた上で、

「人道に関する訴えがあなたに効かないのであれば、あなたの利己主義に働きかけましょう。ウクライナ市民の将来は Leaflet の将来でもあります。」

If an appeal to humanity doesn’t work for you, I’ll appeal to your egoism: the future of Ukrainian citizens is the future of Leaflet.

言いたくてこんなことを書いてるわけではないでしょう。戦争で家を追われた作者の悲痛な気持ちが伝わってきます。

GitHub 上のソースコードのReadmeも同様に書き換わっています。GitHub はロシアからのアクセスを遮断しないことを表明しました。これも賛否あるかもしれませんが、ロシア国内のLeafletユーザーがこの主張を目にするだろうことを考えると、遮断で見えないよりも情報量はありますね。

PoW! Capthca - クライアント側で重い計算をさせるCAPTCHA

Fri, 17 Sep 2021 00:00:00 +0000

PoW! Captcha は、Proof of Work (作業量証明)を組み込んだ CAPTCHA ライブラリです。

ウェブサイトのコメント欄で使われるときのイメージが公開されています

コメント欄の下にプログレスバーが出ていて、これがブラウザが与えられた計算をこなしている進度を示すようです。計算が完了すると投稿ボタンが押せるようになり、コメントを投稿できます。

どうしてこれでスパム投稿が防げるかというと、ブラウザ上で計算するときに消費される計算資源はスパマーのマシンにあるからですね。スパム投稿で同時や連続で多数のコメントをしようとすると、クライアントPC のリソースが大量に使われて動かなくなると。

PoW Captcha も、Pow Captcha が参考にした同様の mCaptcha も、このPoW 方式の利点としてユーザーの追跡をする必要がないことを押し出しています。ローカルで計算させるだけですからね。

依存ライブラリもなくコードもコンパクトだということです。

チューリングテストではないので正確には CAPTCHA じゃありませんが、不正な大量リトライを予防するという意味では CAPTCHA と同様の働きをするのかもしれません。

via Hacker News

THEREMIN - ブラウザやスマートフォンで鳴らすテルミン風楽器アプリ

Mon, 21 Jun 2021 00:00:00 +0000

Theremin(テルミン) は、世界初の電子楽器テルミンをモチーフとしたwebサービス/アプリです。(2014年に最初のバージョンが公開されていたそうです)

単に音を鳴らすだけなら簡単で、黄色いエリアでマウスをグリグリとドラッグするだけでそれっぽい音が出ます。

4種類の波形の音や、ディレイ、フィードバック、スカズ(波形の汚し)を調整することで、音色を調整できます。

本家テルミンと何から何まで同じ仕組みなわけではないので、名称がまったく同じなのはちょっと誤解を招くところかもしれません。プレイの感触としては共通点もありそうです。本物のテルミンを演奏したことはありませんが。

スマートフォン版(iOS / Android)が有料で出ていて、そちらでは演奏の録音やダウンロードもできます(デモ動画)。同じく録音ができるChrome拡張版もあるそうですが、現在はダウンロード不可になっています。

Making History Sandbox - 世界の勢力図を編集できるブラウザエディタ

Fri, 26 Mar 2021 00:00:00 +0000

Making History Sandbox: Alternate History Timeline Editor は、世界の勢力図を年号と併せて作成することができるブラウザ上の編集サービスです。

モンゴル高原統一(1206)時の諸勢力

エリアを選んで名前や勢力名を設定したり、色を変更したりできます。

いくつかの時代の勢力図をロードすることもできます

アレクサンダー大王
モンゴルの台頭
ヴァルナの戦い
第二次世界大戦前夜
現代

第二次世界大戦直前(1936)。フィリピンの帰属が間違ってますね。

作成した勢力図は保存・読込ができます。利用者が作成したデータ「現代(2021)」「第一次世界大戦開戦(1914)」も追加されています。

エリア単位で支配勢力を色塗りしていますが、エリアを分割したりすることもできるそうです。

レイヤーのように複数の年代を並べて作り、切り替えていくこともできますが、これを使ったサンプルデータはまだなさそう。

自分の興味ある時代を再現したり、架空の年代や勢力を塗り分けたりするのも面白そうです。

タイルを組み立てて日本語の文を作るサービス

Fri, 12 Mar 2021 00:00:00 +0000

Japanese Sentence Builder は、タイルに書かれた日本語(英語ヒントつき)を組み合わせて日本語の文章を作るという特殊なエディタです。

ブラウザ版のデモが公開されています。

左下の名詞を選ぶと、トップの助詞が選べるようになり、助詞を選ぶと、次の名詞かまたは右下の動詞を選べるようになります。

日本語タイルの下には英語で意味が書いてあるので、英語のヒントをみながら、それらしい日本語の文章を組み立てることができるというわけ。

とは言っても、日本語話者だから組み立てられるわけで、この英語のヒントだけをもって通じる日本語文を作るのも、なかなか難しそうではあります。

できあがった文章は、日英の自動翻訳で英語に変換され、組み上げた日本語の意味が通じるのかを確認することができます。

最近は機械翻訳が進歩してきているので、このような手動(を支援するソフトウェアツール)がなくても自動翻訳だよりでかなりのことができつつあるでしょうけれど、自分で外国語を身に着けたいというときは、このような支援ツールを使うことで学習が進むこともありそうです。

日本語話者にとっての英語学習もたいへんですが、逆の立場のたいへんさも想像できますね。

via Hacker News

Content Edit & Blur - ウェブページにボカシを入れるブラウザ拡張

Thu, 11 Feb 2021 00:00:00 +0000

Content Edit & Blurは、ブラウザで開いているウェブページの任意の箇所を編集したりボカしたりできる拡張ツールです。

拡張アイコンを"Edit"や"Blur"にしてからウェブページ上の要素をクリックすることで、文字を編集したり、ボカシをかけて中身を読めなくしたりすることができます。

“Blur"モードでは、1回目のクリックで軽いボカシが掛かり、2回クリックすると強めのボカシになります。3度クリックすると元に戻ります。

何か所かボカしてみました。

スクリーンショットを撮ったり、ビデオ会議で画面を共有したりする際に、ちょっと個人情報が表示されている箇所を隠したい、という時などに気軽に使えそうです。developer’s tool でもできますがここまでお手軽ではないですからね。

ソースコードは公開されていて、Firefox, 新Edge 版もあります。

No Paint - ランダムな筆致を選んで抽象アートを作るサービス

Wed, 17 Jun 2020 00:00:00 +0000

No Paint は、ブラウザ上でランダムに描画される形や色を取捨してアートを作り上げるというサイトです。

起動画面にあるように、今描かれている「何か」が気に入れば"Paint"ボタンを押すと採用され、“No"ボタンを押すとそれはキャンセルされて次のまたランダムな何かが描かれ始めるというものです。

ランダムに動くものしか選べない時点でかなり自由度は低いのですが、気に入らないものを除外できるという点だけで、最低限その人の好みみたいなものは出るのでしょうか。

使ってみた人が自分の作品を公開したりしています。

https://imgur.com/9efzWaC

https://imgur.com/gallery/3ETezat

https://imgur.com/MhyayTW

なんかアート的なもので著作権の心配がないものを手早く作る、とかですかね。使い道があるとすれば。

skip-silence 動画の無音部分を早送りで飛ばすブラウザ拡張ツール

Wed, 10 Jun 2020 00:00:00 +0000

vantezzen/skip-silence を Chrome に入れて動画を再生すると、動画の無音部分を飛ばして視聴することができます。

この拡張を試すにあたって、音がない割合の多い動画ってなんだろうと考えました。まず思いついたのはオンラインの講義動画で、「じゃあこの問題を解いて。時間は5分」で5分間無音になるかと思ったら、YouTuber が「じゃあ解けるまで動画を止めて」って指示するみたいですね。なのであまり無音部分が無い。

能の動画。間のところがすっ飛ばされます。無音のところの進む速さはデフォルトで3倍ですが、最高5倍まで変えられます。

将棋なんかも生で観戦すると待ち時間が非常に多い印象がありますが、YouTube の動画を見ると大盤解説がずっと喋っていたりしますね。あと、指した時に必ずしも大きな音がなるとは限らない。

この拡張は audio/video タグで動画を見せているサイトで動くのですが、YouTube で使うと「Pre-buffering 機能が使えません」という警告が出ます。HTML5 の pre-buffering が使えるサイトの場合、動画の無音部分から有音部分に切り替わる箇所を先読みして、より正確に次の有音の初めから再生できるようです。

たとえば、CNN の動画は pre-buffering に対応していました。ニュース動画だとずっと喋りっぱなしだったりするのでツールの威力も今一つでしたが。

ほとんどが無音で、音がするときだけを観たい、となるとどういう状況で役立ちますかね。なんかはまる状況の人にはすごく役立つケースもありそうな。今はブラウザの機能だけでこれが実現できるんですね。

Somoji - 絵文字で選ぶと合いの手効果音などを鳴らせるブラウザ拡張ビデオ会議のおともに

Wed, 13 May 2020 00:00:00 +0000

Somoji は、ブラウザ上でいくつかの効果音を鳴らすことができるChromeブラウザ拡張です。

拡張メニュー上で表示された絵文字それぞれに、関連する音声データが存在し、クリックするとその効果音が鳴ります。マウスを上にホバーすると、鳴る効果音の名前も表示されます。

ビデオ会議が増えている昨今、会議で賛同やら反対やら揶揄やらもろもろの意思表示をするのに、この効果音ボタンを活用すると… まあ良くないかもしれませんね。

これも最近はやりの「オンライン飲み会」とかで使うと楽しいかもしれません。

ソースコードはGitHub上で公開されています。Chrome拡張はリリース済で、他にFirefox 版と Safari版が計画中ということです。

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

Fri, 21 Jun 2019 00:00:00 +0000

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

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

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

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

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

Fri, 14 Jun 2019 00:00:00 +0000

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

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

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

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

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

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

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

via Hacker News

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

Wed, 08 May 2019 00:00:00 +0000

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

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

送信側

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

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

受信側

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

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

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

via Hacker News

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

Mon, 22 Apr 2019 00:00:00 +0000

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

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

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

動いた!

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

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

// Alternative to avoid polluting browser history:
function z() {
setTimeout(z, 40);
a.getByteFrequencyData(d);
var s = [];
d.forEach(v => s.push(l[Math.floor((v / 255) * 8)]));
var t = document.title = s.join("");
history.replaceState(history.state, t, '#' + t);
}
— Spencer (@spe_) April 18, 2019

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

Mon, 22 Apr 2019 00:00:00 +0000

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

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

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

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

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

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

via Hacker News

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

Mon, 04 Mar 2019 00:00:00 +0000

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

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

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

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

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

via Hacker News

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

Sat, 16 Feb 2019 00:00:00 +0000

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

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

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

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

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

Mon, 19 Nov 2018 00:00:00 +0000

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

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

動作例

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

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

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

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

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

ソースコード

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

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

参考

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

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

Draw on this website - 世界中からみんなでお絵描きサービス

Wed, 24 Oct 2018 00:00:00 +0000

Draw on this websiteは、昨日公開された、ブラウザ上に用意された巨大な一枚の紙。閲覧者のみんなが自由に落書きできるというwebサービスです。

すでにカオス状態ですね。

当初は描いた後5分で消えてしまうという黒の無料インクが使えたのですが、アクセス急増したためか、無料インクは今使えない状態になっています。

$0.99 払うと10000ピクセル描ける有料の「永遠インク (forever ink)」を買えば、まだお絵描きに参加できますが、さてどうなるか。見ていると有料のカラーインクで書いてる人はいますね。100円ぐらいなら、課金サービスに慣れた人が多い今、払って参加する人も結構いるということかもしれません。

今話題になっている間が稼ぎ時というか、もしサイトの人気が続くようでも、宣伝とか政治色の強いメッセージなどで埋まってしまうのではという気もしますが、どうなることでしょう。

via The Verge

映画のワンシーンのような画像解析ごっこができるブラウザゲーム Enhance.computer

Fri, 07 Sep 2018 00:00:00 +0000

ENHANCE.COMPUTERは、ウェブブラウザで遊べるシンプルなゲーム。

“Begin Investigation"をクリックして調査を開始すると、ノイズが載った画像が右側に表示されます。

この画像のどこかに隠されたコードを、カウントダウンされる時間内に探し出すのがゲームの目的です。

コードを探すには、“Zoom in”/“Zoom out"で拡大縮小、“Move"で上下左右に画像を動かし、「コードはここだ」と思ったら"Enhance”。ただ、この指示はボタンを押したりコマンドを入力したりではなく、画面(マイク)に向かって叫ぶことで行います。

こちらのツイートは、作者によるプレイイメージ。

元ネタは映画

多数の映画の中に、このような、誰へともなく指示すると画像から何かが見つかる、というシーケンスがあり、そのようなシーンをまとめた動画(Let’s Enhance)もあります。主人公が"Enhance"といえば、たいていの画像から手掛かりは見つかってしまいます。

このENHANCE.COMPUTERを使うことで、こういった映画の主人公の行動を、自宅や会社でも再現できる、というわけですね。

via The Next Web

World Cup Calendar Blocker - ワールドカップの試合時間にフェイクの予定を入れるため(だけ)のサイト

Mon, 18 Jun 2018 00:00:00 +0000

World Cup Calendar Blockerは、サッカーの試合の予定時間に、適当に作られたそれっぽい用事を追加するためだけに用意されたウェブページです。

6月18日 19:00 イングランド対チュニジアの試合時間にあわせた「バザーでデイブの手伝い」というスケジュールを、ワンクリックで Apple, Google, Outlook, Yahoo のカレンダーアプリに登録することができます。(クリック先でどう登録するかは、各アプリ依存です)

これを使って自分の公開カレンダーに予定をいれておけば、ワールドカップ観戦を誰かに邪魔される心配はなくなりますね。

この時期だけに絞った、しかし意外と需要はありそうな、手軽で便利なサービスではないでしょうか。

ただし、このサイトはイングランド代表専用となっています。列挙されている試合はすべてイングランド代表の試合と、決勝までの(作者がイングランド代表の試合に違いないと思っているだろう)試合のみ。

CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作

Wed, 09 May 2018 00:00:00 +0000

CSSだけで(JavaScript無しで)動くページを作る、というお題でこんなものが

“A"キーと"D"キーで車が左右に動いています。

こちらが作者のステファン・クックさん(Stephen Cook)による解説ページで、13行のhtml以外はすべてCSS、画像ファイルも使っていないということです。

CSS内に定義したデータから絵を描くのは、グラデーションとbox-shadow を使っています。1ピクセルごとに色を指定しているんですね。

キー入力の方はというと、こちらのCSSだけで検索エンジンを作るという記事(デモはこちら)にあるように、inputフィールドの value 属性に反応させればと思ったそうですが、ユーザーの入力に応じて value の値がアップデートされるということは無く、こちらの検索デモでは1行のJavaScriptを使っていることがわかりました。

クックさんは数週間前に間違ってブラウザのJavaScriptをオフにしてしまい、未だに戻す方法を見つけられていないということで、JavaScript を使わない方法を探さざるを得なかったよう。たいへんですね。

疑似セレクタ :valid, :invalid で、フォームフィールド内のタイプ内容がaを含むかどうかを場合分けし、さらにフォームフィールドにプレースホルダーを表示してるかどうかの :placeholder-shown と併せて、キー入力に応じて3値を見分けることにしたそうです。

レースゲームとして背景が動くところは、アルシデス・ケイロスさん(Alcides Queiroz)が公開していたマリオ風横スクロールにヒントを得たということです。

See the Pen Mario made only with CSS gradients - no JS, no embedded images/data URIs, no external images and using a micro HTML =) by Alcides Queiroz (@alcidesqueiroz) on CodePen.

AutoMute - ブラウザの音声再生を全部デフォルトオフにできるChrome拡張

Wed, 04 Apr 2018 00:00:00 +0000

AutoMute は、Chrome ブラウザからとにかく音が出ないようにできるブラウザ拡張です。

インストール直後の設定は、あらゆるサイトでの音声がオフになっています。すべてのタブにミュートのマークが表示され、マークをクリックしたり、拡張アイコンのメニューから選択したりすることで、個別に再生を許可することもできます。

YouTube など、サイト側で用意しているミュート機能とは別のレイヤで止まっているため、場合によっては拡張でアンミュートして、動画側でのアンミュートして、としないと聴こえないこともあります。

音楽等が突然再生されたりすると非常に困る、といった職場で働いているような人たちは、保険のために入れるといいのかもしれませんね。絶対にどんな音も鳴らなくていい、ということなら、OSのドライバを止めるとかイヤホンジャックを埋めるとかもありですが、この拡張であれば、音がしても大丈夫なサイトだけ許可したり、どうしても音を聴かなければいけない時だけ設定を変えて聴いたりすることができます。

via LifeHacker via TheNextWeb

ウィキペディアが昔懐かしいテキスト・アドベンチャーに

Wed, 05 Jul 2017 00:00:00 +0000

ケヴァン・デービスさんが公開した Wikipedia: The Text Adventureは、ウィキペディアの情報を元に世界中を回れる1980年代風テキスト・アドベンチャーゲームです。

タイトルからWikipediaにある地名で検索すると、その場所がゲームの開始地点となります。“Tokyo"だとこんな感じ

英語版ウィキペディアのTokyoにある写真が、8bit風の荒い画像に変換されて場面表示されていますね。“Tokyo"の場合は、5枚の写真を組み合わせた画像なので、なんだかわからないことになっていますが。

ゲームプレイは、Zork などのテキストアドベンチャーでおなじみ、テキスト入力です。“go north”(北へ行く)とやると、東京から北の座標を持つ別のウィキペディアの項目に移動できます。なぜか「西新宿五丁目駅」

東西南北や斜め方向へ移動でき、新しい場所ではそのウィキペディアの項目を元に今の場所が説明されます。元の方向に戻ろうとしても必ずしも前いた場所には戻れなかったりする理不尽さもあります。

> examine tower

など、examine(詳しく調べる)コマンドを使うと、その場所にあるもの(もないもの)も調べられて、Wikipediaから引っ張ってきた情報を使って何かしら返してくれます。take コマンドで拾えますし、inventory コマンドで持ち物の一覧を見ることもできます。

(東京タワーを調査して拾ってみた)

focus コマンドで8bit化される前の元画像を表示したり、wiki コマンドでウィキペディアの元ページを開いたりもできます。このあたりは help で出来ることを調べられますが、そのあたりも昔のアドベンチャーゲームそのままですね。

share でツイッター共有のリンクが出てくるのは昔無かった今風の機能でしょう。

ゲーム内容はウィキペディアの膨大な項目データを使って機械的にその場で生成されているため、テキスト・アドベンチャーとしては史上最大の広がりを持っていると言えるでしょう。今はそこにストーリーもゴールもありませんが、もう少し技術が進歩すると、ちょうど良いトリックや謎、目的やゴールなどまで生成できるようになったりするのかもしれません。

via PC Gamer

Snakisms - ヘビゲームで哲学を表現

Wed, 08 Mar 2017 00:00:00 +0000

SNAKISMS は、古き良きテレビゲームの一つであるヘビゲームをベースに、様々な哲学論・主義(ism)をテーマとしたバリエーションをつけたブラウザゲームです。

最初に、どのイズムで遊ぶかを選ぶと、そのイズムを表現したヘビゲームが始まります。

メニューの種類は上から以下の通り

anthoropomorphism (擬人化) リンゴも動く
apocalypticism (黙示信仰) 突然の終わり
asceticism (修徳主義) 欲望は悪、食べないと点
capitalism (資本主義) リンゴだってタダじゃないんだ
casualism (偶然論) すべては偶然(?)
conservatism (保守主義) オリジナル
determinism (決定論) 未来はすべて決まっている
dualism (二元論) カーソルは蛇の体を操るが、蛇の心を操るのは心
existentialism (実存主義) Wikipedia見たけどわからない
holism (全体論) すべてが蛇と一緒に動く
idealism (観念論) ヘビゲームを遊んでいると思え
monism (一元論) ヘビが神
narcissism (自己中心主義) ゲーム終了で新タブが開く(?)
nihilism (虚無主義) 蛇もりんごも何もない。メニューに戻ることすらできない
optimism (楽観主義) 世界はりんごだらけ。食べても成長しないが
pessimism (厭世主義) 世界は閉じていて、りんごはどこか他所に
positivism (実証主義) 見えているものしか信じない
post-apocalypticism (終末後主義) 荒廃した世界
romanticism (ロマン主義) りんごを食べるたびになんか立派なことを言う
stoicism (禁欲主義) 壁で死なない(?)
utilitarianism (功利主義) トロッコ問題(5人助けるなら1人死ぬのは可)

Hacker NewsのコメントやWikipedia から、なんとなくそれぞれの主義がどういうものか、それが各ゲームのシステムにどう反映されているか、わかったようなわからないような。

Google検索結果のアドレスを貼り付けると「一回前の検索ワード」が漏れる事がある

Fri, 30 Oct 2015 00:00:00 +0000

ジェレミー・ルービンさんがブログで、グーグル検索した結果を共有した際に一つ前に調べたキーワードが共有先に漏れる場合があると伝えています。

再現手順はこんな感じ。

ChromeやFirefoxブラウザのアドレスバーで「最初の検索」で検索
検索結果のページの検索ボックスで「次の検索」で検索
アドレスバーのURLの中に、「最初の検索」と「次の検索」の両方が入っている

検索キーワードが日本語などの場合は、URL中の表示はエンコードされてそのままでは日本語として読めない場合がありますが、これは変換して戻そうと思えば簡単にできます。

アドレスバーに、「最初の検索」が出ています。

簡単に確かめたいならアルファベットや数字だけで上記の再現手順を試してもいいでしょう。URLに出てきた一番目の検索ワードをそのまま目視できます。

このアドレスをメール等にコピー＆ペーストして送ってしまうと、「2番目の検索」で検索した結果を送ったつもりが、「最初の検索」という文字列もURLの中に含めて送ってしまうということです。

Internet Explorer でも、アドオンでアドレスバーの検索エンジンをGoogleにすると同じことになりますね。デフォルトのBing検索ではBingに行くので当然再現しませんが。

問題点と影響

ルービン氏の場合は、友人から送られてきた検索結果のアドレスを見てこれに気づいたようですが、その時にURLに含まれていた前の検索ワードは、その友人が文章中に書いているとても一般的な単語だったということ。その友人は、そのとても基本的な単語の意味を調べないとその文章が書けなかったのかもしれない、とルービン氏は推測し、このように関係のない検索ワードが他人に漏れてしまうのは恥ずかしい場合もあるだろう、と述べています。

簡単な単語の意味を調べてたぐらいならまだしも、検索してるのが人に知られたらもっと恥ずかしいキーワードというのもあるでしょうね。

あまりひどいものはご紹介できないのですが、これは2chから見つけたもの。

「金田一一」を検索した同じページで、続けて「金田一二三男」を検索し、それを掲示板に貼り付けたんですね。まあこのケースでは漏れたとしても害はありません。

これまでグーグル検索結果のページのURLを掲示板等に貼り付けたり、メールで他の人に送ったりした人は、もしわかるなら送ったURLに一つ前の検索ワードが含まれていないか、含まれていたとしたらバレて困るキーワードではないか、確認したほうがいいかもしれません。といっても、確認して困っても削除・撤回できない場合も多そうですけど。

完全ではないですが、たとえばGoogle検索で “www.google.co.jp/search?q=" を含めて検索すると、検索結果を貼り付けたページが見つかりますね。site: で限定すれば自分のブログを確認したりもできます。

検索結果を共有する機会、となると、ツイッターやFacebook の過去の書き込み、チャットサービスのログ、などもあるでしょう。

ルービン氏はこの問題についてグーグル社にも伝えたそうですが、「仕様です」「修正しません」という回答を受けたそうです。自分で気をつけないといけないようですね。

via Hacker News

英文を絵文字混じり文に変換する Chrome 拡張 Emoji Translate

Mon, 20 Jul 2015 00:00:00 +0000

GoogleのエンジニアMonicaさんによる、ブラウザ上で表示されているページの英文を絵文字に翻訳してくれるChrome拡張が Emoji Translate です。

左がオリジナルのページで、右が Emoji Translate ボタンを押した後の表示。これは Windows のChromeなので、絵文字は白黒で表示できない絵文字が多数四角(いわゆる豆腐)になっていますが、Mac 版のChrome だとカラー表示されるでしょう。

絵文字で表せるような単語だけが変換されるのですが、絵文字に慣れている人なら、全部英語で書いてあるよりも絵文字交じりの英文の方が大意がわかったりするかもしれませんね。

7月17日がいつのまにやら「世界絵文字デー」になっていたようで(絵文字の意味や絵文字規格の動向を解説しているサイト Emojipedia の人が提唱したそうです)、英語メディアではここ数日絵文字関連の記事が多数出てきています。ほとんどの記事はまだ「エ-モ-ジというのは日本語で絵の文字という意味で…」みたいな書き出しですが、この勢いだと emoji という言葉は完全に英語化しそうですね。

via VentureBeat

ASCII Cam - カメラの画像をリアルタイムでASCII Artに変換するサービス

Tue, 02 Dec 2014 00:00:00 +0000

ASCII Cam は、ブラウザ上でwebカメラの入力をアスキーアートに変換するサービスです。

Start cam を押すと、初回はカメラへのアクセスをしても良いかというのがブラウザから訊かれます。許可をするとウェブカムの映像がASCII文字だけで表示されます。

ソースコードもGithubで公開されています。

Chromeブラウザはどれだ? ホーム画面を使った挑戦

Fri, 19 Sep 2014 00:00:00 +0000

友人にパソコンを直してもらったら、直したついでにホーム画面にイタズラされた、という話。

http://imgur.com/LsyfST4

大量にChromeブラウザのアイコンがありますが、この中の一つだけが本当にChromeブラウザで、あとはクリックするとInternet Explorerが開くんだそうです。

via A friend returns a fixed computer with a terrifying challenge on the desktop background. | Chrome Game | Happy Place

ブラウザ戦争に搦め手から新規参入者現る。買い物ブラウザPerk

Fri, 19 Apr 2013 00:00:00 +0000

新しいwebブラウザPerkが登場しています。

ブラウザを使ったポイントシステム

Perkブラウザの特徴はというと、

何かを検索するたびにポイントが溜まる

何かを購入するたびにポイントが溜まる

何かをソーシャルメディアでシェアするたびにポイントが溜まる

そして、ポイントが溜まったら、それらを現金、ギフト券、飛行機のマイル、特定団体への寄付、等の形に変えて受け取ることができる。ということです。

動画によるサービス説明はこちら。

まあ、ものすごく斬新というわけではなくて、過去にもブラウザのツールバーや拡張の形で、ユーザーのオンラインショッピング行動を監視したり、指定のショップへ誘導したり、指定のショップでの購入に対してポイントやキャッシュバックを付与するという仕組みのサービスは多数有ったわけです。

でも、ブラウザ拡張やツールバーをインストールして使いこなせるようなユーザーには、むしろ、自分のネット閲覧情報が企業や店舗に筒抜けになる事に対して懐疑的な人が多いでしょう。そういうポイントプログラムから得られる利益と、自分のプライバシーを売り渡す不利益を比べたら、わざわざ参加することはないな、と判断できてしまうでしょうから「お得だからブラウザ拡張を入れてください!」みたいな呼びかけには乗らないことが多く、結果としてそれほど流行していないのだろうと思います。

しかし、「ブラウザをダウンロードしてインストールし、使う」、ということになれば、(それも高度すぎるというユーザーも居るでしょうけれど、)ツールバーやブラウザ拡張に比べれば、かなり敷居は低くなるでしょうね。ツールバーでもそういうのはありましたが、新規にパソコンを売る時に、プレインストールでPerkブラウザを入れて、デフォルトブラウザにする、といった手だってあります。

中身はChromeと同じ

このPerkブラウザ、彼らが一から開発したわけではなく、Chromeブラウザのオープンソース部分であるChromiumをベースとしたものだということです。速さや信頼性、ポイント獲得部分以外の使い勝手や機能はChromeと変わらないわけですね。

Chromeで新しいタブを開くと、よくアクセスするページやアプリ一覧などが表示されますが、Perkではここのところに、溜まっているポイントを確認できるPerkサービスのポータルが表示されるようです。

Pando Dailyの解説によれば、溜まったポイントが換金できるようになるには、90日間待つ必要があるそうです。この期間は、「とりあえず大きな買い物をしてポイントを受け取った後で、品物を返品をすることで代金も取り戻す」、といった悪意の利用者を防ぐために必要だということです。定期的な利用者で問題行動が無いとわかっている利用者については、将来的にこの期間を縮めるようなアイデアもあるということですが。

Hyperlapse - Googleストリートビューの好きな経路を高速で走らせる

Wed, 10 Apr 2013 00:00:00 +0000

Hyperlapseは、Googleストリートビューで指定した経路を早回し(time lapse)で再生してくれるというサイトです。

右側の検索ボックスに地名(渋谷とか)を入れて、二つの地点にマーカーを置き、ボタンを押すと、数分でlapse動画が生成され、その場で表示できます。(Chromeブラウザとそこそこの性能のパソコンを使うことが推奨されています)

ストリートビューの写真は飛び飛びにしかないので、早回ししないと道を走っているようにはなかなか見えにくいところもあると思いますが、ストリートビューが対応しているなら世界中のどこでも作れるのはいいですね。

こちらがデモ動画。

ソースコードはgithubで公開されていて、例えば、より高速なマシンをお持ちなら現在の最大60フレーム/秒を引き上げることなども可能、ということ。

via Hyperlapse tool lets you turn Google Street View into a stunning visual journey | The Verge

Fyels - ブラウザでファイル共有するサービス

Thu, 26 May 2011 00:00:00 +0000

Fyelsは、ブラウザ上でドラッグ&ドロップすると、9Gバイトまでのファイル・画像・動画などどんなファイルでもアップロードができて、それを他の人にURLで共有できるという単機能のサービスです。ドラッグ&ドロップでのアップロードということで、Internet Explorer8では動きませんでしたが、Chrome, Firefoxで動作を確認しました。アップロードしたファイルは、画像やpdfの場合はその場で表示されます。動画や音楽ファイルもフォーマットによってはページ内で再生でき、いずれにしてもダウンロードすることは可能です。ツイッターと連携させると、自分のページ(http://アカウント名.fyels.com/)がもらえて、そこでアップロードしたファイルの一覧を見る/見せることもできます。前にアップロードしたファイルの削除もできます。ツイッターアカウント@akky と連携させた一覧ページ。

# ツイッターと関連づけていない状態でアップロードしてしまったファイルは、消せないようにも見えますので注意

Amazon EC2/S3/Cloudfrontをバックエンドに、データベースにはRedisを使い、フロントエンドをHTML5と、新しい技術の組み合わせで作られているようですが、まだ収益化については考えてないということ。とにかくユーザーを集めてからと。一ヶ月で8万人のユーザーを集めたそうですが、サーバ代とか問題のあるファイルのアップロード・共有とか、いろいろ心配なポイントもある気がします。

via Fyels Debuts Unlimited Twitter File Sharing Tech News and Analysis - GigaOm

ブラウザ on akky@サイボウズラボ・ブログ

NopeCHA - ブラウザにCAPTCHAを解かせるブラウザ拡張

ScrollyVideo.js - ブラウザのスクロールと動画ファイルを簡単に同期できるライブラリ

隕石衝突シミュレーターで、地球上の任意の場所に隕石を落とす

PomoChat - ポモドーロタイマー+チャットルームで世界の知らない人たちと集中作業+交流

Floor796 - あらゆるmemeをアニメーションにして一つの拡大し続けるフロアに配置したアート

Plink! - ブラウザ上で世界の誰かと即興演奏

pixelguesser - あなたのwebデザインのサイズ感に挑戦するクイズ

Felt - 地図を作製・共有するためのWebサービス

hexyzland - 数式で六角形の図形表示を動かす遊び場サイト

Claddar - 一文字違いの英単語を当てていくブラウザゲーム

3D Order Book - 仮想通貨の売買状況をブラウザで高速表示

Worldle - 世界の国名を当てる Wordle インスパイア・クイズ

lofi.co - 集中できる作業環境をブラウザで提供するフリーミアムサービス

And. を5回続けて書くと Google Docs が落ちるバグが見つかる

地図表示ライブラリ Leaflet がウクライナ支援を呼びかけ

PoW! Capthca - クライアント側で重い計算をさせるCAPTCHA

THEREMIN - ブラウザやスマートフォンで鳴らすテルミン風楽器アプリ

Making History Sandbox - 世界の勢力図を編集できるブラウザエディタ

タイルを組み立てて日本語の文を作るサービス

Content Edit & Blur - ウェブページにボカシを入れるブラウザ拡張

No Paint - ランダムな筆致を選んで抽象アートを作るサービス

skip-silence 動画の無音部分を早送りで飛ばすブラウザ拡張ツール

Somoji - 絵文字で選ぶと合いの手効果音などを鳴らせるブラウザ拡張 ビデオ会議のおともに

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

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

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

送信側

受信側

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

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

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

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

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

動作例

ソースコード

参考

Draw on this website - 世界中からみんなでお絵描きサービス

映画のワンシーンのような画像解析ごっこができるブラウザゲーム Enhance.computer

元ネタは映画

World Cup Calendar Blocker - ワールドカップの試合時間にフェイクの予定を入れるため(だけ)のサイト

CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作

AutoMute - ブラウザの音声再生を全部デフォルトオフにできるChrome拡張

ウィキペディアが昔懐かしいテキスト・アドベンチャーに

Snakisms - ヘビゲームで哲学を表現

Google検索結果のアドレスを貼り付けると「一回前の検索ワード」が漏れる事がある

問題点と影響

英文を絵文字混じり文に変換する Chrome 拡張 Emoji Translate

ASCII Cam - カメラの画像をリアルタイムでASCII Artに変換するサービス

Chromeブラウザはどれだ? ホーム画面を使った挑戦

ブラウザ戦争に搦め手から新規参入者現る。買い物ブラウザPerk

ブラウザを使ったポイントシステム

中身はChromeと同じ

Hyperlapse - Googleストリートビューの好きな経路を高速で走らせる

Fyels - ブラウザでファイル共有するサービス

Somoji - 絵文字で選ぶと合いの手効果音などを鳴らせるブラウザ拡張ビデオ会議のおともに