bellbind

BASE64及びBASE32(RFC4648)のピュアECMAScriptによる実装(Uint8Arrayとstringの間でのエンコード/デコード)。 及び、テーブル文字列を渡すことで生成できるジェネリックBASE(Power of 2)の実装。

base64.js: ループ文とletを一切使わないBASE64実装(ビット演算)

base32.js: ループ文とletを一切使わないBASE64実装(数値演算)

basepow2.js: 文字テーブルを渡してencode()/decode()を作る汎用BASE Power-of-2 実装(数値演算)

BASE32では、5ビットと8ビットの最小公倍数の40ビットが処理単位になり、 ECMAScriptの32ビットでのビット演算を超えるので、52ビット整数まで正確に扱える数値演算を利用した。 n >> mはn / 2 ** m (小数部切り捨て)と同じである。 2進数で相互に相手の0部分にだけに1がある2数のビットORのn | mは、n + mと同じである。

ちなみに、16進hexも、ジェネリックなBASE2^2処理で行う仕様の一種である。

WHATWG Streams API](https://streams.spec.whatwg.org/)を使うための、簡単なコード例11個。 Promiseの非同期処理記述はthen()ではなく、asyncとawaitを用いるようにしている。

じつは、nodejsの組み込みAPI(fs, crypto, zlib)だけをつかった単純なコードで、gitコマンドで機能するgitリポジトリを作れてしまう。

以下この100行程度のスクリプトコード内の説明:

emptyRepo(): git init直後のような".git/"以下の基本ファイル構造を作る手続き

saveObject(): オブジェクトファイルは、タイプに限らず共通した、ファイル名と圧縮内容の仕様となっている。戻り値でSHA1ハッシュIDを返す。

saveBlob(), saveTree(), saveCommit(): gitオブジェクトの必要最小限の基本の３タイプblob,tree,commitのフォーマットにエンコードする処理をして、それをsaveObject()でファイルに書き込ませる。戻り値でSHA1ハッシュIDを返す。

blob: ファイルそのまんまのバイナリバイト列

tree: エントリが連続するバイト列。各エントリは(パス要素名で)可変長になる{モード文字列, 空白、UTF8パス要素名、NUL文字、20バイトSHA1ハッシュバイナリ値}のバイト列

commit: MIMEに似た形式のヘッダ＆ボディなテキスト(コメントつきtagオブジェクトも同じ形式である)。ヘッダエントリはcommit, parent, author, committer

setRef(): タグやbranchを表すrefをセットする手続き。最低限HEADで指定している"refs/heads/master"にcommitが参照されている必要がある。

exampleRepo(): 上記手続きを使って、リポジトリを構築する例。

ちなみに、js-git等のgitライブラリでもこの粒度での機能の呼び出しでリポジトリを操作する。(git addコマンドで操作するステージindexのような)更新差分で操作するような高レベル機能をもつAPIがあるものはlibgit2くらいである。

タブWebサーバReverse Proxyゲートウェイ の実用型の例として、get clone(pull/fetch)できるgit リポジトリHTTPサーバ。

demoページ

js-gitにはfetchクライアント側の実装はあっても fetchサーバ側の実装はないので、pktline処理を始めとして、やり取りはほぼすべてこのスクリプト上で実装した (refsResponse()とpackResponse())。 サーバとして機能することは、標準のgitコマンドでcloneできることで確認した。

実装の参考にしたのはhttp_proxy経由でキャプチャした、gitコマンドがやり取りするreq/resの内容である。 苦労したのはPACKデータの送信部分で、マルチバンドのエンコードが必要なことが、 解説したドキュメントになかったからである (4年前なので古いプロトコルなのだろう。reponseのcontent-typeも現行のgitコマンドと違っている)。

pktlineでの、サイズ文字4バイトの直後の1バイトに0x1や0x2を入れるのがマルチバンド(side-band)のパケットらしい。 バンド1(=直後1バイトが0x1)にPACKデータを一括して載せ、バンド2はgit コマンドで"remote:"で出てくる文字列が乗る という仕組みになっている。

タブWebサーバReverse Proxyゲートウェイ の実用型の例としてのファイル転送システムページ。

demoページ

端的に言えば、Firefox Sendのような機能を、 70行程度のブラウザ上でのスクリプトだけで実現したものである(中継点対策でのエンドポイントでの暗号化はしてないけど)。

このコードが短いのは、標準APIのFileとResponseがシームレスに扱えるからである(fileResponse()のコード)。

もちろん、ローカルのfile: なページからでも、このデモは機能する。

タブWebサーバ用汎用rever seproxyゲートウェイを使って、 シグナリングを実装したWebRTC Offer/Answer分割コードexampleの拡張example。

モバイルネットワークの(OS層から各中間者の全段階での)ネットワークタイムアウト設定が早すぎて(2、3秒)、コピペじゃ時間内にSDPやり取りするのは不可能なので、 仕方なく実装してみた。

Answer側ページ

Offer側ページ

シグナリングに応答するため。先にAnswer側を立ち上げ、WebサーバとしてのURLをreveerse proxyゲートウェイに確保する必要がある。 Offer側がそのURLを入力することで、接続フローが開始され、自動でSDPをやり取りするようになっている。 またOffer側でもタイムアウト防止のため、fetchを1秒間隔でポーリングしている。

とはいえ、モバイルネットワークだと、プロバイダによってはSTUNでのホールパンチングしたホールも安定確保されにくいので、 現状では(コメントアウトしてあるが)TURNサーバにフォールバックして中継しないと安定利用できない。

タブでWebサーバのreverse proxyゲートウェイの プロトタイプをもとに、 EventTargetやRequest/Responseといったモダンブラウザ標準APIで利用可能にしたものである。

さらに、公開鍵のハッシュ値と電子署名を使って、タブ固有のURLをreverse proxyで利用するようにしてある。 非公開鍵暗号処理ではサーバブラウザともに、ellipticを使っている。

そして、package.jsonの文字列に埋めてあるように、かんたんにherokuに設置可能にした。

内容:

proxyd.js: 汎用reverse proxyゲートウェイのnodejsサーバ(npm i && node proxyd.jsでポート3000で実行)

proxyd-browser.js: ブラウザ用のエンドポイントライブラリ(ReverseTargetをexport)

proxyd-browser.m.js: ES6モジュールなブラウザ用エンドポイントライブラリ(内容はproxyd-browser.jsと一緒)

tab-web-server-example.{html,js}: hello Worldコード例

コード例にあるように、エンドポイントのAPIはServiceWorkerの"fetch"イベント(FetchEvent)とまったく同じ構造にしている。 ユーザは、ブラウザ標準のclassであるRequestと Responseを処理するだけにしてある。

demoページ

js-gitをブラウザ上で使うコード例。

ここでは、ブラウザで直接使えるようにビルドしたjs-git-browserを、 unpkg.com経由で利用させてもらった。これはjs-gitのnodeスタイルの非同期APIをpromise化してあって、だいぶ扱いやすくなっている。

このコードは全体的に非同期呼び出しであるため、async functionにしてある。 リポジトリの内容をコード上で作り、作ったリポジトリからcommit起点のオブジェクトを集めて、コンソール上で表示している。

また、圧縮かつ通信上でのオブジェクト用の形式であるPACK形式のデータで取り出す例もつけている。 js-git固有のstream構造の読み込み利用例でもある。

js-git-browserには、通信用のパケット形式であるpktline処理用の部分はexportされてないので、 pktline化のコードも入れてある。

demo: Webコンソール上でログを確認できるだけ

ブラウザタブ上でもWebサーバ処理できるようにするための汎用のreverse proxyゲートウェイのプロトタイプ。 webserver-proxy間のやりとりにはWebSocketを用いている。

node proxyd.jsで汎用reverse proxyゲートウェイを起動

direct.htmlをブラウザで開くとタブがWebサーバになり、ページ上で出てくるURLにアクセス可能になる

ここで、direct.htmlは別にWebサーバ上に置く必要はなく、file:プロトコルで開いても機能する。

nodejsのREPLを、トップレベルでawait式が使えるようにしたコマンドラインREPL。

依存パッケージなしで、npxから実行可能にしてある。例:

$ npx https://gist.github.com/bellbind/b43e459a889a0214fcfc05a910cfa1b6 > console.log(await util.promisify(fs.stat)(".")) > let {foo = 50, bar} = await Promise.resolve({bar: 100}) > await new Promise(r => setTimeout(r, 500))

接続処理をOffer(呼び出し)側とAnswer(応答)側で分離して実装した、極力単純化したWebRTCプログラム。

巷にあるWebRTCコード例が難しくなっているのは、以下の要因のせいである:

Offer側とAnswer側を混ぜ、一体化したコードになっている

WebSocket等を使う、独自の自動シグナリングのシステムのコードを混ぜ込んでいる

ICE candidateの逐次受け渡しが接続処理フローに並列して行うコードを混ぜ込んでいる

カメラを用いたWeb media stream APIでのやり取りを行うコードを混ぜ込んでいる

仕様策定関係者による一次提供のコード例も含めて、とにかくごちゃまぜなコードが使われている。

そこで、このコードでは、

Offer側とAnswer側で別々のコードを用い

ICE candidateをすべて埋め込んだSDPデータを双方一度だけ相手に渡し

シグナリングシステム無しで、Offer->AnswerとAnswer->Offerの2つのSDPデータは画面上で手渡しさせ

データチャネルだけ用いてテキストメッセージを流し会う

ことで、WebRTCの呼び出しと応答を行ってP2Pでメッセージを流し合うだけにしてある。 接続フローで主体が変わるところで渡すデータを手渡しさせることで、 それぞれ100行未満のコードとなって全体を把握できるレベルに抑えている。

Offer側ページ

Answer側ページ

HMACというのは、ハッシュ対象データへ秘密鍵(もしくはnonce)を加える暗号ハッシュである。

ES6のPromiseは、拡張可能なclassとなっている。

ここでいう拡張可能というのは、Promiseの各メソッドで生成されるPromiseインスタンスは、 拡張されたclassのインスタンスになっているという意味である。 staticメソッドでも同様に拡張classのインスタンスになる。

単純な拡張可能Promise class例として、finally()メソッドをつけたFinally Promiseと done()メソッドをつけたDone Promiseを独立して用意した。

ES6のPromiseは、拡張可能なclassとなっている点で興味深いものである。

ここでいう拡張可能というのは、Promiseの各メソッドで生成されるPromiseインスタンスは、 拡張されたclassのインスタンスになっているという意味である。 staticメソッドでも同様に拡張classのインスタンスになる。

cancel()メソッドを拡張したPromise、Cancellableを作ってみた。 ただcancel()メソッドがあるだけではなく、staticなall()やrace()も キャンセル対応にしている(race()は確定時点で他をcancelするようにしてある)。使い方はexample-basic.js参照(コンストラクタに渡す関数の戻り値でキャンセル実行時に呼びだされる関数を返す仕様)。

ちなみに、Promiseのようにclassを拡張可能にするには、インスタンス作成のコンストラクタは、 thisを起点に取り出した関数でnewする必要がある。 決して、ベタでclass名を埋めてははいけない。

鳥の群れの動きをシミュレートするモデルBoidのcanvas実装。

demo

まず(２次元)ベクトル関数を用意し、それを使ってBoidを実装すれば、コードは非常に単純明快になる。 Boidというのは、

(敵から逃げる)

接触を避ける

周りについていく

群れの中央によるようにする

(ランダムにブレる)

OpenGLのkhronosが提唱する3Dモデル(シーン)フォーマットとしてglTFがある。 COLLADAがモデル編集用であるのに対し、glTFはシーンのアウトプットフォーマットに位置する (pngの3D版みたいな位置にしたいらしい)。

SHA512アルゴリズムをWebAssembly Text Formatでコーディングしたもの。

sha512noupdate.wast: コード生成するupdate()関数の実装を含まない手書きwastプログラム (これ単体でもビルド可能で、関数もjavascript側から呼び出しチェックできる)

sha512update-call.js: update()関数の実装wastコードを生成するJavaScriptプログラム。sha512noupdate.wastに置いたサブ実装を呼び出す実装

sha512update-reduce-local.js: update()関数の実装wastコードを生成するJavaScriptプログラム。一切関数呼出ししない実装でかつローカル変数を使いまわして変数数を減らしたコード。

sha512.js: wasmモジュールをcommonsjsモジュール化するコード

main.js: coreutilsのsha512sumと同じアウトプット、チェックをするコマンドラインコード

package.json: コード生成及び、binaryenのwams-asを使うビルドスクリプト。npx実行にも対応