From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/blob/arraybuffer/index.html | 75 +++++++++++++ files/ja/web/api/blob/blob/index.html | 79 +++++++++++++ files/ja/web/api/blob/index.html | 161 +++++++++++++++++++++++++++ files/ja/web/api/blob/size/index.html | 75 +++++++++++++ files/ja/web/api/blob/slice/index.html | 71 ++++++++++++ files/ja/web/api/blob/stream/index.html | 71 ++++++++++++ files/ja/web/api/blob/text/index.html | 79 +++++++++++++ files/ja/web/api/blob/type/index.html | 85 ++++++++++++++ 8 files changed, 696 insertions(+) create mode 100644 files/ja/web/api/blob/arraybuffer/index.html create mode 100644 files/ja/web/api/blob/blob/index.html create mode 100644 files/ja/web/api/blob/index.html create mode 100644 files/ja/web/api/blob/size/index.html create mode 100644 files/ja/web/api/blob/slice/index.html create mode 100644 files/ja/web/api/blob/stream/index.html create mode 100644 files/ja/web/api/blob/text/index.html create mode 100644 files/ja/web/api/blob/type/index.html (limited to 'files/ja/web/api/blob') 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 +--- +

{{APIRef("File API")}}

+ +

{{domxref("Blob")}} インターフェイスの arrayBuffer() メソッドは、{{domxref("ArrayBuffer")}} 内のバイナリデータとして Blob の内容を解決する {{jsxref("Promise")}} を返します。

+ + + +

シンタックス

+ +
var bufferPromise = blob.arrayBuffer();
+
+blob.arrayBuffer().then(buffer => /* ArrayBuffer を処理します。 */);
+
+var buffer = await blob.arrayBuffer();
+ +

パラメータ

+ +

なし

+ +

戻り値

+ +

Blob のデータをバイナリ形式で含む {{domxref("ArrayBuffer")}} で解決する Promise。

+ +

例外

+ +

このメソッドは例外をスローしませんが、Promise を拒否することがあります。例えば、Blob のデータを取得するために使用されたリーダーが例外をスローした場合などです。データの取得中に発生した例外はすべて拒否に変換されます。

+ +

使用上のメモ

+ +

{{domxref("FileReader.readAsArrayBuffer()")}} メソッドに似ていますが、arrayBuffer() は、FileReader インターフェイスのメソッドのようにイベントベースの API ではなく、Promise を返します。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("File API", "#dom-blob-arraybuffer", "Blob.arrayBuffer()")}}{{Spec2("File API")}}
+ +

ブラウザの互換性

+ + + +

{{Compat("api.Blob.arrayBuffer")}}

+ +

あわせて参照

+ + 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 +--- +
{{APIRef("File API")}}
+ +

Blob() コンストラクターは、新たな {{domxref("Blob")}} オブジェクトを返します。その blob の中身は、引数 array で与えられた値を連結したものから構成されています。

+ +

構文

+ +
var newBlob = new Blob(array, options);
+
+ +

引数

+ +
+
array
+
{{jsxref("Array")}} で、その中身が {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("USVString")}} のオブジェクト、またはそのようなオブジェクトの何れかが混合したもので、それが {{domxref("Blob")}} の中に入れられます。 USVString オブジェクトは UTF-8 で符号化されたものです。
+
options {{optional_inline}}
+
+

任意で、以下のプロパティを指定する {{domxref("BlobPropertyBag")}} オブジェクトです。

+ +
+
type {{optional_inline}}
+
blob に格納されるデータの {{Glossary("MIME type", "MIME タイプ")}} です。既定値は空文字列 ("") です。
+
endings {{optional_inline}} {{non-standard_inline}}
+
データがテキストの場合、コンテンツ内の改行文字 (\n) の解釈方法を示します。既定値は transparent であり、改行文字を変換することなく blob に格納します。改行文字をホストシステムの慣行に合わせるには、endings を指定してください。
+
+
+
+ +

返値

+ +

指定されたデータを含む {{domxref("Blob")}} オブジェクトです。

+ +

例

+ +
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 単一の DOMString からなる配列
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // blob
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}初回定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.Blob.Blob")}}

+ +

あわせて参照

