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

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

Facitars! - アバターアイコン生成ライブラリ

Fri, 07 Oct 2022 00:00:00 +0000

Facitars! は、一定のトーンに沿った形で与えたシードからランダムなアバターアイコンを生成してくれるライブラリです。

Facitars! のサンプルコードで生成したランダムなアバター群

アカウント名やメールアドレスをシードにすることで、他のユーザーと形や色が同じにならないユニークなアイコンをユーザーごとに自動で作れるため、会員登録制のwebサービスのデフォルトアイコンなどに使えそうです。

HTMLページに埋め込んだJavaScript から呼び出すことも、サーバーサイドから呼んで画像を作ることもできるオープンソースのライブラリの形式で提供されています。実際に作ってみました。

Facitars! で自分のアカウント名などをシードに作成したアバターアイコン

ユーザー登録サービスでも自分のアイコンを登録する手間は面倒と感じる人が多いようで、ユーザーが並んでいるコメント欄などでもデフォルトのアイコンが並ぶばかり、というサービスもありますね。こういったライブラリを使ってデフォルトアイコンでも個人別に違ったものにすることはいい対策かなと思います。

同様のアバタージェネレーターとしてはたとえばBoring Avatarsなどもあります。こちらはカワイイ系のアイコンを生成できますが、色のバリエーションは手動で与えるタイプのようです。

via reddit

Google表計算でWordle

Mon, 14 Mar 2022 00:00:00 +0000

本日のWordleクローンは、Google Spreadsheets で動く Wordle。

入力こそ左外側のセルですが(下段のキーボードは入力済のキーを示す役割のみ)、5文字の単語を入れるとsubmitボタンが現れ、ボタンを押すと数秒で正解判定が返ってきます。

正答を得てもSNS共有用のダイアログは出ません。そこは本家と違うところですが。

ゲーム画面の"PLAY"とは別のシート"SETTINGS"はデータ用で、現在プレイしている問題番号、マスクされた正答のリスト、利用できる英単語の辞書、が配置されています。

GitHub にホストされたソースコードでは、Readmeで詳細にスクリプトの作りについて解説があります。200行ちょっとの App Script で、解説を見ながら読み進めるとシンプルでよくできてるなと思いました。

本物のWordleは1日1回ですが、こちらのクローンはメニューに出た"Wordle"から"Start New Game"でいくつでも連続して遊ぶことができます。

via reddit

地図表示ライブラリ 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ユーザーがこの主張を目にするだろうことを考えると、遮断で見えないよりも情報量はありますね。

Game of Codes - プログラミングツールやライブラリの勢力を表した架空の世界地図

Fri, 21 Jan 2022 00:00:00 +0000

Game of Codes は、プログラミング技術の人気度を基に勢力争いを架空の地図に表すというプロジェクトです。

フロントエンドJavaScriptライブラリ2021の勢力地図(クリックでオリジナルを表示)がこれ。

React が帝国であるのに対し、Angular, Vue, jQuery が王国、Svelte が公国なのは「規模感」だそうなので、国名はデータからプログラムが決めているわけではないようです。

各国のサイズは過去12か月間の npm でのダウンロード数をベースにしているそうです。

What if #javascript libraries were countries?

Will the #React Empire dominate the world? Will the Kingdom of #Vue stop the invasion? Will Kingdom of #Angular regain its position?

See Game of Codes project ⚔️https://t.co/jrX3TOVMJf pic.twitter.com/BXz85tzXCq
— Michal Szymanski (@longevity_os) January 10, 2022

2015年版の地図と比べると、6年間でも勢力が変化していますね。Ember とか Backbone とか、そんなのあったなあ、という感じです。

CSSフレームワークについても同じような架空地図が公開されています。

昔、SNSの勢力図で似たようなものがありました。地図の形にすることで詳しくない人に大雑把な関係性が伝えられる場合もあるでしょう。

Checkboxland - HTMLのチェックボックスですべてを作れるライブラリ

Tue, 12 Oct 2021 00:00:00 +0000

Checkboxland は、HTML のチェックボックス要素を活用してしまくるための JavaScriptライブラリです。

HTML のチェックボックス要素と言えばこれ↓ ですが、

このチェックボックスを使って様々な表現を実行できます。

デモでは、文字が横に流れるマーキー、デジタル時計、アニメーション、QRコード表示、ライフゲーム、動画再生(!)、など様々な表現が、すべてチェックボックスだけで実現されています。

