Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20170222-emscripten-fs
Search
chikoski
February 22, 2017
Technology
0
840
20170222-emscripten-fs
Explanation of file i/o in Emscripten generated codes
chikoski
February 22, 2017
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
270
festudy02-wasm
chikoski
1
940
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
650
Functions in JavaScript
chikoski
1
1.1k
20171018-WASM
chikoski
2
1.3k
20171002-wejs
chikoski
1
530
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.3k
いまさら振り返るPromise
chikoski
1
510
Other Decks in Technology
See All in Technology
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
日経電子版のStoreKit2フルリニューアル
shimastripe
1
150
Terraform Stacks入門 #HashiTalks
msato
0
360
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
140
RubyのWebアプリケーションを50倍速くする方法 / How to Make a Ruby Web Application 50 Times Faster
hogelog
3
950
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
150
Taming you application's environments
salaboy
0
200
Application Development WG Intro at AppDeveloperCon
salaboy
0
200
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
180
Storybook との上手な向き合い方を考える
re_taro
2
330
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Automating Front-end Workflow
addyosmani
1366
200k
The Language of Interfaces
destraynor
154
24k
4 Signs Your Business is Dying
shpigford
180
21k
The Invisible Side of Design
smashingmag
298
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
How GitHub (no longer) Works
holman
310
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
A Philosophy of Restraint
colly
203
16k
Transcript
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で定義される抽象構文木
FNDDPJOEFYIUNMT8"4.IFMMPD
項目 Emscripten によるサポート 標準ライブラリ (libc / libc++) Emscriptenがlibc/libc++をコンパイルしてリンク リンク static
link / dynamic link ファイルシステム POSIX ファイルシステムをエミュレート アセット JSに埋め込み / XHRへ変換 OpenGL WebGLに変換
Emscripten の提供するファイルシステム • MEMFS が標準のファイルシステムです • 他のファイルシステムは、mount して利用します "QQ MJCD
MJCD "TZODISPOPVT'JMF4ZTUFN "1* FNTDSJQUFOI 4ZODISPOPVT'JMF4ZTUFN"1* MJCSBSZ@GTKT 803,&3'4 /0%&'4 *%#'4 .&.'4
WPJEDBU '*-& GJMF \ MPOHTJ[F DIBS CVG GTFFL GJMF
4&&,@&/% TJ[FGUFMM 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 GJMFGPQFO 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
FNDDT'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ӘҮӄӶҵӼᛡᇰӁӨӃ ԒԿԟՏ՛ӕᛡᇰӃӵԒԾԠԏԗәѬԽԉԌՓԟԡԮՈҾӒӕ∳ӔӴӨӃ ファイルシステムのマウント方法
FNDDPJOEFYIUNMQPTUKTNPVOUKTIFMMPD 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 ^ DPOTUFOUSZ1PJOU.PEVMFDDBMM FOUSZ1PJOU <> FOUSZ1PJOU ^ IDBFSを使用するときの注意点その1:マウント後、syncfsが必要です
XJOEPXBEE&WFOU-JTUFOFS CFGPSFVOMPBE F\ '4TZODGT GBMTF FSSPS\JG FSSPS \ DPOTPMFFSSPS FSSPS
^ ^ ^ \PODFUSVF^ գ◌ᐠᡔӕGBMTFӼᛡᇰӃӵӒѬ*OEFYFE%#ӕᥨҷᙛӁӨӃ IDBFSを使用するときの注意点その2: beforeunload イベント発火時に FS.syncfsを呼ぶ必要があります
'*-& GJMFGPQFO 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 \ SFBEGVODUJPO \SFUVSO^ XSJUFGVODUJPO TUSFBN
CVGGFS PGGTFU MFOHUI QPT \ SFUVSOMFOHUI ^ ^ '4NLEFW EFWOVMM '4NBLFEFW 特殊ファイルの作成
WBSSBOEPN@EFWJDF JG UZQFPGDSZQUPVOEFGJOFE \ WBSSBOEPN#VGGFSOFX6JOU"SSBZ SBOEPN@EFWJDFGVODUJPO \ DSZQUPHFU3BOEPN7BMVFT
SBOEPN#VGGFS SFUVSOSBOEPN#VGGFS<> ^ ^FMTFJG &/7*30/.&/5@*4@/0%& \ SBOEPN@EFWJDFGVODUJPO \SFUVSOSFRVJSF DSZQUP SBOEPN#ZUFT <>^ ^FMTF\ SBOEPN@EFWJDFGVODUJPO \SFUVSO .BUISBOEPN ]^ ^ '4DSFBUF%FWJDF EFW SBOEPN SBOEPN@EFWJDF /dev/random の実装