+ + 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 +--- +
{{APIRef("File API")}}
+ +
+

Blob オブジェクトは blob を表しており、これは不変の生データであるファイルのようなオブジェクトです。テキストやバイナリデータとして読み込んだり、{{DOMxRef("ReadableStream")}} に変換してそのメソッドを使ったデータ処理をしたりできます。

+ +

Blob が表現することができるデータは必ずしも JavaScript ネイティブ形式である必要はありません。{{DOMxRef("File")}} インターフェイスは Blob をベースにしており、Blob の機能を継承してユーザーのシステム上のファイルをサポートするように拡張しています。

+
+ +

Blob の利用

+ +
+
+ +

他の Blob 以外のオブジェクトやデータから Blob を作成するには、{{DOMxRef("Blob.Blob", "Blob()")}} コンストラクタを使用します。他の Blob のデータのサブセットを含む Blob を作成するには、{{DOMxRef("Blob.slice()", "slice()")}} メソッドを使用します。ユーザーのファイルシステム上のファイルの Blob オブジェクトを取得するには、{{DOMxRef("File")}} のドキュメントを参照してください。

+ +

Blob オブジェクトを受け入れる API も、{{domxref("File")}} のドキュメントに掲載しています。

+ +

コンストラクタ

+ +
+
{{DOMxRef("Blob.Blob", "Blob()")}}
+
コンストラクタに渡された配列内のすべてのデータを連結したものを含む、新しく作成された Blob オブジェクトを返します。
+
+ +

インスタンスプロパティ

+ +
+
{{DOMxRef("Blob.prototype.size")}} {{readonlyinline}}
+
Blob オブジェクトに含まれるデータのサイズ (バイト単位)。
+
{{DOMxRef("Blob.prototype.type")}} {{readonlyinline}}
+
Blob に含まれるデータの MIME タイプを示す文字列。タイプが不明な場合、この文字列は空です。
+
+ +

インスタンスメソッド

+ +
+
{{DOMxRef("Blob.prototype.arrayBuffer()")}}
+
Blob の全内容をバイナリデータとして含む {{DOMxRef("ArrayBuffer")}} で解決する Promise を返します。
+
{{DOMxRef("Blob.prototype.slice()")}}
+
呼び出された Blob の指定されたバイト数範囲のデータを含む新しい Blob オブジェクトを返します。
+
{{DOMxRef("Blob.prototype.stream()")}}
+
Blob の内容を読み込むために使用できる {{DOMxRef("ReadableStream")}} を返します。
+
{{DOMxRef("Blob.prototype.text()")}}
+
UTF-8 テキストとして解釈された Blob の内容全体を含む {{DOMxRef("USVString")}} で解決する Promise を返します。
+
+ +

例

+ +

Blob の作成

+ +

{{DOMxRef("Blob.Blob", "Blob()")}} コンストラクタは、他のオブジェクトから Blob を作成することができます。たとえば、JSON 文字列から Blob を作成するには、次のようにします。

+ +
const obj = {hello: 'world'};
+const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});
+ +

型付き配列の内容を表す URL の作成

+ +

次のコードは、JavaScript の型付き配列を作成し、型付き配列のデータを含む新しい Blob を作成します。次に、{{DOMxRef("URL.createObjectURL()")}} を呼び出して、Blob を {{glossary("URL")}} に変換します。

+ +

HTML

+ +
<p>この例では、スペース文字から文字 Z までの ASCII コードを含む型付けされた配列を作成し、
+それをオブジェクト URL に変換します。
+そのオブジェクト URL を開くためのリンクが作成されます。
+リンクをクリックすると、デコードされたオブジェクト URL が表示されます。</p>
+ +

JavaScript

+ +

このコードの例示のための主要な部分は typedArrayToURL() 関数で、与えられた型付き配列から Blob を作成し、それに対するオブジェクト URL を返します。データをオブジェクト URL に変換した後は、要素の {{HTMLElement("img")}} 属性の値として含む、さまざまな方法で使用することができます (もちろん、データに画像が含まれていることを前提としています)。

+ +
function typedArrayToURL(typedArray, mimeType) {
+  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
+}
+
+const bytes = new Uint8Array(59);
+
+for(let i = 0; i < 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);
+ +