API documentによれば、チェックボックスを縦横に並べたグリッド上でグリッド上の各座標を調べたり書き換えたりする低レイヤAPIと、文字を大きく描く、スクロールさせる、画像や動画を描写させるなどの拡張APIが用意されています。プラグイン機構も用意されているので、自分で Checkboxland に新たな機能を追加することも可能です。

It's Friday night so of course I'm eating cookie dough and making a QR code out of html checkboxes that always tells you the current time.https://t.co/ZNjG0SWAce pic.twitter.com/Fywf7FZFpu
— Bryan Braun (@BryanEBraun) May 23, 2020

多数の要素を表示しようとするとページが重くなるのはチェックボックスであっても(当然)同じで、チェックボックスの数が1500個を超えるとチェックボックスの更新速度が問題となることから、32x32 や 64x16 といったサイズ以下のグリッドを推奨するそうです。

I made a webcam filter out of html checkboxes.

Try it out here: https://t.co/1lBHfEgmhw pic.twitter.com/tZrFOg3PWl

'-' という名前の、中身が無いのに70万回ダウンロードされてる謎のnpmパッケージ

Tue, 03 Aug 2021 00:00:00 +0000

- という名前の JavaScript/TypeScript パッケージについて警告を発している記事が話題となっています。

このパッケージ、中身はほとんど空で、Readme と、dev で TypeScript を動かせるようにするライブラリ群を呼ぶ箇所だけのもの。

しかし、この “-” を使っている他の npm パッケージが 50個以上あり、約一年前の公開時からのトータルのダウンロード数は72万回にもなります。

しかし、"-" を読み込んでいるパッケージを見てみても、"-" が必要そうには見えません。

警告記事では、この無名のパッケージが密かに使われるようになった原因が、npm コマンドのコマンドラインを打つときのミスタイプにあるのではないかとの仮説を立てています。

つまり、someFlag というオプションを使い

npm i -someFlag somepackage

と打つべきところで、

npm i - someFlag somepackage

と間違ってスペースを入れて実行したことで、"-" というパッケージがインストールされてしまい、その状態からパッケージを作って公開してしまったものが(50個以上)出てしまったのでは、ということです。

実際にわざと間違ってみたところ、someFlag の部分にマッチするnpmパッケージがあれば、特にエラーもなく"-“パッケージが入ってしまいます。

$ npm i - O knock-knock-jokes added 3 packages, and audited 4 packages in 1s found 0 vulnerabilities $ npm ls test-@ C:\work\temp ├── -@0.0.1 ├── knock-knock-jokes@1.7.0 └── O@0.0.9

yare.io - JavaScript で艦隊を動かし戦わせるゲーム

Wed, 02 Jun 2021 00:00:00 +0000

yare.io は、Javascriptプログラムを書いて宇宙戦を戦わせるwebサービスです。

ゲームは一対一の戦い、スピリット(spirit)というユニットを操作して、自分の基地を守りつつ敵の基地を破壊することが勝利条件です。

操作して、と言いましたがマウスなどで直接操作するわけではなく、JavaScript でスピリットがどのように振舞うかをプログラミングし、フィールドに投入して戦わせます。

チュートリアルがあるので、通しでやってみました。

基地の最寄りの恒星でエネルギーを補給させ、それを基地へと持ち帰らせます。

エネルギーをある程度運びこむと、基地から新しいユニット(スピリット)が誕生するので、自分のすべてのユニットを配列で回し、使えるユニットを増やしていきます。

自給ができるようになったら、一定範囲を索敵し、攻めてきた敵のスピリッツからエネルギーを奪うことで撃破します。チュートリアルではここまで。

この後は実際の戦闘フィールドに参加します。他のユーザーを待つこともできますが、相手が見つからない時や練習用に bot のプレイヤーも用意されています。

試しに増やした艦隊の半分を敵の基地へ送るプログラムを書き投入してみたのですが、待ち受ける敵の艦隊に各個撃破されてしまい散々でした。チュートリアルから実戦に行くには、もう少し凝ったプログラムを作らないといけなさそうです。

ゲームシステムはまだまだ荒く、スピリットの種類やルール、使える関数もこれから増えていくそうです。Discord チャンネルで作者や他プレイヤーと雑談することができ、現在の制限事項や今後の予定などについて知ることができます。

