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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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 Slide

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

   View 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 Slide

11. わかったこと
    わかったこと
    " "
    は ["
    ", " ", "
    ", " ", "
    ", " ", "
    "]
    でできてい
    た
    なぜこうなる？
    11
    

    View Slide

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

    View Slide

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

    View Slide

14. 特殊な絵⽂字たち
    特殊な絵⽂字たち
    国旗
    ⽂字と絵⽂字
    ❤
    ❤
    肌⾊
    特殊なのでわりと壊れがち
    14
    

    View Slide

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

    View Slide

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

    View Slide

17. 7
    ⽂字？
    " ".length
    => 7
    " ".chars
    => ["
    
    ", " ", "
    
    ", " ", "
    
    ", " ", "
    
    "]
    17
    

    View Slide

18. 質問２
    質問２
    "
    が"
    は何⽂字ですか？
    18
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide