WebWorker調査メモ

Webブラウザ上でマルチスレッドを実現する方法を調査していたところ、WebWorkerなるものを見つけた。当初探していたものと異なるが、メモリ空間の分離ができ、他のところで役立ちそうなため、メモ。

developer.mozilla.org

特徴

  • ブラウザ上のJavaScriptは１つの実行スレッドを持つが、WebWorkerを使うと、別のスレッド(Worker)を作ることができる。
  • Workerで重たい処理を実行していても、メインスレッドはブロックされず、DOM操作を行うことができる。
  • WorkerからDOMを操作することはできない。 その他、Worker内で利用できるAPI、機能には制限がある。

developer.mozilla.org

  • MDNではしばしばスレッドという表現がされるが、少なくともJavaScript上ではメインスレッドとWorkerでメモリ空間が別々。プロセスといったほうがイメージが近い。
  • メインスレッドとWorkerはメッセージパッシングで通信する。渡したオブジェクトはコピーされる。そのためメインスレッドで編集してもWorkerには影響ない。逆も同じ。
  • 基本機能はスマートフォン環境を含め、多くのブラウザでサポートされている。SharedWorker(iframe,異なるwindowでworkerを共有する)などの凝った機能はIEやスマートフォンでサポートされていない場合が多い。

参考リンク

MDNのドキュメント、APIなどの一覧。 developer.mozilla.org

チュートリアル形式のドキュメント www.html5rocks.com

JTF2016で発表してきました

7/24にJuly Tech Festa 2016で以下の内容で発表をしてきました(一部画層を差し替えています)。

www.slideshare.net

www.youtube.com

www.youtube.com

  • 思っていた以上に見に来てくれる人が多かった。
  • HEARTBEATSさんのご厚意で発表後展示できた。それにより、会話ができた人が多かった。
  • 発表動画を撮っていなかったのは失敗だった。

RaspberryPi 32台で可搬型クラスタ実験環境を作る(ハードウェア編)

PROCESS WARPの実験やデモ用にある程度の台数で移動可能なクラスタ実験環境があったら凄く良いだろうなということで、RaspberryPiを32台利用した、クラスタ実験環境を作りました。

f:id:llamerad-jp:20160708164250j:plain

追記：JTF2016登壇時に現物持参する予定です。興味ある方見に来てください。

2016.techfesta.jp

コンセプト

実験用途
  • PROCESS WARPの分散機能を実験するため、ある程度の台数のノードを用意する。
  • 自動負荷分散の実験をするために、ここのマシンに性能差があると良い（PROCESS WARPはヘテロ環境を目標にしている）。RaspberryPiは設定ファイルの書き換えで簡単にCPUの速度を調整できる。
  • ノードごとに通信帯域を変えたい。Linux環境であれば、iptablesなどで帯域制限ができる。
デモ展示用途
  • せっかく作るので、デモや展示などが行えるように持ち運びができるようにする。
  • 音楽機器用のラックケースはサーバ用のそれと規格が同じため、持ち運び可能なシステムに流用可能。

製造

土台準備

RaspberryPiを8台×4グループ毎に固定する板を作ります。 3mm厚のアルミ板を440mm×70mmで切りました。アルミ板はアクリルカッターで切りました。

f:id:llamerad-jp:20160708151748j:plain

1枚切るのに2時間以上かかり、3日ほど指がおかしくなります。東急ハンズが近くにあるならそちらで加工してもらえるようです(後から知った)。 土台のサイズは入手可能なケースの奥行きなどに依存します。RaspberryPi同士が近すぎると配線ができなくなったりmicroSDの交換ができなくなります。120mmピッチ(長辺85mmなので35mm間隔)での配置はピンセットを使えばギリギリなんとななるレベルです。 ネジ穴は公開されている図を元に4つづつ開けました。しかし、配線取り回しの関係上利用した穴は3つづつでした。

http://doc.switch-science.com/schematic/RaspberryPi/Raspberry+Pi+B%2B+Layout+Model.pdf

RaspberryPiの組み立て

通りすがりの安藤さんが、「これだけあるなら初期不良ありそう」とのこと。確かにそうなので据え付け前に1台ずつ動作を確認します。HDMI出力、OS起動、ネットワーク接続は確認しましょう。どのみち必要なのでRaspbianをここでインストールしてしまいます(あとからmicro-SDの挿抜もできるけど面倒)。ヒートシンクも付けます。

f:id:llamerad-jp:20160708152807j:plain

スペーサー(15mmを2つ使って30mm相当)とRaspberryPiを交互に重ねます。スペーサーと基盤の間には安全のため絶縁用のナイロンワッシャーを挟みます。 この時、給電用USB隣の穴は使いません。LANの配線や、micro-SDの挿抜に凄く邪魔になります。

www.youtube.com

8台×4グループできました。土台に付けます。

www.youtube.com

土台ごとトレイに載せてしまいます。

f:id:llamerad-jp:20160708160407j:plain

