Upgrade to Pro — share decks privately, control downloads, hide ads and more …

真のrequire()をブラウザで

Narazaka
August 04, 2016

 真のrequire()をブラウザで

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

Narazaka

August 04, 2016
Tweet

More Decks by Narazaka

Other Decks in Programming

Transcript

  1. 真のrequire()

    ブラウザで
    @narazaka

    View full-size slide

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

    @narazaka
    @Narazaka
    @narazaka
    NARAZAKA

    View full-size slide

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

    View full-size slide

  4. 最近の趣味

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 世はスマホ全盛

    View full-size slide

  8. デスクトップマスコットの居場所

    デスクトップ」
    の消滅

    View full-size slide

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

    View full-size slide

  10. イカガカ

    View full-size slide

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

    View full-size slide

  12. ……
    あれ?

    View full-size slide

  13. JavaScript
    で作った「
    人格」
    動かなくない?

    View full-size slide

  14. 擬似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 full-size slide

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

    動かない

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. browserfs-module
    つくりました

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

  21. 実装方法
    1.
    まずnode.js
    をsubmodule
    としてクロー

    2. node.js
    のソー
    スを正規表現で全力置換
    3. webpack

    View full-size slide

  22. 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 full-size slide

  23. webpack
    が提供してくれるも

    1. vm.js (runInThisContext
    関数)
    足りない

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide