$30 off During Our Annual Pro Sale. View Details »

Base64 VLQ概要

Base64 VLQ概要

rchaser53

June 15, 2017
Tweet

More Decks by rchaser53

Other Decks in Programming

Transcript

  1. Base64 VLQ概要 @rChaser53

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

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

  4. 使用箇所

  5. AAGA,OAAO,CAAC...

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

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

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

  9. 011011 Continuous Bit Value Bit Sign Bit b = 27

    bitには役割が存在する
  10. 1の場合、次の文字のValue Bitを左に5bitシフトし この文字列のValue Bitとの和を取る(後述) 011011 Continuous Bit Value Bit Sign

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

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

    = 27
  13. 011011 Continuous Bit: 0 => 演算不要! Value Bit: 1101 =>

    13 Sign Bit: 1 => -1 b = 27 結果 -13
  14. i = 34 =100010 次 iG G = 6 =000110

  15. 100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0

    i = 34 000110 G = 6 Value Bit: 0011
  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
  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
  18. 100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0

    i = 34 Sign Bitは0のため符号は「+」のまま 従ってiG = 97 G = 6 Value Bit: 0011 000110
  19. つまり先ほどの文字列は AAGA,OAAO,CAAC...

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

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

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

    1文字の場合は ここまで 4文字の場合は ここまで
  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
  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
  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
  26. ちなみに何を変換したか? sources: ["../src/sourcemapTest.ts"] names: [], mappings: "AACA,IAAM,SAAS,...” var tempValue =

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

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