真のrequire()をブラウザで

ブラウザ上のFSエミュレーション上で動的なrequire()ができるモジュール「browserfs-module ( https://github.com/Narazaka/browserfs-module.js )」を作ったのでみんな使ってね！

Transcript

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

   View Slide

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

   View Slide

3. 注意:
   前置きが長いです
   

   View Slide

4. 最近の趣味
   

   View Slide

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

   View Slide

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

   View Slide

7. 世はスマホ全盛
   

   View Slide

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

   View Slide

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

   View Slide

10. イカガカ
    

    View Slide

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

    View Slide

12. わぁい
    

    View Slide

13. ……
    あれ？
    

    View Slide

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

    View Slide

15. 擬似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
    )
    )
    ;
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. browserfs-module
    つくりました
    

    View Slide

20. 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
    "
    

    View Slide

21. わぁい
    

    View Slide

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

    View Slide

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

    View Slide

24. 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 (
    ファイル読み込み)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. build.js
    

    View Slide

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

    View Slide