diff --git a/files/ja/web/api/dompointreadonly/frompoint_static/index.md b/files/ja/web/api/dompointreadonly/frompoint_static/index.md index 2cfa30d283d54d..eb77308a4613ca 100644 --- a/files/ja/web/api/dompointreadonly/frompoint_static/index.md +++ b/files/ja/web/api/dompointreadonly/frompoint_static/index.md @@ -13,7 +13,7 @@ original_slug: Web/API/DOMPointReadOnly/fromPoint ## 構文 ```js -fromPoint(sourcePoint) +fromPoint(sourcePoint); ``` ### 引数 @@ -42,7 +42,7 @@ fromPoint(sourcePoint) このサンプルでは、 {{domxref("DOMPointReadOnly.x", "x")}} と {{domxref("DOMPointReadOnly.y", "y")}} に使用する値を含むインラインオブジェクトを指定し、二次元点を作成しています。 `z` と `w` プロパティは既定値（それぞれ `0` と `1`）のままにしておくことが可能です。 ```js -const point2D = DOMPointReadOnly.fromPoint({x: 25, y: 25}) +const point2D = DOMPointReadOnly.fromPoint({ x: 25, y: 25 }); ``` ### 既存の点を使用して三次元の点を作成します。 @@ -50,9 +50,9 @@ const point2D = DOMPointReadOnly.fromPoint({x: 25, y: 25}) この例では、 {{domxref("DOMPoint")}} を用いて、 {{domxref("DOMPoint.DOMPoint", "new DOMPoint()")}} 型の点 `origPoint` を作成しています。そして、その点は `fromPoint()` の入力として使用され、新しい点 `newPoint` を作成します。 ```js -const origPoint = new DOMPoint(25, 25, 100, 0.5) +const origPoint = new DOMPoint(25, 25, 100, 0.5); -const newPoint = DOMPointReadOnly.fromPoint(origPoint) +const newPoint = DOMPointReadOnly.fromPoint(origPoint); ``` ## 仕様書 diff --git a/files/ja/web/api/dompointreadonly/index.md b/files/ja/web/api/dompointreadonly/index.md index 45f6d08cfadc48..06f8d5d7419644 100644 --- a/files/ja/web/api/dompointreadonly/index.md +++ b/files/ja/web/api/dompointreadonly/index.md @@ -25,7 +25,7 @@ const point3DPerspective = new DOMPointReadOnly(100, 100, 100, 1.0); もう一つの選択肢は、静的な {{domxref("DOMPointReadOnly.fromPoint()")}} メソッドを使用する方法です。 ```js -const point = DOMPointReadOnly.fromPoint({x: 100, y: 100, z: 50, w: 1.0}); +const point = DOMPointReadOnly.fromPoint({ x: 100, y: 100, z: 50, w: 1.0 }); ``` ## コンストラクター diff --git a/files/ja/web/api/dompointreadonly/tojson/index.md b/files/ja/web/api/dompointreadonly/tojson/index.md index 3ebaf588773989..26ac518d428c3e 100644 --- a/files/ja/web/api/dompointreadonly/tojson/index.md +++ b/files/ja/web/api/dompointreadonly/tojson/index.md @@ -10,7 +10,7 @@ slug: Web/API/DOMPointReadOnly/toJSON ## 構文 ```js -toJSON() +toJSON(); ``` ### 引数 diff --git a/files/ja/web/api/domrect/fromrect_static/index.md b/files/ja/web/api/domrect/fromrect_static/index.md index 17c7d1ed397444..2cfff0c26096a7 100644 --- a/files/ja/web/api/domrect/fromrect_static/index.md +++ b/files/ja/web/api/domrect/fromrect_static/index.md @@ -11,8 +11,8 @@ original_slug: Web/API/DOMRect/fromRect ## 構文 ```js -fromRect() -fromRect(rectangle) +fromRect(); +fromRect(rectangle); ``` ### 引数 diff --git a/files/ja/web/api/domrectreadonly/domrectreadonly/index.md b/files/ja/web/api/domrectreadonly/domrectreadonly/index.md index 32896d7b01cccd..710ab270565a12 100644 --- a/files/ja/web/api/domrectreadonly/domrectreadonly/index.md +++ b/files/ja/web/api/domrectreadonly/domrectreadonly/index.md @@ -10,7 +10,7 @@ slug: Web/API/DOMRectReadOnly/DOMRectReadOnly ## 構文 ```js -new DOMRectReadOnly(x, y, width, height) +new DOMRectReadOnly(x, y, width, height); ``` ### 引数 @@ -18,6 +18,7 @@ new DOMRectReadOnly(x, y, width, height) - _x_ - : `DOMRectReadOnly` の原点の `x` 座標です。 - _y_ + - : `DOMRectReadOnly` の原点の `y` 座標です。 - _width_ @@ -30,7 +31,7 @@ new DOMRectReadOnly(x, y, width, height) 新しい `DOMPoint` を作成するには、次のようなコード行を実行します。 ```js -const myDOMRect = new DOMRectReadOnly(0, 0, 100, 100) +const myDOMRect = new DOMRectReadOnly(0, 0, 100, 100); // 'myDOMRect' をコンソールで実行すると、次の行が返ります。 // DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } ``` diff --git a/files/ja/web/api/domrectreadonly/fromrect_static/index.md b/files/ja/web/api/domrectreadonly/fromrect_static/index.md index 007abd861cbd30..193fbc48fb2e0c 100644 --- a/files/ja/web/api/domrectreadonly/fromrect_static/index.md +++ b/files/ja/web/api/domrectreadonly/fromrect_static/index.md @@ -11,8 +11,8 @@ original_slug: Web/API/DOMRectReadOnly/fromRect ## 構文 ```js -fromRect() -fromRect(rectangle) +fromRect(); +fromRect(rectangle); ``` ### 引数 diff --git a/files/ja/web/api/dragevent/datatransfer/index.md b/files/ja/web/api/dragevent/datatransfer/index.md index 5f1a1a5bf2b410..c05f4c8945f056 100644 --- a/files/ja/web/api/dragevent/datatransfer/index.md +++ b/files/ja/web/api/dragevent/datatransfer/index.md @@ -19,13 +19,17 @@ slug: Web/API/DragEvent/dataTransfer ```js function processData(d) { - // データを処理... + // データを処理... } -dragTarget.addEventListener("dragend", function(ev) { - // ドラッグ＆ドロップのデータ処理を呼び出す - if (ev.dataTransfer !== null) processData(ev.dataTransfer); - }, false); +dragTarget.addEventListener( + "dragend", + function (ev) { + // ドラッグ＆ドロップのデータ処理を呼び出す + if (ev.dataTransfer !== null) processData(ev.dataTransfer); + }, + false, +); ``` ## 仕様書 diff --git a/files/ja/web/api/dragevent/dragevent/index.md b/files/ja/web/api/dragevent/dragevent/index.md index fa2688c15db32a..56d76acb4d6188 100644 --- a/files/ja/web/api/dragevent/dragevent/index.md +++ b/files/ja/web/api/dragevent/dragevent/index.md @@ -14,13 +14,14 @@ slug: Web/API/DragEvent/DragEvent ## 構文 ```js -new DragEvent(type) -new DragEvent(type, dragEventInit) +new DragEvent(type); +new DragEvent(type, dragEventInit); ``` ### 引数 - `type` + - : イベント名を表す文字列です（[DragEvent のイベントの種類](/ja/docs/Web/API/DragEvent#イベントの種類)を参照）。 - `dragEventInit` {{optional_inline}} diff --git a/files/ja/web/api/eckeygenparams/index.md b/files/ja/web/api/eckeygenparams/index.md index 06c89566839b02..a22d1c4c69c853 100644 --- a/files/ja/web/api/eckeygenparams/index.md +++ b/files/ja/web/api/eckeygenparams/index.md @@ -14,6 +14,7 @@ l10n: - `name` - : 文字列。使用したいアルゴリズムにより、`ECDSA` または `ECDH` に設定するべきです。 - `namedCurve` + - : 使用する楕円曲線の名前を表す文字列です。以下の [NIST](https://www.nist.gov/) によって承認された曲線の名前のうちいずれかを指定できます。 - `P-256` diff --git a/files/ja/web/api/element/append/index.md b/files/ja/web/api/element/append/index.md index 5be46742673cdf..188166df74f398 100644 --- a/files/ja/web/api/element/append/index.md +++ b/files/ja/web/api/element/append/index.md @@ -57,7 +57,7 @@ console.log(div.childNodes); // NodeList [

] let div = document.createElement("div"); div.append("Some text"); -console.log(div.textContent) // "Some text" +console.log(div.textContent); // "Some text" ``` ### 要素とテキストの追加 diff --git a/files/ja/web/api/element/compositionend_event/index.md b/files/ja/web/api/element/compositionend_event/index.md index 6c38de7a8da53d..b77fb1d161b447 100644 --- a/files/ja/web/api/element/compositionend_event/index.md +++ b/files/ja/web/api/element/compositionend_event/index.md @@ -1,5 +1,5 @@ --- -title: 'Element: compositionend イベント' +title: "Element: compositionend イベント" slug: Web/API/Element/compositionend_event --- @@ -35,7 +35,7 @@ slug: Web/API/Element/compositionend_event ```js const inputElement = document.querySelector('input[type="text"]'); -inputElement.addEventListener('compositionend', (event) => { +inputElement.addEventListener("compositionend", (event) => { console.log(`generated characters were: ${event.data}`); }); ``` @@ -46,8 +46,11 @@ inputElement.addEventListener('compositionend', (event) => { ```html

