「JavaScript」タグアーカイブ

ニュージーランドがない世界地図

blocks で公開されたスニペットMaps with New Zealand(ニュージーランドのある地図)は、ページの右下に常にニュージーランドを表示するというJavaScriptコードです。でもなんのために?

ニュージーランドのない地図(Maps without New Zealand on them) という名前の reddit 掲示板があり、ここではニュージーランドを描き忘れている世界地図の事例を、様々な人が報告しています。

「日本で見た」というのもいろいろと出てきます。

日本だって端っこの島国なので、仲良く両方ないケースも。

毎日のように投稿があるのがすごいですね。毎日世界のどこかで、ニュージーランドを忘れた世界地図が見つかっている。それぐらい忘れられている(笑)。

この reddit グループについてはBBCニュースも過去に取り上げています。このreddit掲示板を元ネタに、イギリスの街頭で人々に「この世界地図に欠けている国があります。さあどこでしょう?」というクイズを出す様子を伝えているのですが、とてもイギリスっぽい企画。

さらには、ニュージーランド政府自身のサイトで、存在しないページを表示しようとすると、エラーページとしてこんなのが表示されます。

「申し訳ありません。何かが足りないようです…」 一緒に表示されるのは、ニュージーランドのない世界地図…

忘れられることが多すぎるから慣れちゃっているのか、忘れられてしまうような遠くて小さな存在であることを逆に特徴として楽しんでいるのか。やたらに怒ったり抗議したりするのとは一味違う対応ですね。

via Maps Mania

人が見ていると恥ずかしがってちゃんと動かないソート関数

Lynnさん(@chordbug)がツイッターで公開したデモがこちら。

https://twitter.com/chordbug/status/1005701513719754752

「見てる時だけちゃんと動くソート関数を書いてみた」

JavaScript で書かれた sort() という関数に配列を与えて呼び出しています。

カメラに正面から顔が映っている状態では正しくソートされた結果が返ってくるのに対して、横を向いたリ顔を隠したりした状態で呼んだ時には、結果は毎回異なる適当な順番になっています。

もう一つの動画もあって、こちらは逆に「見ていると緊張して正しくソートできない」関数のデモ

https://twitter.com/chordbug/status/1005703638323429377

リプライでの質問に対して、Lynnさんはこのウェブページのソースコードを公開してくれています。

tracking.jsという人の顔を認識するライブラリのサンプルをベースに、顔が認識されている時のフラグを用意して、フラグがオンの時だけ正しくソートし、そうでない時はランダムに並べていることがわかります。

ブラウザのカメラ入力を許可し、JavaScriptコンソールで同じように sort() を呼び出すと、手元でも動かすことができました。

手近にあった顔の映った写真を使いました。仕組み上は視線の向きは関係ないので…

ブラウザ上のカメラ入力からの顔認識、こんなに手軽に使えるようになっているんですね。今回の「顔が映ってたら画面を見てることにする」というアイデアだけでなく、これまで無かったページ上のギミックが考えられそうです。

is-vegan 菜食主義者のための食品判定ライブラリ in JavaScript

肉や魚だけでなく、牛乳など直接は命を奪わない食材も忌避する完全菜食主義(ヴィーガン)のためのライブラリが is-
vegan
です。

利用例はこんな感じ。牛乳はダメで、豆乳はOKと。


import * as isVegan from 'is-vegan';

// example for single ingredient
isVegan.isVeganIngredient('soy'); // true
isVegan.isVeganIngredient('milk'); // false

作りとしては src/util/canbevegan.json と nonvegan.json に食材の名前が列挙してあるだけのシンプルなもの。これを訳せば日本語でも使えるかもしれないですね。レシピサイトの材料リストを見て、菜食主義対応かどうかを表示する、なんていう拡張を作ったりできそうです。

食べ物の規制ということだとイスラム教のハラールについても is-haral 的なライブラリが有ったりするのかな、とGitHub を探してみましたが、見つかりませんでした。あちらは単純に食材の種類で決まるわけではないので同じ手は使えないのかもしれませんね。

via Hacker News

「ギャンブラーの誤謬」ダイスプログラム

「ギャンブラーの誤謬(ごびゅう)」と呼ばれる言葉がある。コイン投げで表、表、表と連続して表が出ると、次は裏が出そうな気がする心理傾向である。実際は何回表が連続して出ようとも、次に表が出る確率は1/2である。なぜなら、コイン投げは、毎回独立事象(前回の結果と次のコイン投げは無関係)だからである。