固定位置を確認するため、一旦ケースに格納します。 背面にファンを付けるつもりなので、干渉しない位置を見定めます。 土台が前後に動かないように、小さな溝を掘ります。ドリルで簡単に掘れます。

f:id:llamerad-jp:20160708161629p:plain

左右のスペースにUSB充電器を設置します。少しでも放熱しやすいように交互に配置します。

ラックへのマウント

配線前にRaspberryPi以外の機器をマウントしてしまいます。

f:id:llamerad-jp:20160708163143j:plain

可搬性とのバランス上、前面に24ポートスイッチ×2台、背面にルーターとコントロール用PCをマウントしています。32台(コントロール用PCあわせて33台)になると、家庭用の機器では物理的にコネクタが足りません。DHCPもIPをそれほど多く発行出来ません。ネットブートなどを考えると細かな設定が可能なサーバ用のスイッチ&ルータを用意したほうが無難です。

f:id:llamerad-jp:20160708163352j:plain

背面用排気ファンです。ファンコントローラーなどは利用していないので、ワンルームで動かすと音が気になります。

配線

microSDを挿していない場合はLANの前に指す必要があります。 LANとUSB、どちらから作業しても難易度はあまり変わりませんでした。

f:id:llamerad-jp:20160708163547j:plain

↑USBだけ配線した状態。「トマトみたい」とのこと。

f:id:llamerad-jp:20160708163841j:plain

↑ネットワークも配線。「そうめん食べたい」とのこと。

f:id:llamerad-jp:20160708151415j:plain

↑全て配線したところ。

f:id:llamerad-jp:20160708163918j:plain

↑ラックに格納してみたところ。

  • トレイの抜き差しを考えるとLANは1mくらい。抜き差しをしない場合、最短50cmくらい？
  • RaspberryPi自体が100Mbpsなので、高級なケーブルより取り回しの楽な細いケーブルを選んだ。
  • USBケーブルは30cmほどあれば足りる。
  • RaspberryPi3を利用する場合、2.5Aを通せるUSBケーブルは思ったより少ない。少ない選択肢の中から1mのものを選んだら余って邪魔。
  • USB充電器の電源ケーブルが太くて長くて邪魔になる。河村さんの提案で短いものに変えただけでかなりスッキリした。

f:id:llamerad-jp:20160708164201j:plain

電源ケーブル類です。タップはケースの蓋に両面テープで接着しました。 可能であればスイッチ類の電源ケーブルも短いものに変えたいところです。

完成

f:id:llamerad-jp:20160708164250j:plain

通電することを確認します。 ネットワークやOSなどの設定をしていない場合、ブツ切りしかできません。microSDのイメージが破損すると、ピンセットを使っての交換作業になるので要注意です。

振り返り

  • 移動は可能ですが結構重いです。多分30Kg位あるのでは？普通のキャリーカートでは耐えられません。
  • 可搬性が必要ないのであれば全て前面配置にしてしまったほうが良いです。IntelのNUC5i7は1Uにぎりぎり収まらないです。NUC6i7なら1U未満なので、入手可能であればそちらのほうが良いかも。

CMakeの設定ファイルを削除する

CMakeを実行すると作業用ファイル？が大量に生成される。 削除する場合、以下のコマンドで削除できた。

find . -iwholename '*cmake*' -not -name CMakeLists.txt -delete
  • CMakeList.txt以外のファイル名にcmake文字列を含むものを削除している。
  • 削除したくないファイル名にcmake文字列が含まれる場合、 除外する必要あり。

引用元 stackoverflow.com

RaspbianでBoost 1.60を野良ビルドする

Clang 3.8につづいてBoost 1.60もコンパイル & インストールするというシンプルなお話です。

前提

  • Raspberry Pi 2 Model B以上(多分3 Model Bでも行けると思う)
  • Raspbian(update, upgrade済み)
  • ほかのBoostとの共存は考慮していません
  • Clang 3.8

準備

以下のページからboostのアーカイブをダウンロード(boost_1_60_0.tar.bz2)して、作業ディレクトリに保存しておきます。

Boost Downloads

また、メモリを大量消費するので、Xを使わず、フレームバッファコンソールかSSH経由での作業をオススメします。

コンパイル & インストール

$ sudo apt-get install libicu-dev libicu48 python-dev libbz2-dev
$ cd <作業ディレクトリ>
$ tar vjxf boost_1_60_0.tar.bz2
$ cd boost_1_60_0
$ ./bootstrap.sh --with-toolset=clang --with-libraries=all --with-icu --prefix=<インストール先>
$ ./b2 toolset=clang install -j2 --prefix=<インストール先>

以上です。オプションさえわかっていれば割と行けますね。(オプションの調査、確定が面倒なんですけどね。)

参考にしたサイト

boostjp.github.io

RaspbianでClang 3.8を野良ビルドする

