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
990
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
320
festudy02-wasm
chikoski
1
1k
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
750
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.4k
20171002-wejs
chikoski
1
600
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.5k
いまさら振り返るPromise
chikoski
1
590
Other Decks in Technology
See All in Technology
Strands AgentsとNova 2 SonicでS2Sを実践してみた
yama3133
1
2k
2025-12-18_AI駆動開発推進プロジェクト運営について / AIDD-Promotion project management
yayoi_dd
0
170
BidiAgent と Nova 2 Sonic から考える音声 AI について
yama3133
2
110
MySQLとPostgreSQLのコレーション / Collation of MySQL and PostgreSQL
tmtms
1
1.3k
AgentCore BrowserとClaude Codeスキルを活用した 『初手AI』を実現する業務自動化AIエージェント基盤
ruzia
7
1.8k
さくらのクラウド開発ふりかえり2025
kazeburo
2
1.2k
Strands Agents × インタリーブ思考 で変わるAIエージェント設計 / Strands Agents x Interleaved Thinking AI Agents
takanorig
6
2.3k
AIBuildersDay_track_A_iidaxs
iidaxs
4
1.5k
Identity Management for Agentic AI 解説
fujie
0
500
Redshift認可、アップデートでどう変わった?
handy
1
110
業務の煩悩を祓うAI活用術108選 / AI 108 Usages
smartbank
9
15k
AWS re:Invent 2025~初参加の成果と学び~
kubomasataka
1
200
Featured
See All Featured
Fireside Chat
paigeccino
41
3.8k
Building Applications with DynamoDB
mza
96
6.9k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
1
1.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Bash Introduction
62gerente
615
210k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
50k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
1
32
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
How to make the Groovebox
asonas
2
1.9k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
31
A Modern Web Designer's Workflow
chriscoyier
698
190k
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 の実装