結果

+ +

例のリンクをクリックすると、ブラウザがオブジェクトの URL をデコードしているのがわかります。

+ +

{{EmbedLiveSample("Creating_a_URL_representing_the_contents_of_a_typed_array", 600, 200)}}

+ +

Blob からデータを抽出する

+ +

Blob から内容を読み込む方法の 1 つは、{{DOMxRef("FileReader")}} を使用することです。次のコードは、Blob の内容を型付き配列として読み込みます。

+ +
const reader = new FileReader();
+reader.addEventListener('loadend', () => {
+   // reader.result には blob の内容が型付き配列として格納されます。
+});
+reader.readAsArrayBuffer(blob);
+ +

Blob から内容を読み込む別の方法としては、{{domxref("Response")}} を使用する方法があります。次のコードは、Blob の内容をテキストとして読み取るものです。

+ +
const text = await (new Response(blob)).text();
+
+ +

または、{{DOMxRef("Blob.prototype.text()")}} を使用します。

+ +
const text = await blob.text();
+ +

FileReader の他のメソッドを使用することで、Blob の内容を文字列またはデータ URL として読み込むことができます。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('File API', '#blob-section', 'Blob インターフェイス')}}{{Spec2('File API')}}初期定義
+ +

ブラウザ実装状況

+ + + +

{{Compat("api.Blob")}}

+ +

あわせて参照

+ + 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 +--- +
+
{{APIRef("File API")}}
+ +

{{domxref("Blob")}} インターフェイスの size プロパティは、{{domxref("Blob")}} または {{domxref("File")}} のサイズをバイト単位で返します。

+ +

シンタックス

+ +
var sizeInBytes = blob.size
+
+ +

値

+ +

Blob (または Blob ベースのオブジェクト、例えば{{domxref("File")}}) 内に含まれるデータのバイト数。

+ +

例

+ +

この例では、file 型の {{HTMLElement("input")}} 要素を使用して、ユーザーにファイルのグループを尋ね、それらのファイルを繰り返し処理して、その名前と長さをバイト単位で出力しています。

+ +
// fileInputは HTMLInputElement <input type="file" multiple id="myfileinput"> です。
+var fileInput = document.getElementById("myfileinput");
+
+// files は FileList オブジェクトです (NodeList に似ています)。
+var files = fileInput.files;
+
+for (var i = 0; i < files.length; i++) {
+  console.log(files[i].name + " has a size of " + files[i].size + " Bytes");
+}
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('File API', '#dfn-size', 'Blob.size')}}{{Spec2('File API')}}初期定義
+ +

ブラウザの互換性

+ +
+

{{Compat("api.Blob.size")}}

+
+ +

あわせて参照

+ + +
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 +--- +
{{APIRef("File API")}}
+ +

{{domxref("Blob")}} インターフェイスの slice() メソッドは、呼び出された blob のサブセットのデータを含む新しい Blob オブジェクトを作成して返します。

+ +

構文

+ +
var newBlob = blob.slice(start, end, contentType);
+ +

パラメータ

+ +
+
start {{optional_inline}}
+
新しい {{domxref("Blob")}} に含める最初のバイトを示す {{domxref("Blob")}} へのインデックス。負の値を指定すると、{{domxref("Blob")}} の末尾から先頭へのオフセットとして扱われます。例えば、-10 は {{domxref("Blob")}} の最後のバイトから10番目になります。デフォルト値は 0 です。start にもとの {{domxref("Blob")}} のサイズよりも大きい値を指定すると、返される {{domxref("Blob")}} のサイズは 0 で、データは何も含まれません。
+
end {{optional_inline}}
+
新しい {{domxref("Blob")}} に含まれない最初のバイトを示す {{domxref("Blob")}} へのインデックス。(つまり、このインデックスに正確に位置するバイトは含まれません)。負の値を指定すると、{{domxref("Blob")}} の末尾から先頭へのオフセットとして扱われます。例えば、-10は {{domxref("Blob")}} の最後のバイトから10番目になります。デフォルト値は size です。
+
contentType {{optional_inline}}
+
新しい {{domxref("Blob")}} に割り当てるコンテンツの型。これはその type プロパティの値になります。デフォルト値は空の文字列です。
+
+ +

