Tweet
Tweet

Slide 1

Slide 1 text

真のrequire() を ブラウザで @narazaka

Slide 2

Slide 2 text

自己紹介 Twitter: Github: npm: CPAN: ドリコム2015 新卒 サー バー サイドRuby 好きな言語: Perl / CoffeeScript / Ruby / C# その他: 伺か/ 漫画読み描き/OP アニメ愛好家/ 鉄 @narazaka @Narazaka @narazaka NARAZAKA

Slide 3

Slide 3 text

注意: 前置きが長いです

Slide 4

Slide 4 text

最近の趣味

Slide 5

Slide 5 text

伺か 2000 年頃に一部で流行ったデスクトップマスコット ( ポス○ ペットの萌えキャラ版みたいな)

Slide 6

Slide 6 text

伺か(materia.exe) キャラクター を差し替えできるデスクトップマスコット ランタイム キャラクター の人格は任意のWindows 用アンマネー ジド DLL をそのまま動作させる仕様( めっちゃ自由) DLL でごにょごにょすればJavaScript でも動きます

Slide 7

Slide 7 text

世はスマホ全盛

Slide 8

Slide 8 text

デスクトップマスコットの居場所 「 デスクトップ」 の消滅

Slide 9

Slide 9 text

スマホでも動く ブラウザで動かしたい……

Slide 10

Slide 10 text

イカガカ

Slide 11

Slide 11 text

イカガカ (2014-) 1. jszip でキャラクター デー タのzip を解凍 2. node.js のFS をエミュレー トする でIndexedDB にファイルを展開 3. 人格DLL をemscripten でコンパイルして擬似FS にあるフ ァイルを読んで動作させる BrowserFS これ自体の話はまたいつか……

Slide 12

Slide 12 text

わぁい

Slide 13

Slide 13 text

…… あれ？

Slide 14

Slide 14 text

JavaScript で作った「 人格」 動かなくない？

Slide 15

Slide 15 text

擬似FS 上にあるソー スファイル i f ( f i l e . m a t c h ( / ^ \ . * \ / / ) ) { f i l t e r s = r e q u i r e ( p a t h . j o i n ( p r o c e s s . c w d ( ) , f i l e ) ) ; }

Slide 16

Slide 16 text

動作の前提 擬似FS 中のファイルから擬似FS 中の別のファイルを require() する処理 JavaScript で作った「 人格」 はブラウザJavaScript を使って いるのでそもそもrequire() がない → 動かない

Slide 17

Slide 17 text

JavaScript 伺かなのにJavaScript で書いたキャラが動かない マジか

Slide 18

Slide 18 text

擬似FS 中のファイルから擬似FS 中の別のファイルを require() する やってやろうじゃん

Slide 19

Slide 19 text

browserfs-module つくりました

Slide 20

Slide 20 text

c o n s t f s = B r o w s e r F S . B F S R e q u i r e ( ' f s ' ) ; f s . w r i t e F i l e S y n c ( ' / a . j s ' , ' m o d u l e . e x p o r t s = r e q u i r e ( " b " ) ; ' ) ; f s . m k d i r S y n c ( ' / n o d e _ m o d u l e s ' ) ; f s . w r i t e F i l e S y n c ( ' / n o d e _ m o d u l e s / b . j s ' , ' m o d u l e . e x p o r t s = " b b " ; ' ) ; v a r r e s u l t = M o d u l e . _ l o a d ( " / a " ) ; c o n s o l e . l o g ( r e s u l t ) ; / / " b b "

Slide 21

Slide 21 text

わぁい

Slide 22

Slide 22 text

browserfs-module ブラウザ上にファイルシステムをエミュレー トしてnode.js っぽい動作をさせたい場合にぜひご利用ください()

Slide 23

Slide 23 text

実装方法 1. まずnode.js をsubmodule としてクロー ン 2. node.js のソー スを正規表現で全力置換 3. webpack

Slide 24

Slide 24 text

node.js のrequire が使うもの 1. lib/module.js (Module) 2. lib/vm.js (runInThisContext 関数) 3. lib/internal/bootstrap_node.js (NativeModule) 4. lib/internal/module.js ( ユー ティリティ関数) 5. lib/internal/util.js ( デバック出力用ユー ティリティ関数) 6. src/node_ le.cc ( ファイル読み込み)

Slide 25

Slide 25 text

webpack が提供してくれるも の 1. vm.js (runInThisContext 関数) 足りない

Slide 26

Slide 26 text

node.js ソー スからパクって きて全力置換

Slide 27

Slide 27 text

node.js 内部で使うmodule 1. 組み込みのJavaScript 製module ( 使える) 2. うちinternal ( 使える) 3. C++ で組まれたネイティブバインディング ( 使えない)

Slide 28

Slide 28 text

build.js

Slide 29

Slide 29 text

まとめ 伺かをブラウザで動かしたかった BrowserFS でrequire できる を作った 正規表現は最高だぜ! browserfs-module