GitHub Pages で static な短縮URLサイト作成

Tue, 17 Nov 2020 00:00:00 +0000

nelsontky/gh-pages-url-shortener は、GitHub の静的ファイル公開機能 GitHub Pages を使った、短縮URLホスティングです。

clone して自分でもホストしてみました。s.akimoto.jp の DNS が GitHub Pages を指すように設定します。

https://s.akimoto.jp/ (説明用の index.html が開きます)

そして、GitHub issues にタイトルがURLになる issue を投げる

と、 issue 番号⇒URL の転送が実施されます。

https://s.akimoto.jp/1 ( issue のタイトルに書いた別のアドレスへ転送されます)

その動作原理は

CNAME で gh-pages ブランチを指させる
(短縮URLのパス)すべては 404.html に渡される
GitHub issues から JSON API でURL転換情報を JavaScript が取得し、(それに従って)転送
役に立つ?

ということ。なるほど。GitHub issues を、転送用の lookup table として使っているわけですね。この後転送したい短縮URLを増やすのは、issue を発行すればよいということです。更新や削除も同様。面白い事考えるなあ。

# GitHub API の公開アクセスには60回/時間の制限が掛かっているので、実用的には使えないでしょう。

via Hacker News

text-to-handwriting 手書き風ノートを生成するツール

Wed, 19 Aug 2020 00:00:00 +0000

saurabhdaware/text-to-handwriting は、手書き風フォントを使って手書きされたかのようなノートの画像を作れるオープンソースのツールです。

ローカルでサーバを立て、日本語の手書きフォントをアップロードすれば日本語の手書き風ノートを生成することができました。

ノートを撮影したように影をつけたり、スキャナで取り込んだ風に画像を加工したり、それをまとめてPDFにもしてくれます。

ノートの形式や文字の色、フォントサイズなどいろいろなパラメータをいじれるので、うまくやればパッと見には手書きで書いたようにしか見えないレポートを作ることもできるかもしれません。

手書きの提出物を求められることの方が問題という話もありますが。

Macintosh.js - Mac OS 8 エミュレーター in JavaScript on Electron

Thu, 30 Jul 2020 00:00:00 +0000

1991年発売の Macintosh Quadra 900 に載っていた Mac OS 8.1 のエミュレーターを、Electron アプリとしてパッケージし、Mac/Windows/Linux で動くようにしたプロジェクトが Macintosh.js です。

Mac OS 8 は Basilisk II というエミュレーターによるものということで、オリジナルの Mac OS 8 とは異なる実装なのでしょう。入っているゲーム類は 1997年の MacWorld で配布されたデモCD を取り込んだものだとか。デモCD なので配布することに問題ないということなのかな。デモCDを作った側も、20年以上経ってこんな形で使われるとは予想していなかったのでは。

[訂正 7/30]

Basilik II は68000系のエミュレーターで、Mac OS 8 の実装は無関係だという指摘をいただきました。その通りのようで、確認不足でした。

Basilisk IIはハードウェアエミュレータなのでROMとOS イメージは別途必要だった気が＞「オリジナルの Mac OS 8 とは異なる実装なのでしょう」 / https://t.co/kgSoldsJvJ
— Kazuho Oku (@kazuho) July 30, 2020

Demo CD のアプリを入れて配布、とあったのでいろいろ配慮されているのかと早合点しましたが、Macintosh Quadora を持っていてMac OS 8 のライセンスもある人、とかでないと動かすのは問題あるかもしれません。

[訂正終わり]

Basilisk II のC++コードを Emscripten で WebAssembly に変換し、JavaScript で動かす。バイナリファイル一つで起動できるようにそれを Electron でパッケージする。それで出来上がったのが1991年のマック環境の再現、というのが努力の無駄遣い感にあふれてていいですね。

Tafels.app - 子供の算数計算を鍛えるブラウザゲーム + ソースコード

Wed, 01 Jul 2020 00:00:00 +0000

Tafels.app は、ブラウザ上で動く計算練習のアプリです。

掛け算・足し算・引き算があり、それぞれ一番簡単なレベルだけアンロックされていて遊べます。

表示された計算式の答えを、9個の候補の中から時間内に選ぶというだけのゲーム。一定以上正解すると次のレベルがアンロックされて遊べるようになります。

