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

文字もじemojiよもやま話 / moji-moji-emoji

ima1zumi
November 05, 2020
150

文字もじemojiよもやま話 / moji-moji-emoji

ima1zumi

November 05, 2020
Tweet

Transcript

  1. ⽂字もじ
    emoji
    ⽂字もじ
    emoji
    よもやま話
    よもやま話
    2020-11-04
    @ima1zumi
    1

    View full-size slide

  2. ⾃⼰紹介 ✋
    ⾃⼰紹介 ✋
    @ima1zumi (
    ❄)
    FJORD BOOT CAMP
    で学習中
    2

    View full-size slide

  3. ある⽇のこと
    ある⽇のこと
    FJORD BOOT CAMP
    質問・雑談タイムに参加
    ⽂字コードの話になる
    「" ".chars
    を実⾏してみるとおもしろいです
    よ」
    3

    View full-size slide

  4. " ".chars
    => ["
    ", " ", "
    ", " ", "
    ", " ", "
    "]
    4

    View full-size slide

  5. なぜ
    .chars
    すると
    なぜ
    .chars
    すると
    ⼀家離散するのか
    ⼀家離散するのか
    5

    View full-size slide

  6. どう調べようか?
    どう調べようか?
    ⽂字コードを調べる
    6

    View full-size slide

  7. ⽂字コードを⾒てみよう
    ⽂字コードを⾒てみよう
    使うもの
    String#unpack
    unpack("U*")
    でUTF-8
    のコードポイントに変換
    String#to_s(16)
    16
    進数に変換
    7

    View full-size slide

  8. ["1F468", "200D", "1F469", "200D", "1F466", "200D",
    "1F466"]
    " ".unpack("U*").map{_1.to_s(16).upcase}
    => ["3042"]
    " ".unpack("U*").map{_1.to_s(16).upcase}
    => ["1F468", "200D", "1F469", "200D", "1F466", "200D",
    "1F466"]
    8

    View full-size slide

  9. 1つ1つ⾒てみよう
    1つ1つ⾒てみよう
    ⽂字コードから⽂字になおしたい
    Array#pack
    を使う
    コードポイントの前に0x
    をつける
    "\u{1F468}"
    でもOK
    9

    View full-size slide

  10. ⽂字コードから⽂字に変換
    ⽂字コードから⽂字に変換
    " ".unpack("U*").map{"U+#{_1.to_s(16).upcase}"}
    => ["U+1F468", "U+200D", "U+1F469", "U+200D", "U+1F466",
    "U+200D", "U+1F466"]
    [0x1F468].pack("U*")
    => "

    "
    [0x200D].pack("U*")
    => " "
    [0x1F469].pack("U*")
    => "

    "
    [0x1F466].pack("U*")
    => "

    "
    10

    View full-size slide

  11. わかったこと
    わかったこと
    " "
    は ["
    ", " ", "
    ", " ", "
    ", " ", "
    "]
    でできてい

    なぜこうなる?
    11

    View full-size slide



  12. ⽂字と⽂字を組み合わせて作られる⽂字
    組み合わせるために特殊な⽂字が使われる
    家族の絵⽂字の場合は Zero width Joiner(ZWJ)
    ゼロ幅接合⼦
    ["
    ", " ", "
    ", " ", "
    ", " ", "
    "]
    の ""
    が ZWJ
    12

    View full-size slide

  13. ZWJ
    を使った絵⽂字の例
    ZWJ
    を使った絵⽂字の例
    13

    View full-size slide

  14. 特殊な絵⽂字たち
    特殊な絵⽂字たち
    国旗
    ⽂字と絵⽂字


    肌⾊
    特殊なのでわりと壊れがち
    14

    View full-size slide

  15. chars
    で⼀家離散した理由
    chars
    で⼀家離散した理由
    A.
    そもそも別々の⽂字だから
    15

    View full-size slide

  16. ところで
    ところで
    " "
    は何⽂字ですか?
    16

    View full-size slide

  17. 7
    ⽂字?
    " ".length
    => 7
    " ".chars
    => ["

    ", " ", "

    ", " ", "

    ", " ", "

    "]
    17

    View full-size slide

  18. 質問2
    質問2
    "
    が"
    は何⽂字ですか?
    18

    View full-size slide

  19. 結合⽂字の "
    が"
    2
    ⽂字?
    " ".length
    => 2
    " ".chars
    => [" ", ゙ "]
    19

    View full-size slide

  20. ⾒た⽬1⽂字だから
    ⾒た⽬1⽂字だから
    1⽂字で扱いたい
    1⽂字で扱いたい
    20

    View full-size slide

  21. ⼀家離散を防ぐ⽅法
    ⼀家離散を防ぐ⽅法
    A. String#grapheme_clusters
    を使う
    " ".grapheme_clusters
    => [" "]
    21

    View full-size slide

  22. grapheme
    grapheme
    書記素クラスタ
    Unicode
    において、⾃然な1⽂字を表す単位
    22

    View full-size slide

  23. 「⽂字」は⾃明な単位ではない
    「⽂字」は⾃明な単位ではない
    「1⽂字」として扱いたいのは なのか、な
    のか?
    厳密に「⾒た⽬の1⽂字」を扱いたいなら書記
    素を単位とする
    23

    View full-size slide

  24. ⾒た⽬の1⽂字と
    ⾒た⽬の1⽂字と
    ⽂字コードの1⽂字
    ⽂字コードの1⽂字
    は違うことがある
    は違うことがある
    24

    View full-size slide