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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
350
festudy02-wasm
chikoski
1
1.1k
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
790
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.5k
20171002-wejs
chikoski
1
620
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.6k
いまさら振り返るPromise
chikoski
1
610
Other Decks in Technology
See All in Technology
なぜ Platform Engineering の土台に Kubernetes を選ぶのか
r4ynode
2
610
AIソロプレナー時代に2ヶ月で20人増員した事業創造会社の開発組織の話
miyatakoji
0
630
EventBridge Connection
_kensh
5
700
Claude Codeをどのように キャッチアップしているか
oikon48
12
7.2k
Agent Skills設計で柔軟性と硬さのバランスが難しい話
nassy20
0
130
就職⽀援サービスにおけるキャリアアドバイザーのシフトスケジューリング
recruitengineers
PRO
1
140
Bucharest Tech Week 2026 - Reinventing testing practices in the AI era
edeandrea
PRO
1
150
Oracle AI Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
6
1.5k
エンジニアリング戦略の作り方 / Crafting Engineering Strategy
iwashi86
21
6.7k
【NRUG vol.18】なぜ多くのオブザーバビリティ導入は失敗するのか
nrug_member
0
110
AIのReact習熟度を測る
uhyo
2
240
ルールやカスタム機能、どう活かす?ハンズオンで体感するIBM Bobの出力コントロール
muehara
1
140
Featured
See All Featured
Building an army of robots
kneath
306
46k
Designing for Performance
lara
611
70k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Odyssey Design
rkendrick25
PRO
2
690
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
230
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.3k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
420
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Into the Great Unknown - MozCon
thekraken
41
2.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.3k
The agentic SEO stack - context over prompts
schlessera
0
810
エンジニアに許された特別な時間の終わり
watany
107
250k
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 の実装