答えの数字を入力するものに比べると本当の計算力を測る力は弱いかもしれませんが、スマートフォン上のブラウザで気軽に遊べるのはこちらの選択式のインタフェースかもしれません。

ソースコードが公開されています。JavaScript をコンパイルして実行コードに自身は含まないという特徴のSvelteで作られたフレームワークSapperを使って作られています。

via Hacker News

手書き風グラフを描けるライブラリ xkcd.chart

Mon, 19 Aug 2019 00:00:00 +0000

英語圏でエンジニアに人気の線画コミックサイト xkcd には、グラフを使ったジョークネタも頻出します。こんな感じ。

xkcd に出てくるようなグラフは、だいたい手書き風のテイストで描かれているのですが、その手書き風グラフを再現できるグラフ描画ライブラリが xkcd.chart です。

日本語も出ますね。日本語入れると凡例の枠がはみ出てしまうので、ソースの調整が要るかもしれません。xkcd 風のフォントも同梱されていますが、日本語ではデフォルトフォントになるでしょう。

円グラフ、折れ線グラフ、棒グラフを描くことができます。

ウィンドウズグラフの元ネタ

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

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

AgentMaps - 地図上で多数の人が動くシミュレーションを作るためのライブラリ

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

AgentMapsは、JavaScript 上で地図ベースの社会シミュレーターを作るためのライブラリです。

インタラクティブ地図作成のライブラリ Leaflet.js 上に構築されていて、

道沿いに建物を建てる
エージェントを地図上に配置
エージェントの建物間の移動をスケジュールする
エージェントの見た目を変える

などができるということ。町の中を行き来する住人のモデルを作って、住人間でうつる病気とその伝染率を定義すれば、伝染病がどのように広まっていくか、あるいは一定の範囲でとどまるか、といったことをシミュレーションできます。

こちらのデモでは、人々の移動の速度や、病気の伝染しやすさのパラメーターをスライダーで変化させて、全体の様子がどうなるかを観察することができます。

ツールの使い道ですが、たとえば、イベントで多数の人が集まってきた時に出店や通路を人がどう動くか、とか、ゾンビ物のお話を作る時に、感染が広まる様子をシミュレートしてそれを基に書くとリアリティが高まったりするのかなあ、とか、どうでしょうね。

都市の道路が向いてる方角を調べられるインタラクティブ地図

Wed, 18 Jul 2018 00:00:00 +0000

Road Orientations Interactive Mapは、都市の道路の方角を円形のヒストグラムにまとめたインタラクティブ地図です。

360度を64分割し、それぞれの方角を向いた道路の長さをカウントしていくと、表示中の都市がどの方角に向いた道路をどれぐらい持っているか、が右上に表示されます。

東京都心部を表示すると、こんな分布に。どの方角にも同じぐらいの長さの道路が存在する、つまり、特に方角など気にせず、ランダムに近い方角に道路が伸びているというのがわかります。

対して、京都を表示してみるとこんな結果に。ほとんどの道路は東西・南北に向いていて、それ以外の方角に向いた道は非常に少なそう。

こちらは札幌。札幌も碁盤目の街という印象でしたが、こちらは京都と違って東西南北の向きには向いてないのですね。また、場所によって四方の方角が異なっていて、集計結果としては多い方角は8つ出てくるのがわかります。

右下の検索ボックスで、世界中のどの場所でも表示できるのがいいですね。

この地図、OpenStreetMap のデータを使ったMapboxのサービスを使って描画されています。表示されている地図の範囲の道路データから方角と距離を取り出し、集計するのはコンパクトな JavaScript で済んでいます。

# 作者はMapboxの中の人のようです

作者のウラディミール・アガフォンキンさん(Vladimir Agafonkin)は、アメリカの主要都市について同様の円形ヒストグラムをまとめたVizual Statistix の記事を見て、「地図の任意の都市について簡単に同じように調べられたらいいな」と思って今回の開発を思い立ったということ。

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

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

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

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

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

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

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

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

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

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

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

via Maps Mania

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

Sun, 10 Jun 2018 00:00:00 +0000

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

I wrote a sorting function that only works when you're looking at it: pic.twitter.com/vNMmXW8qzL
— Lynn (finally free) (@chordbug) June 10, 2018

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

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

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

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

I also made a version that has stage fright… the “I can't do it if you're looking!!” sort pic.twitter.com/hoPNLR9bbR
— Lynn (finally free) (@chordbug) June 10, 2018

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

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

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

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

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

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

