Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
20170222-emscripten-fs
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
chikoski
February 22, 2017
Technology
1k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
20170222-emscripten-fs
Explanation of file i/o in Emscripten generated codes
chikoski
February 22, 2017
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
360
festudy02-wasm
chikoski
1
1.1k
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
800
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.5k
20171002-wejs
chikoski
1
630
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.6k
いまさら振り返るPromise
chikoski
1
630
Other Decks in Technology
See All in Technology
Lambda MicroVMsが分からなすぎたので使い所を1から考えてみた
tsukuboshi
1
260
Harness Engineering on Rails
joelq
0
770
大阪オフィスに Unitree Go2 がやってきたので Physical AI やってみた
dafujii
0
180
私の推しは「聞いてから進む」AIです -AI-DLCに一人でアプリを作らせた話
yama3133
0
110
Account Factory for Terraformによる 標準化されたアカウント発行の自動化
pensuke628
0
120
The seven pitfalls of AI (revised version)
ufried
0
140
HacobuにおけるFDEとは/登壇資料(戸井田 裕貴)
hacobu
PRO
1
630
spanner-autoscalerに学ぶ CRD設計パターン 〜自動化と緊急時対応を両立する Kubernetesコントローラーの作り方〜
tkuchiki
0
210
ScotSecure West 2026 - Glasgow
raybugg
0
210
人にやさしく、AIにやさしく、書き手を選ばないIaCのガードレール再考 / Rethinking IaC Guardrails for Humans and AI Alike
kohbis
5
1.9k
KanaAI
shreyas1009
0
130
覗いてみよう 関数型ビジュアル言語×2Dグラフィックスの世界
yohyamasaki
0
150
Featured
See All Featured
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
2
710
Why Our Code Smells
bkeepers
PRO
340
58k
Unsuck your backbone
ammeep
672
58k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.9k
The SEO Collaboration Effect
kristinabergwall1
1
580
GitHub's CSS Performance
jonrohan
1033
470k
Designing for humans not robots
tammielis
254
26k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.8k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
350
How STYLIGHT went responsive
nonsquared
100
6.3k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2.2k
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 の実装