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

Base64 VLQ概要

Base64 VLQ概要

rchaser53

June 15, 2017
Tweet

More Decks by rchaser53

Other Decks in Programming

Transcript

  1. Base64 VLQ概要
    @rChaser53

    View full-size slide

  2. 概要
    ・sourcemapのmappingsで用いられている
    ・相対的に位置や情報を示すことで情報を圧縮している
    ・少ない文字数で-2 ~ 2 -1の値まで表現できる
    32 32

    View full-size slide

  3. 使用箇所
    TypeScript出力のsourcemap
    可読性のため改行している

    View full-size slide

  4. 使用箇所

    View full-size slide

  5. AAGA,OAAO,CAAC...

    View full-size slide

  6. AAGA,OAAO,CAAC...
    正直これだけではよく分からない
    まずは数字に変換する必要がある

    View full-size slide

  7. ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    0123456789+/
    使用する文字はBase64で使用する文字
    「A」=0、 「/」=63とし
    「/」に向かい1ずつ数字が大きくなる
    Gなら6、aなら26になる

    View full-size slide

  8. 011011
    b = 27
    これを6bitの2進数に変換する

    View full-size slide

  9. 011011
    Continuous Bit Value Bit Sign Bit
    b = 27
    bitには役割が存在する

    View full-size slide

  10. 1の場合、次の文字のValue Bitを左に5bitシフトし
    この文字列のValue Bitとの和を取る(後述)
    011011
    Continuous Bit Value Bit Sign Bit
    b = 27

    View full-size slide

  11. この4桁の数値で基本となる数値の値を算出する
    011011
    Continuous Bit Value Bit Sign Bit
    b = 27

    View full-size slide

  12. 1の場合、マイナスになる
    0の場合、プラスになる
    011011
    Continuous Bit Value Bit Sign Bit
    b = 27

    View full-size slide

  13. 011011
    Continuous Bit: 0 => 演算不要!
    Value Bit: 1101 => 13
    Sign Bit: 1 => -1
    b = 27
    結果 -13

    View full-size slide

  14. i = 34 =100010
    次 iG
    G = 6 =000110

    View full-size slide

  15. 100010
    Continuous Bit: 1
    Value Bit: 0001
    Sign Bit: 0
    i = 34
    000110
    G = 6
    Value Bit: 0011

    View full-size slide

  16. 100010
    Continuous Bit: 1
    Value Bit: 0001
    Sign Bit: 0
    i = 34
    次の文字のValue Bit(0011)を左に5bitシフトし
    000110
    G = 6
    Value Bit: 0011
    0011 << 5 => 1100000

    View full-size slide

  17. 100010
    Continuous Bit: 1
    Value Bit: 0001
    Sign Bit: 0
    i = 34
    この文字列のValue Bit(0001)との和を取る
    1100000 + 0001 = 1100001 => 97
    G = 6
    Value Bit: 0011
    000110

    View full-size slide

  18. 100010
    Continuous Bit: 1
    Value Bit: 0001
    Sign Bit: 0
    i = 34
    Sign Bitは0のため符号は「+」のまま
    従ってiG = 97
    G = 6
    Value Bit: 0011
    000110

    View full-size slide

  19. つまり先ほどの文字列は
    AAGA,OAAO,CAAC...

    View full-size slide

  20. こうなる
    AAGA,OAAO,CAAC...
    0030,7007,1001...

    View full-size slide

  21. ・カンマ区切りでセクションを構成する
    ・1文字1文字に意味がある
    ・初期位置は列、行、index全て0
    ・以降は相対的な情報を示す
    ・;は改行を意味する
    ・必要となる情報によって
     セクションのサイズは変動する(1 or 4, 5)
    (AAGA,OAAO,CAAC…)
    0030,7007,1001...

    View full-size slide

  22. 5文字のケースを元に説明する
    各文字は以下の情報を示している
    1.変換後の列番号
    2.変換前のファイル名のindex
    (sourcemapのsectionsのindex)
    3.変換前のファイルの行番号
    4.変換前のファイルの列番号
    5.変換後の単語のindex
    (sourcemapのnamesのindex)
    使用箇所
    1文字の場合は
    ここまで
    4文字の場合は
    ここまで

    View full-size slide

  23. sources: ["../src/sourcemapTest.ts"]
    names: [],
    mappings: "AACA,IAAM,SAAS,...”
    1.変換後の列番号 0 => 0
    2.変換前のファイル名のindex 0 => 0
    (sourcemapのsectionsのindex)
    3.変換前のファイルの行番号 0 => 1
    4.変換前のファイルの列番号 0 => 0
    5.変換後の単語のindex 0 => 0
    (sourcemapのnamesのindex)
    例えば以下のようなsourcemapの構成だったら…
    AACA = 0010

    View full-size slide

  24. sources: ["../src/sourcemapTest.ts"]
    names: [],
    mappings: "AACA,IAAM,SAAS,...”
    1.変換後の列番号 0 => 4
    2.変換前のファイル名のindex 0 => 0
    (sourcemapのsectionsのindex)
    3.変換前のファイルの行番号 1 => 1
    4.変換前のファイルの列番号 0 => 6
    5.変換後の単語のindex 0 => 0
    (sourcemapのnamesのindex)
    例えば以下のようなsourcemapの構成だったら…
    IAAM = 4006

    View full-size slide

  25. sources: ["../src/sourcemapTest.ts"]
    names: [],
    mappings: "AACA,IAAM,SAAS,...”
    1.変換後の列番号 4 => 13
    2.変換前のファイル名のindex 0 => 0
    (sourcemapのsectionsのindex)
    3.変換前のファイルの行番号 1 => 1
    4.変換前のファイルの列番号 6 => 15
    5.変換後の単語のindex 0 => 0
    (sourcemapのnamesのindex)
    例えば以下のようなsourcemapの構成だったら…
    SAAS = 9009

    View full-size slide

  26. ちなみに何を変換したか?
    sources: ["../src/sourcemapTest.ts"]
    names: [],
    mappings: "AACA,IAAM,SAAS,...”
    var tempValue = 123;
    type TempType = number;
    const tempValue: TempType = 123;
    JavaScript
    TypeScript
    sourcemap

    View full-size slide

  27. Base64 VLQ参考リンク
    ・MS社の人の独自研究
     規則性が知りたければここ
     フォーマットの変遷の考察が本当に面白い
    ・BASE64のcoder/decoder
     圧縮や難読化がされてないのでソースが楽に読める
     説明がわからんコードを見せろという方はここ
    ・変換前後のsourcemap対応図が非常にわかりやすい

    View full-size slide

  28. ご静聴ありがとうございました

    View full-size slide