Wed, 07 Feb 2018 00:00:00 +0000

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

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

Fri, 21 Jul 2017 00:00:00 +0000

「ギャンブラーの誤謬(ごびゅう)」と呼ばれる言葉がある。コイン投げで表、表、表と連続して表が出ると、次は裏が出そうな気がする心理傾向である。実際は何回表が連続して出ようとも、次に表が出る確率は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をブラウザで作れるサイト

Tue, 12 Jul 2016 00:00:00 +0000

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

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

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

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

via reddit

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

Tue, 05 Jul 2016 00:00:00 +0000

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

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

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

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

Alex - 政治的に正しくない英単語の利用をチェックできるツール

Fri, 11 Sep 2015 00:00:00 +0000

Catch insensitive, inconsiderate writing (心無く、浅はかな文章を捕らえよう) というキャッチで公開されている Alex は、JavaScript/Node.js ベースで書かれた英文チェックツールです。いわゆるポリティカル・コレクトネス(PC)に反する、政治的や社会的に差別や偏見のある単語が使われていないかを見つけてくれます。

ウェブですぐに動作を試せるデモが公開されているので、それを見てみるのが一番早いでしょう。

「カメラマン」「チェアマン」みたいな男女差別につながる言葉、“he”とか"she"とかの男女を決め打ちで書いた主語、master/slave など人種差別の時に使われる表現、などを見つけ、赤でハイライトしてくれます。

下部には、「ではどんな単語を使えば問題ないのか」も表示してくれます。

# ワンクリックで全部置き換えるボタンもあっても良さそうなものですが

GitHub 上でソースは公開されていて、修正提案や用語の追加なども受け付けています。

JavaScript のソースをローカルでコマンドラインで動かすこともできるし、Atom や Sublime といった著名なテキストエディタや、gulp からマニュアルファイル等のチェックをするために呼び出すためのインテグレーションコードも紹介されています。

話題になっている Hacker News でも、GitHub の Issues でも、「なぜこれがダメなのか」とか「判定がおかしい」という文句が出ていて、問題の難しさが垣間見えます。

機械的に処理しているのだから誤検出も多く、指摘されたことを全部書き換える必要はない(しするべきでもない)ですが、僕ら非ネイティブからしたら「そんな問題があったのか/気にしてる人がいるのか」という情報を簡単に得られるという点で、英文のメールやリリースを書いたときに通してみる意味はあるように思います。

それが配慮なのか、それとも言葉狩りになってしまっているのか、検出結果を見て判断するのもまた非英語話者にはたいへんなことではありますが。

via Hacker News

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

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

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

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

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

Untrusted - JavaScriptをいじって先へ進むRogueライクゲーム

Tue, 08 Apr 2014 00:00:00 +0000

ローグライクゲーム、というジャンルがあります。Rogue(ローグ)を代表とする自動的に生成される迷路・迷宮から脱出するというゲームで、日本で有名なものでも、ネットハック、トルネコの大冒険、チョコボの不思議なダンジョンなど多数あります。

Untrusted は、そのようなローグ風ゲームのバリエーションなのですが、JavaScriptのコードを操作することでパズル的な迷宮を解き、先へ進むというのが最大の特徴です。

画面左の迷宮で、自分のキャラクター"@“を、階段”□“まで、カーソルキーを使って導かなければいけません。しかし、普通に上下左右に移動しただけでは、出口にたどり着くことはできなくなっています。

そこで、右側のコードに書かれた、迷宮を生成するJavaScriptのコードのうち、書き換えて良いという黒地の部分を変更し、Ctrl+5 で実行するとあら不思議、壁や出口の場所を書き換えてしまうことで、次の階へと進むことができるようになるというわけです。

いかだを使ったり鍵を探したりと、面ごとに違う趣向の障害が配置されています。

その階がどういうトラップなのか、どんな障害が設けられているかというヒントがJavaScriptのコメントとして書かれているので、解く際の参考になるでしょう。

壁を描画している部分の位置を書き換えるとか、出口の場所を移動するとか、で解ける面もありますが、後の面ではそれらを防ぐようなバリデーション・コードが追加されたりして、同じ手は2度使えないようになっています。

UntrustedのソースコードはオープンソースとしてGitHub上で公開されています。ソースコードを見れば現在のダンジョンが何階あるかはわかってしまうのですが。

