aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/api/blob
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/blob
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/ja/web/api/blob')
-rw-r--r--files/ja/web/api/blob/arraybuffer/index.html75
-rw-r--r--files/ja/web/api/blob/blob/index.html79
-rw-r--r--files/ja/web/api/blob/index.html161
-rw-r--r--files/ja/web/api/blob/size/index.html75
-rw-r--r--files/ja/web/api/blob/slice/index.html71
-rw-r--r--files/ja/web/api/blob/stream/index.html71
-rw-r--r--files/ja/web/api/blob/text/index.html79
-rw-r--r--files/ja/web/api/blob/type/index.html85
8 files changed, 696 insertions, 0 deletions
diff --git a/files/ja/web/api/blob/arraybuffer/index.html b/files/ja/web/api/blob/arraybuffer/index.html
new file mode 100644
index 0000000000..11c5bd0722
--- /dev/null
+++ b/files/ja/web/api/blob/arraybuffer/index.html
@@ -0,0 +1,75 @@
+---
+title: Blob.arrayBuffer()
+slug: Web/API/Blob/arrayBuffer
+tags:
+ - API
+ - ArrayBuffer
+ - Blob
+ - File API
+ - Method
+ - Reference
+ - binary
+ - read
+translation_of: Web/API/Blob/arrayBuffer
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>{{domxref("Blob")}} インターフェイスの <code><strong>arrayBuffer()</strong></code> メソッドは、{{domxref("ArrayBuffer")}} 内のバイナリデータとして Blob の内容を解決する {{jsxref("Promise")}} を返します。</p>
+
+<ul>
+</ul>
+
+<h2 id="シンタックス">シンタックス</h2>
+
+<pre class="syntaxbox notranslate">var <em>bufferPromise</em> = <em>blob</em>.arrayBuffer();
+
+<em>blob</em>.arrayBuffer().then(<em>buffer</em> =&gt; /* ArrayBuffer を処理します。 */);
+
+var <em>buffer</em> = await <em>blob</em>.arrayBuffer();</pre>
+
+<h3 id="パラメータ">パラメータ</h3>
+
+<p>なし</p>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>Blob のデータをバイナリ形式で含む {{domxref("ArrayBuffer")}} で解決する Promise。</p>
+
+<h3 id="例外">例外</h3>
+
+<p>このメソッドは例外をスローしませんが、Promise を拒否することがあります。例えば、Blob のデータを取得するために使用されたリーダーが例外をスローした場合などです。データの取得中に発生した例外はすべて拒否に変換されます。</p>
+
+<h2 id="使用上のメモ">使用上のメモ</h2>
+
+<p>{{domxref("FileReader.readAsArrayBuffer()")}} メソッドに似ていますが、<code>arrayBuffer()</code> は、<code>FileReader</code> インターフェイスのメソッドのようにイベントベースの API ではなく、Promise を返します。</p>
+
+<h2 id="仕様">仕様</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", "#dom-blob-arraybuffer", "Blob.arrayBuffer()")}}</td>
+ <td>{{Spec2("File API")}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.Blob.arrayBuffer")}}</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("Body.arrayBuffer()")}}</li>
+ <li><a href="/en-US/docs/Web/API/Streams_API">Streams API</a></li>
+ <li>{{domxref("FileReader.readAsArrayBuffer()")}}</li>
+</ul>
diff --git a/files/ja/web/api/blob/blob/index.html b/files/ja/web/api/blob/blob/index.html
new file mode 100644
index 0000000000..abb72d5c60
--- /dev/null
+++ b/files/ja/web/api/blob/blob/index.html
@@ -0,0 +1,79 @@
+---
+title: Blob()
+slug: Web/API/Blob/Blob
+tags:
+ - API
+ - Blob
+ - Constructor
+ - Experimental
+ - File API
+ - Reference
+ - コンストラクター
+translation_of: Web/API/Blob/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><span class="seoSummary"><code><strong>Blob()</strong></code> コンストラクターは、新たな {{domxref("Blob")}} オブジェクトを返します。その blob の中身は、引数 <code>array</code> で与えられた値を連結したものから構成されています。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <var>newBlob</var> = new Blob(<var>array</var>, <var>options</var>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>array</var></code></dt>
+ <dd>{{jsxref("Array")}} で、その中身が {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("USVString")}} のオブジェクト、またはそのようなオブジェクトの何れかが混合したもので、それが {{domxref("Blob")}} の中に入れられます。 <code>USVString</code> オブジェクトは UTF-8 で符号化されたものです。</dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>任意で、以下のプロパティを指定する {{domxref("BlobPropertyBag")}} オブジェクトです。</p>
+
+ <dl>
+ <dt><code>type</code> {{optional_inline}}</dt>
+ <dd>blob に格納されるデータの {{Glossary("MIME type", "MIME タイプ")}} です。既定値は空文字列 (<code>""</code>) です。</dd>
+ <dt><code>endings</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>データがテキストの場合、コンテンツ内の改行文字 (<code>\n</code>) の解釈方法を示します。既定値は <code>transparent</code> であり、改行文字を変換することなく blob に格納します。改行文字をホストシステムの慣行に合わせるには、<code>endings</code> を指定してください。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>指定されたデータを含む {{domxref("Blob")}} オブジェクトです。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js language-js notranslate">var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;']; // 単一の DOMString からなる配列
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // blob</pre>
+
+<h2 id="Specification" name="Specification">仕様</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('File API', '#constructorBlob', 'Blob()')}}</td>
+ <td>{{Spec2('File API')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.Blob.Blob")}}</p>
+
+<h2 id="See_also" name="See_also">あわせて参照</h2>
+
+<ul>
+ <li>このコンストラクターによって置き換えられた非推奨の {{domxref("BlobBuilder")}} インターフェイス</li>
+</ul>
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>
diff --git a/files/ja/web/api/blob/size/index.html b/files/ja/web/api/blob/size/index.html
new file mode 100644
index 0000000000..408fe28a2f
--- /dev/null
+++ b/files/ja/web/api/blob/size/index.html
@@ -0,0 +1,75 @@
+---
+title: Blob.size
+slug: Web/API/Blob/size
+tags:
+ - API
+ - Blob
+ - Bytes
+ - File API
+ - Files
+ - Property
+ - Reference
+ - length
+ - size
+translation_of: Web/API/Blob/size
+---
+<div class="boxed translate-rendered text-content">
+<div>{{APIRef("File API")}}</div>
+
+<p>{{domxref("Blob")}} インターフェイスの <strong><code>size</code></strong> プロパティは、{{domxref("Blob")}} または {{domxref("File")}} のサイズをバイト単位で返します。</p>
+
+<h2 id="シンタックス">シンタックス</h2>
+
+<pre class="syntaxbox notranslate">var <em>sizeInBytes</em> = <em>blob</em>.size
+</pre>
+
+<h3 id="値">値</h3>
+
+<p><code>Blob</code> (または <code>Blob</code> ベースのオブジェクト、例えば{{domxref("File")}}) 内に含まれるデータのバイト数。</p>
+
+<h2 id="例">例</h2>
+
+<p>この例では、<code>file</code> 型の {{HTMLElement("input")}} 要素を使用して、ユーザーにファイルのグループを尋ね、それらのファイルを繰り返し処理して、その名前と長さをバイト単位で出力しています。</p>
+
+<pre class="brush:js notranslate">// fileInputは HTMLInputElement &lt;input type="file" multiple id="myfileinput"&gt; です。
+var fileInput = document.getElementById("myfileinput");
+
+// files は FileList オブジェクトです (NodeList に似ています)。
+var files = fileInput.files;
+
+for (var i = 0; i &lt; files.length; i++) {
+ console.log(files[i].name + " has a size of " + files[i].size + " Bytes");
+}</pre>
+
+<h2 id="仕様">仕様</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', '#dfn-size', 'Blob.size')}}</td>
+ <td>{{Spec2('File API')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+
+<div>
+<p>{{Compat("api.Blob.size")}}</p>
+</div>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+ <li>
+ <p><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Web アプリケーションからのファイルの使用</a></p>
+ </li>
+</ul>
+</div>
diff --git a/files/ja/web/api/blob/slice/index.html b/files/ja/web/api/blob/slice/index.html
new file mode 100644
index 0000000000..a724c23924
--- /dev/null
+++ b/files/ja/web/api/blob/slice/index.html
@@ -0,0 +1,71 @@
+---
+title: Blob.slice()
+slug: Web/API/Blob/slice
+tags:
+ - API
+ - Blob
+ - File
+ - File API
+ - Method
+ - Reference
+ - Section
+ - Subset
+ - data
+ - slice
+ - split
+translation_of: Web/API/Blob/slice
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>{{domxref("Blob")}} インターフェイスの <strong><code>slice()</code></strong> メソッドは、呼び出された blob のサブセットのデータを含む新しい <code>Blob</code> オブジェクトを作成して返します。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox notranslate">var <em>newBlob</em> = <em>blob</em>.slice(<em>start</em>, <em>end</em>, <em>contentType</em>);</pre>
+
+<h3 id="パラメータ">パラメータ</h3>
+
+<dl>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>新しい {{domxref("Blob")}} に含める最初のバイトを示す {{domxref("Blob")}} へのインデックス。負の値を指定すると、{{domxref("Blob")}} の末尾から先頭へのオフセットとして扱われます。例えば、-10 は {{domxref("Blob")}} の最後のバイトから10番目になります。デフォルト値は 0 です。<code>start</code> にもとの {{domxref("Blob")}} のサイズよりも大きい値を指定すると、返される {{domxref("Blob")}} のサイズは 0 で、データは何も含まれません。</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>新しい {{domxref("Blob")}} に<strong>含まれない</strong>最初のバイトを示す {{domxref("Blob")}} へのインデックス。(つまり、このインデックスに正確に位置するバイトは含まれません)。負の値を指定すると、{{domxref("Blob")}} の末尾から先頭へのオフセットとして扱われます。例えば、-10は {{domxref("Blob")}} の最後のバイトから10番目になります。デフォルト値は <code>size</code> です。</dd>
+ <dt><code>contentType</code> {{optional_inline}}</dt>
+ <dd>新しい {{domxref("Blob")}} に割り当てるコンテンツの型。これはその <code>type</code> プロパティの値になります。デフォルト値は空の文字列です。</dd>
+</dl>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>このメソッドが呼び出された Blob 内に含まれるデータの指定されたサブセットを含む新しい {{domxref("Blob")}} オブジェクト。元の Blob は変更されません。</p>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th>仕様</th>
+ <th>ステータス</th>
+ <th>コメント</th>
+ </tr>
+ <tr>
+ <td>{{SpecName("File API", "#dfn-slice", "Blob.slice()")}}</td>
+ <td>{{Spec2("File API")}}</td>
+ <td>初期定義。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザの実装状況">ブラウザの実装状況</h2>
+
+<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.Blob.slice")}}</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+ <li>
+ <p><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Web アプリケーションからのファイルの使用</a></p>
+ </li>
+</ul>
diff --git a/files/ja/web/api/blob/stream/index.html b/files/ja/web/api/blob/stream/index.html
new file mode 100644
index 0000000000..f5c394e2e7
--- /dev/null
+++ b/files/ja/web/api/blob/stream/index.html
@@ -0,0 +1,71 @@
+---
+title: Blob.stream()
+slug: Web/API/Blob/stream
+tags:
+ - API
+ - Blob
+ - Change
+ - Convert
+ - File API
+ - Method
+ - ReadableStream
+ - Reference
+ - stream
+translation_of: Web/API/Blob/stream
+---
+<p>{{APIRef("File API")}}</p>
+
+<p><span class="seoSummary">{{domxref("Blob")}} インターフェイスの<code><strong>stream()</strong></code> メソッドは、{{domxref("ReadableStream")}} を返します。これは、読み取り時に、<code>Blob</code> に含まれるデータを返します。</span></p>
+
+<h2 id="シンタックス">シンタックス</h2>
+
+<pre class="syntaxbox notranslate">var <em>stream</em> = <em>blob</em>.stream();</pre>
+
+<h3 id="パラメータ">パラメータ</h3>
+
+<p>なし</p>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>読み込んだときに、<code>Blob</code> の内容を {{domxref("ReadableStream")}} で返します。</p>
+
+<h2 id="使用上のメモ">使用上のメモ</h2>
+
+<p><code>stream()</code> と返された {{domxref("ReadableStream")}} を使用すると、いくつかの興味深い機能を得ることができます。</p>
+
+<ul>
+ <li>返されたストリーム上で{{domxref("ReadableStream.getReader", "getReader()")}} を呼び出して、{{domxref("ReadableStreamDefaultReader")}} インターフェイスの{{domxref("ReadableStreamDefaultReader.read", "read()")}} メソッドのようなメソッドを使用して、Blob からデータを読み取るために使用するオブジェクトを取得します</li>
+ <li>返されたストリームの {{domxref("ReadableStream.pipeTo", "pipeTo()")}} メソッドを呼び出して、Blob のデータを書き込み可能なストリームにパイプします</li>
+ <li>返されたストリームの {{domxref("ReadableStream.tee", "tee()")}} メソッドを呼び出して、可読ストリームを <strong>tee</strong> します。これは、2つの新しい <code>ReadableStream</code> オブジェクトを含む配列を返し、それぞれが <code>Blob</code> の内容を返します</li>
+ <li>返されたストリームの {{domxref("ReadableStream.pipeThrough", "pipeThrough()")}} メソッドを呼び出して、ストリームを {{domxref("TransformStream")}} またはその他の可読および書き込み可能なペアにパイプします</li>
+</ul>
+
+<h2 id="仕様">仕様</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", "#dom-blob-stream", "Blob.stream()")}}</td>
+ <td>{{Spec2("File API")}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.Blob.stream")}}</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("Body.body")}}</li>
+ <li><a href="/en-US/docs/Web/API/Streams_API">Streams API</a></li>
+</ul>
diff --git a/files/ja/web/api/blob/text/index.html b/files/ja/web/api/blob/text/index.html
new file mode 100644
index 0000000000..13fa929a00
--- /dev/null
+++ b/files/ja/web/api/blob/text/index.html
@@ -0,0 +1,79 @@
+---
+title: Blob.text()
+slug: Web/API/Blob/text
+tags:
+ - API
+ - Blob
+ - File API
+ - Method
+ - Reference
+ - String
+ - Text
+ - Utf-8
+ - get
+ - read
+translation_of: Web/API/Blob/text
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><span class="seoSummary">{{domxref("Blob")}} インターフェイスの <code><strong>text()</strong></code> メソッドは {{jsxref("Promise")}} を返しますが、それは Blob の内容を含む文字列で解決され、UTF-8 として解釈されます。</span></p>
+
+<ul>
+</ul>
+
+<h2 id="シンタックス">シンタックス</h2>
+
+<pre class="syntaxbox notranslate">var <em>textPromise</em> = <em>blob</em>.text();
+
+<em>blob</em>.text().then(<em>text</em> =&gt; /* テキストに対して処理をする */);
+
+var <em>text</em> = await <em>blob</em>.text();
+</pre>
+
+<h3 id="パラメータ">パラメータ</h3>
+
+<p>なし</p>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>Blob のデータをテキスト文字列として含む {{domxref("USVString")}} で解決する Promise。データは<em>常に</em> UTF-8 形式であると推定されます。</p>
+
+<h2 id="使用上のメモ">使用上のメモ</h2>
+
+<p>{{domxref("FileReader")}} メソッド {{domxref("FileReader.readAsText", "readAsText()")}} は、同様の機能を実行する古いメソッドです。これは、<code>Blob</code> と {{domxref("File")}} オブジェクトの両方で動作します。主な違いは2つあります。</p>
+
+<ul>
+ <li><code>Blob.text()</code> が Promise を返すのに対し、<code>FileReader.readAsText()</code> はイベントベースの API です</li>
+ <li><code>Blob.text()</code> は常にエンコーディングとして UTF-8 を使用しますが、<code>FileReader.readAsText()</code> は Blob のタイプと指定されたエンコーディング名に応じて異なるエンコーディングを使用することができます</li>
+</ul>
+
+<h2 id="仕様">仕様</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", "#dom-blob-text", "Blob.text()")}}</td>
+ <td>{{Spec2("File API")}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.Blob.text")}}</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("Body.text()")}}</li>
+ <li><a href="/ja/docs/Web/API/Streams_API">Streams API</a></li>
+ <li>{{domxref("FileReader.readAsText()")}}</li>
+</ul>
diff --git a/files/ja/web/api/blob/type/index.html b/files/ja/web/api/blob/type/index.html
new file mode 100644
index 0000000000..c057d1e0f1
--- /dev/null
+++ b/files/ja/web/api/blob/type/index.html
@@ -0,0 +1,85 @@
+---
+title: Blob.type
+slug: Web/API/Blob/type
+tags:
+ - API
+ - Blob
+ - DOM
+ - File
+ - File API
+ - Format
+ - MIME
+ - MIME Type
+ - Property
+ - Reference
+ - Type
+translation_of: Web/API/Blob/type
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><span class="seoSummary">{{domxref("Blob")}} オブジェクトの <strong><code>type</code></strong> プロパティは、ファイルの {{Glossary("MIME type")}} を返します。</span></p>
+
+<h2 id="シンタックス">シンタックス</h2>
+
+<pre class="syntaxbox notranslate">var <em>mimetype</em> = <em>blob</em>.type</pre>
+
+<h3 id="値">値</h3>
+
+<p>ファイルの MIME タイプを含む {{domxref("DOMString")}}、または型が特定できなかった場合は空文字列を指定します。</p>
+
+<h2 id="例">例</h2>
+
+<p>この例では、ユーザーにいくつかのファイルを選択してもらい、各ファイルが指定された画像ファイルタイプのセットのいずれかであるかどうかを確認します。</p>
+
+<pre class="brush:js notranslate">var i, fileInput, files, allowedFileTypes;
+
+// fileInput は HTMLInputElement &lt;input type="file" multiple id="myfileinput"&gt; です。
+fileInput = document.getElementById("myfileinput");
+
+// files は FileList オブジェクトです (NodeList に似ています)。
+files = fileInput.files;
+
+// 私たちのアプリケーションは GIF、PNG、JPEG 画像のみを許可しています。
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i &lt; files.length; i++) {
+ // file.type が許可されたファイルタイプであるかどうかをテストします。
+ if (allowedFileTypes.indexOf(<strong>files[i].type</strong>) &gt; -1) {
+ // マッチしたファイルタイプは、許可されているファイルタイプの一つです。ここで何か処理を行います。
+ }
+});
+</pre>
+
+<h2 id="仕様">仕様</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', '#dfn-type', 'Blob.type')}}</td>
+ <td>{{Spec2('File API')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.Blob.type")}}</p>
+</div>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+ <li>
+ <p><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Web アプリケーションからのファイルの使用</a></p>
+ </li>
+</ul>