Emscripten でのファイル入出力 Mozilla Tech speakers N.Shimizu ([email protected] / @chikoski) Emscripten Night!! #3 @Drecom (2017/02/22) 

https://hacks.mozilla.org/2017/02/webassembly-will-ease-collaboration-on-next-generation-video-codecs/ 

Firefox 52 で正式サポート Chrome57で正式サポート IUUQTFOXJLJQFEJBPSHXJLJ(PPHMF@$ISPNFNFEJB'JMF(PPHMF@$ISPNF@GPS@"OESPJE@*DPO@TWH
IUUQTDPNNPOTXJLJNFEJBPSHXJLJ'JMF.JDSPTPGU@&EHF@MPHPTWH
IUUQTFOXJLJQFEJBPSHXJLJ8FC,JU 開発中 https://webkit.org/status/#specification-webassembly AngryBotsの動作デモ動画が
 公開済み https://blogs.windows.com/msedgedev/2016/03/15/ previewing-webassembly-experiments 

• 型付きスタックマシンの提供する命令で 関数を定義します • 利用できるデータ型： i32, i64, f32, f64 • 関数本体は抽象構文木として、
 code section に記述されます • type section には、関数のシグネチャが 記述されます WASMはモジュールを定義します IUUQTSTNTNFXBTNJOUSP 

• a = 1 + 2 * 3 は、
 このように表現されます • スタックマシンの命令 • set_local • i32.add • i32.mul • i32.const WASMで定義される抽象構文木 


FNDD
P
JOEFYIUNM
T
8"4.
IFMMPD 

項目 Emscripten によるサポート 標準ライブラリ (libc / libc++) Emscriptenがlibc/libc++をコンパイルしてリンク リンク static link / dynamic link ファイルシステム POSIX ファイルシステムをエミュレート アセット JSに埋め込み / XHRへ変換 OpenGL WebGLに変換 

Emscripten の提供するファイルシステム • MEMFS が標準のファイルシステムです • 他のファイルシステムは、mount して利用します "QQ MJCD MJCD "TZODISPOPVT
'JMF
4ZTUFN
"1* FNTDSJQUFOI 4ZODISPOPVT
'JMF
4ZTUFN
"1*
MJCSBSZ@GTKT 803,&3'4 /0%&'4 *%#'4 .&.'4 

WPJE
DBU '*-&
GJMF \


MPOH
TJ[F




DIBS
CVG


GTFFL GJMF

4&&,@&/% 


TJ[F

GUFMM GJMF




CVG

DIBS
 NBMMPD TJ[F

TJ[FPG DIBS 


NFNTFU CVG
=
TJ[F 


GTFFL GJMF

4&&,@4&5 


GSFBE CVG
TJ[FPG DIBS
TJ[F


GJMF 


QSJOUG T
CVG 


GSFF CVG 
^ このコードはそのまま動きます 

'*-&
GJMF
GJMF

GPQFO GJMFOBNF
B 
GXSJUF NFTTBHF
TJ[FPG DIBS
TUSMFO NFTTBHF
GJMF 
GQVUD =O
GJMF 
GDMPTF GJMF  このコードもそのまま動きます 


͉̭̭
QSPD
̯


͉̭̭
TFMG
̯


̯


͉̭̭
GE
͉̭̭
EFW
̯


͉̭̭
TUEFSS
̯


͉̭̭
TUEPVU
̯


͉̭̭
TUEJO
̯


͉̭̭
TIN
̯


̯


͉̭̭
UNQ
̯


͉̭̭
VSBOEPN
̯


͉̭̭
SBOEPN
̯


͉̭̭
UUZ
̯


͉̭̭
UUZ
̯


͉̭̭
OVMM
͉̭̭
IPNF
̯


͉̭̭
XFC@VTFS
͉̭̭
UNQ
初期のディレクトリレイアウト • /dev や /proc があるのも興味深いです • /dev/random や /dev/null も実装されています • これらのデバイスファイルを読み書きできます • 初期のカレントディレクトリは / （ルートディレクトリ） • FS モジュールのメソッドで JavaScript からもアクセスできます 

%#@/".&
&SSOP&SSPS
'4/PEF
'44USFBN
BCTPMVUF1BUI
BMMPDBUF
BOBMZ[F1BUI
DIEJS
DINPE
DIPXO
DMPTF
DMPTF4USFBN
DSFBUF
DSFBUF%BUB'JMF
DSFBUF%FGBVMU%F WJDFT
DSFBUF%FGBVMU%J SFDUPSJFT
DSFBUF%FWJDF
DSFBUF'JMF
DSFBUF'PMEFS
DSFBUF-B[Z'JMF
DSFBUF-JOL
DSFBUF/PEF
DSFBUF1BUI
DSFBUF1SFMPBEFE 'JMF
DSFBUF4QFDJBM%J SFDUPSJFT
DSFBUF4UBOEBSE4 USFBNT
DSFBUF4USFBN
DXE
EFTUSPZ/PEF
FOTVSF&SSOP&SSPS
GDINPE
GDIPXO
GJOE0CKFDU
GMBHT5P1FSNJTTJ PO4USJOH
GPSDF-PBE'JMF
GUSVODBUF
HFU%FWJDF
HFU.PEF
HFU.PVOUT
HFU1BUI
HFU4USFBN
IBOEMF'4&SSPS
IBTI"EE/PEF
IBTI/BNF
IBTI3FNPWF/PEF
JOEFYFE%#
JOJU
JPDUM
JT#MLEFW
JT$ISEFW
JT%JS
JT'*'0
JT'JMF
JT-JOL
JT.PVOUQPJOU
JT3PPU
JT4PDLFU
KPJO1BUI
MDINPE
MDIPXO
MMTFFL
MPBE'JMFT'SPN%#
MPPLVQ
MPPLVQ/PEF
MPPLVQ1BUI
MTUBU
NBKPS
NBLFEFW
NBZ$SFBUF
NBZ%FMFUF
NBZ-PPLVQ
NBZ0QFO
NJOPS
NLEFW
NLEJS
NLEJS5SFF
NLOPE
NNBQ
NPEF4USJOH5P'MBHT
NPVOU
NTZOD
NVONBQ
OFYUGE
OPEF1FSNJTTJPOT
PQFO
RVJU
SFBE
SFBE'JMF
SFBEEJS
SFBEMJOL
SFHJTUFS%FWJDF
SFOBNF
SNEJS
TBWF'JMFT5P%#
TUBOEBSEJ[F1BUI
TUBU
TUBUJD*OJU
TZNMJOL
TZODGT
USVODBUF
VOMJOL
VONPVOU
VUJNF
XSJUF
XSJUF'JMF library_fs.js：同期的なファイルシステムAPI 


FNDD
T
'03$&@'*-&4:45&.
IFMMPD
লटӘԟԡԮՈԛդՓҶහӚӶӐҮӔҮ࿾൶ѬԽԉԌՓԟԡԮՈӘᮿ⥎ӼुѰథ㖭ӁӨӃ㮴
գDMPTF
գJPDUM
գMMTFFL
գXSJUFW
ҽӶӳӼ⽠ӽӑҮӔҮ࿾൶ӑӬѬԛ՛ԹԌՑԒԿԟՏ՛ӕ
T
'03$&@'*-&4:45&.
ӼӎһӵӒԽԉԌՓԟԡԮՈӼఐ⇹ӑҷӨӃѭ
タイトル 

利用できるファイルシステム ファイルシステム 特徴 MEMFS メモリ上にファイルを作成します。標準のファイルシステムです。 IDBFS IndexedDB にファイルを格納します。不揮発性です。ブラウザ専用です。 NODEFS Node.js の提供するファイルシステムAPIを利用します。Node.js専用です。 WORKERFS Blobやファイルをマウントできます。リードオンリーファイルシステムです。 

'4NLEJS NPVOU 
'4NPVOU .&.'4
\^
NPVOU 
գᙨ㛈㮴

ՆԎ՛԰ՅԌ՛԰ӒӔӵԯԋՔԗ԰ՒӼਃᘻӁӨӃ

ԽԉԌՓԟԡԮՈӼᛡᇰӁӐՆԎ՛԰ӁӨӃѭ
գ'4NPVOU GT5ZQF
PQUJPO
NPVOU1PJOU

GT5ZQF
ӕә
.&.'4Ѭ*%#'4Ѭ/%0&'4Ѭ803,&3'4
ӘҮӄӶҵӼᛡᇰӁӨӃ

ԒԿԟՏ՛ӕᛡᇰӃӵԒԾԠԏԗ԰әѬԽԉԌՓԟԡԮՈҾӒӕ∳ӔӴӨӃ
ファイルシステムのマウント方法 


FNDD
P
JOEFYIUNM
QPTUKT
NPVOUKT
IFMMPD
QPTUKT
ԒԿԟՏ՛ӑᛡᇰӁӉ+4ҶѬ
գՊԠՍդՓӘՕդԱᒁӑѬ
գӁҵӬNBJOҶシӵనӕ
ᇴ⷗ҿӶӨӃѭゼಌᣪҵӳՆԎ՛԰Ӽ⷗ҰӔӳѬҽҽӑ௡ⅈӼᥨҹҽӒӕӔӴӨӃѭ 起動時にファイルシステムをマウントさせるには、--post-jsで指定したJSでマウント処理を行います 

IDBFS：syncfsインタフェースを実装したMEMFS 名前 値 /idbfs/readme.txt {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}} /idbfs/sub/hello.c {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}} /idbfs/main.c {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}} /idbfs/sub/log.c {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}} SFBENFUYU TVC  IFMMPD MPHD '4TZODGT USVF '4TZODGT GBMTF 

'4NLEJS JECGT 
'4NPVOU *%#'4
\^
JECGT 
'4TZODGT USVF
FSSPS

\


JG FSSPS \




.PEVMFQSJOU FSSPS 




SFUVSO


^


DPOTU
FOUSZ1PJOU

.PEVMFDDBMM FOUSZ1PJOU

<> 


FOUSZ1PJOU 
^  IDBFSを使用するときの注意点その1：マウント後、syncfsが必要です 

XJOEPXBEE&WFOU-JTUFOFS CFGPSFVOMPBE
F

\


'4TZODGT GBMTF
FSSPS

\



JG FSSPS \






DPOTPMFFSSPS FSSPS 




^


^ 


^
\PODF
USVF^ 
գ◌ᐠᡔӕGBMTFӼᛡᇰӃӵӒѬ*OEFYFE%#ӕᥨҷᙛӁӨӃ IDBFSを使用するときの注意点その2： beforeunload イベント発火時に FS.syncfsを呼ぶ必要があります 

'*-&
GJMF

GPQFO JECGTTPNFGJMFUYU 
DIBS
NTH

)FMMP
XPSME
GXSJUF NTH
TJ[FPG DIBS
TUSMFO NTH
GJMF 
TZOD 

ҽӶӑ*OEFYFE%#ӢӘᥨҷᙛӁҶ⷗ӹӶӨӃ
GDMPTF GJMF  IDBFSを使うときの注意点その3：明示的にsyncを読んで、write-troughにしておきましょう 

マウントポイントの名前でDBを作ります 

libc / libc++ を使ったファイルアクセスのまとめ • 標準入出力関数は、そのまま使えます • 同期的に呼び出せます • Emscripten が適切に変換を行います • ファイル関係のシステムコールは library_fs.js 内の関数呼び出しになります • 使用できるファイルシステムは 4 種類 • ブラウザ上にデータを保存するなら IDBFS を使用します • IDBFS は事前にマウントする必要があります • 適切なタイミングで、ファイルシステムとIndexedDBの同期を行う必要があります 

emscripten.h 内に定義されている非同期ファイル処理関数 • emscripten_async_wget • emscripten_async_wget_data • emscripten_async_wget2 • emscripten_async_wget2_data • emscripten_async_wget2_abort 

'4SFHJTUFS%FWJDF '4NBLFEFW 

\


SFBE
GVODUJPO
\
SFUVSO

^


XSJUF
GVODUJPO TUSFBN
CVGGFS
PGGTFU
MFOHUI
QPT
\





SFUVSO
MFOHUI



^
^ 
'4NLEFW EFWOVMM
'4NBLFEFW 
  特殊ファイルの作成 

WBS
SBOEPN@EFWJDF
JG
UZQFPG
DSZQUP

VOEFGJOFE
\



WBS
SBOEPN#VGGFS

OFX
6JOU"SSBZ  



SBOEPN@EFWJDF

GVODUJPO
\







DSZQUPHFU3BOEPN7BMVFT SBOEPN#VGGFS 
SFUVSO
SBOEPN#VGGFS<>




^
^
FMTF
JG
&/7*30/.&/5@*4@/0%&
\



SBOEPN@EFWJDF

GVODUJPO
\
SFUVSO
SFRVJSF DSZQUP SBOEPN#ZUFT  <>
^
^
FMTF
\



SBOEPN@EFWJDF

GVODUJPO
\
SFUVSO
.BUISBOEPN  ]
^
^
'4DSFBUF%FWJDF EFW
SBOEPN
SBOEPN@EFWJDF  /dev/random の実装