non vorrei lavorare

昔はおもにプログラミングやガジェット系、今は?

SLコマンドをEmscriptenでWeb化する 2014年秋編

こんばんは、次男は昼寝の寝起きも早く、さっきまで、皆で昼寝していて自分が先に起きて作業をしていると、早速元気に起きてきました。@kjunichiです。
 

はじめに

2014年春にslコマンドをEmscriptenでjs化してjsdo.itに公開したり、githubにもコードを上げた。当時は、右も左も分からない状態で、ただただslコマンドをEmscriptenで変換してWebブラウザで本物のslコマンドを動かしたい一心で作業をしていたので、あまり整理出来ていなかった。

また、当時よりEmscriptenも進化が進み、js化の為に使用していたPDCursesライブラリのjs版も更新されていたので、今回、これらに合わせて改めて、slコマンドのjs化を行った。

OSX Yosemiteで以下を試した。WindowsLinuxでも同様の事が可能なはず。

この記事を試すに当たり必要なもの

Emscripten SDK

以下のURLの指示に従い、インストールする。

source ./emsdk_env.sh

まで実行して、以降の作業はこのシェル内で行う事。

SDL

Emscripten本体でsdl2やsdl3対応が進んでいるような噂を目にした気がするが、sdlは1.x系で作業を進める。

brew install sdl

PDCurses-emscriptenが改名してた

PDCurses.jsになり、Readmeからビルド方法すらなくなってた!

でもbuild.shを読めばOK

git clone https://github.com/coolwanglu/PDCurses.js.git
cd PDCurses.js

emscripten portable SDKつかってsourceしてれば、emccのパスとか不要なので

build.shを以下の様に書き換えて実行する。

#!/bin/bash
#EM_DIR=~/src/emscripten
#PATH=$EM_DIR/system/bin:$PATH

pushd sdl1
#$EM_DIR/emmake make -j4 CFLAGS=-Os
emmake make -j4 CFLAGS=-Os
popd

mkdir web || true

build_demo () {
    pushd web
    cp ../sdl1/$1 $1.bc
    emcc -s ASYNCIFY=1 -Oz -o $1.html $1.bc --preload-file pdcfont.bmp
    popd
}

for demo in firework newdemo ptest rain testcurs tuidemo worm xmas sdltest; do
    echo "Building $demo"
    build_demo $demo
done

PDCurses.jsライブラリのビルド

./build.sh
cd ..

emscripten_sleepとASYNCIFYオプション

emscripten_sleepとASYNCIFYが導入されたので、emscripten_set_main_loopを使わずに、オリジナルのコードに近い書き方が出来る。

slコマンドの場合

#ifndef EMSCRIPTEN
        usleep(40000);
#else
        emscripten_sleep(40);
#endif

以前は、メインループを別関数に切り出して、その関数へのポインタを登録するコードにする必要があったが、ASYNCIFYオプションが導入されたので、めちゃくちゃスッキリ書けるようになった。

slコマンドをjs化する

Emscripten対応版のslのソースを用意する

git clone https://github.com/kjunichi/sl.git

PDCurses関連のファイルをコピーする

cd sl
cp ../PDCurses.js/pdcfont.bmp .
cp ../PDCurses.js/sdl/libpdcurses.a .

ビルド

emcc -s ASYNCIFY=1 -O2 -Wall -fPIC -I. -DEMSCRIPTEN -o sl.html sl.c libpdcurses.a `sdl-config --libs` --preload-file pdcfont.bmp

Js化したslコマンドを動かす

httpサーバーを立てる

平均年収の一番高いプログラム言語のPythonを使っとくか

python -m SimpleHTTPServer 8000

Ctrl-Zを押して、bgと入力して、裏で動かしておき、以降の作業を続ける。

Webブラウザを起動する

open http://localhost:8000/sl.html

Link

 

関連記事

 

7年前の記事

4年前の記事

3年前の記事

1年前の記事