2016年3月に日本でもRaspberry Pi 3 Model Bが販売開始されました。しかし、オフィシャルから提供されているRaspbianのC/C++コンパイル環境では依然gcc 3.8または、clang 3.0までしか提供されていないようです(自分はRaspberry Pi 2 Model Bまでしか確認していませんが、OSイメージは同じなため多分状況変わらず)。そのため、C++11の正規表現やC++14の利用が難しい状況です。そこで、Raspbian上にLLVM, clang, libc++ 3.8を適用し、ビルド環境と標準ライブラリをバージョンアップします。

前提

  • Raspberry Pi 2 Model B以上(多分3 Model Bでも行けると思う)
  • 空きストレージ容量4GByte以上
  • Raspbian(update, upgrade済み)
  • オフィシャル提供のclang, libc++との共存は考慮していません。

作業前に

LLVMらのコンパイル作業はクロスコンパイラではなく、Raspberry Pi実機上で行いました。 コンパイルには大量のメモリが必要になるため、作業前に使っていないサービスを停止しておいてください。 Xも起動せず、フレームバッファ・コンソールかSSHでの作業をオススメします。

<インストール先>パスについて

何も設定しない場合、デフォルトのインストール先は/usr/local以下となります。 大体の場合、そのままでOKだと思いますが、cmakeは野良ビルドしたものと既存のものが混在するため、パスを明示しています。

cmakeのコンパイル & インストール

Raspbianのaptでインストールできるcmakeではバージョン不足でコンパイルができません。 先にcmakeを用意します。

$ sudo apt-get install pkg-config automake libtool libffi-dev libatomic1 gcc-4.8 g++-4.8 zlib-bin
$ mkdir <作業ディレクトリ>
$ cd <作業ディレクトリ>
$ wget https://cmake.org/files/v3.5/cmake-3.5.0.tar.gz
$ tar vzxf cmake-3.5.0.tar.gz
$ cd cmake-3.5.0
$ ./configure --prefix=<インストール先>
$ make -j2
$ sudo make install

LLVM, clang, libc++のコンパイル & インストール

コンパイル作業はオフィシャルのマニュアルに従い進めます。一部オプションをRaspbian用にカスタマイズします。 Getting Started with the LLVM System — LLVM 3.8 documentation

LLVM, clang, libc++のコンパイル & インストールはいっぺんに行います。 libc++abiはコンパイルに失敗したので外しています。

$ cd <作業ディレクトリ>
$ wget http://llvm.org/releases/3.8.0/llvm-3.8.0.src.tar.xz  http://llvm.org/releases/3.8.0/cfe-3.8.0.src.tar.xz http://llvm.org/releases/3.8.0/compiler-rt-3.8.0.src.tar.xz http://llvm.org/releases/3.8.0/libcxx-3.8.0.src.tar.xz http://llvm.org/releases/3.8.0/openmp-3.8.0.src.tar.xz
$ tar -Jxvf llvm-3.8.0.src.tar.xz
$ tar -Jxvf cfe-3.8.0.src.tar.xz
$ tar -Jxvf compiler-rt-3.8.0.src.tar.xz
$ tar -Jxvf libcxx-3.8.0.src.tar.xz
$ tar -Jxvf openmp-3.8.0.src.tar.xz
$ $ mv cfe-3.8.0.src llvm-3.8.0.src/tools/clang
$ mv compiler-rt-3.8.0.src llvm-3.8.0.src/projects/compiler-rt
$ mv libcxx-3.8.0.src llvm-3.8.0.src/projects/libcxx
$ mv openmp-3.8.0.src llvm-3.8.0.src/projects/openmp
$ cd llvm-3.8.0.src/
$ mkdir build
$ cd build
$ <インストール先>/cmake -G "Unix Makefiles" -DCMAKE_INSTALL_PREFIX=<インストール先> -DCMAKE_BUILD_TYPE=Release -DCMAKE_C_COMPILER=gcc-4.8 -DCMAKE_CXX_COMPILER=g++-4.8 -DLIBCXX_CXX_ABI=libstdc++ -DLLVM_TARGETS_TO_BUILD="ARM;X86;AArch64" ..
$ make -j2
$ sudo make install

メモリ不足でmakeに失敗する場合、-j2オプションを外してください(-j2で2並列にしています。)

インストール先として/usr/local以外を指定している場合、環境変数PATH, LD_LIBRARY_PATHなどにインストール先を追加します。 .bashrcなどに以下のように追記します。

export PATH=$PATH:<インストール先>/bin
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:<インストール先>/lib

記載内容を以下のとおり反映します。

$ source ~/.bashrc

まだ、ldconfigのパスも追加しておきます。 /etc/ld.so.conf.d/clang.confなどのファイルを作成し、以下のようにパスを追加します

<インストール先>/lib

記載内容を以下のとおり反映します。

$ sudo ldconfig

確認

最後にインストールしたclangが有効になっているか確認します。

$ clang --version

Webブラウザで使えるいろんな処理系

CMU #36で「Webブラウザで使えるいろんな処理系」というタイトルでLTをしてきました。

www.slideshare.net

発表者数20人以上で、クオリティも非常に高い満腹会でした。

lab.designsatellites.jp