戻り値

+ +

このメソッドが呼び出された Blob 内に含まれるデータの指定されたサブセットを含む新しい {{domxref("Blob")}} オブジェクト。元の Blob は変更されません。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName("File API", "#dfn-slice", "Blob.slice()")}}{{Spec2("File API")}}初期定義。
+ +

ブラウザの実装状況

+ + + +

{{Compat("api.Blob.slice")}}

+ +

あわせて参照

+ + 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 +--- +

{{APIRef("File API")}}

+ +

{{domxref("Blob")}} インターフェイスのstream() メソッドは、{{domxref("ReadableStream")}} を返します。これは、読み取り時に、Blob に含まれるデータを返します。

+ +

シンタックス

+ +
var stream = blob.stream();
+ +

パラメータ

+ +

なし

+ +

戻り値

+ +

読み込んだときに、Blob の内容を {{domxref("ReadableStream")}} で返します。

+ +

使用上のメモ

+ +

stream() と返された {{domxref("ReadableStream")}} を使用すると、いくつかの興味深い機能を得ることができます。

+ + + +

仕様

+ + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("File API", "#dom-blob-stream", "Blob.stream()")}}{{Spec2("File API")}}
+ +

ブラウザの互換性

+ + + +

{{Compat("api.Blob.stream")}}

+ +

あわせて参照

+ + 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 +--- +
{{APIRef("File API")}}
+ +

{{domxref("Blob")}} インターフェイスの text() メソッドは {{jsxref("Promise")}} を返しますが、それは Blob の内容を含む文字列で解決され、UTF-8 として解釈されます。

+ + + +

シンタックス

+ +
var textPromise = blob.text();
+
+blob.text().then(text => /* テキストに対して処理をする */);
+
+var text = await blob.text();
+
+ +

パラメータ

+ +

なし

+ +

戻り値

+ +

Blob のデータをテキスト文字列として含む {{domxref("USVString")}} で解決する Promise。データは常に UTF-8 形式であると推定されます。

+ +

使用上のメモ

+ +

{{domxref("FileReader")}} メソッド {{domxref("FileReader.readAsText", "readAsText()")}} は、同様の機能を実行する古いメソッドです。これは、Blob と {{domxref("File")}} オブジェクトの両方で動作します。主な違いは2つあります。

+ + + +

仕様

+ + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("File API", "#dom-blob-text", "Blob.text()")}}{{Spec2("File API")}}
+ +

ブラウザの互換性

+ + + +

{{Compat("api.Blob.text")}}

+ +

あわせて参照

+ + 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 +--- +
{{APIRef("File API")}}
+ +

{{domxref("Blob")}} オブジェクトの type プロパティは、ファイルの {{Glossary("MIME type")}} を返します。

+ +

シンタックス

+ +
var mimetype = blob.type
+ +

値

+ +

ファイルの MIME タイプを含む {{domxref("DOMString")}}、または型が特定できなかった場合は空文字列を指定します。

+ +

例

+ +

この例では、ユーザーにいくつかのファイルを選択してもらい、各ファイルが指定された画像ファイルタイプのセットのいずれかであるかどうかを確認します。

+ +
var i, fileInput, files, allowedFileTypes;
+
+// fileInput は HTMLInputElement <input type="file" multiple id="myfileinput"> です。
+fileInput = document.getElementById("myfileinput");
+
+// files は FileList オブジェクトです (NodeList に似ています)。
+files = fileInput.files;
+
+// 私たちのアプリケーションは GIF、PNG、JPEG 画像のみを許可しています。
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i < files.length; i++) {
+  // file.type が許可されたファイルタイプであるかどうかをテストします。
+  if (allowedFileTypes.indexOf(files[i].type) > -1) {
+    // マッチしたファイルタイプは、許可されているファイルタイプの一つです。ここで何か処理を行います。
+  }
+});
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('File API', '#dfn-type', 'Blob.type')}}{{Spec2('File API')}}初期定義
+ +

ブラウザの互換性

+ +
+ + +

{{Compat("api.Blob.type")}}

+
+ +

あわせて参照

+ + -- cgit v1.2.3-54-g00ecf