- - + +
@@ -59,7 +62,7 @@ inputElement.addEventListener('compositionend', (event) => { ```css hidden body { - padding: .2rem; + padding: 0.2rem; display: grid; grid-template-areas: "control log"; } @@ -76,12 +79,13 @@ body { resize: none; } -label, button { +label, +button { display: block; } input[type="text"] { - margin: .5rem 0; + margin: 0.5rem 0; } kbd { @@ -95,20 +99,20 @@ kbd { ```js const inputElement = document.querySelector('input[type="text"]'); -const log = document.querySelector('.event-log-contents'); -const clearLog = document.querySelector('.clear-log'); +const log = document.querySelector(".event-log-contents"); +const clearLog = document.querySelector(".clear-log"); -clearLog.addEventListener('click', () => { - log.textContent = ''; +clearLog.addEventListener("click", () => { + log.textContent = ""; }); function handleEvent(event) { - log.textContent = log.textContent + `${event.type}: ${event.data}\n`; + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; } -inputElement.addEventListener('compositionstart', handleEvent); -inputElement.addEventListener('compositionupdate', handleEvent); -inputElement.addEventListener('compositionend', handleEvent); +inputElement.addEventListener("compositionstart", handleEvent); +inputElement.addEventListener("compositionupdate", handleEvent); +inputElement.addEventListener("compositionend", handleEvent); ``` #### 結果 diff --git a/files/ja/web/api/element/compositionstart_event/index.md b/files/ja/web/api/element/compositionstart_event/index.md index 81288f17ec762d..ce4548c034b4b5 100644 --- a/files/ja/web/api/element/compositionstart_event/index.md +++ b/files/ja/web/api/element/compositionstart_event/index.md @@ -1,5 +1,5 @@ --- -title: 'Element: compositionstart イベント' +title: "Element: compositionstart イベント" slug: Web/API/Element/compositionstart_event --- @@ -35,7 +35,7 @@ slug: Web/API/Element/compositionstart_event ```js const inputElement = document.querySelector('input[type="text"]'); -inputElement.addEventListener('compositionstart', (event) => { +inputElement.addEventListener("compositionstart", (event) => { console.log(`generated characters were: ${event.data}`); }); ``` @@ -46,8 +46,11 @@ inputElement.addEventListener('compositionstart', (event) => { ```html
- - + +
@@ -59,7 +62,7 @@ inputElement.addEventListener('compositionstart', (event) => { ```css hidden body { - padding: .2rem; + padding: 0.2rem; display: grid; grid-template-areas: "control log"; } @@ -76,12 +79,13 @@ body { resize: none; } -label, button { +label, +button { display: block; } input[type="text"] { - margin: .5rem 0; + margin: 0.5rem 0; } kbd { @@ -95,20 +99,20 @@ kbd { ```js const inputElement = document.querySelector('input[type="text"]'); -const log = document.querySelector('.event-log-contents'); -const clearLog = document.querySelector('.clear-log'); +const log = document.querySelector(".event-log-contents"); +const clearLog = document.querySelector(".clear-log"); -clearLog.addEventListener('click', () => { - log.textContent = ''; +clearLog.addEventListener("click", () => { + log.textContent = ""; }); function handleEvent(event) { - log.textContent = log.textContent + `${event.type}: ${event.data}\n`; + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; } -inputElement.addEventListener('compositionstart', handleEvent); -inputElement.addEventListener('compositionupdate', handleEvent); -inputElement.addEventListener('compositionend', handleEvent); +inputElement.addEventListener("compositionstart", handleEvent); +inputElement.addEventListener("compositionupdate", handleEvent); +inputElement.addEventListener("compositionend", handleEvent); ``` #### 結果 diff --git a/files/ja/web/api/element/compositionupdate_event/index.md b/files/ja/web/api/element/compositionupdate_event/index.md index 69ea5adb4df99e..fb24020ccf965f 100644 --- a/files/ja/web/api/element/compositionupdate_event/index.md +++ b/files/ja/web/api/element/compositionupdate_event/index.md @@ -1,5 +1,5 @@ --- -title: 'Element: compositionupdate イベント' +title: "Element: compositionupdate イベント" slug: Web/API/Element/compositionupdate_event --- @@ -35,7 +35,7 @@ slug: Web/API/Element/compositionupdate_event ```js const inputElement = document.querySelector('input[type="text"]'); -inputElement.addEventListener('compositionupdate', (event) => { +inputElement.addEventListener("compositionupdate", (event) => { console.log(`generated characters were: ${event.data}`); }); ``` @@ -46,8 +46,11 @@ inputElement.addEventListener('compositionupdate', (event) => { ```html
- - + +
@@ -59,7 +62,7 @@ inputElement.addEventListener('compositionupdate', (event) => { ```css hidden body { - padding: .2rem; + padding: 0.2rem; display: grid; grid-template-areas: "control log"; } @@ -76,12 +79,13 @@ body { resize: none; } -label, button { +label, +button { display: block; } input[type="text"] { - margin: .5rem 0; + margin: 0.5rem 0; } kbd { @@ -95,20 +99,20 @@ kbd { ```js const inputElement = document.querySelector('input[type="text"]'); -const log = document.querySelector('.event-log-contents'); -const clearLog = document.querySelector('.clear-log'); +const log = document.querySelector(".event-log-contents"); +const clearLog = document.querySelector(".clear-log"); -clearLog.addEventListener('click', () => { - log.textContent = ''; +clearLog.addEventListener("click", () => { + log.textContent = ""; }); function handleEvent(event) { - log.textContent = log.textContent + `${event.type}: ${event.data}\n`; + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; } -inputElement.addEventListener('compositionstart', handleEvent); -inputElement.addEventListener('compositionupdate', handleEvent); -inputElement.addEventListener('compositionend', handleEvent); +inputElement.addEventListener("compositionstart", handleEvent); +inputElement.addEventListener("compositionupdate", handleEvent); +inputElement.addEventListener("compositionend", handleEvent); ``` #### 結果 diff --git a/files/ja/web/api/element/fullscreenchange_event/index.md b/files/ja/web/api/element/fullscreenchange_event/index.md index 20685893063936..74c4066aa6fb41 100644 --- a/files/ja/web/api/element/fullscreenchange_event/index.md +++ b/files/ja/web/api/element/fullscreenchange_event/index.md @@ -21,9 +21,9 @@ l10n: このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 ```js -addEventListener('fullscreenchange', (event) => { }); +addEventListener("fullscreenchange", (event) => {}); -onfullscreenchange = (event) => { }; +onfullscreenchange = (event) => {}; ``` ## イベント型 @@ -52,7 +52,7 @@ onfullscreenchange = (event) => { }; ### JavaScript ```js -function fullscreenchanged (event) { +function fullscreenchanged(event) { // document.fullscreenElement は、全画面モードにある要素があれば // それを指します。要素がなければ、このプロパティの値は null に // あります。 diff --git a/files/ja/web/api/element/getelementsbytagname/index.md b/files/ja/web/api/element/getelementsbytagname/index.md index 748e441ba21092..141f9c41174e0c 100644 --- a/files/ja/web/api/element/getelementsbytagname/index.md +++ b/files/ja/web/api/element/getelementsbytagname/index.md @@ -28,7 +28,7 @@ getElementsByTagName(tagName) ### 返値 -*生きた* {{domxref("HTMLCollection")}} で、タグ名が一致する要素が出現順で入ります。要素が見つからなかった場合は `HTMLCollection` は空になります。 +_生きた_ {{domxref("HTMLCollection")}} で、タグ名が一致する要素が出現順で入ります。要素が見つからなかった場合は `HTMLCollection` は空になります。 ## 例 diff --git a/files/ja/web/api/element/keydown_event/index.md b/files/ja/web/api/element/keydown_event/index.md index 952875668b00e8..6f478f004da58b 100644 --- a/files/ja/web/api/element/keydown_event/index.md +++ b/files/ja/web/api/element/keydown_event/index.md @@ -34,7 +34,7 @@ eventTarget.addEventListener("keydown", (event) => { ```js addEventListener("keydown", (event) => {}); -onkeydown = (event) => { }; +onkeydown = (event) => {}; ``` ## イベント型 @@ -90,7 +90,7 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d この例では、 {{HtmlElement("input")}} 要素内でキーを押すたびに、 {{domxref("KeyboardEvent.code")}} 値を記録します。 ```html - +

``` diff --git a/files/ja/web/api/element/keypress_event/index.md b/files/ja/web/api/element/keypress_event/index.md index 44ac797d000bfc..bca0451e5fa9aa 100644 --- a/files/ja/web/api/element/keypress_event/index.md +++ b/files/ja/web/api/element/keypress_event/index.md @@ -78,7 +78,9 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d ```html
- +

diff --git a/files/ja/web/api/element/keyup_event/index.md b/files/ja/web/api/element/keyup_event/index.md index c1a9b061a95595..e42389d30a8441 100644 --- a/files/ja/web/api/element/keyup_event/index.md +++ b/files/ja/web/api/element/keyup_event/index.md @@ -88,7 +88,9 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d この例では、 {{HtmlElement("input")}} 要素内でキーを離すたびに、 {{domxref("KeyboardEvent.code")}} 値を記録します。 ```html - +

``` diff --git a/files/ja/web/api/element/nextelementsibling/index.md b/files/ja/web/api/element/nextelementsibling/index.md index 3d243d287d7125..543b2653efa552 100644 --- a/files/ja/web/api/element/nextelementsibling/index.md +++ b/files/ja/web/api/element/nextelementsibling/index.md @@ -23,8 +23,8 @@ element = el.nextElementSibling;
Here is div-02
@@ -150,7 +151,9 @@ for (let i = 0, numFiles = fileList.length; i < numFiles; i++) { multiple accept="image/*" style="display:none" /> - + ``` `click` イベントを扱うコードは次のようなものです。 @@ -159,11 +162,15 @@ for (let i = 0, numFiles = fileList.length; i < numFiles; i++) { const fileSelect = document.getElementById("fileSelect"); const fileElem = document.getElementById("fileElem"); -fileSelect.addEventListener("click", (e) => { - if (fileElem) { - fileElem.click(); - } -}, false); +fileSelect.addEventListener( + "click", + (e) => { + if (fileElem) { + fileElem.click(); + } + }, + false, +); ``` {{HTMLElement("button")}} は、好きなようにスタイル付けできます。 @@ -258,7 +265,9 @@ function handleFiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; - if (!file.type.startsWith('image/')){ continue } + if (!file.type.startsWith("image/")) { + continue; + } const img = document.createElement("img"); img.classList.add("obj"); @@ -266,7 +275,9 @@ function handleFiles(files) { preview.appendChild(img); // 「プレビュー」とは、コンテンツが表示される div 出力のことを想定しています。 const reader = new FileReader(); - reader.onload = (e) => { img.src = e.target.result; }; + reader.onload = (e) => { + img.src = e.target.result; + }; reader.readAsDataURL(file); } } @@ -319,15 +330,19 @@ URL.revokeObjectURL(objectURL); ```js const fileSelect = document.getElementById("fileSelect"), - fileElem = document.getElementById("fileElem"), - fileList = document.getElementById("fileList"); - -fileSelect.addEventListener("click", (e) => { - if (fileElem) { - fileElem.click(); - } - e.preventDefault(); // "#" への移動を防ぐ -}, false); + fileElem = document.getElementById("fileElem"), + fileList = document.getElementById("fileList"); + +fileSelect.addEventListener( + "click", + (e) => { + if (fileElem) { + fileElem.click(); + } + e.preventDefault(); // "#" への移動を防ぐ + }, + false, +); fileElem.addEventListener("change", handleFiles, false); @@ -347,7 +362,7 @@ function handleFiles() { img.height = 60; img.onload = () => { URL.revokeObjectURL(img.src); - } + }; li.appendChild(img); const info = document.createElement("span"); info.innerHTML = `${this.files[i].name}: ${this.files[i].size} バイト`; @@ -365,12 +380,12 @@ function handleFiles() { 2. 新しいリスト要素は、{{HTMLElement("div")}} ブロックの中に {{DOMxRef("Node.appendChild()")}} メソッドを呼び出すことで挿入されます。 3. `files` で表される {{DOMxRef("FileList")}} 内のそれぞれの {{DOMxRef("File")}} に対して次の処理を実行します。 - 1. 新しくリスト項目 ({{HTMLElement("li")}}) 要素を作成し、リストに挿入します。 - 2. 新しく画像 ({{HTMLElement("img")}}) 要素を作成します。 - 3. {{DOMxRef("URL.createObjectURL()")}} を用いて、Blob の URL を作成して、画像のソースをファイルを表す新しいオブジェクト URL に設定します。 - 4. 画像の高さを 60 ピクセルに設定します。 - 5. 画像が読み込まれると不要になるため、画像の読み込みイベントハンドラーを設定してオブジェクトの URL を解放します。これは {{DOMxRef("URL.revokeObjectURL()")}} メソッドを呼び出し、`img.src` で指定したオブジェクト URL 文字列を渡すことで行います。 - 6. 新しいリスト項目をリストに追加する。 + 1. 新しくリスト項目 ({{HTMLElement("li")}}) 要素を作成し、リストに挿入します。 + 2. 新しく画像 ({{HTMLElement("img")}}) 要素を作成します。 + 3. {{DOMxRef("URL.createObjectURL()")}} を用いて、Blob の URL を作成して、画像のソースをファイルを表す新しいオブジェクト URL に設定します。 + 4. 画像の高さを 60 ピクセルに設定します。 + 5. 画像が読み込まれると不要になるため、画像の読み込みイベントハンドラーを設定してオブジェクトの URL を解放します。これは {{DOMxRef("URL.revokeObjectURL()")}} メソッドを呼び出し、`img.src` で指定したオブジェクト URL 文字列を渡すことで行います。 + 6. 新しいリスト項目をリストに追加する。 上のコードのライブデモはこちらです。 @@ -408,20 +423,31 @@ function FileUpload(img, file) { this.xhr = xhr; const self = this; - this.xhr.upload.addEventListener("progress", (e) => { - if (e.lengthComputable) { - const percentage = Math.round((e.loaded * 100) / e.total); - self.ctrl.update(percentage); - } - }, false); - - xhr.upload.addEventListener("load", (e) => { - self.ctrl.update(100); - const canvas = self.ctrl.ctx.canvas; - canvas.parentNode.removeChild(canvas); - }, false); - xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); - xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); + this.xhr.upload.addEventListener( + "progress", + (e) => { + if (e.lengthComputable) { + const percentage = Math.round((e.loaded * 100) / e.total); + self.ctrl.update(percentage); + } + }, + false, + ); + + xhr.upload.addEventListener( + "load", + (e) => { + self.ctrl.update(100); + const canvas = self.ctrl.ctx.canvas; + canvas.parentNode.removeChild(canvas); + }, + false, + ); + xhr.open( + "POST", + "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php", + ); + xhr.overrideMimeType("text/plain; charset=x-user-defined-binary"); reader.onload = (evt) => { xhr.send(evt.target.result); }; @@ -431,19 +457,24 @@ function FileUpload(img, file) { function createThrobber(img) { const throbberWidth = 64; const throbberHeight = 6; - const throbber = document.createElement('canvas'); - throbber.classList.add('upload-progress'); - throbber.setAttribute('width', throbberWidth); - throbber.setAttribute('height', throbberHeight); + const throbber = document.createElement("canvas"); + throbber.classList.add("upload-progress"); + throbber.setAttribute("width", throbberWidth); + throbber.setAttribute("height", throbberHeight); img.parentNode.appendChild(throbber); - throbber.ctx = throbber.getContext('2d'); - throbber.ctx.fillStyle = 'orange'; + throbber.ctx = throbber.getContext("2d"); + throbber.ctx.fillStyle = "orange"; throbber.update = (percent) => { - throbber.ctx.fillRect(0, 0, throbberWidth * percent / 100, throbberHeight); + throbber.ctx.fillRect( + 0, + 0, + (throbberWidth * percent) / 100, + throbberHeight, + ); if (percent === 100) { - throbber.ctx.fillStyle = 'green'; + throbber.ctx.fillStyle = "green"; } - } + }; throbber.update(0); return throbber; } @@ -534,8 +565,8 @@ Firefox では、 PDF が iframe 内に埋め込まれて表示されるよう ```js const obj_url = URL.createObjectURL(blob); -const iframe = document.getElementById('viewer'); -iframe.setAttribute('src', obj_url); +const iframe = document.getElementById("viewer"); +iframe.setAttribute("src", obj_url); URL.revokeObjectURL(obj_url); ``` @@ -544,7 +575,7 @@ URL.revokeObjectURL(obj_url); 他の形式のファイルも同じように操作できます。ここでは、アップロードされた動画をプレビューする方法を紹介します。 ```js -const video = document.getElementById('video'); +const video = document.getElementById("video"); const obj_url = URL.createObjectURL(blob); video.src = obj_url; video.play(); diff --git a/files/ja/web/api/filelist/index.md b/files/ja/web/api/filelist/index.md index b938e0c13be992..46643d12898406 100644 --- a/files/ja/web/api/filelist/index.md +++ b/files/ja/web/api/filelist/index.md @@ -14,13 +14,13 @@ slug: Web/API/FileList すべての `` 要素のノードには `files` 属性があり、これが `FileList` 型なので、リスト中の項目にアクセスすることができます。例えば、HTML に以下のファイル入力があるとします。 ```html - + ``` 次のコードの行は、ノードのファイルリスト内の最初のファイルを [`File`](/ja/docs/Web/API/File) オブジェクトとして取得します。 ```js -var file = document.getElementById('fileItem').files[0]; +var file = document.getElementById("fileItem").files[0]; ``` ## メソッドの概要 @@ -87,54 +87,49 @@ var file; // files を反復処理 for (var i = 0; i < files.length; i++) { + // get item + file = files.item(i); + //or + file = files[i]; - // get item - file = files.item(i); - //or - file = files[i]; - - alert(file.name); + alert(file.name); } ``` こちらが完全な例です。 ```html - + - - - - - - - - - - + // input 要素の onchange を設定し pullfiles を呼び出すようにします。 + document.querySelector("#myfiles").onchange = pullfiles; + //a.t + ``` diff --git a/files/ja/web/api/filelist/item/index.md b/files/ja/web/api/filelist/item/index.md index 311ef188a2372a..30d8906dac251e 100644 --- a/files/ja/web/api/filelist/item/index.md +++ b/files/ja/web/api/filelist/item/index.md @@ -41,7 +41,7 @@ item(index) ```js const fileInput = document.querySelector("input[type=file]"); -const output = document.querySelector('.output'); +const output = document.querySelector(".output"); fileInput.addEventListener("change", () => { const fileList = fileInput.files; diff --git a/files/ja/web/api/filelist/length/index.md b/files/ja/web/api/filelist/length/index.md index 1aff6d9c386cb9..fb7e3580741e04 100644 --- a/files/ja/web/api/filelist/length/index.md +++ b/files/ja/web/api/filelist/length/index.md @@ -30,7 +30,7 @@ l10n: ```js const fileInput = document.querySelector("input[type=file]"); -const output = document.querySelector('.output'); +const output = document.querySelector(".output"); fileInput.addEventListener("change", () => { const fileList = fileInput.files; diff --git a/files/ja/web/api/filereader/abort_event/index.md b/files/ja/web/api/filereader/abort_event/index.md index 69477430f15970..0f60527b688a41 100644 --- a/files/ja/web/api/filereader/abort_event/index.md +++ b/files/ja/web/api/filereader/abort_event/index.md @@ -1,5 +1,5 @@ --- -title: 'FileReader: abort イベント' +title: "FileReader: abort イベント" slug: Web/API/FileReader/abort_event l10n: sourceCommit: 03c5110696fb433c13f3ccf63266d8affe446d8a @@ -16,9 +16,9 @@ l10n: このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 ```js -addEventListener('abort', (event) => { }); +addEventListener("abort", (event) => {}); -onabort = (event) => { }; +onabort = (event) => {}; ``` ## イベント型 @@ -106,38 +106,38 @@ img.preview { ```js const fileInput = document.querySelector('input[type="file"]'); -const preview = document.querySelector('img.preview'); -const eventLog = document.querySelector('.event-log-contents'); +const preview = document.querySelector("img.preview"); +const eventLog = document.querySelector(".event-log-contents"); const reader = new FileReader(); function handleEvent(event) { - eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; + eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; - if (event.type === "load") { - preview.src = reader.result; - } + if (event.type === "load") { + preview.src = reader.result; + } } function addListeners(reader) { - reader.addEventListener('loadstart', handleEvent); - reader.addEventListener('load', handleEvent); - reader.addEventListener('loadend', handleEvent); - reader.addEventListener('progress', handleEvent); - reader.addEventListener('error', handleEvent); - reader.addEventListener('abort', handleEvent); + reader.addEventListener("loadstart", handleEvent); + reader.addEventListener("load", handleEvent); + reader.addEventListener("loadend", handleEvent); + reader.addEventListener("progress", handleEvent); + reader.addEventListener("error", handleEvent); + reader.addEventListener("abort", handleEvent); } function handleSelected(e) { - eventLog.textContent = ''; - const selectedFile = fileInput.files[0]; - if (selectedFile) { - addListeners(reader); - reader.readAsDataURL(selectedFile); - } - reader.abort(); + eventLog.textContent = ""; + const selectedFile = fileInput.files[0]; + if (selectedFile) { + addListeners(reader); + reader.readAsDataURL(selectedFile); + } + reader.abort(); } -fileInput.addEventListener('change', handleSelected); +fileInput.addEventListener("change", handleSelected); ``` #### 結果 diff --git a/files/ja/web/api/filereader/error_event/index.md b/files/ja/web/api/filereader/error_event/index.md index bda9b6d55f90c3..ffe0ffe1b30a08 100644 --- a/files/ja/web/api/filereader/error_event/index.md +++ b/files/ja/web/api/filereader/error_event/index.md @@ -1,5 +1,5 @@ --- -title: 'FileReader: error イベント' +title: "FileReader: error イベント" slug: Web/API/FileReader/error_event l10n: sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce @@ -16,9 +16,9 @@ l10n: このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 ```js -addEventListener('error', (event) => { }); +addEventListener("error", (event) => {}); -onerror = (event) => { }; +onerror = (event) => {}; ``` ## イベント型 @@ -45,22 +45,21 @@ const fileInput = document.querySelector('input[type="file"]'); const reader = new FileReader(); function handleSelected(e) { - const selectedFile = fileInput.files[0]; - if (selectedFile) { - - reader.addEventListener('error', () => { - console.error(`Error occurred reading file: ${selectedFile.name}`); - }); - - reader.addEventListener('load', () => { - console.error(`File: ${selectedFile.name} read successfully`); - }); - - reader.readAsDataURL(selectedFile); - } + const selectedFile = fileInput.files[0]; + if (selectedFile) { + reader.addEventListener("error", () => { + console.error(`Error occurred reading file: ${selectedFile.name}`); + }); + + reader.addEventListener("load", () => { + console.error(`File: ${selectedFile.name} read successfully`); + }); + + reader.readAsDataURL(selectedFile); + } } -fileInput.addEventListener('change', handleSelected); +fileInput.addEventListener("change", handleSelected); ``` ## 仕様書 diff --git a/files/ja/web/api/filereader/index.md b/files/ja/web/api/filereader/index.md index ffaab50de2853c..57036b1b317365 100644 --- a/files/ja/web/api/filereader/index.md +++ b/files/ja/web/api/filereader/index.md @@ -32,11 +32,11 @@ File オブジェクトは、{{HTMLElement("input")}} 要素を使用してフ - : `FileReader` の状態を示す数値。以下のいずれかになります。 - | 名前 | 値 | 説明 | - | --------- | ----- | ------------------------------------------- | - | `EMPTY` | `0` | まだデータは読み込まれていません。 | - | `LOADING` | `1` | データは現在読み込み中です。 | - | `DONE` | `2` | 読み込みリクエストがすべて終了しました。 | + | 名前 | 値 | 説明 | + | --------- | --- | ---------------------------------------- | + | `EMPTY` | `0` | まだデータは読み込まれていません。 | + | `LOADING` | `1` | データは現在読み込み中です。 | + | `DONE` | `2` | 読み込みリクエストがすべて終了しました。 | - {{domxref("FileReader.result")}} {{ReadOnlyInline}} - : ファイルの内容。このプロパティは読み込み操作が完了した後にのみ有効であり、データの形式は、どのメソッドが読み込み操作を開始するのに使用されたかに依存します。 diff --git a/files/ja/web/api/filereader/load_event/index.md b/files/ja/web/api/filereader/load_event/index.md index ecb335e6e3bd18..dc6893f1b11806 100644 --- a/files/ja/web/api/filereader/load_event/index.md +++ b/files/ja/web/api/filereader/load_event/index.md @@ -1,5 +1,5 @@ --- -title: 'FileReader: load イベント' +title: "FileReader: load イベント" slug: Web/API/FileReader/load_event l10n: sourceCommit: 03c5110696fb433c13f3ccf63266d8affe446d8a @@ -16,9 +16,9 @@ l10n: このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 ```js -addEventListener('load', (event) => { }); +addEventListener("load", (event) => {}); -onload = (event) => { }; +onload = (event) => {}; ``` ## イベント型 @@ -106,37 +106,37 @@ img.preview { ```js const fileInput = document.querySelector('input[type="file"]'); -const preview = document.querySelector('img.preview'); -const eventLog = document.querySelector('.event-log-contents'); +const preview = document.querySelector("img.preview"); +const eventLog = document.querySelector(".event-log-contents"); const reader = new FileReader(); function handleEvent(event) { - eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; + eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; - if (event.type === "load") { - preview.src = reader.result; - } + if (event.type === "load") { + preview.src = reader.result; + } } function addListeners(reader) { - reader.addEventListener('loadstart', handleEvent); - reader.addEventListener('load', handleEvent); - reader.addEventListener('loadend', handleEvent); - reader.addEventListener('progress', handleEvent); - reader.addEventListener('error', handleEvent); - reader.addEventListener('abort', handleEvent); + reader.addEventListener("loadstart", handleEvent); + reader.addEventListener("load", handleEvent); + reader.addEventListener("loadend", handleEvent); + reader.addEventListener("progress", handleEvent); + reader.addEventListener("error", handleEvent); + reader.addEventListener("abort", handleEvent); } function handleSelected(e) { - eventLog.textContent = ''; - const selectedFile = fileInput.files[0]; - if (selectedFile) { - addListeners(reader); - reader.readAsDataURL(selectedFile); - } + eventLog.textContent = ""; + const selectedFile = fileInput.files[0]; + if (selectedFile) { + addListeners(reader); + reader.readAsDataURL(selectedFile); + } } -fileInput.addEventListener('change', handleSelected); +fileInput.addEventListener("change", handleSelected); ``` #### 結果 diff --git a/files/ja/web/api/filereader/loadend_event/index.md b/files/ja/web/api/filereader/loadend_event/index.md index 37e6135e137e43..faff6240822293 100644 --- a/files/ja/web/api/filereader/loadend_event/index.md +++ b/files/ja/web/api/filereader/loadend_event/index.md @@ -1,5 +1,5 @@ --- -title: 'FileReader: loadend イベント' +title: "FileReader: loadend イベント" slug: Web/API/FileReader/loadend_event l10n: sourceCommit: 03c5110696fb433c13f3ccf63266d8affe446d8a @@ -16,9 +16,9 @@ l10n: このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 ```js -addEventListener('loadend', (event) => { }); +addEventListener("loadend", (event) => {}); -onloadend = (event) => { }; +onloadend = (event) => {}; ``` ## イベント型 @@ -106,37 +106,37 @@ img.preview { ```js const fileInput = document.querySelector('input[type="file"]'); -const preview = document.querySelector('img.preview'); -const eventLog = document.querySelector('.event-log-contents'); +const preview = document.querySelector("img.preview"); +const eventLog = document.querySelector(".event-log-contents"); const reader = new FileReader(); function handleEvent(event) { - eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; + eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; - if (event.type === "load") { - preview.src = reader.result; - } + if (event.type === "load") { + preview.src = reader.result; + } } function addListeners(reader) { - reader.addEventListener('loadstart', handleEvent); - reader.addEventListener('load', handleEvent); - reader.addEventListener('loadend', handleEvent); - reader.addEventListener('progress', handleEvent); - reader.addEventListener('error', handleEvent); - reader.addEventListener('abort', handleEvent); + reader.addEventListener("loadstart", handleEvent); + reader.addEventListener("load", handleEvent); + reader.addEventListener("loadend", handleEvent); + reader.addEventListener("progress", handleEvent); + reader.addEventListener("error", handleEvent); + reader.addEventListener("abort", handleEvent); } function handleSelected(e) { - eventLog.textContent = ''; - const selectedFile = fileInput.files[0]; - if (selectedFile) { - addListeners(reader); - reader.readAsDataURL(selectedFile); - } + eventLog.textContent = ""; + const selectedFile = fileInput.files[0]; + if (selectedFile) { + addListeners(reader); + reader.readAsDataURL(selectedFile); + } } -fileInput.addEventListener('change', handleSelected); +fileInput.addEventListener("change", handleSelected); ``` #### 結果 diff --git a/files/ja/web/api/filereader/loadstart_event/index.md b/files/ja/web/api/filereader/loadstart_event/index.md index f520658f67ca81..726776c372f435 100644 --- a/files/ja/web/api/filereader/loadstart_event/index.md +++ b/files/ja/web/api/filereader/loadstart_event/index.md @@ -1,5 +1,5 @@ --- -title: 'FileReader: loadstart イベント' +title: "FileReader: loadstart イベント" slug: Web/API/FileReader/loadstart_event l10n: sourceCommit: 03c5110696fb433c13f3ccf63266d8affe446d8a @@ -16,9 +16,9 @@ l10n: このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 ```js -addEventListener('loadstart', (event) => { }); +addEventListener("loadstart", (event) => {}); -onloadstart = (event) => { }; +onloadstart = (event) => {}; ``` ## イベント型 @@ -106,37 +106,37 @@ img.preview { ```js const fileInput = document.querySelector('input[type="file"]'); -const preview = document.querySelector('img.preview'); -const eventLog = document.querySelector('.event-log-contents'); +const preview = document.querySelector("img.preview"); +const eventLog = document.querySelector(".event-log-contents"); const reader = new FileReader(); function handleEvent(event) { - eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; + eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; - if (event.type === "load") { - preview.src = reader.result; - } + if (event.type === "load") { + preview.src = reader.result; + } } function addListeners(reader) { - reader.addEventListener('loadstart', handleEvent); - reader.addEventListener('load', handleEvent); - reader.addEventListener('loadend', handleEvent); - reader.addEventListener('progress', handleEvent); - reader.addEventListener('error', handleEvent); - reader.addEventListener('abort', handleEvent); + reader.addEventListener("loadstart", handleEvent); + reader.addEventListener("load", handleEvent); + reader.addEventListener("loadend", handleEvent); + reader.addEventListener("progress", handleEvent); + reader.addEventListener("error", handleEvent); + reader.addEventListener("abort", handleEvent); } function handleSelected(e) { - eventLog.textContent = ''; - const selectedFile = fileInput.files[0]; - if (selectedFile) { - addListeners(reader); - reader.readAsDataURL(selectedFile); - } + eventLog.textContent = ""; + const selectedFile = fileInput.files[0]; + if (selectedFile) { + addListeners(reader); + reader.readAsDataURL(selectedFile); + } } -fileInput.addEventListener('change', handleSelected); +fileInput.addEventListener("change", handleSelected); ``` #### 結果 diff --git a/files/ja/web/api/filereader/progress_event/index.md b/files/ja/web/api/filereader/progress_event/index.md index 74836b7f8af195..f08c39bfba75e8 100644 --- a/files/ja/web/api/filereader/progress_event/index.md +++ b/files/ja/web/api/filereader/progress_event/index.md @@ -1,5 +1,5 @@ --- -title: 'FileReader: progress イベント' +title: "FileReader: progress イベント" slug: Web/API/FileReader/progress_event l10n: sourceCommit: 03c5110696fb433c13f3ccf63266d8affe446d8a @@ -16,9 +16,9 @@ l10n: このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 ```js -addEventListener('progress', (event) => { }); +addEventListener("progress", (event) => {}); -onprogress = (event) => { }; +onprogress = (event) => {}; ``` ## イベント型 @@ -106,37 +106,37 @@ img.preview { ```js const fileInput = document.querySelector('input[type="file"]'); -const preview = document.querySelector('img.preview'); -const eventLog = document.querySelector('.event-log-contents'); +const preview = document.querySelector("img.preview"); +const eventLog = document.querySelector(".event-log-contents"); const reader = new FileReader(); function handleEvent(event) { - eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; + eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; - if (event.type === "load") { - preview.src = reader.result; - } + if (event.type === "load") { + preview.src = reader.result; + } } function addListeners(reader) { - reader.addEventListener('loadstart', handleEvent); - reader.addEventListener('load', handleEvent); - reader.addEventListener('loadend', handleEvent); - reader.addEventListener('progress', handleEvent); - reader.addEventListener('error', handleEvent); - reader.addEventListener('abort', handleEvent); + reader.addEventListener("loadstart", handleEvent); + reader.addEventListener("load", handleEvent); + reader.addEventListener("loadend", handleEvent); + reader.addEventListener("progress", handleEvent); + reader.addEventListener("error", handleEvent); + reader.addEventListener("abort", handleEvent); } function handleSelected(e) { - eventLog.textContent = ''; - const selectedFile = fileInput.files[0]; - if (selectedFile) { - addListeners(reader); - reader.readAsDataURL(selectedFile); - } + eventLog.textContent = ""; + const selectedFile = fileInput.files[0]; + if (selectedFile) { + addListeners(reader); + reader.readAsDataURL(selectedFile); + } } -fileInput.addEventListener('change', handleSelected); +fileInput.addEventListener("change", handleSelected); ``` #### 結果 diff --git a/files/ja/web/api/filereader/readasbinarystring/index.md b/files/ja/web/api/filereader/readasbinarystring/index.md index bab510da03b1d1..a5b36b125fa62f 100644 --- a/files/ja/web/api/filereader/readasbinarystring/index.md +++ b/files/ja/web/api/filereader/readasbinarystring/index.md @@ -30,18 +30,18 @@ readAsBinaryString(blob) ## 例 ```js -const canvas = document.createElement('canvas'); +const canvas = document.createElement("canvas"); const height = 200; -const width = 200; +const width = 200; -canvas.width = width; +canvas.width = width; canvas.height = height; -const ctx = canvas.getContext('2d'); +const ctx = canvas.getContext("2d"); -ctx.strokeStyle = '#090'; +ctx.strokeStyle = "#090"; ctx.beginPath(); -ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2); +ctx.arc(width / 2, height / 2, width / 2 - width / 10, 0, Math.PI * 2); ctx.stroke(); canvas.toBlob((blob) => { @@ -49,7 +49,7 @@ canvas.toBlob((blob) => { reader.onload = () => { console.log(reader.result); - } + }; reader.readAsBinaryString(blob); }); diff --git a/files/ja/web/api/filereader/readasdataurl/index.md b/files/ja/web/api/filereader/readasdataurl/index.md index 88d44dd73e3d67..822963c0a19fb5 100644 --- a/files/ja/web/api/filereader/readasdataurl/index.md +++ b/files/ja/web/api/filereader/readasdataurl/index.md @@ -39,14 +39,18 @@ readAsDataURL(blob) ```js function previewFile() { - const preview = document.querySelector('img'); - const file = document.querySelector('input[type=file]').files[0]; + const preview = document.querySelector("img"); + const file = document.querySelector("input[type=file]").files[0]; const reader = new FileReader(); - reader.addEventListener("load", () => { - // 画像ファイルを base64 文字列に変換します - preview.src = reader.result; - }, false); + reader.addEventListener( + "load", + () => { + // 画像ファイルを base64 文字列に変換します + preview.src = reader.result; + }, + false, + ); if (file) { reader.readAsDataURL(file); @@ -71,21 +75,25 @@ function previewFile() { ```js function previewFiles() { - const preview = document.querySelector('#preview'); - const files = document.querySelector('input[type=file]').files; + const preview = document.querySelector("#preview"); + const files = document.querySelector("input[type=file]").files; function readAndPreview(file) { // `file.name` が拡張子の基準と一致していることを確認します。 if (/\.(jpe?g|png|gif)$/i.test(file.name)) { const reader = new FileReader(); - reader.addEventListener("load", () => { - const image = new Image(); - image.height = 100; - image.title = file.name; - image.src = this.result; - preview.appendChild(image); - }, false); + reader.addEventListener( + "load", + () => { + const image = new Image(); + image.height = 100; + image.title = file.name; + image.src = this.result; + preview.appendChild(image); + }, + false, + ); reader.readAsDataURL(file); } diff --git a/files/ja/web/api/filereader/readastext/index.md b/files/ja/web/api/filereader/readastext/index.md index 94adde8526bd40..bbdcef380e5a1a 100644 --- a/files/ja/web/api/filereader/readastext/index.md +++ b/files/ja/web/api/filereader/readastext/index.md @@ -44,14 +44,18 @@ readAsText(blob, encoding) ```js function previewFile() { - const content = document.querySelector('.content'); - const [file] = document.querySelector('input[type=file]').files; + const content = document.querySelector(".content"); + const [file] = document.querySelector("input[type=file]").files; const reader = new FileReader(); - reader.addEventListener("load", () => { - // this will then display a text file - content.innerText = reader.result; - }, false); + reader.addEventListener( + "load", + () => { + // this will then display a text file + content.innerText = reader.result; + }, + false, + ); if (file) { reader.readAsText(file); diff --git a/files/ja/web/api/filereader/readystate/index.md b/files/ja/web/api/filereader/readystate/index.md index dfad97b52fb73f..0bb651699e93e9 100644 --- a/files/ja/web/api/filereader/readystate/index.md +++ b/files/ja/web/api/filereader/readystate/index.md @@ -26,13 +26,13 @@ l10n: ```js const reader = new FileReader(); -console.log('EMPTY', reader.readyState); // readyState は 0 になります。 +console.log("EMPTY", reader.readyState); // readyState は 0 になります。 reader.readAsText(blob); -console.log('LOADING', reader.readyState); // readyState は 1 になります。 +console.log("LOADING", reader.readyState); // readyState は 1 になります。 reader.onloadend = () => { - console.log('DONE', reader.readyState); // readyState は 2 になります。 + console.log("DONE", reader.readyState); // readyState は 2 になります。 }; ``` diff --git a/files/ja/web/api/filereader/result/index.md b/files/ja/web/api/filereader/result/index.md index e71b083f7abd0e..b3d346f063d874 100644 --- a/files/ja/web/api/filereader/result/index.md +++ b/files/ja/web/api/filereader/result/index.md @@ -71,7 +71,7 @@ function read(callback) { reader.onload = () => { callback(reader.result); - } + }; reader.readAsText(file); } diff --git a/files/ja/web/api/filesystemdirectoryhandle/getfilehandle/index.md b/files/ja/web/api/filesystemdirectoryhandle/getfilehandle/index.md index bdee6b5fc67ba9..8b250351a67d2b 100644 --- a/files/ja/web/api/filesystemdirectoryhandle/getfilehandle/index.md +++ b/files/ja/web/api/filesystemdirectoryhandle/getfilehandle/index.md @@ -26,7 +26,7 @@ getFileHandle(name, options) - `create` - : {{jsxref('Boolean')}} です。デフォルトは `false` です。 - `true` に設定すると、ファイルが見つからない場合、指定した名前のファイルが作成されて返されます。 + `true` に設定すると、ファイルが見つからない場合、指定した名前のファイルが作成されて返されます。 ### 返値 diff --git a/files/ja/web/api/filesystemfileentry/createwriter/index.md b/files/ja/web/api/filesystemfileentry/createwriter/index.md index bea196b0b7d80d..8f408751a09702 100644 --- a/files/ja/web/api/filesystemfileentry/createwriter/index.md +++ b/files/ja/web/api/filesystemfileentry/createwriter/index.md @@ -10,8 +10,8 @@ slug: Web/API/FileSystemFileEntry/createWriter ## 構文 ```js -createWriter(successCallback) -createWriter(successCallback, errorCallback) +createWriter(successCallback); +createWriter(successCallback, errorCallback); ``` ### 引数 @@ -31,13 +31,16 @@ createWriter(successCallback, errorCallback) ```js function writeToFileEntry(entry, text) { - entry.createWriter(function(fileWriter) { - let data = Blob([text], { type: "text/plain" }); - - fileWriter.write(data); - }, function(fileError) { - /* do whatever to handle the error */ - }); + entry.createWriter( + function (fileWriter) { + let data = Blob([text], { type: "text/plain" }); + + fileWriter.write(data); + }, + function (fileError) { + /* do whatever to handle the error */ + }, + ); } ``` diff --git a/files/ja/web/api/filesystemfileentry/file/index.md b/files/ja/web/api/filesystemfileentry/file/index.md index f0da913a6c4e7b..94ae1775bddced 100644 --- a/files/ja/web/api/filesystemfileentry/file/index.md +++ b/files/ja/web/api/filesystemfileentry/file/index.md @@ -10,8 +10,8 @@ slug: Web/API/FileSystemFileEntry/file ## 構文 ```js -file(successCallback) -file(successCallback, errorCallback) +file(successCallback); +file(successCallback, errorCallback); ``` ### 引数 @@ -31,16 +31,16 @@ file(successCallback, errorCallback) ```js function readFile(entry, successCallback, errorCallback) { - entry.file(function(file) { + entry.file(function (file) { let reader = new FileReader(); - reader.onload = function() { + reader.onload = function () { successCallback(reader.result); }; - reader.onerror = function() { + reader.onerror = function () { errorCallback(reader.error); - } + }; reader.readAsText(file); }, errorCallback); diff --git a/files/ja/web/api/filesystemfilehandle/index.md b/files/ja/web/api/filesystemfilehandle/index.md index 1c7365794165c6..50cf229b19a7c2 100644 --- a/files/ja/web/api/filesystemfilehandle/index.md +++ b/files/ja/web/api/filesystemfilehandle/index.md @@ -25,7 +25,7 @@ _親の {{DOMxRef("FileSystemHandle")}} からメソッドを継承します。_ - : ハンドルが表すエントリーのディスク上での状態を表す {{domxref('File')}} オブジェクトで解決する {{jsxref('Promise')}} を返します。 - {{domxref('FileSystemFileHandle.createSyncAccessHandle', 'createSyncAccessHandle()')}} - : ファイルを同期式で読み書きすることができる {{domxref('FileSystemSyncAccessHandle')}} オブジェクトで解決する {{jsxref('Promise')}} を返します。 - このメソッドは同期式であるという性質によりパフォーマンス上有利ですが、それ用の [Web Workers](/ja/docs/Web/API/Web_Workers_API) の中でしか用いることができません。 + このメソッドは同期式であるという性質によりパフォーマンス上有利ですが、それ用の [Web Workers](/ja/docs/Web/API/Web_Workers_API) の中でしか用いることができません。 - {{domxref('FileSystemFileHandle.createWritable', 'createWritable()')}} - : ファイルに書き込むことができる新しく作成された {{domxref('FileSystemWritableFileStream')}} オブジェクトで解決する {{jsxref('Promise')}} を返します。 diff --git a/files/ja/web/api/filesystemhandle/remove/index.md b/files/ja/web/api/filesystemhandle/remove/index.md index 207906d6c3d9fc..f7806beb7366a6 100644 --- a/files/ja/web/api/filesystemhandle/remove/index.md +++ b/files/ja/web/api/filesystemhandle/remove/index.md @@ -62,7 +62,7 @@ async function deleteFile(e) { if (handle.name === e.target.id + ".txt") { await handle.remove(); savedFileRefs = savedFileRefs.filter( - (handle) => handle.name !== e.target.id + ".txt" + (handle) => handle.name !== e.target.id + ".txt", ); e.target.parentElement.parentElement.removeChild(e.target.parentElement); } diff --git a/files/ja/web/api/filesystemwritablefilestream/write/index.md b/files/ja/web/api/filesystemwritablefilestream/write/index.md index 2477a189bd1ddc..949b25d3e7da0c 100644 --- a/files/ja/web/api/filesystemwritablefilestream/write/index.md +++ b/files/ja/web/api/filesystemwritablefilestream/write/index.md @@ -23,21 +23,21 @@ write(data) - `data` - : ファイルに書き込むデータを表す {{jsxref("ArrayBuffer")}}・{{jsxref("TypedArray")}}・ - {{jsxref("DataView")}}・{{domxref('Blob')}}・{{jsxref("String")}} オブジェクト・文字列リテラルのいずれかです。 - もしくは、以下のプロパティを持つオブジェクトです。 + {{jsxref("DataView")}}・{{domxref('Blob')}}・{{jsxref("String")}} オブジェクト・文字列リテラルのいずれかです。 + もしくは、以下のプロパティを持つオブジェクトです。 - `type` - : `"write"`・`"seek"`・`"truncate"` のいずれかの文字列です。 - `data` - : ファイルに書き込むデータです。{{jsxref("ArrayBuffer")}}・{{jsxref("TypedArray")}}・{{jsxref("DataView")}}・ - {{domxref('Blob')}}・{{jsxref("String")}} オブジェクト・文字列リテラルのいずれかです。 - `type` が `write` に設定されているときは必須です。 + {{domxref('Blob')}}・{{jsxref("String")}} オブジェクト・文字列リテラルのいずれかです。 + `type` が `write` に設定されているときは必須です。 - `position` - : `type` が `seek` のとき、現在のファイルカーソルの移動先のバイト位置を表します。 - `type` が `write` のときにも設定することができ、この場合は書き込みの開始位置を表します。 + `type` が `write` のときにも設定することができ、この場合は書き込みの開始位置を表します。 - `size` - : ストリームが保持するべきバイト数を表す `unsigned long` 値です。 - `type` が `truncate` に設定されているときは必須です。 + `type` が `truncate` に設定されているときは必須です。 ### 返値