initial commit

1 files changed, 161 insertions, 0 deletions

diff --git a/files/ja/web/api/blob/index.html b/files/ja/web/api/blob/index.html
new file mode 100644
index 0000000000..0a9a89655c
--- /dev/null
+++ b/files/ja/web/api/blob/index.html
@@ -0,0 +1,161 @@
+---
+title: Blob
+slug: Web/API/Blob
+tags:
+  - API
+  - Blob
+  - File
+  - File API
+  - Interface
+  - Raw
+  - Reference
+  - data
+translation_of: Web/API/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<div>
+<p><strong><code>Blob</code></strong> オブジェクトは blob を表しており、これは不変の生データであるファイルのようなオブジェクトです。テキストやバイナリデータとして読み込んだり、{{DOMxRef("ReadableStream")}} に変換してそのメソッドを使ったデータ処理をしたりできます。</p>
+
+<p>Blob が表現することができるデータは必ずしも JavaScript ネイティブ形式である必要はありません。{{DOMxRef("File")}} インターフェイスは Blob をベースにしており、Blob の機能を継承してユーザーのシステム上のファイルをサポートするように拡張しています。</p>
+</div>
+
+<h2 id="Blob_の利用">Blob の利用</h2>
+
+<dl>
+</dl>
+
+<p>他の Blob 以外のオブジェクトやデータから <code>Blob</code> を作成するには、{{DOMxRef("Blob.Blob", "Blob()")}} コンストラクタを使用します。他の Blob のデータのサブセットを含む Blob を作成するには、{{DOMxRef("Blob.slice()", "slice()")}} メソッドを使用します。ユーザーのファイルシステム上のファイルの <code>Blob</code> オブジェクトを取得するには、{{DOMxRef("File")}} のドキュメントを参照してください。</p>
+
+<p><code>Blob</code> オブジェクトを受け入れる API も、{{domxref("File")}} のドキュメントに掲載しています。</p>
+
+<h2 id="コンストラクタ">コンストラクタ</h2>
+
+<dl>
+ <dt>{{DOMxRef("Blob.Blob", "Blob()")}}</dt>
+ <dd>コンストラクタに渡された配列内のすべてのデータを連結したものを含む、新しく作成された <code>Blob</code> オブジェクトを返します。</dd>
+</dl>
+
+<h2 id="インスタンスプロパティ">インスタンスプロパティ</h2>
+
+<dl>
+ <dt>{{DOMxRef("Blob.prototype.size")}} {{readonlyinline}}</dt>
+ <dd><code>Blob</code> オブジェクトに含まれるデータのサイズ (バイト単位)。</dd>
+ <dt>{{DOMxRef("Blob.prototype.type")}} {{readonlyinline}}</dt>
+ <dd><code>Blob</code> に含まれるデータの MIME タイプを示す文字列。タイプが不明な場合、この文字列は空です。</dd>
+</dl>
+
+<h2 id="インスタンスメソッド" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">インスタンスメソッド</h2>
+
+<dl>
+ <dt>{{DOMxRef("Blob.prototype.arrayBuffer()")}}</dt>
+ <dd><code>Blob</code> の全内容をバイナリデータとして含む {{DOMxRef("ArrayBuffer")}} で解決する Promise を返します。</dd>
+ <dt>{{DOMxRef("Blob.prototype.slice()")}}</dt>
+ <dd>呼び出された Blob の指定されたバイト数範囲のデータを含む新しい <code>Blob</code> オブジェクトを返します。</dd>
+ <dt>{{DOMxRef("Blob.prototype.stream()")}}</dt>
+ <dd><code>Blob</code> の内容を読み込むために使用できる {{DOMxRef("ReadableStream")}} を返します。</dd>
+ <dt>{{DOMxRef("Blob.prototype.text()")}}</dt>
+ <dd>UTF-8 テキストとして解釈された Blob の内容全体を含む {{DOMxRef("USVString")}} で解決する Promise を返します。</dd>
+</dl>
+
+<h2 id="例" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">例</h2>
+
+<h3 id="Blob_の作成">Blob の作成</h3>
+
+<p>{{DOMxRef("Blob.Blob", "Blob()")}} コンストラクタは、他のオブジェクトから Blob を作成することができます。たとえば、JSON 文字列から Blob を作成するには、次のようにします。</p>
+
+<pre class="brush: js notranslate">const obj = {hello: 'world'};
+const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre>
+
+<h3 id="型付き配列の内容を表す_URL_の作成">型付き配列の内容を表す URL の作成</h3>
+
+<p>次のコードは、JavaScript の<a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a>を作成し、型付き配列のデータを含む新しい <code>Blob</code> を作成します。次に、{{DOMxRef("URL.createObjectURL()")}} を呼び出して、Blob を {{glossary("URL")}} に変換します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;この例では、スペース文字から文字 Z までの ASCII コードを含む型付けされた配列を作成し、
+それをオブジェクト URL に変換します。
+そのオブジェクト URL を開くためのリンクが作成されます。
+リンクをクリックすると、デコードされたオブジェクト URL が表示されます。&lt;/p&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>このコードの例示のための主要な部分は <code>typedArrayToURL()</code> 関数で、与えられた型付き配列から <code>Blob</code> を作成し、それに対するオブジェクト URL を返します。データをオブジェクト URL に変換した後は、要素の {{HTMLElement("img")}} 属性の値として含む、さまざまな方法で使用することができます (もちろん、データに画像が含まれていることを前提としています)。</p>
+
+<pre class="brush: js notranslate">function typedArrayToURL(typedArray, mimeType) {
+  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
+}
+
+const bytes = new Uint8Array(59);
+
+for(let i = 0; i &lt; 59; i++) {
+  bytes[i] = 32 + i;
+}
+
+const url = typedArrayToURL(bytes, 'text/plain');
+
+const link = document.createElement('a');
+link.href = url;
+link.innerText = 'Open the array URL';
+
+document.body.appendChild(link);</pre>
+
+<h4 id="結果">結果</h4>
+
+<p>例のリンクをクリックすると、ブラウザがオブジェクトの URL をデコードしているのがわかります。</p>
+
+<p>{{EmbedLiveSample("Creating_a_URL_representing_the_contents_of_a_typed_array", 600, 200)}}</p>
+
+<h3 id="Blob_からデータを抽出する">Blob からデータを抽出する</h3>
+
+<p><code>Blob</code> から内容を読み込む方法の 1 つは、{{DOMxRef("FileReader")}} を使用することです。次のコードは、<code>Blob</code> の内容を型付き配列として読み込みます。</p>
+
+<pre class="brush: js notranslate">const reader = new FileReader();
+reader.addEventListener('loadend', () =&gt; {
+   // reader.result には blob の内容が型付き配列として格納されます。
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p><code>Blob</code> から内容を読み込む別の方法としては、{{domxref("Response")}} を使用する方法があります。次のコードは、<code>Blob</code> の内容をテキストとして読み取るものです。</p>
+
+<pre class="brush: js notranslate">const text = await (new Response(blob)).text();
+</pre>
+
+<p>または、{{DOMxRef("Blob.prototype.text()")}} を使用します。</p>
+
+<pre class="brush: js notranslate">const text = await blob.text();</pre>
+
+<p><code>FileReader</code> の他のメソッドを使用することで、Blob の内容を文字列またはデータ URL として読み込むことができます。</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#blob-section', '<code>Blob</code> インターフェイス')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">ブラウザ実装状況</h2>
+
+<div class="hidden">このページの互換性表は、構造化データから生成されています。データに貢献したい方は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.Blob")}}</p>
+
+<h2 id="あわせて参照" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("BlobBuilder")}}</li>
+ <li>{{domxref("FileReader")}}</li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("URL.createObjectURL")}}</li>
+ <li><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Webアプリケーションからのファイルの使用</a></li>
+</ul>