ギャンブラーの誤謬 : カイジに学ぶ

現実のサイコロをまっとうにプログラムで再現すれば、乱数を使って毎回同じ確率で出るようになりますが、あえてギャンブラーが間違うような結果を出すサイコロを書くこともできます。Javascript で書かれたギャンブラーダイス

このダイスクラス、コンストラクタで与えた数字の面のサイコロとなります。6ならD6, 20ならD20。物理的な制約がないのでD7でもD13でも何でもできます。

このダイスでは、6面サイでたとえば1が出ると、次回は1が出にくくなります。何度も1が出れば、次に1が出る確率はどんどん下がっていきます。「これだけ1が続いたから、次は1は来ないだろう」というギャンブラーの思い込みが、本当に再現してしまうわけですね。

ボードゲームでこのようなダイスを用意するのは大変ですが、コンピューターゲームなら、こういった判定機を使うことで、プレイヤーがギャンブラーの誤謬のせいで「こんなはずはない」「騙されている気がする」と感じにくいようにすることもできるんでしょうね。実際やってるゲームがあるのかも。

via Hacker News
image credit: Flickr James Bowe

サスペンスかSF風のBGMをブラウザで作れるサイト

Jake Albaugh さんが公開した Musical Chord Progression Arpeggiatorは、楽譜や楽器の素養が無くても、和音の要素をばらしてそれらしく弾いてくれるというアルペジエーターを、ブラウザ上のJavaScriptで作ったというものです。

musical-chord-progression-arpeggiator

いろいろなスイッチを適当に変えれば、一つとないオリジナルな曲ができあがります。どれも同じように聴こえてしまうオリジナルさではありますが。

自分の作った動画に他人の著作権が及ばないBGMを簡単につけたいというときなどに、こういう自動作曲のサービスは使い良いのではないでしょうか。

ブラウザ上でのインタラクティブな音を扱うオープンソースライブラリTone.jsを使っています。codepen.io上に置かれたソースがそのまま実行されているので、やる気があれば自分用に改造することもできるでしょう。

via reddit

PDFで作られたブロック崩し

pdfファイルといえば様々な環境でなるべく同じに見えるようにレイアウトを固定した文書を配る時のフォーマットだと思いますが、そのpdf形式で作られたブロック崩しゲームが公開されました。

breakout.pdf
(Chromeブラウザでのみ動作)

画面下の青い部分でマウスを動かすと、自機を左右に動かすことができます。

pdf-breakout

Omar Rizwanさんによるソースコードおよび解説によると、PDFは仕様上はFlashやら音声やら動画やらJavaScriptやら、いろんなものを内蔵できるようになっているのだそうです。

ただ、ほとんどのPDFビューワーでは、そういった本流でない部分の仕様は実装していません。しかし、Chromeブラウザ内蔵のpdfビューワーでは、pdfがサポートしているJavaScriptの仕様のうちのいくつかが実装されているそうです。pdfからJavaScriptを呼び出せるというブログを見たRizwanさんは、使えるAPIだけを使って、ブロック崩しゲームを実装してしまった、というわけです。

このChrome pdfビューワの実装においても、データベースに接続するとか、接続されたモニターを検出するとか、外部リソースにアクセスするとか、そういったほとんどの機能は「サポートしない」となっていて、pdfの内部で計算をすることはできても、外部とのやりとりをする手段の多くは使えないのだとか。

この限定されたAPIから、テキストの背景色を動的に変えることはできないけれど、その枠の大きさと枠のスタイルは変えられる、ということで、ブロックの表示・非表示を制御したそうです。

また、マウスの正確な位置を検出する手段はないけれど、PDF作成時に配置したフィールドへのマウスカーソルの出入りは検出できるということで、これを使ってマウスの場所を取得しているそうです。

フィールドも後で追加することはできず、PDFに最初から持たせておく必要があるそうで、自機、ブロック、ボール、得点、残機のそれぞれを、大量のフィールドとしてPDF上に配置するスクリプトを書き、それでゲーム画面のPDFを生成させているということ。

Chromeブラウザ上のpdfビューワは、もともとGoogleがFoxitから買い取ったpdfビューワーを基にしたものらしいということで、Foxitの時代にその顧客がこの小さなJavaScriptセットを使っていたのではないか、とRizwanさんは推測しています。

via TheNextWeb