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

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

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

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

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

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

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

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

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.

こちらの解説では、CSSグラデーションで各ピクセルを時間に応じて変化させるというのを全ピクセルに対して行うことで、CSSだけでの横スクロール表示を実現しているようです。ソースコードを見ると、Stylus で描画するスプライトのデータをひたすら大量のCSSコードに展開しているのがわかります。生成後のCSSを見るとすごいことになってます。

via TheNextWeb

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

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

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

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

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

via LifeHacker via TheNextWeb

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

ケヴァン・デービスさんが公開した 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 – ヘビゲームで哲学を表現

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 から、なんとなくそれぞれの主義がどういうものか、それが各ゲームのシステムにどう反映されているか、わかったようなわからないような。

via Hacker News

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

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

再現手順はこんな感じ。

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

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

google-search-leaks-previous-keywords

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

google-search-leaks-previous-keywords-enlarged

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

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

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

問題点と影響

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

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

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

google-search-kindaichi

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

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

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

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

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

via Hacker News