web技術勉強会 第34回
DESCRIPTION
Web技術勉強会 第34回TRANSCRIPT
![Page 1: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/1.jpg)
Web技術勉強会 第34回文字コードについて
Ryuichi TANAKA.Blog: http://blog.livedoor.jp/mapserver2007/
Twitter: @mapserver2007
![Page 2: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/2.jpg)
UTF-8とUTF-16とUnicode
![Page 3: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/3.jpg)
全部別物
![Page 4: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/4.jpg)
この際勉強しよう!
![Page 5: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/5.jpg)
発端
文字コードは複雑Unicodeって何?UTF-8とは違う?
![Page 6: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/6.jpg)
用語の確認
UCS(UCS-4)Universal Character Setコードテーブルは0~0x7FFFFFFF(約21億文字分)1文字あたり4バイトを使用することからUCS-4とも呼ばれる文字集合
![Page 7: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/7.jpg)
用語の確認
UCS-20~0xFFFF(65535文字分)16ビット以上の範囲の文字は扱えない
![Page 8: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/8.jpg)
用語の確認
UnicodeUCSの0~0x10FFFF(約111万文字分)を使用 UCSとUnicodeは策定しているグループが違うが、UCSとUnicodeは同じ意味で扱われることがある
![Page 9: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/9.jpg)
用語の確認
UnicodeUnicodeは元々16ビットですべての文字を表そうとしたのが始まり。無理にきまってんだろjkこれだからシングルバイト圏の人間は。
![Page 10: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/10.jpg)
用語の確認
Unicode現在ではUnicodeは1文字4バイトで表現される1文字4バイトはUCS(UCS-4)と同じだが、使用範囲が限定されているUnicodeは00群0F面まで定義上の最大は127群255面まで
![Page 11: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/11.jpg)
用語の確認
UTF-16UCS-2にサロゲートペアを併用した符号法元々は16ビットの固定長の符号サロゲートペアを併用することで大幅に使用範囲が増えた
![Page 12: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/12.jpg)
用語の確認
UTF-16UTF-16ではファイルの先頭にBOMをつけるUTF-16ではUCS-2の範囲外の文字(=UCS-4から持ってくる)のうち、0x10000~0x10FFFFをサロゲートペアとして表す
![Page 13: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/13.jpg)
用語の確認
サロゲートペアUTF-16で採用されたUnicodeの符号化法の一つサロゲート文字(≠サロゲートペア)として上位、下位それぞれ1024文字割り当てている
![Page 14: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/14.jpg)
用語の確認
サロゲートペア 16ビットUnicodeの未定義領域の1024文字を2つ使用する上位サロゲートは0xD800~0xDBFF下位サロゲートは0xDC00~0xDFFFこれらを組み合わせたものをサロゲートペアと呼ぶ
![Page 15: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/15.jpg)
用語の確認
サロゲートペア1024x1024=1048576文字を256x256の面(Plane)に分割、16面+BMP(Basic Multilngual Plane=基本多言語面=最もよく使う基本的な文字・記号がほぼすべて含まれる領域=0x0000~0xFFFF)の計17面、約111万文字が使用可能になる
![Page 16: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/16.jpg)
用語の確認
BOMByte Order MarkUTF-16(UTF-8にもつけられる)の先頭につけるU+FEFE(0xFEFE)のことUTF-8ではEF BB BFBOMがつくとリトルエンディアンBOMがつかないとビッグエンディアン
![Page 17: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/17.jpg)
用語の確認
UTF-81文字を1~6バイトの可変長バイト列で表現する符号法サロゲートペアを用いない広大な範囲を持つが、現在の標準仕様(RFC3629)では使用範囲が0~0x10FFFFのみに規定されている
![Page 18: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/18.jpg)
用語の確認
UTF-8BOMがつけれれるBOMをつけたUTF-8はUTF-8Nと表記しかし、国際的には認められていない使われるのは国内のみ
![Page 19: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/19.jpg)
まとめると範囲は
UCS-2⊆UTF-16⊆UTF-8(現行)⊆(UCS-4⊆真のUTF-8)
![Page 20: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/20.jpg)
これだけ分かれてる。ややこしいんじゃぼけー
![Page 21: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/21.jpg)
直近、俺らが困りそうなこと
![Page 22: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/22.jpg)
サロゲートペア問題
![Page 23: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/23.jpg)
サロゲートペア問題
サロゲートペア領域とUTF-16のデフォルト領域はビット数が違う
UTF-16のデフォルト:16ビットサロゲートペア領域:32ビット
![Page 24: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/24.jpg)
つまり、デフォのUTF-16領域にある文字列は「2バイト」、サロゲートペア文字は「4バイト」になる。
これは実に重大な問題を引き起こすので無視できない。特にWebアプリで。
![Page 25: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/25.jpg)
<html><head><script>function length(e) { alert(e); alert(e.length);}</script></head><body><input type="button" onclick="length('\u3042');" value="あ"/><input type="button" onclick="length('\u20B9F');" value="𠮟"/></body></html>
![Page 26: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/26.jpg)
あら不思議。「あ」は1文字扱いなのに
「叱」は2文字扱いになっちゃった
![Page 27: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/27.jpg)
これがサロゲートペアを扱う時の問題点。
![Page 28: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/28.jpg)
例えば、ユーザの入力文字を「文字数」でバリデーションするとき。パスワードは最低8文字以上にしないと弾くという処
理を書いたとき。
![Page 29: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/29.jpg)
入力フォームにサロゲートペア文字を含んでいる場合…。単にlength取っただけだと、あっさり8文字以下でも突破できちゃう。
それをそのままDBに突っ込んだ日にゃ。もうめちゃくちゃ。
![Page 30: Web技術勉強会 第34回](https://reader035.vdocuments.site/reader035/viewer/2022081718/54881120b479590f0d8b557b/html5/thumbnails/30.jpg)
やっつけまとめ
・文字コード(特にUnicode関係)はわかりにくすぎる・定義が曖昧(UCSとUnicodeの解釈が人によって違うとか)・とりあえずサロゲートペアには気をつけろ。・対策方法は そこら中にあるからそれを参考に!