HTML5手習い

文字コードとBASE64

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
コンピュータ上で、文字を数字で表すための文字コードという概念や、ASCIIやUTFといったさまざまな文字コードがあることを学びます。また、バイナリデータをASCIIコードで表現するためのBASE64エンコーディングをJava Scriptで扱う方法について学びます。
講師:
09:42

字幕

このレッスンでは文字コードとは何か またバイナリデータを印字可能な文字で 符号化する為の方法である― BASE64 について学びます 文字コードとは文字を数値で 符号化する為の方法です 文字コードの種類としては UTF-8 や ASCII Shift JIS など 実に様々な方法があります コンピューター上で扱うデータは全て バイナリデータ すなわち 0 と 1 の 並びである必要があります そのため コンピューター上で 文字を扱う場合にも 何らかの方法でバイナリデータに 符号化する必要があるのです ASCII はほとんどの環境で利用できる 7bit の文字コードです 例えば大文字や小文字の A から Z ~ ? @ # といった 基本的な文字が含まれています ASCII は 7bit の文字コードですので 2 の 7 乗で 128文字の文字が含まれます Unicode は世界中の文字を表せる 文字集合です これには ASCII で表されるものよりも 非常に多くの文字が含まれています Unicode の符号化方法として UTF8 や UTF16 といった― いくつかの符号化方法が定義されています UTF8 や UTF16 の特徴として 0 番目から 127 番目の文字は ASCII と共通であることが挙げられます JavaScript では文字列は内部的に UTF16 の符号化方法で データとして表現されます また XMLHttpRequest などによる 外部との通信時には 自動的に UTF8 などの適切な 文字コードで符号化されます それでは JavaScript を使って 文字コードについて学習しましょう 左のテキストエディタは ASCII コードの変換テーブルを示しています このテキストはアセットの中に ascii.text というファイル名で 含めておきました 例えばこのテーブルを見ると 大文字の A という文字は 10 進数で 65 16 進数ですと 0x41 で 表されることがわかります 同様に B という文字は 10 進数ですと 66 16 進数で 0x42 で表されます このテーブルを使えば文字を数値に 符号化することができます それでは JavaScript コンソールを 開いて下さい Mac の方は Command + Option + I Windows の方は Ctrl + Shift + I です コンソールで文字を打ち込んでみましょう 例えば ABCDE という文字を打ち込んで 文字列に対して charCodeAt という メソッドを呼び出します charCodeAt を使えば文字列の数値に 符号化されたデータを見ることができます charCodeAt は 文字列の中の符号化対象の― 文字の添え字を与える必要があります 例えば charCodeAt(0) とすると 1番目の文字 A が 符号化された場合の数値が返ってきます このように 65 が返ってきました これは先程のテーブルの定義と 一致していることが分かります UTF16 で符号化されますが UTF16 の先頭の 0 から 127 までの部分は ASCII コードと共通なので このように ASCII コードのテーブルと 同じ数値が返ってくるのです 他の文字でも試してみましょう 例えば 1 を与えて 0 の値を取得すると このように 66 ですし 他の 例えば ~ や こちらの } などを取得してみると このように charCodeAt ~ は 126 それから― } は 125 であることが分かります BASE64 はバイナリデータを ASCII の印字可能な文字で 符号化する為の方法です BASE64 の中に含まれる文字は A から Z の大文字と小文字 それから + と / = です これらの文字で全てのバイナリデータを 表現することができます 通常のバイナリデータには 印字可能でない文字が含まれていますので 例えばテキストデータなどで 開こうとした場合には 意味不明な文字が 表示されてしまうと思います しかし BASE64 で エンコードすることによって バイナリデータがテキストエディタなどで 見ることができるようになるのです HTML の img タグの ソース属性の中には png や jpg といったバイナリデータを BASE64 でエンコードしたものを そのまま埋め込むことが できるようになっています JavaScript には btoa atob という バイナリデータを BASE64 で符号化 また BASE64 から復号化できる メソッドが含まれています それでは実際に試してみましょう 例えばこちらの ASCII のテーブルにある 印字可能でない文字 00 から 01 02 03 といった辺りを BASE64 で符号化してみましょう BASE64 で符号化する為には btoa 関数を使いますが この btoa 関数の 1つ注意が必要な点として パラメータは文字列で 与える必要があるということです なぜなら現在の JavaScript では アレイバッファといった― バイナリデータを直接表現できる データ型がありますが 以前の JavaScript には文字列で JavaScript を表現するしか なかったからです そこでまずはバイナリデータを 文字データに変換しましょう バイナリデータを文字データに変換するには string の fromCharCode この関数を使います この関数は複数のパラメータを とることができ 全ての与えられたパラメータを 文字データ型に変換します 例えば 0x00 0x01 0x02 0x03 といったパラメータを与えて実行すると このように文字列が返ってきました この返ってくる文字列は 使い回し易いように 一旦変数の中に入れておきます この返ってくる文字列は 一見印字可能でない文字列なので 中身が何もないように見えますが length で見てみると 長さが 4 であることが分かります str 変数の中には 0x00 0x01 0x02 0x03 という― 印字可能でない4つの文字が 入っていることが分かります これをバイナリデータにする為には btoa に渡してやります すると このような文字が返ってきました これが BASE64 でエンコードされた 文字になります BASE64 でエンコードされたものを デコード 復号するには btoa を使います 失礼 atob を使います すると このように btoa で符号化してから それを atob ですね このように文字列が返ってきて 長さは 4 ですね 正しく復号されているようです 実際に確認するために charCodeAt で 文字コードを見てみましょう 0番目は 0 1番目は 1 2番目は 2 3番目は 3 というように 元々の文字列が復元できました このレッスンでは 文字コードとは何か またバイナリデータを印字可能な文字で 符号化する為の BASE64 について学びました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。