# HackerNewsで紹介されたせいで、現在ゲームはちょっと重かったり、正しく動かなかったりすることがあるようです。その場合は、footerにリンクのあるミラーサイトで遊んだり、オープンソースですから自分のところで動かしたりということもできます。

via HackerNews

画面をスクロールするとオナラの音が出るJavaScriptライブラリfartscroll.js

Sat, 11 May 2013 00:00:00 +0000

fartscroll.js は、画面をスクロールさせるとオナラの音が出る、というジョークライブラリです。このページをスクロールさせてみてください。

どれぐらいスクロールさせた時に音が出るかも、パラメーターとして与えることができます。

ライブラリを作成・公開した The Onion は、日本でいう bogusnews みたいな、嘘ニュースで笑いを取ることで有名なサイトです。

# 今bogusnewsのトップにあるのも屁のニュースですね。流行ってるの?

その The Onion 技術チームが新たにリリースしたこのライブラリは、jQueryベースで作られていて、GitHubで公開されています。

slitscanner.js - 動画をスリットスキャンして一枚の画像に収めるライブラリ/ブックマークレット

Tue, 22 Jan 2013 00:00:00 +0000

「スリットスキャン」とは、こちらで解説されていますが、時間軸のある動画などを、フレームを動画上の場所ごとにずらすことで作られる特殊な映像効果、のようです。

アナログの時代はカメラの前に置いたスリットを動かすことで、デジタルになってからは動画編集ソフトで、こういった効果をつけているそうです。

プロが人の手で編集を加えれば、独特の不思議な映像はもちろんできるのですが、VimeoやYouTubeなどの動画サービスで再生している動画を、ブラウザ上でそのままスリットスキャンしてしまおう、というのがSha Hwangさんによるslitscanner.js。HTML5のビデオプレイヤーで再生できる動画をスリットスキャンで一枚の画像にまとめてくれるライブラリ(とライブラリを使ったブックマークレット)です。

上記ライブラリページのブックマークレットをブックマークしておいて、Vimeoで適当な動画を開き、右下の"Switch to HTML5 Player"で(Flashプレイヤーではなく)HTML5プレイヤーを使うようにしてから、ブックマークレットを実行すると、動画の再生にあわせてスリットスキャンした画像が作られていきます。

上の動画から作ってみたスリットスキャン画像がこれ。

フレームを取り込む間隔はスライダーで調整できますので、多少は編集的なこともできるかと。

もう一つためしてみました。

動きの早い動画だと細切れになりすぎて、よくわからない画像ができてしまいますね。Vimeoだけじゃなく、HTML5プレイヤーを使っていればYouTubeなどでも使えるのですが、YouTubeの場合は広告がFlash Playerで再生されるので面倒なことがあるとか。

うまくはまれば、長時間動画の雰囲気や盛り上がっているポイントを見つけるのに役立つかもしれません。

ブラウザで再生されている動画を、手元で加工することで面白くしたり発見したり、ということも、いろいろ出てくるのかもしれないですね。

via Slitscanning online videos

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

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

Facitars! - アバターアイコン生成ライブラリ

Google表計算でWordle

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

Game of Codes - プログラミングツールやライブラリの勢力を表した架空の世界地図

Checkboxland - HTMLのチェックボックスですべてを作れるライブラリ

'-' という名前の、中身が無いのに70万回ダウンロードされてる謎のnpmパッケージ

yare.io - JavaScript で艦隊を動かし戦わせるゲーム

GitHub Pages で static な短縮URLサイト作成

text-to-handwriting 手書き風ノートを生成するツール

Macintosh.js - Mac OS 8 エミュレーター in JavaScript on Electron

Tafels.app - 子供の算数計算を鍛えるブラウザゲーム + ソースコード

手書き風グラフを描けるライブラリ xkcd.chart

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

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

AgentMaps - 地図上で多数の人が動くシミュレーションを作るためのライブラリ

都市の道路が向いてる方角を調べられるインタラクティブ地図

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

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

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

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

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

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

Alex - 政治的に正しくない英単語の利用をチェックできるツール

関連

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

Untrusted - JavaScriptをいじって先へ進むRogueライクゲーム

画面をスクロールするとオナラの音が出るJavaScriptライブラリfartscroll.js

slitscanner.js - 動画をスリットスキャンして一枚の画像に収めるライブラリ/ブックマークレット