blob: 69b1ec384af182a6e6cd59236c36d67067f400d6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: WindowOrWorkerGlobalScope.btoa()
slug: Web/API/btoa
tags:
- API
- HTML DOM
- Method
- Reference
- Web
- WindowOrWorkerGlobalScope
- btoa
- data
- strings
translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
original_slug: Web/API/WindowOrWorkerGlobalScope/btoa
---
<p>{{APIRef("HTML DOM")}}</p>
<p><code><strong>WindowOrWorkerGlobalScope.btoa()</strong></code> メソッドは、 {{glossary("Base64")}} でエンコードされた ASCII 文字列を<a href="/ja/docs/Web/API/DOMString/Binary">バイナリ文字列</a> (例えば {{jsxref("String")}} オブジェクトのうち、文字列中のすべての文字がバイナリデータのバイトとして扱うことができるもの) から生成します。</p>
<p>このメソッドを使用すると、通信に支障をきたす可能性のあるデータをエンコードして送信し、その後 {{domxref("WindowOrWorkerGlobalScope.atob", "atob()")}} メソッドを使用して再度デコードすることができます。例えば ASCII で 0 から 31 の値ような制御文字をエンコードすることもできます。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">var <var>encodedData</var> = <var>scope</var>.btoa(<var>stringToEncode</var>);</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<dl>
<dt><code><var>stringToEncode</var></code></dt>
<dd>エンコードする<a href="/ja/docs/Web/API/DOMString/Binary">バイナリ文字列</a>です。</dd>
</dl>
<h3 id="Return_value" name="Return_value">返値</h3>
<p><code><var>stringToEncode</var></code> の Base64 表現である ASCII 文字列です。</p>
<h3 id="Exceptions" name="Exceptions">例外</h3>
<dl>
<dt><code>InvalidCharacterError</code></dt>
<dd>文字列には、1 バイトに収まらない文字が含まれていた場合。詳細は後述の「Unicode文字列」を参照してください。</dd>
</dl>
<h2 id="Example" name="Example">例</h2>
<pre class="brush:js notranslate">const encodedData = window.btoa('Hello, world'); // 文字列をエンコード
const decodedData = window.atob(encodedData); // 文字列をデコード
</pre>
<h2 id="Unicode_Strings" name="Unicode_Strings">Unicode 文字列</h2>
<p><code>btoa()</code> 関数は、JavaScript の文字列を引数にとります。JavaScript の文字列は UTF-16 文字エンコーディングで表現されます。このエンコーディングでは、文字列は 16 ビット (2 バイト) 単位の並びとして表現されます。すべての ASCII 文字はこれらの単位の 1 バイト目に収まりますが、他の多くの文字は収まりません。</p>
<p>Base64 は、設計上、バイナリデータを入力として期待します。 JavaScript の文字列では、これは各文字が 1 バイトしか占有しない文字列を意味します。したがって、2 バイト以上の文字を含む文字列を <code>btoa()</code> に渡した場合、これはバイナリデータとはみなされないため、エラーが発生します。</p>
<pre class="brush: js notranslate">const ok = "a";
console.log(ok.codePointAt(0).toString(16)); // 61: 長さ < 1 バイト
const notOK = "✓"
console.log(notOK.codePointAt(0).toString(16)); // 2713: 長さ > 1 バイト
console.log(btoa(ok)); // YQ==
console.log(btoa(notOK)); // error</pre>
<p><code>btoa()</code> を用いて Unicode テキストを ASCII としてエンコードする必要がある場合、一つの選択肢として、各 16 ビット単位が 1 バイトしか占有しないように文字列を変換することができます。例えば、以下のようになります。</p>
<pre class="brush: js notranslate">// Unicode 文字列で、各 16 ビット単位を 1 バイトしか占有
// しない文字列に変換します。
function toBinary(string) {
const codeUnits = new Uint16Array(string.length);
for (let i = 0; i < codeUnits.length; i++) {
codeUnits[i] = string.charCodeAt(i);
}
return String.fromCharCode(...new Uint8Array(codeUnits.buffer));
}
// 1 バイトを超える文字を含んだ文字列
const myString = "☸☹☺☻☼☾☿";
const converted = toBinary(myString);
const encoded = btoa(converted);
console.log(encoded); // OCY5JjomOyY8Jj4mPyY=
</pre>
<p>このようにした場合、当然ながらデコードされた文字列を逆変換する必要があります。</p>
<pre class="brush: js language-js notranslate">function fromBinary(binary) {
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < bytes.length; i++) {
bytes[i] = binary.charCodeAt(i);
}
return String.fromCharCode(...new Uint16Array(bytes.buffer));
}
const decoded = atob(encoded);
const original = fromBinary(decoded);
console.log(original); // ☸☹☺☻☼☾☿
</pre>
<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
<p>対応していないブラウザーでは、 <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js</a> のポリフィルを利用することができます。</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>{{SpecName("HTML WHATWG")}} のスナップショット、変更なし。</td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>{{SpecName("HTML WHATWG")}} のスナップショット。 <code>WindowBase64</code> の作成 (properties where on the target before it).</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URI</a></li>
<li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
</ul>
|
