diff --git a/files/ja/conflicting/glossary/plugin/index.html b/files/ja/conflicting/glossary/plugin/index.html deleted file mode 100644 index 6d17bd7b7375a8..00000000000000 --- a/files/ja/conflicting/glossary/plugin/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Firefox のプラグインロードマップ -slug: conflicting/Glossary/Plugin -translation_of: Plugins/Roadmap -original_slug: Plugins/Roadmap ---- -

プラグインは、Firefox ユーザーのセキュリティとパフォーマンスの問題があります。 NPAPI プラグインは時代遅れの技術であり、Mozilla はプラグインを必要としないウェブに移行しています。最後まで残った NPAPI プラグインである Adobe Flash は、サポート終了の計画を発表しました。 Flash からの移行をサポートするために、Firefox は他のブラウザーと連携して、Flash の利用を少なくするように徐々にかつ慎重に進めています。以下は、Firefox のプラグインに対する過去および将来のサポートのロードマップです。

- -

スケジュール

- -
-
2016 年 6 月
-
2014 年 6 月の Firefox 47 以降、Adobe Flash 以外のすべてのプラグインは click-to-activateです。ユーザーは各プラグインを有効にするサイトを選択します。さらに、Windows 用 64 ビット Firefox は Flash プラグインのみをサポートしています。
-
2017 年 3 月
-
2017 年 3 月の Firefox 52 以降、Adobe Flash 以外のプラグインは Firefox ではサポートされなくなりました。 Firefox Extended Support Release 52は、2018 年の初めまで非 Flash プラグインを引き続きサポートします。
-
2017 年 8 月
-
2017 年 8 月の Firefox 55 以降、Flash プラグインを有効にするサイトを選択する必要があります。ユーザーは、サイトごとの Flash 設定を記憶させることができます。この変更は、2017 年 8 月から 9 月の間に徐々に展開されます。
-
- セキュリティとパフォーマンスを向上させるため、Mozilla はプラグインを使用できないサイトのリストを維持します
-
2017 年 9 月
-
2017 年 9 月の Firefox 56 以降、Android 用 Firefox はプラグインのサポートをすべて削除します ({{bug(1381916)}})。
-
2018 年後半
-
2018 年後半、Firefox はFlash の設定を記憶しなくなり、ユーザーは Flash をアクティブにするかどうかを各セッションごとに選択する必要があります。
-
2019 年前半
-
2019 年の早い段階で、Firefox は引き続き Flash を使用しているサイトでユーザーに警告を表示します。
-
2019 年
-
ユーザーへの警告の数ヶ月後、Firefox はデフォルトで Flash プラグインを無効にします。ユーザーに Flash を有効にするよう指示しませんが、ブラウザー設定を使用して特定のサイトで Flash を有効にすることは可能です。
-
2020 年
-
2020 年の初めに、Flash のサポートは Firefox のコンシューマ版から完全に削除されます。Firefox 拡張サポートリリース (ESR) は、2020 年末まで Flash のサポートを継続します。
-
2021 年
-
Adobeが 2020 年末に Flash のセキュリティアップデートの出荷を停止したとき、Firefox はプラグインの読み込みを拒否します。
-
- -

関連情報

- -

Mozilla Firefox

- - - -

Adobe Flash

- - - -

Google Chrome

- - - -

Microsoft Edge および Internet Explorer

- - - -

Apple Safari

- - diff --git a/files/ja/conflicting/glossary/plugin/index.md b/files/ja/conflicting/glossary/plugin/index.md new file mode 100644 index 00000000000000..7b175659d7f172 --- /dev/null +++ b/files/ja/conflicting/glossary/plugin/index.md @@ -0,0 +1,66 @@ +--- +title: Firefox のプラグインロードマップ +slug: conflicting/Glossary/Plugin +translation_of: Plugins/Roadmap +original_slug: Plugins/Roadmap +--- +プラグインは、Firefox ユーザーのセキュリティとパフォーマンスの問題があります。 NPAPI プラグインは時代遅れの技術であり、Mozilla はプラグインを必要としないウェブに移行しています。最後まで残った NPAPI プラグインである Adobe Flash は、サポート終了の計画を[発表](http://blogs.adobe.com/conversations/2017/07/adobe-flash-update.html)しました。 Flash からの移行をサポートするために、Firefox は他のブラウザーと連携して、Flash の利用を少なくするように徐々にかつ慎重に進めています。以下は、Firefox のプラグインに対する過去および将来のサポートのロードマップです。 + +### スケジュール + +- 2016 年 6 月 + - : 2014 年 6 月の Firefox 47 以降、Adobe Flash 以外のすべてのプラグインは [click-to-activate](/ja/docs/Plugins/Flash_Activation:_Browser_Comparison)です。ユーザーは各プラグインを有効にするサイトを選択します。さらに、Windows 用 64 ビット Firefox は Flash プラグインのみをサポートしています。 +- 2017 年 3 月 + - : 2017 年 3 月の Firefox 52 以降、Adobe Flash 以外のプラグインは Firefox ではサポートされなくなりました。 Firefox [Extended Support Release 52](https://www.mozilla.org/ja/firefox/organizations/faq/)は、2018 年の初めまで非 Flash プラグインを引き続きサポートします。 +- 2017 年 8 月 + + - : 2017 年 8 月の Firefox 55 以降、Flash プラグインを有効にするサイトを[選択](/ja/docs/Plugins/Flash_Activation:_Browser_Comparison)する必要があります。ユーザーは、サイトごとの Flash 設定を記憶させることができます。_この変更は、2017 年 8 月から 9 月の間に徐々に展開されます。_ + + セキュリティとパフォーマンスを向上させるため、Mozilla はプラグインを使用できない[サイトのリストを維持します](/ja/docs/Plugins/Blocking_By_Domain)。 + +- 2017 年 9 月 + - : 2017 年 9 月の Firefox 56 以降、Android 用 Firefox はプラグインのサポートをすべて削除します ({{bug(1381916)}})。 +- 2018 年後半 + - : 2018 年後半、Firefox は Flash の設定を記憶しなくなり、ユーザーは Flash をアクティブにするかどうかを各セッションごとに選択する必要があります。 +- 2019 年前半 + - : 2019 年の早い段階で、Firefox は引き続き Flash を使用しているサイトでユーザーに警告を表示します。 +- 2019 年 + - : ユーザーへの警告の数ヶ月後、Firefox はデフォルトで Flash プラグインを無効にします。ユーザーに Flash を有効にするよう指示しませんが、ブラウザー設定を使用して特定のサイトで Flash を有効にすることは可能です。 +- 2020 年 + - : 2020 年の初めに、Flash のサポートは Firefox のコンシューマ版から完全に削除されます。Firefox 拡張サポートリリース (ESR) は、2020 年末まで Flash のサポートを継続します。 +- 2021 年 + - : Adobe が 2020 年末に Flash のセキュリティアップデートの出荷を停止したとき、Firefox はプラグインの読み込みを拒否します。 + +### 関連情報 + +#### Mozilla Firefox + +- October 2015 - [NPAPI Plugins in Firefox](https://blog.mozilla.org/futurereleases/2015/10/08/npapi-plugins-in-firefox/) +- July 2016 - [Reducing Adobe Flash Usage in Firefox](https://blog.mozilla.org/futurereleases/2016/07/20/reducing-adobe-flash-usage-in-firefox/) +- July 2017 - [Firefox Roadmap for Flash End-of-Life](https://blog.mozilla.org/futurereleases/2017/07/25/firefox-roadmap-flash-end-life/) + +#### Adobe Flash + +- November 2015 - [Flash, HTML5 and Open Web Standards](https://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html) +- July 2017 - [Flash & the Future of Interactive Content](http://blogs.adobe.com/conversations/2017/07/adobe-flash-update.html) + +#### Google Chrome + +- [Flash Roadmap](https://sites.google.com/a/chromium.org/dev/flash-roadmap) +- Sep 2013 - [Saying Goodbye to Our Old Friend NPAPI](https://blog.chromium.org/2013/09/saying-goodbye-to-our-old-friend-npapi.html) +- May 2014 - [Update on NPAPI Deprecation](https://blog.chromium.org/2014/05/update-on-npapi-deprecation.html) +- November 2014 - [The Final Countdown for NPAPI](https://blog.chromium.org/2014/11/the-final-countdown-for-npapi.html) +- August 2016 - [Flash and Chrome](https://blog.google/products/chrome/flash-and-chrome/) +- December 2016 - [Roll-out plan for HTML5 by Default](https://blog.chromium.org/2016/12/roll-out-plan-for-html5-by-default.html) +- July 2017 - [Saying Goodbye to Flash in Chrome](https://www.blog.google/products/chrome/saying-goodbye-flash-chrome/) + +#### Microsoft Edge および Internet Explorer + +- April 2016 - [Putting Users in Control of Flash](https://blogs.windows.com/msedgedev/2016/04/07/putting-users-in-control-of-flash/) +- December 2016 - [Extending User Control of Flash with Click-to-Run](https://blogs.windows.com/msedgedev/2016/12/14/edge-flash-click-run/) +- July 2017 - [Flash on Windows Timeline](https://blogs.windows.com/msedgedev/2017/07/25/flash-on-windows-timeline/) (日本語リソース: [Internet Explorer および Microsoft Edge での Flash の今後の対応予定について – Japan IE Support Team Blog](https://blogs.technet.microsoft.com/jpieblog/2018/03/23/flash-roadmap/)) + +#### Apple Safari + +- June 2016 - [Next Steps for Legacy Plug-ins](https://webkit.org/blog/6589/next-steps-for-legacy-plug-ins/) +- July 2017 - [Adobe Announces Flash Distribution and Updates to End](https://webkit.org/blog/7839/adobe-announces-flash-distribution-and-updates-to-end/) diff --git a/files/ja/conflicting/learn/javascript/objects/classes_in_javascript/index.html b/files/ja/conflicting/learn/javascript/objects/classes_in_javascript/index.html deleted file mode 100644 index 9f654a72bd9701..00000000000000 --- a/files/ja/conflicting/learn/javascript/objects/classes_in_javascript/index.html +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: 初心者のためのオブジェクト指向 JavaScript -slug: conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript -tags: - - Beginner - - Create - - JavaScript - - OOJS - - OOP - - オブジェクト - - オブジェクト指向 - - 学習 - - 記事 -translation_of: Learn/JavaScript/Objects/Object-oriented_JS -original_slug: Learn/JavaScript/Objects/Object-oriented_JS ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

基礎が片付いたところで、オブジェクト指向 JavaScript (OOJS) について取り上げます。この記事ではオブジェクト指向プログラミング (OOP) の基本的な視点を説明し、 JavaScript がどのようにコンストラクター関数を通じてオブジェクトクラスをエミュレートしているか、またどのようにオブジェクトインスタンスを生成しているかを紹介します。

- - - - - - - - - - - - -
前提知識:基礎的なコンピュータリテラシー、基礎的な HTML と CSS の理解、JavaScript (JavaScript の第一歩JavaScript の構成要素を参照) および OOJS (JavaScript オブジェクトの基本を参照)の基礎知識。
目標:オブジェクト指向プログラミングの基本理論、どのようにそれが JavaScript (「すべてはオブジェクトである」) に関連しているか、どのようにコンストラクターがオブジェクトインスタンスを生成しているかを理解する。
- -

オブジェクト指向プログラミング - その基本

- -

はじめに、オブジェクト指向プログラミング (OOP) とは何か、シンプルかつ高レベルな視点を提示します。シンプルと述べたのは、OOP はあっという間にひどく複雑になり得るためで、現時点でそのすべてを論じてしまうと、助けとなるよりもむしろ混乱を生んでしまうことでしょう。OOP の基本的な考え方は、プログラムの中で扱いたい、現実世界の事物を模るためにオブジェクトを使用すること、またはそうしなければ使うことが難しいあるいは不可能だった機能にアクセスするための、シンプルな方法を提供することです。

- -

オブジェクトは、モデル化しようとしている事物に関する情報および、持たせたい機能や動作を表現する、関連したデータとコードを持つことができます。オブジェクトのデータ (しばしば関数も含む) はオブジェクトのパッケージの中 (名前空間と呼ばれることがある) に適切に格納されます (カプセル化)。オブジェクトは一般に、ネットワークを通じて容易に送信することが可能な、データストアとしても使われます。

- -

オブジェクトのテンプレートを定義する

- -

学校の生徒と教師の情報を表示する、シンプルなプログラムを考えてみましょう。特定のプログラミング言語の文脈ではなく、OOP 一般の理論を眺めていきます。

- -

はじめに、オブジェクト入門の最初の記事にある、人物の包括的なデータや機能を定義した、Person オブジェクトに戻りましょう。ある人物について知り得る事柄は数多くあります (住所、身長、靴のサイズ、DNA 情報、パスポート番号、顕著な人格特性など) が、このケースでは名前、年齢、性別、趣味を表示することに興味があるだけです。また、このデータに基づいた短い自己紹介や、挨拶をさせられるようにもしましょう。これは抽象化 — より複雑な事物を、プログラムの目的に沿って簡単に操作できるように、その最も重要な側面を表現する、シンプルなモデルを作ること — として知られています。

- -

- -

実際のオブジェクトの生成

- -

このクラスから、オブジェクトインスタンスを生成することができます。オブジェクトインスタンスは、クラスで定義されたデータや機能を持ったオブジェクトです。 Person クラスから、何名かの実際の人物を生成します。

- -

- -

クラスからオブジェクトインスタンスが生成されるとき、クラスのコンストラクター関数が生成のために実行されます。クラスからオブジェクトインスタンスが生成される過程をインスタンス化と呼びます。オブジェクトインスタンスは、クラスをインスタンス化したものです。

- -

専門のクラス

- -

このケースで求めているのは、包括的な人物ではなく、より特定のタイプである、教師と生徒です。OOP では、他のクラスを元にした新しいクラスを作ることができます。これらの新しい子クラスは、親クラスからデータやコード機能を継承することができ、すべてのオブジェクトタイプに共通する機能を、重複させるのではなく、再利用することができます。クラス間で機能が異なる場合は、必要に応じて特殊化された機能を直接定義することができます。

- -

- -

これは実に役立ちます。教師と生徒は名前、性別、年齢のように多数の共通機能を共有しており、これらの機能を一度だけ定義すればいいので便利です。異なるクラスで、同じ機能を分けて定義することもでき、その機能の各定義は異なる名前空間に置かれます。例えば、生徒の挨拶は "Yo, I'm [firstName]" (例:Yo, I'm Sam) という形式とし、一方の教師の挨拶は、より形式的に "Hello, my name is [Prefix] [lastName], and I teach [Subject]." (例:Hello, My name is Mr Griffiths, and I teach Chemistry) のように。

- -
-

: 同じ機能を複数のオブジェクトタイプが実装する能力のことを示す用語に、ポリモーフィズムがあります。不思議に感じているかも知れないので念のため。

-
- -

子クラスのオブジェクトインスタンスを生成しましょう。例:

- -

- -

記事の続きでは、OOP 理論が JavaScript でどのように実践されているかを見ていきます。

- -

コンストラクターとオブジェクトインスタンス

- -

JavaScript では、オブジェクトやその機能を定義し初期化するためにコンストラクター関数と呼ばれる特殊な関数を使用します。これは便利です。なぜならオブジェクトをいくつ作成することになるか分からない状況に出くわすでしょうから。コンストラクターは必要な数のオブジェクトを効率的な方法で作成し、必要に応じてデータや関数を付加する手段を提供します。

- -

JavaScript でコンストラクターを通じてクラスを作り、そこからオブジェクトのインスタンスを生成するところを見ていきましょう。まずは、最初のオブジェクトの記事で見た oojs.html ファイルの新しいコピーを、ローカルに作成しておいてください。

- -

シンプルな例

- -
    -
  1. どのように通常の関数で人物を定義できるかを見てみるところから始めましょう。この関数を script 要素の中に加えてください。 - -
    function createNewPerson(name) {
    -  const obj = {};
    -  obj.name = name;
    -  obj.greeting = function() {
    -    alert('Hi! I\'m ' + obj.name + '.');
    -  };
    -  return obj;
    -}
    -
  2. -
  3. この関数を呼び出すことで、新しい人物を生成することができます。次の 3 行をブラウザーの JavaScript コンソールで試してみてください。 -
    const salva = createNewPerson('Salva');
    -salva.name;
    -salva.greeting();
    - これも十分上手くいっていますが、やや長ったらしいです。オブジェクトを生成したいと知っているなら、なぜ明示的に空のオブジェクトを生成し、返すことが必要なのでしょうか?幸いにも、 JavaScript はコンストラクター関数という形で、便利なショートカットを提供してくれます。早速作ってみましょう!
  4. -
  5. 前の関数を、以下のもので置き換えてください。 -
    function Person(name) {
    -  this.name = name;
    -  this.greeting = function() {
    -    alert('Hi! I\'m ' + this.name + '.');
    -  };
    -}
    -
  6. -
- -

コンストラクター関数は、 JavaScript 版のクラスです。それは関数に期待される全ての機能を持っていますが、何も返さないし、明示的にオブジェクトを生成しもしないという点に注意してください。基本的には、プロパティとメソッドを定義するだけです。加えて、 this キーワードが使われていることにも注意してください。基本、オブジェクトインスタンスの 1 つが作成されるときにはいつでも、オブジェクトの name プロパティはコンストラクター呼び出しに渡される name 値と等しくなり、 greeting() メソッドもコンストラクター呼び出しに渡される name 値を使用します。

- -
-

メモ: 通常、コンストラクター関数の名前は大文字で始まります。コードの中で、コンストラクター関数がより容易に認識されるようにするための慣習です。

-
- -

では、オブジェクトを生成するために、どのようにコンストラクターを呼び出したらよいでしょうか?

- -
    -
  1. 次の 2 行を、前のコードの続きに加えてください。 -
    let person1 = new Person('Bob');
    -let person2 = new Person('Sarah');
    -
  2. -
  3. コードを保存し、ブラウザーをリロードして、以下の 4 行を JavaScript コンソールに入れて試してみてください。 -
    person1.name
    -person1.greeting()
    -person2.name
    -person2.greeting()
    -
  4. -
- -

素晴らしい!2 つの新しいオブジェクトが、異なる名前空間の下でページに格納されていることが確認できます。それらのプロパティとメソッドにアクセスするときには、 person1 または person2 を呼び出すことから始めなければなりません。中に含まれている機能は適切にパッケージ化されており、他の機能と衝突しないようになっています。しかしながら、それらは同じように name プロパティと greeting() メソッドが利用可能です。 2 つのオブジェクトはそれぞれ、生成されたときに割り当てられた、自身の name 値を使っていることに注意してください。これが this を使うことがとても重要である理由の 1 つであり、他の値ではなく、自身の値を使っているのです。

- -

コンストラクターをもう一度呼び出してみましょう。

- -
let person1 = new Person('Bob');
-let person2 = new Person('Sarah');
- -

いずれのケースでも、新しいオブジェクトインスタンスを生成したいとブラウザーに伝えるために new キーワードが使われており、その後に、括弧に必要なパラメーターを入れた関数名が続き、その結果が変数に格納されていて、一般的な関数の呼ばれ方とよく似ています。どちらのインスタンスも、次の定義によって生成されています。

- -
function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
- -

新しいオブジェクトが生成された後、 person1 および person2 変数は、次のオブジェクトを格納しています。

- -
{
-  name: 'Bob',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-{
-  name: 'Sarah',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

コンストラクター関数を呼び出すとき、毎回 greeting() メソッドを定義していることに注意してください。これは理想的ではありません。これを回避するために、代わりにプロトタイプに関数を定義することができます。後で見てみましょう。

- -

最終的なコンストラクターの作成

- -

上で見てきた例は、スタートのためのシンプルな例に過ぎません。次は最終的な Person() コンストラクター関数を作りましょう。

- -
    -
  1. ここまでに挿入したコードを削除し、代わりとなるコンストラクターを追加してください。これはシンプルな例とほぼ同じもので、ほんのわずか複雑になっているだけです。 -
    function Person(first, last, age, gender, interests) {
    -  this.name = {
    -     first : first,
    -     last : last
    -  };
    -  this.age = age;
    -  this.gender = gender;
    -  this.interests = interests;
    -  this.bio = function() {
    -    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
    -  };
    -  this.greeting = function() {
    -    alert('Hi! I\'m ' + this.name.first + '.');
    -  };
    -}
    -
  2. -
  3. ではその下に、コンストラクターからオブジェクトインスタンスを生成するため、次の行を追加してください。 -
    let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    -
  4. -
- -

ちょうど以前行ったように、プロパティやメソッドにアクセスできることを確認できます。 JavaScript コンソールの中でやってみましょう。

- -
person1['age']
-person1.interests[1]
-person1.bio()
-// etc.
- -
-

メモ: もしこの工程で何らかのトラブルがあった場合は、あなたのコードを我々のバージョン (oojs-class-finished.htmlライブサンプルも) と比べてみてください。

-
- -

さらなる練習

- -

まずはじめに、さらにいくつかのオブジェクトを生成する独自の行を追加し、オブジェクトインスタンスのメンバーの取得や設定をしてみてください。

- -

加えて、 bio() メソッドにはいくつかの問題点があります。人物が女性である、あるいは他の優先される性別分類の場合でも、その出力には常に "He" という代名詞が含まれています。また、 bio は interests 配列により多くのものが列挙されていても、2 つの趣味しか含みません。このクラス定義 (コンストラクター) の問題を、あなたはどのように修正することができますか?コンストラクター内に任意のコード (恐らく、いくつかの条件分岐やループが必要となるでしょう) を入れてみてください。性別や、趣味の数が 1、2、あるいは 2 よりも多いかどうかによって、文がどのように構築されるべきか考えてみてください。

- -
-

: もし行き詰まってしまった場合は、GitHub に答えとなるリポジトリ (ライブ) があります。最初はあなた自身で書いてみてください!

-
- -

オブジェクトインスタンスを生成する他の方法

- -

ここまで、オブジェクトインスタンスを生成する 2 つの異なる方法を見てきました。オブジェクトリテラルの宣言と、上で見たコンストラクター関数の使用です。

- -

これで十分かもしれませんが、他にも方法はあります。ウェブを巡る際に遭遇したときに備えて、よく知っておいてください。

- -

Object() コンストラクター

- -

まず最初に、 Object() コンストラクターを新しいオブジェクトの生成のために使うことができます。はい、一般的なオブジェクトにも、空のオブジェクトを生成するコンストラクターがあります。

- -
    -
  1. このコードを JavaScript コンソールに入力してみましょう。 -
    let person1 = new Object();
    -
  2. -
  3. person1 変数に空のオブジェクトが格納されました。このオブジェクトに、ドット記法とブラケット記法を使ってプロパティを追加することができます。次の例を JavaScript コンソールで試してみましょう。 -
    person1.name = 'Chris';
    -person1['age'] = 38;
    -person1.greeting = function() {
    -  alert('Hi! I\'m ' + this.name + '.');
    -};
    -
  4. -
  5. あらかじめプロパティやメソッドを設定するため、Object() コンストラクターに引数としてオブジェクトリテラルを渡すことも可能です。次のコードを JavaScript コンソールで試してみてください。 -
    let person1 = new Object({
    -  name: 'Chris',
    -  age: 38,
    -  greeting: function() {
    -    alert('Hi! I\'m ' + this.name + '.');
    -  }
    -});
    -
  6. -
- -

create() メソッドの使用

- -

コードの順序についてもコンストラクターが助けとなります。コンストラクターを一箇所で作っておくと、必要に応じてインスタンスを生成することができ、それらがどこから来たものであるか、明瞭です。

- -

しかしながら、特に少数のインスタンスのみを生成する場合に、最初にコンストラクターを作らずにインスタンスを生成することを好む人もいます。JavaScript にはそれを可能とする、create() と呼ばれる組み込みメソッドがあります。それにより、既存のオブジェクトを基にして、新しいオブジェクトを生成することができます。

- -
    -
  1. 前のセクションの練習をブラウザーで終えた状態で、こちらを JavaScript コンソールで試してみてください。 -
    let person2 = Object.create(person1);
    -
  2. -
  3. 次は以下のコードです。 -
    person2.name;
    -person2.greeting();
    -
  4. -
- -

person1 を基に person2 が生成され、person2 では同じプロパティとメソッドが利用可能であることを確認することができます。

- -

create() には、IE8 が対応していないという制限があります。つまり、コンストラクターは古いブラウザーに対応したい場合により効果的かもしれません。

- -

いずれ、create() の効果についてより詳細に紹介するつもりです。

- -

あなたのスキルをテストしてみましょう!

- -

この記事はここまでですが、最も重要な情報を覚えていますか?先に進む前に、この情報を保持しているかどうかを確認するために、さらにいくつかのテストを見つけることができます。あなたのスキルをテストする: オブジェクト指向 JavaScript を参照してください。

- -

この一連のテストは次の記事で紹介する知識に依存していることに注意してください。なので、試してみる前に、まずそれを読んでみるといいかもしれません。

- -

まとめ

- -

この記事はオブジェクト指向の理論の概略を見てきました。これですべてではありませんが、ここで扱っていることに関する考えを提示しました。加えて、オブジェクトのインスタンスを生成する様々な方法を見始めたところです。

- -

次の記事では、 JavaScript オブジェクトのプロトタイプについて紹介します。

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

- -

このモジュール内の文書

- - diff --git a/files/ja/conflicting/learn/javascript/objects/classes_in_javascript/index.md b/files/ja/conflicting/learn/javascript/objects/classes_in_javascript/index.md new file mode 100644 index 00000000000000..09063394e2e540 --- /dev/null +++ b/files/ja/conflicting/learn/javascript/objects/classes_in_javascript/index.md @@ -0,0 +1,323 @@ +--- +title: 初心者のためのオブジェクト指向 JavaScript +slug: conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript +tags: + - Beginner + - Create + - JavaScript + - OOJS + - OOP + - オブジェクト + - オブジェクト指向 + - 学習 + - 記事 +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +original_slug: Learn/JavaScript/Objects/Object-oriented_JS +--- +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}} + +基礎が片付いたところで、オブジェクト指向 JavaScript (OOJS) について取り上げます。この記事ではオブジェクト指向プログラミング (OOP) の基本的な視点を説明し、 JavaScript がどのようにコンストラクター関数を通じてオブジェクトクラスをエミュレートしているか、またどのようにオブジェクトインスタンスを生成しているかを紹介します。 + + + + + + + + + + + + +
前提知識: + 基礎的なコンピュータリテラシー、基礎的な HTML と CSS の理解、JavaScript + (JavaScript の第一歩や + JavaScript の構成要素を参照) および OOJS (JavaScript オブジェクトの基本を参照)の基礎知識。 +
目標: + オブジェクト指向プログラミングの基本理論、どのようにそれが JavaScript + (「すべてはオブジェクトである」) + に関連しているか、どのようにコンストラクターがオブジェクトインスタンスを生成しているかを理解する。 +
+ +## オブジェクト指向プログラミング - その基本 + +はじめに、オブジェクト指向プログラミング (OOP) とは何か、シンプルかつ高レベルな視点を提示します。シンプルと述べたのは、OOP はあっという間にひどく複雑になり得るためで、現時点でそのすべてを論じてしまうと、助けとなるよりもむしろ混乱を生んでしまうことでしょう。OOP の基本的な考え方は、プログラムの中で扱いたい、現実世界の事物を模るためにオブジェクトを使用すること、またはそうしなければ使うことが難しいあるいは不可能だった機能にアクセスするための、シンプルな方法を提供することです。 + +オブジェクトは、モデル化しようとしている事物に関する情報および、持たせたい機能や動作を表現する、関連したデータとコードを持つことができます。オブジェクトのデータ (しばしば関数も含む) はオブジェクトのパッケージの中 (**名前空間**と呼ばれることがある) に適切に格納されます (**カプセル化**)。オブジェクトは一般に、ネットワークを通じて容易に送信することが可能な、データストアとしても使われます。 + +### オブジェクトのテンプレートを定義する + +学校の生徒と教師の情報を表示する、シンプルなプログラムを考えてみましょう。特定のプログラミング言語の文脈ではなく、OOP 一般の理論を眺めていきます。 + +はじめに、[オブジェクト入門の最初の記事](/ja/docs/Learn/JavaScript/Objects/Basics)にある、人物の包括的なデータや機能を定義した、Person オブジェクトに戻りましょう。ある人物について知り得る事柄は数多くあります (住所、身長、靴のサイズ、DNA 情報、パスポート番号、顕著な人格特性など) が、このケースでは名前、年齢、性別、趣味を表示することに興味があるだけです。また、このデータに基づいた短い自己紹介や、挨拶をさせられるようにもしましょう。これは**抽象化** — より複雑な事物を、プログラムの目的に沿って簡単に操作できるように、その最も重要な側面を表現する、シンプルなモデルを作ること — として知られています。 + +![](https://mdn.mozillademos.org/files/13889/person-diagram.png) + +### 実際のオブジェクトの生成 + +このクラスから、**オブジェクトインスタンス**を生成することができます。オブジェクトインスタンスは、クラスで定義されたデータや機能を持ったオブジェクトです。 Person クラスから、何名かの実際の人物を生成します。 + +![](https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png) + +クラスからオブジェクトインスタンスが生成されるとき、クラスの**コンストラクター関数**が生成のために実行されます。クラスからオブジェクトインスタンスが生成される過程を**インスタンス化**と呼びます。オブジェクトインスタンスは、クラスを**インスタンス化**したものです。 + +### 専門のクラス + +このケースで求めているのは、包括的な人物ではなく、より特定のタイプである、教師と生徒です。OOP では、他のクラスを元にした新しいクラスを作ることができます。これらの新しい**子クラス**は、**親クラス**からデータやコード機能を**継承**することができ、すべてのオブジェクトタイプに共通する機能を、重複させるのではなく、再利用することができます。クラス間で機能が異なる場合は、必要に応じて特殊化された機能を直接定義することができます。 + +![](https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png) + +これは実に役立ちます。教師と生徒は名前、性別、年齢のように多数の共通機能を共有しており、これらの機能を一度だけ定義すればいいので便利です。異なるクラスで、同じ機能を分けて定義することもでき、その機能の各定義は異なる名前空間に置かれます。例えば、生徒の挨拶は "Yo, I'm \[firstName]" (例:_Yo, I'm Sam) という形式とし、一方の教師の挨拶は、より形式的に_ "Hello, my name is \[Prefix] \[lastName], and I teach \[Subject]." (例:_Hello, My name is Mr Griffiths, and I teach Chemistry) のように。_ + +> **Note:** **注**: 同じ機能を複数のオブジェクトタイプが実装する能力のことを示す用語に、**ポリモーフィズム**があります。不思議に感じているかも知れないので念のため。 + +子クラスのオブジェクトインスタンスを生成しましょう。例: + +![](https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png) + +記事の続きでは、OOP 理論が JavaScript でどのように実践されているかを見ていきます。 + +## コンストラクターとオブジェクトインスタンス + +JavaScript では、オブジェクトやその機能を定義し初期化するために**コンストラクター関数**と呼ばれる特殊な関数を使用します。これは便利です。なぜならオブジェクトをいくつ作成することになるか分からない状況に出くわすでしょうから。コンストラクターは必要な数のオブジェクトを効率的な方法で作成し、必要に応じてデータや関数を付加する手段を提供します。 + +JavaScript でコンストラクターを通じてクラスを作り、そこからオブジェクトのインスタンスを生成するところを見ていきましょう。まずは、最初のオブジェクトの記事で見た [oojs.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html) ファイルの新しいコピーを、ローカルに作成しておいてください。 + +### シンプルな例 + +1. どのように通常の関数で人物を定義できるかを見てみるところから始めましょう。この関数を `script` 要素の中に加えてください。 + + ```js + function createNewPerson(name) { + const obj = {}; + obj.name = name; + obj.greeting = function() { + alert('Hi! I\'m ' + obj.name + '.'); + }; + return obj; + } + ``` + +2. この関数を呼び出すことで、新しい人物を生成することができます。次の 3 行をブラウザーの JavaScript コンソールで試してみてください。 + + ```js + const salva = createNewPerson('Salva'); + salva.name; + salva.greeting(); + ``` + + これも十分上手くいっていますが、やや長ったらしいです。オブジェクトを生成したいと知っているなら、なぜ明示的に空のオブジェクトを生成し、返すことが必要なのでしょうか?幸いにも、 JavaScript はコンストラクター関数という形で、便利なショートカットを提供してくれます。早速作ってみましょう! + +3. 前の関数を、以下のもので置き換えてください。 + + ```js + function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; + } + ``` + +コンストラクター関数は、 JavaScript 版のクラスです。それは関数に期待される全ての機能を持っていますが、何も返さないし、明示的にオブジェクトを生成しもしないという点に注意してください。基本的には、プロパティとメソッドを定義するだけです。加えて、 `this` キーワードが使われていることにも注意してください。基本、オブジェクトインスタンスの 1 つが作成されるときにはいつでも、オブジェクトの `name` プロパティはコンストラクター呼び出しに渡される name 値と等しくなり、 `greeting()` メソッドもコンストラクター呼び出しに渡される name 値を使用します。 + +> **Note:** **メモ**: 通常、コンストラクター関数の名前は大文字で始まります。コードの中で、コンストラクター関数がより容易に認識されるようにするための慣習です。 + +では、オブジェクトを生成するために、どのようにコンストラクターを呼び出したらよいでしょうか? + +1. 次の 2 行を、前のコードの続きに加えてください。 + + ```js + let person1 = new Person('Bob'); + let person2 = new Person('Sarah'); + ``` + +2. コードを保存し、ブラウザーをリロードして、以下の 4 行を JavaScript コンソールに入れて試してみてください。 + + ```js + person1.name + person1.greeting() + person2.name + person2.greeting() + ``` + +素晴らしい!2 つの新しいオブジェクトが、異なる名前空間の下でページに格納されていることが確認できます。それらのプロパティとメソッドにアクセスするときには、 `person1` または `person2` を呼び出すことから始めなければなりません。中に含まれている機能は適切にパッケージ化されており、他の機能と衝突しないようになっています。しかしながら、それらは同じように `name` プロパティと `greeting()` メソッドが利用可能です。 2 つのオブジェクトはそれぞれ、生成されたときに割り当てられた、自身の `name` 値を使っていることに注意してください。これが `this` を使うことがとても重要である理由の 1 つであり、他の値ではなく、自身の値を使っているのです。 + +コンストラクターをもう一度呼び出してみましょう。 + +```js +let person1 = new Person('Bob'); +let person2 = new Person('Sarah'); +``` + +いずれのケースでも、新しいオブジェクトインスタンスを生成したいとブラウザーに伝えるために `new` キーワードが使われており、その後に、括弧に必要なパラメーターを入れた関数名が続き、その結果が変数に格納されていて、一般的な関数の呼ばれ方とよく似ています。どちらのインスタンスも、次の定義によって生成されています。 + +```js +function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +} +``` + +新しいオブジェクトが生成された後、 `person1` および `person2` 変数は、次のオブジェクトを格納しています。 + +```js +{ + name: 'Bob', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +{ + name: 'Sarah', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} +``` + +コンストラクター関数を呼び出すとき、毎回 `greeting()` メソッドを定義していることに注意してください。これは理想的ではありません。これを回避するために、代わりにプロトタイプに関数を定義することができます。後で見てみましょう。 + +### 最終的なコンストラクターの作成 + +上で見てきた例は、スタートのためのシンプルな例に過ぎません。次は最終的な `Person()` コンストラクター関数を作りましょう。 + +1. ここまでに挿入したコードを削除し、代わりとなるコンストラクターを追加してください。これはシンプルな例とほぼ同じもので、ほんのわずか複雑になっているだけです。 + + ```js + function Person(first, last, age, gender, interests) { + this.name = { + first : first, + last : last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.bio = function() { + alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }; + this.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); + }; + } + ``` + +2. ではその下に、コンストラクターからオブジェクトインスタンスを生成するため、次の行を追加してください。 + + ```js + let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']); + ``` + +ちょうど以前行ったように、プロパティやメソッドにアクセスできることを確認できます。 JavaScript コンソールの中でやってみましょう。 + +```js +person1['age'] +person1.interests[1] +person1.bio() +// etc. +``` + +> **Note:** **メモ**: もしこの工程で何らかのトラブルがあった場合は、あなたのコードを我々のバージョン ([oojs-class-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html)。[ライブサンプル](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html)も) と比べてみてください。 + +### さらなる練習 + +まずはじめに、さらにいくつかのオブジェクトを生成する独自の行を追加し、オブジェクトインスタンスのメンバーの取得や設定をしてみてください。 + +加えて、 `bio()` メソッドにはいくつかの問題点があります。人物が女性である、あるいは他の優先される性別分類の場合でも、その出力には常に "He" という代名詞が含まれています。また、 bio は `interests` 配列により多くのものが列挙されていても、2 つの趣味しか含みません。このクラス定義 (コンストラクター) の問題を、あなたはどのように修正することができますか?コンストラクター内に任意のコード (恐らく、いくつかの条件分岐やループが必要となるでしょう) を入れてみてください。性別や、趣味の数が 1、2、あるいは 2 よりも多いかどうかによって、文がどのように構築されるべきか考えてみてください。 + +> **Note:** **注**: もし行き詰まってしまった場合は、[GitHub に答えとなるリポジトリ](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html) ([ライブ](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html)) があります。最初はあなた自身で書いてみてください! + +## オブジェクトインスタンスを生成する他の方法 + +ここまで、オブジェクトインスタンスを生成する 2 つの異なる方法を見てきました。[オブジェクトリテラルの宣言](/ja/docs/Learn/JavaScript/Objects/Basics#Object_basics)と、上で見たコンストラクター関数の使用です。 + +これで十分かもしれませんが、他にも方法はあります。ウェブを巡る際に遭遇したときに備えて、よく知っておいてください。 + +### Object() コンストラクター + +まず最初に、 [`Object()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object) コンストラクターを新しいオブジェクトの生成のために使うことができます。はい、一般的なオブジェクトにも、空のオブジェクトを生成するコンストラクターがあります。 + +1. このコードを JavaScript コンソールに入力してみましょう。 + + ```js + let person1 = new Object(); + ``` + +2. `person1` 変数に空のオブジェクトが格納されました。このオブジェクトに、ドット記法とブラケット記法を使ってプロパティを追加することができます。次の例を JavaScript コンソールで試してみましょう。 + + ```js + person1.name = 'Chris'; + person1['age'] = 38; + person1.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; + ``` + +3. あらかじめプロパティやメソッドを設定するため、`Object()` コンストラクターに引数としてオブジェクトリテラルを渡すことも可能です。次のコードを JavaScript コンソールで試してみてください。 + + ```js + let person1 = new Object({ + name: 'Chris', + age: 38, + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } + }); + ``` + +### create() メソッドの使用 + +コードの順序についてもコンストラクターが助けとなります。コンストラクターを一箇所で作っておくと、必要に応じてインスタンスを生成することができ、それらがどこから来たものであるか、明瞭です。 + +しかしながら、特に少数のインスタンスのみを生成する場合に、最初にコンストラクターを作らずにインスタンスを生成することを好む人もいます。JavaScript にはそれを可能とする、`create()` と呼ばれる組み込みメソッドがあります。それにより、既存のオブジェクトを基にして、新しいオブジェクトを生成することができます。 + +1. 前のセクションの練習をブラウザーで終えた状態で、こちらを JavaScript コンソールで試してみてください。 + + ```js + let person2 = Object.create(person1); + ``` + +2. 次は以下のコードです。 + + ```js + person2.name; + person2.greeting(); + ``` + +`person1` を基に `person2` が生成され、`person2` では同じプロパティとメソッドが利用可能であることを確認することができます。 + +`create()` には、IE8 が対応していないという制限があります。つまり、コンストラクターは古いブラウザーに対応したい場合により効果的かもしれません。 + +いずれ、`create()` の効果についてより詳細に紹介するつもりです。 + +## あなたのスキルをテストしてみましょう! + +この記事はここまでですが、最も重要な情報を覚えていますか?先に進む前に、この情報を保持しているかどうかを確認するために、さらにいくつかのテストを見つけることができます。[あなたのスキルをテストする: オブジェクト指向 JavaScript](/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript) を参照してください。 + +この一連のテストは次の記事で紹介する知識に依存していることに注意してください。なので、試してみる前に、まずそれを読んでみるといいかもしれません。 + +## まとめ + +この記事はオブジェクト指向の理論の概略を見てきました。これですべてではありませんが、ここで扱っていることに関する考えを提示しました。加えて、オブジェクトのインスタンスを生成する様々な方法を見始めたところです。 + +次の記事では、 JavaScript オブジェクトのプロトタイプについて紹介します。 + +{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}} + +## このモジュール内の文書 + +- [オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics) +- [初心者のためのオブジェクト指向 JavaScript](/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS) +- [Object のプロトタイプ](/ja/docs/Learn/JavaScript/Objects/Object_prototypes) +- [JavaScript での継承](/ja/docs/Learn/JavaScript/Objects/Inheritance) +- [JSON データの操作](/ja/docs/Learn/JavaScript/Objects/JSON) +- [オブジェクト作成の練習](/ja/docs/Learn/JavaScript/Objects/Object_building_practice) +- [バウンスボールに機能を追加する](/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features) diff --git a/files/ja/conflicting/mdn/community/contributing/getting_started/index.html b/files/ja/conflicting/mdn/community/contributing/getting_started/index.html deleted file mode 100644 index aba41a5603f1f5..00000000000000 --- a/files/ja/conflicting/mdn/community/contributing/getting_started/index.html +++ /dev/null @@ -1,466 +0,0 @@ ---- -title: 全くの初心者のための GitHub -slug: conflicting/MDN/Community/Contributing/Getting_started -tags: - - Best practices - - Community - - GitHub - - MDN - - Beginners -translation_of: MDN/Contribute/GitHub_beginners -original_slug: MDN/Contribute/GitHub_beginners ---- -

{{MDNSidebar}}

- -

GitGitHub は学習したり使いこなしたりするのが難しいツールですが、いくつかの簡単なコマンドと適切なアドバイスがあれば、 MDN への協力を始めるのに十分な程度のことが、さほど苦労せずにできるはずです。この記事の目的は、 Git や GitHub を使いこなすことではなく、基本的なレベルで生産的になり、 MDN に協力するために必要なことを紹介することです。

- -

すでに Git/GitHub の基本に慣れている人は、おそらくここで新しいことを学ぶことはないでしょうが、それでもこの記事をリファレンスとして活用することはできるでしょう。また、長い説明を省いてコマンドだけを掲載している GitHub の早見表もあります。

- -

基本的な概念

- -

以下のものは Git と GitHub を最大限に活用するために知っておかなければならない基本的な概念です。

- - - -

この記事の前提条件

- -

この記事では以下のことを前提としています。

- - - -

初期設定

- -

特定のリポジトリーでの作業を開始する前に、以下の手順を実行してください。

- -
    -
  1. Git をコンピューターにインストールしてください。 Git ダウンロードページにアクセスして、自分のコンピューター用の最新バージョンをダウンロードし、インストールしてください。 Windows ユーザーの場合は、 Git for Windows パッケージに Gitbash が含まれているのでインストールしてください。
  2. -
  3. ついでに、 MDN をローカルで作業するために必要な他の依存関係、すなわち Node.jsyarn もインストールしてください。 -
      -
    1. Node.js をインストールするには、上記のリンクをクリックして、自分のコンピューター用の最新バージョンをダウンロードしてインストールしてください。
    2. -
    3. Node.js をインストールしたら、 npm install --global yarn を実行して yarn をインストールしてください。
    4. -
    -
  4. -
  5. すべての Git リポジトリーを保存するための別のディレクトリーを、コンピューターのどこか、コマンドラインで簡単に見つけて移動できるところに作成します。 mdn-git というディレクトリーを home/user ディレクトリーの中に作成するといいでしょう。
  6. -
  7. まだない場合は、 GitHub アカウントをサインアップしてください。 MDN のリポジトリーに貢献するのに必要です。
  8. -
- -

GitHub での SSH 認証の設定

- -

この時点で、 SSH キーを GitHub のアカウントに設定する必要があります。これは基本的に、 GitHub に自分を識別させるためのセキュリティ機構であり、 GitHub のサービスを利用するたびに認証する必要がなくなります。

- -

GitHub は、この設定に関する便利なガイドを用意しています。まずは GitHub に SSH で接続するを参照してください。ここで紹介する手順に従って、 Github で SSH を利用するための設定を行います。

- -

これを行わなくても MDN に貢献することはできますが、 GitHub とやり取りするたびに (例えば、後で触れるようにプルリクエストを送信するたびに) ユーザー名とパスワードを入力しなければならなくなります。

- -

特定のリポジトリーで作業するためのセットアップ

- -

MDN のさまざまなタスクに取り組む際には、いくつかの異なるリポジトリーを更新する必要がありますが (MDN 上のものはどこにあるのか - リポジトリーのガイドを参照)、作業するどのリポジトリーでも、より簡単で一貫した作業を行うために従うべきセットアップ手順がいくつかあります。

- -

フォークとクローン

- -

フォーククローンという二つの用語は、 Git の世界ではよく遭遇するものです。

- - - -

この二つは個別に行うことができますが、実際には他人のプロジェクトに協力する場合、ほとんどは一緒に行うことになるでしょう。まず、作業したいと思っている各リポジトリーのフォークを作成してください。これは、そのリポジトリーのメインバージョンに変更要求を出すために必要となります (プルリクエストの作成方法については後ほど説明します)。セキュリティ上の理由から、メインバージョンのリポジトリーに直接変更を加えることはできません。

- -

今ここで https://github.com/mdn/content をフォークしてみましょう。いつか必ずこのリポジトリーに貢献することになるでしょう。以下の手順に従ってください。

- -
    -
  1. -

    content リポジトリーのページの右上にある Fork ボタンを探して押してください。

    - -

    Fork と書かれたボタン、その隣に 609 という数値がある

    -
  2. -
  3. -

    リポジトリーをどこにフォークするかを尋ねるモーダルウィンドウが表示されます。個人の GitHub アカウントを選択してください。

    - -

    "Forking mdn/content. It should only take a few seconds." というようなメッセージが表示されます。 GitHub がフォークを完了すると、ブラウザーは新しいフォークのページにリダイレクトされます。たとえば、私がフォークした https://github.com/mdn/contenthttps://github.com/chrisdavidmills/content で利用できます。

    -
  4. -
- -

リポジトリーをフォークしたら、今度はフォークしたものをローカルにクローンしましょう。これは次のように行います。

- -
    -
  1. -

    github.com の自分のフォークのページ (例えば https://github.com/<ユーザー名>/content) へ行ってください。

    -
  2. -
  3. -

    ファイル一覧の上にある緑色の "Code" ボタンを押してください。そうすると、以下のポップアップのようなものが現れます。

    - -

    クローン URL と共に open with github desktop や download zip などの選択肢を表示しているポップアップウィンドウ

    -
  4. -
  5. -

    上で説明したように、 SSH 認証を設定した場合は "SSH" タブをクリックし、ボックス内のテキストフィールドから git@github.com:<ユーザー名>/content.git の URL をコピーしてください。 SSH 認証を設定していない場合は、代わりに "HTTPS" タブのテキストフィールドから https://github.com/<ユーザー名>/content.git のような URL をコピーしてください。

    -
  6. -
  7. -

    そして自分のコンピューターでコマンドラインを開き、 cd コマンドで先ほど git リポジトリーのローカルのクローンを保存するために設定したディレクトリーに移動します。

    - -
    cd git
    -
  8. -
  9. -

    次のような形でコマンドを入力し、フォークをクローンしてください。

    - -
    git clone the-url-you-copied
    - -

    例えば、私がクローンするときのコマンドは次のようになります。

    - -
    git clone git@github.com:chrisdavidmills/content.git
    -
  10. -
- -

これで git ディレクトリーの中に content ディレクトリーができ、そこにリポジトリーの内容が入っているはずです。

- -

リポジトリーのメインバージョンを指すようリモートを設定する

- -

次に進む前の最後の作業として、リモートを設定してメインバージョンのリポジトリーを指すようにしましょう。この例では https://github.com/mdn/content とします。リモートとは基本的に、GitHub 上の特定のリモートリポジトリーの場所を指すものです。後述するように、ローカルのクローンを最新のメインリポジトリーに更新するために最もよく使われます。

- -

リモートの設定は、次のように git remote add コマンドで行います。

- -
git remote add リモート名 指す先のリポジトリー
- - - -

したがって、リモートを追加するには以下のようにします。

- -
    -
  1. -

    github.com のリポジトリーのメインバージョンのページへ行き (この例では https://github.com/mdn/content とします)、必要に応じて "Code" ポップアップから SSH または HTTPS の URL を取得します。

    -
  2. -
  3. -

    コマンドラインから、 cd で自分の content ディレクトリーに移動します。

    - -
    cd content
    -
  4. -
  5. -

    次のようなコマンドを、 リモート名指す先のリポジトリー を適切に置き換えて実行してください。

    - -
    git remote add リモート名 指す先のリポジトリー
    - -

    したがって、例えば私は SSH の URL を使用してリモートの "mozilla" を呼び出したので、次のようにしました。

    - -
    git remote add mozilla git@github.com:mdn/content.git
    -
  6. -
- -

これで、リモートの設定が完了しました。端末で git remote -v というコマンドを実行するとこれを確認できます。このコマンドは、自分のリモートの名前とその場所の一覧を出力します。以下のようなものが表示されるでしょう。

- -
mozilla    git@github.com:mdn/content.git (fetch)
-mozilla    git@github.com:mdn/content.git (push)
-origin    git@github.com:chrisdavidmills/content.git (fetch)
-origin    git@github.com:chrisdavidmills/content.git (push)
- -

リポジトリーに変更を加えるための準備

- -

これで、ローカルのフォーククローンで作業できるようになりましたが、新しい変更を行う前に実行しておくべき一連のコマンドがあります。

- -

メインブランチへの切り替え

- -

それぞれのリポジトリーにはいくつかの異なるブランチがあり、これは基本的に同じリポジトリーの中にあるコードベースの異なるバージョンです。つまり、コードベースに変更を加えるたびに、別のブランチで変更を加え、まずそこでテストしてから、コードのメインコピーに変更を反映させるという考え方です。

- -

コンテンツリポジトリーのメインブランチは "main" と呼ばれています (他のリポジトリーでは "master" などと呼ばれているかもしれません。その場合は、以下に示すすべてのコマンドでその名前を読み替える必要があります)。リポジトリーをクローンしたばかりのときは既定ででこのブランチにいることになりますが、すでに作業を終えている場合は別のブランチにいるかもしれません。 - -何か作業をする前に、次のコマンドを実行してメインブランチに切り替えるようにしましょう。 - -

git switch main
- -
-

- -

他のチュートリアルで、リポジトリーのブランチを変更するのに git checkout を使っているのを見たことがあるかもしれません。このチュートリアルでは、より新しい git switch コマンドをお勧めします。これは純粋にブランチを変更するために設計されたもので、失敗する可能性が低いからです。これらのコマンドの関連性や違いに興味がある方は、 Highlights from Git 2.23 > Experimental alternatives for git checkout が良くまとまっています。

-
- -

自分のメインブランチの更新

- -

次は、メインブランチを更新して、メインリポジトリーのメインブランチと同じ内容になるようにします。 content リポジトリーは数多くの貢献者によって毎日何度も更新されているので、これをやらないとバージョンが古くなってしまい、更新を投稿する際に問題が発生します。ここで、リモートが役に立つのです。

- -

リポジトリーを更新するには次のようにします。

- -
    -
  1. -

    まず、以下のコマンドで、リモートの更新されたコンテンツを取得してください。

    - -
    git fetch リモート名
    - -

    例えば次のようになります。

    - -
    git fetch mozilla
    -
  2. -
  3. -

    次に、自分のメインブランチの内容を、リモートリポジトリーのメインブランチに置き換えます。いろいろな方法がありますが、私は rebase コマンドをよく使います。

    - -
    git rebase リモート名/メインブランチ名
    - -

    例えば次のようになります。

    - -

    git rebase mozilla/main
    -
  4. -
  5. -

    最後に、次のようにして自分のフォークのリモートバージョンに変更をプッシュしてください。

    - -
    git push
    -
  6. -
- -

更新が正しく行われたかどうかは、 github.com で自分のフォークのページを見ればわかります (例えば、私の場合は https://github.com/chrisdavidmills/content です。)。そこには "This branch is even with mdn:main." のような記述があるはずです。もし自分のメインブランチがたくさんのコミットで mdn:main より遅れている (behind) と表示された場合は、もう一度試してみるか、トラブルシューティングを行う必要があります。

- -

作業用のブランチを作成する

- -

フォークでメインブランチを最新の状態にした後は、必ず新しいブランチを作成して変更を加えなければなりません。メインブランチで作業を行い、そこから送信するようなことはしないでください。すぐに面倒なことになってしまいます。すべての作業を別々のブランチで行ったほうが、はるかにすっきりしていて、ミスも起こりにくいのです。

- -

新しいブランチを作成する方法です。

- -
    -
  1. -

    github.com で自分のフォークのページ (例えば、私の場合は https://github.com/chrisdavidmills/content) に行くと、ファイル一覧の左上に、おそらく "main" と書かれているブランチボタンが見つかります。

    - -

    main と表示されたボタン

    -
  2. -
  3. -

    これをクリックすると、ブランチの一覧が表示され、 "Find or create a branch..." というテキストフィールドが表示されます。

    - -

    ブランチ名の一覧が表示されているメニューと、 find or create a branch と書かれたテキストボックス

    -
  4. -
  5. -

    テキストフィールドに既存のブランチ名の一部を入力すると、その文字列によってブランチの一覧が絞り込まれ、既存のブランチを検索しやすくなります。しかし、ここでは新しいブランチを作成したいと思います。まだ存在していないブランチ名を入力すると (test-branch などを試してみてください)、表示が変わり、 "Create branch: test-branch from 'main'" というラベルのついたボタンが表示されます。

    - -

    テキストボックスに入力された新しいブランチ名 test-branch と、その下にある create branch ボタンが表示されたメニュー

    -
  6. -
  7. -

    ブランチ名が決定したら、このボタンをクリックすると表示が更新され、ブランチボタンにそのブランチ名が表示されます。

    - -

    Button labeled test-branch

    -
  8. -
- -

これで完了です。これで、作業を行うための新しいブランチが作成されました。このブランチは、作成した時点でのメインブランチの状態と同じです。ここから作業を始めるといいでしょう。

- -

豆知識:

- - - -

ブランチをローカルに取得して切り替える

- -

前の節では、フォークに新しいブランチを作成する方法を説明しましたが、現在はリモートバージョンのフォークにしか存在していません。このブランチで作業をするには、それを自分のローカルバージョンに取り込む必要があります。

- -

これを行うには、端末に戻って、作業しているリポジトリーのディレクトリー (この例では content) の中にいることを確認してください。

- -
    -
  1. リモートで変更した内容をローカルのクローンに取り込むには、 git pull コマンドを実行してください。
  2. -
  3. * [new branch] test-branch -> origin/test-branch のような数行のメッセージが表示されます。
  4. -
  5. 自分のブランチに切り替える (つまり、 "main" から切り替えてそのブランチで作業する) には、 git switch test-branch コマンドを実行してください。
  6. -
- -

成功すると、 git は次のように表示します。

- -
Branch 'test-branch' set up to track remote branch 'test-branch' from 'origin'.
-Switched to a new branch 'test-branch'
- -

なお、どのブランチにいるのかなど、自分のリポジトリーの状態は git status コマンドを実行すればいつでも確認できます。このコマンドを実行すると、git は次のように表示します。

- -
On branch test-branch
-Your branch is up to date with 'origin/test-branch'.
-
-nothing to commit, working tree clean
- -

だいたい良いようですね。現在は "test-branch" ブランチにいて、まだ変更は何も行っていません。

- -

変更の追加、コミット、プッシュ

- -

この時点で、作業しているリポジトリーに変更を加える準備が整いました。 MDN のバグを修正したり、何かをするためです。この部分はこのチュートリアルの目的ではないので、ほとんど省略します。 MDN で実際の問題を修正したい場合は、コンテンツの問題一覧から修正するバグを選択するか、より詳しいガイダンスが必要であれば MDN への貢献をお読みください。

- -

例としての性質上、このチュートリアルに沿って進めるのであれば、簡単なことをやってみましょう。

- -
    -
  1. -

    content/README.md ファイルに入り、 README の一番上の見出しに 1 文字を追加してください。

    -
  2. -
  3. -

    次に、コマンドラインに戻って git status コマンドを再度入力します。今度は、git が次のように教えてくれるはずです。

    - -
    Your branch is up to date with 'origin/test-branch'.
    -
    -    Changes not staged for commit:
    -      (use "git add <file>..." to update what will be committed)
    -      (use "git restore <file>..." to discard changes in working directory)
    -        modified:   README.md
    -
    -    no changes added to commit (use "git add" and/or "git commit -a")
    -
  4. -
  5. -

    つまり、この時点で変更したファイルを教えてくれるのです。次の段階では、そのファイルを「追加」します。つまり、リモートフォークにプッシュするために、コミットしたいファイルの一覧にそのファイルを追加します。このファイルをコミット一覧に追加するには、次のように入力します。

    - -
    git add README.md
    - -
    -

    - -

    README.md は、変更したファイルの名前だけではなく、そのファイルへのパスを書きます。サブディレクトリーの中にあった場合は、そのファイルのフルパスを書かなければなりません。 -

    -
  6. -
  7. -

    もう一度 git status を実行すると、このように表示されます。

    - -
    On branch test-branch
    -    Your branch is up to date with 'origin/test-branch'.
    -
    -    Changes to be committed:
    -      (use "git restore --staged <file>..." to unstage)
    -        modified:   README.md
    -
  8. -
  9. -

    Git は README.md がコミット一覧に入ったことを教えてくれました。コミット一覧にあるすべてのファイルをコミット (後にメインブランチに送信しようとする、ひとつの変更セット) に含めるには、次のように入力します (-m オプションは "message" の略です)。 - -

    git commit -m 'my first commit'
    - -

    Git は次のように表示します。

    - -
    [test-branch 44b207ef6] my first commit
    -     1 file changed, 1 insertion(+), 1 deletion(-)
    - -

    コミットを登録したことを示すためです。

    -
  10. -
  11. -

    もう一度 git status を実行すると、次のような情報が得られます。

    - -
    On branch test-branch
    -    Your branch is ahead of 'origin/test-branch' by 1 commit.
    -      (use "git push" to publish your local commits)
    -
    -    nothing to commit, working tree clean
    -
  12. -
- -

情報の読み出しは基本的にリセットされています。 — 前回の変更をコミットとしてシステムに送信したので、コミットする変更がないことを伝えています。先ほどとの大きな違いは、 "Your branch is ahead of 'origin/test-branch' by 1 commit." という行です。 — ローカル版の "test-branch" ブランチは、リモート版 "test-branch" よりも 1 コミット分進んでいます。言い換えれば、リモートブランチにはない変更をローカルで行ったということです。

- -

ローカルで行った変更をリモートブランチに送りましょう。そのためには git push というコマンドを実行します。 — やってみましょう。エラーが出なければ、次のような内容が表示されます。

- -
Enumerating objects: 5, done.
-Counting objects: 100% (5/5), done.
-Delta compression using up to 8 threads
-Compressing objects: 100% (3/3), done.
-Writing objects: 100% (3/3), 292 bytes | 292.00 KiB/s, done.
-Total 3 (delta 2), reused 0 (delta 0)
-remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
-To github.com:chrisdavidmills/content.git
-    77215e31e..44b207ef6  test-branch -> test-branch
- -

プルリクエストの作成

- -

この時点で、 github.com のリモートフォークのページに戻ってみましょう。すると、 "This branch is 1 commit ahead of mdn:main." というメッセージが表示されるはずです。これは、私たちのフォークのコンテンツには、 mozilla の "main" ブランチにはない内容の変更 (コミット) があることを意味しています。

- -
    -
  1. -

    自分の変更をリポジトリーのメインコピーに送るには、プルリクエストを作成する必要があります。この作業は、ブランチに変更がプッシュされたときにファイル一覧の一番上に表示される "Compare & pull request" ボタンを使って簡単に行うことができます。

    - -

    test ブランチに最近のプッシュがあるというテキスト、そして compare and pull request と書かれたボタンが表示されているバナー

    - -

    このボタンを押すと、次のような新しい画面が表示されます。

    - -

    open pull request フォーム、その中にタイトルと説明のテキストフィールドがある

    - -
    -

    警告

    - -

    ここから先の手順は、実際にリポジトリーに変更を加える場合にのみ行ってください。実際にテスト PR をリポジトリーに提出しないでください。

    -
    -
  2. -
  3. -

    ここでは、プルリクエストに役立つタイトルと説明を入力し、変更した内容、それがなぜ良いことなのかを正確に書いてください。必要に応じて、修正された関連する問題を書いてください。具体的には、 Fixes issue-url という行を入れます。 GitHub は、自動的にこれを Fixes #1234 のような課題番号へのリンクとして表示し、さらにプルリクエストがマージされると関連する課題を自動的にクローズします。 (訳注: Fixes issue-url の部分は英語で入力してください。日本語で書くと自動的にクローズする機能が動作しないことがあります。)

    -
  4. -
  5. -

    プルリクエストを送信する準備ができたら、 "Create pull request" ボタンをクリックしてください。これにより、自分のプルリクエスト (PR) がリポジトリーのプルリクエスト一覧に表示され、レビューチームによるレビューを経て、メインのコードベースにマージされることになります。

    - -

    レビューチームが変更を加えてほしい場合は、プルリクエストのスレッドのコメントで教えてくれます (その旨の通知メールが届くはずです)。

    -
  6. -
  7. -

    すでに提出したプルリクエストにさらに変更を加えたい場合は、同じローカルブランチ上でさらにコミットを行い、先ほど説明したようにプッシュすることで変更を加えることができます。全く新しいプルリクエストを作成する必要はありません。ただ、以前と同じブランチにコミットしていることを確認してください

    -
  8. -
- -

トラブルシューティング

- -

上記のチュートリアルは、 GitHub のリポジトリーに貢献するために必要な git と GitHub の基礎知識を基本レベルで提供することを目的としています。お役に立ちましたでしょうか。また、ウェブ業界の標準的なバージョン管理システムであるにもかかわらず、 Git は学ぶのも使うのも非常に難しいツールであるという神話的・伝説的な評判があることについても触れておきましょう。

- -

私たちは、これが完全に公平だとは思いません。 Git には多くのコマンドがあり、その使い方は時に非常に不可解で、マスターするには長い時間がかかります。また、コマンドのいくつかを忘れたり、間違った順序で実行したりすると、なかなか抜け出せない面白い混乱に陥る可能性があるのも事実です。しかし、上記のような良い習慣を身につけていれば、大きく間違えることはないでしょう。また、 Git は10年前に比べてはるかに使いやすくなっていることも特筆すべき点です。

- -

この節は今後拡充してゆき、一般的な問題を解決するのに役立つコマンドやシーケンスを紹介します。

- -

コミット一覧に追加されていないファイルに加えた変更を元に戻す

- -

ファイルを変更したものの、まだそれをコミット一覧に追加するための git add ファイルパス コマンドを実行していない場合は、次のように実行すれば、そのファイルをブランチを最初にチェックアウトしたときの状態に戻すことができます。

- -
git restore ファイルパス
- -

コミット一覧からのファイルの削除

- -

git add ファイルパス コマンドを実行してファイルをコミット一覧に追加した後で、そのファイルをコミット一覧から削除したい場合は、次のようなコマンドを使います。

- -
git restore --staged ファイルパス
- -

コミットの取り消し

- -

git commit -m 'my commit message' を使ってコミット一覧をコミットした後、まだプッシュしていないが、何か削除したいものを入れてしまったことに気づいた場合、次のようにしてローカルのコミットを取り消すことができます。

- -
git reset HEAD~1
- -

これで、そのコミットの変更がまだコミット一覧に追加されていない状態に戻ります (問題を解決した後で、再度 git add する必要があります)。これは、このセッションで何かをコミットし始める前の状態に戻ることに注意しましょう。これでは、たとえば 3 つのコミットのうち真ん中のコミットだけを戻したいといった複雑なことをするときには役に立ちません。このレッスンでは、このままにしておきましょう。

- -

リモートフォークにプッシュされたコミットを元に戻す

- -

ここまで来ると、実際には戻ることも巻き戻すこともできません。代わりに、削除したいコミットの効果を逆にするために、別のコミットをプッシュする必要があります。上記で紹介したツールを使って手動で行うこともできますが、これを簡単に行うことができる組み込みのコマンド、 git revert があります。これを使うと、指定した時点に変更を戻すコミットを自動的に作成することができます。

- -
    -
  1. -

    最もシンプルな方法は、以下のコマンドを実行して、リモートブランチをコミット開始前の状態に戻すコミットを作成することです。

    - -
    git revert HEAD
    -
  2. -
  3. -

    すると、コミットメッセージファイルが既定のテキストエディターで開かれるので、それを見て納得できるかどうか確認しましょう。これを閉じると、 git はコミットの作成を完了します。

    -
  4. -
  5. -

    あとはプッシュする必要があるだけです。

    - -
    git push
    -
  6. -
- -

github.com でリモートフォークのページを再度見ると、元に戻したかったコミットと、それを元に戻したコミットが表示されています。

- -

もっと見たいですか?

- -

他にもこのトラブルシューティングガイドに情報を盛り込むべきだと思われる場合は、課題を作成して提案してください。

- -

関連情報

- - diff --git a/files/ja/conflicting/mdn/community/contributing/getting_started/index.md b/files/ja/conflicting/mdn/community/contributing/getting_started/index.md new file mode 100644 index 00000000000000..2f23ff5372f6e2 --- /dev/null +++ b/files/ja/conflicting/mdn/community/contributing/getting_started/index.md @@ -0,0 +1,430 @@ +--- +title: 全くの初心者のための GitHub +slug: conflicting/MDN/Community/Contributing/Getting_started +tags: + - Best practices + - Community + - GitHub + - MDN + - Beginners +translation_of: MDN/Contribute/GitHub_beginners +original_slug: MDN/Contribute/GitHub_beginners +--- +{{MDNSidebar}} + +[Git](https://git-scm.com/) と [GitHub](https://github.com/) は学習したり使いこなしたりするのが難しいツールですが、いくつかの簡単なコマンドと適切なアドバイスがあれば、 MDN への協力を始めるのに十分な程度のことが、さほど苦労せずにできるはずです。この記事の目的は、 Git や GitHub を使いこなすことではなく、基本的なレベルで生産的になり、 MDN に協力するために必要なことを紹介することです。 + +すでに Git/GitHub の基本に慣れている人は、おそらくここで新しいことを学ぶことはないでしょうが、それでもこの記事をリファレンスとして活用することはできるでしょう。また、長い説明を省いてコマンドだけを掲載している [GitHub の早見表](/ja/docs/MDN/Contribute/GitHub_cheatsheet)もあります。 + +## 基本的な概念 + +以下のものは Git と GitHub を最大限に活用するために知っておかなければならない基本的な概念です。 + +- Git は*バージョン管理システム*のツールで、開発ワークフローには欠かせないものです。複数の開発者が同じコードベースで、互いの邪魔にならないように作業したり、コードベースをリモートの場所に安全に保管したり、必要に応じてコードを以前の状態に戻したりといったことができます。 +- GitHub は、保存されたコードベースを操作するための便利なツールを Git の上に提供し、コードベースを保存するためのサーバースペースの提供も行うウェブアプリケーションです。この分野の他のアプリケーションである [GitLab](https://about.gitlab.com/) や [Bitbucket](https://bitbucket.org/) などと同様の機能を持っています。 +- それぞれのコードベースは、リポジトリー (_repository_ または _repo_) と呼ばれるコンテナーに格納されます。 +- リポジトリーに変更を加える最小限の手順は次の通りです。 + + - そのリポジトリーの自分用のコピーを作成する (フォーク (_fork_) といいます)。 + - リポジトリーのフォークに別なバージョンのコードを作成し (ブランチ (_branch_) といいます)、その別なバージョンに変更を加える。 + - プルリクエスト (_pull request_) によって元のリポジトリーのコピーに変更を加えることを提案する。このガイドでは、これらの手順をすべて学ぶことができます。 + +## この記事の前提条件 + +この記事では以下のことを前提としています。 + +- コマンドライン/端末の利用に慣れていること。コマンドラインを使うのが初めての方は、[コマンドラインの短期集中コース](/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line)をご覧ください。 +- 標準的な UNIX スタイルのコマンドラインのコマンドを解釈できるシステムで作業をしている。 macOS/Linux ではこの機能がすぐに使えます。 [Windows はこの点ではそれほど単純ではありません](/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#windows) が、 Gitbash のように Windows でこの機能をエミュレートする便利なアプリケーションがあります。 +- Git/GitHub の操作にはコマンドラインを使います。 Git や GitHub 用の GUI ツールはいくつかありますが、このガイドでは利用できません。 + +## 初期設定 + +特定のリポジトリーでの作業を開始する前に、以下の手順を実行してください。 + +1. Git をコンピューターにインストールしてください。 [Git ダウンロードページ](https://git-scm.com/downloads)にアクセスして、自分のコンピューター用の最新バージョンをダウンロードし、インストールしてください。 Windows ユーザーの場合は、 [Git for Windows](https://gitforwindows.org/) パッケージに Gitbash が含まれているのでインストールしてください。 +2. ついでに、 MDN をローカルで作業するために必要な他の依存関係、すなわち [Node.js](https://nodejs.org/en/download/) と [yarn](https://classic.yarnpkg.com/en/docs/install) もインストールしてください。 + + 1. Node.js をインストールするには、上記のリンクをクリックして、自分のコンピューター用の最新バージョンをダウンロードしてインストールしてください。 + 2. Node.js をインストールしたら、 `npm install --global yarn` を実行して yarn をインストールしてください。 + +3. すべての Git リポジトリーを保存するための別のディレクトリーを、コンピューターのどこか、コマンドラインで簡単に見つけて移動できるところに作成します。 mdn-git というディレクトリーを home/user ディレクトリーの中に作成するといいでしょう。 +4. まだない場合は、 [GitHub アカウントをサインアップ](https://github.com/join)してください。 MDN のリポジトリーに貢献するのに必要です。 + +### GitHub での SSH 認証の設定 + +この時点で、 SSH キーを GitHub のアカウントに設定する必要があります。これは基本的に、 GitHub に自分を識別させるためのセキュリティ機構であり、 GitHub のサービスを利用するたびに認証する必要がなくなります。 + +GitHub は、この設定に関する便利なガイドを用意しています。まずは [GitHub に SSH で接続する](https://docs.github.com/ja/github/authenticating-to-github/connecting-to-github-with-ssh)を参照してください。ここで紹介する手順に従って、 Github で SSH を利用するための設定を行います。 + +これを行わなくても MDN に貢献することはできますが、 GitHub とやり取りするたびに (例えば、後で触れるようにプルリクエストを送信するたびに) ユーザー名とパスワードを入力しなければならなくなります。 + +## 特定のリポジトリーで作業するためのセットアップ + +MDN のさまざまなタスクに取り組む際には、いくつかの異なるリポジトリーを更新する必要がありますが ([MDN 上のものはどこにあるのか - リポジトリーのガイド](/ja/docs/MDN/Contribute/Where_is_everything)を参照)、作業するどのリポジトリーでも、より簡単で一貫した作業を行うために従うべきセットアップ手順がいくつかあります。 + +### フォークとクローン + +*フォーク*と*クローン*という二つの用語は、 Git の世界ではよく遭遇するものです。 + +- フォークは GitHub 上でリポジトリーの自分用のコピーを作成するという意味です。 +- クローンは作業用のリポジトリーのローカルコピーを作成するという意味です (すなわちローカルのハードディスク上に)。 + +この二つは個別に行うことができますが、実際には他人のプロジェクトに協力する場合、ほとんどは一緒に行うことになるでしょう。まず、作業したいと思っている各リポジトリーのフォークを作成してください。これは、そのリポジトリーのメインバージョンに変更要求を出すために必要となります (プルリクエストの作成方法については後ほど説明します)。セキュリティ上の理由から、メインバージョンのリポジトリーに直接変更を加えることはできません。 + +今ここで をフォークしてみましょう。いつか必ずこのリポジトリーに貢献することになるでしょう。以下の手順に従ってください。 + +1. content リポジトリーのページの右上にある Fork ボタンを探して押してください。 + + ![Fork と書かれたボタン、その隣に 609 という数値がある](fork-button.png) + +2. リポジトリーをどこにフォークするかを尋ねるモーダルウィンドウが表示されます。個人の GitHub アカウントを選択してください。 + + "Forking mdn/content. It should only take a few seconds." というようなメッセージが表示されます。 GitHub がフォークを完了すると、ブラウザーは新しいフォークのページにリダイレクトされます。たとえば、私がフォークした で利用できます。 + +リポジトリーをフォークしたら、今度はフォークしたものをローカルにクローンしましょう。これは次のように行います。 + +1. github.com の自分のフォークのページ (例えば `https://github.com/<ユーザー名>/content`) へ行ってください。 +2. ファイル一覧の上にある緑色の "Code" ボタンを押してください。そうすると、以下のポップアップのようなものが現れます。 + + ![クローン URL と共に open with github desktop や download zip などの選択肢を表示しているポップアップウィンドウ](code-popup.png) + +3. 上で説明したように、 SSH 認証を設定した場合は "SSH" タブをクリックし、ボックス内のテキストフィールドから `git@github.com:<ユーザー名>/content.git` の URL をコピーしてください。 SSH 認証を設定していない場合は、代わりに "HTTPS" タブのテキストフィールドから `https://github.com/<ユーザー名>/content.git` のような URL をコピーしてください。 +4. そして自分のコンピューターでコマンドラインを開き、 cd コマンドで先ほど git リポジトリーのローカルのクローンを保存するために設定したディレクトリーに移動します。 + + ```bash + cd git + ``` + +5. 次のような形でコマンドを入力し、フォークをクローンしてください。 + + ```bash + git clone the-url-you-copied + ``` + + 例えば、私がクローンするときのコマンドは次のようになります。 + + ```bash + git clone git@github.com:chrisdavidmills/content.git + ``` + +これで git ディレクトリーの中に content ディレクトリーができ、そこにリポジトリーの内容が入っているはずです。 + +### リポジトリーのメインバージョンを指すようリモートを設定する + +次に進む前の最後の作業として、リモートを設定してメインバージョンのリポジトリーを指すようにしましょう。この例では とします。リモートとは基本的に、GitHub 上の特定のリモートリポジトリーの場所を指すものです。後述するように、ローカルのクローンを最新のメインリポジトリーに更新するために最もよく使われます。 + +リモートの設定は、次のように `git remote add` コマンドで行います。 + +```bash +git remote add リモート名 指す先のリポジトリー +``` + +- _リモート名_ は自分で決めた名前で、後にリモートを参照するために使用されます。同じ目的を持つ異なるリポジトリー間では、一貫したリモート名にこだわるのと良いでしょう。同じリモート名であれば、どこでも同じことができ、混乱することも少なくなります。例えば、自分のバージョンをフォークしたリポジトリーのメインバージョンは「upstream (上流) リポジトリー」と呼ばれることが多く、そのためよく "upstream" がリモートの上流の場所を表す名前として使われます。私は通常、上流のリモートを "mozilla" と呼んでいますが、これは Mozilla のメインのリポジトリーを指していることを示すためです。 +- _指す先のリポジトリー_ は、指す先の SSH (または HTTPS) の URL で、先ほどフォークのクローンを作ったときと同じ方法で取得します。 + +したがって、リモートを追加するには以下のようにします。 + +1. github.com のリポジトリーのメインバージョンのページへ行き (この例では とします)、必要に応じて "Code" ポップアップから SSH または HTTPS の URL を取得します。 +2. コマンドラインから、 `cd` で自分の content ディレクトリーに移動します。 + + ```bash + cd content + ``` + +3. 次のようなコマンドを、 _リモート名_ と _指す先のリポジトリー_ を適切に置き換えて実行してください。 + + ```bash + git remote add リモート名 指す先のリポジトリー + ``` + + したがって、例えば私は SSH の URL を使用してリモートの "mozilla" を呼び出したので、次のようにしました。 + + ```bash + git remote add mozilla git@github.com:mdn/content.git + ``` + +これで、リモートの設定が完了しました。端末で `git remote -v` というコマンドを実行するとこれを確認できます。このコマンドは、自分のリモートの名前とその場所の一覧を出力します。以下のようなものが表示されるでしょう。 + +``` +mozilla git@github.com:mdn/content.git (fetch) +mozilla git@github.com:mdn/content.git (push) +origin git@github.com:chrisdavidmills/content.git (fetch) +origin git@github.com:chrisdavidmills/content.git (push) +``` + +## リポジトリーに変更を加えるための準備 + +これで、ローカルのフォーククローンで作業できるようになりましたが、新しい変更を行う前に実行しておくべき一連のコマンドがあります。 + +### メインブランチへの切り替え + +それぞれのリポジトリーにはいくつかの異なるブランチがあり、これは基本的に同じリポジトリーの中にあるコードベースの異なるバージョンです。つまり、コードベースに変更を加えるたびに、別のブランチで変更を加え、まずそこでテストしてから、コードのメインコピーに変更を反映させるという考え方です。 + +コンテンツリポジトリーのメインブランチは "main" と呼ばれています (他のリポジトリーでは "master" などと呼ばれているかもしれません。その場合は、以下に示すすべてのコマンドでその名前を読み替える必要があります)。リポジトリーをクローンしたばかりのときは既定ででこのブランチにいることになりますが、すでに作業を終えている場合は別のブランチにいるかもしれません。 +何か作業をする前に、次のコマンドを実行してメインブランチに切り替えるようにしましょう。 + +```bash +git switch main +``` + +> **Note:** #### 注他のチュートリアルで、リポジトリーのブランチを変更するのに `git checkout` を使っているのを見たことがあるかもしれません。このチュートリアルでは、より新しい `git switch` コマンドをお勧めします。これは純粋にブランチを変更するために設計されたもので、失敗する可能性が低いからです。これらのコマンドの関連性や違いに興味がある方は、 [Highlights from Git 2.23 > Experimental alternatives for git checkout](https://github.blog/2019-08-16-highlights-from-git-2-23/#experimental-alternatives-for-git-checkout) が良くまとまっています。 + +### 自分のメインブランチの更新 + +次は、メインブランチを更新して、メインリポジトリーのメインブランチと同じ内容になるようにします。 content リポジトリーは数多くの貢献者によって毎日何度も更新されているので、これをやらないとバージョンが古くなってしまい、更新を投稿する際に問題が発生します。ここで、リモートが役に立つのです。 + +リポジトリーを更新するには次のようにします。 + +1. まず、以下のコマンドで、リモートの更新されたコンテンツを取得してください。 + + ```bash + git fetch リモート名 + ``` + + 例えば次のようになります。 + + ```bash + git fetch mozilla + ``` + +2. 次に、自分のメインブランチの内容を、リモートリポジトリーのメインブランチに置き換えます。いろいろな方法がありますが、私は `rebase` コマンドをよく使います。 + + ```bash + git rebase リモート名/メインブランチ名 + ``` + + 例えば次のようになります。 + + ```bash + git rebase mozilla/main + ``` + +3. 最後に、次のようにして自分のフォークのリモートバージョンに変更をプッシュしてください。 + + ```bash + git push + ``` + +更新が正しく行われたかどうかは、 github.com で自分のフォークのページを見ればわかります (例えば、私の場合は です。)。そこには "This branch is even with mdn:main." のような記述があるはずです。もし自分のメインブランチがたくさんのコミットで mdn:main より遅れている (behind) と表示された場合は、もう一度試してみるか、[トラブルシューティング](#troubleshooting)を行う必要があります。 + +### 作業用のブランチを作成する + +フォークでメインブランチを最新の状態にした後は、必ず新しいブランチを作成して変更を加えなければなりません。メインブランチで作業を行い、そこから送信するようなことは*しないでください*。すぐに面倒なことになってしまいます。すべての作業を別々のブランチで行ったほうが、はるかにすっきりしていて、ミスも起こりにくいのです。 + +新しいブランチを作成する方法です。 + +1. github.com で自分のフォークのページ (例えば、私の場合は ) に行くと、ファイル一覧の左上に、おそらく "main" と書かれているブランチボタンが見つかります。 + + ![main と表示されたボタン](branch-button.png) + +2. これをクリックすると、ブランチの一覧が表示され、 "Find or create a branch..." というテキストフィールドが表示されます。 + + ![ブランチ名の一覧が表示されているメニューと、 find or create a branch と書かれたテキストボックス](branch-menu.png) + +3. テキストフィールドに既存のブランチ名の一部を入力すると、その文字列によってブランチの一覧が絞り込まれ、既存のブランチを検索しやすくなります。しかし、ここでは新しいブランチを作成したいと思います。まだ存在していないブランチ名を入力すると (test-branch などを試してみてください)、表示が変わり、 "Create branch: test-branch from 'main'" というラベルのついたボタンが表示されます。 + + ![テキストボックスに入力された新しいブランチ名 test-branch と、その下にある create branch ボタンが表示されたメニュー](new-branch.png) + +4. ブランチ名が決定したら、このボタンをクリックすると表示が更新され、ブランチボタンにそのブランチ名が表示されます。 + + ![Button labeled test-branch](branch-button-new-branch.png) + +これで完了です。これで、作業を行うための新しいブランチが作成されました。このブランチは、作成した時点でのメインブランチの状態と同じです。ここから作業を始めるといいでしょう。 + +豆知識: + +- 新しいブランチを作成する前には、前のセクションで説明したように、常にメインブランチを mozilla のメインブランチと同期するように更新するようにしてください。 +- 新しいブランチは常に main から作成するようにし、他のブランチから作成しないようにしてください。そのために、ブランチボタンに "main" と表示されており、他のブランチではないことを確認してから作業を始めましょう。そうしないと、新しいブランチが非常に古くなってしまい、コンテンツの問題が発生する可能性があります。 + +### ブランチをローカルに取得して切り替える + +前の節では、フォークに新しいブランチを作成する方法を説明しましたが、現在はリモートバージョンのフォークにしか存在していません。このブランチで作業をするには、それを自分のローカルバージョンに取り込む必要があります。 + +これを行うには、端末に戻って、作業しているリポジトリーのディレクトリー (この例では `content`) の中にいることを確認してください。 + +1. リモートで変更した内容をローカルのクローンに取り込むには、 `git pull` コマンドを実行してください。 +2. `* [new branch] test-branch -> origin/test-branch` のような数行のメッセージが表示されます。 +3. 自分のブランチに切り替える (つまり、 "main" から切り替えてそのブランチで作業する) には、 `git switch test-branch` コマンドを実行してください。 + +成功すると、 git は次のように表示します。 + +``` +Branch 'test-branch' set up to track remote branch 'test-branch' from 'origin'. +Switched to a new branch 'test-branch' +``` + +なお、どのブランチにいるのかなど、自分のリポジトリーの状態は `git status` コマンドを実行すればいつでも確認できます。このコマンドを実行すると、git は次のように表示します。 + +``` +On branch test-branch +Your branch is up to date with 'origin/test-branch'. + +nothing to commit, working tree clean +``` + +だいたい良いようですね。現在は "test-branch" ブランチにいて、まだ変更は何も行っていません。 + +## 変更の追加、コミット、プッシュ + +この時点で、作業しているリポジトリーに変更を加える準備が整いました。 MDN のバグを修正したり、何かをするためです。この部分はこのチュートリアルの目的ではないので、ほとんど省略します。 MDN で実際の問題を修正したい場合は、[コンテンツの問題一覧](https://github.com/mdn/content/issues/)から修正するバグを選択するか、より詳しいガイダンスが必要であれば [MDN への貢献](/ja/docs/MDN/Contribute)をお読みください。 + +例としての性質上、このチュートリアルに沿って進めるのであれば、簡単なことをやってみましょう。 + +1. `content/README.md` ファイルに入り、 README の一番上の見出しに 1 文字を追加してください。 +2. 次に、コマンドラインに戻って `git status` コマンドを再度入力します。今度は、git が次のように教えてくれるはずです。 + + ``` + Your branch is up to date with 'origin/test-branch'. + + Changes not staged for commit: + (use "git add ..." to update what will be committed) + (use "git restore ..." to discard changes in working directory) + modified: README.md + + no changes added to commit (use "git add" and/or "git commit -a") + ``` + +3. つまり、この時点で変更したファイルを教えてくれるのです。次の段階では、そのファイルを「追加」します。つまり、リモートフォークにプッシュするために、コミットしたいファイルの一覧にそのファイルを追加します。このファイルをコミット一覧に追加するには、次のように入力します。 + + ```bash + git add README.md + ``` + + > **Note:** ### 注`README.md` は、変更したファイルの名前だけではなく、そのファイルへのパスを書きます。サブディレクトリーの中にあった場合は、そのファイルのフルパスを書かなければなりません。 + +4. もう一度 `git status` を実行すると、このように表示されます。 + + ``` + On branch test-branch + Your branch is up to date with 'origin/test-branch'. + + Changes to be committed: + (use "git restore --staged ..." to unstage) + modified: README.md + ``` + +5. Git は `README.md` がコミット一覧に入ったことを教えてくれました。コミット一覧にあるすべてのファイルをコミット (後にメインブランチに送信しようとする、ひとつの変更セット) に含めるには、次のように入力します (`-m` オプションは "message" の略です)。 + + ```bash + git commit -m 'my first commit' + ``` + + Git は次のように表示します。 + + ``` + [test-branch 44b207ef6] my first commit + 1 file changed, 1 insertion(+), 1 deletion(-) + ``` + + コミットを登録したことを示すためです。 + +6. もう一度 `git status` を実行すると、次のような情報が得られます。 + + ``` + On branch test-branch + Your branch is ahead of 'origin/test-branch' by 1 commit. + (use "git push" to publish your local commits) + + nothing to commit, working tree clean + ``` + +情報の読み出しは基本的にリセットされています。 — 前回の変更をコミットとしてシステムに送信したので、コミットする変更がないことを伝えています。先ほどとの大きな違いは、 "Your branch is ahead of 'origin/test-branch' by 1 commit." という行です。 — ローカル版の "test-branch" ブランチは、リモート版 "test-branch" よりも 1 コミット分進んでいます。言い換えれば、リモートブランチにはない変更をローカルで行ったということです。 + +ローカルで行った変更をリモートブランチに送りましょう。そのためには `git push` というコマンドを実行します。 — やってみましょう。エラーが出なければ、次のような内容が表示されます。 + +``` +Enumerating objects: 5, done. +Counting objects: 100% (5/5), done. +Delta compression using up to 8 threads +Compressing objects: 100% (3/3), done. +Writing objects: 100% (3/3), 292 bytes | 292.00 KiB/s, done. +Total 3 (delta 2), reused 0 (delta 0) +remote: Resolving deltas: 100% (2/2), completed with 2 local objects. +To github.com:chrisdavidmills/content.git + 77215e31e..44b207ef6 test-branch -> test-branch +``` + +## プルリクエストの作成 + +この時点で、 github.com のリモートフォークのページに戻ってみましょう。すると、 "This branch is 1 commit ahead of mdn:main." というメッセージが表示されるはずです。これは、私たちのフォークのコンテンツには、 mozilla の "main" ブランチにはない内容の変更 (コミット) があることを意味しています。 + +1. 自分の変更をリポジトリーのメインコピーに送るには、プルリクエストを作成する必要があります。この作業は、ブランチに変更がプッシュされたときにファイル一覧の一番上に表示される "Compare & pull request" ボタンを使って簡単に行うことができます。 + + ![test ブランチに最近のプッシュがあるというテキスト、そして compare and pull request と書かれたボタンが表示されているバナー](compare-and-pull-request.png) + + このボタンを押すと、次のような新しい画面が表示されます。 + + ![open pull request フォーム、その中にタイトルと説明のテキストフィールドがある](open-pull-request.png) + +

警告

ここから先の手順は、実際にリポジトリーに変更を加える場合にのみ行ってください。実際にテスト PR をリポジトリーに提出しないでください。

+ +2. ここでは、プルリクエストに役立つタイトルと説明を入力し、変更した内容、それがなぜ良いことなのかを正確に書いてください。必要に応じて、修正された関連する問題を書いてください。具体的には、 `Fixes issue-url` という行を入れます。 GitHub は、自動的にこれを `Fixes #1234` のような課題番号へのリンクとして表示し、さらにプルリクエストがマージされると関連する課題を自動的にクローズします。 (訳注: `Fixes issue-url` の部分は英語で入力してください。日本語で書くと自動的にクローズする機能が動作しないことがあります。) +3. プルリクエストを送信する準備ができたら、 "Create pull request" ボタンをクリックしてください。これにより、自分のプルリクエスト (PR) がリポジトリーの[プルリクエスト一覧](https://github.com/mdn/content/pulls)に表示され、レビューチームによるレビューを経て、メインのコードベースにマージされることになります。 + + レビューチームが変更を加えてほしい場合は、プルリクエストのスレッドのコメントで教えてくれます (その旨の通知メールが届くはずです)。 + +4. すでに提出したプルリクエストにさらに変更を加えたい場合は、同じローカルブランチ上でさらにコミットを行い、先ほど説明したようにプッシュすることで変更を加えることができます。全く新しいプルリクエストを作成する必要はありません。ただ、**以前と同じブランチにコミットしていることを確認してください**。 + +## トラブルシューティング + +上記のチュートリアルは、 GitHub のリポジトリーに貢献するために必要な git と GitHub の基礎知識を基本レベルで提供することを目的としています。お役に立ちましたでしょうか。また、ウェブ業界の標準的なバージョン管理システムであるにもかかわらず、 Git は学ぶのも使うのも非常に難しいツールであるという神話的・伝説的な評判があることについても触れておきましょう。 + +私たちは、これが完全に公平だとは思いません。 Git には多くのコマンドがあり、その使い方は時に非常に不可解で、マスターするには長い時間がかかります。また、コマンドのいくつかを忘れたり、間違った順序で実行したりすると、なかなか抜け出せない面白い混乱に陥る可能性があるのも事実です。しかし、上記のような良い習慣を身につけていれば、大きく間違えることはないでしょう。また、 Git は 10 年前に比べてはるかに使いやすくなっていることも特筆すべき点です。 + +この節は今後拡充してゆき、一般的な問題を解決するのに役立つコマンドやシーケンスを紹介します。 + +### コミット一覧に追加されていないファイルに加えた変更を元に戻す + +ファイルを変更したものの、まだそれをコミット一覧に追加するための `git add ファイルパス` コマンドを実行していない場合は、次のように実行すれば、そのファイルをブランチを最初にチェックアウトしたときの状態に戻すことができます。 + +```bash +git restore ファイルパス +``` + +### コミット一覧からのファイルの削除 + +`git add ファイルパス` コマンドを実行してファイルをコミット一覧に追加した後で、そのファイルをコミット一覧から削除したい場合は、次のようなコマンドを使います。 + +```bash +git restore --staged ファイルパス +``` + +### コミットの取り消し + +`git commit -m 'my commit message'` を使ってコミット一覧をコミットした後、まだプッシュしていないが、何か削除したいものを入れてしまったことに気づいた場合、次のようにしてローカルのコミットを取り消すことができます。 + +```bash +git reset HEAD~1 +``` + +これで、そのコミットの変更がまだコミット一覧に追加されていない状態に戻ります (問題を解決した後で、再度 git add する必要があります)。これは、このセッションで何かをコミットし始める前の状態に戻ることに注意しましょう。これでは、たとえば 3 つのコミットのうち真ん中のコミットだけを戻したいといった複雑なことをするときには役に立ちません。このレッスンでは、このままにしておきましょう。 + +### リモートフォークにプッシュされたコミットを元に戻す + +ここまで来ると、実際には戻ることも巻き戻すこともできません。代わりに、削除したいコミットの効果を逆にするために、別のコミットをプッシュする必要があります。上記で紹介したツールを使って手動で行うこともできますが、これを簡単に行うことができる組み込みのコマンド、 `git revert` があります。これを使うと、指定した時点に変更を戻すコミットを自動的に作成することができます。 + +1. 最もシンプルな方法は、以下のコマンドを実行して、リモートブランチをコミット開始前の状態に戻すコミットを作成することです。 + + ```bash + git revert HEAD + ``` + +2. すると、コミットメッセージファイルが既定のテキストエディターで開かれるので、それを見て納得できるかどうか確認しましょう。これを閉じると、 git はコミットの作成を完了します。 +3. あとはプッシュする必要があるだけです。 + + ```bash + git push + ``` + +github.com でリモートフォークのページを再度見ると、元に戻したかったコミットと、それを元に戻したコミットが表示されています。 + +### もっと見たいですか? + +他にもこのトラブルシューティングガイドに情報を盛り込むべきだと思われる場合は、[課題を作成](https://github.com/mdn/content/issues/new)して提案してください。 + +## 関連情報 + +- [MDN 学習 > Git と GitHub](/ja/docs/Learn/Tools_and_testing/GitHub) +- [Dangit, Git](https://dangitgit.com/en) — その他の有用なトラブルシューティング技術 +- [45 Github Issues Dos and Don'ts](https://hackernoon.com/45-github-issues-dos-and-donts-dfec9ab4b612) +- [GitHub CLI tool](https://cli.github.com/) — リポジトリーの管理に git の CLI コマンドを使うことに慣れてきたら、 GitHub 独自の GitHub CLI ツールのインストールを検討してみてはいかがでしょうか。 diff --git a/files/ja/conflicting/mdn/community/issues/index.html b/files/ja/conflicting/mdn/community/issues/index.html deleted file mode 100644 index 06887b09a379fd..00000000000000 --- a/files/ja/conflicting/mdn/community/issues/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: GitHub 早見表 -slug: conflicting/MDN/Community/Issues -tags: - - Best practices - - Community - - GitHub - - MDN - - Beginners - - Cheatsheet - - Commands -original_slug: MDN/Contribute/GitHub_cheatsheet ---- -

{{MDNSidebar}}

- -

この記事では、 MDN に協力するために GitGitHub を使用する際に必要となる基本的なコマンドのクイックリファレンスを提供します。これらのツールに慣れておらず、助けが必要な場合は、全くの初心者のための GitHub チュートリアルで基本的なことを教えています。

- -

クローン

- -
git clone the-repo-url
- -

リモートをセットアップ

- -
git remote add remote-name repo-you-want-to-point-to
- -

リモートの一覧を表示

- -
git remote -v
- -

リポジトリに変更を加える準備

- -

メインブランチに切り替え

- -
git switch main
- -

メインブランチを更新

- -
git fetch remote-name
-git rebase remote-name/main
-git push
- -

ブランチをローカルに取得して切り替える

- -
git pull
-git switch new-branch
- -

最新のステータスを取得

- -
git status
- -

追加、コミット、変更をプッシュ

- -
git add path-to-changed-file
-git commit -m 'my commit message'
-git push
- -

トラブルシューティング

- -

コミットリストに追加されていないファイルに加えた変更を元に戻す

- -
git restore file-path
- -

コミットリストからファイルを削除

- -
git restore --staged file-path
- -

最後のコミットを取り消す

- -
git reset HEAD~1
- -

リモートフォークにプッシュされたコミットを元に戻す

- -
git revert HEAD
-git push
- -
-

Note

-

プルリクエストに入れたくないファイルを削除するには、 GitHub の UI を使う方法もあります。 github.com のプルリクエストのページに行き、 "Files changed" タブを開いてプルリクエストから削除したいファイルを探します。ページ内のファイルボックスの右上に「3つの点」 (...) のメニューが表示されます。このボタンを押して "Delete file" を選択してください。確認ページでは、新しいコミットのタイトルを入力し、"Commit directly... " チェックボックスが選択されていることを確認して、"Commit changes" ボタンを押してください。

-
- -

もっと見たいですか?

- -

この早見表にもっと多くのコマンドを載せるべきだと思われる場合は、 issue を作成して提案してください。

diff --git a/files/ja/conflicting/mdn/community/issues/index.md b/files/ja/conflicting/mdn/community/issues/index.md new file mode 100644 index 00000000000000..5fbba2cc00b861 --- /dev/null +++ b/files/ja/conflicting/mdn/community/issues/index.md @@ -0,0 +1,104 @@ +--- +title: GitHub 早見表 +slug: conflicting/MDN/Community/Issues +tags: + - Best practices + - Community + - GitHub + - MDN + - Beginners + - Cheatsheet + - Commands +original_slug: MDN/Contribute/GitHub_cheatsheet +--- +{{MDNSidebar}} + +この記事では、 MDN に協力するために [Git](https://git-scm.com/) と [GitHub](https://github.com/) を使用する際に必要となる基本的なコマンドのクイックリファレンスを提供します。これらのツールに慣れておらず、助けが必要な場合は、[全くの初心者のための GitHub](/ja/docs/MDN/Contribute/GitHub_beginners) チュートリアルで基本的なことを教えています。 + +## クローン + +```bash +git clone the-repo-url +``` + +## リモートをセットアップ + +```bash +git remote add remote-name repo-you-want-to-point-to +``` + +## リモートの一覧を表示 + +```bash +git remote -v +``` + +## リポジトリに変更を加える準備 + +### メインブランチに切り替え + +```bash +git switch main +``` + +### メインブランチを更新 + +```bash +git fetch remote-name +git rebase remote-name/main +git push +``` + +## ブランチをローカルに取得して切り替える + +```bash +git pull +git switch new-branch +``` + +## 最新のステータスを取得 + +```bash +git status +``` + +## 追加、コミット、変更をプッシュ + +```bash +git add path-to-changed-file +git commit -m 'my commit message' +git push +``` + +## トラブルシューティング + +### コミットリストに追加されていないファイルに加えた変更を元に戻す + +```bash +git restore file-path +``` + +### コミットリストからファイルを削除 + +```bash +git restore --staged file-path +``` + +### 最後のコミットを取り消す + +```bash +git reset HEAD~1 +``` + +### リモートフォークにプッシュされたコミットを元に戻す + +```bash +git revert HEAD +git push +``` + +> **Note:** #### Note プルリクエストに入れたくないファイルを削除するには、 GitHub の UI を使う方法もあります。 github.com のプルリクエストのページに行き、 "Files changed" タブを開いてプルリクエストから削除したいファイルを探します。ページ内のファイルボックスの右上に「3 つの点」 (`...`) のメニューが表示されます。このボタンを押して "Delete file" を選択してください。確認ページでは、新しいコミットのタイトルを入力し、"Commit directly... " チェックボックスが選択されていることを確認して、"Commit changes" ボタンを押してください。 + +## もっと見たいですか? + +この早見表にもっと多くのコマンドを載せるべきだと思われる場合は、 [issue を作成](https://github.com/mdn/content/issues/new)して提案してください。 diff --git a/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.html b/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.html deleted file mode 100644 index 53c50dd91c6557..00000000000000 --- a/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: alert ロールの使用 -slug: conflicting/Web/Accessibility/ARIA/Roles/alert_role -tags: - - ARIA - - Accessibility - - Advanced - - CSS - - Example - - HTML - - NeedsContent - - alert - - alert role - - alertrole - - alerts - - assitive technology - - role configuration - - wcag1.2.1 - - wcag3.3.1 -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role -original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role ---- -

説明

- -
-

alert ロールの使用方法についての技術デモとブラウザおよび支援技術に及ぼす影響の説明。

-
- -

alert ロールは重要かつ一般に時間的制約のあるメッセージをユーザーへ伝えるために使用されます。このロールが要素へ追加されたとき、ブラウザはアクセシブルなアラートイベントをユーザーに向けて通知可能な支援技術製品へ送信します。 アラートロールはユーザの注意を即座に必要とする場合において最も便利です、例えば:

- -
    -
  • 不正な値がフォームフィールドに入れられたとき
  • -
  • ユーザーのログインセッションが切れようとしているとき
  • -
  • サーバーとの接続が切れ、ローカルの変更が保存されないとき
  • -
- -

その押し付けがましい性質から、アラートロールはユーザーの注意を直ちに引く必要があるときにだけかつ控えめに使用されるべきです。 緊急度の低い動的な変更は、aria-live="polite" や他のライブリージョンロールなどのあまり積極的ではない方法を使うべきです。

- -

ユーザーエージェントと支援技術への影響

- -

アラートロールが要素へ追加されたとき、もしくはそのような要素が可視になったときにユーザーエージェントは以下のことを実行する必要があります:

- -
    -
  • オペレーティングシステムのアクセシビリティAPIにアラートロールを持った要素を公開します。
  • -
  • もしサポートしていればオペレーティングシステムのアクセシビリティAPIを使ったアクセシブルなアラートイベントを発火する。
  • -
- -

支援技術製品はそのようなイベントを監視し、それに応じてユーザへ通知すべきです:

- -
    -
  • スクリーンリーダーは現在のアウトプット(音声または点字関係なく)を妨害し、直ちにアラートメッセージをアナウンスもしくは表示すことがあります。
  • -
  • 画面拡大鏡はアラートが起こったこと、およびアラートテキストが何であるかを視覚的に示すことがあります。
  • -
- -
注釈: 支援技術がこの技術をどのように処理すべきかについては意見が異なる場合があります。上記の情報は意見の一つで、したがって標準ではありません。
- -

- -

例1: HTMLコードへのロールの追加

- -

下のスニペットは html ソースコードへどうのようにアラートロールが直接追加されるかを示しています。要素が読み込み完了した瞬間にスクリーンリーダーはアラートの通知をするはずです。ページが読み込み終わったとき、もし要素がすでにオリジナルのソースコードにあったら、スクリーンリーダーはページタイトルをアナウンスした後にすぐにエラーを知らせるでしょう。

- -
<h2 role="alert">Your form could not be submitted because of 3 validation errors.</h2>
- -

例2: 動的にアラートロールをもつ要素を追加

- -

このスニペットはアラートロールを持つ要素を動的に生成し、ドキュメント構造へ追加します。

- -
var myAlert = document.createElement("p");
-myAlert.setAttribute("role", "alert");
-var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.");
-myAlert.appendChild(myAlertText);
-document.body.appendChild(myAlert);
-
- -

注: jQuery のようなスクリプトライブラリを使ったときはより少ないコードで同じ結果を実現することができます:

- -
$("<p role='alert'>You must agree with our terms of service to create an account.</p>").appendTo(document.body);
-
- -

例3: 存在する要素へのアラートロールの追加

- -

時々新しい要素を作るよりもすでにページに見えている要素にアラートロールを追加するほうが便利なことがあります。これにより開発者はユーザーへより関連度や緊急性の高い情報を繰り返し表示することができます。例えば、フォームコントロールは期待値についての指示を持っているかもしれません。違う値が入力されたら、スクリーンリーダーがそれを警告としてアナウンスするために role="alert を指示文へ追加される場合があります。以下の疑似スニペットコードはこのアプローチを示しています:

- -
<p id="formInstruction">You must select at least 3 options</p>
-
- -
// When the user tries to submit the form with less than 3 checkboxes selected:
-document.getElementById("formInstruction").setAttribute("role", "alert");
- -

例4: アラートロールをもつ要素を表示する

- -

要素が既に role="alert" を持ち、CSS を使用して最初に非表示になっている場合、それを表示することはページにちょうど追加されたかのようにアラートをが発せられます。存在するアラートを何回も "再利用" できるということを意味しています。

- -

注: ほとんどのケースではこのアプローチは推奨されません、なぜなら現在適応できないエラーやアラート文を隠すことは理想的ではないからです。古い支援技術のユーザーは現在アラートが適応されてないときにもかかわらずアラート文を認識して、ユーザへ問題があると間違って信じこませてしまうかもしれません。

- -
.hidden {
-  display:none;
-}
-
- -
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes</p>
-
- -
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
-document.getElementById("expirationWarning").className = ""; 
- -

注記

- -
    -
  • 要素でのアラートロールの使用は要素が aria-live="assertive" を持っていることを意味します。
  • -
  • アラートロールは静的な文章のためにのみ使用されるべきです。アラートロールが使用された要素はフォーカスを受け取ることができず、スクリーンリーダーはキーボードフォーカスが現在位置している場所にかかわらずに自動的にアラートをアナウンスするかもしれません。
  • -
  • もしアラートが双方向のコントロール (ユーザが問題を修正できるフォームコントロールや、アラートを破棄する "OK" ボタンなど) を提供する場合、アラートダイアログロールを代わりに使用するべきです。
  • -
- -

使用される ARIA 属性

- - - -

関連 ARIA 技術

- - - -

互換性

- -

TBD: Add support information for common UA and AT product combinations

- -

その他のリソース

- - - -

diff --git a/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.md b/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.md new file mode 100644 index 00000000000000..ccb3a5b1498fda --- /dev/null +++ b/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.md @@ -0,0 +1,132 @@ +--- +title: alert ロールの使用 +slug: conflicting/Web/Accessibility/ARIA/Roles/alert_role +tags: + - ARIA + - Accessibility + - Advanced + - CSS + - Example + - HTML + - NeedsContent + - alert + - alert role + - alertrole + - alerts + - assitive technology + - role configuration + - wcag1.2.1 + - wcag3.3.1 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +### 説明 + +[alert](https://www.w3.org/TR/wai-aria-1.1/#alert) ロールの使用方法についての技術デモとブラウザおよび支援技術に及ぼす影響の説明。 + +alert ロールは重要かつ一般に時間的制約のあるメッセージをユーザーへ伝えるために使用されます。このロールが要素へ追加されたとき、ブラウザはアクセシブルなアラートイベントをユーザーに向けて通知可能な支援技術製品へ送信します。 アラートロールはユーザの注意を即座に必要とする場合において最も便利です、例えば: + +- 不正な値がフォームフィールドに入れられたとき +- ユーザーのログインセッションが切れようとしているとき +- サーバーとの接続が切れ、ローカルの変更が保存されないとき + +その押し付けがましい性質から、アラートロールはユーザーの注意を直ちに引く必要があるときにだけかつ控えめに使用されるべきです。 緊急度の低い動的な変更は、aria-live="polite" や他のライブリージョンロールなどのあまり積極的ではない方法を使うべきです。 + +### ユーザーエージェントと支援技術への影響 + +アラートロールが要素へ追加されたとき、もしくはそのような要素が可視になったときにユーザーエージェントは以下のことを実行する必要があります: + +- オペレーティングシステムのアクセシビリティ API にアラートロールを持った要素を公開します。 +- もしサポートしていればオペレーティングシステムのアクセシビリティ API を使ったアクセシブルなアラートイベントを発火する。 + +支援技術製品はそのようなイベントを監視し、それに応じてユーザへ通知すべきです: + +- スクリーンリーダーは現在のアウトプット(音声または点字関係なく)を妨害し、直ちにアラートメッセージをアナウンスもしくは表示すことがあります。 +- 画面拡大鏡はアラートが起こったこと、およびアラートテキストが何であるかを視覚的に示すことがあります。 + +> **Note:** **注釈:** 支援技術がこの技術をどのように処理すべきかについては意見が異なる場合があります。上記の情報は意見の一つで、したがって標準ではありません。 + +### 例 + +#### 例 1: HTML コードへのロールの追加 + +下のスニペットは html ソースコードへどうのようにアラートロールが直接追加されるかを示しています。要素が読み込み完了した瞬間にスクリーンリーダーはアラートの通知をするはずです。ページが読み込み終わったとき、もし要素がすでにオリジナルのソースコードにあったら、スクリーンリーダーはページタイトルをアナウンスした後にすぐにエラーを知らせるでしょう。 + +```html +

Your form could not be submitted because of 3 validation errors.

+``` + +#### 例 2: 動的にアラートロールをもつ要素を追加 + +このスニペットはアラートロールを持つ要素を動的に生成し、ドキュメント構造へ追加します。 + +```js +var myAlert = document.createElement("p"); +myAlert.setAttribute("role", "alert"); +var myAlertText = document.createTextNode("You must agree with our terms of service to create an account."); +myAlert.appendChild(myAlertText); +document.body.appendChild(myAlert); +``` + +**注:** jQuery のようなスクリプトライブラリを使ったときはより少ないコードで同じ結果を実現することができます: + +```js +$("

You must agree with our terms of service to create an account.

").appendTo(document.body); +``` + +#### 例 3: 存在する要素へのアラートロールの追加 + +時々新しい要素を作るよりもすでにページに見えている要素にアラートロールを追加するほうが便利なことがあります。これにより開発者はユーザーへより関連度や緊急性の高い情報を繰り返し表示することができます。例えば、フォームコントロールは期待値についての指示を持っているかもしれません。違う値が入力されたら、スクリーンリーダーがそれを警告としてアナウンスするために `role="alert` を指示文へ追加される場合があります。以下の疑似スニペットコードはこのアプローチを示しています: + +```html +

You must select at least 3 options

+``` + +```js +// When the user tries to submit the form with less than 3 checkboxes selected: +document.getElementById("formInstruction").setAttribute("role", "alert"); +``` + +#### 例 4: アラートロールをもつ要素を表示する + +要素が既に `role="alert"` を持ち、CSS を使用して最初に非表示になっている場合、それを表示することはページにちょうど追加されたかのようにアラートをが発せられます。存在するアラートを何回も "再利用" できるということを意味しています。 + +**注:** ほとんどのケースではこのアプローチは推奨されません、なぜなら現在適応できないエラーやアラート文を隠すことは理想的ではないからです。古い支援技術のユーザーは現在アラートが適応されてないときにもかかわらずアラート文を認識して、ユーザへ問題があると間違って信じこませてしまうかもしれません。 + +```css +.hidden { + display:none; +} +``` + +```html + +``` + +```js +// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert: +document.getElementById("expirationWarning").className = ""; +``` + +### 注記 + +- 要素でのアラートロールの使用は要素が `aria-live="assertive"` を持っていることを意味します。 +- アラートロールは静的な文章のためにのみ使用されるべきです。アラートロールが使用された要素はフォーカスを受け取ることができず、スクリーンリーダーはキーボードフォーカスが現在位置している場所にかかわらずに自動的にアラートをアナウンスするかもしれません。 +- もしアラートが双方向のコントロール (ユーザが問題を修正できるフォームコントロールや、アラートを破棄する "OK" ボタンなど) を提供する場合、[アラートダイアログ](/ja/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role "Using the alert role")ロールを代わりに使用するべきです。 + +### 使用される ARIA 属性 + +- [alert](https://www.w3.org/TR/wai-aria-1.1/#alert) + +### 関連 ARIA 技術 + +- [Using the alertdialog role](/ja/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role "en/ARIA/ARIA_Techniques/Using_the_alertdialog_role") +- [Using the aria-invalid property](/ja/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_property "Using the aria-invalid property") + +### 互換性 + +TBD: Add support information for common UA and AT product combinations + +### その他のリソース + +- ARIA Best Practices - Alert Role: diff --git a/files/ja/conflicting/web/accessibility/aria_184f054b1090ff5cd518146ac4e09122/index.html b/files/ja/conflicting/web/accessibility/aria_184f054b1090ff5cd518146ac4e09122/index.html deleted file mode 100644 index 87c4ac07b7a12a..00000000000000 --- a/files/ja/conflicting/web/accessibility/aria_184f054b1090ff5cd518146ac4e09122/index.html +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: ウェブアプリケーションと ARIA の FAQ -slug: conflicting/Web/Accessibility/ARIA_184f054b1090ff5cd518146ac4e09122 -tags: - - ARIA - - Accessibility - - Guide -translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ -original_slug: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ ---- -

ARIA とは何か

- -

WAI-ARIA は、 -W3CWeb Accessibility Initiative による、Accessible Rich Internet Applications の仕様です。 ARIA はウェブアプリケーションやウィジェットを、画面リーダーや拡大鏡などの支援技術を使用するユーザーを含む幅広いユーザーに対して、よりアクセス可能にする手段を提供します。

- -

ARIA はメニュー、スライダー、ツリー、ダイアログといった多くの一般的なユーザーインターフェイスの役割、状態、機能性を示す付加的な意味を与えます。また作者がページ上の目印、部分、グリッドを設定することを支援する、付加的な構造情報も与えます。ARIA は動的で JavaScript 駆動のアプリケーションやウィジェットを、さまざまなデスクトップベースの支援技術と対話可能にします。

- -

ARIA でアクセス可能なウィジェットを作成する方法について詳しくは、アクセス可能なウェブアプリケーションやウィジェットの概要をご覧ください。

- -

ARIA はどこで対応されているのか

- -

ARIA は比較的新しい仕様ですが、対応は進みつつあります。多種多様なよく使用されるブラウザー、支援技術、JavaScript ツールキットやアプリケーションが ARIA に対応しています。しかし、多くのユーザーがこれらの技術の古いバージョンを使用している可能性があります。古いブラウーザーや支援技術を良好にサポートするためには、先進的な拡張方法 (例えばマークアップに直接ではなく JavaScript を使用して ARIA を追加する) を使用して ARIA を実装したいと考えるでしょう。

- -

ブラウザー

- -

ARIA は以下のブラウザーが対応しています。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ブラウザー最低バージョン備考
Firefox3.0 以降NVDA、JAWS 10 以降、Orca で動作
Chrome最新Chrome 15 時点では、画面リーダーは実験的な対応
Safari4 以降Safari 5 での対応はとても改善されています。
- Live region の対応は、iOS5 または OS X Lion の VoiceOver と Safari 5 が必要です。
Opera9.5 以降OS X では VoiceOver が必要です。 TBD: 現在の状況はどうでしょうか?
Internet Explorer8 以降JAWS 10 以降や NVDA で動作します。NVDA では live region をサポートしません。
- IE9 での対応はとても改善されています。
- -

以前のバージョンでは ARIA の一部の機能しか対応していない場合があります。より詳しいブラウザーの互換性の表は、複数の情報源から得ることができます。

- - - -

支援技術

- -

支援技術は ARIA を順次採用してきています。その中の一部を紹介します。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
支援技術基本的な ARIA の最低バージョンlive region および alert の対応の最低バージョン
NVDA2010.2
- (NVDA のアップグレードは常に無償です)
Firefox 向けは 2011.1 で対応しました。2011.2 の時点で IE の live region の対応はありません。
Orca? (TBD)? (TBD)
VoiceOverOSX 10.5,
- iOS 4
OS X 10.7
- iOS 5
JAWS810
Window-Eyes7現在 live region には対応していません。
ZoomText?現在 live region には対応していません。
- -

注: これらツールの過去のバージョンは、ARIA の実装が部分的あるいはバグがある場合があります。

- -

JAWS 10 時点の、JAWS の ARIA 対応に関する注については、Paciello Group による記事、 JAWS Support for ARIA をご覧ください。

- -

JavaScript ツールキット

- -

ARIA のロール、ステート、プロパティは、以下のような多くのポピュラーな JavaScript ユーザーインターフェイスツールキットに追加されています:

- -
    -
  • Dojo/Dijit
  • -
  • jQuery UI
  • -
  • Fluid Infusion
  • -
  • Google Closure
  • -
  • Google Web Toolkit
  • -
  • BBC Glow
  • -
  • Yahoo! User Interface Library (YUI)
  • -
- -

JavaScript ツールキットのアクセシビリティに関する詳細情報:

- - - -

ARIA の実例を見せていただけますか

- -

はい。こちらがプログレスバーのウィジェットのマークアップです。

- -
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />
- -

このプログレスバーは <div> を使用して作られており、あまり説明的ではありません。残念ながら HTML 4 では開発者が使用できる、より意味がある要素はありませんので、ARIA のロールやプロパティを含めることが必要です。これらは、要素に属性を追加することによって指定します。この例では role="progressbar" 属性で、要素が実際は JavaScript で動作するプログレスバーウィジェットであることをブラウザーに伝えます。aria-valuemin 属性や aria-valuemax 属性はプログレスバーの最小値と最大値を、 aria-valuenow 属性は現在の状態を示します。

- -

ARIA の属性はマークアップ内に直接置くほかに、以下のような JavaScript コードを使用して要素へ追加および動的な更新を行うこともできます。

- -
// DOM でプログレスバーである <div> を探します。
-var progressBar = document.getElementById("percent-loaded");
-
-// どのようなウィジェットであるかを支援技術がわかるように、ARIA のロールやステートを設定します。
-progressBar.setAttribute("role", "progressbar");
-progressBar.setAttribute("aria-valuemin", 0);
-progressBar.setAttribute("aria-valuemax", 100);
-
-// プログレスバーの値を更新するたびに呼び出すことが可能な関数を作成します。
-function updateProgress(percentComplete) {
-  progressBar.setAttribute("aria-valuenow", percentComplete);
-}
- -

ARIA を追加するとページのスタイルや動作が変わりますか

- -

いいえ。ARIA は支援技術の API を使用可能にするだけであり、DOM やスタイルに関するブラウザーのネイティブ機能には影響を与えません。ブラウザーから見ると、ネイティブな HTML は要素のセマンティックな意味や動作を定義するものであり、ARIA の属性は AT API のサポートを支援するレイヤーとして機能します。ARIA の属性は他の HTML 属性と同様にスタイルを変更しませんが、CSS は要素のセレクタとして ARIA の属性を活用できます。これは、ARIA が有効なウィジェットにスタイルを設定するうえで便利な仕組みです。

- -
.tab-panel[aria-hidden="true"] {
-  display: none;
-  }
-
-.tab-panel[aria-hidden="false"] {
-  display: block;
-  }
-
- -

検証はどうなりますか

- -

role 属性や aria- 接頭辞がついた属性のような、ARIA で導入された新たな属性は、 HTML 4 や XHTML 4 の正式な一部分ではありません。その結果、ARIA を含むページは W3C の Markup Validator のようなツールで検証してはいけません。

- -

第一にこの問題の解決策になり得ることは、ARIA のロールやステートをマークアップ内に直接置くのを避けることです。代わりに、前出の ARIA の実例を見せていただけますか? への回答で示したように、JavaScript を使用してページへ動的に ARIA を追加してください。それでも理論上、ページは妥当ではありませんが、すべての静的な検証は正しく合格するでしょう。

- -

別の代案は HTML5 の doctype を使用することで、これは ARIA のサポートが組み込まれています。W3C の HTML5 validator は、あなたの HTML5 ページにおける ARIA の誤った使い方も発見するでしょう。

- -

HTML5 と ARIA との関係は?

- -

HTML5 では、役に立つ多くのセマンティックな要素を HTML に導入しました。これの要素のうちの一部は、新たな <progress> 要素のように、 ARIA で使用可能なロールに直接対応します。ブラウザーが ARIA にも存在する HTML5 要素に対応している場合は、通常その要素に ARIA のロールやステートも追加する必要はありません。ARIA には HTML5 で使用できない多くのロール、ステート、プロパティが含まれており、それらは HTML5 を使用する開発者にとって引き続き有用でしょう。詳細情報として、Steve Faulkner 氏が HTML5 と ARIA の関係について良い概説を記述しました。

- -

HTML5 から ARIA へのグレイスフルデグラデーション

- -

HTML5 が利用できないブラウザーにコンテンツを提供するときに、必要なところで ARIA の使用へグレイスフルデグラデーションを行いたいと考えるでしょう。プログレスバーの例で言うと、 <progressbar> 要素に対応していない場合は role="progressbar" へグレイスフルデグラデーションできます。

- -

こちらが、HTML5 のプログレスバーを使用するマークアップの例です。

- -
<!DOCTYPE html>
-<html>
-  <head><title>Gracefully degrading progress bar</title></head>
-  <body>
-    <progress id="progress-bar" value="0" max="100">0% complete</progress>
-    <button id="update-button">Update</button>
- </body>
-</html>
-
- -

そして、こちらが古いブラウザーでもプログレスバーが動作するようにする JavaScript コードです。

- -
var progressBar = document.getElementById("progress-bar");
-
-// ブラウザーが HTML5 の <progress> 要素に対応しているかを確認します。
-var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");
-
-function setupProgress() {
-  if (!supportsHTML5Progress) {
-    // HTML5 の <progress> にブラウザーが対応していないので、
-    // ARIA のロールやステートを要素に追加します。
-    progressBar.setAttribute("role", "progressbar");
-    progressBar.setAttribute("aria-valuemin", 0);
-    progressBar.setAttribute("aria-valuemax", 100);
-  }
-}
-
-function updateProgress(percentComplete) {
-  if (!supportsHTML5Progress) {
-    // HTML5 の <progress> にブラウザーが対応していないので、
-    // aria-valuenow 属性の更新が必要です。
-    progressBar.setAttribute("aria-valuenow", percentComplete);
-  } else {
-    // HTML5 の <progress> に対応しているので、代わりに value 属性を更新します。
-    progressBar.setAttribute("value", percentComplete);
-  }
-
-  progressBar.textContent = percentComplete + "% complete";
-}
-
-function initDemo() {
-  setupProgress(); // プログレスバーの設定。
-
-  // click ハンドラーをボタンに割り当てます。これはプログレスバーを 75% に更新します。
-  document.getElementById("update-button").addEventListener("click", function (e) {
-    updateProgress(75);
-    e.preventDefault();
-  }, false);
-}
-initDemo();
-
- -

支援技術はどのように動作しますか?

- -

支援技術は、アプリケーションのユーザーインターフェイスのロール、ステート、構造を表すよう特に設計された、各オペレーティングシステムに組み込まれた API を使用します。例えば、画面リーダーはテキスト読み上げエンジンでユーザーインターフェイスを読むために、拡大鏡はスクリーンで重要またはアクティブな領域を強調するために、オンスクリーンキーボードはそのときの状況や UI コントロールに対してもっとも効率的なキーボードレイアウトを提供するために、この API を使用します。さらに支援技術はたいてい、ページのセマンティクスや属性を理解するために、この API を通してページの DOM にアクセスします。

- -

ARIA は DOM の世界とデスクトップの世界との間を橋渡しします。ブラウザーは ARIA が有効な要素を、ネイティブなウィジェットであるかのように支援技術の API に公開します。その結果ユーザーは潜在的により一貫したユーザー体験を得て、そこではウェブの動的な JavaScript で動作するウィジェットが、デスクトップで同等のウィジェットに匹敵します。

- -

私の ARIA の使い方の確認方法は? 自由に使用できるツールはありますか?

- -

動作中の ARIA のテストを支援する、調査ツールやデバッグツールがいくつかあります。

- -
    -
  • Windows で Object Inspector
  • -
  • OS X で Accessibility Inspector
  • -
  • Linux で AccProbe
  • -
  • Firebug の DOM Inspector
  • -
  • Accessibility Inspector for Firebug
  • -
  • The Audits tab in Chrome DevTools
  • -
- -

ARIA の実践的なテストに使用できる、フリーまたはオープンソースの画面リーダーもいくつかあります。以下のようなものです:

- - - -

画面リーダーでテストを行うときは、2 つのポイントを覚えておいてください。

- -
    -
  1. 画面リーダーのユーザーと気軽にテストしても、実際のユーザーからのフィードバックやテスト、ヘルプにはかないません。
  2. -
  3. 画面リーダーのサポートだけがアクセシビリティではありません。様々なユーザビリティとアクセシビリティの手法でテストしてみてください。
  4. -
- -

ARIA が有効なアプリケーションやウィジェット向けの、その他の有用なテストツールや手法です。

- - - -

ARIA の議論はどこで行われていますか?

- - - -

ARIA についてより詳しく学ぶには

- - diff --git a/files/ja/conflicting/web/accessibility/aria_184f054b1090ff5cd518146ac4e09122/index.md b/files/ja/conflicting/web/accessibility/aria_184f054b1090ff5cd518146ac4e09122/index.md new file mode 100644 index 00000000000000..2dd39ef58e2e28 --- /dev/null +++ b/files/ja/conflicting/web/accessibility/aria_184f054b1090ff5cd518146ac4e09122/index.md @@ -0,0 +1,230 @@ +--- +title: ウェブアプリケーションと ARIA の FAQ +slug: conflicting/Web/Accessibility/ARIA_184f054b1090ff5cd518146ac4e09122 +tags: + - ARIA + - Accessibility + - Guide +translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +original_slug: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +--- +## ARIA とは何か + +WAI-ARIA は、 +[W3C](https://www.w3.org/) の Web Accessibility Initiative による、[Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria.php) の仕様です。 ARIA はウェブアプリケーションやウィジェットを、画面リーダーや拡大鏡などの支援技術を使用するユーザーを含む幅広いユーザーに対して、よりアクセス可能にする手段を提供します。 + +ARIA はメニュー、スライダー、ツリー、ダイアログといった多くの一般的なユーザーインターフェイスの役割、状態、機能性を示す付加的な意味を与えます。また作者がページ上の目印、部分、グリッドを設定することを支援する、付加的な構造情報も与えます。ARIA は動的で JavaScript 駆動のアプリケーションやウィジェットを、さまざまなデスクトップベースの支援技術と対話可能にします。 + +ARIA でアクセス可能なウィジェットを作成する方法について詳しくは、[アクセス可能なウェブアプリケーションやウィジェットの概要](/ja/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets)をご覧ください。 + +## ARIA はどこで対応されているのか + +ARIA は比較的新しい仕様ですが、対応は進みつつあります。多種多様なよく使用されるブラウザー、支援技術、JavaScript ツールキットやアプリケーションが ARIA に対応しています。しかし、多くのユーザーがこれらの技術の古いバージョンを使用している可能性があります。古いブラウーザーや支援技術を良好にサポートするためには、先進的な拡張方法 (例えばマークアップに直接ではなく JavaScript を使用して ARIA を追加する) を使用して ARIA を実装したいと考えるでしょう。 + +### ブラウザー + +ARIA は以下のブラウザーが対応しています。 + +| ブラウザー | 最低バージョン | 備考 | +| ------------------------------------------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------- | +| Firefox | 3.0 以降 | NVDA、JAWS 10 以降、Orca で動作 | +| [Chrome](https://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support) | 最新 | Chrome 15 時点では、画面リーダーは実験的な対応 | +| Safari | 4 以降 | Safari 5 での対応はとても改善されています。 Live region の対応は、iOS5 または OS X Lion の VoiceOver と Safari 5 が必要です。 | +| [Opera](https://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/) | 9.5 以降 | OS X では VoiceOver が必要です。 TBD: 現在の状況はどうでしょうか? | +| [Internet Explorer](https://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx) | 8 以降 | JAWS 10 以降や NVDA で動作します。NVDA では live region をサポートしません。 IE9 での対応はとても改善されています。 | + +以前のバージョンでは ARIA の一部の機能しか対応していない場合があります。より詳しいブラウザーの互換性の表は、複数の情報源から得ることができます。 + +- [caniuse.com](https://caniuse.com/wai-aria) +- [The Paciello Group](https://www.paciellogroup.com/blog/2012/02/rough-guide-browsers-operating-systems-and-screen-reader-support/) + +### 支援技術 + +支援技術は ARIA を順次採用してきています。その中の一部を紹介します。 + +| 支援技術 | 基本的な ARIA の最低バージョン | live region および alert の対応の最低バージョン | +| ----------- | -------------------------------------------- | -------------------------------------------------------------------------------------------- | +| NVDA | 2010.2 (NVDA のアップグレードは常に無償です) | Firefox 向けは 2011.1 で対応しました。2011.2 の時点で IE の live region の対応はありません。 | +| Orca | ? (TBD) | ? (TBD) | +| VoiceOver | OSX 10.5, iOS 4 | OS X 10.7 iOS 5 | +| JAWS | 8 | 10 | +| Window-Eyes | 7 | 現在 live region には対応していません。 | +| ZoomText | ? | 現在 live region には対応していません。 | + +注: これらツールの過去のバージョンは、ARIA の実装が部分的あるいはバグがある場合があります。 + +JAWS 10 時点の、JAWS の ARIA 対応に関する注については、Paciello Group による記事、 [JAWS Support for ARIA](https://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/) をご覧ください。 + +### JavaScript ツールキット + +ARIA のロール、ステート、プロパティは、以下のような多くのポピュラーな JavaScript ユーザーインターフェイスツールキットに追加されています: + +- Dojo/Dijit +- jQuery UI +- Fluid Infusion +- Google Closure +- Google Web Toolkit +- BBC Glow +- Yahoo! User Interface Library (YUI) + +JavaScript ツールキットのアクセシビリティに関する詳細情報: + +- Steve Faulkner 氏による [WAI-ARIA Implementation in JavaScript UI Libraries](https://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/) + +## ARIA の実例を見せていただけますか + +はい。こちらがプログレスバーのウィジェットのマークアップです。 + +```html +
+``` + +このプログレスバーは `
` を使用して作られており、あまり説明的ではありません。残念ながら HTML 4 では開発者が使用できる、より意味がある要素はありませんので、ARIA のロールやプロパティを含めることが必要です。これらは、要素に属性を追加することによって指定します。この例では `role="progressbar"` 属性で、要素が実際は JavaScript で動作するプログレスバーウィジェットであることをブラウザーに伝えます。**aria-valuemin** 属性や **aria-valuemax** 属性はプログレスバーの最小値と最大値を、 **aria-valuenow** 属性は現在の状態を示します。 + +ARIA の属性はマークアップ内に直接置くほかに、以下のような JavaScript コードを使用して要素へ追加および動的な更新を行うこともできます。 + +```js +// DOM でプログレスバーである
を探します。 +var progressBar = document.getElementById("percent-loaded"); + +// どのようなウィジェットであるかを支援技術がわかるように、ARIA のロールやステートを設定します。 +progressBar.setAttribute("role", "progressbar"); +progressBar.setAttribute("aria-valuemin", 0); +progressBar.setAttribute("aria-valuemax", 100); + +// プログレスバーの値を更新するたびに呼び出すことが可能な関数を作成します。 +function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); +} +``` + +## ARIA を追加するとページのスタイルや動作が変わりますか + +いいえ。ARIA は支援技術の API を使用可能にするだけであり、DOM やスタイルに関するブラウザーのネイティブ機能には影響を与えません。ブラウザーから見ると、ネイティブな HTML は要素のセマンティックな意味や動作を定義するものであり、ARIA の属性は AT API のサポートを支援するレイヤーとして機能します。ARIA の属性は他の HTML 属性と同様にスタイルを変更しませんが、CSS は要素のセレクタとして ARIA の属性を活用できます。これは、ARIA が有効なウィジェットにスタイルを設定するうえで便利な仕組みです。 + +```css +.tab-panel[aria-hidden="true"] { + display: none; + } + +.tab-panel[aria-hidden="false"] { + display: block; + } +``` + +## 検証はどうなりますか + +**role** 属性や **aria-** 接頭辞がついた属性のような、ARIA で導入された新たな属性は、 HTML 4 や XHTML 4 の正式な一部分ではありません。その結果、ARIA を含むページは [W3C の Markup Validator](https://validator.w3.org/) のようなツールで検証してはいけません。 + +第一にこの問題の解決策になり得ることは、ARIA のロールやステートをマークアップ内に直接置くのを避けることです。代わりに、前出の [ARIA の実例を見せていただけますか?](#aria-in-action) への回答で示したように、JavaScript を使用してページへ動的に ARIA を追加してください。それでも理論上、ページは妥当ではありませんが、すべての静的な検証は正しく合格するでしょう。 + +別の代案は HTML5 の doctype を使用することで、これは ARIA のサポートが組み込まれています。W3C の HTML5 validator は、あなたの HTML5 ページにおける ARIA の誤った使い方も発見するでしょう。 + +## HTML5 と ARIA との関係は? + +HTML5 では、役に立つ多くのセマンティックな要素を HTML に導入しました。これの要素のうちの一部は、新たな `` 要素のように、 ARIA で使用可能なロールに直接対応します。ブラウザーが ARIA にも存在する HTML5 要素に対応している場合は、通常その要素に ARIA のロールやステートも追加する必要はありません。ARIA には HTML5 で使用できない多くのロール、ステート、プロパティが含まれており、それらは HTML5 を使用する開発者にとって引き続き有用でしょう。詳細情報として、Steve Faulkner 氏が [HTML5 と ARIA の関係について良い概説](https://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/)を記述しました。 + +#### HTML5 から ARIA へのグレイスフルデグラデーション + +HTML5 が利用できないブラウザーにコンテンツを提供するときに、必要なところで ARIA の使用へグレイスフルデグラデーションを行いたいと考えるでしょう。プログレスバーの例で言うと、 `` 要素に対応していない場合は `role="progressbar"` へグレイスフルデグラデーションできます。 + +こちらが、HTML5 のプログレスバーを使用するマークアップの例です。 + +```html + + + Gracefully degrading progress bar + + 0% complete + + + +``` + +そして、こちらが古いブラウザーでもプログレスバーが動作するようにする JavaScript コードです。 + +```js +var progressBar = document.getElementById("progress-bar"); + +// ブラウザーが HTML5 の 要素に対応しているかを確認します。 +var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined"); + +function setupProgress() { + if (!supportsHTML5Progress) { + // HTML5 の にブラウザーが対応していないので、 + // ARIA のロールやステートを要素に追加します。 + progressBar.setAttribute("role", "progressbar"); + progressBar.setAttribute("aria-valuemin", 0); + progressBar.setAttribute("aria-valuemax", 100); + } +} + +function updateProgress(percentComplete) { + if (!supportsHTML5Progress) { + // HTML5 の にブラウザーが対応していないので、 + // aria-valuenow 属性の更新が必要です。 + progressBar.setAttribute("aria-valuenow", percentComplete); + } else { + // HTML5 の に対応しているので、代わりに value 属性を更新します。 + progressBar.setAttribute("value", percentComplete); + } + + progressBar.textContent = percentComplete + "% complete"; +} + +function initDemo() { + setupProgress(); // プログレスバーの設定。 + + // click ハンドラーをボタンに割り当てます。これはプログレスバーを 75% に更新します。 + document.getElementById("update-button").addEventListener("click", function (e) { + updateProgress(75); + e.preventDefault(); + }, false); +} +initDemo(); +``` + +## 支援技術はどのように動作しますか? + +支援技術は、アプリケーションのユーザーインターフェイスのロール、ステート、構造を表すよう特に設計された、各オペレーティングシステムに組み込まれた API を使用します。例えば、画面リーダーはテキスト読み上げエンジンでユーザーインターフェイスを読むために、拡大鏡はスクリーンで重要またはアクティブな領域を強調するために、オンスクリーンキーボードはそのときの状況や UI コントロールに対してもっとも効率的なキーボードレイアウトを提供するために、この API を使用します。さらに支援技術はたいてい、ページのセマンティクスや属性を理解するために、この API を通してページの DOM にアクセスします。 + +ARIA は DOM の世界とデスクトップの世界との間を橋渡しします。ブラウザーは ARIA が有効な要素を、ネイティブなウィジェットであるかのように支援技術の API に公開します。その結果ユーザーは潜在的により一貫したユーザー体験を得て、そこではウェブの動的な JavaScript で動作するウィジェットが、デスクトップで同等のウィジェットに匹敵します。 + +## 私の ARIA の使い方の確認方法は? 自由に使用できるツールはありますか? + +動作中の ARIA のテストを支援する、調査ツールやデバッグツールがいくつかあります。 + +- Windows で Object Inspector +- OS X で Accessibility Inspector +- Linux で AccProbe +- Firebug の DOM Inspector +- [Accessibility Inspector for Firebug](https://code.google.com/p/ainspector/) +- The Audits tab in Chrome DevTools + +ARIA の実践的なテストに使用できる、フリーまたはオープンソースの画面リーダーもいくつかあります。以下のようなものです: + +- Linux 向けの [Orca](https://live.gnome.org/Orca) +- Windows 向けの [NVDA](https://www.nvda-project.org/) +- OS X 内蔵の [VoiceOver](https://www.apple.com/accessibility/voiceover/) + +画面リーダーでテストを行うときは、2 つのポイントを覚えておいてください。 + +1. 画面リーダーのユーザーと気軽にテストしても、実際のユーザーからのフィードバックやテスト、ヘルプにはかないません。 +2. 画面リーダーのサポートだけがアクセシビリティではありません。様々なユーザビリティとアクセシビリティの手法でテストしてみてください。 + +ARIA が有効なアプリケーションやウィジェット向けの、その他の有用なテストツールや手法です。 + +- [Yahoo!'s ARIA bookmarklets](https://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html) +- Fluid Project の [simple accessibility evaluation techniques](https://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol) + +## ARIA の議論はどこで行われていますか? + +- [Wai-xtech mailing list](https://lists.w3.org/Archives/Public/wai-xtech/) -- ARIA 仕様で議論されてきたことを保持しています。 +- [Free-ARIA google group](https://groups.google.com/group/free-aria) -- 無料のツールやリソースの開発者およびユーザー向けです。 + +## ARIA についてより詳しく学ぶには + +- [アクセス可能なウェブアプリケーションやウィジェットの概要](/ja/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets) +- [Accessible forms](/ja/docs/Web/Accessibility/ARIA/forms) +- W3C の [WAI-ARIA Frequently Asked Questions](https://www.w3.org/WAI/aria/faq) +- WebAIM の [Accessibility of Rich Internet Applications](https://webaim.org/techniques/aria/) diff --git a/files/ja/conflicting/web/accessibility/aria_229a3bbc8da83524de32990b14561155/index.html b/files/ja/conflicting/web/accessibility/aria_229a3bbc8da83524de32990b14561155/index.html deleted file mode 100644 index f33e4adfedb16a..00000000000000 --- a/files/ja/conflicting/web/accessibility/aria_229a3bbc8da83524de32990b14561155/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: ウィジェット -slug: conflicting/Web/Accessibility/ARIA_229a3bbc8da83524de32990b14561155 -tags: - - Accessibility - - JavaScript - - Landing - - NeedsUpdate -translation_of: Web/Accessibility/ARIA/widgets -original_slug: Web/Accessibility/ARIA/widgets ---- -
警告: 更新が必要
- -

入門

- -

ここでは、アクセシブルな JavaScript ウィジェットを作るための実装例とベストプラクティスを見ていきます。

- -

一般リソース

- - - -

チェックボックス

- - - - - - - -

スライダー

- - - -

タブ

- - - - - - - -

フォーム検証

- - - -

- - diff --git a/files/ja/conflicting/web/accessibility/aria_229a3bbc8da83524de32990b14561155/index.md b/files/ja/conflicting/web/accessibility/aria_229a3bbc8da83524de32990b14561155/index.md new file mode 100644 index 00000000000000..3a3d7ddb9c94a8 --- /dev/null +++ b/files/ja/conflicting/web/accessibility/aria_229a3bbc8da83524de32990b14561155/index.md @@ -0,0 +1,57 @@ +--- +title: ウィジェット +slug: conflicting/Web/Accessibility/ARIA_229a3bbc8da83524de32990b14561155 +tags: + - Accessibility + - JavaScript + - Landing + - NeedsUpdate +translation_of: Web/Accessibility/ARIA/widgets +original_slug: Web/Accessibility/ARIA/widgets +--- +> **Warning:** 警告: 更新が必要 + +## 入門 + +ここでは、アクセシブルな JavaScript ウィジェットを作るための実装例とベストプラクティスを見ていきます。 + +## 一般リソース + +- [DHTML Style Guide](https://dev.aol.com/dhtml_style_guide) にはキーボードインタラクションのお勧めがあります。 +- [WAI-ARIA Authoring Practices Guide](https://www.w3.org/wai/pf/aria-practices) + +## チェックボックス + +- [ARIA Toggle Button and Tri-state Checkbox examples](https://www.paciellogroup.com/blog/?p=53) (from "The Paciello Group Blog") +- [ARIA Example Checkbox Widgets from the University of Illinois](http://test.cita.uiuc.edu/aria/checkbox) + +## メニュー + +- [Using WAI-ARIA Roles and States with the YUI Menu Control](http://yuiblog.com/blog/2007/12/21/menu-waiaria/) + +## スライダー + +- From the Paciello Group Blog: ARIA Slider, [part one](https://www.paciellogroup.com/blog/?p=68), [part two](https://www.paciellogroup.com/blog/?p=69), [part three](https://www.paciellogroup.com/blog/?p=76) ([example](https://www.paciellogroup.com/blog/misc/ARIA/slider/)) +- [Creating an Accessible, Internationalized Dojo Rating Widget](https://mindtrove.info/articles/creating-an-accessible-internationalized-dojo-rating-widget/) + +## タブ + +- [Enhancing TabView Accessibility with WAI-ARIA Roles and States](http://yuiblog.com/blog/2008/07/30/tabview-aria/), from the YUI blog +- [Enhancing the jQuery UI Tabs accordingly to WCAG 2.0 and ARIA](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/tabs) +- [Tab panel example here on CodeTalks](https://codetalks.org/source/widgets/tabpanel/tabpanel1.html) + +## ライトボックス + +- [WCAG 2.0 and ARIA-](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox)[conformant](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/table)[ lightbox application](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox) +- http://majx-js.digissime.net/js/popin/ + +## フォーム検証 + +- [WCAG 2.0 and ARIA-conformant live form validation](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular) + +## 表 + +- [German tutorial on creating an accessible form](https://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/) +- [Simple grid example at CodeTalks](https://codetalks.org/source/widgets/grid/grid.sample.html) +- [Date picker grid at CodeTalks](https://codetalks.org/source/widgets/datepicker/datepicker.sample.html) +- [WCAG 2.0 and ARIA-conformant sortable tables](https://wiki.github.com/fnagel/jQuery-Accessible-RIA/table) diff --git a/files/ja/conflicting/web/accessibility/index.html b/files/ja/conflicting/web/accessibility/index.html deleted file mode 100644 index 93a56991bc2c4d..00000000000000 --- a/files/ja/conflicting/web/accessibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: アクセシビリティ関連ドキュメントの索引 -slug: conflicting/Web/Accessibility -tags: - - Accessibility - - Index -translation_of: Web/Accessibility/Index -original_slug: Web/Accessibility/Index ---- -

このドキュメントは、Mozilla Developer Network サイト上の、すべてのアクセシビリティの記事へのリンクの一覧を提供します。

- -

{{Index("/ja/docs/Web/Accessibility")}}

diff --git a/files/ja/conflicting/web/accessibility/index.md b/files/ja/conflicting/web/accessibility/index.md new file mode 100644 index 00000000000000..e4c9922afca1b9 --- /dev/null +++ b/files/ja/conflicting/web/accessibility/index.md @@ -0,0 +1,12 @@ +--- +title: アクセシビリティ関連ドキュメントの索引 +slug: conflicting/Web/Accessibility +tags: + - Accessibility + - Index +translation_of: Web/Accessibility/Index +original_slug: Web/Accessibility/Index +--- +このドキュメントは、Mozilla Developer Network サイト上の、すべてのアクセシビリティの記事へのリンクの一覧を提供します。 + +{{Index("/ja/docs/Web/Accessibility")}} diff --git a/files/ja/conflicting/web/api/audiotracklist/addtrack_event/index.html b/files/ja/conflicting/web/api/audiotracklist/addtrack_event/index.html deleted file mode 100644 index f5158d836a8a84..00000000000000 --- a/files/ja/conflicting/web/api/audiotracklist/addtrack_event/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: AudioTrackList.onaddtrack -slug: conflicting/Web/API/AudioTrackList/addtrack_event -tags: - - API - - Adding Audio Tracks - - Adding Tracks - - Audio - - AudioTrackList - - Event Handler - - HTML DOM - - Media - - Property - - Reference - - addTrack - - onaddtrack - - track -translation_of: Web/API/AudioTrackList/onaddtrack -original_slug: Web/API/AudioTrackList/onaddtrack ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("AudioTrackList")}}onaddtrack プロパティは、{{event("addtrack")}} イベントが発生したときに呼び出されるイベントハンドラで、AudioTrackList が表す音声トラックを持つメディア要素に新しい音声トラックが追加されたことを示します。

- -

イベントは {{domxref("TrackEvent")}} オブジェクトの形でイベントハンドラに渡され、その {{domxref("TrackEvent.track", "track")}} プロパティは新しく追加されたトラックを識別します。

- -
-

: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、addtrack イベント用のハンドラを追加することもできます。

-
- -

構文

- -
AudioTrackList.onaddtrack = eventHandler;
- -

- -

onaddtrack は、 {{domxref("TrackEvent.track", "track")}} プロパティでどの音声トラックがメディアに追加されたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。

- -

使用上の注意

- -

{{event("addtrack")}} イベントは、音声トラックを AudioTrackList オブジェクトで表すメディア要素に新しいトラックが追加されるたびに呼び出されます。 これは、メディアが最初に要素に添付されたときにトラックが要素に追加されたときに発生します。 メディアリソース内の音声トラックごとに1つの addtrack イベントが発生します。

- -

- -

このスニペットは、新しく追加されたトラックを表す {{domxref("AudioTrack")}} オブジェクトを渡して、addToTrackList() 関数を呼び出す {{event("addtrack")}} イベントのハンドラを確立します。 このシナリオでは、その関数の役割は、選択可能な音声トラックのリストに新しいトラックを追加することです。

- -
document.querySelector("video").audioTracks.onaddtrack = function(event) {
-  addToTrackList(event.track);
-};
-
- -

仕様

- - - - - - - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-tracklist-onaddtrack', 'AudioTrackList.onaddtrack')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-onaddtrack', 'AudioTrackList.onaddtrack')}}{{Spec2('HTML5 W3C')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.AudioTrackList.onaddtrack")}}

- -

diff --git a/files/ja/conflicting/web/api/audiotracklist/addtrack_event/index.md b/files/ja/conflicting/web/api/audiotracklist/addtrack_event/index.md new file mode 100644 index 00000000000000..8d4c48eb497c2c --- /dev/null +++ b/files/ja/conflicting/web/api/audiotracklist/addtrack_event/index.md @@ -0,0 +1,62 @@ +--- +title: AudioTrackList.onaddtrack +slug: conflicting/Web/API/AudioTrackList/addtrack_event +tags: + - API + - Adding Audio Tracks + - Adding Tracks + - Audio + - AudioTrackList + - Event Handler + - HTML DOM + - Media + - Property + - Reference + - addTrack + - onaddtrack + - track +translation_of: Web/API/AudioTrackList/onaddtrack +original_slug: Web/API/AudioTrackList/onaddtrack +--- +{{APIRef("HTML DOM")}} + +**{{domxref("AudioTrackList")}}** の **`onaddtrack`** プロパティは、{{event("addtrack")}} イベントが発生したときに呼び出されるイベントハンドラで、`AudioTrackList` が表す音声トラックを持つメディア要素に新しい音声トラックが追加されたことを示します。 + +イベントは {{domxref("TrackEvent")}} オブジェクトの形でイベントハンドラに渡され、その {{domxref("TrackEvent.track", "track")}} プロパティは新しく追加されたトラックを識別します。 + +> **Note:** **注**: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、`addtrack` イベント用のハンドラを追加することもできます。 + +## 構文 + +``` +AudioTrackList.onaddtrack = eventHandler; +``` + +### 値 + +`onaddtrack` は、 {{domxref("TrackEvent.track", "track")}} プロパティでどの音声トラックがメディアに追加されたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。 + +## 使用上の注意 + +{{event("addtrack")}} イベントは、音声トラックを `AudioTrackList` オブジェクトで表すメディア要素に新しいトラックが追加されるたびに呼び出されます。 これは、メディアが最初に要素に添付されたときにトラックが要素に追加されたときに発生します。 メディアリソース内の音声トラックごとに 1 つの `addtrack` イベントが発生します。 + +## 例 + +このスニペットは、新しく追加されたトラックを表す {{domxref("AudioTrack")}} オブジェクトを渡して、`addToTrackList()` 関数を呼び出す {{event("addtrack")}} イベントのハンドラを確立します。 このシナリオでは、その関数の役割は、選択可能な音声トラックのリストに新しいトラックを追加することです。 + +```js +document.querySelector("video").audioTracks.onaddtrack = function(event) { + addToTrackList(event.track); +}; +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-tracklist-onaddtrack', 'AudioTrackList.onaddtrack')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-onaddtrack', 'AudioTrackList.onaddtrack')}} | {{Spec2('HTML5 W3C')}} | | + +## ブラウザーの互換性 + +{{Compat("api.AudioTrackList.onaddtrack")}} diff --git a/files/ja/conflicting/web/api/audiotracklist/change_event/index.html b/files/ja/conflicting/web/api/audiotracklist/change_event/index.html deleted file mode 100644 index c1bc11ade99608..00000000000000 --- a/files/ja/conflicting/web/api/audiotracklist/change_event/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: AudioTrackList.onchange -slug: conflicting/Web/API/AudioTrackList/change_event -tags: - - API - - Adding Audio Tracks - - Adding Tracks - - Audio - - AudioTrackList - - Event Handler - - HTML DOM - - Media - - Property - - Reference - - addTrack - - onchange - - track -translation_of: Web/API/AudioTrackList/onchange -original_slug: Web/API/AudioTrackList/onchange ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("AudioTrackList")}}onchange プロパティは、{{event("change")}} イベントが発生したときに呼び出されるイベントハンドラで、AudioTrackList 内の1つ以上の {{domxref("AudioTrack")}} が有効または無効になっていることを示します。

- -

イベントは {{domxref("Event")}} オブジェクトの形でイベントハンドラに渡されます。 イベントは追加情報を提供しません。 メディアのトラックの新しい状態を判断するには、それらの {{domxref("AudioTrack.enabled")}} フラグを調べる必要があります。

- -
-

: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、change イベントのハンドラを追加することもできます。

-
- -

構文

- -
AudioTrackList.onchange = eventHandler;
- -

- -

onchange は、メディア要素でトラックが有効または無効になったときに必ず呼び出される関数を設定します。

- -

- -

このスニペットは、リスト内の各トラックを調べる {{event("change")}} イベントのハンドラを確立し、トラックの現在の状態を示すユーザーインターフェイスコントロールの状態を更新する関数を呼び出します。

- -
var trackList = document.querySelector("video").audioTracks;
-
-trackList.onchange = function(event) {
-  trackList.forEach(function(track) {
-    updateTrackEnabledButton(track.id, track.enabled);
-  });
-};
-
- -

この例の updateTrackEnabledButton() は、トラックの {{domxref("AudioTrack.id", "id")}}(おそらくアプリはトラック ID をコントロール要素の ID として使用します)でユーザーインターフェイスコントロールを見つけて、トラックの {{domxref("AudioTrack.enabled", "enabled")}} フラグを使用してコントロールが現在どの状態にあるべきかを決定する関数です。

- -

仕様

- - - - - - - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-tracklist-onchange', 'AudioTrackList.onchange')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-onchange', 'AudioTrackList.onchange')}}{{Spec2('HTML5 W3C')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.AudioTrackList.onchange")}}

diff --git a/files/ja/conflicting/web/api/audiotracklist/change_event/index.md b/files/ja/conflicting/web/api/audiotracklist/change_event/index.md new file mode 100644 index 00000000000000..a009155a0ecb3a --- /dev/null +++ b/files/ja/conflicting/web/api/audiotracklist/change_event/index.md @@ -0,0 +1,64 @@ +--- +title: AudioTrackList.onchange +slug: conflicting/Web/API/AudioTrackList/change_event +tags: + - API + - Adding Audio Tracks + - Adding Tracks + - Audio + - AudioTrackList + - Event Handler + - HTML DOM + - Media + - Property + - Reference + - addTrack + - onchange + - track +translation_of: Web/API/AudioTrackList/onchange +original_slug: Web/API/AudioTrackList/onchange +--- +{{APIRef("HTML DOM")}} + +**{{domxref("AudioTrackList")}}** の **`onchange`** プロパティは、{{event("change")}} イベントが発生したときに呼び出されるイベントハンドラで、`AudioTrackList` 内の 1 つ以上の {{domxref("AudioTrack")}} が有効または無効になっていることを示します。 + +イベントは {{domxref("Event")}} オブジェクトの形でイベントハンドラに渡されます。 イベントは追加情報を提供しません。 メディアのトラックの新しい状態を判断するには、それらの {{domxref("AudioTrack.enabled")}} フラグを調べる必要があります。 + +> **Note:** **注**: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、`change` イベントのハンドラを追加することもできます。 + +## 構文 + +``` +AudioTrackList.onchange = eventHandler; +``` + +### 値 + +`onchange` は、メディア要素でトラックが有効または無効になったときに必ず呼び出される関数を設定します。 + +## 例 + +このスニペットは、リスト内の各トラックを調べる {{event("change")}} イベントのハンドラを確立し、トラックの現在の状態を示すユーザーインターフェイスコントロールの状態を更新する関数を呼び出します。 + +```js +var trackList = document.querySelector("video").audioTracks; + +trackList.onchange = function(event) { + trackList.forEach(function(track) { + updateTrackEnabledButton(track.id, track.enabled); + }); +}; +``` + +この例の `updateTrackEnabledButton()` は、トラックの {{domxref("AudioTrack.id", "id")}}(おそらくアプリはトラック ID をコントロール要素の ID として使用します)でユーザーインターフェイスコントロールを見つけて、トラックの {{domxref("AudioTrack.enabled", "enabled")}} フラグを使用してコントロールが現在どの状態にあるべきかを決定する関数です。 + +## 仕様 + +| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-tracklist-onchange', 'AudioTrackList.onchange')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-onchange', 'AudioTrackList.onchange')}} | {{Spec2('HTML5 W3C')}} | | + +## ブラウザーの互換性 + +{{Compat("api.AudioTrackList.onchange")}} diff --git a/files/ja/conflicting/web/api/audiotracklist/removetrack_event/index.html b/files/ja/conflicting/web/api/audiotracklist/removetrack_event/index.html deleted file mode 100644 index ab4f224d6b3010..00000000000000 --- a/files/ja/conflicting/web/api/audiotracklist/removetrack_event/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: AudioTrackList.onremovetrack -slug: conflicting/Web/API/AudioTrackList/removetrack_event -tags: - - API - - Audio - - AudioTrackList - - Event Handler - - HTML DOM - - Media - - Property - - Reference - - Removing Audio Tracks - - Removing Tracks - - onremovetrack - - remove - - removeTrack - - track -translation_of: Web/API/AudioTrackList/onremovetrack -original_slug: Web/API/AudioTrackList/onremovetrack ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("AudioTrackList")}}onremovetrack イベントハンドラは、{{event("removetrack")}} イベントが発生したときに呼び出され、音声トラックがメディア要素から、したがって AudioTrackList からも取り除かれたことを示します。

- -

イベントは {{domxref("TrackEvent")}} オブジェクトの形式でイベントハンドラに渡されます。 その {{domxref("TrackEvent.track", "track")}} プロパティは、メディア要素の AudioTrackList から取り除かれたトラックを識別します。

- -
-

: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、removetrack イベント用のハンドラを追加することもできます。

-
- -

構文

- -
AudioTrackList.onremovetrack = eventHandler;
- -

- -

onremovetrack は、{{domxref("TrackEvent.track", "track")}} プロパティでどの音声トラックがメディア要素から取り除かれたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。

- -

- -

この単純な例は、トラックがメディア要素から取り除かれるたびに、メディア要素内の現在の音声トラック数を取得するだけです。

- -
document.querySelector("my-video").audioTracks.onremovetrack = function(event) {
-  myTrackCount = document.querySelector("my-video").audioTracks.length;
-};
-
- -

メディア要素に残っている現在の音声トラック数は、AudioTrackList の {{domxref("AudioTrackList.length", "length")}} プロパティから取得します。

- -

仕様

- - - - - - - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-tracklist-onremovetrack', 'AudioTrackList.onremovetrack')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-onremovetrack', 'AudioTrackList.onremovetrack')}}{{Spec2('HTML5 W3C')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.AudioTrackList.onremovetrack")}}

diff --git a/files/ja/conflicting/web/api/audiotracklist/removetrack_event/index.md b/files/ja/conflicting/web/api/audiotracklist/removetrack_event/index.md new file mode 100644 index 00000000000000..66e4747acda702 --- /dev/null +++ b/files/ja/conflicting/web/api/audiotracklist/removetrack_event/index.md @@ -0,0 +1,61 @@ +--- +title: AudioTrackList.onremovetrack +slug: conflicting/Web/API/AudioTrackList/removetrack_event +tags: + - API + - Audio + - AudioTrackList + - Event Handler + - HTML DOM + - Media + - Property + - Reference + - Removing Audio Tracks + - Removing Tracks + - onremovetrack + - remove + - removeTrack + - track +translation_of: Web/API/AudioTrackList/onremovetrack +original_slug: Web/API/AudioTrackList/onremovetrack +--- +{{APIRef("HTML DOM")}} + +**{{domxref("AudioTrackList")}}** の **`onremovetrack`** イベントハンドラは、{{event("removetrack")}} イベントが発生したときに呼び出され、音声トラックがメディア要素から、したがって `AudioTrackList` からも取り除かれたことを示します。 + +イベントは {{domxref("TrackEvent")}} オブジェクトの形式でイベントハンドラに渡されます。 その {{domxref("TrackEvent.track", "track")}} プロパティは、メディア要素の `AudioTrackList` から取り除かれたトラックを識別します。 + +> **Note:** **注**: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、`removetrack` イベント用のハンドラを追加することもできます。 + +## 構文 + +``` +AudioTrackList.onremovetrack = eventHandler; +``` + +### 値 + +`onremovetrack` は、{{domxref("TrackEvent.track", "track")}} プロパティでどの音声トラックがメディア要素から取り除かれたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。 + +## 例 + +この単純な例は、トラックがメディア要素から取り除かれるたびに、メディア要素内の現在の音声トラック数を取得するだけです。 + +```js +document.querySelector("my-video").audioTracks.onremovetrack = function(event) { + myTrackCount = document.querySelector("my-video").audioTracks.length; +}; +``` + +メディア要素に残っている現在の音声トラック数は、`AudioTrackList` の {{domxref("AudioTrackList.length", "length")}} プロパティから取得します。 + +## 仕様 + +| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-tracklist-onremovetrack', 'AudioTrackList.onremovetrack')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'embedded-content-0.html#dom-audiotracklist-onremovetrack', 'AudioTrackList.onremovetrack')}} | {{Spec2('HTML5 W3C')}} | | + +## ブラウザーの互換性 + +{{Compat("api.AudioTrackList.onremovetrack")}} diff --git a/files/ja/conflicting/web/api/broadcastchannel/message_event/index.html b/files/ja/conflicting/web/api/broadcastchannel/message_event/index.html deleted file mode 100644 index 7a13d720bb8e96..00000000000000 --- a/files/ja/conflicting/web/api/broadcastchannel/message_event/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: BroadcastChannel.onmessage -slug: conflicting/Web/API/BroadcastChannel/message_event -tags: - - API - - Broadcast Channel API - - BroadcastChannel - - Event Handler - - Experimental - - HTML API - - Property - - Reference -translation_of: Web/API/BroadcastChannel/onmessage -original_slug: Web/API/BroadcastChannel/onmessage ---- -

{{APIRef("BroadCastChannel API")}}

- -

BroadcastChannel.onmessage イベントハンドラは、{{domxref("MessageEvent")}} 型の {{event("message")}} イベントがこの {{domxref("BroadcastChannel")}} によって受信されたときに実行する関数を指定するプロパティです。 このようなイベントは、チャネルに放送されるメッセージとともにブラウザーによって送信されます。

- -

{{AvailableInWorkers}}

- -

構文

- -
channel.onmessage = function;
-
- -

Values

- -
    -
  • function は、接尾辞 () もパラメーターも含まないユーザー定義関数の名前や、 function(event) {...} などの無名関数宣言です。 イベントハンドラには、イベントを含む単一のパラメータが常に1つあります。 ここでは {{domxref("MessageEvent")}} 型です。
  • -
- -

- -
bc.onmessage = function(ev) { console.log('message event received!'); };
-
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', "comms.html#handler-broadcastchannel-onmessage", "BroadcastChannel.onmessage")}}{{Spec2('HTML WHATWG')}}Initial definition.
- -

ブラウザーの互換性

- - - -

{{Compat("api.BroadcastChannel.onmessage")}}

- -

関連情報

- -
    -
  • ブラウザコンテキスト間でやり取りするもう1つの、よりヘビー級の方法: {{domxref("ServiceWorker")}}
  • -
diff --git a/files/ja/conflicting/web/api/broadcastchannel/message_event/index.md b/files/ja/conflicting/web/api/broadcastchannel/message_event/index.md new file mode 100644 index 00000000000000..c0c4eea126dbd9 --- /dev/null +++ b/files/ja/conflicting/web/api/broadcastchannel/message_event/index.md @@ -0,0 +1,50 @@ +--- +title: BroadcastChannel.onmessage +slug: conflicting/Web/API/BroadcastChannel/message_event +tags: + - API + - Broadcast Channel API + - BroadcastChannel + - Event Handler + - Experimental + - HTML API + - Property + - Reference +translation_of: Web/API/BroadcastChannel/onmessage +original_slug: Web/API/BroadcastChannel/onmessage +--- +{{APIRef("BroadCastChannel API")}} + +**`BroadcastChannel.onmessage`** イベントハンドラは、{{domxref("MessageEvent")}} 型の {{event("message")}} イベントがこの {{domxref("BroadcastChannel")}} によって受信されたときに実行する関数を指定するプロパティです。 このようなイベントは、チャネルに放送されるメッセージとともにブラウザーによって送信されます。 + +{{AvailableInWorkers}} + +## 構文 + +``` +channel.onmessage = function; +``` + +### Values + +- `function` は、接尾辞 `()` もパラメーターも含まないユーザー定義関数の名前や、 `function(event) {...}` などの無名関数宣言です。 イベントハンドラには、イベントを含む単一のパラメータが常に 1 つあります。 ここでは {{domxref("MessageEvent")}} 型です。 + +## 例 + +```js +bc.onmessage = function(ev) { console.log('message event received!'); }; +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('HTML WHATWG', "comms.html#handler-broadcastchannel-onmessage", "BroadcastChannel.onmessage")}} | {{Spec2('HTML WHATWG')}} | Initial definition. | + +## ブラウザーの互換性 + +{{Compat("api.BroadcastChannel.onmessage")}} + +## 関連情報 + +- ブラウザコンテキスト間でやり取りするもう 1 つの、よりヘビー級の方法: {{domxref("ServiceWorker")}} diff --git a/files/ja/conflicting/web/api/broadcastchannel/messageerror_event/index.html b/files/ja/conflicting/web/api/broadcastchannel/messageerror_event/index.html deleted file mode 100644 index 9ca1e5ce38d981..00000000000000 --- a/files/ja/conflicting/web/api/broadcastchannel/messageerror_event/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: BroadcastChannel.onmessageerror -slug: conflicting/Web/API/BroadcastChannel/messageerror_event -tags: - - API - - BroadcastChannel - - Event Handler - - Property - - Reference - - onmessageerror -translation_of: Web/API/BroadcastChannel/onmessageerror -original_slug: Web/API/BroadcastChannel/onmessageerror ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("BroadcastChannel")}} インタフェース の onmessageerror イベントハンドラは {{domxref("EventListener")}} であり、messageerror 型の {{domxref("MessageEvent")}} が BroadcastChannel インスタンスで発生するたびに、つまり{{glossary("Deserialization", "逆シリアル化")}}できないメッセージを受信すると呼び出されます。

- -

{{AvailableInWorkers}}

- -

構文

- -
bc.onmessageerror = function() { ... };
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-broadcastchannel-onmessageerror', 'onmessageerror')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザーの互換性

- -
- - -

{{Compat("api.BroadcastChannel.onmessageerror")}}

-
- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/broadcastchannel/messageerror_event/index.md b/files/ja/conflicting/web/api/broadcastchannel/messageerror_event/index.md new file mode 100644 index 00000000000000..c135496caa2c2d --- /dev/null +++ b/files/ja/conflicting/web/api/broadcastchannel/messageerror_event/index.md @@ -0,0 +1,38 @@ +--- +title: BroadcastChannel.onmessageerror +slug: conflicting/Web/API/BroadcastChannel/messageerror_event +tags: + - API + - BroadcastChannel + - Event Handler + - Property + - Reference + - onmessageerror +translation_of: Web/API/BroadcastChannel/onmessageerror +original_slug: Web/API/BroadcastChannel/onmessageerror +--- +{{APIRef("HTML DOM")}} + +{{domxref("BroadcastChannel")}} インタフェース の **`onmessageerror`** イベントハンドラは {{domxref("EventListener")}} であり、`messageerror` 型の {{domxref("MessageEvent")}} が `BroadcastChannel` インスタンスで発生するたびに、つまり{{glossary("Deserialization", "逆シリアル化")}}できないメッセージを受信すると呼び出されます。 + +{{AvailableInWorkers}} + +## 構文 + +``` +bc.onmessageerror = function() { ... }; +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-broadcastchannel-onmessageerror', 'onmessageerror')}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザーの互換性 + +{{Compat("api.BroadcastChannel.onmessageerror")}} + +## 関連情報 + +- [Channel Messaging の使用](/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging) diff --git a/files/ja/conflicting/web/api/btoa/index.html b/files/ja/conflicting/web/api/btoa/index.html deleted file mode 100644 index 2b739b188e80b9..00000000000000 --- a/files/ja/conflicting/web/api/btoa/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: バイナリー文字列 -slug: conflicting/Web/API/btoa -tags: - - DOM - - JavaScript - - JavaScript typed arrays - - JavaScript 型付き配列 - - Reference - - String -translation_of: Web/API/DOMString/Binary -original_slug: Web/API/DOMString/Binary ---- -

{{jsxref("String", "JavaScript の文字列")}} は、UTF-16 でエンコードされた文字列です。つまり、コードの最小単位はメモリー上に 2 バイトを必要とし、65535 通りのコードポイントを表現できます。この文字列のある部分集合として、ASCII 文字 (つまりコードポイントが 127 を超えない文字) だけを含む UTF-16 文字列というものが考えられます。例えば、文字列 "Hello world!" は、この ASCII 部分集合に含まれますが、文字列 "ÀÈÌÒÙ" はそうではありません。バイナリー文字列とは、この ASCII 部分集合と似た概念ですが、コードポイントを 127 までではなく、255 まで許可するものです。しかし、その目的は文字列を表現することではなく、バイナリーデータを表現することです。この方法で表現されるデータの大きさは、バイナリーのままに比べて 2 倍になりますが、JavaScript の文字列の長さは 2 バイトを一つの単位として計算されるため、その大きさがユーザーの目に触れることはありません。

- -

バイナリー文字列は、JavaScript の言語設計には含まれていません。しかし、バイナリー文字列を入力として受け取るネイティブ関数が少なくとも一つあり、それは {{domxref("WindowBase64.btoa","btoa()")}} です。コードポイントが 255 を超える文字列を使ってこの関数を実行すると、Character Out Of Range エラーが発生します。

- -

uint8 の数値の代わりに UTF-16 のコード単位を使うようになった理由は、ウェブアプリケーションがどんどん強力になっていくにつれて (音声や映像の処理や、WebSockets を使った生データへのアクセスなどができるようになりました)、JavaScript コードが生のバイナリーデータを迅速かつ容易に処理できれば便利である場面があることが明らかになったからです。

- -

かつては、バイナリーデータを扱うには、データを文字列として扱い、charCodeAt() メソッドを使ってデータバッファー (つまりバイナリー文字列) からバイトを読むといった、模擬的な方法によらざるを得ませんでした。しかしこの方法は遅く、複数回の変換が必要になるため、エラーも起こしやすいものでした (特にバイナリーデータの構造が実際にはバイト単位ではなく、例えば 32 ビットの整数や実数である場合)。

- -

JavaScript 型付き配列 を使えば、より効率的に生のバイナリーデータを処理することができます。また、StringView 非ネイティブ コンストラクターは、型付き配列の 1 レベル上であり、C言語 に似た文字列用のインターフェイスを提供します。

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/btoa/index.md b/files/ja/conflicting/web/api/btoa/index.md new file mode 100644 index 00000000000000..fd7ce14ef0ada3 --- /dev/null +++ b/files/ja/conflicting/web/api/btoa/index.md @@ -0,0 +1,29 @@ +--- +title: バイナリー文字列 +slug: conflicting/Web/API/btoa +tags: + - DOM + - JavaScript + - JavaScript typed arrays + - JavaScript 型付き配列 + - Reference + - String +translation_of: Web/API/DOMString/Binary +original_slug: Web/API/DOMString/Binary +--- +{{jsxref("String", "JavaScript の文字列")}} は、UTF-16 でエンコードされた文字列です。つまり、コードの最小単位はメモリー上に 2 バイトを必要とし、`65535` 通りのコードポイントを表現できます。この文字列のある部分集合として、ASCII 文字 (つまりコードポイントが `127` を超えない文字) だけを含む UTF-16 文字列というものが考えられます。例えば、文字列 `"Hello world!"` は、この ASCII 部分集合に含まれますが、文字列 `"ÀÈÌÒÙ"` はそうではありません。**バイナリー文字列**とは、この ASCII 部分集合と似た概念ですが、コードポイントを `127` までではなく、`255` まで許可するものです。しかし、その目的は文字列を表現することではなく、バイナリーデータを表現することです。この方法で表現されるデータの大きさは、バイナリーのままに比べて 2 倍になりますが、JavaScript の文字列の長さは 2 バイトを一つの単位として計算されるため、その大きさがユーザーの目に触れることはありません。 + +バイナリー文字列は、JavaScript の言語設計には含まれていません。しかし、バイナリー文字列を入力として受け取るネイティブ関数が少なくとも一つあり、それは {{domxref("WindowBase64.btoa","btoa()")}} です。コードポイントが `255` を超える文字列を使ってこの関数を実行すると、`Character Out Of Range` エラーが発生します。 + +`uint8` の数値の代わりに UTF-16 のコード単位を使うようになった理由は、ウェブアプリケーションがどんどん強力になっていくにつれて (音声や映像の処理や、WebSockets を使った生データへのアクセスなどができるようになりました)、JavaScript コードが生のバイナリーデータを迅速かつ容易に処理できれば便利である場面があることが明らかになったからです。 + +かつては、バイナリーデータを扱うには、データを[文字列](/ja/docs/JavaScript/Reference/Global_Objects/String)として扱い、[`charCodeAt()`](/ja/docs/JavaScript/Reference/Global_Objects/String/charCodeAt) メソッドを使ってデータバッファー (つまりバイナリー文字列) からバイトを読むといった、模擬的な方法によらざるを得ませんでした。しかしこの方法は遅く、複数回の変換が必要になるため、エラーも起こしやすいものでした (特にバイナリーデータの構造が実際にはバイト単位ではなく、例えば 32 ビットの整数や実数である場合)。 + +[JavaScript 型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) を使えば、より効率的に生のバイナリーデータを処理することができます。また、[`StringView`](/ja/docs/Web/JavaScript/Typed_arrays/StringView) 非ネイティブ コンストラクターは、型付き配列の 1 レベル上であり、[C 言語](https://ja.wikipedia.org/wiki/C%E8%A8%80%E8%AA%9E) に似た文字列用のインターフェイスを提供します。 + +## 関連情報 + +- [JavaScript 型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) +- [`DOMString`](/ja/docs/Web/API/DOMString) +- [String](/ja/docs/Web/JavaScript/Reference/Global_Objects/String) +- [`StringView`](/ja/docs/Web/JavaScript/Typed_arrays/StringView) diff --git a/files/ja/conflicting/web/api/caches/index.html b/files/ja/conflicting/web/api/caches/index.html deleted file mode 100644 index 4379e332cf4745..00000000000000 --- a/files/ja/conflicting/web/api/caches/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ServiceWorkerGlobalScope.caches -slug: conflicting/Web/API/caches -tags: - - API - - Property - - Reference - - Service Workers - - ServiceWorker - - ServiceWorkerGlobalScope -translation_of: Web/API/ServiceWorkerGlobalScope/caches -original_slug: Web/API/ServiceWorkerGlobalScope/caches ---- -

{{APIRef("Service Workers API")}}

- -

{{domxref("ServiceWorkerGlobalScope")}} インターフェイスの caches 読み取り専用プロパティは、サービスワーカーに関連する {{domxref("CacheStorage")}} オブジェクトを返します。

- -

構文

- -
var myCacheStorage = self.caches;
-
- -

- -

{{domxref("CacheStorage")}} オブジェクト。

- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Service Workers', '#global-caches', 'ServiceWorkerGlobalScope.caches')}}{{Spec2('Service Workers')}}初期定義
- -

ブラウザーの互換性

- -
- - -

{{Compat("api.ServiceWorkerGlobalScope.caches")}}

-
- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/caches/index.md b/files/ja/conflicting/web/api/caches/index.md new file mode 100644 index 00000000000000..3ad19c6619c009 --- /dev/null +++ b/files/ja/conflicting/web/api/caches/index.md @@ -0,0 +1,44 @@ +--- +title: ServiceWorkerGlobalScope.caches +slug: conflicting/Web/API/caches +tags: + - API + - Property + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerGlobalScope +translation_of: Web/API/ServiceWorkerGlobalScope/caches +original_slug: Web/API/ServiceWorkerGlobalScope/caches +--- +{{APIRef("Service Workers API")}} + +{{domxref("ServiceWorkerGlobalScope")}} インターフェイスの **`caches`** 読み取り専用プロパティは、サービスワーカーに関連する {{domxref("CacheStorage")}} オブジェクトを返します。 + +## 構文 + +``` +var myCacheStorage = self.caches; +``` + +### 値 + +{{domxref("CacheStorage")}} オブジェクト。 + +## 仕様 + +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------- | +| {{SpecName('Service Workers', '#global-caches', 'ServiceWorkerGlobalScope.caches')}} | {{Spec2('Service Workers')}} | 初期定義 | + +## ブラウザーの互換性 + +{{Compat("api.ServiceWorkerGlobalScope.caches")}} + +## 関連情報 + +- [Service worker の使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [サービスワーカーの基本的なコード例](https://github.com/mdn/sw-test)(英語) +- [ServiceWorker の準備はできていますか?](https://jakearchibald.github.io/isserviceworkerready/)(英語) +- {{jsxref("Promise")}} +- [Web worker の使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) diff --git a/files/ja/conflicting/web/api/credentialscontainer/create/index.html b/files/ja/conflicting/web/api/credentialscontainer/create/index.html deleted file mode 100644 index 7203131ea61451..00000000000000 --- a/files/ja/conflicting/web/api/credentialscontainer/create/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: PublicKeyCredentialCreationOptions.excludeCredentials -slug: conflicting/Web/API/CredentialsContainer/create -tags: - - API - - Property - - PublicKeyCredentialCreationOptions - - Reference - - Web Authentication API - - WebAuthn - - プロパティ -translation_of: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials -original_slug: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials ---- -
{{APIRef("Web Authentication API")}}{{securecontext_header}}
- -

excludeCredentials は {{domxref("PublicKeyCredentialCreationOptions")}} 辞書の任意のプロパティであり、指定されたユーザーに既に存在する公開鍵の記述子を要素に持つ {{jsxref("Array")}} オブジェクトです。これは既存のユーザーに新しい認証情報を生成することを避けたい場合、パーティのサーバーから提供されます。

- -

構文

- -
excludeCredentials = publicKeyCredentialCreationOptions.excludeCredentials
- -

- -

{{jsxref("Array")}} で、以下のプロパティを持つオブジェクトを要素に持ちます。

- -
-
type
-
文字列で、生成された公開鍵の認証情報の種類を表します。この文書の執筆時点 (2019年3月) では、 "public-key" のみが使用可能です。
-
id
-
{{domxref("BufferSource")}} で、既存の公開鍵の認証情報の識別子 ({{domxref("PublicKeyCredential.rawId")}}) に一致します。子の識別子は PublicKeyCredential インスタンスの生成時に生成されます。
-
transports {{optional_inline}}
-
文字列の {{jsxref("Array")}} で、クライアントと認証機器の通信方法を記述します。使用可能な文字列は次の通りです。 -
    -
  • "usb": 認証機器は取り外し可能な USB 接続で接続することができます
  • -
  • "nfc": 認証機器は NFC (Near Field Communication) を通して使用することができます
  • -
  • "ble": 認証機器は BLE (Bluetooth Low Energy) を通して使用することができます
  • -
  • "internal": 認証機器はクライアント端末の中に埋め込まれています (取り外せません)。
  • -
-
-
- -

認証機器がすでにそのような公開鍵認証情報の一つを含んでいる場合、クライアントは {{domxref("DOMException")}} を発生さえるか、ユーザーに新しい認証情報を生成したいかを確認するかします。

- -

- -
var publicKey = {
-  excludeCredentials: [
-    {
-      type: "public-key",
-      // the id for john.doe@example.com
-      id  : new Uint8Array(26) /* this actually is given by the server */
-    },
-    {
-      type: "public-key",
-      // the id for john-doe@example.com
-      id : new Uint8Array(26) /* another id */
-    }
-  ],
-  challenge: new Uint8Array(26) /* this actually is given from the server */,
-  rp: {
-    name: "Example CORP",
-    id  : "login.example.com"
-  },
-  user: {
-    id: new Uint8Array(26), /* To be changed for each user */
-    name: "jdoe@example.com",
-    displayName: "John Doe",
-  },
-  pubKeyCredParams: [ {
-    type: "public-key",
-    alg: -7 } ]
-};
-
-navigator.credentials.create({ publicKey })
-  .then(function (newCredentialInfo) {
-    // send attestation response and client extensions
-    // to the server to proceed with the registration
-    // of the credential
-  }).catch(function (err) {
-     console.error(err);
-  });
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('WebAuthn','#dom-publickeycredentialcreationoptions-excludecredentials','excludeCredentials')}}{{Spec2('WebAuthn')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.PublicKeyCredentialCreationOptions.excludeCredentials")}}

diff --git a/files/ja/conflicting/web/api/credentialscontainer/create/index.md b/files/ja/conflicting/web/api/credentialscontainer/create/index.md new file mode 100644 index 00000000000000..22d3113129af07 --- /dev/null +++ b/files/ja/conflicting/web/api/credentialscontainer/create/index.md @@ -0,0 +1,93 @@ +--- +title: PublicKeyCredentialCreationOptions.excludeCredentials +slug: conflicting/Web/API/CredentialsContainer/create +tags: + - API + - Property + - PublicKeyCredentialCreationOptions + - Reference + - Web Authentication API + - WebAuthn + - プロパティ +translation_of: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials +original_slug: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials +--- +{{APIRef("Web Authentication API")}}{{securecontext_header}} + +**`excludeCredentials`** は {{domxref("PublicKeyCredentialCreationOptions")}} 辞書の任意のプロパティであり、指定されたユーザーに既に存在する公開鍵の記述子を要素に持つ {{jsxref("Array")}} オブジェクトです。これは既存のユーザーに新しい認証情報を生成することを避けたい場合、パーティのサーバーから提供されます。 + +## 構文 + +``` +excludeCredentials = publicKeyCredentialCreationOptions.excludeCredentials +``` + +### 値 + +{{jsxref("Array")}} で、以下のプロパティを持つオブジェクトを要素に持ちます。 + +- `type` + - : 文字列で、生成された公開鍵の認証情報の種類を表します。この文書の執筆時点 (2019 年 3 月) では、 "`public-key`" のみが使用可能です。 +- `id` + - : {{domxref("BufferSource")}} で、既存の公開鍵の認証情報の識別子 ({{domxref("PublicKeyCredential.rawId")}}) に一致します。子の識別子は `PublicKeyCredential` インスタンスの生成時に生成されます。 +- `transports` {{optional_inline}} + + - : 文字列の {{jsxref("Array")}} で、クライアントと認証機器の通信方法を記述します。使用可能な文字列は次の通りです。 + + - "`usb`": 認証機器は取り外し可能な USB 接続で接続することができます + - "`nfc`": 認証機器は [NFC (Near Field Communication)](https://en.wikipedia.org/wiki/Near-field_communication) を通して使用することができます + - "`ble`": 認証機器は [BLE (Bluetooth Low Energy)](https://en.wikipedia.org/wiki/Bluetooth_Low_Energy) を通して使用することができます + - "`internal`": 認証機器はクライアント端末の中に埋め込まれています (取り外せません)。 + +認証機器がすでにそのような公開鍵認証情報の一つを含んでいる場合、クライアントは {{domxref("DOMException")}} を発生さえるか、ユーザーに新しい認証情報を生成したいかを確認するかします。 + +## 例 + +```js +var publicKey = { + excludeCredentials: [ + { + type: "public-key", + // the id for john.doe@example.com + id : new Uint8Array(26) /* this actually is given by the server */ + }, + { + type: "public-key", + // the id for john-doe@example.com + id : new Uint8Array(26) /* another id */ + } + ], + challenge: new Uint8Array(26) /* this actually is given from the server */, + rp: { + name: "Example CORP", + id : "login.example.com" + }, + user: { + id: new Uint8Array(26), /* To be changed for each user */ + name: "jdoe@example.com", + displayName: "John Doe", + }, + pubKeyCredParams: [ { + type: "public-key", + alg: -7 } ] +}; + +navigator.credentials.create({ publicKey }) + .then(function (newCredentialInfo) { + // send attestation response and client extensions + // to the server to proceed with the registration + // of the credential + }).catch(function (err) { + console.error(err); + }); +``` + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName('WebAuthn','#dom-publickeycredentialcreationoptions-excludecredentials','excludeCredentials')}} | {{Spec2('WebAuthn')}} | 初回定義 | + +## ブラウザーの互換性 + +{{Compat("api.PublicKeyCredentialCreationOptions.excludeCredentials")}} diff --git a/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html b/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html deleted file mode 100644 index 42f3cdcdfacac8..00000000000000 --- a/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: PublicKeyCredentialCreationOptions -slug: >- - conflicting/Web/API/CredentialsContainer/create_18148a708412fc42b1affe2f08eab270 -tags: - - API - - Dictionary - - PublicKeyCredentialCreationOptions - - Reference - - Web Authentication API - - WebAuthn -translation_of: Web/API/PublicKeyCredentialCreationOptions -original_slug: Web/API/PublicKeyCredentialCreationOptions ---- -
{{APIRef("Web Authentication API")}}{{securecontext_header}}
- -

PublicKeyCredentialCreationOptionsWeb Authentication API の辞書で、 {{domxref("CredentialsContainer.create()","navigators.credentials.create()")}} で {{domxref("PublicKeyCredential")}} を生成するために渡されるオプションを保持します。

- -

プロパティ

- -
-
{{domxref("PublicKeyCredentialCreationOptions.rp")}}
-
資格情報の生成のリクエスト元を示すオブジェクトです。
-
{{domxref("PublicKeyCredentialCreationOptions.user")}}
-
資格情報が生成されるユーザーアカウントを示すオブジェクトです。
-
{{domxref("PublicKeyCredentialCreationOptions.challenge")}}
-
{{domxref("BufferSource")}} 型で、証明書利用者のサーバーによって生成され、暗号チャレンジとして使用されるものです。この値は認証プロバイダーによって署名され、署名は {{domxref("AuthenticatorAssertionResponse.signature")}} の一部として送り返されます。
-
{{domxref("PublicKeyCredentialCreationOptions.pubKeyCredParams")}}
-
{{jsxref("Array")}} 型で、資格情報に要求される機能を指定する要素の配列です。暗号化署名の操作で使用される種類とアルゴリズムを含みます。この配列は設定の降順で並べ替えられます。
-
{{domxref("PublicKeyCredentialCreationOptions.timeout")}} {{optional_inline}}
-
数値のヒントで、取得操作が完了するまで呼び出し元が待機する時間をミリ秒単位で表します。このヒントは、ブラウザーによって上書きされる場合があります。
-
{{domxref("PublicKeyCredentialCreationOptions.excludeCredentials")}} {{optional_inline}}
-
{{jsxref("Array")}} で、既存の資格情報の記述子の配列です。これは、すでに資格情報を持つ既存のユーザーが新しい公開鍵資格情報を生成することを防ぐために、認証者によって提供されます。
-
{{domxref("PublicKeyCredentialCreationOptions.authenticatorSelection")}} {{optional_inline}}
-
生成操作で使用可能な認証機器を絞り込む条件をプロパティに持つオブジェクトです。
-
{{domxref("PublicKeyCredentialCreationOptions.attestation")}} {{optional_inline}}
-
{{jsxref("String")}} で、認証結果を (認証機器の元が) 送信する方法を示します。
-
{{domxref("PublicKeyCredentialCreationOptions.extensions")}} {{optional_inline}}
-
複数のクライアント拡張機能の入力を持つオブジェクトです。これらの拡張機能は、追加の処理を要求するために使用されます (例えば、従来の FIDO API 資格情報を処理、認証端末上でのテキストの要求など)。
-
- -

メソッド

- -

なし。

- -

- -
// some examples of COSE algorithms
-const cose_alg_ECDSA_w_SHA256 = -7;
-const cose_alg_ECDSA_w_SHA512 = -36;
-
-var createCredentialOptions = {
-    // Format of new credentials is publicKey
-    publicKey: {
-        // Relying Party
-        rp: {
-            name: "Example CORP",
-            id: "login.example.com",
-            icon: "https://login.example.com/login.ico"
-        },
-        // Cryptographic challenge from the server
-        challenge: new Uint8Array(26),
-        // User
-        user: {
-            id: new Uint8Array(16),
-            name: "john.p.smith@example.com",
-            displayName: "John P. Smith",
-        },
-        // Requested format of new keypair
-        pubKeyCredParams: [{
-            type: "public-key",
-            alg: cose_alg_ECDSA_w_SHA256,
-        }],
-        // Timeout after 1 minute
-        timeout: 60000,
-        // Do not send the authenticator's origin attestation
-        attestation: "none",
-        extensions: {
-          uvm: true,
-          exts: true
-        },
-        // Filter out authenticators which are bound to the device
-        authenticatorSelection:{
-          authenticatorAttachment: "cross-platform",
-          requireResidentKey: true,
-          userVerification: "preferred"
-        },
-        // Exclude already existing credentials for the user
-        excludeCredentials: [
-          {
-            type: "public-key",
-            // the id for john.doe@example.com
-            id  : new Uint8Array(26) /* this actually is given by the server */
-          },
-          {
-            type: "public-key",
-            // the id for john-doe@example.com
-            id : new Uint8Array(26) /* another id */
-          }
-        ]
-    }
-};
-
-// Create the new credential with the options above
-navigator.credentials.create(createCredentialOptions)
-  .then(function (newCredentialInfo) {
-    var attestationResponse = newCredentialInfo.response;
-    var clientExtensionsOutputs = newCredentialInfo.getClientExtensionsResults();
-
-    // Send the response to the relying party server
-    // it will verify the content and integrity before
-    // creating a new credential
-
-  }).catch(function (err) {
-    // Deal with any error properly
-    console.error(err);
-  });;
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('WebAuthn','#dictdef-publickeycredentialcreationoptions', 'PublicKeyCredentialCreationOptions dictionary')}}{{Spec2('WebAuthn')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • {{domxref("PublicKeyRequestOptions")}}: 公開鍵を受け取る操作のオプションを提供する辞書
  • -
diff --git a/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.md b/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.md new file mode 100644 index 00000000000000..84c31c8bf6dd6d --- /dev/null +++ b/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.md @@ -0,0 +1,131 @@ +--- +title: PublicKeyCredentialCreationOptions +slug: >- + conflicting/Web/API/CredentialsContainer/create_18148a708412fc42b1affe2f08eab270 +tags: + - API + - Dictionary + - PublicKeyCredentialCreationOptions + - Reference + - Web Authentication API + - WebAuthn +translation_of: Web/API/PublicKeyCredentialCreationOptions +original_slug: Web/API/PublicKeyCredentialCreationOptions +--- +{{APIRef("Web Authentication API")}}{{securecontext_header}} + +**`PublicKeyCredentialCreationOptions`** は [Web Authentication API](/ja/docs/Web/API/Web_Authentication_API) の辞書で、 {{domxref("CredentialsContainer.create()","navigators.credentials.create()")}} で {{domxref("PublicKeyCredential")}} を生成するために渡されるオプションを保持します。 + +## プロパティ + +- {{domxref("PublicKeyCredentialCreationOptions.rp")}} + - : 資格情報の生成のリクエスト元を示すオブジェクトです。 +- {{domxref("PublicKeyCredentialCreationOptions.user")}} + - : 資格情報が生成されるユーザーアカウントを示すオブジェクトです。 +- {{domxref("PublicKeyCredentialCreationOptions.challenge")}} + - : {{domxref("BufferSource")}} 型で、証明書利用者のサーバーによって生成され、[暗号チャレンジ](https://en.wikipedia.org/wiki/Challenge%E2%80%93response_authentication)として使用されるものです。この値は認証プロバイダーによって署名され、署名は {{domxref("AuthenticatorAssertionResponse.signature")}} の一部として送り返されます。 +- {{domxref("PublicKeyCredentialCreationOptions.pubKeyCredParams")}} + - : {{jsxref("Array")}} 型で、資格情報に要求される機能を指定する要素の配列です。暗号化署名の操作で使用される種類とアルゴリズムを含みます。この配列は設定の降順で並べ替えられます。 +- {{domxref("PublicKeyCredentialCreationOptions.timeout")}} {{optional_inline}} + - : 数値のヒントで、取得操作が完了するまで呼び出し元が待機する時間をミリ秒単位で表します。このヒントは、ブラウザーによって上書きされる場合があります。 +- {{domxref("PublicKeyCredentialCreationOptions.excludeCredentials")}} {{optional_inline}} + - : {{jsxref("Array")}} で、既存の資格情報の記述子の配列です。これは、すでに資格情報を持つ既存のユーザーが新しい公開鍵資格情報を生成することを防ぐために、認証者によって提供されます。 +- {{domxref("PublicKeyCredentialCreationOptions.authenticatorSelection")}} {{optional_inline}} + - : 生成操作で使用可能な認証機器を絞り込む条件をプロパティに持つオブジェクトです。 +- {{domxref("PublicKeyCredentialCreationOptions.attestation")}} {{optional_inline}} + - : {{jsxref("String")}} で、認証結果を (認証機器の元が) 送信する方法を示します。 +- {{domxref("PublicKeyCredentialCreationOptions.extensions")}} {{optional_inline}} + - : 複数のクライアント拡張機能の入力を持つオブジェクトです。これらの拡張機能は、追加の処理を要求するために使用されます (例えば、従来の FIDO API 資格情報を処理、認証端末上でのテキストの要求など)。 + +## メソッド + +なし。 + +## 例 + +```js +// some examples of COSE algorithms +const cose_alg_ECDSA_w_SHA256 = -7; +const cose_alg_ECDSA_w_SHA512 = -36; + +var createCredentialOptions = { + // Format of new credentials is publicKey + publicKey: { + // Relying Party + rp: { + name: "Example CORP", + id: "login.example.com", + icon: "https://login.example.com/login.ico" + }, + // Cryptographic challenge from the server + challenge: new Uint8Array(26), + // User + user: { + id: new Uint8Array(16), + name: "john.p.smith@example.com", + displayName: "John P. Smith", + }, + // Requested format of new keypair + pubKeyCredParams: [{ + type: "public-key", + alg: cose_alg_ECDSA_w_SHA256, + }], + // Timeout after 1 minute + timeout: 60000, + // Do not send the authenticator's origin attestation + attestation: "none", + extensions: { + uvm: true, + exts: true + }, + // Filter out authenticators which are bound to the device + authenticatorSelection:{ + authenticatorAttachment: "cross-platform", + requireResidentKey: true, + userVerification: "preferred" + }, + // Exclude already existing credentials for the user + excludeCredentials: [ + { + type: "public-key", + // the id for john.doe@example.com + id : new Uint8Array(26) /* this actually is given by the server */ + }, + { + type: "public-key", + // the id for john-doe@example.com + id : new Uint8Array(26) /* another id */ + } + ] + } +}; + +// Create the new credential with the options above +navigator.credentials.create(createCredentialOptions) + .then(function (newCredentialInfo) { + var attestationResponse = newCredentialInfo.response; + var clientExtensionsOutputs = newCredentialInfo.getClientExtensionsResults(); + + // Send the response to the relying party server + // it will verify the content and integrity before + // creating a new credential + + }).catch(function (err) { + // Deal with any error properly + console.error(err); + });; +``` + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName('WebAuthn','#dictdef-publickeycredentialcreationoptions', 'PublicKeyCredentialCreationOptions dictionary')}} | {{Spec2('WebAuthn')}} | 初回定義 | + +## ブラウザーの互換性 + +{{Compat("api.PublicKeyCredentialCreationOptions")}} + +## 関連情報 + +- {{domxref("PublicKeyRequestOptions")}}: 公開鍵を受け取る操作のオプションを提供する辞書 diff --git a/files/ja/conflicting/web/api/document/fullscreenchange_event/index.html b/files/ja/conflicting/web/api/document/fullscreenchange_event/index.html deleted file mode 100644 index 4c841161a07c62..00000000000000 --- a/files/ja/conflicting/web/api/document/fullscreenchange_event/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Document.onfullscreenchange -slug: conflicting/Web/API/Document/fullscreenchange_event -tags: - - API - - Document - - Event Handler - - Fullscreen API - - Property - - Reference - - イベントハンドラー - - プロパティ - - 全画面 API -translation_of: Web/API/Document/onfullscreenchange -original_slug: Web/API/Document/onfullscreenchange ---- -
{{APIRef("Fullscreen API")}}
- -

{{domxref("Document")}} インターフェイスの onfullscreenchange プロパティは、文書が全画面モードに移行したり復帰したりする直前に発生する {{event("fullscreenchange")}} イベントのイベントハンドラーです。

- -

構文

- -
targetDocument.onfullscreenchange = fullscreenChangeHandler;
-
- -

- -

文書が全画面モードへの移行および復帰を示す {{event("fullscreenchange")}} イベントを受け取るたびに呼び出されるイベントハンドラーです。

- -

使用上のメモ

- -

fullscreenchange イベントは全画面モードへの移行か復帰かを直接特定する方法がないので、イベントハンドラーでは {{domxref("Document.fullscreenElement")}} の値を見てください。 null であれば、イベントは全画面モードからの復帰を示します。それ以外であれば、指定された要素が画面全体に表示されるところです。

- -

- -
document.onfullscreenchange = function ( event ) {
-  console.log("FULL SCREEN CHANGE")
-};
-document.documentElement.onclick = function () {
-  // requestFullscreen() はイベントハンドラー内で使用しなければなりません。そうしなければ失敗します。
-  document.documentElement.requestFullscreen();
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}{{Spec2("HTML WHATWG")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("api.Document.onfullscreenchange")}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/document/fullscreenchange_event/index.md b/files/ja/conflicting/web/api/document/fullscreenchange_event/index.md new file mode 100644 index 00000000000000..5831d4491351ac --- /dev/null +++ b/files/ja/conflicting/web/api/document/fullscreenchange_event/index.md @@ -0,0 +1,62 @@ +--- +title: Document.onfullscreenchange +slug: conflicting/Web/API/Document/fullscreenchange_event +tags: + - API + - Document + - Event Handler + - Fullscreen API + - Property + - Reference + - イベントハンドラー + - プロパティ + - 全画面 API +translation_of: Web/API/Document/onfullscreenchange +original_slug: Web/API/Document/onfullscreenchange +--- +{{APIRef("Fullscreen API")}} + +{{domxref("Document")}} インターフェイスの **`onfullscreenchange`** プロパティは、文書が全画面モードに移行したり復帰したりする直前に発生する {{event("fullscreenchange")}} イベントのイベントハンドラーです。 + +## 構文 + +``` +targetDocument.onfullscreenchange = fullscreenChangeHandler; +``` + +### 値 + +文書が全画面モードへの移行および復帰を示す {{event("fullscreenchange")}} イベントを受け取るたびに呼び出されるイベントハンドラーです。 + +## 使用上のメモ + +`fullscreenchange` イベントは全画面モードへの移行か復帰かを直接特定する方法がないので、イベントハンドラーでは {{domxref("Document.fullscreenElement")}} の値を見てください。 `null` であれば、イベントは全画面モードからの*復帰*を示します。それ以外であれば、指定された要素が画面全体に表示されるところです。 + +## 例 + +```js +document.onfullscreenchange = function ( event ) { + console.log("FULL SCREEN CHANGE") +}; +document.documentElement.onclick = function () { + // requestFullscreen() はイベントハンドラー内で使用しなければなりません。そうしなければ失敗します。 + document.documentElement.requestFullscreen(); +} +``` + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}} | {{Spec2("HTML WHATWG")}} | 初回定義 | + +## ブラウザーの対応 + +{{Compat("api.Document.onfullscreenchange")}} + +## 関連情報 + +- [Fullscreen API](/ja/docs/Web/API/Fullscreen_API) +- [Fullscreen API ガイド](/ja/docs/Web/API/Fullscreen_API/Guide) +- {{event("fullscreenchange")}} +- {{domxref("Document.onfullscreenerror")}} diff --git a/files/ja/conflicting/web/api/document/fullscreenerror_event/index.html b/files/ja/conflicting/web/api/document/fullscreenerror_event/index.html deleted file mode 100644 index 7bb78e498cab1d..00000000000000 --- a/files/ja/conflicting/web/api/document/fullscreenerror_event/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Document.onfullscreenerror -slug: conflicting/Web/API/Document/fullscreenerror_event -tags: - - API - - Document - - Event Handler - - Fullscreen API - - Property - - Reference - - イベントハンドラー - - エラー - - 全画面 - - 全画面 API -translation_of: Web/API/Document/onfullscreenerror -original_slug: Web/API/Document/onfullscreenerror ---- -
{{ApiRef("Fullscreen API")}}
- -

Document.onfullscreenerror プロパティは、文書が直前の {{domxref("Element.requestFullscreen()")}} の呼び出しの後で全画面モードへの移行に失敗したときに、文書に送信される {{event("fullscreenerror")}} イベントのイベントハンドラーです。

- -

構文

- -
targetDocument.onfullscreenerror = fullscreenErrorHandler;
-
- -

- -

{{event("fullscreenerror")}} イベントのイベントハンドラーです。

- -

- -

この例では requestFullscreen() をイベントハンドラーの外で呼び出そうとしています。 requestFullscreen() はセキュリティ上の理由から、ユーザー操作への応答の中でしか呼び出せないため、これは失敗し、 fullscreenerror が発生して document に送られます。

- -
document.onfullscreenerror = function ( event ) {
-  displayWarning("Unable to switch into full-screen mode.");
-};
-
-//....
-
-document.documentElement.requestFullscreen();
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("Fullscreen", "#handler-document-onfullscreenerror", "onfullscreenerror")}}{{Spec2("HTML WHATWG")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("api.Document.onfullscreenerror")}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/document/fullscreenerror_event/index.md b/files/ja/conflicting/web/api/document/fullscreenerror_event/index.md new file mode 100644 index 00000000000000..af90c983a1fe56 --- /dev/null +++ b/files/ja/conflicting/web/api/document/fullscreenerror_event/index.md @@ -0,0 +1,62 @@ +--- +title: Document.onfullscreenerror +slug: conflicting/Web/API/Document/fullscreenerror_event +tags: + - API + - Document + - Event Handler + - Fullscreen API + - Property + - Reference + - イベントハンドラー + - エラー + - 全画面 + - 全画面 API +translation_of: Web/API/Document/onfullscreenerror +original_slug: Web/API/Document/onfullscreenerror +--- +{{ApiRef("Fullscreen API")}} + +**`Document.onfullscreenerror`** プロパティは、文書が直前の {{domxref("Element.requestFullscreen()")}} の呼び出しの後で全画面モードへの移行に失敗したときに、文書に送信される {{event("fullscreenerror")}} イベントのイベントハンドラーです。 + +## 構文 + +``` +targetDocument.onfullscreenerror = fullscreenErrorHandler; +``` + +### 値 + +{{event("fullscreenerror")}} イベントのイベントハンドラーです。 + +## 例 + +この例では `requestFullscreen()` をイベントハンドラーの外で呼び出そうとしています。 `requestFullscreen()` はセキュリティ上の理由から、ユーザー操作への応答の中でしか呼び出せないため、これは失敗し、 `fullscreenerror` が発生して document に送られます。 + +```js +document.onfullscreenerror = function ( event ) { + displayWarning("Unable to switch into full-screen mode."); +}; + +//.... + +document.documentElement.requestFullscreen(); +``` + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName("Fullscreen", "#handler-document-onfullscreenerror", "onfullscreenerror")}} | {{Spec2("HTML WHATWG")}} | 初回定義 | + +## ブラウザーの対応 + +{{Compat("api.Document.onfullscreenerror")}} + +## 関連情報 + +- [Fullscreen API](/ja/docs/Web/API/Fullscreen_API) +- [Fullscreen API ガイド](/ja/docs/Web/API/Fullscreen_API/Guide) +- {{event("fullscreenerror")}} +- {{domxref("Document.onfullscreenchange")}} +- {{domxref("Element.onfullscreenerror")}} diff --git a/files/ja/conflicting/web/api/file_and_directory_entries_api/index.html b/files/ja/conflicting/web/api/file_and_directory_entries_api/index.html deleted file mode 100644 index 19b402e64e1de4..00000000000000 --- a/files/ja/conflicting/web/api/file_and_directory_entries_api/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: FileHandle API -slug: conflicting/Web/API/File_and_Directory_Entries_API -tags: - - API - - Files - - Non Standard - - Reference - - WebAPI -translation_of: Web/API/File_Handle_API -original_slug: Web/API/File_Handle_API ---- -

{{non-standard_header}}

- -

FileHandle API は、ファイルの作成や内容の変更など、ファイルを操作するための API です (File API とは異なります)。この API を通じたファイル操作は、デバイス上に物理的に格納でき、部分的な編集には、競合問題を避けるためにターンベースのロック機構が使用されています。

- -

API 概観

- -

この API は、次のインターフェースを基にしています:

- -
    -
  • {{domxref("IDBDatabase.mozCreateFileHandle")}}
  • -
  • {{domxref("FileHandle")}}
  • -
  • {{domxref("LockedFile")}}
  • -
  • {{domxref("FileRequest")}}
  • -
- -

これは、File API の {{domxref("File")}} インターフェースおよび {{domxref("Blob")}} インターフェースとも接続しています。

- -

基本的な操作

- -

FileHandle インスタンスの作成

- -

このインテントは IndexedDB を通じてファイルを保存しているため、{{domxref("FileHandle")}} インスタンスを作成するのに IndexedDB Database が必要です。

- -
-
var IDBReq = indexedDB.open("myFileStorageDataBase");
-
-IDBReq.onsuccess = function(){
-  var DB = this.result;
-  var buildHandle = DB.mozCreateFileHandle("test.txt", "plain/text");
-
-  buildHandle.onsuccess = function(){
-    var myFileHandle = this.result;
-    console.log('handle', myFileHandle);
-  };
-};
-
-
- -

{{domxref("IDBDatabase.mozCreateFileHandle","mozCreateFileHandle()")}} は、ファイル名と任意の形式の 2 個の引数を取ります。これらは説明のためのものであり、データベースには使用されません。しかし、これらの値から {{domxref("File")}} オブジェクトの {{domxref("File.name","name")}} と {{domxref("File.type","type")}} に継承して生成するため、{{domxref("FileHandle")}} オブジェクトにとって重要です。つまり、例えば空文字にすると実際に存在するファイルと一致しないため、ユニークな名前にしなくてもよいです。

- -
-

補足: 上記のコードは、{{domxref("FileHandle")}} インスタンスを保持している間のみ存在する「一時ファイル」を作成するだけです。ページ更新やアプリ再起動に遭遇するファイルを扱いたい場合は、データベース自身など、ファイルハンドルを永続的な場所に格納する必要があります。詳しくは、後述の File storage を参照してください。

-
- -

ファイルの読み書き操作

- -

ハンドルしたファイルを読んだり書いたりするには、{{domxref("LockedFile")}} を取得する必要があります。{{domxref("FileHandle.open()")}} メソッドがこの操作のためのオブジェクトを提供しており、readonly または readwrite が可能です。readonly の {{domxref("LockedFile")}} に書き込みを行おうとすると失敗します。

- -

書き込み

- -

locked ファイルには 3 通りの書込み操作があります:

- -
    -
  • {{domxref("LockedFile.write","write")}} : これは、ファイル内の {{domxref("LockedFile.location")}} byte の位置から書き込みを開始するメソッドです。
  • -
  • {{domxref("LockedFile.append","append")}} : これは、常にファイル末尾にコンテンツを追加するメソッドです。
  • -
  • {{domxref("LockedFile.truncate","truncate")}} : これは、ファイルの最初の nth-first byte までを維持してそれ以降を削除するメソッドです。
  • -
- -
// Get a LockedFile object from the handle
-var myFile = myFileHandle.open('readwrite');
-
-// Start a writing operation
-var writing = myFile.append('Some content');
-
-writing.onsuccess = function () {
-  console.log('Writing operation successful');
-}
-
-writing.onerror = function () {
-  console.log('Something goes wrong in the writing process: ' + this.error);
-}
-
- -

読み込み

- -

中間の {{domxref("File")}} オブジェクトや {{domxref("FileReader")}} オブジェクトを使用せずに、{{domxref("LockedFile")}} オブジェクトのコンテンツを直接読み込むことが可能です。{{domxref("LockedFile")}} インターフェースは、{{domxref("LockedFile.readAsText","readAsText")}} メソッドと {{domxref("LockedFile.readAsArrayBuffer","readAsArrayBuffer")}} メソッドを提供しています。

- -

これら 2 個のメソッドは、ファイル開始位置からの読み込むサイズを {{domxref("LockedFile.location")}} byte で指定して読み込みます。示すサイズを指定します。

- -

ファイル全体を読み込むには、そのサイズを知る必要があります。この情報 (および最終変更日の日付) は、{{domxref("LockedFile.getMetadata()")}} メソッドを通して取得できます。

- -
// Get a LockedFile object from the handle
-var myFile = myFileHandle.open('readwrite');
-
-// Retrieve the size of the file
-var getmeta = myFile.getMetadata();
-
-getmeta.onsuccess = function () {
-  var size = this.result.size;
-
-  // The reading operation will start with the byte at index 0 in the file
-  myFile.location = 0;
-
-  // Start a reading operation for the whole file content
-  var reading = myFile.readAsText(size);
-
-  reading.onsuccess = function () {
-    console.log('The content of the file is:');
-    console.log(this.result);
-  }
-
-  reading.onerror = function () {
-    console.log('Something goes wrong in the reading process: ' + this.error);
-  }
-}
-
- -

File スナップショット

- -

In many cases it can be handy to get a snapshot of the file. For example, there are many APIs that expect {{domxref("Blob")}} or {{domxref("File")}} objects such as domxref("FileReader")}} (which can be easier to use to read the whole file) or {{domxref("XMLHttpRequest")}}.

- -

It's possible to get a {{domxref("File")}} object representing the current state of the file handled by the {{domxref("FileHandle")}} object by using the {{domxref("FileHandle.getFile","getFile")}} method. Such a {{domxref("File")}} object is completely desynchronized from the original file, which means any change made to that object will never be reflected to the handled file as well as any change made to the handled file will never be pushed to the {{domxref("File")}} object.

- -
var mySnapshot = null;
-var request = myFileHandle.getFile();
-
-request.onsuccess = function () {
-  mySnapshot = this.result;
-}
-
- -

進捗の管理

- -

All the methods from the {{domxref("LockedFile")}} interface return a {{domxref("FileRequest")}} object. Such an object is basically a {{domxref("DOMRequest")}} with an extra power: it allows to monitor the progress of an operation. Sometimes writing and reading operations can be very long, therefore it is a good idea to monitor the operation to provide feedback to the user. Such monitoring can be done using the {{domxref("FileRequest.onprogress")}} event handler.

- -
var progress = document.querySelector('progress');
-var myFile   = myFileHandle.open('readonly');
-
-// Let's read a 1GB file
-var action   = myFile.readAsArrayBuffer(1000000000);
-
-action.onprogress = function (event) {
-  if (progress) {
-    progress.value = event.loaded;
-    progress.max   = event.total;
-  }
-}
-
-action.onsuccess = function () {
-  console.log('Yeah \o/ Just read a 1GB file');
-}
-
-action.onerror = function () {
-  console.log('Oups :( Unable to read a 1GB file')
-}
-
- -

File ストレージ

- -

When a file handle is created, the associated file only exists as a "temporary file" as long as you hold the {{domxref("FileHandle")}} instance. If you want a file to survive a page refresh/app relaunch, you need to store the handle in a database (not necessarily the one used to create the {{domxref("FileHandle")}} object).

- -
var IDBReq = window.indexedDB.open('myFileStorageDataBase');
-
-// If necessary, let's create a datastore for the files
-IDBReq.onupgradeneeded = function () {
-  this.result.createObjectStore('files');
-}
-
-IDBReq.onsuccess = function () {
-  var DB = this.result;
-
-  // Let's create a new file
-  var handleReq = DB.mozCreateFileHandle("test.txt", "plain/text");
-
-  handleReq.onsuccess = function () {
-    var myFileHandle = this.result;
-    var store = DB.transaction(['files'], 'readwrite').objectStore('files');
-
-    // Let's store the file permanently
-    // HINT: it could be handy to use the file name as the storage key
-    var storeReq = store.add(myFileHandle, myFileHandle.name);
-
-    storeReq.onsuccess = function () {
-      console.log('The file has been successfully stored and can be retrieved anytime.')
-    }
-  }
-}
-
- -

A file stored that way is physically put on the device. The database itself only stores a pointer to that file. It means that if the {{domxref("FileHandle")}} object is stored several times in several DBs or several data stores, all those objects will reference the same unique file. This is not a problem because to access the file, a {{domxref("LockedFile")}} object is required and operations on such object are performed in isolation, meaning that once a {{domxref("LockedFile")}} is active, all operations of this {{domxref("LockedFile")}} are guaranteed to happen sequentially on the underlying file without being interleaved with operations from other {{domxref("LockedFile")}}.

- -

安全な書込み操作

- -

For performance reasons, write (and read) operations are done in memory. Periodically, the results of those operation are asynchronously flushed to the device storage area. If for some reason a problem occurs before that, you can lose the results of some operations. To avoid that problem, you can force the data to be flushed by using the {{domxref("LockedFile.flush()")}} method. Once this method has been successfully called, you can be sure your change on the file will be safe.

- -
// Get a LockedFile object from the handle
-var myFile = myFileHandle.open('readwrite');
-
-// Start a writing operation
-var writing = myFile.append('Some content');
-
-writing.onsuccess = function () {
-  console.log('Writing operation successful');
-
-  var saving = myFile.flush();
-
-  saving.onsuccess = function () {
-    console.log('The file has been successfully stored');
-  }
-}
-
-writing.onerror = function () {
-  console.log('Something goes wrong in the writing process: ' + this.error);
-}
- -

API の互換性

- -

FileWriter と API が異なるのはなぜですか?

- -

The FileWriter specification defines FileWriters, objects aiming at representing editable files. Discussions on public-webapps led to the conclusion that the API would behave poorly in the case of different entities writing concurrently to the same file. The outcome of this discussion is the FileHandle API with its LockedFile and transaction mechanism.

- -

仕様書

- -

A formal specification draft is being written. As it does not fully match the current implementation, be warned that the implementation and/or the specification will be subject to changes.

- - - - - - - - - - - - - - -
仕様実装状況コメント
{{SpecName('FileSystem')}}{{Spec2('FileSystem')}}Draft proposal.
- -

ブラウザの互換性

- -
-
Supported in Firefox 15.
-
diff --git a/files/ja/conflicting/web/api/file_and_directory_entries_api/index.md b/files/ja/conflicting/web/api/file_and_directory_entries_api/index.md new file mode 100644 index 00000000000000..6e2336a1e17825 --- /dev/null +++ b/files/ja/conflicting/web/api/file_and_directory_entries_api/index.md @@ -0,0 +1,234 @@ +--- +title: FileHandle API +slug: conflicting/Web/API/File_and_Directory_Entries_API +tags: + - API + - Files + - Non Standard + - Reference + - WebAPI +translation_of: Web/API/File_Handle_API +original_slug: Web/API/File_Handle_API +--- +{{non-standard_header}} + +FileHandle API は、ファイルの作成や内容の変更など、ファイルを操作するための API です ([File API](/ja/docs/DOM/File "DOM/File") とは異なります)。この API を通じたファイル操作は、デバイス上に物理的に格納でき、部分的な編集には、競合問題を避けるためにターンベースのロック機構が使用されています。 + +## API 概観 + +この API は、次のインターフェースを基にしています: + +- {{domxref("IDBDatabase.mozCreateFileHandle")}} +- {{domxref("FileHandle")}} +- {{domxref("LockedFile")}} +- {{domxref("FileRequest")}} + +これは、File API の {{domxref("File")}} インターフェースおよび {{domxref("Blob")}} インターフェースとも接続しています。 + +## 基本的な操作 + +### FileHandle インスタンスの作成 + +このインテントは IndexedDB を通じてファイルを保存しているため、{{domxref("FileHandle")}} インスタンスを作成するのに [IndexedDB Database](/ja/docs/IndexedDB/IDBFactory#open "IndexedDB/IDBFactory#open") が必要です。 + +```js +var IDBReq = indexedDB.open("myFileStorageDataBase"); + +IDBReq.onsuccess = function(){ + var DB = this.result; + var buildHandle = DB.mozCreateFileHandle("test.txt", "plain/text"); + + buildHandle.onsuccess = function(){ + var myFileHandle = this.result; + console.log('handle', myFileHandle); + }; +}; +``` + +{{domxref("IDBDatabase.mozCreateFileHandle","mozCreateFileHandle()")}} は、ファイル名と任意の形式の 2 個の引数を取ります。これらは説明のためのものであり、データベースには使用されません。しかし、これらの値から {{domxref("File")}} オブジェクトの {{domxref("File.name","name")}} と {{domxref("File.type","type")}} に継承して生成するため、{{domxref("FileHandle")}} オブジェクトにとって重要です。つまり、例えば空文字にすると実際に存在するファイルと一致しないため、ユニークな名前にしなくてもよいです。 + +> **Note:** **補足:** 上記のコードは、{{domxref("FileHandle")}} インスタンスを保持している間のみ存在する「一時ファイル」を作成するだけです。ページ更新やアプリ再起動に遭遇するファイルを扱いたい場合は、データベース自身など、ファイルハンドルを永続的な場所に格納する必要があります。詳しくは、後述の [File storage](#file_storage) を参照してください。 + +### ファイルの読み書き操作 + +ハンドルしたファイルを読んだり書いたりするには、{{domxref("LockedFile")}} を取得する必要があります。{{domxref("FileHandle.open()")}} メソッドがこの操作のためのオブジェクトを提供しており、`readonly` または `readwrite` が可能です。`readonly` の {{domxref("LockedFile")}} に書き込みを行おうとすると失敗します。 + +#### 書き込み + +locked ファイルには 3 通りの書込み操作があります: + +- {{domxref("LockedFile.write","write")}} : これは、ファイル内の {{domxref("LockedFile.location")}} byte の位置から書き込みを開始するメソッドです。 +- {{domxref("LockedFile.append","append")}} : これは、常にファイル末尾にコンテンツを追加するメソッドです。 +- {{domxref("LockedFile.truncate","truncate")}} : これは、ファイルの最初の nth-first byte までを維持してそれ以降を削除するメソッドです。 + +```js +// Get a LockedFile object from the handle +var myFile = myFileHandle.open('readwrite'); + +// Start a writing operation +var writing = myFile.append('Some content'); + +writing.onsuccess = function () { + console.log('Writing operation successful'); +} + +writing.onerror = function () { + console.log('Something goes wrong in the writing process: ' + this.error); +} +``` + +#### 読み込み + +中間の {{domxref("File")}} オブジェクトや {{domxref("FileReader")}} オブジェクトを使用せずに、{{domxref("LockedFile")}} オブジェクトのコンテンツを直接読み込むことが可能です。{{domxref("LockedFile")}} インターフェースは、{{domxref("LockedFile.readAsText","readAsText")}} メソッドと {{domxref("LockedFile.readAsArrayBuffer","readAsArrayBuffer")}} メソッドを提供しています。 + +これら 2 個のメソッドは、ファイル開始位置からの読み込むサイズを {{domxref("LockedFile.location")}} byte で指定して読み込みます。示すサイズを指定します。 + +ファイル全体を読み込むには、そのサイズを知る必要があります。この情報 (および最終変更日の日付) は、{{domxref("LockedFile.getMetadata()")}} メソッドを通して取得できます。 + +```js +// Get a LockedFile object from the handle +var myFile = myFileHandle.open('readwrite'); + +// Retrieve the size of the file +var getmeta = myFile.getMetadata(); + +getmeta.onsuccess = function () { + var size = this.result.size; + + // The reading operation will start with the byte at index 0 in the file + myFile.location = 0; + + // Start a reading operation for the whole file content + var reading = myFile.readAsText(size); + + reading.onsuccess = function () { + console.log('The content of the file is:'); + console.log(this.result); + } + + reading.onerror = function () { + console.log('Something goes wrong in the reading process: ' + this.error); + } +} +``` + +### File スナップショット + +In many cases it can be handy to get a snapshot of the file. For example, there are many APIs that expect {{domxref("Blob")}} or {{domxref("File")}} objects such as domxref("FileReader")}} (which can be easier to use to read the whole file) or {{domxref("XMLHttpRequest")}}. + +It's possible to get a {{domxref("File")}} object representing the current state of the file handled by the {{domxref("FileHandle")}} object by using the {{domxref("FileHandle.getFile","getFile")}} method. Such a {{domxref("File")}} object is completely desynchronized from the original file, which means any change made to that object will never be reflected to the handled file as well as any change made to the handled file will never be pushed to the {{domxref("File")}} object. + +```js +var mySnapshot = null; +var request = myFileHandle.getFile(); + +request.onsuccess = function () { + mySnapshot = this.result; +} +``` + +### 進捗の管理 + +All the methods from the {{domxref("LockedFile")}} interface return a {{domxref("FileRequest")}} object. Such an object is basically a {{domxref("DOMRequest")}} with an extra power: it allows to monitor the progress of an operation. Sometimes writing and reading operations can be very long, therefore it is a good idea to monitor the operation to provide feedback to the user. Such monitoring can be done using the {{domxref("FileRequest.onprogress")}} event handler. + +```js +var progress = document.querySelector('progress'); +var myFile = myFileHandle.open('readonly'); + +// Let's read a 1GB file +var action = myFile.readAsArrayBuffer(1000000000); + +action.onprogress = function (event) { + if (progress) { + progress.value = event.loaded; + progress.max = event.total; + } +} + +action.onsuccess = function () { + console.log('Yeah \o/ Just read a 1GB file'); +} + +action.onerror = function () { + console.log('Oups :( Unable to read a 1GB file') +} +``` + +## File ストレージ + +When a file handle is created, the associated file only exists as a "temporary file" as long as you hold the {{domxref("FileHandle")}} instance. If you want a file to survive a page refresh/app relaunch, you need to store the handle in a database (not necessarily the one used to create the {{domxref("FileHandle")}} object). + +```js +var IDBReq = window.indexedDB.open('myFileStorageDataBase'); + +// If necessary, let's create a datastore for the files +IDBReq.onupgradeneeded = function () { + this.result.createObjectStore('files'); +} + +IDBReq.onsuccess = function () { + var DB = this.result; + + // Let's create a new file + var handleReq = DB.mozCreateFileHandle("test.txt", "plain/text"); + + handleReq.onsuccess = function () { + var myFileHandle = this.result; + var store = DB.transaction(['files'], 'readwrite').objectStore('files'); + + // Let's store the file permanently + // HINT: it could be handy to use the file name as the storage key + var storeReq = store.add(myFileHandle, myFileHandle.name); + + storeReq.onsuccess = function () { + console.log('The file has been successfully stored and can be retrieved anytime.') + } + } +} +``` + +A file stored that way is physically put on the device. The database itself only stores a pointer to that file. It means that if the {{domxref("FileHandle")}} object is stored several times in several DBs or several data stores, all those objects will reference the same unique file. This is not a problem because to access the file, a {{domxref("LockedFile")}} object is required and operations on such object are performed in [isolation](http://en.wikipedia.org/wiki/Isolation_%28database_systems%29), meaning that once a {{domxref("LockedFile")}} is active, all operations of this {{domxref("LockedFile")}} are guaranteed to happen sequentially on the underlying file without being interleaved with operations from other {{domxref("LockedFile")}}. + +### 安全な書込み操作 + +For performance reasons, write (and read) operations are done in memory. Periodically, the results of those operation are asynchronously flushed to the device storage area. If for some reason a problem occurs before that, you can lose the results of some operations. To avoid that problem, you can force the data to be flushed by using the {{domxref("LockedFile.flush()")}} method. Once this method has been successfully called, you can be sure your change on the file will be safe. + +```js +// Get a LockedFile object from the handle +var myFile = myFileHandle.open('readwrite'); + +// Start a writing operation +var writing = myFile.append('Some content'); + +writing.onsuccess = function () { + console.log('Writing operation successful'); + + var saving = myFile.flush(); + + saving.onsuccess = function () { + console.log('The file has been successfully stored'); + } +} + +writing.onerror = function () { + console.log('Something goes wrong in the writing process: ' + this.error); +} +``` + +## API の互換性 + +### FileWriter と API が異なるのはなぜですか? + +The [FileWriter specification](http://dev.w3.org/2009/dap/file-system/file-writer.html) defines FileWriters, objects aiming at representing editable files. [Discussions on public-webapps](http://lists.w3.org/Archives/Public/public-webapps/2012JanMar/0886.html) led to the conclusion that the API would behave poorly in the case of different entities writing concurrently to the same file. The outcome of this discussion is the FileHandle API with its LockedFile and transaction mechanism. + +### 仕様書 + +A formal specification draft is being written. As it does not fully match the current implementation, be warned that the implementation and/or the specification will be subject to changes. + +| 仕様 | 実装状況 | コメント | +| ------------------------------------ | -------------------------------- | --------------- | +| {{SpecName('FileSystem')}} | {{Spec2('FileSystem')}} | Draft proposal. | + +### ブラウザの互換性 + +Supported in Firefox 15. diff --git a/files/ja/conflicting/web/api/file_and_directory_entries_api_14742f14781741be7bc237d4ec1399a0/index.html b/files/ja/conflicting/web/api/file_and_directory_entries_api_14742f14781741be7bc237d4ec1399a0/index.html deleted file mode 100644 index cebfa1e1295894..00000000000000 --- a/files/ja/conflicting/web/api/file_and_directory_entries_api_14742f14781741be7bc237d4ec1399a0/index.html +++ /dev/null @@ -1,389 +0,0 @@ ---- -title: FileSystemEntrySync -slug: >- - conflicting/Web/API/File_and_Directory_Entries_API_14742f14781741be7bc237d4ec1399a0 -tags: - - API - - EntrySync - - File API - - File System API - - File and Directory Entries API - - FileSystemEntrySync - - インターフェイス - - オフライン - - ファイルシステム - - リファレンス - - 非標準 -translation_of: Web/API/FileSystemEntrySync -original_slug: Web/API/FileSystemEntrySync ---- -
{{APIRef("File System API")}}{{Non-standard_header()}}
- -

File and Directory Entries API のFileSystemEntrySync インターフェイスは、ファイルシステム内のエントリを表します。 {{domxref("FileEntrySync")}} か {{domxref("DirectoryEntry")}} のいずれかになります。 ファイルのコピー、移動、削除、および読み込みを含むファイルの操作方法や、ファイル名やルートからエントリまでのパスなど、それが指すファイルに関する情報が含まれています。

- -
-

警告: この API は決して受け入れられず、標準化もされませんでした。さまざまなブラウザが File and Directory Entries API (ファイルシステム API とも呼ばれます) を実装していますが、使用を避けるようにしてください。

-
- -

基本のコンセプト

- -

FileSystemEntrySync インターフェイスには、ファイルやディレクトリの操作に必要なメソッドが含まれていますが、toURL()というエントリの URL を取得するための便利なメソッドもあります。 また新しい URL スキーム filesystem: を紹介します。

- -

Google Chromeで filesystem: スキームを使用すると、アプリのルートに保存されているすべてのファイルとフォルダを表示できます。 アプリの起源のルートディレクトリに filesystem: スキームを使用するだけです。たとえば、アプリが http://ww.html5rocks.com にある場合は、 filesystem:http://www.html5rocks.com/temporary/ をタブで開きます。Chrome は、アプリのオリジンに保存されているすべてのファイルとフォルダの読み取り専用リストを表示します。

- -

メソッド概要

- - - - - - - - - - - - - - - - - - - - - - -
Metadata getMetadata () raises (FileException);
FileSystemEntrySync moveTo (in DirectoryEntrySync parent, optional DOMString newName) raises (FileException);
FileSystemEntrySync copyTo(in DirectoryEntrySync parent, optional DOMString newName) raises (FileException);
DOMString toURL();
void remove() raises (FileException);
DirectoryEntrySync getParent();
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性タイプ説明
filesystemreadonly FileSystemSyncエントリが存在するファイルシステム。
fullpathreadonly DOMString -

ルートからエントリまでの完全な絶対パス。

- -

絶対パスはルートディレクトリからの相対パスで、先頭に '/' が付きます。

-
isDirectoryreadonly booleanFileSystemEntrySync がディレクトリの場合は True です。
isFilereadonly booleanFileSystemEntrySync がファイルの場合は True です。
namereadonly DOMStringエントリに至るパスを除いたエントリの名前。
- -

メソッド

- -

getMetadata()

- -

このエントリに関するメタデータを検索します。 [ todo: どのような種類のメタデータを指定するか]

- -
Metadata getMetada ()
-  raises (FileException);
- -
引数
- -
-
なし
-
- -
戻り値
- -
-
Metadata
-
- -
例外
- -

このメソッドは、次のコードで FileException が発生する可能性があります。

- - - - - - - - - - - - - - - - - - -
例外説明
NOT_FOUND_ERRエントリが存在しません。
INVALID_STATE_ERRFileSystemSync は、削除される以外の何らかの理由でもはや有効ではありません。
- -

moveTo()

- -

エントリをファイルシステム上の別の場所に移動します。 既存のファイルにファイルを移動すると、その既存のファイルが置き換えられます。既存の空のディレクトリにディレクトリを移動すると、そのディレクトリが置き換えられます。[todo: ディレクトリが空でない場合はどうなりますか?]

- -

[todo: Verify ] これはファイルの名前を変更するのと同じ方法です。 同じ場所に保持してから、newName パラメータを定義することができます。

- -

次の操作はできません。

- -
    -
  • ディレクトリ自体を移動するか、任意の深さの任意の子に移動する
  • -
  • 現在のエントリと異なる名前が与えられていない場合は、エントリをその親に移動する
  • -
  • ファイルをディレクトリが占有しているパスに移動する、またはディレクトリをファイルが占有するパスに移動する
  • -
  • 空でないディレクトリが占めるパスに要素を移動します。
  • -
- -
FileSystemEntrySync moveTo (
-  in DirectoryEntrySync parent, optional DOMString newName
-) raises (FileException);
- -
引数
- -
-
parent
-
エントリを移動するディレクトリ。
-
newName
-
エントリの新しい名前。名前を指定しない場合、ブラウザはエントリの現在の名前を保持します。
-
- -
戻り値
- -
-
FileSystemEntrySync
-
ファイルシステム内のエントリを表すオブジェクト。
-
- -
例外
- -

このメソッドは、次のコードで FileException が発生する可能性があります。

- - - - - - - - - - - - - - - - - - - - - - - - - - -
例外説明
ENCODING_ERR少なくとも1つの文字が予約されているかイレギュラーなので、指定された名前は無効です。 例には、バックスラッシュ (\)、ドット (.)、および2つのドット (..) が含まれます。
NOT_FOUND_ERRターゲットディレクトリが存在しません。
INVALID_MODIFICATION_ERR -

次のいずれかの操作を試行しました:

- -
    -
  • 名前を変更せずにエントリを親に移動する
  • -
  • 親ディレクトリをその子ディレクトリの1つに移動する。[todo: verify]
  • -
-
NO_MODIFICATION_ALLOWED_ERRソースエントリ、その親ディレクトリ、およびターゲットディレクトリのうち、いずれかが書き込み可能ではありません。
- -

copyTo()

- -

エントリをファイルシステム上の別の場所にコピーします。エントリがディレクトリの場合は、そのエントリをコピーすることはできません。また、新しい名前を指定せずに親にコピーすることもできません。ディレクトリコピーは常に再帰的です。つまり、ディレクトリのすべての内容がコピーされます。この動作を変更することはできません。ファイルは単純に複製されます。

- -
void copyTo (
-  in DirectoryEntrySync parent, optional DOMString newName
-) raises (FileException);
- -
引数
- -
-
parent
-
エントリを移動するディレクトリ。
-
newName
-
エントリの新しい名前。名前を指定しない場合、ブラウザは FileSystemEntrySync の現在の名前を保持します。
-
- -
戻り値
- -
-
FileSystemEntrySync
-
ファイルシステム内のエントリを表すオブジェクト。
-
- -
例外
- -

このメソッドは、次のコードで FileException が発生する可能性があります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
例外説明
ENCODING_ERR少なくとも1つの文字が予約されているかイレギュラーなので、指定された名前は無効です。 例には、バックスラッシュ (\)、ドット (.)、および2つのドット (..) が含まれます。
NOT_FOUND_ERRターゲットディレクトリが存在しません。
INVALID_MODIFICATION_ERR -

次のいずれかの操作を試行しました:

- -
    -
  • 名前を変更せずにエントリを親に移動する
  • -
  • 親ディレクトリをその子ディレクトリの1つに移動する
  • -
-
NO_MODIFICATION_ALLOWED_ERRソースエントリ、その親ディレクトリ、およびターゲットディレクトリのうち、いずれかが書き込み可能ではありません。
QUOTA_EXCEEDED_ERRこの操作により、アプリケーションはストレージクォータを超過します。 ユーザーが明示的に付与する必要があるより大きな永続ストレージを要求する可能性があります。詳細については、基本概念の記事を参照してください。
- -

toURL()

- -

このエントリを識別するために使用できるURLを返します。これは srchref 属性を埋めるために使用できる新しい URL スキーム、 filesystem:を公開しています。たとえば、イメージを表示しその fileEntry を持つ場合、 toURL() を呼び出すと、イメージファイルのファイルシステムURLが得られます。
- あなたは filesystem:http://example.com/temporary/lolcat.png のようなものを手に入れます。

- -

ファイルシステムの URL の有効期限はありません。このメソッドはディスク上の場所を記述しているため、URL はその場所が存在する限り有効です。あなたはファイルを削除して再作成することができます。

- -

mimeType を指定すると、HTTP ダウンロードに関連付けられているオプションの MIME タイプヘッダーをシミュレートできます。

- -
DOMString toURL ();
- -
引数
- -
-
なし
-
- -
戻り値
- -
-
DOMString
-
- -
例外
- -

なし

- -

remove()

- -

ファイルまたはディレクトリを削除します。 空のディレクトリやファイルシステムのルートディレクトリは削除できません。 空のディレクトリを削除する場合は、代わりに removeRecursively() を使用してください。

- -
void remove (
-) raises (FileException);
- -
引数
- -

なし

- -
戻り値
- -
-
void
-
- -
例外
- -

このメソッドは、次のコードと FileException を発生させることができます。

- - - - - - - - - - - - - - - - - - - - - - -
例外説明
NOT_FOUND_ERRターゲットディレクトリが存在しません。
INVALID_MODIFICATION_ERR -

空でないディレクトリを削除しようとしました。 空のディレクトリを削除する場合は、代わりにremoveRecursively() を使用してください。

-
NO_MODIFICATION_ALLOWED_ERRソースエントリ、その親ディレクトリ、およびターゲットディレクトリのうち、いずれかが書き込み可能ではありません。
- -

getParent()

- -

エントリを含む親 DirectoryEntrySync を調べます。このエントリがファイルシステムのルートである場合、親はそれ自身です。

- -
void getParent ();
- -
引数
- -

なし

- -
戻り値
- -
-
DirectoryEntrySync
-
ファイルシステム内のディレクトリを表すオブジェクト。
-
- -
例外
- -

なし

- -

ブラウザの互換性

- -

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

- -

あわせて参照

- -

仕様:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}

- -

リファレンス: File System API

- -

イントロダクション: Basic Concepts About the File System API

diff --git a/files/ja/conflicting/web/api/file_and_directory_entries_api_14742f14781741be7bc237d4ec1399a0/index.md b/files/ja/conflicting/web/api/file_and_directory_entries_api_14742f14781741be7bc237d4ec1399a0/index.md new file mode 100644 index 00000000000000..2eacfcd591b834 --- /dev/null +++ b/files/ja/conflicting/web/api/file_and_directory_entries_api_14742f14781741be7bc237d4ec1399a0/index.md @@ -0,0 +1,314 @@ +--- +title: FileSystemEntrySync +slug: >- + conflicting/Web/API/File_and_Directory_Entries_API_14742f14781741be7bc237d4ec1399a0 +tags: + - API + - EntrySync + - File API + - File System API + - File and Directory Entries API + - FileSystemEntrySync + - インターフェイス + - オフライン + - ファイルシステム + - リファレンス + - 非標準 +translation_of: Web/API/FileSystemEntrySync +original_slug: Web/API/FileSystemEntrySync +--- +{{APIRef("File System API")}}{{Non-standard_header()}} + +File and Directory Entries API の`FileSystemEntrySync` インターフェイスは、ファイルシステム内のエントリを表します。 {{domxref("FileEntrySync")}} か {{domxref("DirectoryEntry")}} のいずれかになります。 ファイルのコピー、移動、削除、および読み込みを含むファイルの操作方法や、ファイル名やルートからエントリまでのパスなど、それが指すファイルに関する情報が含まれています。 + +> **Warning:** **警告:** この API は決して受け入れられず、標準化もされませんでした。さまざまなブラウザが [File and Directory Entries API](/ja/docs/Web/API/File_and_Directory_Entries_API) (ファイルシステム API とも呼ばれます) を実装していますが、使用を避けるようにしてください。 + +## 基本のコンセプト + +`FileSystemEntrySync` インターフェイスには、ファイルやディレクトリの操作に必要なメソッドが含まれていますが、[`toURL()`](/ja/docs/Web/API/FileSystemEntrySync$translate?tolocale=ja#toURL)というエントリの URL を取得するための便利なメソッドもあります。 また新しい URL スキーム `filesystem:` を紹介します。 + +Google Chrome で `filesystem:` スキームを使用すると、アプリのルートに保存されているすべてのファイルとフォルダを表示できます。 アプリの起源のルートディレクトリに `filesystem:` スキームを使用するだけです。たとえば、アプリが [`http://ww.html5rocks.com`](http://ww.html5rocks.com) にある場合は、 `filesystem:http://www.html5rocks.com/temporary/` をタブで開きます。Chrome は、アプリのオリジンに保存されているすべてのファイルとフォルダの読み取り専用リストを表示します。 + +## メソッド概要 + +| `Metadata getMetadata () raises (FileException);` | +| --------------------------------------------------------------------------------------------------------------- | +| `FileSystemEntrySync moveTo (in DirectoryEntrySync parent, optional DOMString newName) raises (FileException);` | +| `FileSystemEntrySync copyTo(in DirectoryEntrySync parent, optional DOMString newName) raises (FileException);` | +| `DOMString toURL();` | +| `void remove() raises (FileException);` | +| `DirectoryEntrySync getParent();` | + +## 属性 + +| 属性 | タイプ | 説明 | +| ------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------- | +| `filesystem` | `readonly FileSystemSync` | エントリが存在するファイルシステム。 | +| `fullpath` | `readonly DOMString` | ルートからエントリまでの完全な絶対パス。絶対パスはルートディレクトリからの相対パスで、先頭に '`/`' が付きます。 | +| `isDirectory` | `readonly boolean` | FileSystemEntrySync がディレクトリの場合は True です。 | +| `isFile` | `readonly boolean` | FileSystemEntrySync がファイルの場合は True です。 | +| `name` | `readonly DOMString` | エントリに至るパスを除いたエントリの名前。 | + +## メソッド + +### getMetadata() + +このエントリに関するメタデータを検索します。 \[ todo: どのような種類のメタデータを指定するか] + +``` +Metadata getMetada () + raises (FileException); +``` + +##### 引数 + +
なし
+ +##### 戻り値 + +
Metadata
+ +##### 例外 + +このメソッドは、次のコードで [FileException](/ja/DOM/File_API/File_System_API/FileException "en/DOM/File_API/File_System_API/FileException") が発生する可能性があります。 + +| 例外 | 説明 | +| ------------------- | --------------------------------------------------------------------------- | +| `NOT_FOUND_ERR` | エントリが存在しません。 | +| `INVALID_STATE_ERR` | FileSystemSync は、削除される以外の何らかの理由でもはや有効ではありません。 | + +### moveTo() + +エントリをファイルシステム上の別の場所に移動します。 既存のファイルにファイルを移動すると、その既存のファイルが置き換えられます。既存の空のディレクトリにディレクトリを移動すると、そのディレクトリが置き換えられます。\[todo: ディレクトリが空でない場合はどうなりますか?] + +\[todo: Verify ] これはファイルの名前を変更するのと同じ方法です。 同じ場所に保持してから、`newName` パラメータを定義することができます。 + +次の操作はできません。 + +- ディレクトリ自体を移動するか、任意の深さの任意の子に移動する +- 現在のエントリと異なる名前が与えられていない場合は、エントリをその親に移動する +- ファイルをディレクトリが占有しているパスに移動する、またはディレクトリをファイルが占有するパスに移動する +- 空でないディレクトリが占めるパスに要素を移動します。 + +``` +FileSystemEntrySync moveTo ( + in DirectoryEntrySync parent, optional DOMString newName +) raises (FileException); +``` + +##### 引数 + +- parent + - : エントリを移動するディレクトリ。 +- newName + - : エントリの新しい名前。名前を指定しない場合、ブラウザはエントリの現在の名前を保持します。 + +##### 戻り値 + +- `FileSystemEntrySync` + - : ファイルシステム内のエントリを表すオブジェクト。 + +##### 例外 + +このメソッドは、次のコードで [FileException](/ja/DOM/File_API/File_System_API/FileException "en/DOM/File_API/File_System_API/FileException") が発生する可能性があります。 + + + + + + + + + + + + + + + + + + + + + + + + + + +
例外説明
ENCODING_ERR + 少なくとも1つの文字が予約されているかイレギュラーなので、指定された名前は無効です。 + 例には、バックスラッシュ (\)、ドット (.)、および2つのドット (..) + が含まれます。 +
NOT_FOUND_ERRターゲットディレクトリが存在しません。
INVALID_MODIFICATION_ERR +

次のいずれかの操作を試行しました:

+
    +
  • 名前を変更せずにエントリを親に移動する
  • +
  • + 親ディレクトリをその子ディレクトリの1つに移動する。[todo: verify] +
  • +
+
NO_MODIFICATION_ALLOWED_ERR + ソースエントリ、その親ディレクトリ、およびターゲットディレクトリのうち、いずれかが書き込み可能ではありません。 +
+ +### copyTo() + +エントリをファイルシステム上の別の場所にコピーします。エントリがディレクトリの場合は、そのエントリをコピーすることはできません。また、新しい名前を指定せずに親にコピーすることもできません。ディレクトリコピーは常に再帰的です。つまり、ディレクトリのすべての内容がコピーされます。この動作を変更することはできません。ファイルは単純に複製されます。 + +``` +void copyTo ( + in DirectoryEntrySync parent, optional DOMString newName +) raises (FileException); +``` + +##### 引数 + +- parent + - : エントリを移動するディレクトリ。 +- newName + - : エントリの新しい名前。名前を指定しない場合、ブラウザは FileSystemEntrySync の現在の名前を保持します。 + +##### 戻り値 + +- `FileSystemEntrySync` + - : ファイルシステム内のエントリを表すオブジェクト。 + +##### 例外 + +このメソッドは、次のコードで [FileException](/ja/DOM/File_API/File_System_API/FileException "en/DOM/File_API/File_System_API/FileException") が発生する可能性があります。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
例外説明
ENCODING_ERR + 少なくとも1つの文字が予約されているかイレギュラーなので、指定された名前は無効です。 + 例には、バックスラッシュ (\)、ドット (.)、および2つのドット (..) + が含まれます。 +
NOT_FOUND_ERRターゲットディレクトリが存在しません。
INVALID_MODIFICATION_ERR +

次のいずれかの操作を試行しました:

+
    +
  • 名前を変更せずにエントリを親に移動する
  • +
  • 親ディレクトリをその子ディレクトリの1つに移動する
  • +
+
NO_MODIFICATION_ALLOWED_ERR + ソースエントリ、その親ディレクトリ、およびターゲットディレクトリのうち、いずれかが書き込み可能ではありません。 +
QUOTA_EXCEEDED_ERR + この操作により、アプリケーションはストレージクォータを超過します。 + ユーザーが明示的に付与する必要があるより大きな永続ストレージを要求する可能性があります。詳細については、基本概念の記事を参照してください。 +
+ +### toURL() + +このエントリを識別するために使用できる URL を返します。これは `src` や `href` 属性を埋めるために使用できる新しい URL スキーム、 `filesystem:`を公開しています。たとえば、イメージを表示しその [fileEntry](/ja/DOM/File_API/File_System_API/FileEntry "en/DOM/File_API/File_System_API/FileEntry") を持つ場合、 `toURL()` を呼び出すと、イメージファイルのファイルシステム URL が得られます。 +あなたは `filesystem:http://example.com/temporary/lolcat.png` のようなものを手に入れます。 + +ファイルシステムの URL の有効期限はありません。このメソッドはディスク上の場所を記述しているため、URL はその場所が存在する限り有効です。あなたはファイルを削除して再作成することができます。 + +`mimeType` を指定すると、HTTP ダウンロードに関連付けられているオプションの MIME タイプヘッダーをシミュレートできます。 + +``` +DOMString toURL (); +``` + +##### 引数 + +
なし
+ +##### 戻り値 + +
DOMString
+ +##### 例外 + +なし + +### remove() + +ファイルまたはディレクトリを削除します。 空のディレクトリやファイルシステムのルートディレクトリは削除できません。 空のディレクトリを削除する場合は、代わりに [`removeRecursively()`]( "https://developer.mozilla.org/en/DOM/File_API/File_System_API/DirectoryEntrySync#removeRecursively()") を使用してください。 + +``` +void remove ( +) raises (FileException); +``` + +##### 引数 + +なし + +##### 戻り値 + +
void
+ +##### 例外 + +このメソッドは、次のコードと [FileException](/ja/docs/Web/API/FileException "en/DOM/File_API/File_System_API/FileException") を発生させることができます。 + +| 例外 | 説明 | +| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `NOT_FOUND_ERR` | ターゲットディレクトリが存在しません。 | +| `INVALID_MODIFICATION_ERR` | 空でないディレクトリを削除しようとしました。 空のディレクトリを削除する場合は、代わりに[`removeRecursively()`]( "https://developer.mozilla.org/en/DOM/File_API/File_System_API/DirectoryEntrySync#removeRecursively()") を使用してください。 | +| `NO_MODIFICATION_ALLOWED_ERR` | ソースエントリ、その親ディレクトリ、およびターゲットディレクトリのうち、いずれかが書き込み可能ではありません。 | + +### getParent() + +エントリを含む親 [`DirectoryEntrySync`](/ja/docs/Web/API/DirectoryEntrySync "https://developer.mozilla.org/en/DOM/File_API/File_System_API/DirectoryEntrySync") を調べます。このエントリがファイルシステムのルートである場合、親はそれ自身です。 + +``` +void getParent (); +``` + +##### 引数 + +なし + +##### 戻り値 + +- [`DirectoryEntrySync`](/ja/DOM/File_API/File_System_API/DirectoryEntrySync "en/DOM/File_API/File_System_API/DirectoryEntrySync") + - : ファイルシステム内のディレクトリを表すオブジェクト。 + +##### 例外 + +なし + +## ブラウザの互換性 + +{{Compat("api.FileSystemEntrySync")}} + +## あわせて参照 + +仕様:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }} + +リファレンス: [File System API](/ja/DOM/File_API/File_System_API "en/DOM/File_API/File_System_API") + +イントロダクション: [Basic Concepts About the File System API](/ja/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API "en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API") diff --git a/files/ja/conflicting/web/api/file_and_directory_entries_api_330e25ac325178c58fd9fba0601787e1/index.html b/files/ja/conflicting/web/api/file_and_directory_entries_api_330e25ac325178c58fd9fba0601787e1/index.html deleted file mode 100644 index 21921ce3eae992..00000000000000 --- a/files/ja/conflicting/web/api/file_and_directory_entries_api_330e25ac325178c58fd9fba0601787e1/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: LocalFileSystem -slug: >- - conflicting/Web/API/File_and_Directory_Entries_API_330e25ac325178c58fd9fba0601787e1 -translation_of: Web/API/LocalFileSystem -original_slug: Web/API/LocalFileSystem ---- -
{{APIRef("File System API")}}{{non-standard_header()}}
- -

File System APILocalFileSystem インターフェイスを使用すると、サンドボックスファイルシステムにアクセスできます。 これらのメソッドは、window オブジェクトと worker オブジェクトによって実装されます。

- -

基本のコンセプト

- -

このセクションには、メソッドの主要な概念がいくつか含まれています。

- -

新しいストレージの作成

- -

window.requestFileSystem() を呼び出すことで、サンドボックス化されたファイルシステムへのアクセスを要求します。コールバックに成功した場合の引数は FileSystem オブジェクトで、ファイルシステムの名前とルートの 2 つのプロパティを持ちます。

- -

一時的なものと永続的なものの 2 つのファイルシステムを作成したい場合は、このメソッドを複数回呼び出すことができます。(ストレージの種類についての詳細は、基本コンセプトの記事を参照してください)。ほとんどの場合、ファイルシステムを作成する必要があるのは 1 つだけですが、いくつかのケースでは 2 つ目のファイルシステムを作成した方が便利な場合もあります。例えば、メールアプリを作成する場合、パフォーマンスを高速化するためにアセット (画像や添付ファイルなど) をキャッシュするための一時的なストレージを作成し、一方で、オフラインで作成されたメールの下書きなど、クラウドにバックアップする前に失われてはならない固有のデータのために永続的なストレージを作成することができます。

- -

永続的なストレージの使用

- -

requestFileSystem() メソッドでは、PERSISTENT または TEMPORARY ストレージを要求することができます。永続的ストレージとは、アプリまたはユーザーが削除しない限り、ブラウザに保存されるストレージですが、使用するにはユーザーの許可が必要です。対照的に、一時的なストレージは、ユーザーの許可なしに自動的に許可されますが、ブラウザによっていつでも削除することができます。

- -

ファイルシステム API で PERSISTENT ストレージを使用するには、Chrome は requestQuota API を公開しています。そのため、ストレージをリクエストするには、次のようなことを行う必要があります。

- -
var requestedBytes = 1024*1024*10; // 10MB
-
-navigator.webkitPersistentStorage.requestQuota (
-    requestedBytes, function(grantedBytes) {
-        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
-
-    }, function(e) { console.log('Error', e); }
-);
-
- -

アプリが永続的ストレージを使用する前に、ユーザーがアプリにデータをローカルに保存する許可を与える必要があります。ユーザーが許可したら、requestQuota() を再度呼び出す必要はありません。それ以降の呼び出しは noop です。

- -

もう 1 つの API、クォータ管理 API では、window.webkitPersistentStorage.queryUsageAndQuota() を使用してオリジンの現在のクォータの使用量と割り当てを問い合わせることができます。詳細については、この StackOverflow のアンサーを参照してください。(API の古いバージョンについては、HTML5 オフライン ストレージの管理で説明しています)。

- -

単一のオリジン内での作業

- -

ファイルシステムは、単一のオリジンにサンドボックス化されています。これは、アプリが他のアプリのファイルを読み取ったり、書き込んだりすることができないことを意味します。アプリは、ユーザーのハード ドライブ上の任意のフォルダ(マイ ピクチャ、マイ ドキュメントなど)内のファイルにアクセスすることもできません。制限の詳細については、基本コンセプトの記事を参照してください。

- -

- -

以下は、ファイルシステムのストレージを要求する方法を示すコードスニペットです。

- -
//Taking care of the browser-specific prefix
-window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
-
-// The first parameter defines the type of storage: persistent or temporary
-// Next, set the size of space needed (in bytes)
-// initFs is the success callback
-// And the last one is the error callback
-// for denial of access and other errors.
-
-window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler);
-
- -

メソッド概要

- - - - - - - - - - -
void requestFileSystem (in unsigned short type, in unsigned long long size, in FileSystemCallback successCallback, in optional ErrorCallback errorCallback);
void resolveLocalFileSystemURL (in DOMString url, in EntryCallback successCallback, in optional ErrorCallback errorCallback);
- -

定数

- - - - - - - - - - - - - - - - - - - - - -
定数説明
TEMPORARY0 -

一時的なストレージで、ブラウザの裁量で削除することができます。

-
PERSISTENT1ユーザーまたはアプリがそれを消去しない限り、ブラウザに保存されているストレージ。アプリがこのタイプのストレージを使用するには、その前にユーザーに許可を与える必要があります。
- -

メソッド

- -

requestFileSystem()

- -

データが保存されるべきファイル システムを要求します。サンドボックス化されたファイルシステムにアクセスするには、このグローバルメソッド window.requestFileSystem() を使用して LocalFileSystem オブジェクトを要求します。

- -
void requestFileSystem(
-  in unsigned short type,
-  in unsigned long long size,
-  in FileSystemCallback successCallback,
-  in ErrorCallback errorCallback
-);
- -
パラメータ
- -
-
type
-
ファイルシステムのストレージタイプ。値は TEMPORARY または PERSISTENT のいずれかです。
-
size
-
アプリに必要なストレージ容量 (バイト単位)。
-
successCallback
-
ブラウザがファイルシステムを提供したときに呼び出される成功コールバック。その引数は、2つのプロパティを持つ FileSystem オブジェクトです。 -
    -
  • name - ブラウザがファイルシステムに割り当てる一意の名前
  • -
  • root - ファイルシステムのルートを表す読み取り専用の DirectoryEntry オブジェクト
  • -
-
-
opt_errorCallback
-
エラーが発生したとき、またはファイルシステムの取得要求が拒否されたときに呼び出されるエラーコールバックです。引数は FileError オブジェクトです。
-
- -
戻り値
- -
-
void
-
- -
例外
- -

このメソッドは、以下のコードで FileError が発生する可能性があります。

- - - - - - - - - - - - -
例外説明
SECURITY_ERRORこのアプリケーションは、ファイルシステムインターフェイスにアクセスする権限を持っていません。例えば、file:// からは実行できません。詳細については、基本的な考え方の記事を参照してください。
- -

resolveLocalFileSystemURL()

- -

ローカル URL でファイルやディレクトリのエントリを検索できます。

- -
void resolveLocalFileSystemURL(
-  in DOMString url,
-  in EntryCallback successCallback,
-  in optional ErrorCallback errorCallback
-);
-
- -
パラメータ
- -
-
url
-
ファイルシステム内のローカルファイルの URL。
-
successCallback
-
ブラウザが指定した URL のファイルまたはディレクトリを提供したときに呼び出される success コールバック。
-
errorCallback
-
エラーが発生したとき、またはエントリオブジェクトの取得要求が拒否されたときに呼び出される error コールバック。
-
- -
戻り値
- -
-
void
-
- -
例外
- -

このメソッドは、以下のコードで FileError が発生する可能性があります。

- - - - - - - - - - - - - - - - - - - - - - -
例外説明
ENCODING_ERRURL の構文が無効でした。
NOT_FOUND_ERRURL は構造的には正しいのですが、存在しないリソースを参照しています。
SECURITY_ERRこのアプリケーションは、ファイルシステムインターフェイスにアクセスする権限を持っていません。
- -

ブラウザの互換性

- -

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

- -

あわせて参照

- -

仕様書:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}

- -

リファレンス: File System API

- -

イントロダクション: Basic Concepts About the File System API

diff --git a/files/ja/conflicting/web/api/file_and_directory_entries_api_330e25ac325178c58fd9fba0601787e1/index.md b/files/ja/conflicting/web/api/file_and_directory_entries_api_330e25ac325178c58fd9fba0601787e1/index.md new file mode 100644 index 00000000000000..7cee0e7040f64c --- /dev/null +++ b/files/ja/conflicting/web/api/file_and_directory_entries_api_330e25ac325178c58fd9fba0601787e1/index.md @@ -0,0 +1,165 @@ +--- +title: LocalFileSystem +slug: >- + conflicting/Web/API/File_and_Directory_Entries_API_330e25ac325178c58fd9fba0601787e1 +translation_of: Web/API/LocalFileSystem +original_slug: Web/API/LocalFileSystem +--- +{{APIRef("File System API")}}{{non-standard_header()}} + +[File System API](/ja/DOM/File_API/File_System_API "en/DOM/File_API/File_System_APIB") の `LocalFileSystem` インターフェイスを使用すると、サンドボックスファイルシステムにアクセスできます。 これらのメソッドは、[window](/ja/docs/Web/API/Window) オブジェクトと [worker](/ja/docs/Web/API/Worker) オブジェクトによって実装されます。 + +## 基本のコンセプト + +このセクションには、メソッドの主要な概念がいくつか含まれています。 + +### 新しいストレージの作成 + +`window.requestFileSystem()` を呼び出すことで、サンドボックス化されたファイルシステムへのアクセスを要求します。コールバックに成功した場合の引数は [`FileSystem`](/ja/docs/Web/API/FileSystem) オブジェクトで、ファイルシステムの名前とルートの 2 つのプロパティを持ちます。 + +一時的なものと永続的なものの 2 つのファイルシステムを作成したい場合は、このメソッドを複数回呼び出すことができます。(ストレージの種類についての詳細は、[基本コンセプト](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction#Restrictions)の記事を参照してください)。ほとんどの場合、ファイルシステムを作成する必要があるのは 1 つだけですが、いくつかのケースでは 2 つ目のファイルシステムを作成した方が便利な場合もあります。例えば、メールアプリを作成する場合、パフォーマンスを高速化するためにアセット (画像や添付ファイルなど) をキャッシュするための一時的なストレージを作成し、一方で、オフラインで作成されたメールの下書きなど、クラウドにバックアップする前に失われてはならない固有のデータのために永続的なストレージを作成することができます。 + +### 永続的なストレージの使用 + +`requestFileSystem()` メソッドでは、[`PERSISTENT` または `TEMPORARY` ストレージ](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction#The_File_System_API_can_use_different_storage_types)を要求することができます。永続的ストレージとは、アプリまたはユーザーが削除しない限り、ブラウザに保存されるストレージですが、使用するにはユーザーの許可が必要です。対照的に、一時的なストレージは、ユーザーの許可なしに自動的に許可されますが、ブラウザによっていつでも削除することができます。 + +ファイルシステム API で `PERSISTENT` ストレージを使用するには、Chrome は requestQuota API を公開しています。そのため、ストレージをリクエストするには、次のようなことを行う必要があります。 + +``` +var requestedBytes = 1024*1024*10; // 10MB + +navigator.webkitPersistentStorage.requestQuota ( + requestedBytes, function(grantedBytes) { + window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); + + }, function(e) { console.log('Error', e); } +); +``` + +アプリが永続的ストレージを使用する前に、ユーザーがアプリにデータをローカルに保存する許可を与える必要があります。ユーザーが許可したら、`requestQuota()` を再度呼び出す必要はありません。それ以降の呼び出しは noop です。 + +もう 1 つの API、クォータ管理 API では、`window.webkitPersistentStorage.queryUsageAndQuota()` を使用してオリジンの現在のクォータの使用量と割り当てを問い合わせることができます。詳細については、この [StackOverflow のアンサー](http://stackoverflow.com/a/29662985/89484)を参照してください。(API の古いバージョンについては、[HTML5 オフライン ストレージの管理](https://developer.chrome.com/apps/offline_storage?csw=1)で説明しています)。 + +### 単一のオリジン内での作業 + +ファイルシステムは、単一のオリジンにサンドボックス化されています。これは、アプリが他のアプリのファイルを読み取ったり、書き込んだりすることができないことを意味します。アプリは、ユーザーのハード ドライブ上の任意のフォルダ(マイ ピクチャ、マイ ドキュメントなど)内のファイルにアクセスすることもできません。制限の詳細については、[基本コンセプト](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction#Restrictions)の記事を参照してください。 + +### 例 + +以下は、ファイルシステムのストレージを要求する方法を示すコードスニペットです。 + +```js +//Taking care of the browser-specific prefix +window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; + +// The first parameter defines the type of storage: persistent or temporary +// Next, set the size of space needed (in bytes) +// initFs is the success callback +// And the last one is the error callback +// for denial of access and other errors. + +window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); +``` + +## メソッド概要 + +| `void requestFileSystem (in unsigned short type, in unsigned long long size, in FileSystemCallback successCallback, in optional ErrorCallback errorCallback);` | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `void resolveLocalFileSystemURL (in DOMString url, in EntryCallback successCallback, in optional ErrorCallback errorCallback);` | + +## 定数 + +| 定数 | 値 | 説明 | +| ------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `TEMPORARY` | `0` | 一時的なストレージで、ブラウザの裁量で削除することができます。 | +| `PERSISTENT` | `1` | ユーザーまたはアプリがそれを消去しない限り、ブラウザに保存されているストレージ。アプリがこのタイプのストレージを使用するには、その前にユーザーに許可を与える必要があります。 | + +## メソッド + +### requestFileSystem() + +データが保存されるべきファイル システムを要求します。サンドボックス化されたファイルシステムにアクセスするには、このグローバルメソッド `window.requestFileSystem()` を使用して `LocalFileSystem` オブジェクトを要求します。 + +``` +void requestFileSystem( + in unsigned short type, + in unsigned long long size, + in FileSystemCallback successCallback, + in ErrorCallback errorCallback +); +``` + +##### パラメータ + +- type + - : ファイルシステムのストレージタイプ。値は [`TEMPORARY`](#const_temporary) または [`PERSISTENT`](#const_persistent) のいずれかです。 +- size + - : アプリに必要なストレージ容量 (バイト単位)。 +- successCallback + + - : ブラウザがファイルシステムを提供したときに呼び出される成功コールバック。その引数は、2 つのプロパティを持つ [`FileSystem`](/ja/docs/Web/API/FileSystem) オブジェクトです。 + + - name - ブラウザがファイルシステムに割り当てる一意の名前 + - root - ファイルシステムのルートを表す読み取り専用の `DirectoryEntry` オブジェクト + +- opt_errorCallback + - : エラーが発生したとき、またはファイルシステムの取得要求が拒否されたときに呼び出されるエラーコールバックです。引数は `FileError` オブジェクトです。 + +##### 戻り値 + +
void
+ +##### 例外 + +このメソッドは、以下のコードで [FileError](/ja/docs/Web/API/FileError) が発生する可能性があります。 + +| 例外 | 説明 | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `SECURITY_ERROR` | このアプリケーションは、ファイルシステムインターフェイスにアクセスする権限を持っていません。例えば、`file://` からは実行できません。詳細については、[基本的な考え方の記事](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction#You_cannot_run_your_app_from_file:.2F.2F)を参照してください。 | + +### resolveLocalFileSystemURL() + +ローカル URL でファイルやディレクトリのエントリを検索できます。 + +``` +void resolveLocalFileSystemURL( + in DOMString url, + in EntryCallback successCallback, + in optional ErrorCallback errorCallback +); +``` + +##### パラメータ + +- url + - : ファイルシステム内のローカルファイルの URL。 +- successCallback + - : ブラウザが指定した URL のファイルまたはディレクトリを提供したときに呼び出される success コールバック。 +- errorCallback + - : エラーが発生したとき、またはエントリオブジェクトの取得要求が拒否されたときに呼び出される error コールバック。 + +##### 戻り値 + +
void
+ +##### 例外 + +このメソッドは、以下のコードで [FileError](/ja/docs/Web/API/FileError) が発生する可能性があります。 + +| 例外 | 説明 | +| --------------- | -------------------------------------------------------------------------------------------- | +| `ENCODING_ERR` | URL の構文が無効でした。 | +| `NOT_FOUND_ERR` | URL は構造的には正しいのですが、存在しないリソースを参照しています。 | +| `SECURITY_ERR` | このアプリケーションは、ファイルシステムインターフェイスにアクセスする権限を持っていません。 | + +## ブラウザの互換性 + +{{Compat("api.LocalFileSystem")}} + +## あわせて参照 + +仕様書:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }} + +リファレンス: [File System API](/ja/DOM/File_API/File_System_API "en/DOM/File_API/File_System_API") + +イントロダクション: [Basic Concepts About the File System API](/ja/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API "en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API") diff --git a/files/ja/conflicting/web/api/file_and_directory_entries_api_b98af8eade9a709904ec6e38c4e7c98a/index.html b/files/ja/conflicting/web/api/file_and_directory_entries_api_b98af8eade9a709904ec6e38c4e7c98a/index.html deleted file mode 100644 index 3cfb863126b04d..00000000000000 --- a/files/ja/conflicting/web/api/file_and_directory_entries_api_b98af8eade9a709904ec6e38c4e7c98a/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: LocalFileSystemSync -slug: >- - conflicting/Web/API/File_and_Directory_Entries_API_b98af8eade9a709904ec6e38c4e7c98a -tags: - - API - - File API - - File System API - - オフライン - - ファイルシステム - - リファレンス -translation_of: Web/API/LocalFileSystemSync -original_slug: Web/API/LocalFileSystemSync ---- -
{{APIRef("File System API")}}{{non-standard_header()}}
- -

The LocalFileSystemSync interface of the File System API gives you access to a sandboxed file system. It is intended to be used with WebWorkers. The methods are implemented by worker objects.

- -

この文書について

- -

このドキュメントは 2012年3月2日に最後に更新され、2011年4月19日に作成された W3C の仕様 (作業中のドラフト) に準拠しています。

- -

この仕様は現在放棄されており、大きな牽引力を得ることはできません。

- -

基本概念

- -

Web Worker 内から LocalFileSystemSync オブジェクトを要求することで、サンドボックス化されたファイルシステムへのアクセスを要求することができます。window オブジェクトの requestFileSystemSync() メソッドと resolveLocalFileSystemSyncURL() メソッドのグローバル メソッドは、Worker のグローバル スコープに公開されます。window.requestFileSystemSync() を呼び出すと、Web アプリのための新しいストレージが作成されます。

- -

より多くの概念については、非同期APIの対応する記事を参照してください。

- -

- -
// ブラウザ固有のプレフィックスの扱い
-window.requestFileSystemSync  = window.requestFileSystemSync || window.webkitRequestFileSystemSync;
-
-// The first parameter defines the type of storage: persistent or temporary
-// Next, set the size of space needed (in bytes)
-// initFs is the success callback
-// And the last one is the error callback
-// for denial of access and other errors.
-
-var fs = requestFileSystemSync(TEMPORARY, 1024*1024 /*1MB*/);
- -

同期APIを使用しているので、成功とエラーのコールバックは必要ありません。

- -

メソッド概要

- - - - - - - - - - -
FileSystemSync requestFileSystemSync (in unsigned short type, in long long size) raises FileException;
EntrySync resolveLocalFileSystemSyncURL (in DOMString url) raises FileException;
- -

定数

- - - - - - - - - - - - - - - - - - - - - -
定数説明
TEMPORARY0 -

ブラウザの裁量で削除できる過渡的なストレージ。

-
PERSISTENT1ユーザーやアプリが削除しない限り、ブラウザに残るストレージ。
- -

メソッド

- -

requestFileSystemSync()

- -

データが保存されるべきファイルシステムを要求します。このグローバル メソッド window.requestFileSystemSync() を使用して、Web ワーカー内から LocalFileSystemSync オブジェクトを要求することで、サンドボックス化されたファイルシステムにアクセスします。[ RESEARCH ]

- -
FileSystemSync requestFileSystemSync(
-  in unsigned short type,
-  in unsigned long long size
-);
- -
パラメータ
- -
-
type
-
ファイルシステムのストレージタイプ。値は、TEMPORARY または PERSISTENT のいずれかです。
-
size
-
アプリに必要なストレージ容量 (バイト単位)。
-
- -
戻り値
- -
-
FileSystemSync
-
ファイルシステムを表すオブジェクト。
-
- -
例外
- -

このメソッドは、以下のコードで FileException が発生する可能性があります。

- - - - - - - - - - - - -
例外説明
SECURITY_ERRORこのアプリケーションは、ファイルシステムインターフェイスにアクセスする権限を持っていません。例えば、file:// からは実行できません。詳細については、基本的な考え方の記事を参照してください。
- -

resolveLocalFileSystemSyncURL()

- -

ローカル URL で参照されたファイルやディレクトリの Entry を検索します。

- -
void resolveLocalFileSystemURL(
-  in DOMString url
-);
- -
パラメータ
- -
-
url
-
ファイルシステム内のローカルファイルの URL。
-
- -
戻り値
- -
-
EntrySync
-
ファイルシステム内のエントリを表すオブジェクト。
-
- -
例外
- -

このメソッドは、以下のコードで FileException が発生する可能性があります。

- - - - - - - - - - - - - - - - - - - - - - -
例外説明
ENCODING_ERRURL の構文が無効でした。
NOT_FOUND_ERRURL は構造的には正しいのですが、存在しないリソースを参照しています。
SECURITY_ERRこのアプリケーションは、ファイルシステムインターフェイスにアクセスする権限を持っていません。
- -

ブラウザの互換性

- -

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

- -

あわせて参照

- -

Specification:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}

- -

Reference: File System API

- -

Introduction: Basic Concepts About the File System API

diff --git a/files/ja/conflicting/web/api/file_and_directory_entries_api_b98af8eade9a709904ec6e38c4e7c98a/index.md b/files/ja/conflicting/web/api/file_and_directory_entries_api_b98af8eade9a709904ec6e38c4e7c98a/index.md new file mode 100644 index 00000000000000..3105a84fe2a8b9 --- /dev/null +++ b/files/ja/conflicting/web/api/file_and_directory_entries_api_b98af8eade9a709904ec6e38c4e7c98a/index.md @@ -0,0 +1,134 @@ +--- +title: LocalFileSystemSync +slug: >- + conflicting/Web/API/File_and_Directory_Entries_API_b98af8eade9a709904ec6e38c4e7c98a +tags: + - API + - File API + - File System API + - オフライン + - ファイルシステム + - リファレンス +translation_of: Web/API/LocalFileSystemSync +original_slug: Web/API/LocalFileSystemSync +--- +{{APIRef("File System API")}}{{non-standard_header()}} + +The `LocalFileSystemSync` interface of the [File System API](/ja/DOM/File_API/File_System_API "en/DOM/File_API/File_System_APIB") gives you access to a sandboxed file system. It is intended to be used with [WebWorkers](/ja/DOM/Worker "en/DOM/Worker"). The methods are implemented by [worker](/ja/DOM/Worker "En/DOM/Worker") objects. + +## この文書について + +このドキュメントは 2012 年 3 月 2 日に最後に更新され、2011 年 4 月 19 日に作成された [W3C の仕様 (作業中のドラフト)](http://www.w3.org/TR/file-system-api/) に準拠しています。 + +この仕様は現在放棄されており、大きな牽引力を得ることはできません。 + +## 基本概念 + +Web Worker 内から `LocalFileSystemSync` オブジェクトを要求することで、サンドボックス化されたファイルシステムへのアクセスを要求することができます。`window` オブジェクトの `requestFileSystemSync()` メソッドと `resolveLocalFileSystemSyncURL()` メソッドのグローバル メソッドは、Worker のグローバル スコープに公開されます。`window.requestFileSystemSync()` を呼び出すと、Web アプリのための新しいストレージが作成されます。 + +より多くの概念については、[非同期 API の対応する記事](/ja/docs/Web/API/LocalFileSystem#Basic_concepts)を参照してください。 + +### 例 + +```js +// ブラウザ固有のプレフィックスの扱い +window.requestFileSystemSync = window.requestFileSystemSync || window.webkitRequestFileSystemSync; + +// The first parameter defines the type of storage: persistent or temporary +// Next, set the size of space needed (in bytes) +// initFs is the success callback +// And the last one is the error callback +// for denial of access and other errors. + +var fs = requestFileSystemSync(TEMPORARY, 1024*1024 /*1MB*/); +``` + +同期 API を使用しているので、成功とエラーのコールバックは必要ありません。 + +## メソッド概要 + +| `FileSystemSync requestFileSystemSync (in unsigned short type, in long long size) raises FileException;` | +| -------------------------------------------------------------------------------------------------------- | +| `EntrySync resolveLocalFileSystemSyncURL (in DOMString url) raises FileException;` | + +## 定数 + +| 定数 | 値 | 説明 | +| ------------ | --- | ------------------------------------------------------------ | +| `TEMPORARY` | `0` | ブラウザの裁量で削除できる過渡的なストレージ。 | +| `PERSISTENT` | `1` | ユーザーやアプリが削除しない限り、ブラウザに残るストレージ。 | + +## メソッド + +### requestFileSystemSync() + +データが保存されるべきファイルシステムを要求します。このグローバル メソッド `window.requestFileSystemSync()` を使用して、Web ワーカー内から `LocalFileSystemSync` オブジェクトを要求することで、サンドボックス化されたファイルシステムにアクセスします。\[ RESEARCH ] + +``` +FileSystemSync requestFileSystemSync( + in unsigned short type, + in unsigned long long size +); +``` + +##### パラメータ + +- type + - : ファイルシステムのストレージタイプ。値は、[`TEMPORARY`](/ja/docs/Web/API/LocalFileSystemSync#const_temporary) または [`PERSISTENT`](/ja/docs/Web/API/LocalFileSystemSync#const_persistent) のいずれかです。 +- size + - : アプリに必要なストレージ容量 (バイト単位)。 + +##### 戻り値 + +- [`FileSystemSync`](/ja/DOM/File_API/File_System_API/FileSystemSync "en/DOM/File_API/File_System_API/FileSystemSync") + - : ファイルシステムを表すオブジェクト。 + +##### 例外 + +このメソッドは、以下のコードで [FileException](/ja/docs/Web/API/FileException) が発生する可能性があります。 + +| 例外 | 説明 | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `SECURITY_ERROR` | このアプリケーションは、ファイルシステムインターフェイスにアクセスする権限を持っていません。例えば、`file://` からは実行できません。詳細については、[基本的な考え方の記事](/ja/docs/Web/API/File_and_Directory_Entries_API/Introduction#You_cannot_run_your_app_from_file:.2F.2F)を参照してください。 | + +### resolveLocalFileSystemSyncURL() + +ローカル URL で参照されたファイルやディレクトリの `Entry` を検索します。 + +``` +void resolveLocalFileSystemURL( + in DOMString url +); +``` + +##### パラメータ + +- url + - : ファイルシステム内のローカルファイルの URL。 + +##### 戻り値 + +- [`EntrySync`](/ja/DOM/File_API/File_System_API/EntrySync "en/DOM/File_API/File_System_API/EntrySync") + - : ファイルシステム内のエントリを表すオブジェクト。 + +##### 例外 + +このメソッドは、以下のコードで [FileException](/ja/docs/Web/API/FileException) が発生する可能性があります。 + +| 例外 | 説明 | +| --------------- | -------------------------------------------------------------------------------------------- | +| `ENCODING_ERR` | URL の構文が無効でした。 | +| `NOT_FOUND_ERR` | URL は構造的には正しいのですが、存在しないリソースを参照しています。 | +| `SECURITY_ERR` | このアプリケーションは、ファイルシステムインターフェイスにアクセスする権限を持っていません。 | + +## ブラウザの互換性 + +{{Compat("api.LocalFileSystemSync")}} + +## あわせて参照 + +Specification:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }} + +Reference: [File System API](/ja/DOM/File_API/File_System_API "en/DOM/File_API/File_System_API") + +Introduction: [Basic Concepts About the File System API](/ja/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API "en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API") diff --git a/files/ja/conflicting/web/api/filereader/abort_event/index.html b/files/ja/conflicting/web/api/filereader/abort_event/index.html deleted file mode 100644 index 9aef093dc44c09..00000000000000 --- a/files/ja/conflicting/web/api/filereader/abort_event/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: FileReader.onabort -slug: conflicting/Web/API/FileReader/abort_event -tags: - - Event Handler - - File - - FileReader - - Property - - Reference -translation_of: Web/API/FileReader/onabort -original_slug: Web/API/FileReader/onabort ---- -

FileReader.onabort プロパティには、abort イベントが発生したとき、つまりファイルの読み取り処理が中止されたときに実行されるイベント ハンドラが含まれています。

- -

シンタックス

- -
reader.onabort = function() { ... };
diff --git a/files/ja/conflicting/web/api/filereader/abort_event/index.md b/files/ja/conflicting/web/api/filereader/abort_event/index.md new file mode 100644 index 00000000000000..d933fa96160d60 --- /dev/null +++ b/files/ja/conflicting/web/api/filereader/abort_event/index.md @@ -0,0 +1,19 @@ +--- +title: FileReader.onabort +slug: conflicting/Web/API/FileReader/abort_event +tags: + - Event Handler + - File + - FileReader + - Property + - Reference +translation_of: Web/API/FileReader/onabort +original_slug: Web/API/FileReader/onabort +--- +**`FileReader.onabort`** プロパティには、[`abort`](/ja/docs/Web/Events/abort) イベントが発生したとき、つまりファイルの読み取り処理が中止されたときに実行されるイベント ハンドラが含まれています。 + +## シンタックス + +```js +reader.onabort = function() { ... }; +``` diff --git a/files/ja/conflicting/web/api/filereader/error_event/index.html b/files/ja/conflicting/web/api/filereader/error_event/index.html deleted file mode 100644 index 60f4d3d99cb84c..00000000000000 --- a/files/ja/conflicting/web/api/filereader/error_event/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: onerror -slug: conflicting/Web/API/FileReader/error_event -translation_of: Web/API/FileReader/onerror -original_slug: Web/API/FileReader/onerror ---- -

FileReader の onerror ハンドラは、Error オブジェクトではなく Event オブジェクトをパラメータとして受け取りますが、エラーは FileReader オブジェクトから instanceOfFileReader.error のようにアクセスすることができます。

- -
// <input type="file" onchange="onChange(event)"> からのコールバック
-function onChange(event) {
-  var file = event.target.files[0];
-  var reader = new FileReader();
-  reader.onerror = function(event) {
-    alert("ファイルの読み込みに失敗しました。\n\n" + reader.error);
-    reader.abort(); // (...これは onerror ハンドラで何か有用なことをするのでしょうか?)
-  };
-
-  reader.readAsText(file);
-}
diff --git a/files/ja/conflicting/web/api/filereader/error_event/index.md b/files/ja/conflicting/web/api/filereader/error_event/index.md new file mode 100644 index 00000000000000..93d22e7eb382c0 --- /dev/null +++ b/files/ja/conflicting/web/api/filereader/error_event/index.md @@ -0,0 +1,21 @@ +--- +title: onerror +slug: conflicting/Web/API/FileReader/error_event +translation_of: Web/API/FileReader/onerror +original_slug: Web/API/FileReader/onerror +--- +[FileReader](/ja/docs/Web/API/FileReader) の onerror ハンドラは、Error オブジェクトではなく Event オブジェクトをパラメータとして受け取りますが、エラーは FileReader オブジェクトから [`instanceOfFileReader.error`](/ja/docs/Web/API/FileReader/error) のようにアクセスすることができます。 + +```js +// からのコールバック +function onChange(event) { + var file = event.target.files[0]; + var reader = new FileReader(); + reader.onerror = function(event) { + alert("ファイルの読み込みに失敗しました。\n\n" + reader.error); + reader.abort(); // (...これは onerror ハンドラで何か有用なことをするのでしょうか?) + }; + + reader.readAsText(file); +} +``` diff --git a/files/ja/conflicting/web/api/filereader/load_event/index.html b/files/ja/conflicting/web/api/filereader/load_event/index.html deleted file mode 100644 index 0dd765290c53b1..00000000000000 --- a/files/ja/conflicting/web/api/filereader/load_event/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: FileReader.onload -slug: conflicting/Web/API/FileReader/load_event -tags: - - Event Handler - - File - - FileReader - - Property - - Reference -translation_of: Web/API/FileReader/onload -original_slug: Web/API/FileReader/onload ---- -

{{APIRef}}

- -

FileReader.onload プロパティは、readAsArrayBufferreadAsBinaryStringreadAsDataURLreadAsText でのコンテンツ読み込みが完了して、利用可能になると発火する {{event('load')}} イベント時に実行されるイベントハンドラを含みます。

- -

- -
// <input type="file" onchange="onChange(event)"> からのコールバック
-function onChange(event) {
-  var file = event.target.files[0];
-  var reader = new FileReader();
-  reader.onload = function(event) {
-    // ファイルのテキストがここにプリントされる
-    console.log(event.target.result)
-  };
-
-  reader.readAsText(file);
-}
-
diff --git a/files/ja/conflicting/web/api/filereader/load_event/index.md b/files/ja/conflicting/web/api/filereader/load_event/index.md new file mode 100644 index 00000000000000..99363235328a3e --- /dev/null +++ b/files/ja/conflicting/web/api/filereader/load_event/index.md @@ -0,0 +1,31 @@ +--- +title: FileReader.onload +slug: conflicting/Web/API/FileReader/load_event +tags: + - Event Handler + - File + - FileReader + - Property + - Reference +translation_of: Web/API/FileReader/onload +original_slug: Web/API/FileReader/onload +--- +{{APIRef}} + +**`FileReader.onload`** プロパティは、[readAsArrayBuffer](/ja/docs/Web/API/FileReader/readAsArrayBuffer) や [readAsBinaryString](/ja/docs/Web/API/FileReader/readAsBinaryString)、 [readAsDataURL](/ja/docs/Web/API/FileReader/readAsDataURL)、[readAsText](/ja/docs/Web/API/FileReader/readAsText) でのコンテンツ読み込みが完了して、利用可能になると発火する {{event('load')}} イベント時に実行されるイベントハンドラを含みます。 + +## 例 + +```js +// からのコールバック +function onChange(event) { + var file = event.target.files[0]; + var reader = new FileReader(); + reader.onload = function(event) { + // ファイルのテキストがここにプリントされる + console.log(event.target.result) + }; + + reader.readAsText(file); +} +``` diff --git a/files/ja/conflicting/web/api/formdata/index.html b/files/ja/conflicting/web/api/formdata/index.html deleted file mode 100644 index 6fe41d4b7a95c5..00000000000000 --- a/files/ja/conflicting/web/api/formdata/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: FormDataEntryValue -slug: conflicting/Web/API/FormData -tags: - - FormDataEntryValue -translation_of: Web/API/FormDataEntryValue -original_slug: Web/API/FormDataEntryValue ---- -
{{APIRef("XMLHttpRequest")}}
- -

string で、一連の {{domxref("FormData")}} のキーと値の組のうちの一つの値を表します。

- -

この型は {{domxref("FormData.get()")}} および {{domxref("FormData.getAll()")}} メソッドが返します。 {{domxref("FormData.get()")}} メソッドが単一の値を返すのに対して、 {{domxref("FormData.getAll()")}}FormDataEntryValue の配列を返します。

diff --git a/files/ja/conflicting/web/api/formdata/index.md b/files/ja/conflicting/web/api/formdata/index.md new file mode 100644 index 00000000000000..82ee901a8ce585 --- /dev/null +++ b/files/ja/conflicting/web/api/formdata/index.md @@ -0,0 +1,13 @@ +--- +title: FormDataEntryValue +slug: conflicting/Web/API/FormData +tags: + - FormDataEntryValue +translation_of: Web/API/FormDataEntryValue +original_slug: Web/API/FormDataEntryValue +--- +{{APIRef("XMLHttpRequest")}} + +`string` で、一連の `{{domxref("FormData")}}` のキーと値の組のうちの一つの値を表します。 + +この型は `{{domxref("FormData.get()")}}` および `{{domxref("FormData.getAll()")}}` メソッドが返します。 `{{domxref("FormData.get()")}}` メソッドが単一の値を返すのに対して、 `{{domxref("FormData.getAll()")}}` は `FormDataEntryValue` の配列を返します。 diff --git a/files/ja/conflicting/web/api/geolocation/getcurrentposition/index.html b/files/ja/conflicting/web/api/geolocation/getcurrentposition/index.html deleted file mode 100644 index d6fa430bb2d120..00000000000000 --- a/files/ja/conflicting/web/api/geolocation/getcurrentposition/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: PositionOptions -slug: conflicting/Web/API/Geolocation/getCurrentPosition -tags: - - API - - Geolocation API - - Interface - - PositionOptions - - Reference - - Secure context -translation_of: Web/API/PositionOptions -original_slug: Web/API/PositionOptions ---- -
-
{{securecontext_header}}{{APIRef("Geolocation API")}}
-
- -

PositionOptions インターフェイスは {{domxref("Geolocation.getCurrentPosition()")}} や {{domxref("Geolocation.watchPosition()")}} に渡すオプションプロパティを含んだオブジェクトを表します。

- -

プロパティ

- -

PositionOptions インターフェイスが継承するプロパティはありません。

- -
-
{{domxref("PositionOptions.enableHighAccuracy")}} {{securecontext_inline}}
-
アプリケーションが可能な限り高精度の結果を求めることを表す {{domxref("Boolean")}} 型の値です。このプロパティに true を指定すると、デバイスが高精度な位置情報を提供できる場合に、それを利用することができます。これによって測位結果の取得に時間がかかったり、 (GPS チップを搭載したモバイル端末などで) 電力消費が増える可能性があります。逆に false を指定することで、短時間で結果を返したり消費電力を節約したりといった選択をデバイスに任せることができます。デフォルトは false です。
-
{{domxref("PositionOptions.timeout")}} {{securecontext_inline}}
-
位置情報の取得にかかる時間の上限 (ミリ秒) を表す、 long 型の正の値です。デフォルトは Infinity で、位置情報が得られるまで getCurrentPosition() が待ち続けることを意味します。
-
{{domxref("PositionOptions.maximumAge")}} {{securecontext_inline}}
-
キャッシュ済みの位置情報の有効期限 (ミリ秒) を表す、 long 型の正の値です。これに 0 を指定すると、デバイスはキャッシュ済みの位置情報を返すことができず、常に最新の位置情報を取得しようとします。Infinity を指定した場合、デバイスは常にキャッシュから位置情報を返します。デフォルトは 0 です。
-
- -

メソッド

- -

PositionOptions インターフェイスが実装・継承するメソッドはありません。

- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}{{Spec2('Geolocation')}}最初の定義
- -

ブラウザ実装状況

- -

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

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/geolocation/getcurrentposition/index.md b/files/ja/conflicting/web/api/geolocation/getcurrentposition/index.md new file mode 100644 index 00000000000000..c954bbf3917a59 --- /dev/null +++ b/files/ja/conflicting/web/api/geolocation/getcurrentposition/index.md @@ -0,0 +1,46 @@ +--- +title: PositionOptions +slug: conflicting/Web/API/Geolocation/getCurrentPosition +tags: + - API + - Geolocation API + - Interface + - PositionOptions + - Reference + - Secure context +translation_of: Web/API/PositionOptions +original_slug: Web/API/PositionOptions +--- +{{securecontext_header}}{{APIRef("Geolocation API")}} + +**`PositionOptions`** インターフェイスは {{domxref("Geolocation.getCurrentPosition()")}} や {{domxref("Geolocation.watchPosition()")}} に渡すオプションプロパティを含んだオブジェクトを表します。 + +## プロパティ + +_`PositionOptions` インターフェイスが継承するプロパティはありません。_ + +- {{domxref("PositionOptions.enableHighAccuracy")}} {{securecontext_inline}} + - : アプリケーションが可能な限り高精度の結果を求めることを表す {{domxref("Boolean")}} 型の値です。このプロパティに `true` を指定すると、デバイスが高精度な位置情報を提供できる場合に、それを利用することができます。これによって測位結果の取得に時間がかかったり、 (GPS チップを搭載したモバイル端末などで) 電力消費が増える可能性があります。逆に `false` を指定することで、短時間で結果を返したり消費電力を節約したりといった選択をデバイスに任せることができます。デフォルトは `false` です。 +- {{domxref("PositionOptions.timeout")}} {{securecontext_inline}} + - : 位置情報の取得にかかる時間の上限 (ミリ秒) を表す、 `long` 型の正の値です。デフォルトは [`Infinity`](/ja/docs/JavaScript/Reference/Global_Objects/Infinity) で、位置情報が得られるまで `getCurrentPosition()` が待ち続けることを意味します。 +- {{domxref("PositionOptions.maximumAge")}} {{securecontext_inline}} + - : キャッシュ済みの位置情報の有効期限 (ミリ秒) を表す、 `long` 型の正の値です。これに `0` を指定すると、デバイスはキャッシュ済みの位置情報を返すことができず、常に最新の位置情報を取得しようとします。[`Infinity`](/ja/docs/JavaScript/Reference/Global_Objects/Infinity) を指定した場合、デバイスは常にキャッシュから位置情報を返します。デフォルトは 0 です。 + +## メソッド + +`PositionOptions` インターフェイスが実装・継承するメソッドはありません。 + +## 仕様 + +| 仕様書 | 策定状況 | コメント | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ---------- | +| {{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}} | {{Spec2('Geolocation')}} | 最初の定義 | + +## ブラウザ実装状況 + +{{Compat("api.PositionOptions")}} + +## 関連情報 + +- [Geolocation の利用](/ja/docs/WebAPI/Using_geolocation) +- {{domxref("Geolocation")}} インターフェイス diff --git a/files/ja/conflicting/web/api/htmlelement/change_event/index.html b/files/ja/conflicting/web/api/htmlelement/change_event/index.html deleted file mode 100644 index e62eb5e51dbadf..00000000000000 --- a/files/ja/conflicting/web/api/htmlelement/change_event/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: GlobalEventHandlers.onchange -slug: conflicting/Web/API/HTMLElement/change_event -tags: - - API - - Event Handler - - GlobalEventHandlers - - HTML DOM - - Property - - Reference -translation_of: Web/API/GlobalEventHandlers/onchange -original_slug: Web/API/GlobalEventHandlers/onchange ---- -
{{ApiRef("HTML DOM")}}
- -

{{domxref("GlobalEventHandlers")}} ミックスインの onchange プロパティは、change イベントを処理する {{event("Event_handlers", "event handler")}} です。

- -

change イベントはユーザーがフォームコントロールの値を変更した時に発生します。これは例えば、コントロールの外側をクリックしたり Tab キーで別のコントロールへ切り替えたりすることにより行われることがあります。

- -
-

注記: {{domxref("GlobalEventHandlers.oninput", "oninput")}} と異なり、onchange イベントハンドラーは、各要素の value が変化するたびに呼び出される必要がありません。

-
- -

構文

- -
target.onchange = functionRef;
-
- -

functionRef は関数名または 関数式 です。この関数は、{{domxref("Event")}} オブジェクトとその 1 個の引数を受け取ります。

- -

- -

この例は、{{HtmlElement("input")}} 要素のコンテンツを変更してフォーカスを要素から外す度に、その文字数をログ出力します。

- -

HTML

- -
<input type="text" placeholder="Type something here, then click outside of the field." size="50">
-<p id="log"></p>
- -

JavaScript

- -
let input = document.querySelector('input');
-let log = document.getElementById('log');
-
-input.onchange = handleChange;
-
-function handleChange(e) {
-  log.textContent = `The field's value is
-      ${e.target.value.length} character(s) long.`;
-}
- -

実行結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様

- - - - - - - - - - - - - - -
仕様書策定状況備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザー実装状況

- -
- - -

{{Compat("api.GlobalEventHandlers.onchange")}}

-
- -

関連項目

- -
    -
  • {{event("change")}} イベント
  • -
diff --git a/files/ja/conflicting/web/api/htmlelement/change_event/index.md b/files/ja/conflicting/web/api/htmlelement/change_event/index.md new file mode 100644 index 00000000000000..cbdb0cf656669c --- /dev/null +++ b/files/ja/conflicting/web/api/htmlelement/change_event/index.md @@ -0,0 +1,71 @@ +--- +title: GlobalEventHandlers.onchange +slug: conflicting/Web/API/HTMLElement/change_event +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onchange +original_slug: Web/API/GlobalEventHandlers/onchange +--- +{{ApiRef("HTML DOM")}} + +{{domxref("GlobalEventHandlers")}} ミックスインの **`onchange`** プロパティは、[`change`](/ja/docs/Web/API/HTMLElement/change_event) イベントを処理する {{event("Event_handlers", "event handler")}} です。 + +`change` イベントはユーザーがフォームコントロールの値を変更した時に発生します。これは例えば、コントロールの外側をクリックしたり Tab キーで別のコントロールへ切り替えたりすることにより行われることがあります。 + +> **Note:** **注記:** {{domxref("GlobalEventHandlers.oninput", "oninput")}} と異なり、`onchange` イベントハンドラーは、各要素の `value` が変化するたびに呼び出される必要がありません。 + +## 構文 + +``` +target.onchange = functionRef; +``` + +`functionRef` は関数名または [関数式](/ja/docs/Web/JavaScript/Reference/Operators/function) です。この関数は、{{domxref("Event")}} オブジェクトとその 1 個の引数を受け取ります。 + +## 例 + +この例は、{{HtmlElement("input")}} 要素のコンテンツを変更してフォーカスを要素から外す度に、その文字数をログ出力します。 + +### HTML + +```html + +

+``` + +### JavaScript + +```js +let input = document.querySelector('input'); +let log = document.getElementById('log'); + +input.onchange = handleChange; + +function handleChange(e) { + log.textContent = `The field's value is + ${e.target.value.length} character(s) long.`; +} +``` + +### 実行結果 + +{{EmbedLiveSample("Example")}} + +## 仕様 + +| 仕様書 | 策定状況 | 備考 | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---- | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザー実装状況 + +{{Compat("api.GlobalEventHandlers.onchange")}} + +## 関連項目 + +- {{event("change")}} イベント diff --git a/files/ja/conflicting/web/api/htmlelement/drag_event/index.html b/files/ja/conflicting/web/api/htmlelement/drag_event/index.html deleted file mode 100644 index 7cb0195f6e7153..00000000000000 --- a/files/ja/conflicting/web/api/htmlelement/drag_event/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: GlobalEventHandlers.ondrag -slug: conflicting/Web/API/HTMLElement/drag_event -tags: - - API - - HTML DOM - - Reference - - drag and drop -translation_of: Web/API/GlobalEventHandlers/ondrag -original_slug: Web/API/GlobalEventHandlers/ondrag ---- -
{{ApiRef("HTML DOM")}}
- -

{{event("drag")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。

- -

シンタックス

- -
var dragHandler = targetElement.ondrag;
-
- -

戻り値

- -
-
dragHandler
-
要素 targetElementdrag イベントハンドラ。
-
- -

- -

この例では、ondrag 属性ハンドラを使用して要素の drag イベントハンドラを設定しています。

- -
<!DOCTYPE html>
-<html lang=ja>
-<title>ondrag グローバルイベント属性の使用例</title>
-<meta content="width=device-width">
-<style>
-  div {
-    margin: 0em;
-    padding: 2em;
-  }
-  #source {
-    color: blue;
-    border: 1px solid black;
-  }
-  #target {
-    border: 1px solid black;
-  }
-</style>
-</head>
-<script>
-function drag_handler(ev) {
- console.log("Drag");
-}
-
-function dragstart_handler(ev) {
- console.log("dragStart");
- ev.dataTransfer.setData("text", ev.target.id);
-}
-
-function drop_handler(ev) {
- console.log("Drop");
- ev.currentTarget.style.background = "lightyellow";
-
- ev.preventDefault();
- var data = ev.dataTransfer.getData("text");
- ev.target.appendChild(document.getElementById(data));
-}
-
-function dragover_handler(ev) {
- console.log("dragOver");
- ev.preventDefault();
-}
-</script>
-<body>
-<h1><code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code> の例</h1>
- <div> <!-- <div class="source"> -->
-   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
-     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
- </div>
- <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
-</body>
-</html>
-
- -

仕様

- - - - - - - - - - - - - - - - - - - -
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrag", "ondrag")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondrag", "ondrag")}}{{Spec2("HTML5.1")}}初期定義
- -

ブラウザの互換性

- -

{{Compat("api.GlobalEventHandlers.ondrag")}}

- -

あわせて参照

- -
    -
  • {{event("drag")}}
  • -
diff --git a/files/ja/conflicting/web/api/htmlelement/drag_event/index.md b/files/ja/conflicting/web/api/htmlelement/drag_event/index.md new file mode 100644 index 00000000000000..f7606845543344 --- /dev/null +++ b/files/ja/conflicting/web/api/htmlelement/drag_event/index.md @@ -0,0 +1,98 @@ +--- +title: GlobalEventHandlers.ondrag +slug: conflicting/Web/API/HTMLElement/drag_event +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondrag +original_slug: Web/API/GlobalEventHandlers/ondrag +--- +{{ApiRef("HTML DOM")}} + +{{event("drag")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。 + +## シンタックス + +``` +var dragHandler = targetElement.ondrag; +``` + +### 戻り値 + +- `dragHandler` + - : 要素 `targetElement` の _drag_ イベントハンドラ。 + +## 例 + +この例では、_ondrag_ 属性ハンドラを使用して要素の _drag_ イベントハンドラを設定しています。 + +```js + + +ondrag グローバルイベント属性の使用例 + + + + + +

ondrag, ondrop, ondragstart, ondragover の例

+
+

+ この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。

+
+
ドロップゾーン
+ + +``` + +## 仕様 + +| 仕様書 | ステータス | コメント | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrag", "ondrag")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "index.html#ix-handler-ondrag", "ondrag")}} | {{Spec2("HTML5.1")}} | 初期定義 | + +## ブラウザの互換性 + +{{Compat("api.GlobalEventHandlers.ondrag")}} + +## あわせて参照 + +- {{event("drag")}} diff --git a/files/ja/conflicting/web/api/htmlelement/dragend_event/index.html b/files/ja/conflicting/web/api/htmlelement/dragend_event/index.md similarity index 51% rename from files/ja/conflicting/web/api/htmlelement/dragend_event/index.html rename to files/ja/conflicting/web/api/htmlelement/dragend_event/index.md index 543f070bf99652..bfe3056fa7b17b 100644 --- a/files/ja/conflicting/web/api/htmlelement/dragend_event/index.html +++ b/files/ja/conflicting/web/api/htmlelement/dragend_event/index.md @@ -9,31 +9,31 @@ translation_of: Web/API/GlobalEventHandlers/ondragend original_slug: Web/API/GlobalEventHandlers/ondragend --- -
{{ApiRef("HTML DOM")}}
+{{ApiRef("HTML DOM")}} -

{{event("dragend")}} イベント用の{{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。

+{{event("dragend")}} イベント用の{{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。 -

シンタックス

+## シンタックス -
var dragendHandler = targetElement.ondragend;
-
+``` +var dragendHandler = targetElement.ondragend; +``` -

戻り値

+### 戻り値 -
-
dragendHandler
-
要素 targetElementdragend イベントハンドラ。
-
+- `dragendHandler` + - : 要素 `targetElement` の _dragend_ イベントハンドラ。 -

+## 例 -

この例では、{{domxref("GlobalEventHandlers", "ondragend")}} 属性ハンドラを使用して、要素の {{event("dragend")}} イベントハンドラを設定する2つの方法を示しています。

+この例では、{{domxref("GlobalEventHandlers", "ondragend")}} 属性ハンドラを使用して、要素の {{event("dragend")}} イベントハンドラを設定する 2 つの方法を示しています。 -
<!DOCTYPE html>
-<html lang=ja>
-<title>グローバルイベント属性のドラッグ&ドロップの使用例</title>
-<meta content="width=device-width">
-<style>
+```js
+
+
+グローバルイベント属性のドラッグ&ドロップの使用例
+
+
+
+
+
+

ondragenter, ondragleave, ondragend, ondragexit の例

+
+

+ この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。

+
+
ドロップゾーン
+ + +``` + +## 仕様 + +| 仕様書 | ステータス | コメント | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragend", "ondragend")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "index.html#ix-handler-ondragend", "ondragend")}} | {{Spec2("HTML5.1")}} | 初期定義 | + +## ブラウザの互換性 + +{{Compat("api.GlobalEventHandlers.ondragend")}} + +## あわせて参照 + +- {{event("dragend")}} diff --git a/files/ja/conflicting/web/api/htmlelement/dragenter_event/index.html b/files/ja/conflicting/web/api/htmlelement/dragenter_event/index.md similarity index 51% rename from files/ja/conflicting/web/api/htmlelement/dragenter_event/index.html rename to files/ja/conflicting/web/api/htmlelement/dragenter_event/index.md index 41f37914c9a53b..7648c6c8711956 100644 --- a/files/ja/conflicting/web/api/htmlelement/dragenter_event/index.html +++ b/files/ja/conflicting/web/api/htmlelement/dragenter_event/index.md @@ -9,31 +9,31 @@ translation_of: Web/API/GlobalEventHandlers/ondragenter original_slug: Web/API/GlobalEventHandlers/ondragenter --- -
{{ApiRef("HTML DOM")}}
+{{ApiRef("HTML DOM")}} -

{{event("dragenter")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。

+{{event("dragenter")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。 -

シンタックス

+## シンタックス -
var dragenterHandler = targetElement.ondragenter;
-
+``` +var dragenterHandler = targetElement.ondragenter; +``` -

戻り値

+### 戻り値 -
-
dragenterHandler
-
targetElement 要素の dragenter イベントハンドラ。
-
+- `dragenterHandler` + - : `targetElement` 要素の _dragenter_ イベントハンドラ。 -

+## 例 -

この例では、{{domxref("GlobalEventHandlers.ondragenter", "ondragenter")}} 属性ハンドラを使用して、要素の {{event("dragenter")}} イベントハンドラを設定する方法を示します。

+この例では、{{domxref("GlobalEventHandlers.ondragenter", "ondragenter")}} 属性ハンドラを使用して、要素の {{event("dragenter")}} イベントハンドラを設定する方法を示します。 -
<!DOCTYPE html>
-<html lang=ja>
-<title>グローバルイベント属性のドラッグ&ドロップの使用例</title>
-<meta content="width=device-width">
-<style>
+```js
+
+
+グローバルイベント属性のドラッグ&ドロップの使用例
+
+
+
+
+
+

ondragenter, ondragleave, ondragend, ondragexit の例

+
+

+ この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。

+
+
ドロップゾーン
+ + +``` + +## 仕様 + +| 仕様書 | ステータス | コメント | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragenter", "ondragenter")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "index.html#ix-handler-ondragenter", "ondragenter")}} | {{Spec2("HTML5.1")}} | 初期定義 | + +## ブラウザの互換性 + +{{Compat("api.GlobalEventHandlers.ondragenter")}} + +## あわせて参照 + +- {{event("dragenter")}} diff --git a/files/ja/conflicting/web/api/htmlelement/dragleave_event/index.html b/files/ja/conflicting/web/api/htmlelement/dragleave_event/index.md similarity index 51% rename from files/ja/conflicting/web/api/htmlelement/dragleave_event/index.html rename to files/ja/conflicting/web/api/htmlelement/dragleave_event/index.md index e23e45dcf5c867..d9f6bce149e96b 100644 --- a/files/ja/conflicting/web/api/htmlelement/dragleave_event/index.html +++ b/files/ja/conflicting/web/api/htmlelement/dragleave_event/index.md @@ -9,31 +9,31 @@ translation_of: Web/API/GlobalEventHandlers/ondragleave original_slug: Web/API/GlobalEventHandlers/ondragleave --- -
{{ApiRef("HTML DOM")}}
+{{ApiRef("HTML DOM")}} -

{{event("dragleave")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。

+{{event("dragleave")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。 -

シンタックス

+## シンタックス -
var dragleaveHandler = targetElement.ondragleave;
-
+``` +var dragleaveHandler = targetElement.ondragleave; +``` -

戻り値

+### 戻り値 -
-
dragleaveHandler
-
要素 targetElementdragleave イベントハンドラ。
-
+- `dragleaveHandler` + - : 要素 `targetElement` の _dragleave_ イベントハンドラ。 -

+## 例 -

この例では、{{domxref("GlobalEventHandlers.ondragleave", "ondragleave")}} 属性ハンドラを使用して、要素の {{event("dragleave")}} イベントハンドラを設定することを示しています。

+この例では、{{domxref("GlobalEventHandlers.ondragleave", "ondragleave")}} 属性ハンドラを使用して、要素の {{event("dragleave")}} イベントハンドラを設定することを示しています。 -
<!DOCTYPE html>
-<html lang=ja>
-<title>グローバルイベント属性のドラッグ&ドロップの使用例</title>
-<meta content="width=device-width">
-<style>
+```js
+
+
+グローバルイベント属性のドラッグ&ドロップの使用例
+
+
+
+
+
+

ondragenter, ondragleave, ondragend, ondragexit の例

+
+

+ この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。

+
+
ドロップゾーン
+ + +``` + +## 仕様 + +| 仕様書 | ステータス | コメント | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragleave", "ondragleave")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "index.html#ix-handler-ondragleave", "ondragleave")}} | {{Spec2("HTML5.1")}} | 初期定義 | + +## ブラウザの互換性 + +{{Compat("api.GlobalEventHandlers.ondragleave")}} + +## あわせて参照 + +- {{event("dragleave")}} diff --git a/files/ja/conflicting/web/api/htmlelement/dragover_event/index.html b/files/ja/conflicting/web/api/htmlelement/dragover_event/index.html deleted file mode 100644 index 6b1ea1066b395b..00000000000000 --- a/files/ja/conflicting/web/api/htmlelement/dragover_event/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: GlobalEventHandlers.ondragover -slug: conflicting/Web/API/HTMLElement/dragover_event -tags: - - API - - HTML DOM - - Reference - - drag and drop -translation_of: Web/API/GlobalEventHandlers/ondragover -original_slug: Web/API/GlobalEventHandlers/ondragover ---- -
{{ApiRef("HTML DOM")}}
- -

{{event("dragover")}} イベント用の {{domxref("GlobalEventHandlers", "GlobalEventHandlers")}}。

- -

シンタックス

- -
var dragoverHandler = targetElement.ondragover;
-
- -

戻り値

- -
-
dragoverHandler
-
targetElement 要素の dragover イベントハンドラ。
-
- -

- -

この例では、{{domxref("GlobalEventHandlers.ondragover", "ondragover")}} 属性ハンドラを使用して、要素の {{event("dragover")}} イベントハンドラを設定することを示します。

- -
<!DOCTYPE html>
-<html lang=ja>
-<title>ondrag グローバルイベント属性の使用例</title>
-<meta content="width=device-width">
-<style>
-  div {
-    margin: 0em;
-    padding: 2em;
-  }
-  #source {
-    color: blue;
-    border: 1px solid black;
-  }
-  #target {
-    border: 1px solid black;
-  }
-</style>
-</head>
-<script>
-function drag_handler(ev) {
- console.log("Drag");
-}
-
-function dragstart_handler(ev) {
- console.log("dragStart");
- ev.dataTransfer.setData("text", ev.target.id);
-}
-
-function drop_handler(ev) {
- console.log("Drop");
- ev.currentTarget.style.background = "lightyellow";
-
- ev.preventDefault();
- var data = ev.dataTransfer.getData("text");
- ev.target.appendChild(document.getElementById(data));
-}
-
-function dragover_handler(ev) {
- console.log("dragOver");
- ev.preventDefault();
-}
-</script>
-<body>
-<h1><code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code> の例</h1>
- <div>
-   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
-     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
- </div>
- <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
-</body>
-</html>
-
- -

仕様

- - - - - - - - - - - - - - - - - - - -
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragover", "ondragover")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondragover", "ondragover")}}{{Spec2("HTML5.1")}}初期定義
- -

ブラウザの互換性

- -

{{Compat("api.GlobalEventHandlers.ondragover")}}

- -

あわせて参照

- -
    -
  • {{event("dragover")}}
  • -
diff --git a/files/ja/conflicting/web/api/htmlelement/dragover_event/index.md b/files/ja/conflicting/web/api/htmlelement/dragover_event/index.md new file mode 100644 index 00000000000000..e81e73a142b59e --- /dev/null +++ b/files/ja/conflicting/web/api/htmlelement/dragover_event/index.md @@ -0,0 +1,98 @@ +--- +title: GlobalEventHandlers.ondragover +slug: conflicting/Web/API/HTMLElement/dragover_event +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondragover +original_slug: Web/API/GlobalEventHandlers/ondragover +--- +{{ApiRef("HTML DOM")}} + +{{event("dragover")}} イベント用の {{domxref("GlobalEventHandlers", "GlobalEventHandlers")}}。 + +## シンタックス + +``` +var dragoverHandler = targetElement.ondragover; +``` + +### 戻り値 + +- `dragoverHandler` + - : `targetElement` 要素の `dragover` イベントハンドラ。 + +## 例 + +この例では、{{domxref("GlobalEventHandlers.ondragover", "ondragover")}} 属性ハンドラを使用して、要素の {{event("dragover")}} イベントハンドラを設定することを示します。 + +```js + + +ondrag グローバルイベント属性の使用例 + + + + + +

ondrag, ondrop, ondragstart, ondragover の例

+
+

+ この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。

+
+
ドロップゾーン
+ + +``` + +## 仕様 + +| 仕様書 | ステータス | コメント | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragover", "ondragover")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "index.html#ix-handler-ondragover", "ondragover")}} | {{Spec2("HTML5.1")}} | 初期定義 | + +## ブラウザの互換性 + +{{Compat("api.GlobalEventHandlers.ondragover")}} + +## あわせて参照 + +- {{event("dragover")}} diff --git a/files/ja/conflicting/web/api/htmlelement/dragstart_event/index.html b/files/ja/conflicting/web/api/htmlelement/dragstart_event/index.html deleted file mode 100644 index 0979b430f5eb4b..00000000000000 --- a/files/ja/conflicting/web/api/htmlelement/dragstart_event/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: GlobalEventHandlers.ondragstart -slug: conflicting/Web/API/HTMLElement/dragstart_event -tags: - - API - - HTML DOM - - Reference - - drag and drop -translation_of: Web/API/GlobalEventHandlers/ondragstart -original_slug: Web/API/GlobalEventHandlers/ondragstart ---- -
{{ApiRef("HTML DOM")}}
- -

{{event("dragstart")}} イベントの {{domxref("GlobalEventHandlers","global event handler")}} 。

- -

構文

- -
var dragstartHandler = targetElement.ondragstart;
-
- -

返り値

- -
-
dragstartHandler
-
要素 targetElementdragstart イベントハンドラ。
-
- -

- -

この例では、 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 属性ハンドラを使用して、要素 {{event("dragstart")}} イベントハンドラを設定する方法を示します。

- -
<!DOCTYPE html>
-<html lang=en>
-<title>Examples of using the ondrag Global Event Attribute</title>
-<meta content="width=device-width">
-<style>
-  div {
-    margin: 0em;
-    padding: 2em;
-  }
-  #source {
-    color: blue;
-    border: 1px solid black;
-  }
-  #target {
-    border: 1px solid black;
-  }
-</style>
-</head>
-<script>
-function drag_handler(ev) {
- console.log("Drag");
-}
-
-function dragstart_handler(ev) {
- console.log("dragStart");
- ev.dataTransfer.setData("text", ev.target.id);
-}
-
-function drop_handler(ev) {
- console.log("Drop");
- ev.currentTarget.style.background = "lightyellow";
-
- ev.preventDefault();
- var data = ev.dataTransfer.getData("text");
- ev.target.appendChild(document.getElementById(data));
-}
-
-function dragover_handler(ev) {
- console.log("dragOver");
- ev.preventDefault();
-}
-</script>
-<body>
-<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1>
- <div>
-   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
-     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
- </div>
- <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
-</body>
-</html>
-
- -

仕様

- - - - - - - - - - - - - - - - - - - -
仕様ステータス備考
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragstart", "ondragstart")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondragstart", "ondragstart")}}{{Spec2("HTML5.1")}}初回定義
- -

ブラウザーの互換性

- - - -

{{Compat("api.GlobalEventHandlers.ondragstart")}}

- -

関連項目

- -
    -
  • {{event("dragstart")}}
  • -
diff --git a/files/ja/conflicting/web/api/htmlelement/dragstart_event/index.md b/files/ja/conflicting/web/api/htmlelement/dragstart_event/index.md new file mode 100644 index 00000000000000..1630bafa454fc5 --- /dev/null +++ b/files/ja/conflicting/web/api/htmlelement/dragstart_event/index.md @@ -0,0 +1,98 @@ +--- +title: GlobalEventHandlers.ondragstart +slug: conflicting/Web/API/HTMLElement/dragstart_event +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondragstart +original_slug: Web/API/GlobalEventHandlers/ondragstart +--- +{{ApiRef("HTML DOM")}} + +{{event("dragstart")}} イベントの {{domxref("GlobalEventHandlers","global event handler")}} 。 + +## 構文 + +``` +var dragstartHandler = targetElement.ondragstart; +``` + +### 返り値 + +- `dragstartHandler` + - : 要素 `targetElement` の _dragstart_ イベントハンドラ。 + +## 例 + +この例では、 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 属性ハンドラを使用して、要素 {{event("dragstart")}} イベントハンドラを設定する方法を示します。 + +```js + + +Examples of using the ondrag Global Event Attribute + + + + + +

Examples of ondrag, ondrop, ondragstart, ondragover

+
+

+ Select this element, drag it to the Drop Zone and then release the selection to move the element.

+
+
Drop Zone
+ + +``` + +## 仕様 + +| 仕様 | ステータス | 備考 | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragstart", "ondragstart")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "index.html#ix-handler-ondragstart", "ondragstart")}} | {{Spec2("HTML5.1")}} | 初回定義 | + +## ブラウザーの互換性 + +{{Compat("api.GlobalEventHandlers.ondragstart")}} + +## 関連項目 + +- {{event("dragstart")}} diff --git a/files/ja/conflicting/web/api/htmlelement/drop_event/index.html b/files/ja/conflicting/web/api/htmlelement/drop_event/index.html deleted file mode 100644 index dfc5447284bd22..00000000000000 --- a/files/ja/conflicting/web/api/htmlelement/drop_event/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: GlobalEventHandlers.ondrop -slug: conflicting/Web/API/HTMLElement/drop_event -tags: - - API - - HTML DOM - - Reference - - drag and drop -translation_of: Web/API/GlobalEventHandlers/ondrop -original_slug: Web/API/GlobalEventHandlers/ondrop ---- -
{{ApiRef("HTML DOM")}}
- -

{{event("drop")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。

- -

シンタックス

- -
var dropHandler = targetElement.ondrop;
-
- -

戻り値

- -
-
dropHandler
-
targetElement 要素の drop イベントハンドラ。
-
- -

- -

この例では、{{domxref("GlobalEventHandlers.ondrop", "ondrop")}} 属性を使用して、要素の {{event("drop")}} イベント・ハンドラを定義することを示しています。

- -
<!DOCTYPE html>
-<html lang=ja>
-<title>ondrag グローバルイベント属性の使用例</title>
-<meta content="width=device-width">
-<style>
-  div {
-    margin: 0em;
-    padding: 2em;
-  }
-  #source {
-    color: blue;
-    border: 1px solid black;
-  }
-  #target {
-    border: 1px solid black;
-  }
-</style>
-</head>
-<script>
-function drag_handler(ev) {
- console.log("Drag");
-}
-
-function dragstart_handler(ev) {
- console.log("dragStart");
- ev.dataTransfer.setData("text", ev.target.id);
-}
-
-function drop_handler(ev) {
- console.log("Drop");
- ev.currentTarget.style.background = "lightyellow";
-
- ev.preventDefault();
- var data = ev.dataTransfer.getData("text");
- ev.target.appendChild(document.getElementById(data));
-}
-
-function dragover_handler(ev) {
- console.log("dragOver");
- ev.preventDefault();
-}
-</script>
-<body>
-<h1><code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code> の例</h1>
- <div class="source">
-   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
-     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
- </div>
- <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
-</body>
-</html>
-
- -

仕様

- - - - - - - - - - - - - - - - - - - -
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrop", "ondrop")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondrop", "ondrop")}}{{Spec2("HTML5.1")}}初期定義
- -

ブラウザの互換性

- -

{{Compat("api.GlobalEventHandlers.ondrop")}}

- -

あわせて参照

- -
    -
  • {{event("drop")}}
  • -
diff --git a/files/ja/conflicting/web/api/htmlelement/drop_event/index.md b/files/ja/conflicting/web/api/htmlelement/drop_event/index.md new file mode 100644 index 00000000000000..497f7c9e8b8bf8 --- /dev/null +++ b/files/ja/conflicting/web/api/htmlelement/drop_event/index.md @@ -0,0 +1,98 @@ +--- +title: GlobalEventHandlers.ondrop +slug: conflicting/Web/API/HTMLElement/drop_event +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondrop +original_slug: Web/API/GlobalEventHandlers/ondrop +--- +{{ApiRef("HTML DOM")}} + +{{event("drop")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。 + +## シンタックス + +``` +var dropHandler = targetElement.ondrop; +``` + +### 戻り値 + +- `dropHandler` + - : `targetElement` 要素の _drop_ イベントハンドラ。 + +## 例 + +この例では、{{domxref("GlobalEventHandlers.ondrop", "ondrop")}} 属性を使用して、要素の {{event("drop")}} イベント・ハンドラを定義することを示しています。 + +```js + + +ondrag グローバルイベント属性の使用例 + + + + + +

ondrag, ondrop, ondragstart, ondragover の例

+
+

+ この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。

+
+
ドロップゾーン
+ + +``` + +## 仕様 + +| 仕様書 | ステータス | コメント | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrop", "ondrop")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5.1", "index.html#ix-handler-ondrop", "ondrop")}} | {{Spec2("HTML5.1")}} | 初期定義 | + +## ブラウザの互換性 + +{{Compat("api.GlobalEventHandlers.ondrop")}} + +## あわせて参照 + +- {{event("drop")}} diff --git a/files/ja/conflicting/web/api/htmlelement/input_event/index.html b/files/ja/conflicting/web/api/htmlelement/input_event/index.html deleted file mode 100644 index d5785aea7e6016..00000000000000 --- a/files/ja/conflicting/web/api/htmlelement/input_event/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: GlobalEventHandlers.oninput -slug: conflicting/Web/API/HTMLElement/input_event -tags: - - API - - Event Handler - - GlobalEventHandlers - - HTML DOM - - Property - - Reference -translation_of: Web/API/GlobalEventHandlers/oninput -original_slug: Web/API/GlobalEventHandlers/oninput ---- -
{{ApiRef("HTML DOM")}}
- -

{{domxref("GlobalEventHandlers")}} ミックスインの oninput プロパティは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} の各要素上の {{event("input")}} イベントを処理する {{event("Event_handlers", "event handler")}} です。これは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} または {{domxref("Document.designMode", "designMode")}} が有効になっている要素上のイベントも扱います。

- -
-

注記: oninput と異なり、{{domxref("GlobalEventHandlers.onchange", "onchange")}} イベントハンドラーは、各要素の value が変化するたびに呼び出される必要がありません。

-
- -

構文

- -
target.oninput = functionRef;
- -

- -

functionRef は関数名または 関数式 です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。

- -

- -

この例は、{{HtmlElement("input")}} 要素のコンテンツを変更する度に、その文字数をログ出力します。

- -

HTML

- -
<input type="text" placeholder="ここに何か入力すると、その長さが分かります。" size="50">
-<p id="log"></p>
- -

JavaScript

- -
let input = document.querySelector('input');
-let log = document.getElementById('log');
-
-input.oninput = handleInput;
-
-function handleInput(e) {
-  log.textContent = `フィールドの value は
-      ${e.target.value.length} 文字の長さです。`;
-}
- -

実行結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況備考
{{SpecName("HTML WHATWG", "#ix-handler-oninput", "oninput")}}{{Spec2("HTML WHATWG")}}初期定義
- -

ブラウザー実装状況

- - - -

{{Compat("api.GlobalEventHandlers.oninput")}}

- -

以下のリンクは、互換性の問題と修正についての議論です。古いブラウザーで動作させる場合に役立つでしょう:

- - - -

関連項目

- -
    -
  • {{event("input")}} イベント
  • -
diff --git a/files/ja/conflicting/web/api/htmlelement/input_event/index.md b/files/ja/conflicting/web/api/htmlelement/input_event/index.md new file mode 100644 index 00000000000000..0085242653eabe --- /dev/null +++ b/files/ja/conflicting/web/api/htmlelement/input_event/index.md @@ -0,0 +1,79 @@ +--- +title: GlobalEventHandlers.oninput +slug: conflicting/Web/API/HTMLElement/input_event +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/oninput +original_slug: Web/API/GlobalEventHandlers/oninput +--- +{{ApiRef("HTML DOM")}} + +{{domxref("GlobalEventHandlers")}} ミックスインの **`oninput`** プロパティは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} の各要素上の {{event("input")}} イベントを処理する {{event("Event_handlers", "event handler")}} です。これは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} または {{domxref("Document.designMode", "designMode")}} が有効になっている要素上のイベントも扱います。 + +> **Note:** **注記:** `oninput` と異なり、{{domxref("GlobalEventHandlers.onchange", "onchange")}} イベントハンドラーは、各要素の `value` が変化するたびに呼び出される必要がありません。 + +## 構文 + +``` +target.oninput = functionRef; +``` + +### 値 + +`functionRef` は関数名または [関数式](/ja/docs/Web/JavaScript/Reference/Operators/function) です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。 + +## 例 + +この例は、{{HtmlElement("input")}} 要素のコンテンツを変更する度に、その文字数をログ出力します。 + +### HTML + +```html + +

+``` + +### JavaScript + +```js +let input = document.querySelector('input'); +let log = document.getElementById('log'); + +input.oninput = handleInput; + +function handleInput(e) { + log.textContent = `フィールドの value は + ${e.target.value.length} 文字の長さです。`; +} +``` + +### 実行結果 + +{{EmbedLiveSample("Example")}} + +## 仕様 + +| 仕様書 | 策定状況 | 備考 | +| -------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName("HTML WHATWG", "#ix-handler-oninput", "oninput")}} | {{Spec2("HTML WHATWG")}} | 初期定義 | + +## ブラウザー実装状況 + +{{Compat("api.GlobalEventHandlers.oninput")}} + +以下のリンクは、互換性の問題と修正についての議論です。古いブラウザーで動作させる場合に役立つでしょう: + +- [A HTML5 Browser maze, oninput support](http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/) +- [Fixing oninput in IE Using html5Widgets](http://www.useragentman.com/blog/2011/05/12/fixing-oninput-in-ie9-using-html5widgets/) includes polyfill for IE6-8 +- Mathias Bynens suggests [binding to both input and keydown](http://mathiasbynens.be/notes/oninput) +- [oninput event | dottoro](http://help.dottoro.com/ljhxklln.php) has notes about bugginess in IE9 +- [Bug 312094 - Add support for \ +
+
+ +
+ + + + +``` + +## 注記 + +reset イベントは、ユーザがフォーム内のリセットボタン (``) をクリックした際に発生します。 + +## 仕様 + +標準仕様書には含まれていません。 diff --git a/files/ja/conflicting/web/api/htmlinputelement/invalid_event/index.html b/files/ja/conflicting/web/api/htmlinputelement/invalid_event/index.html deleted file mode 100644 index 2646d2ab8836dd..00000000000000 --- a/files/ja/conflicting/web/api/htmlinputelement/invalid_event/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: GlobalEventHandlers.oninvalid -slug: conflicting/Web/API/HTMLInputElement/invalid_event -tags: - - API - - Event Handler - - GlobalEventHandlers - - Property - - Reference -translation_of: Web/API/GlobalEventHandlers/oninvalid -original_slug: Web/API/GlobalEventHandlers/oninvalid ---- -
{{ ApiRef("HTML DOM") }}
- -

oninvalid は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("invalid")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。

- -

invalid イベントは、送信可能な要素が検証され、条件を満たしていない場合に発生します。送信可能な要素の有効性は、フォームを送信する前、またはフォームの checkValidity() メソッドが呼び出された後に検証されます。

- -

構文

- -
target.oninvalid = functionRef;
-var functionRef = target.oninvalid;
-
- -

- -

functionRef は、関数名または関数式です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。

- -

- -

この例は、フォーム上の oninvalid と {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} イベントハンドラーを示しています。

- -

HTML

- -
<form id="form">
-  <p id="error" hidden>Please fill out all fields.</p>
-
-  <label for="city">City</label>
-  <input type="text" id="city" required>
-
-  <button type="submit">Submit</button>
-</form>
-<p id="thanks" hidden>Your data has been received. Thanks!</p>
- -

JavaScript

- -
const form = document.getElementById('form');
-const error = document.getElementById('error');
-const city = document.getElementById('city');
-const thanks = document.getElementById('thanks');
-
-city.oninvalid = invalid;
-form.onsubmit = submit;
-
-function invalid(event) {
-  error.removeAttribute('hidden');
-}
-
-function submit(event) {
-  form.setAttribute('hidden', '');
-  thanks.removeAttribute('hidden');
-
-  // For this example, don't actually submit the form
-  event.preventDefault();
-}
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様

- - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('HTML WHATWG','#handler-oninvalid','oninvalid')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザー実装状況

- - - -

{{Compat("api.GlobalEventHandlers.oninvalid")}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/htmlinputelement/invalid_event/index.md b/files/ja/conflicting/web/api/htmlinputelement/invalid_event/index.md new file mode 100644 index 00000000000000..df6578be062059 --- /dev/null +++ b/files/ja/conflicting/web/api/htmlinputelement/invalid_event/index.md @@ -0,0 +1,102 @@ +--- +title: GlobalEventHandlers.oninvalid +slug: conflicting/Web/API/HTMLInputElement/invalid_event +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/oninvalid +original_slug: Web/API/GlobalEventHandlers/oninvalid +--- +{{ ApiRef("HTML DOM") }} + +**`oninvalid`** は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("invalid")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。 + +`invalid` イベントは、送信可能な要素が検証され、条件を満たしていない場合に発生します。送信可能な要素の有効性は、フォームを送信する前、またはフォームの [`checkValidity()`](/ja/docs/Learn/HTML/Forms/Form_validation) メソッドが呼び出された後に検証されます。 + +## 構文 + +``` +target.oninvalid = functionRef; +var functionRef = target.oninvalid; +``` + +### 値 + +`functionRef` は、関数名または[関数式](/ja/docs/Web/JavaScript/Reference/Operators/function)です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。 + +## 例 + +この例は、フォーム上の `oninvalid` と {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} イベントハンドラーを示しています。 + +### HTML + +```html +
+ + + + + + +
+ +``` + +### JavaScript + +```js +const form = document.getElementById('form'); +const error = document.getElementById('error'); +const city = document.getElementById('city'); +const thanks = document.getElementById('thanks'); + +city.oninvalid = invalid; +form.onsubmit = submit; + +function invalid(event) { + error.removeAttribute('hidden'); +} + +function submit(event) { + form.setAttribute('hidden', ''); + thanks.removeAttribute('hidden'); + + // For this example, don't actually submit the form + event.preventDefault(); +} +``` + +### 結果 + +{{EmbedLiveSample("Example")}} + +## 仕様 + + + + + + + + + + + + + + +
仕様書策定状況コメント
+ {{SpecName('HTML WHATWG','#handler-oninvalid','oninvalid')}} + {{Spec2('HTML WHATWG')}}
+ +## ブラウザー実装状況 + +{{Compat("api.GlobalEventHandlers.oninvalid")}} + +## 関連情報 + +- {{event("invalid")}} event +- [DOM onevent ハンドラー](/ja/docs/Web/Guide/Events/Event_handlers "/ja/docs/Web/Guide/DOM/Events/Event_handlers") diff --git a/files/ja/conflicting/web/api/htmlinputelement/select_event/index.html b/files/ja/conflicting/web/api/htmlinputelement/select_event/index.html deleted file mode 100644 index 7e7980417963aa..00000000000000 --- a/files/ja/conflicting/web/api/htmlinputelement/select_event/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: window.onselect -slug: conflicting/Web/API/HTMLInputElement/select_event -tags: - - DOM - - Gecko - - Window -translation_of: Web/API/GlobalEventHandlers/onselect -original_slug: Web/API/GlobalEventHandlers/onselect ---- -
{{ ApiRef("HTML DOM") }}
- -

{{domxref("window")}} の select イベントに対応するイベントハンドラです。

- -

構文

- -
window.onselect = funcRef;
-
- -
    -
  • funcRef : 関数への参照、または関数式
  • -
- -

- -
<!DOCTYPE html>
-<html lang="ja">
-<head>
-<meta charset="UTF-8" />
-<title>onselect のテスト</title>
-
-<style>
-.text1 { border: 2px solid red; }
-</style>
-
-<script>
-window.onselect = selectText;
-
-function selectText() {
-  alert("select イベントが発生しました。");
-}
-</script>
-</head>
-
-<body>
-<textarea class="text1" cols="30" rows="3">
-マウスでこのテキストを選択状態にすると
-onselect イベントが発生し、
-アラートを表示する関数が実行されます。
-</textarea>
-</body>
-</html>
-
- -

注記

- -

select イベントは、テキストインプット (<input type="text">) もしくは {{htmlelement("textarea")}} 要素のテキストが選択された直後に 発生します。

- -

仕様

- - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザー実装状況

- -
- - -

{{Compat("api.GlobalEventHandlers.onselect")}}

-
diff --git a/files/ja/conflicting/web/api/htmlinputelement/select_event/index.md b/files/ja/conflicting/web/api/htmlinputelement/select_event/index.md new file mode 100644 index 00000000000000..bd3ae00828b80c --- /dev/null +++ b/files/ja/conflicting/web/api/htmlinputelement/select_event/index.md @@ -0,0 +1,80 @@ +--- +title: window.onselect +slug: conflicting/Web/API/HTMLInputElement/select_event +tags: + - DOM + - Gecko + - Window +translation_of: Web/API/GlobalEventHandlers/onselect +original_slug: Web/API/GlobalEventHandlers/onselect +--- +{{ ApiRef("HTML DOM") }} + +{{domxref("window")}} の `select` イベントに対応するイベントハンドラです。 + +## 構文 + +``` +window.onselect = funcRef; +``` + +- `funcRef` : 関数への参照、または関数式 + +## 例 + +```html + + + + +onselect のテスト + + + + + + + + + + +``` + +## 注記 + +`select` イベントは、テキストインプット (``) もしくは {{htmlelement("textarea")}} 要素のテキストが*選択された直後に* 発生します。 + +## 仕様 + + + + + + + + + + + + + + +
仕様書策定状況コメント
+ {{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}} + {{Spec2('HTML WHATWG')}}
+ +## ブラウザー実装状況 + +{{Compat("api.GlobalEventHandlers.onselect")}} diff --git a/files/ja/conflicting/web/api/htmlinputelement/selectionchange_event/index.html b/files/ja/conflicting/web/api/htmlinputelement/selectionchange_event/index.html deleted file mode 100644 index d0bc08a4f30ea1..00000000000000 --- a/files/ja/conflicting/web/api/htmlinputelement/selectionchange_event/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Document.onselectionchange -slug: conflicting/Web/API/HTMLInputElement/selectionchange_event -tags: - - API - - Document - - Experimental - - Reference - - イベントハンドラー - - プロパティ -translation_of: Web/API/GlobalEventHandlers/onselectionchange -translation_of_original: Web/API/Document/onselectionchange -original_slug: Web/API/GlobalEventHandlers/onselectionchange ---- -
{{ApiRef('DOM')}}{{SeeCompatTable}}
- -

Document.onselectionchange プロパティは、 {{event("selectionchange")}} イベントがこのオブジェクトに到達したときに呼び出されるイベントハンドラーを表します。

- -

構文

- -
obj.onselectionchange = function;
-
- -
    -
  • function はユーザー定義の関数の名前を、末尾の () や引数を付けない形、または無名関数の宣言です。
  • -
- -

- -
document.onselectionchange = function() { console.log("Selection changed!"); };
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Selection API','','Document.onselectionchange')}}{{Spec2('Selection API')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("api.Document.onselectionchange")}}

- -

関連情報

- -
    -
  • {{event("selectionchange")}}
  • -
  • {{domxref("GlobalEventHandlers.onselectstart")}} および {{event('selectstart')}}
  • -
diff --git a/files/ja/conflicting/web/api/htmlinputelement/selectionchange_event/index.md b/files/ja/conflicting/web/api/htmlinputelement/selectionchange_event/index.md new file mode 100644 index 00000000000000..81d55744ef4c65 --- /dev/null +++ b/files/ja/conflicting/web/api/htmlinputelement/selectionchange_event/index.md @@ -0,0 +1,61 @@ +--- +title: Document.onselectionchange +slug: conflicting/Web/API/HTMLInputElement/selectionchange_event +tags: + - API + - Document + - Experimental + - Reference + - イベントハンドラー + - プロパティ +translation_of: Web/API/GlobalEventHandlers/onselectionchange +translation_of_original: Web/API/Document/onselectionchange +original_slug: Web/API/GlobalEventHandlers/onselectionchange +--- +{{ApiRef('DOM')}}{{SeeCompatTable}} + +**`Document.onselectionchange`** プロパティは、 {{event("selectionchange")}} イベントがこのオブジェクトに到達したときに呼び出されるイベントハンドラーを表します。 + +## 構文 + +``` +obj.onselectionchange = function; +``` + +- _function_ はユーザー定義の関数の名前を、末尾の `()` や引数を付けない形、または無名関数の宣言です。 + +## 例 + +```html +document.onselectionchange = function() { console.log("Selection changed!"); }; +``` + +## 仕様書 + + + + + + + + + + + + + + + + +
仕様書状態備考
+ {{SpecName('Selection API','','Document.onselectionchange')}} + {{Spec2('Selection API')}}初回定義
+ +## ブラウザーの対応 + +{{Compat("api.Document.onselectionchange")}} + +## 関連情報 + +- {{event("selectionchange")}} +- {{domxref("GlobalEventHandlers.onselectstart")}} および {{event('selectstart')}} diff --git a/files/ja/conflicting/web/api/htmlmediaelement/canplay_event/index.html b/files/ja/conflicting/web/api/htmlmediaelement/canplay_event/index.html deleted file mode 100644 index 836311ef0114db..00000000000000 --- a/files/ja/conflicting/web/api/htmlmediaelement/canplay_event/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: GlobalEventHandlers.oncanplay -slug: conflicting/Web/API/HTMLMediaElement/canplay_event -tags: - - API - - Event Handler - - GlobalEventHandlers - - Property - - Reference -translation_of: Web/API/GlobalEventHandlers/oncanplay -original_slug: Web/API/GlobalEventHandlers/oncanplay ---- -
{{ ApiRef("HTML DOM") }}
- -

oncanplay は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("canplay")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。

- -

canplay イベントは、メディアを再生できるユーザーエージェントのとき、バッファリングのためにコンテンツを停止せずに、メディアを最後まで再生するのに十分なデータがロードされていないと推定されるときに発生します。

- -

構文

- -
element.oncanplay = handlerFunction;
-var handlerFunction = element.oncanplay;
-
- -

handlerFunction は、null またはイベントハンドラーを指定する JavaScript 関数のいずれかです。

- -

仕様

- - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('HTML WHATWG','#handler-oncanplay','oncanplay')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザー実装状況

- - - -

{{Compat("api.GlobalEventHandlers.oncanplay")}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/htmlmediaelement/canplay_event/index.md b/files/ja/conflicting/web/api/htmlmediaelement/canplay_event/index.md new file mode 100644 index 00000000000000..61b324e6265930 --- /dev/null +++ b/files/ja/conflicting/web/api/htmlmediaelement/canplay_event/index.md @@ -0,0 +1,53 @@ +--- +title: GlobalEventHandlers.oncanplay +slug: conflicting/Web/API/HTMLMediaElement/canplay_event +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/oncanplay +original_slug: Web/API/GlobalEventHandlers/oncanplay +--- +{{ ApiRef("HTML DOM") }} + +**`oncanplay`** は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("canplay")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。 + +`canplay` イベントは、メディアを再生できるユーザーエージェントのとき、バッファリングのためにコンテンツを停止せずに、メディアを最後まで再生するのに十分なデータがロードされていないと推定されるときに発生します。 + +## 構文 + +``` +element.oncanplay = handlerFunction; +var handlerFunction = element.oncanplay; +``` + +`handlerFunction` は、`null` またはイベントハンドラーを指定する [JavaScript 関数](/ja/docs/Web/JavaScript/Reference/Functions)のいずれかです。 + +## 仕様 + + + + + + + + + + + + + + +
仕様書策定状況コメント
+ {{SpecName('HTML WHATWG','#handler-oncanplay','oncanplay')}} + {{Spec2('HTML WHATWG')}}
+ +## ブラウザー実装状況 + +{{Compat("api.GlobalEventHandlers.oncanplay")}} + +## 関連情報 + +- [DOM onevent ハンドラー](/ja/docs/Web/Guide/Events/Event_handlers "/ja/docs/Web/Guide/DOM/Events/Event_handlers") diff --git a/files/ja/conflicting/web/api/htmlmediaelement/canplaythrough_event/index.html b/files/ja/conflicting/web/api/htmlmediaelement/canplaythrough_event/index.html deleted file mode 100644 index 762771c8a44b9c..00000000000000 --- a/files/ja/conflicting/web/api/htmlmediaelement/canplaythrough_event/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: GlobalEventHandlers.oncanplaythrough -slug: conflicting/Web/API/HTMLMediaElement/canplaythrough_event -tags: - - API - - Event Handler - - GlobalEventHandlers - - Property - - Reference -translation_of: Web/API/GlobalEventHandlers/oncanplaythrough -original_slug: Web/API/GlobalEventHandlers/oncanplaythrough ---- -
{{ ApiRef("HTML DOM") }}
- -

oncanplaythrough は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("canplaythrough")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。

- -

canplaythrough イベントは、メディアを再生できるユーザーエージェントのとき、バッファリングのためにコンテンツを停止せずに、メディアを最後まで再生するのに十分なデータがロードされていると推定されるときに発生します。

- -

構文

- -
element.oncanplaythrough = handlerFunction;
-var handlerFunction = element.oncanplaythrough;
-
- -

handlerFunction は、null またはイベントハンドラーを指定する JavaScript 関数のいずれかです。

- -

仕様

- - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('HTML WHATWG','#handler-oncanplaythrough','oncanplaythrough')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザー実装状況

- - - -

{{Compat("api.GlobalEventHandlers.oncanplaythrough")}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/htmlmediaelement/canplaythrough_event/index.md b/files/ja/conflicting/web/api/htmlmediaelement/canplaythrough_event/index.md new file mode 100644 index 00000000000000..ceec005c282a74 --- /dev/null +++ b/files/ja/conflicting/web/api/htmlmediaelement/canplaythrough_event/index.md @@ -0,0 +1,54 @@ +--- +title: GlobalEventHandlers.oncanplaythrough +slug: conflicting/Web/API/HTMLMediaElement/canplaythrough_event +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/oncanplaythrough +original_slug: Web/API/GlobalEventHandlers/oncanplaythrough +--- +{{ ApiRef("HTML DOM") }} + +**`oncanplaythrough`** は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("canplaythrough")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。 + +`canplaythrough` イベントは、メディアを再生できるユーザーエージェントのとき、バッファリングのためにコンテンツを停止せずに、メディアを最後まで再生するのに十分なデータがロードされていると推定されるときに発生します。 + +## 構文 + +``` +element.oncanplaythrough = handlerFunction; +var handlerFunction = element.oncanplaythrough; +``` + +`handlerFunction` は、`null` またはイベントハンドラーを指定する [JavaScript 関数](/ja/docs/Web/JavaScript/Reference/Functions)のいずれかです。 + +## 仕様 + + + + + + + + + + + + + + +
仕様書策定状況コメント
+ {{SpecName('HTML WHATWG','#handler-oncanplaythrough','oncanplaythrough')}} + {{Spec2('HTML WHATWG')}}
+ +## ブラウザー実装状況 + +{{Compat("api.GlobalEventHandlers.oncanplaythrough")}} + +## 関連情報 + +- {{event("canplaythrough")}} +- [DOM onevent ハンドラー](/ja/docs/Web/Guide/Events/Event_handlers "/ja/docs/Web/Guide/DOM/Events/Event_handlers") diff --git a/files/ja/conflicting/web/api/htmlmediaelement/playing_event/index.html b/files/ja/conflicting/web/api/htmlmediaelement/playing_event/index.html deleted file mode 100644 index 8777573b94dd4f..00000000000000 --- a/files/ja/conflicting/web/api/htmlmediaelement/playing_event/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: GlobalEventHandlers.onplaying -slug: conflicting/Web/API/HTMLMediaElement/playing_event -tags: - - API - - Event Handler - - GlobalEventHandlers - - Property - - Reference - - イベントハンドラー - - プロパティ -translation_of: Web/API/GlobalEventHandlers/onplaying -original_slug: Web/API/GlobalEventHandlers/onplaying ---- -
{{ApiRef("HTML DOM")}}
- -

onplaying は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("Event_handlers", "event handler")}} のうち {{event("playing")}} イベントを処理するためのものです。

- -

playing イベントは、メディアデータが不足して一時停止または遅延した後、再生が開始できる状態になったときに発生します。

- -

構文

- -
element.onplaying = handlerFunction;
-var handlerFunction = element.onplaying;
-
- -

handlerFunctionnull またはイベントのハンドラーを指定する JavaScript 関数です。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG','#handler-onplaying','onplaying')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザーの互換性

- -

{{Compat("api.GlobalEventHandlers.onplaying")}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/htmlmediaelement/playing_event/index.md b/files/ja/conflicting/web/api/htmlmediaelement/playing_event/index.md new file mode 100644 index 00000000000000..21520ef7bbb318 --- /dev/null +++ b/files/ja/conflicting/web/api/htmlmediaelement/playing_event/index.md @@ -0,0 +1,58 @@ +--- +title: GlobalEventHandlers.onplaying +slug: conflicting/Web/API/HTMLMediaElement/playing_event +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference + - イベントハンドラー + - プロパティ +translation_of: Web/API/GlobalEventHandlers/onplaying +original_slug: Web/API/GlobalEventHandlers/onplaying +--- +{{ApiRef("HTML DOM")}} + +**`onplaying`** は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("Event_handlers", "event handler")}} のうち {{event("playing")}} イベントを処理するためのものです。 + +`playing` イベントは、メディアデータが不足して一時停止または遅延した後、再生が開始できる状態になったときに発生します。 + +## 構文 + +``` +element.onplaying = handlerFunction; +var handlerFunction = element.onplaying; +``` + +`handlerFunction` は `null` またはイベントのハンドラーを指定する [JavaScript 関数](/ja/docs/Web/JavaScript/Reference/Functions)です。 + +## 仕様書 + + + + + + + + + + + + + + + + +
仕様書状態備考
+ {{SpecName('HTML WHATWG','#handler-onplaying','onplaying')}} + {{Spec2('HTML WHATWG')}}
+ +## ブラウザーの互換性 + +{{Compat("api.GlobalEventHandlers.onplaying")}} + +## 関連情報 + +- {{domxref("HTMLMediaElement/playing_event", "playing")}} +- [DOM イベントハンドラー](/ja/docs/Web/Guide/Events/Event_handlers) diff --git a/files/ja/conflicting/web/api/idbrequest/success_event/index.html b/files/ja/conflicting/web/api/idbrequest/success_event/index.html deleted file mode 100644 index 0c664cea58b406..00000000000000 --- a/files/ja/conflicting/web/api/idbrequest/success_event/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: IDBRequest.onsuccess -slug: conflicting/Web/API/IDBRequest/success_event -tags: - - API - - Database - - IDBRequest - - IndexedDB - - Property - - Reference - - Storage - - onsuccess -translation_of: Web/API/IDBRequest/onsuccess -original_slug: Web/API/IDBRequest/onsuccess ---- -

{{ APIRef("IndexedDB") }}

- -
-

{{domxref("IDBRequest")}} インターフェースのonsuccessイベントハンドラはリクエストの結果が正常に帰ってきた時に着火されるsuccessイベントをハンドリングします。

- -

イベントハンドラは、type="success"の成功イベントをパラメータとして受け取ります。

- -

{{AvailableInWorkers}}

-
- -

構文

- -
request.onsuccess = function(event) { ... };
- -

- -

下記の例は、指定されたレコードタイトルをリクエストします。リクエストのonsuccessイベントハンドラは{{domxref("IDBObjectStore")}} (objectStoreTitleRequest.resultとして利用可能)からレコードを取得し、そのプロパティを更新してオブジェクトストアに書き戻します。

- -

完全な例は To-do Notifications app (example live)を参照してください。

- -
var title = "Walk dog";
-
-// いつものようにトランザクションをオープンする
-var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
-
-// title変数の値をタイトルとして持つTo-Doリストオブジェクトを取得する
-var objectStoreTitleRequest = objectStore.get(title);
-
-objectStoreTitleRequest.onsuccess = function() {
-  // resultとして返却されたデータオブジェクトを取得
-  var data = objectStoreTitleRequest.result;
-
-  // データオブジェクトのnotifiedプロパティ値を"yes"に更新する
-  data.notified = "yes";
-
-  // データベースにアイテムを書き戻す別のリクエストを作成する
-  var updateTitleRequest = objectStore.put(data);
-
-  // この新しいリクエストが成功すると、
-  // 表示更新のためにdisplayData()が再度実行される
-  updateTitleRequest.onsuccess = function() {
-    displayData();
-  };
-};
- -

仕様書

- - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}}{{Spec2('IndexedDB')}}
{{SpecName("IndexedDB 2", "#dom-idbrequest-onsuccess", "onsuccess")}}{{Spec2("IndexedDB 2")}}
- -

ブラウザーの対応

- -
- - -

{{Compat("api.IDBRequest.onsuccess")}}

-
- -

関連情報

- -
    -
  • Using IndexedDB
  • -
  • Success Event
  • -
  • Starting transactions: {{domxref("IDBDatabase")}}
  • -
  • Using transactions: {{domxref("IDBTransaction")}}
  • -
  • Setting a range of keys: {{domxref("IDBKeyRange")}}
  • -
  • Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}
  • -
  • Using cursors: {{domxref("IDBCursor")}}
  • -
  • Reference example: To-do Notifications (view example live.)
  • -
  • success event
  • -
diff --git a/files/ja/conflicting/web/api/idbrequest/success_event/index.md b/files/ja/conflicting/web/api/idbrequest/success_event/index.md new file mode 100644 index 00000000000000..2bd95c9dfe4315 --- /dev/null +++ b/files/ja/conflicting/web/api/idbrequest/success_event/index.md @@ -0,0 +1,82 @@ +--- +title: IDBRequest.onsuccess +slug: conflicting/Web/API/IDBRequest/success_event +tags: + - API + - Database + - IDBRequest + - IndexedDB + - Property + - Reference + - Storage + - onsuccess +translation_of: Web/API/IDBRequest/onsuccess +original_slug: Web/API/IDBRequest/onsuccess +--- +{{ APIRef("IndexedDB") }} + +{{domxref("IDBRequest")}} インターフェースの**`onsuccess`**イベントハンドラはリクエストの結果が正常に帰ってきた時に着火される[`success`](/ja/docs/Web/API/IDBRequest/success_event)イベントをハンドリングします。 + +イベントハンドラは、type="success"の成功[イベント](/ja/docs/Web/Events/success)をパラメータとして受け取ります。 + +{{AvailableInWorkers}} + +## 構文 + +``` +request.onsuccess = function(event) { ... }; +``` + +## 例 + +下記の例は、指定されたレコードタイトルをリクエストします。リクエストの`onsuccess`イベントハンドラは{{domxref("IDBObjectStore")}} (`objectStoreTitleRequest.result`として利用可能)からレコードを取得し、そのプロパティを更新してオブジェクトストアに書き戻します。 + +完全な例は [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([example live](http://mdn.github.io/to-do-notifications/))を参照してください。 + +
var title = "Walk dog";
+
+// いつものようにトランザクションをオープンする
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// title変数の値をタイトルとして持つTo-Doリストオブジェクトを取得する
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // resultとして返却されたデータオブジェクトを取得
+  var data = objectStoreTitleRequest.result;
+
+  // データオブジェクトのnotifiedプロパティ値を"yes"に更新する
+  data.notified = "yes";
+
+  // データベースにアイテムを書き戻す別のリクエストを作成する
+  var updateTitleRequest = objectStore.put(data);
+
+  // この新しいリクエストが成功すると、
+  // 表示更新のためにdisplayData()が再度実行される
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+ +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ---- | +| {{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbrequest-onsuccess", "onsuccess")}} | {{Spec2("IndexedDB 2")}} | | + +## ブラウザーの対応 + +{{Compat("api.IDBRequest.onsuccess")}} + +## 関連情報 + +- [Using IndexedDB](/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB) +- [Success Event](/ja/docs/Web/Events/success) +- Starting transactions: {{domxref("IDBDatabase")}} +- Using transactions: {{domxref("IDBTransaction")}} +- Setting a range of keys: {{domxref("IDBKeyRange")}} +- Retrieving and making changes to your data: {{domxref("IDBObjectStore")}} +- Using cursors: {{domxref("IDBCursor")}} +- Reference example: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).) +- [`success`](/ja/docs/Web/API/IDBRequest/success_event) event diff --git a/files/ja/conflicting/web/api/mediadevices/getusermedia/index.html b/files/ja/conflicting/web/api/mediadevices/getusermedia/index.html deleted file mode 100644 index a27673f856c92d..00000000000000 --- a/files/ja/conflicting/web/api/mediadevices/getusermedia/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: MediaStreamConstraints -slug: conflicting/Web/API/MediaDevices/getUserMedia -translation_of: Web/API/MediaStreamConstraints -original_slug: Web/API/MediaStreamConstraints ---- -
{{APIRef("Media Capture and Streams")}}
- -
MediaStreamConstraintsのオブジェクトは、{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}を呼び出した時に返される{{domxref("MediaStream")}}に含まれるトラックの種類が何であるかを知るため、また、これらのトラック設定の制約を確立するために使用されます。
- -
- -
制約がどのようにして動作するのかについての詳細は、Capabilities, constraints, and settings (英語)をお読みください。
- -

プロパティ

- -

以下のプロパティの組み合わせ(全ては必要ありません)がこのオブジェクトに存在するのでしょう。

- -

トラック制約

- -
-
{{domxref("MediaStreamConstraints.video", "video")}}
-
ビデオトラックを必須とするかどうかを示すBooleanの値または、返される{{domxref("MediaStream")}}に含まれるビデオトラックの制約を示すための{{domxref("MediaTrackConstraints")}}オブジェクトのどちらかです。制約が与えられている場合は、ビデオトラックは要求されることになります。
-
{{domxref("MediaStreamConstraints.audio", "audio")}}
-
オーディオトラックを必須とするかどうかを示すBooleanの値または、返される{{domxref("MediaStream")}}に含まれるオーディオトラックの制約を示すための{{domxref("MediaTrackConstraints")}}オブジェクトのどちらかです。制約が与えられている場合は、オーディオトラックは要求されることになります。
-
- -

セキュリティ

- -
-
{{domxref("MediaStreamConstraints.peerIdentity", "peerIdentity")}}
-
{{domxref("DOMString")}}は、ストリームへアクセスしているピアを識別します。このプロパティが指定されている場合は、特定のピアだけがこのストリームを受信して使用することができます。この方法で隔離されたストリームは、メディア要素(({{HTMLElement("audio")}}または{{HTMLElement("video")}}))でのみ再生可能です。{{Glossary("CORS")}}クロスオリジン規則の影響下にある場合、このコンテンツはその規則の下に保護されます。
-
- -

ブラウザ互換性

- -

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

- -

関連項目

- -
    -
  • {{domxref("MediaDevices.getUserMedia()")}}
  • -
  • {{domxref("MediaStreamTrack.getConstraints()")}}
  • -
  • {{domxref("MediaStreamTrack.applyConstraints()")}}
  • -
  • {{domxref("MediaDevices.getSupportedConstraints()")}}
  • -
  • {{domxref("MediaTrackSupportedConstraints")}}
  • -
  • {{domxref("MediaStreamTrack.getSettings()")}}
  • -
diff --git a/files/ja/conflicting/web/api/mediadevices/getusermedia/index.md b/files/ja/conflicting/web/api/mediadevices/getusermedia/index.md new file mode 100644 index 00000000000000..41b4420b4fc741 --- /dev/null +++ b/files/ja/conflicting/web/api/mediadevices/getusermedia/index.md @@ -0,0 +1,36 @@ +--- +title: MediaStreamConstraints +slug: conflicting/Web/API/MediaDevices/getUserMedia +translation_of: Web/API/MediaStreamConstraints +original_slug: Web/API/MediaStreamConstraints +--- +{{APIRef("Media Capture and Streams")}}**`MediaStreamConstraints`**のオブジェクトは、{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}を呼び出した時に返される{{domxref("MediaStream")}}に含まれるトラックの種類が何であるかを知るため、また、これらのトラック設定の制約を確立するために使用されます。制約がどのようにして動作するのかについての詳細は、[Capabilities, constraints, and settings](/ja/docs/Web/API/Media_Streams_API/Constraints) (英語)をお読みください。 + +## プロパティ + +以下のプロパティの組み合わせ(全ては必要ありません)がこのオブジェクトに存在するのでしょう。 + +### トラック制約 + +- {{domxref("MediaStreamConstraints.video", "video")}} + - : ビデオトラックを必須とするかどうかを示す Boolean の値または、返される{{domxref("MediaStream")}}に含まれるビデオトラックの制約を示すための{{domxref("MediaTrackConstraints")}}オブジェクトのどちらかです。制約が与えられている場合は、ビデオトラックは要求されることになります。 +- {{domxref("MediaStreamConstraints.audio", "audio")}} + - : オーディオトラックを必須とするかどうかを示す Boolean の値または、返される{{domxref("MediaStream")}}に含まれるオーディオトラックの制約を示すための{{domxref("MediaTrackConstraints")}}オブジェクトのどちらかです。制約が与えられている場合は、オーディオトラックは要求されることになります。 + +### セキュリティ + +- {{domxref("MediaStreamConstraints.peerIdentity", "peerIdentity")}} + - : {{domxref("DOMString")}}は、ストリームへアクセスしているピアを識別します。このプロパティが指定されている場合は、特定のピアだけがこのストリームを受信して使用することができます。この方法で隔離されたストリームは、メディア要素(({{HTMLElement("audio")}}または{{HTMLElement("video")}}))でのみ再生可能です。{{Glossary("CORS")}}クロスオリジン規則の影響下にある場合、このコンテンツはその規則の下に保護されます。 + +## ブラウザ互換性 + +{{Compat("api.MediaStreamConstraints")}} + +## 関連項目 + +- {{domxref("MediaDevices.getUserMedia()")}} +- {{domxref("MediaStreamTrack.getConstraints()")}} +- {{domxref("MediaStreamTrack.applyConstraints()")}} +- {{domxref("MediaDevices.getSupportedConstraints()")}} +- {{domxref("MediaTrackSupportedConstraints")}} +- {{domxref("MediaStreamTrack.getSettings()")}} diff --git a/files/ja/conflicting/web/api/mediarecorder/error_event/index.html b/files/ja/conflicting/web/api/mediarecorder/error_event/index.html deleted file mode 100644 index aafe51cc848458..00000000000000 --- a/files/ja/conflicting/web/api/mediarecorder/error_event/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: MediaRecorder.onerror -slug: conflicting/Web/API/MediaRecorder/error_event -tags: - - API - - Audio - - Media Capture - - Media Recorder API - - MediaRecorder - - Property - - Reference - - Video - - onerror -translation_of: Web/API/MediaRecorder/onerror -original_slug: Web/API/MediaRecorder/onerror ---- -
{{APIRef("MediaStream Recording")}}
- -

{{domxref("MediaRecorder")}} インターフェイスの onerror イベントハンドラは、エラーが発生したときに MediaStream Recording API によって呼び出されます。 メディアレコーダーの作成中または使用中に発生したエラーを処理するためのイベントハンドラを提供できます。 エラーオブジェクトは {{domxref("MediaRecorderErrorEvent")}} 型で、その {{domxref("MediaRecorderErrorEvent.error", "error")}} プロパティには発生したエラーを説明する {{domxref("DOMException")}} オブジェクトが含まれています。

- -

構文

- -
MediaRecorder.onerror = errorHandlerFunction;
-
- -

- -

レコーダーの有効期間中にエラーが発生したときに必ず呼び出される関数。 発生する可能性があるその他の一般的なエラーに加えて、MediaStream Recording API を使用すると、以下のエラーが特に発生する可能性があります。 どれが発生したかを判断するには、{{domxref("DOMException.name", "MediaRecorderErrorEvent.error.name")}} の値を確認してください。

- -
-
InvalidStateError
-
非アクティブなレコーダーの停止や一時停止、アクティブなレコーダーの起動や再開、それ以外の場合は、間違った状態で MediaRecorder を操作しようとしました。 この例外は、削除されたまたは取り除かれたソースに対して要求が行われたときにも発生する可能性があります。
-
SecurityError
-
{{domxref("MediaStream")}} は記録を禁止するように設定されています。 これは、例えば、ユーザーが入力デバイスを使用するパーミッションを拒否したときに {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を使用して取得されたソースの場合などです。 これは、ソースストリームの {{domxref("MediaStreamConstraints.peerIdentity", "peerIdentity")}} 制約により、ストリーム内の {{domxref("MediaStreamTrack")}} が {{domxref("MediaStreamTrack.isolated", "isolated")}} としてマークされている場合にも発生します。
-
NotSupportedError
-
ユーザーのデバイスがサポートしていない MIME タイプを使用して MediaRecorder をインスタンス化しようとしました。 1つ以上の要求されたコンテナ、コーデック、またはプロファイル、その他の情報が無効である可能性があります。
-
UnknownError
-
分類できない、セキュリティに関連しないエラーが発生しました。 記録が停止し、MediaRecorder の {{domxref("MediaRecorder.state", "state")}} が非アクティブになり、最後の {{event("dataavailable")}} イベントが残りの受信データと共に MediaRecorder に送られ、最後に {{event("stop")}} イベントが送られます。
-
- -

これらのエラーは、MediaRecorder メソッドの呼び出しが原因で直接発生した場合も、録音プロセス中に発生した問題が原因で間接的に発生した場合もあります。

- -

- -

この例では、新しい {{domxref("MediaRecorder")}} インスタンスを作成し、{{Glossary("user agent", "ユーザーエージェント")}}のデフォルトのメディア形式を使用して録画を開始します。 MediaRecorder または、エラーの名前(セットアッププロセス中に例外がスローされた場合)のいずれかを返します。

- -
-
function recordStream(stream) {
-  let recorder = null;
-  let bufferList = [];
-
-  try {
-    recorder = new MediaRecorder(stream);
-  } catch(err) {
-    return err.name;     /* エラー名を返す */
-  }
-
-  recorder.ondataavailable = function(event) {
-    bufferList.push(event.data);
-  };
-
-  recorder.onerror = function(event) {
-    let error = event.error;
-
-    switch(error.name) {
-      case InvalidStateError:
-        showNotification("今すぐ動画を録画することはできません。 " +
-                         "あとでもう一度試してみてください。");
-        break;
-      case SecurityError:
-        showNotification("セキュリティ上の制限により、" +
-                         "指定されたソースを録音する" +
-                         "ことはできません。");
-        break;
-      default:
-        showNotification("動画を録画しようとしたときに" +
-                         "問題が発生しました。");
-        break;
-    }
-  };
-
-  /* ここは、ディスクへのバッファの書き込みを定期的に処理する
-     ワーカーを作成するのに適した場所です。 */
-
-  recorder.start(100);  /* バッファあたり 100ms のタイムスライス */
-  return recorder;
-}
-
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName("MediaStream Recording", "#widl-MediaRecorder-onerror", "MediaRecorder.onerror")}}{{Spec2("MediaStream Recording")}}初期定義
- -

ブラウザーの互換性

- - - -

{{Compat("api.MediaRecorder.onerror")}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/mediarecorder/error_event/index.md b/files/ja/conflicting/web/api/mediarecorder/error_event/index.md new file mode 100644 index 00000000000000..3b867b1b440ebf --- /dev/null +++ b/files/ja/conflicting/web/api/mediarecorder/error_event/index.md @@ -0,0 +1,103 @@ +--- +title: MediaRecorder.onerror +slug: conflicting/Web/API/MediaRecorder/error_event +tags: + - API + - Audio + - Media Capture + - Media Recorder API + - MediaRecorder + - Property + - Reference + - Video + - onerror +translation_of: Web/API/MediaRecorder/onerror +original_slug: Web/API/MediaRecorder/onerror +--- +{{APIRef("MediaStream Recording")}} + +{{domxref("MediaRecorder")}} インターフェイスの **`onerror`** イベントハンドラは、エラーが発生したときに [MediaStream Recording API](/ja/docs/Web/API/MediaStream_Recording_API) によって呼び出されます。 メディアレコーダーの作成中または使用中に発生したエラーを処理するためのイベントハンドラを提供できます。 エラーオブジェクトは {{domxref("MediaRecorderErrorEvent")}} 型で、その {{domxref("MediaRecorderErrorEvent.error", "error")}} プロパティには発生したエラーを説明する {{domxref("DOMException")}} オブジェクトが含まれています。 + +## 構文 + +``` +MediaRecorder.onerror = errorHandlerFunction; +``` + +### 値 + +レコーダーの有効期間中にエラーが発生したときに必ず呼び出される関数。 発生する可能性があるその他の一般的なエラーに加えて、MediaStream Recording API を使用すると、以下のエラーが特に発生する可能性があります。 どれが発生したかを判断するには、{{domxref("DOMException.name", "MediaRecorderErrorEvent.error.name")}} の値を確認してください。 + +- `InvalidStateError` + - : 非アクティブなレコーダーの停止や一時停止、アクティブなレコーダーの起動や再開、それ以外の場合は、間違った状態で `MediaRecorder` を操作しようとしました。 この例外は、削除されたまたは取り除かれたソースに対して要求が行われたときにも発生する可能性があります。 +- `SecurityError` + - : {{domxref("MediaStream")}} は記録を禁止するように設定されています。 これは、例えば、ユーザーが入力デバイスを使用するパーミッションを拒否したときに {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を使用して取得されたソースの場合などです。 これは、ソースストリームの {{domxref("MediaStreamConstraints.peerIdentity", "peerIdentity")}} 制約により、ストリーム内の {{domxref("MediaStreamTrack")}} が {{domxref("MediaStreamTrack.isolated", "isolated")}} としてマークされている場合にも発生します。 +- `NotSupportedError` + - : ユーザーのデバイスがサポートしていない MIME タイプを使用して `MediaRecorder` をインスタンス化しようとしました。 1 つ以上の要求されたコンテナ、コーデック、またはプロファイル、その他の情報が無効である可能性があります。 +- `UnknownError` + - : 分類できない、セキュリティに関連しないエラーが発生しました。 記録が停止し、`MediaRecorder` の {{domxref("MediaRecorder.state", "state")}} が非アクティブになり、最後の {{event("dataavailable")}} イベントが残りの受信データと共に `MediaRecorder` に送られ、最後に {{event("stop")}} イベントが送られます。 + +これらのエラーは、`MediaRecorder` メソッドの呼び出しが原因で直接発生した場合も、録音プロセス中に発生した問題が原因で間接的に発生した場合もあります。 + +## 例 + +この例では、新しい {{domxref("MediaRecorder")}} インスタンスを作成し、{{Glossary("user agent", "ユーザーエージェント")}}のデフォルトのメディア形式を使用して録画を開始します。 `MediaRecorder` または、エラーの名前(セットアッププロセス中に例外がスローされた場合)のいずれかを返します。 + +
function recordStream(stream) {
+  let recorder = null;
+  let bufferList = [];
+
+try {
+recorder = new MediaRecorder(stream);
+} catch(err) {
+return err.name; /_ エラー名を返す _/
+}
+
+recorder.ondataavailable = function(event) {
+bufferList.push(event.data);
+};
+
+recorder.onerror = function(event) {
+let error = event.error;
+
+    switch(error.name) {
+      case InvalidStateError:
+        showNotification("今すぐ動画を録画することはできません。 " +
+                         "あとでもう一度試してみてください。");
+        break;
+      case SecurityError:
+        showNotification("セキュリティ上の制限により、" +
+                         "指定されたソースを録音する" +
+                         "ことはできません。");
+        break;
+      default:
+        showNotification("動画を録画しようとしたときに" +
+                         "問題が発生しました。");
+        break;
+    }
+
+};
+
+/_ ここは、ディスクへのバッファの書き込みを定期的に処理する
+ワーカーを作成するのに適した場所です。 _/
+
+recorder.start(100); /_ バッファあたり 100ms のタイムスライス _/
+return recorder;
+}
+ +## 仕様 + +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- | +| {{SpecName("MediaStream Recording", "#widl-MediaRecorder-onerror", "MediaRecorder.onerror")}} | {{Spec2("MediaStream Recording")}} | 初期定義 | + +## ブラウザーの互換性 + +{{Compat("api.MediaRecorder.onerror")}} + +## 関連情報 + +- [Media​Stream Recording API の使用](/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API) +- [ウェブディクタフォン](http://mdn.github.io/web-dictaphone/): MediaRecorder + getUserMedia + Web Audio API 可視化デモ、[Chris Mills](https://twitter.com/chrisdavidmills) 著([Github のソース](https://github.com/mdn/web-dictaphone/))。(英語) +- [simpl.info の MediaStream Recording のデモ](http://simpl.info/mediarecorder/)、[Sam Dutton](https://twitter.com/sw12) 著。(英語) +- {{domxref("MediaDevices.getUserMedia()")}} diff --git a/files/ja/conflicting/web/api/mediastreamtrack/mute_event/index.html b/files/ja/conflicting/web/api/mediastreamtrack/mute_event/index.html deleted file mode 100644 index 42f6afd740ee20..00000000000000 --- a/files/ja/conflicting/web/api/mediastreamtrack/mute_event/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: MediaStreamTrack.onmute -slug: conflicting/Web/API/MediaStreamTrack/mute_event -translation_of: Web/API/MediaStreamTrack/onmute -original_slug: Web/API/MediaStreamTrack/onmute ---- -

{{ APIRef("Media Capture and Streams") }}

- -

MediaStreamTrack.onmuteイベントハンドラは{{event("mute")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、トラックが一時的にデータを提供することができない時に発生します。

- -

文法

- -
track.onmute = function;
-
- -

- -

{{event("mute")}}イベントが発生した時の実行する処理の関数をEventHandlerとして設定します。このイベントハンドラーの関数は1つのパラメータ持ちます。このパラメータはイベントオブジェクトであり、単純なEventのオブジェクトです。

- -

- -

この例では、「ミュートされたスピーカー」絵文字を要素のコンテンツHTMLに設定するため、ミュートハンドラーが確立されています。

- -
myTrack.onmute = function(evt) {
-  playStateIcon.innerHTML = "&#1F507;";
-};
-
- -

仕様

- - - - - - - - - - - - - - - - -
仕様状況コメント
{{ SpecName('Media Capture', '#widl-MediaStreamTrack-onmute', 'MediaStreamTrack.onmute') }}{{ Spec2('Media Capture') }}初版
- -

ブラウザ互換性

- - - -

{{Compat("api.MediaStreamTrack.onmute")}}

- -

関連項目

- -
    -
  • {{event("mute")}} イベント、およびその型である{{domxref("Event")}}。
  • -
diff --git a/files/ja/conflicting/web/api/mediastreamtrack/mute_event/index.md b/files/ja/conflicting/web/api/mediastreamtrack/mute_event/index.md new file mode 100644 index 00000000000000..2b653217bb0931 --- /dev/null +++ b/files/ja/conflicting/web/api/mediastreamtrack/mute_event/index.md @@ -0,0 +1,43 @@ +--- +title: MediaStreamTrack.onmute +slug: conflicting/Web/API/MediaStreamTrack/mute_event +translation_of: Web/API/MediaStreamTrack/onmute +original_slug: Web/API/MediaStreamTrack/onmute +--- +{{ APIRef("Media Capture and Streams") }} + +**`MediaStreamTrack.onmute`**イベントハンドラは{{event("mute")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、トラックが一時的にデータを提供することができない時に発生します。 + +## 文法 + +``` +track.onmute = function; +``` + +### 値 + +{{event("mute")}}イベントが発生した時の実行する処理の関数を[`EventHandler`](/ja/docs/Web/API/EventHandler "この項目についての文書はまだ書かれていません。書いてみませんか?")として設定します。このイベントハンドラーの関数は 1 つのパラメータ持ちます。このパラメータはイベントオブジェクトであり、単純な[`Event`](/ja/docs/Web/API/Event "Event インターフェイスは、DOM で発生するイベントを表します。ユーザーによって発生するイベント (マウスやキーボードのイベント) もありますし、API によって発生するイベント (アニメーションの実行が完了したことを示すイベントや、動画再生が一時停止したイベントなど) もあります。さまざまな型のイベントがあり、一部のイベントは基底の Event インターフェイスを基にした他のインターフェイスを使用します。Event 自体は、すべてのイベントで共通のプロパティやメソッドを持ちます。")のオブジェクトです。 + +## 例 + +この例では、「ミュートされたスピーカー」絵文字を要素のコンテンツ HTML に設定するため、ミュートハンドラーが確立されています。 + +```js +myTrack.onmute = function(evt) { + playStateIcon.innerHTML = "F507;"; +}; +``` + +## 仕様 + +| 仕様 | 状況 | コメント | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------- | +| {{ SpecName('Media Capture', '#widl-MediaStreamTrack-onmute', 'MediaStreamTrack.onmute') }} | {{ Spec2('Media Capture') }} | 初版 | + +## ブラウザ互換性 + +{{Compat("api.MediaStreamTrack.onmute")}} + +## 関連項目 + +- {{event("mute")}} イベント、およびその型である{{domxref("Event")}}。 diff --git a/files/ja/conflicting/web/api/mediastreamtrack/unmute_event/index.html b/files/ja/conflicting/web/api/mediastreamtrack/unmute_event/index.html deleted file mode 100644 index 9735d8bf342b97..00000000000000 --- a/files/ja/conflicting/web/api/mediastreamtrack/unmute_event/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: MediaStreamTrack.onunmute -slug: conflicting/Web/API/MediaStreamTrack/unmute_event -translation_of: Web/API/MediaStreamTrack/onunmute -original_slug: Web/API/MediaStreamTrack/onunmute ---- -

{{ APIRef("Media Capture and Streams") }}

- -

MediaStreamTrack.onunmuteイベントハンドラは{{event("unmute")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、トラックが再びデータを送信できるようになった時に発生します。

- -

文法

- -
track.onunmute = function;
-
- -

- -
    -
  • functionはユーザーが定義した関数の名前で末尾の()やパラメータを省略したもの、または、function(event) {...}の形式で表現された匿名関です。イベントハンドラは常に 、{{domxref("Event")}}型のイベントを含む1つのパラメータを持ちます。
  • -
- -

- -
dc.onunmute = function(ev) { alert("unmute event detected!"); };
-
- -

仕様

- - - - - - - - - - - - - - - - -
仕様状況コメント
{{ SpecName('Media Capture', '#widl-MediaStreamTrack-onunmute', 'MediaStreamTrack.onunmute') }}{{ Spec2('Media Capture') }}初版
- -

ブラウザ互換性

- -

{{Compat("api.MediaStreamTrack.onunmute")}}

- -

関連項目

- -
    -
  • {{event("unmute")}}イベント、およびその型である{{domxref("Event")}}。
  • -
diff --git a/files/ja/conflicting/web/api/mediastreamtrack/unmute_event/index.md b/files/ja/conflicting/web/api/mediastreamtrack/unmute_event/index.md new file mode 100644 index 00000000000000..f49208e2dff0c6 --- /dev/null +++ b/files/ja/conflicting/web/api/mediastreamtrack/unmute_event/index.md @@ -0,0 +1,39 @@ +--- +title: MediaStreamTrack.onunmute +slug: conflicting/Web/API/MediaStreamTrack/unmute_event +translation_of: Web/API/MediaStreamTrack/onunmute +original_slug: Web/API/MediaStreamTrack/onunmute +--- +{{ APIRef("Media Capture and Streams") }} + +**`MediaStreamTrack.onunmute`**イベントハンドラは{{event("unmute")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、トラックが再びデータを送信できるようになった時に発生します。 + +## 文法 + +``` +track.onunmute = function; +``` + +### 値 + +- `function`はユーザーが定義した関数の名前で末尾の`()`やパラメータを省略したもの、または、`function(event) {...}`の形式で表現された匿名関です。イベントハンドラは常に 、{{domxref("Event")}}型のイベントを含む 1 つのパラメータを持ちます。 + +## 例 + +```js +dc.onunmute = function(ev) { alert("unmute event detected!"); }; +``` + +## 仕様 + +| 仕様 | 状況 | コメント | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------- | +| {{ SpecName('Media Capture', '#widl-MediaStreamTrack-onunmute', 'MediaStreamTrack.onunmute') }} | {{ Spec2('Media Capture') }} | 初版 | + +## ブラウザ互換性 + +{{Compat("api.MediaStreamTrack.onunmute")}} + +## 関連項目 + +- {{event("unmute")}}イベント、およびその型である{{domxref("Event")}}。 diff --git a/files/ja/conflicting/web/api/navigator/getbattery/index.html b/files/ja/conflicting/web/api/navigator/getbattery/index.html deleted file mode 100644 index 13bcda78c5bd62..00000000000000 --- a/files/ja/conflicting/web/api/navigator/getbattery/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Navigator.battery -slug: conflicting/Web/API/Navigator/getBattery -tags: - - API - - Battery - - Battery API - - Device API - - Navigator - - Non-standard - - Obsolete - - Property - - Reference - - バッテリ - - プロパティ - - 廃止 - - 標準外 -translation_of: Web/API/Navigator/battery -original_slug: Web/API/Navigator/battery ---- -
{{ApiRef("Battery API")}}
- -

battery プロパティは読み取り専用で、システムのバッテリの充電レベルや端末が充電中であるかどうかについての情報を提供し、これらのパラメーターが変化したときに発生するイベントを公開する {{DOMxRef("BatteryManager")}} を返します。このインターフェイスは Battery Status API の早期の草稿で導入されましたが、 {{JSxRef("Promise")}} ベースの {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}} に置き換えられました。

- -
-

battery プロパティは非推奨になり、バッテリの {{JSxRef("Promise")}} を返す {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}} メソッドに置き換えられました。

-
- -

構文

- -
var battery = navigator.battery;
- -

ブラウザーの互換性

- -

{{Compat("api.Navigator.battery")}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/navigator/getbattery/index.md b/files/ja/conflicting/web/api/navigator/getbattery/index.md new file mode 100644 index 00000000000000..b050e31e48caf2 --- /dev/null +++ b/files/ja/conflicting/web/api/navigator/getbattery/index.md @@ -0,0 +1,42 @@ +--- +title: Navigator.battery +slug: conflicting/Web/API/Navigator/getBattery +tags: + - API + - Battery + - Battery API + - Device API + - Navigator + - Non-standard + - Obsolete + - Property + - Reference + - バッテリ + - プロパティ + - 廃止 + - 標準外 +translation_of: Web/API/Navigator/battery +original_slug: Web/API/Navigator/battery +--- +{{ApiRef("Battery API")}} + +**`battery`** プロパティは読み取り専用で、システムのバッテリの充電レベルや端末が充電中であるかどうかについての情報を提供し、これらのパラメーターが変化したときに発生するイベントを公開する {{DOMxRef("BatteryManager")}} を返します。このインターフェイスは [Battery Status API](/ja/docs/Web/API/Battery_Status_API) の早期の草稿で導入されましたが、 {{JSxRef("Promise")}} ベースの {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}} に置き換えられました。 + +> **Note:** `battery` プロパティは非推奨になり、バッテリの {{JSxRef("Promise")}} を返す {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}} メソッドに置き換えられました。 + +## 構文 + +``` +var battery = navigator.battery; +``` + +## ブラウザーの互換性 + +{{Compat("api.Navigator.battery")}} + +## 関連情報 + +- {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}} +- [Battery Status API](/ja/docs/Web/API/Battery_Status_API) +- [Blog post - Using the Battery API](http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/) +- [David Walsh on the JavaScript Battery API](http://davidwalsh.name/battery-api) diff --git a/files/ja/conflicting/web/api/navigator/online/index.html b/files/ja/conflicting/web/api/navigator/online/index.html deleted file mode 100644 index a384397cd3e443..00000000000000 --- a/files/ja/conflicting/web/api/navigator/online/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: オンライン・オフラインイベント -slug: conflicting/Web/API/Navigator/onLine -tags: - - AJAX - - DOM - - HTML5 - - Intermediate - - NeedsUpdate - - Offline web applications - - Web Development -translation_of: Web/API/Navigator/Online_and_offline_events -original_slug: Web/API/Navigator/Online_and_offline_events ---- -

一部のブラウザーは、 Online/Offline イベントWHATWG Web Applications 1.0 仕様書に従って実装しています。

- -

概要

- -

オフラインに対応した良いウェブアプリケーションを構築するためには、アプリケーションが実際にオフラインになったタイミングを知る必要があります。また、アプリケーションが「オンライン」の状態に復帰したタイミングも知る必要があります。要件を分解すると次のようになります。

- -
    -
  1. サーバーとの再同期ができるように、ユーザーがオンラインに戻ったタイミングを知る必要があります。
  2. -
  3. サーバーへのリクエストを後回しにすることができるように、ユーザーがオフラインなったタイミングを知る必要があります。
  4. -
- -

オンライン/オフラインイベントがこのプロセスを一般化するのに役立ちます。

- -

残念ながら、これらのイベントは完全には信頼できません。より高い信頼性が必要な場合や、 API がブラウザーに実装されていない場合は、サービスワーカーを使用したり XMLHttpRequest からのレスポンスを使用するなど、他の兆候を利用してオフラインであるかどうかを検出することができます。

- -

API

- - - -

navigator.onLine は、 true/false の値を保持しているプロパティです (オンラインの場合は true、オフラインの場合は false)。

- -

このプロパティは、ユーザーが「オフラインモード」に切り替えたとき (Firefox の場合は、ファイル→オフライン作業) に更新されます。さらに、このプロパティは、ブラウザーがネットワークに接続できなくなったときに更新されます。仕様書によれば、次のようになっています。

- -
- navigator.onLine 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。
- -

Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 Firefox 41 は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。

- -

このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。 (この仕様はこれらの先行的な実装に基づいています)。従って、今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。

- -

"online" および "offline" イベント

- -

Firefox 3 は 2 つの新しいイベントを導入しました。"online" and "offline" です。これらの 2 つのイベントは、ブラウザーのオンラインおよびオフラインモードが切り替わるたびに、各ページの <body> に発行されます。加えて、このイベントは document.body から document へとバブリングし、 window までたどり着きます。これらのイベントはキャンセルできません (ユーザーのオンラインモードやオフラインモードへの移行を防ぐことはできません)。

- -

Firefox 41 では、 Windows, Linux, OS X においてネットワークの接続状態が変化したことを OS が通知したときに、これらのイベントが発行されます。

- -

これらのイベントに対するリスナーは、いくつかのお馴染みの方法で登録することができます。

-
    -
  • addEventListener を、 window, document, document.body に対して使用します。
  • -
  • document または document.body.ononline または .onoffline プロパティを JavaScript の Function オブジェクトに設定します。(注意: window.ononline または window.onoffline は互換性の理由で動作しません)
  • -
  • HTML マークアップで <body> タグの ononline="..." または onoffline="..." 属性を指定します。
  • -
- -

- -

イベントが機能しているかどうかを確認するために、簡単なテストケースを用意しました (イベントリスナーを document.body に代入しているため、 Chrome では動作しません)。

- -

こちらが JavaScript 部分です。

- -
window.addEventListener('load', function() {
-  var status = document.getElementById("status");
-  var log = document.getElementById("log");
-
-  function updateOnlineStatus(event) {
-    var condition = navigator.onLine ? "online" : "offline";
-
-    status.className = condition;
-    status.innerHTML = condition.toUpperCase();
-
-    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
-  }
-
-  window.addEventListener('online',  updateOnlineStatus);
-  window.addEventListener('offline', updateOnlineStatus);
-});
- -

CSS 部分です。

- -
#status {
-  position: fixed;
-  width: 100%;
-  font: bold 1em sans-serif;
-  color: #FFF;
-  padding: 0.5em;
-}
-
-#log {
-  padding: 2.5em 0.5em 0.5em;
-  font: 1em sans-serif;
-}
-
-.online {
-  background: green;
-}
-
-.offline {
-  background: red;
-}
-
- -

対応する HTML です。 XXX When mochitests for this are created, point to those instead and update this example -nickolay

- -
<div id="status"></div>
-<div id="log"></div>
-<p>This is a test</p>
-
- -

実行例はこちらです。

- -

{{ EmbedLiveSample('Example', '100%', '150') }}

- -

- -

この API がブラウザに実装されていない場合は、サービスワーカーや XMLHttpRequest からのレスポンスを使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。

- -

参考文献

- - diff --git a/files/ja/conflicting/web/api/navigator/online/index.md b/files/ja/conflicting/web/api/navigator/online/index.md new file mode 100644 index 00000000000000..bb5e4eb52d489d --- /dev/null +++ b/files/ja/conflicting/web/api/navigator/online/index.md @@ -0,0 +1,125 @@ +--- +title: オンライン・オフラインイベント +slug: conflicting/Web/API/Navigator/onLine +tags: + - AJAX + - DOM + - HTML5 + - Intermediate + - NeedsUpdate + - Offline web applications + - Web Development +translation_of: Web/API/Navigator/Online_and_offline_events +original_slug: Web/API/Navigator/Online_and_offline_events +--- +一部のブラウザーは、 [Online/Offline イベント](https://www.whatwg.org/specs/web-apps/current-work/#offline)を [WHATWG Web Applications 1.0 仕様書](https://www.whatwg.org/specs/web-apps/current-work/)に従って実装しています。 + +### 概要 + +オフラインに対応した良いウェブアプリケーションを構築するためには、アプリケーションが実際にオフラインになったタイミングを知る必要があります。また、アプリケーションが「オンライン」の状態に復帰したタイミングも知る必要があります。要件を分解すると次のようになります。 + +1. サーバーとの再同期ができるように、ユーザーがオンラインに戻ったタイミングを知る必要があります。 +2. サーバーへのリクエストを後回しにすることができるように、ユーザーがオフラインなったタイミングを知る必要があります。 + +オンライン/オフラインイベントがこのプロセスを一般化するのに役立ちます。 + +残念ながら、これらのイベントは完全には信頼できません。より高い信頼性が必要な場合や、 API がブラウザーに実装されていない場合は、サービスワーカーを使用したり [XMLHttpRequest からのレスポンス](https://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request)を使用するなど、他の兆候を利用してオフラインであるかどうかを検出することができます。 + +## API + +### `navigator.onLine` + +[`navigator.onLine`](/ja/docs/Web/API/Navigator/onLine) は、 `true`/`false` の値を保持しているプロパティです (オンラインの場合は `true`、オフラインの場合は `false`)。 + +このプロパティは、ユーザーが「オフラインモード」に切り替えたとき (Firefox の場合は、ファイル → オフライン作業) に更新されます。さらに、このプロパティは、ブラウザーがネットワークに接続できなくなったときに更新されます。仕様書によれば、次のようになっています。 + +> `navigator.onLine` 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。 + +Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 [Firefox 41](/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous) は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。 + +このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。 (この仕様はこれらの先行的な実装に基づいています)。従って、今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。 + +### "`online`" および "`offline`" イベント + +[Firefox 3](/ja/docs/Mozilla/Firefox/Releases/3) は 2 つの新しいイベントを導入しました。"[`online`](/ja/docs/Web/API/document.ononline)" and "[`offline`](/ja/docs/Web/API/document.onoffline)" です。これらの 2 つのイベントは、ブラウザーのオンラインおよびオフラインモードが切り替わるたびに、各ページの `` に発行されます。加えて、このイベントは `document.body` から `document` へとバブリングし、 `window` までたどり着きます。これらのイベントはキャンセルできません (ユーザーのオンラインモードやオフラインモードへの移行を防ぐことはできません)。 + +[Firefox 41](/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous) では、 Windows, Linux, OS X においてネットワークの接続状態が変化したことを OS が通知したときに、これらのイベントが発行されます。 + +これらのイベントに対するリスナーは、いくつかのお馴染みの方法で登録することができます。 + +- [`addEventListener`](/ja/docs/Web/API/EventTarget/addEventListener) を、 `window`, `document`, `document.body` に対して使用します。 +- `document` または `document.body` の `.ononline` または `.onoffline` プロパティを JavaScript の `Function` オブジェクトに設定します。(**注意:** `window.ononline` または `window.onoffline` は互換性の理由で動作しません) +- HTML マークアップで `` タグの `ononline="..."` または `onoffline="..."` 属性を指定します。 + +## 例 + +イベントが機能しているかどうかを確認するために、[簡単なテストケース](https://bugzilla.mozilla.org/attachment.cgi?id=220609)を用意しました (イベントリスナーを document.body に代入しているため、 Chrome では動作しません)。 + +こちらが JavaScript 部分です。 + +```js +window.addEventListener('load', function() { + var status = document.getElementById("status"); + var log = document.getElementById("log"); + + function updateOnlineStatus(event) { + var condition = navigator.onLine ? "online" : "offline"; + + status.className = condition; + status.innerHTML = condition.toUpperCase(); + + log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); + } + + window.addEventListener('online', updateOnlineStatus); + window.addEventListener('offline', updateOnlineStatus); +}); +``` + +CSS 部分です。 + +```css +#status { + position: fixed; + width: 100%; + font: bold 1em sans-serif; + color: #FFF; + padding: 0.5em; +} + +#log { + padding: 2.5em 0.5em 0.5em; + font: 1em sans-serif; +} + +.online { + background: green; +} + +.offline { + background: red; +} +``` + +対応する HTML です。 XXX When mochitests for this are created, point to those instead and update this example -nickolay + +```html +
+
+

This is a test

+``` + +実行例はこちらです。 + +{{ EmbedLiveSample('Example', '100%', '150') }} + +## 注 + +この API がブラウザに実装されていない場合は、サービスワーカーや [XMLHttpRequest からのレスポンス](http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request)を使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。 + +## 参考文献 + +- [WHATWG Web Applications 1.0 仕様の「Online/Offline イベント」の節](https://www.whatwg.org/specs/web-apps/current-work/#offline) +- [Firefox に実装された online/offline イベントのバグ追跡](https://bugzilla.mozilla.org/show_bug.cgi?id=336359)および[関連バグ](https://bugzilla.mozilla.org/show_bug.cgi?id=336682) +- [簡単なテストケース](https://bugzilla.mozilla.org/attachment.cgi?id=220609) +- [Online/Offline イベントの解説](http://ejohn.org/blog/offline-events/) diff --git a/files/ja/conflicting/web/api/pointer_events/index.html b/files/ja/conflicting/web/api/pointer_events/index.html deleted file mode 100644 index e3c50c41ac6ce3..00000000000000 --- a/files/ja/conflicting/web/api/pointer_events/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: TouchEvent と MouseEvent の両方をサポートする -slug: conflicting/Web/API/Pointer_events -tags: - - Guide - - TouchEvent - - touch -translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent -original_slug: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent ---- -

{{DefaultAPISidebar("Touch Events")}}

- -

{{domxref("Touch_events","touch")}} インターフェースは、タッチできるデバイス 上で高いユーザーエクスペリエンスを生み出すアプリケーションを可能にします。しかし、ウェブコンテンツの大部分がマウス入力でだけ操作できるように設計されている現実があります。したがって、ブラウザがタッチをサポートしていても、マウス入力のみを想定したコンテンツを直接修正することなく従来通り動作させるために、ブラウザはまだマウスイベントをエミュレートしなくてはなりません。

- -

理想的には、タッチベースのアプリケーションは、明示的にマウスの入力に対処する必要はありません。しかし、ブラウザはマウスイベントをエミュレートしなければならないので、処理しなければならない相互問題がいくつかあります。以下は開発者のためのイベントの動作と予期しない問題についての詳細です。

- -

イベントの発火

- -

タッチイベント標準は、タッチとマウスの動作に関するいくつかのブラウザ要件(詳細については Interaction with Mouse Events and click セクションを見てください)を定義しており、ブラウザは同じユーザー入力のレスポンスでタッチイベントとマウスイベントの両方を発火できると記述しています。このセクションでは、アプリケーションに影響を与える可能性がある要件について説明します。

- -

ひとつのユーザー入力でブラウザがタッチイベントとマウスイベントの両方を発火した場合、ブラウザは何らかのマウスイベントの前に {{event("touchstart")}} を発火させなくては なりません。したがって、アプリケーションで特定のタッチ {{domxref("Touch.target","target")}} 要素でマウスイベントが発火させたくない場合、要素のタッチイベントハンドラーで {{domxref("Event.preventDefault()","preventDefault()")}} を呼び出し追加のマウスイベントが送出されないようにしなければなりません。

- -

{{event("touchmove")}} イベントハンドラーで preventDefault() を呼び出すコードスニペットです。

- -
// touchmove handler
-function process_touchmove(ev) {
-  // Call preventDefault() to prevent any further handling
-  ev.preventDefault();
-}
-
- -

イベント順

- -

特定のタッチイベントとマウスイベントの順序は実装依存ですが、標準仕様ではひとつの入力に対して次の順序が典型であるとしています。

- -
    -
  • touchstart
  • -
  • 指の動作に応じて 0、または複数の touchmove イベント
  • -
  • touchend
  • -
  • mousemove
  • -
  • mousedown
  • -
  • mouseup
  • -
  • click
  • -
- -

{{event("touchstart")}} か {{event("touchmove")}}、{{event("touchend")}} が動作の間にキャンセルされた場合、mouse か click は発火されず、続くイベントは次のものだけになります:

- -
    -
  • touchstart
  • -
  • 指の動作に応じて 0、または複数の touchmove イベント
  • -
  • touchend
  • -
- -

コミュニティー

- - - -

関連項目とリソース

- - diff --git a/files/ja/conflicting/web/api/pointer_events/index.md b/files/ja/conflicting/web/api/pointer_events/index.md new file mode 100644 index 00000000000000..08f717a5301509 --- /dev/null +++ b/files/ja/conflicting/web/api/pointer_events/index.md @@ -0,0 +1,61 @@ +--- +title: TouchEvent と MouseEvent の両方をサポートする +slug: conflicting/Web/API/Pointer_events +tags: + - Guide + - TouchEvent + - touch +translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent +original_slug: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent +--- +{{DefaultAPISidebar("Touch Events")}} + +{{domxref("Touch_events","touch")}} インターフェースは、タッチできるデバイス 上で高いユーザーエクスペリエンスを生み出すアプリケーションを可能にします。しかし、ウェブコンテンツの大部分がマウス入力でだけ操作できるように設計されている現実があります。したがって、ブラウザがタッチをサポートしていても、マウス入力のみを想定したコンテンツを直接修正することなく*従来通り*動作させるために、ブラウザはまだマウスイベントを*エミュレート*しなくてはなりません。 + +理想的には、タッチベースのアプリケーションは、明示的にマウスの入力に対処する必要はありません。しかし、ブラウザはマウスイベントをエミュレートしなければならないので、処理しなければならない相互問題がいくつかあります。以下は開発者のためのイベントの動作と予期しない問題についての詳細です。 + +## イベントの発火 + +タッチイベント標準は、タッチとマウスの動作に関するいくつかのブラウザ要件(詳細については [_Interaction with Mouse Events and click_](https://w3c.github.io/touch-events/#mouse-events) セクションを見てください)を定義しており、*ブラウザは同じユーザー入力のレスポンスでタッチイベントとマウスイベントの両方を発火できる*と記述しています。このセクションでは、アプリケーションに影響を与える可能性がある要件について説明します。 + +ひとつのユーザー入力でブラウザがタッチイベントとマウスイベントの両方を発火した場合、ブラウザは何らかのマウスイベントの前に {{event("touchstart")}} を発火させなくては _なりません_。したがって、アプリケーションで特定のタッチ {{domxref("Touch.target","target")}} 要素でマウスイベントが発火させたくない場合、要素のタッチイベントハンドラーで {{domxref("Event.preventDefault()","preventDefault()")}} を呼び出し追加のマウスイベントが送出されないようにしなければなりません。 + +{{event("touchmove")}} イベントハンドラーで `preventDefault()` を呼び出すコードスニペットです。 + +```js +// touchmove handler +function process_touchmove(ev) { + // Call preventDefault() to prevent any further handling + ev.preventDefault(); +} +``` + +## イベント順 + +特定のタッチイベントとマウスイベントの順序は実装依存ですが、標準仕様ではひとつの入力に対して次の順序が*典型*であるとしています。 + +- `touchstart` +- 指の動作に応じて 0、または複数の `touchmove` イベント +- `touchend` +- `mousemove` +- `mousedown` +- `mouseup` +- `click` + +{{event("touchstart")}} か {{event("touchmove")}}、{{event("touchend")}} が動作の間にキャンセルされた場合、mouse か click は発火されず、続くイベントは次のものだけになります: + +- `touchstart` +- 指の動作に応じて 0、または複数の `touchmove` イベント +- `touchend` + +## コミュニティー + +- [Touch Events Community Group](https://github.com/w3c/touch-events) +- [Mail list](https://lists.w3.org/Archives/Public/public-touchevents/) +- [W3C #touchevents IRC channel](irc://irc.w3.org:6667/) + +## 関連項目とリソース + +- [Touch Events Overview](/Web/API/Touch_events) +- [Using Touch Events](/Web/API/Touch_events/Using_Touch_Events) +- [Touch and Mouse (Together Again for the First Time)](http://www.html5rocks.com/en/mobile/touchandmouse/) diff --git a/files/ja/conflicting/web/api/serviceworkercontainer/message_event/index.html b/files/ja/conflicting/web/api/serviceworkercontainer/message_event/index.html deleted file mode 100644 index 4b51168fd8d7ad..00000000000000 --- a/files/ja/conflicting/web/api/serviceworkercontainer/message_event/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: ServiceWorkerContainer.onmessage -slug: conflicting/Web/API/ServiceWorkerContainer/message_event -tags: - - API - - Property - - Reference - - Service Workers - - ServiceWorker - - ServiceWorkerContainer -translation_of: Web/API/ServiceWorkerContainer/onmessage -original_slug: Web/API/ServiceWorkerContainer/onmessage ---- -

{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}

- -

{{domxref("ServiceWorkerContainer")}} インターフェイスの onmessage プロパティは、{{Event("message")}} イベントが発生するたびに発火するイベントハンドラーです。 (例えば、{{domxref("Client.postMessage()")}} 呼び出しを介して)着信メッセージを {{domxref("ServiceWorkerContainer")}} オブジェクトに受信したときに発生します。

- -
-

: 他のウェブメッセージング機能との整合性を保つため、サービスワーカーコンテキストから受信されるメッセージ(onmessage のイベントオブジェクトなど)は、最新のブラウザーでは {{domxref("MessageEvent")}} オブジェクトによって表されます。 (これらは、以前は廃止された {{domxref("ServiceWorkerMessageEvent")}} オブジェクトで表されていました。)

-
- -

構文

- -
serviceWorkerContainer.onmessage = function(messageevent) { ... }
- -

- -
navigator.serviceWorker.onmessage = function(messageevent) {
-  console.log(`received data: ${messageevent.data}`);
-}
-
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Service Workers', '#dom-serviceworkerglobalscope-onmessage', 'ServiceWorkerContainer: onmessage')}}{{Spec2('Service Workers')}}初期定義
- -

ブラウザーの互換性

- -
- - -

{{Compat("api.ServiceWorkerContainer.onmessage")}}

-
diff --git a/files/ja/conflicting/web/api/serviceworkercontainer/message_event/index.md b/files/ja/conflicting/web/api/serviceworkercontainer/message_event/index.md new file mode 100644 index 00000000000000..5647ed31643241 --- /dev/null +++ b/files/ja/conflicting/web/api/serviceworkercontainer/message_event/index.md @@ -0,0 +1,42 @@ +--- +title: ServiceWorkerContainer.onmessage +slug: conflicting/Web/API/ServiceWorkerContainer/message_event +tags: + - API + - Property + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerContainer +translation_of: Web/API/ServiceWorkerContainer/onmessage +original_slug: Web/API/ServiceWorkerContainer/onmessage +--- +{{APIRef("Service Workers API")}}{{ SeeCompatTable() }} + +{{domxref("ServiceWorkerContainer")}} インターフェイスの **`onmessage`** プロパティは、{{Event("message")}} イベントが発生するたびに発火するイベントハンドラーです。 (例えば、{{domxref("Client.postMessage()")}} 呼び出しを介して)着信メッセージを {{domxref("ServiceWorkerContainer")}} オブジェクトに受信したときに発生します。 + +> **Note:** **注**: 他のウェブメッセージング機能との整合性を保つため、サービスワーカーコンテキストから受信されるメッセージ(`onmessage` のイベントオブジェクトなど)は、最新のブラウザーでは {{domxref("MessageEvent")}} オブジェクトによって表されます。 (これらは、以前は廃止された {{domxref("ServiceWorkerMessageEvent")}} オブジェクトで表されていました。) + +## 構文 + +``` +serviceWorkerContainer.onmessage = function(messageevent) { ... } +``` + +## 例 + +```js +navigator.serviceWorker.onmessage = function(messageevent) { + console.log(`received data: ${messageevent.data}`); +} +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------- | +| {{SpecName('Service Workers', '#dom-serviceworkerglobalscope-onmessage', 'ServiceWorkerContainer: onmessage')}} | {{Spec2('Service Workers')}} | 初期定義 | + +## ブラウザーの互換性 + +{{Compat("api.ServiceWorkerContainer.onmessage")}} diff --git a/files/ja/conflicting/web/api/serviceworkerglobalscope/message_event/index.html b/files/ja/conflicting/web/api/serviceworkerglobalscope/message_event/index.html deleted file mode 100644 index 0b741667b6df62..00000000000000 --- a/files/ja/conflicting/web/api/serviceworkerglobalscope/message_event/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: ServiceWorkerGlobalScope.onmessage -slug: conflicting/Web/API/ServiceWorkerGlobalScope/message_event -tags: - - API - - Property - - Reference - - Service - - ServiceWorker - - ServiceWorkerGlobalScope - - Worker - - onmessage -translation_of: Web/API/ServiceWorkerGlobalScope/onmessage -original_slug: Web/API/ServiceWorkerGlobalScope/onmessage ---- -
{{APIRef("Service Workers API")}}
- -

{{domxref("ServiceWorkerGlobalScope")}} インターフェイスの onmessage プロパティは、(着信メッセージの受信時に){{domxref("ServiceWorkerGlobalScope.message_event","message")}} イベントが発生するたびに発火するイベントハンドラーです。

- -
-

: サービスワーカーは、延長可能なイベントを定義して、イベントの存続期間を延長できるようにします。 message イベントの場合、サービスワーカーは {{domxref("ExtendableEvent")}} インターフェイスを拡張した {{domxref("ExtendableMessageEvent")}} インターフェイスを使用します。

-
- -
-

: 他のウェブメッセージング機能との整合性を保つため、サービスワーカーのコンテキストから受信されるメッセージ(onmessage のイベントオブジェクトなど)は、最新のブラウザーでは {{domxref("MessageEvent")}} オブジェクトによって表されます。 (これらは、以前は廃止された {{domxref("ServiceWorkerMessageEvent")}} オブジェクトで表されていました。)

-
- -

構文

- -
serviceWorkerGlobalScope.onmessage = function(extendableMessageEvent) { ... };
- -

- -
self.addEventListener('message', function(messageEvent) {
-  console.log('Handling message event:', messageEvent);
-})
-
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Service Workers', '#service-worker-global-scope-event-handlers', 'Event Handlers')}}{{Spec2('Service Workers')}}初期定義
- -

ブラウザーの互換性

- -
- - -

{{Compat("api.ServiceWorkerGlobalScope.onmessage")}}

-
diff --git a/files/ja/conflicting/web/api/serviceworkerglobalscope/message_event/index.md b/files/ja/conflicting/web/api/serviceworkerglobalscope/message_event/index.md new file mode 100644 index 00000000000000..3997d20561ed7e --- /dev/null +++ b/files/ja/conflicting/web/api/serviceworkerglobalscope/message_event/index.md @@ -0,0 +1,46 @@ +--- +title: ServiceWorkerGlobalScope.onmessage +slug: conflicting/Web/API/ServiceWorkerGlobalScope/message_event +tags: + - API + - Property + - Reference + - Service + - ServiceWorker + - ServiceWorkerGlobalScope + - Worker + - onmessage +translation_of: Web/API/ServiceWorkerGlobalScope/onmessage +original_slug: Web/API/ServiceWorkerGlobalScope/onmessage +--- +{{APIRef("Service Workers API")}} + +{{domxref("ServiceWorkerGlobalScope")}} インターフェイスの **`onmessage`** プロパティは、(着信メッセージの受信時に){{domxref("ServiceWorkerGlobalScope.message_event","message")}} イベントが発生するたびに発火するイベントハンドラーです。 + +> **Note:** **注**: サービスワーカーは、延長可能なイベントを定義して、イベントの存続期間を延長できるようにします。 `message` イベントの場合、サービスワーカーは {{domxref("ExtendableEvent")}} インターフェイスを拡張した {{domxref("ExtendableMessageEvent")}} インターフェイスを使用します。 + +> **Note:** **注**: 他のウェブメッセージング機能との整合性を保つため、サービスワーカーのコンテキストから受信されるメッセージ(`onmessage` のイベントオブジェクトなど)は、最新のブラウザーでは {{domxref("MessageEvent")}} オブジェクトによって表されます。 (これらは、以前は廃止された {{domxref("ServiceWorkerMessageEvent")}} オブジェクトで表されていました。) + +## 構文 + +``` +serviceWorkerGlobalScope.onmessage = function(extendableMessageEvent) { ... }; +``` + +## 例 + +```js +self.addEventListener('message', function(messageEvent) { + console.log('Handling message event:', messageEvent); +}) +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------- | +| {{SpecName('Service Workers', '#service-worker-global-scope-event-handlers', 'Event Handlers')}} | {{Spec2('Service Workers')}} | 初期定義 | + +## ブラウザーの互換性 + +{{Compat("api.ServiceWorkerGlobalScope.onmessage")}} diff --git a/files/ja/conflicting/web/api/speechrecognition/audiostart_event/index.html b/files/ja/conflicting/web/api/speechrecognition/audiostart_event/index.html deleted file mode 100644 index b63ae8abb08a66..00000000000000 --- a/files/ja/conflicting/web/api/speechrecognition/audiostart_event/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: SpeechRecognition.onaudiostart -slug: conflicting/Web/API/SpeechRecognition/audiostart_event -tags: - - API - - Experimental - - Property - - Reference - - SpeechRecognition - - Web Speech API - - onaudiostart - - recognition - - speech -translation_of: Web/API/SpeechRecognition/onaudiostart -original_slug: Web/API/SpeechRecognition/onaudiostart ---- -
{{APIRef("Web Speech API")}}{{SeeCompatTable}}
- -

{{domxref("SpeechRecognition")}}インターフェイスの onaudiostart プロパティは、ユーザーエージェントが音声を取得し終えた時に ({{event("audiostart")}}イベントが発生した時) 、実行されるイベントハンドラーになります。

- -

構文

- -
mySpeechRecognition.onaudiostart = function() { ... };
-
- -

- -
var recognition = new SpeechRecognition();
-
-recognition.onaudiostart = function() {
-  console.log('音声認識は開始しました。');
-}
-
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Web Speech API', '#dfn-onaudiostart', 'onaudiostart')}}{{Spec2('Web Speech API')}}
- -

ブラウザー実装状況

- -
- - -

{{Compat("api.SpeechRecognition.onaudiostart")}}

-
- -

Firefox OS の権限

- -

アプリで音声認識を利用する前に、下記の権限を manifest に追加する必要があります。

- -
"permissions": {
-  "audio-capture" : {
-    "description" : "Audio capture"
-  },
-  "speech-recognition" : {
-    "description" : "Speech recognition"
-  }
-}
- -

privileged アプリ権限も必要なので、下記も追加が必要です。

- -
  "type": "privileged"
- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/speechrecognition/audiostart_event/index.md b/files/ja/conflicting/web/api/speechrecognition/audiostart_event/index.md new file mode 100644 index 00000000000000..2f524976355413 --- /dev/null +++ b/files/ja/conflicting/web/api/speechrecognition/audiostart_event/index.md @@ -0,0 +1,70 @@ +--- +title: SpeechRecognition.onaudiostart +slug: conflicting/Web/API/SpeechRecognition/audiostart_event +tags: + - API + - Experimental + - Property + - Reference + - SpeechRecognition + - Web Speech API + - onaudiostart + - recognition + - speech +translation_of: Web/API/SpeechRecognition/onaudiostart +original_slug: Web/API/SpeechRecognition/onaudiostart +--- +{{APIRef("Web Speech API")}}{{SeeCompatTable}} + +{{domxref("SpeechRecognition")}}インターフェイスの **`onaudiostart`** プロパティは、ユーザーエージェントが音声を取得し終えた時に ({{event("audiostart")}}イベントが発生した時) 、実行されるイベントハンドラーになります。 + +## 構文 + +``` +mySpeechRecognition.onaudiostart = function() { ... }; +``` + +## 例 + +```js +var recognition = new SpeechRecognition(); + +recognition.onaudiostart = function() { + console.log('音声認識は開始しました。'); +} +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------- | +| {{SpecName('Web Speech API', '#dfn-onaudiostart', 'onaudiostart')}} | {{Spec2('Web Speech API')}} | | + +## ブラウザー実装状況 + +{{Compat("api.SpeechRecognition.onaudiostart")}} + +### Firefox OS の権限 + +アプリで音声認識を利用する前に、下記の権限を [manifest](/ja/docs/Web/Apps/Build/Manifest) に追加する必要があります。 + +```json +"permissions": { + "audio-capture" : { + "description" : "Audio capture" + }, + "speech-recognition" : { + "description" : "Speech recognition" + } +} +``` + +privileged アプリ権限も必要なので、下記も追加が必要です。 + +```json + "type": "privileged" +``` + +## 関連情報 + +- [Web Speech API](/ja/docs/Web/API/Web_Speech_API) diff --git a/files/ja/conflicting/web/api/storagemanager/estimate/index.html b/files/ja/conflicting/web/api/storagemanager/estimate/index.html deleted file mode 100644 index aa0c8766b5ac47..00000000000000 --- a/files/ja/conflicting/web/api/storagemanager/estimate/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: StorageEstimate -slug: conflicting/Web/API/StorageManager/estimate -tags: - - API - - Dictionary - - Interface - - Quotas - - Reference - - Secure context - - Storage - - Storage API - - StorageEstimate - - Usage -translation_of: Web/API/StorageEstimate -original_slug: Web/API/StorageEstimate ---- -
{{securecontext_header}}{{APIRef("Storage")}}
- -

StorageEstimate ディクショナリは、サイトまたはアプリのデータストアのサイズとその使用量の概算値を提供するために {{domxref("StorageManager")}} によって使用されます。{{domxref("StorageManager.estimate", "estimate()")}} メソッドは、その {{jsxref("Promise")}} が解決されたときにこのディクショナリに適合するオブジェクトを返します。

- -

これらの値は、パフォーマンスと、ストレージ容量データがフィンガープリント目的で使用されることの防止との両方を含む、いくつかの理由のため、単なる概算値にすぎません。詳細は各プロパティのページをご覧ください。

- -

プロパティ

- -
-
{{domxref("StorageEstimate.quota", "quota")}} {{securecontext_inline}}
-
ユーザーのデバイスやコンピューターがサイトオリジンやウェブアプリで使用できる合計ストレージの控えめな概算値を提供する数値。それが事実であることに頼ることはできませんが、この利用可能なスペースの量より多くがある可能性があります。
-
{{domxref("StorageEstimate.usage", "usage")}} {{securecontext_inline}}
-
quota で示される利用可能スペースのうち、サイトやウェブアプリが現在使用しているストレージスペースの量を概算する数値。
-
{{domxref("StorageEstimate.usageDetails", "usageDetails")}} {{securecontext_inline}}
-
ストレージシステムごとの usage の内訳を含むディクショナリ。含まれるメンバーはすべて 0 より大きい usage を持ち、usage が 0 のストレージシステムはすべてディクショナリから除外されます。
-
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Storage', '#dictdef-storageestimate', 'StorageEstimate')}}{{Spec2('Storage')}}初期定義
- -

ブラウザーの互換性

- - - -

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

- -

関連情報

- -
    -
  • Storage API
  • -
  • {{domxref("StorageManager")}}
  • -
  • {{domxref("StorageManager.estimate()")}}
  • -
  • {{domxref("NavigatorStorage.storage", "navigator.storage")}}
  • -
diff --git a/files/ja/conflicting/web/api/storagemanager/estimate/index.md b/files/ja/conflicting/web/api/storagemanager/estimate/index.md new file mode 100644 index 00000000000000..043339055cfb48 --- /dev/null +++ b/files/ja/conflicting/web/api/storagemanager/estimate/index.md @@ -0,0 +1,48 @@ +--- +title: StorageEstimate +slug: conflicting/Web/API/StorageManager/estimate +tags: + - API + - Dictionary + - Interface + - Quotas + - Reference + - Secure context + - Storage + - Storage API + - StorageEstimate + - Usage +translation_of: Web/API/StorageEstimate +original_slug: Web/API/StorageEstimate +--- +{{securecontext_header}}{{APIRef("Storage")}} + +**`StorageEstimate`** ディクショナリは、サイトまたはアプリのデータストアのサイズとその使用量の概算値を提供するために {{domxref("StorageManager")}} によって使用されます。{{domxref("StorageManager.estimate", "estimate()")}} メソッドは、その {{jsxref("Promise")}} が解決されたときにこのディクショナリに適合するオブジェクトを返します。 + +これらの値は、パフォーマンスと、ストレージ容量データがフィンガープリント目的で使用されることの防止との両方を含む、いくつかの理由のため、単なる概算値にすぎません。詳細は各プロパティのページをご覧ください。 + +## プロパティ + +- {{domxref("StorageEstimate.quota", "quota")}} {{securecontext_inline}} + - : ユーザーのデバイスやコンピューターがサイトオリジンやウェブアプリで使用できる合計ストレージの控えめな概算値を提供する数値。それが事実であることに頼ることはできませんが、この利用可能なスペースの量より多くがある可能性があります。 +- {{domxref("StorageEstimate.usage", "usage")}} {{securecontext_inline}} + - : `quota` で示される利用可能スペースのうち、サイトやウェブアプリが現在使用しているストレージスペースの量を概算する数値。 +- {{domxref("StorageEstimate.usageDetails", "usageDetails")}} {{securecontext_inline}} + - : ストレージシステムごとの `usage` の内訳を含むディクショナリ。含まれるメンバーはすべて 0 より大きい `usage` を持ち、`usage` が 0 のストレージシステムはすべてディクショナリから除外されます。 + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName('Storage', '#dictdef-storageestimate', 'StorageEstimate')}} | {{Spec2('Storage')}} | 初期定義 | + +## ブラウザーの互換性 + +{{Compat("api.StorageEstimate")}} + +## 関連情報 + +- [Storage API](/ja/docs/Web/API/Storage_API) +- {{domxref("StorageManager")}} +- {{domxref("StorageManager.estimate()")}} +- {{domxref("NavigatorStorage.storage", "navigator.storage")}} diff --git a/files/ja/conflicting/web/api/syncevent/index.html b/files/ja/conflicting/web/api/syncevent/index.html deleted file mode 100644 index 638ec04058954a..00000000000000 --- a/files/ja/conflicting/web/api/syncevent/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: registration -slug: conflicting/Web/API/SyncEvent -tags: - - DOM - - Junk - - Property -translation_of: Web/API/SyncEvent/registration -original_slug: Web/API/SyncEvent/registration ---- -

{{Non-standard_header}}{{APIRef("Service Workers API")}}

- -

{{domxref("SyncEvent")}} インターフェイスの登録読み取り専用プロパティは、 {{domxref("SyncRegistration")}} オブジェクトへの参照を返します。

- -

構文

- -
var syncReg = SyncEvent.registration
- -

- -

{{domxref("SyncRegistration")}} オブジェクト

- -

ブラウザー実装状況

- -
- - -

{{Compat("api.SyncEvent.registration")}}

-
diff --git a/files/ja/conflicting/web/api/syncevent/index.md b/files/ja/conflicting/web/api/syncevent/index.md new file mode 100644 index 00000000000000..dfda663fb10045 --- /dev/null +++ b/files/ja/conflicting/web/api/syncevent/index.md @@ -0,0 +1,27 @@ +--- +title: registration +slug: conflicting/Web/API/SyncEvent +tags: + - DOM + - Junk + - Property +translation_of: Web/API/SyncEvent/registration +original_slug: Web/API/SyncEvent/registration +--- +{{Non-standard_header}}{{APIRef("Service Workers API")}} + +{{domxref("SyncEvent")}} インターフェイスの登録読み取り専用プロパティは、 {{domxref("SyncRegistration")}} オブジェクトへの参照を返します。 + +## 構文 + +``` +var syncReg = SyncEvent.registration +``` + +### 値 + +{{domxref("SyncRegistration")}} オブジェクト + +## ブラウザー実装状況 + +{{Compat("api.SyncEvent.registration")}} diff --git a/files/ja/conflicting/web/api/videotracklist/addtrack_event/index.html b/files/ja/conflicting/web/api/videotracklist/addtrack_event/index.html deleted file mode 100644 index b2ba642c23145e..00000000000000 --- a/files/ja/conflicting/web/api/videotracklist/addtrack_event/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: VideoTrackList.onaddtrack -slug: conflicting/Web/API/VideoTrackList/addtrack_event -tags: - - API - - Adding Tracks - - Adding Video Tracks - - Event Handler - - HTML DOM - - Media - - Property - - Reference - - Video - - VideoTrackList - - addTrack - - onaddtrack - - track -translation_of: Web/API/VideoTrackList/onaddtrack -original_slug: Web/API/VideoTrackList/onaddtrack ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("VideoTrackList")}}onaddtrack プロパティは、{{event("addtrack")}} イベントが発生したときに呼び出されるイベントハンドラで、VideoTrackList が表す動画トラックを持つメディア要素に新しい動画トラックが追加されたことを示します。

- -

イベントは {{domxref("TrackEvent")}} オブジェクトの形式でイベントハンドラに渡され、その {{domxref("TrackEvent.track", "track")}} プロパティは新しく追加されたトラックを識別します。

- -
-

: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、addtrack イベント用のハンドラを追加することもできます。

-
- -

構文

- -
VideoTrackList.onaddtrack = eventHandler;
- -

- -

onaddtrack は、 {{domxref("TrackEvent.track", "track")}} プロパティでどの動画トラックがメディアに追加されたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。

- -

使用上の注意

- -

{{event("addtrack")}} イベントは、動画トラックを VideoTrackList オブジェクトで表すメディア要素に新しいトラックが追加されるたびに呼び出されます。 これは、メディアが最初に要素に添付されたときにトラックが要素に追加されたときに発生します。 メディアリソース内の動画トラックごとに1つの addtrack イベントが発生します。

- -

- -

このスニペットは、新しく追加されたトラックを表す {{domxref("VideoTrack")}} オブジェクトを渡して、addToTrackList() 関数を呼び出す {{event("addtrack")}} イベントのハンドラを確立します。 このシナリオでは、その関数の役割は、選択可能な動画トラックのリストに新しいトラックを追加することです。

- -
document.querySelector("video").videoTracks.onaddtrack = function(event) {
-  addToTrackList(event.track);
-};
-
- -

仕様

- - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-tracklist-onaddtrack', 'VideoTrackList: onaddtrack')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.VideoTrackList.onaddtrack")}}

- -

diff --git a/files/ja/conflicting/web/api/videotracklist/addtrack_event/index.md b/files/ja/conflicting/web/api/videotracklist/addtrack_event/index.md new file mode 100644 index 00000000000000..3d8dad3631ada4 --- /dev/null +++ b/files/ja/conflicting/web/api/videotracklist/addtrack_event/index.md @@ -0,0 +1,61 @@ +--- +title: VideoTrackList.onaddtrack +slug: conflicting/Web/API/VideoTrackList/addtrack_event +tags: + - API + - Adding Tracks + - Adding Video Tracks + - Event Handler + - HTML DOM + - Media + - Property + - Reference + - Video + - VideoTrackList + - addTrack + - onaddtrack + - track +translation_of: Web/API/VideoTrackList/onaddtrack +original_slug: Web/API/VideoTrackList/onaddtrack +--- +{{APIRef("HTML DOM")}} + +**{{domxref("VideoTrackList")}}** の **`onaddtrack`** プロパティは、{{event("addtrack")}} イベントが発生したときに呼び出されるイベントハンドラで、`VideoTrackList` が表す動画トラックを持つメディア要素に新しい動画トラックが追加されたことを示します。 + +イベントは {{domxref("TrackEvent")}} オブジェクトの形式でイベントハンドラに渡され、その {{domxref("TrackEvent.track", "track")}} プロパティは新しく追加されたトラックを識別します。 + +> **Note:** **注**: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、`addtrack` イベント用のハンドラを追加することもできます。 + +## 構文 + +``` +VideoTrackList.onaddtrack = eventHandler; +``` + +### 値 + +`onaddtrack` は、 {{domxref("TrackEvent.track", "track")}} プロパティでどの動画トラックがメディアに追加されたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。 + +## 使用上の注意 + +{{event("addtrack")}} イベントは、動画トラックを `VideoTrackList` オブジェクトで表すメディア要素に新しいトラックが追加されるたびに呼び出されます。 これは、メディアが最初に要素に添付されたときにトラックが要素に追加されたときに発生します。 メディアリソース内の動画トラックごとに 1 つの `addtrack` イベントが発生します。 + +## 例 + +このスニペットは、新しく追加されたトラックを表す {{domxref("VideoTrack")}} オブジェクトを渡して、`addToTrackList()` 関数を呼び出す {{event("addtrack")}} イベントのハンドラを確立します。 このシナリオでは、その関数の役割は、選択可能な動画トラックのリストに新しいトラックを追加することです。 + +```js +document.querySelector("video").videoTracks.onaddtrack = function(event) { + addToTrackList(event.track); +}; +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-tracklist-onaddtrack', 'VideoTrackList: onaddtrack')}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザーの互換性 + +{{Compat("api.VideoTrackList.onaddtrack")}} diff --git a/files/ja/conflicting/web/api/videotracklist/change_event/index.html b/files/ja/conflicting/web/api/videotracklist/change_event/index.html deleted file mode 100644 index 43cc6df5a29d11..00000000000000 --- a/files/ja/conflicting/web/api/videotracklist/change_event/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: VideoTrackList.onchange -slug: conflicting/Web/API/VideoTrackList/change_event -tags: - - API - - Adding Tracks - - Adding Video Tracks - - Event Handler - - HTML DOM - - Media - - Property - - Reference - - Video - - VideoTrackList - - addTrack - - onchange - - track -translation_of: Web/API/VideoTrackList/onchange -original_slug: Web/API/VideoTrackList/onchange ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("VideoTrackList")}}onchange プロパティは、{{event("change")}} イベントが発生したときに呼び出されるイベントハンドラで、VideoTrackList 内の {{domxref("VideoTrack")}} がアクティブになったことを示します。

- -

イベントは {{domxref("Event")}} オブジェクトの形式でイベントハンドラに渡されます。 イベントは追加情報を提供しません。 メディアのトラックの新しい状態を判断するには、それらの {{domxref("VideoTrack.selected")}} フラグを確認する必要があります。

- -
-

: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、change イベントのハンドラを追加することもできます。

-
- -

構文

- -
VideoTrackList.onchange = eventHandler;
- -

- -

onchange は、トラックがアクティブになるたびに呼び出されるべき関数を設定します。

- -

- -

このスニペットは、リスト内の各トラックを調べる {{event("change")}} イベントのハンドラを確立し、トラックの現在の状態を示すユーザーインターフェイスコントロールの状態を更新する関数を呼び出します。

- -
var trackList = document.querySelector("video").videoTracks;
-
-trackList.onchange = function(event) {
-  trackList.forEach(function(track) {
-    updateTrackSelectedButton(track.id, track.selected);
-  });
-};
-
- -

この例の updateTrackSelectedButton() は、トラックの {{domxref("VideoTrack.id", "id")}}(おそらくアプリはトラック ID をコントロール要素の ID として使用します)でユーザーインターフェイスコントロールを見つけて、トラックの {{domxref("VideoTrack.selected", "selected")}} フラグを使用してコントロールが現在どの状態にあるべきかを決定する関数です。

- -

仕様

- - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-tracklist-onchange', 'VideoTrackList: onchange')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.VideoTrackList.onchange")}}

diff --git a/files/ja/conflicting/web/api/videotracklist/change_event/index.md b/files/ja/conflicting/web/api/videotracklist/change_event/index.md new file mode 100644 index 00000000000000..d7733bb78497e9 --- /dev/null +++ b/files/ja/conflicting/web/api/videotracklist/change_event/index.md @@ -0,0 +1,63 @@ +--- +title: VideoTrackList.onchange +slug: conflicting/Web/API/VideoTrackList/change_event +tags: + - API + - Adding Tracks + - Adding Video Tracks + - Event Handler + - HTML DOM + - Media + - Property + - Reference + - Video + - VideoTrackList + - addTrack + - onchange + - track +translation_of: Web/API/VideoTrackList/onchange +original_slug: Web/API/VideoTrackList/onchange +--- +{{APIRef("HTML DOM")}} + +**{{domxref("VideoTrackList")}}** の **`onchange`** プロパティは、{{event("change")}} イベントが発生したときに呼び出されるイベントハンドラで、`VideoTrackList` 内の {{domxref("VideoTrack")}} がアクティブになったことを示します。 + +イベントは {{domxref("Event")}} オブジェクトの形式でイベントハンドラに渡されます。 イベントは追加情報を提供しません。 メディアのトラックの新しい状態を判断するには、それらの {{domxref("VideoTrack.selected")}} フラグを確認する必要があります。 + +> **Note:** **注**: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、`change` イベントのハンドラを追加することもできます。 + +## 構文 + +``` +VideoTrackList.onchange = eventHandler; +``` + +### 値 + +`onchange` は、トラックがアクティブになるたびに呼び出されるべき関数を設定します。 + +## 例 + +このスニペットは、リスト内の各トラックを調べる {{event("change")}} イベントのハンドラを確立し、トラックの現在の状態を示すユーザーインターフェイスコントロールの状態を更新する関数を呼び出します。 + +```js +var trackList = document.querySelector("video").videoTracks; + +trackList.onchange = function(event) { + trackList.forEach(function(track) { + updateTrackSelectedButton(track.id, track.selected); + }); +}; +``` + +この例の `updateTrackSelectedButton()` は、トラックの {{domxref("VideoTrack.id", "id")}}(おそらくアプリはトラック ID をコントロール要素の ID として使用します)でユーザーインターフェイスコントロールを見つけて、トラックの {{domxref("VideoTrack.selected", "selected")}} フラグを使用してコントロールが現在どの状態にあるべきかを決定する関数です。 + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-tracklist-onchange', 'VideoTrackList: onchange')}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザーの互換性 + +{{Compat("api.VideoTrackList.onchange")}} diff --git a/files/ja/conflicting/web/api/videotracklist/removetrack_event/index.html b/files/ja/conflicting/web/api/videotracklist/removetrack_event/index.html deleted file mode 100644 index 963a08eb5a31b5..00000000000000 --- a/files/ja/conflicting/web/api/videotracklist/removetrack_event/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: VideoTrackList.onremovetrack -slug: conflicting/Web/API/VideoTrackList/removetrack_event -tags: - - API - - Event Handler - - HTML DOM - - Media - - Property - - Reference - - Removing Tracks - - Removing Video Tracks - - Video - - VideoTrackList - - onremovetrack - - remove - - removeTrack - - track -translation_of: Web/API/VideoTrackList/onremovetrack -original_slug: Web/API/VideoTrackList/onremovetrack ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("VideoTrackList")}}onremovetrack イベントハンドラは、{{event("removetrack")}} イベントが発生したときに呼び出され、動画トラックがメディア要素から、つまり VideoTrackList からも取り除かれたことを示します。

- -

イベントは {{domxref("TrackEvent")}} オブジェクトの形式でイベントハンドラに渡されます。 その {{domxref("TrackEvent.track", "track")}} プロパティは、メディア要素の VideoTrackList から取り除かれたトラックを識別します。

- -
-

: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、removetrack イベント用のハンドラを追加することもできます。

-
- -

構文

- -
VideoTrackList.onremovetrack = eventHandler;
- -

- -

onremovetrack は、{{domxref("TrackEvent.track", "track")}} プロパティでどの動画トラックがメディア要素から取り除かれたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。

- -

- -

この単純な例では、トラックがメディア要素から取り除かれるたびに、メディア要素内の現在の動画トラック数を取得するだけです。

- -
document.querySelector("my-video").videoTracks.onremovetrack = function(event) {
-  myTrackCount = document.querySelector("my-video").videoTracks.length;
-};
-
- -

メディア要素に残っている現在の動画トラック数は、VideoTrackList の {{domxref("VideoTrackList.length", "length")}} プロパティから取得します。

- -

仕様

- - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-tracklist-onremovetrack', 'VideoTrackList: onremovetrack')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.VideoTrackList.onremovetrack")}}

diff --git a/files/ja/conflicting/web/api/videotracklist/removetrack_event/index.md b/files/ja/conflicting/web/api/videotracklist/removetrack_event/index.md new file mode 100644 index 00000000000000..176789d4f0b849 --- /dev/null +++ b/files/ja/conflicting/web/api/videotracklist/removetrack_event/index.md @@ -0,0 +1,60 @@ +--- +title: VideoTrackList.onremovetrack +slug: conflicting/Web/API/VideoTrackList/removetrack_event +tags: + - API + - Event Handler + - HTML DOM + - Media + - Property + - Reference + - Removing Tracks + - Removing Video Tracks + - Video + - VideoTrackList + - onremovetrack + - remove + - removeTrack + - track +translation_of: Web/API/VideoTrackList/onremovetrack +original_slug: Web/API/VideoTrackList/onremovetrack +--- +{{APIRef("HTML DOM")}} + +**{{domxref("VideoTrackList")}}** の **`onremovetrack`** イベントハンドラは、{{event("removetrack")}} イベントが発生したときに呼び出され、動画トラックがメディア要素から、つまり `VideoTrackList` からも取り除かれたことを示します。 + +イベントは {{domxref("TrackEvent")}} オブジェクトの形式でイベントハンドラに渡されます。 その {{domxref("TrackEvent.track", "track")}} プロパティは、メディア要素の `VideoTrackList` から取り除かれたトラックを識別します。 + +> **Note:** **注**: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、`removetrack` イベント用のハンドラを追加することもできます。 + +## 構文 + +``` +VideoTrackList.onremovetrack = eventHandler; +``` + +### 値 + +`onremovetrack` は、{{domxref("TrackEvent.track", "track")}} プロパティでどの動画トラックがメディア要素から取り除かれたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。 + +## 例 + +この単純な例では、トラックがメディア要素から取り除かれるたびに、メディア要素内の現在の動画トラック数を取得するだけです。 + +```js +document.querySelector("my-video").videoTracks.onremovetrack = function(event) { + myTrackCount = document.querySelector("my-video").videoTracks.length; +}; +``` + +メディア要素に残っている現在の動画トラック数は、`VideoTrackList` の {{domxref("VideoTrackList.length", "length")}} プロパティから取得します。 + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-tracklist-onremovetrack', 'VideoTrackList: onremovetrack')}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザーの互換性 + +{{Compat("api.VideoTrackList.onremovetrack")}} diff --git a/files/ja/conflicting/web/api/websocket/close_event/index.html b/files/ja/conflicting/web/api/websocket/close_event/index.html deleted file mode 100644 index 0b21f00e8971e0..00000000000000 --- a/files/ja/conflicting/web/api/websocket/close_event/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: WebSocket.onclose -slug: conflicting/Web/API/WebSocket/close_event -translation_of: Web/API/WebSocket/onclose -original_slug: Web/API/WebSocket/onclose ---- -

{{APIRef("Web Sockets API")}}

- -

WebSocket.onclose プロパティは、WebSocket コネクションの {{domxref("WebSocket.readyState","readyState")}} が {{domxref("WebSocket.readyState","CLOSED")}} に変わったときに呼ばれる {{event("Event_handlers", "event handler")}} です。{{domxref("CloseEvent")}} と一緒に呼び出されます。

- -

構文

- -
aWebSocket.onclose = function(event) {
-  console.log("WebSocket is closed now.");
-};
- -

- -

{{domxref("EventListener")}}.

- -

仕様書

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#handler-websocket-onclose', 'WebSocket: onclose')}}{{Spec2('HTML WHATWG')}}Initial definition
diff --git a/files/ja/conflicting/web/api/websocket/close_event/index.md b/files/ja/conflicting/web/api/websocket/close_event/index.md new file mode 100644 index 00000000000000..04fceb16718e4f --- /dev/null +++ b/files/ja/conflicting/web/api/websocket/close_event/index.md @@ -0,0 +1,27 @@ +--- +title: WebSocket.onclose +slug: conflicting/Web/API/WebSocket/close_event +translation_of: Web/API/WebSocket/onclose +original_slug: Web/API/WebSocket/onclose +--- +{{APIRef("Web Sockets API")}} + +**`WebSocket.onclose`** プロパティは、WebSocket コネクションの {{domxref("WebSocket.readyState","readyState")}} が {{domxref("WebSocket.readyState","CLOSED")}} に変わったときに呼ばれる {{event("Event_handlers", "event handler")}} です。{{domxref("CloseEvent")}} と一緒に呼び出されます。 + +## 構文 + +``` +aWebSocket.onclose = function(event) { + console.log("WebSocket is closed now."); +}; +``` + +## 値 + +{{domxref("EventListener")}}. + +## 仕様書 + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | +| {{SpecName('HTML WHATWG', '#handler-websocket-onclose', 'WebSocket: onclose')}} | {{Spec2('HTML WHATWG')}} | Initial definition | diff --git a/files/ja/conflicting/web/api/websocket/error_event/index.html b/files/ja/conflicting/web/api/websocket/error_event/index.html deleted file mode 100644 index d208a820c61315..00000000000000 --- a/files/ja/conflicting/web/api/websocket/error_event/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: WebSocket.onerror -slug: conflicting/Web/API/WebSocket/error_event -tags: - - API - - Connection - - Error - - Error Handler - - Networking - - Property - - Reference - - Web API - - WebSocket - - onerror - - プロパティ -translation_of: Web/API/WebSocket/onerror -original_slug: Web/API/WebSocket/onerror ---- -
{{APIRef("Web Sockets API")}}
- -

{{domxref("WebSocket")}} インターフェイスの onerror イベントハンドラープロパティは、 WebSocket でエラーが発生したときに呼び出される関数です。

- -

error イベントハンドラーは {{domxref("EventTarget.addEventListener", "addEventListener()")}} で追加することもできます。

- -

構文

- -
webSocket.onerror = eventHandler;
- -

- -

関数または {{event("Event_handlers", "event handler")}} で、 WebSocket コネクションで error イベントが発生するたびに呼び出されるものです。

- -

- -
webSocket.onerror = function(event) {
-  console.error("WebSocket error observed:", event);
-};
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#handler-websocket-onerror', 'WebSocket: onerror')}}{{Spec2('HTML WHATWG')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.WebSocket.onerror")}}

diff --git a/files/ja/conflicting/web/api/websocket/error_event/index.md b/files/ja/conflicting/web/api/websocket/error_event/index.md new file mode 100644 index 00000000000000..87fa561c08778c --- /dev/null +++ b/files/ja/conflicting/web/api/websocket/error_event/index.md @@ -0,0 +1,51 @@ +--- +title: WebSocket.onerror +slug: conflicting/Web/API/WebSocket/error_event +tags: + - API + - Connection + - Error + - Error Handler + - Networking + - Property + - Reference + - Web API + - WebSocket + - onerror + - プロパティ +translation_of: Web/API/WebSocket/onerror +original_slug: Web/API/WebSocket/onerror +--- +{{APIRef("Web Sockets API")}} + +{{domxref("WebSocket")}} インターフェイスの **`onerror`** イベントハンドラープロパティは、 WebSocket でエラーが発生したときに呼び出される関数です。 + +`error` イベントハンドラーは {{domxref("EventTarget.addEventListener", "addEventListener()")}} で追加することもできます。 + +## 構文 + +``` +webSocket.onerror = eventHandler; +``` + +### 値 + +関数または {{event("Event_handlers", "event handler")}} で、 WebSocket コネクションで `error` イベントが発生するたびに呼び出されるものです。 + +## 例 + +```js +webSocket.onerror = function(event) { + console.error("WebSocket error observed:", event); +}; +``` + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-websocket-onerror', 'WebSocket: onerror')}} | {{Spec2('HTML WHATWG')}} | 初回定義 | + +## ブラウザーの互換性 + +{{Compat("api.WebSocket.onerror")}} diff --git a/files/ja/conflicting/web/api/websocket/message_event/index.html b/files/ja/conflicting/web/api/websocket/message_event/index.html deleted file mode 100644 index e1888a6245ceb2..00000000000000 --- a/files/ja/conflicting/web/api/websocket/message_event/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: WebSocket.onmessage -slug: conflicting/Web/API/WebSocket/message_event -tags: - - API - - Property - - Reference - - Web API - - WebSocket - - プロパティ -translation_of: Web/API/WebSocket/onmessage -original_slug: Web/API/WebSocket/onmessage ---- -
{{APIRef("Web Sockets API")}}
- -

WebSocket.onmessage プロパティは、サーバーからメッセージが届いたときに呼び出されるイベントハンドラー ({{event("Event_handlers", "event handler")}}) です。これは {{domxref("MessageEvent")}} で呼び出されます。

- -

構文

- -
aWebSocket.onmessage = function(event) {
-  console.debug("WebSocket message received:", event);
-};
- -

- -

{{domxref("EventListener")}} です。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#handler-websocket-onmessage', 'WebSocket: onmessage')}}{{Spec2('HTML WHATWG')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.WebSocket.onmessage")}}

diff --git a/files/ja/conflicting/web/api/websocket/message_event/index.md b/files/ja/conflicting/web/api/websocket/message_event/index.md new file mode 100644 index 00000000000000..2d23a91f75a13e --- /dev/null +++ b/files/ja/conflicting/web/api/websocket/message_event/index.md @@ -0,0 +1,38 @@ +--- +title: WebSocket.onmessage +slug: conflicting/Web/API/WebSocket/message_event +tags: + - API + - Property + - Reference + - Web API + - WebSocket + - プロパティ +translation_of: Web/API/WebSocket/onmessage +original_slug: Web/API/WebSocket/onmessage +--- +{{APIRef("Web Sockets API")}} + +**`WebSocket.onmessage`** プロパティは、サーバーからメッセージが届いたときに呼び出されるイベントハンドラー ({{event("Event_handlers", "event handler")}}) です。これは {{domxref("MessageEvent")}} で呼び出されます。 + +## 構文 + +``` +aWebSocket.onmessage = function(event) { + console.debug("WebSocket message received:", event); +}; +``` + +## 値 + +{{domxref("EventListener")}} です。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-websocket-onmessage', 'WebSocket: onmessage')}} | {{Spec2('HTML WHATWG')}} | 初回定義 | + +## ブラウザーの互換性 + +{{Compat("api.WebSocket.onmessage")}} diff --git a/files/ja/conflicting/web/api/websocket/open_event/index.html b/files/ja/conflicting/web/api/websocket/open_event/index.html deleted file mode 100644 index 451ad8d6b66a81..00000000000000 --- a/files/ja/conflicting/web/api/websocket/open_event/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: WebSocket.onopen -slug: conflicting/Web/API/WebSocket/open_event -tags: - - API - - Property - - Reference - - Web API - - WebSocket - - プロパティ -translation_of: Web/API/WebSocket/onopen -original_slug: Web/API/WebSocket/onopen ---- -
{{APIRef("Web Sockets API")}}
- -

WebSocket.onopen プロパティはイベントハンドラー ({{event("Event_handlers", "event handler")}}) で、 {{domxref("WebSocket")}} のコネクションの {{domxref("WebSocket.readyState","readyState")}} が {{domxref("WebSocket.readyState","1")}} に変化したときに呼び出されます。これは、コネクションでデータを送信したり受信したりする準備ができたことを示します。これは {{domxref("Event")}} を伴って呼び出されます。

- -

構文

- -
aWebSocket.onopen = function(event) {
-  console.log("WebSocket is open now.");
-};
- -

- -

{{domxref("EventListener")}} です。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#handler-websocket-onopen', 'WebSocket: onopen')}}{{Spec2('HTML WHATWG')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.WebSocket.onopen")}}

diff --git a/files/ja/conflicting/web/api/websocket/open_event/index.md b/files/ja/conflicting/web/api/websocket/open_event/index.md new file mode 100644 index 00000000000000..56138adcf001d3 --- /dev/null +++ b/files/ja/conflicting/web/api/websocket/open_event/index.md @@ -0,0 +1,38 @@ +--- +title: WebSocket.onopen +slug: conflicting/Web/API/WebSocket/open_event +tags: + - API + - Property + - Reference + - Web API + - WebSocket + - プロパティ +translation_of: Web/API/WebSocket/onopen +original_slug: Web/API/WebSocket/onopen +--- +{{APIRef("Web Sockets API")}} + +**`WebSocket.onopen`** プロパティはイベントハンドラー ({{event("Event_handlers", "event handler")}}) で、 {{domxref("WebSocket")}} のコネクションの {{domxref("WebSocket.readyState","readyState")}} が {{domxref("WebSocket.readyState","1")}} に変化したときに呼び出されます。これは、コネクションでデータを送信したり受信したりする準備ができたことを示します。これは {{domxref("Event")}} を伴って呼び出されます。 + +## 構文 + +``` +aWebSocket.onopen = function(event) { + console.log("WebSocket is open now."); +}; +``` + +## 値 + +{{domxref("EventListener")}} です。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-websocket-onopen', 'WebSocket: onopen')}} | {{Spec2('HTML WHATWG')}} | 初回定義 | + +## ブラウザーの互換性 + +{{Compat("api.WebSocket.onopen")}} diff --git a/files/ja/conflicting/web/api/window/afterprint_event/index.html b/files/ja/conflicting/web/api/window/afterprint_event/index.html deleted file mode 100644 index f7b947e1fb2770..00000000000000 --- a/files/ja/conflicting/web/api/window/afterprint_event/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: WindowEventHandlers.onafterprint -slug: conflicting/Web/API/Window/afterprint_event -tags: - - API - - DOM - - Event Handler - - HTML DOM - - Property - - Reference - - WindowEventHandlers - - printing -translation_of: Web/API/WindowEventHandlers/onafterprint -original_slug: Web/API/WindowEventHandlers/onafterprint ---- -
{{ApiRef}}
- -

{{domxref("WindowEventHandlers")}} ミックスインの onafterprint プロパティは、現在のウィンドウの {{event("afterprint")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、ユーザーが印刷した後や、ユーザーが印刷ダイアログで中止した場合に発生します。

- -

{{event("beforeprint")}} イベントと afterprint イベントを使用すると、印刷を開始する前にページでコンテンツを変更し(例えば、バナーを削除するなど)、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、@media print CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。

- -

構文

- -
window.addEventListener("afterprint", function(event) { ... });
-window.onafterprint = function(event) { ... };
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.WindowEventHandlers.onafterprint")}}

- -

関連情報

- -
    -
  • {{domxref("Window.print()")}}
  • -
  • {{domxref("WindowEventHandlers.onbeforeprint")}}
  • -
  • 印刷
  • -
diff --git a/files/ja/conflicting/web/api/window/afterprint_event/index.md b/files/ja/conflicting/web/api/window/afterprint_event/index.md new file mode 100644 index 00000000000000..1d2b26c4cc6e0f --- /dev/null +++ b/files/ja/conflicting/web/api/window/afterprint_event/index.md @@ -0,0 +1,43 @@ +--- +title: WindowEventHandlers.onafterprint +slug: conflicting/Web/API/Window/afterprint_event +tags: + - API + - DOM + - Event Handler + - HTML DOM + - Property + - Reference + - WindowEventHandlers + - printing +translation_of: Web/API/WindowEventHandlers/onafterprint +original_slug: Web/API/WindowEventHandlers/onafterprint +--- +{{ApiRef}} + +{{domxref("WindowEventHandlers")}} ミックスインの **`onafterprint`** プロパティは、現在のウィンドウの {{event("afterprint")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、ユーザーが印刷した後や、ユーザーが印刷ダイアログで中止した場合に発生します。 + +{{event("beforeprint")}} イベントと `afterprint` イベントを使用すると、印刷を開始する前にページでコンテンツを変更し(例えば、バナーを削除するなど)、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、[`@media print`](/ja/docs/Web/CSS/@media#メディア種別) CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。 + +## 構文 + +``` +window.addEventListener("afterprint", function(event) { ... }); +window.onafterprint = function(event) { ... }; +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザーの互換性 + +{{Compat("api.WindowEventHandlers.onafterprint")}} + +## 関連情報 + +- {{domxref("Window.print()")}} +- {{domxref("WindowEventHandlers.onbeforeprint")}} +- [印刷](/ja/docs/Web/Guide/Printing) diff --git a/files/ja/conflicting/web/api/window/appinstalled_event/index.html b/files/ja/conflicting/web/api/window/appinstalled_event/index.html deleted file mode 100644 index 4f317938235091..00000000000000 --- a/files/ja/conflicting/web/api/window/appinstalled_event/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Window.onappinstalled -slug: conflicting/Web/API/Window/appinstalled_event -tags: - - API - - Event Handler - - Property - - Reference - - Window - - web manifest -translation_of: Web/API/Window/onappinstalled -original_slug: Web/API/Window/onappinstalled ---- -
{{APIRef}}
- -

{{domxref("Window")}} オブジェクトの onappinstalled プロパティは、appinstalled イベントのイベントハンドラーとして扱われます。これは、ウェブアプリケーションが プログレッシブウェブアプリ (PWA) としてインストールに成功すると発行されます。この発生したイベントは、{{domxref("Event")}} インターフェイスを実装する「単純なイベント」です。

- -

構文

- -
window.onappinstalled = function(event) { ... };
-
- -

- -
window.onappinstalled = function(ev) {
-  console.log('アプリケーションがインストールされました。');
-};
- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況備考
{{SpecName('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}{{Spec2('Manifest')}}初期定義
- -

ブラウザー実装状況

- - - -

{{Compat("api.Window.onappinstalled")}}

- -

関連項目

- -
    -
  • {{ event("install") }}
  • -
diff --git a/files/ja/conflicting/web/api/window/appinstalled_event/index.md b/files/ja/conflicting/web/api/window/appinstalled_event/index.md new file mode 100644 index 00000000000000..f20b5cfe261390 --- /dev/null +++ b/files/ja/conflicting/web/api/window/appinstalled_event/index.md @@ -0,0 +1,44 @@ +--- +title: Window.onappinstalled +slug: conflicting/Web/API/Window/appinstalled_event +tags: + - API + - Event Handler + - Property + - Reference + - Window + - web manifest +translation_of: Web/API/Window/onappinstalled +original_slug: Web/API/Window/onappinstalled +--- +{{APIRef}} + +{{domxref("Window")}} オブジェクトの **`onappinstalled`** プロパティは、[`appinstalled`](/ja/docs/Web/API/Window/appinstalled_event) イベントのイベントハンドラーとして扱われます。これは、ウェブアプリケーションが [プログレッシブウェブアプリ (PWA)](/ja/Apps/Progressive) としてインストールに成功すると発行されます。この発生したイベントは、{{domxref("Event")}} インターフェイスを実装する「単純なイベント」です。 + +## 構文 + +``` +window.onappinstalled = function(event) { ... }; +``` + +## 例 + +```js +window.onappinstalled = function(ev) { + console.log('アプリケーションがインストールされました。'); +}; +``` + +## 仕様 + +| 仕様書 | 策定状況 | 備考 | +| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}} | {{Spec2('Manifest')}} | 初期定義 | + +## ブラウザー実装状況 + +{{Compat("api.Window.onappinstalled")}} + +## 関連項目 + +- {{ event("install") }} diff --git a/files/ja/conflicting/web/api/window/beforeprint_event/index.html b/files/ja/conflicting/web/api/window/beforeprint_event/index.html deleted file mode 100644 index f505911f284df3..00000000000000 --- a/files/ja/conflicting/web/api/window/beforeprint_event/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: WindowEventHandlers.onbeforeprint -slug: conflicting/Web/API/Window/beforeprint_event -tags: - - API - - DOM - - Event Handler - - HTML DOM - - Reference - - onbeforeprint - - プロパティ - - 印刷 -translation_of: Web/API/WindowEventHandlers/onbeforeprint -original_slug: Web/API/WindowEventHandlers/onbeforeprint ---- -
{{ApiRef}}
- -

{{domxref("WindowEventHandlers")}} ミックスインの onbeforeprint プロパティは、現在のウィンドウの {{event("beforeprint")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、印刷ダイアログウィンドウが開く前に発生します。

- -

beforeprint イベントと {{event("afterprint")}} イベントを使用すると、印刷を開始する前にページでコンテンツを変更し(例えば、バナーを削除するなど)、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、@media print CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。

- -

構文

- -
window.addEventListener("beforeprint", function(event) { ... });
-window.onbeforeprint = function(event) { ... };
-
- -

ポリフィル

- -

Safari はこれらのイベントを実装していませんが、{{domxref("window.matchMedia")}}('print') を使用して beforeprint イベントと同等の結果を作成できます。

- -
var mediaQueryList = window.matchMedia('print');
-mediaQueryList.addListener(function(mql) {
-  if(mql.matches) {
-    console.log('onbeforeprint に相当する webkit');
-  }
-});
- -

仕様

- - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.WindowEventHandlers.onbeforeprint")}}

- -

関連情報

- -
    -
  • {{domxref("Window.print()")}}
  • -
  • {{domxref("WindowEventHandlers.onafterprint")}}
  • -
  • 印刷
  • -
diff --git a/files/ja/conflicting/web/api/window/beforeprint_event/index.md b/files/ja/conflicting/web/api/window/beforeprint_event/index.md new file mode 100644 index 00000000000000..08e329f328424e --- /dev/null +++ b/files/ja/conflicting/web/api/window/beforeprint_event/index.md @@ -0,0 +1,56 @@ +--- +title: WindowEventHandlers.onbeforeprint +slug: conflicting/Web/API/Window/beforeprint_event +tags: + - API + - DOM + - Event Handler + - HTML DOM + - Reference + - onbeforeprint + - プロパティ + - 印刷 +translation_of: Web/API/WindowEventHandlers/onbeforeprint +original_slug: Web/API/WindowEventHandlers/onbeforeprint +--- +{{ApiRef}} + +{{domxref("WindowEventHandlers")}} ミックスインの **`onbeforeprint`** プロパティは、現在のウィンドウの {{event("beforeprint")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、印刷ダイアログウィンドウが開く前に発生します。 + +`beforeprint` イベントと {{event("afterprint")}} イベントを使用すると、印刷を開始する前にページでコンテンツを変更し(例えば、バナーを削除するなど)、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、[`@media print`](/ja/docs/Web/CSS/@media#メディア種別) CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。 + +## 構文 + +``` +window.addEventListener("beforeprint", function(event) { ... }); +window.onbeforeprint = function(event) { ... }; +``` + +## ポリフィル + +Safari はこれらのイベントを実装していませんが、{{domxref("window.matchMedia")}}`('print')` を使用して `beforeprint` イベントと同等の結果を作成できます。 + +```js +var mediaQueryList = window.matchMedia('print'); +mediaQueryList.addListener(function(mql) { + if(mql.matches) { + console.log('onbeforeprint に相当する webkit'); + } +}); +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザーの互換性 + +{{Compat("api.WindowEventHandlers.onbeforeprint")}} + +## 関連情報 + +- {{domxref("Window.print()")}} +- {{domxref("WindowEventHandlers.onafterprint")}} +- [印刷](/ja/docs/Web/Guide/Printing) diff --git a/files/ja/conflicting/web/api/window/beforeunload_event/index.html b/files/ja/conflicting/web/api/window/beforeunload_event/index.html deleted file mode 100644 index 05a3f58a2b1a95..00000000000000 --- a/files/ja/conflicting/web/api/window/beforeunload_event/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: WindowEventHandlers.onbeforeunload -slug: conflicting/Web/API/Window/beforeunload_event -tags: - - API - - DOM - - Event Handler - - Property - - Reference - - Window - - イベントハンドラー - - プロパティ -translation_of: Web/API/WindowEventHandlers/onbeforeunload -original_slug: Web/API/WindowEventHandlers/onbeforeunload ---- -
{{APIRef("HTML DOM")}}
- -

onbeforeunload は {{domxref("WindowEventHandlers")}} ミックスインのプロパティで、 {{event("beforeunload")}} イベントを処理する {{event("Event_handlers", "event handler")}} です。このイベントはウィンドウでリソースを {{event("unload")}} しようとするときに発生します。この時点では文書はまだ表示されており、イベントはキャンセル可能な状態です。

- -
-

メモ: ブラウザーによっては不要なポップアップを防ぐために、ページで操作が行われない限り、 beforeunload イベントハンドラーの中で作られたプロンプトを表示しないことがあります。さらに、ブラウザーによっては全く表示しないかもしれません。

-
- -

構文

- -
window.addEventListener("beforeunload", function(event) { ... });
-window.onbeforeunload = function(event) { ... };
- -

ふつうは、 {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} および {{event("beforeunload")}} イベントを使用したほうが onbeforeunload を使用するよりも適切です。

- -

- -

この例では、ページの終了前にユーザーに確認を取ります。

- -

HTML 仕様書は、ユーザーに確認を取るときに {{domxref("Event.returnValue")}} メソッドの代わりに {{domxref("Event.preventDefault()")}} メソッドを使用するよう明記しています。しかし、これはまだすべてのブラウザーが対応しているわけではありません。

- -
window.addEventListener('beforeunload', function (e) {
-  // イベントをキャンセルする
-  e.preventDefault();
-  // Chrome では returnValue を設定する必要がある
-  e.returnValue = '';
-});
-
- -

メモ

- -

ページが JavaScript を使用してコンテンツを表示している場合、ページを離れて元に戻ったときに JavaScript が停止することがあります。 window.onbeforeunload をバインドすることで、ブラウザーがページを完全にキャッシュすることを防ぐことができます。そうすると、ページ内の JavaScript は、次回の訪問時に起動され、必要に応じてコンテンツを更新します。

- -

仕様書

- -

このイベントは最初に Microsoft Internet Explorer 4 で導入され、HTML5 仕様で標準化されました。

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#handler-window-onbeforeunload', 'onbeforeunload')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}
- -

ブラウザーの対応

- -

{{Compat("api.WindowEventHandlers.onbeforeunload")}}

- -

HTML 仕様書は、ユーザーに確認を取るときに {{domxref("Event.returnValue")}} メソッドの代わりに {{domxref("Event.preventDefault()")}} メソッドを使用するよう明記しています。しかし、これはまだすべてのブラウザーが対応しているわけではありません。

- -

このイベントが null でも undefined でもない値を返した場合 (または returnValue プロパティに設定した場合)、ユーザーに対してページが終了することの確認が行われます。古いブラウザーでは、イベントの返値がダイアログに表示されます。 Firefox 44, Chrome 51, Opera 38, Safari 9.1 以降では、次のように、文字列の返値ではなく、ウェブページからは制御できない一般化された文字列が表示されます。

- -
    -
  • 例えば、 Firefox では "This page is asking you to confirm that you want to leave - data you have entered may not be saved." (このページが本当にページから離れるかどうかを確認しています。 - 入力されたデータは保存されない可能性があります) という文字列が表示されます ({{bug("588292")}} を参照)。
  • -
  • Chrome では "Do you want to leave this site? Changes you made may not be saved" (サイトを離れますか?変更が保存されない可能性があります) という文字列が表示されます (Chrome Platform Status を参照)。
  • -
- -

Internet Explorer は null の返値を尊重せず、テキストとして "null" をユーザーに表示します。プロンプトをスキップするには、 undefined を使用する必要があります。

- -

ブラウザーによっては、このイベント内での {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, {{domxref("window.prompt()")}} の呼び出しは無視される可能性があります。詳しくは HTML 仕様書を参照して下さい。

- -

また、様々なブラウザーがイベントの結果を無視し、ユーザーにまったく確認を取らないことがあります。このような場合、文書は常に自動的にアンロードされます。 Firefox では about:config の中に dom.disable_beforeunload という名前のスイッチがあり、この動作を有効にすることができます。Chrome 60 時点では、フレームまたはページが読み込まれてからユーザーが何も操作を行っていない場合、確認は行われません。

diff --git a/files/ja/conflicting/web/api/window/beforeunload_event/index.md b/files/ja/conflicting/web/api/window/beforeunload_event/index.md new file mode 100644 index 00000000000000..74a373840b9bfb --- /dev/null +++ b/files/ja/conflicting/web/api/window/beforeunload_event/index.md @@ -0,0 +1,75 @@ +--- +title: WindowEventHandlers.onbeforeunload +slug: conflicting/Web/API/Window/beforeunload_event +tags: + - API + - DOM + - Event Handler + - Property + - Reference + - Window + - イベントハンドラー + - プロパティ +translation_of: Web/API/WindowEventHandlers/onbeforeunload +original_slug: Web/API/WindowEventHandlers/onbeforeunload +--- +{{APIRef("HTML DOM")}} + +**`onbeforeunload`** は {{domxref("WindowEventHandlers")}} ミックスインのプロパティで、 {{event("beforeunload")}} イベントを処理する {{event("Event_handlers", "event handler")}} です。このイベントはウィンドウでリソースを {{event("unload")}} しようとするときに発生します。この時点では文書はまだ表示されており、イベントはキャンセル可能な状態です。 + +> **Note:** **メモ:** ブラウザーによっては不要なポップアップを防ぐために、ページで操作が行われない限り、 `beforeunload` イベントハンドラーの中で作られたプロンプトを表示しないことがあります。さらに、ブラウザーによっては全く表示しないかもしれません。 + +## 構文 + +``` +window.addEventListener("beforeunload", function(event) { ... }); +window.onbeforeunload = function(event) { ... }; +``` + +ふつうは、 {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} および {{event("beforeunload")}} イベントを使用したほうが `onbeforeunload` を使用するよりも適切です。 + +## 例 + +この例では、ページの終了前にユーザーに確認を取ります。 + +HTML 仕様書は、ユーザーに確認を取るときに {{domxref("Event.returnValue")}} メソッドの代わりに {{domxref("Event.preventDefault()")}} メソッドを使用するよう明記しています。しかし、これはまだすべてのブラウザーが対応しているわけではありません。 + +```js +window.addEventListener('beforeunload', function (e) { + // イベントをキャンセルする + e.preventDefault(); + // Chrome では returnValue を設定する必要がある + e.returnValue = ''; +}); +``` + +## メモ + +ページが JavaScript を使用してコンテンツを表示している場合、ページを離れて元に戻ったときに JavaScript が停止することがあります。 `window.onbeforeunload` をバインドすることで、ブラウザーがページを完全にキャッシュすることを防ぐことができます。そうすると、ページ内の JavaScript は、次回の訪問時に起動され、必要に応じてコンテンツを更新します。 + +## 仕様書 + +このイベントは最初に Microsoft Internet Explorer 4 で導入され、HTML5 仕様で標準化されました。 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---- | +| {{SpecName('HTML WHATWG', '#handler-window-onbeforeunload', 'onbeforeunload')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML5.1')}} | | +| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}} | {{Spec2('HTML5 W3C')}} | | + +## ブラウザーの対応 + +{{Compat("api.WindowEventHandlers.onbeforeunload")}} + +HTML 仕様書は、ユーザーに確認を取るときに {{domxref("Event.returnValue")}} メソッドの代わりに {{domxref("Event.preventDefault()")}} メソッドを使用するよう明記しています。しかし、これはまだすべてのブラウザーが対応しているわけではありません。 + +このイベントが `null` でも `undefined` でもない値を返した場合 (または `returnValue` プロパティに設定した場合)、ユーザーに対してページが終了することの確認が行われます。古いブラウザーでは、イベントの返値がダイアログに表示されます。 Firefox 44, Chrome 51, Opera 38, Safari 9.1 以降では、次のように、文字列の返値ではなく、ウェブページからは制御できない一般化された文字列が表示されます。 + +- 例えば、 Firefox では "This page is asking you to confirm that you want to leave - data you have entered may not be saved." (このページが本当にページから離れるかどうかを確認しています。 - 入力されたデータは保存されない可能性があります) という文字列が表示されます ({{bug("588292")}} を参照)。 +- Chrome では "Do you want to leave this site? Changes you made may not be saved" (サイトを離れますか?変更が保存されない可能性があります) という文字列が表示されます ([Chrome Platform Status](https://www.chromestatus.com/feature/5349061406228480) を参照)。 + +Internet Explorer は `null` の返値を尊重せず、テキストとして "null" をユーザーに表示します。プロンプトをスキップするには、 `undefined` を使用する必要があります。 + +ブラウザーによっては、このイベント内での {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, {{domxref("window.prompt()")}} の呼び出しは無視される可能性があります。詳しくは [HTML 仕様書](http://www.w3.org/TR/html5/webappapis.html#user-prompts)を参照して下さい。 + +また、様々なブラウザーがイベントの結果を無視し、ユーザーにまったく確認を取らないことがあります。このような場合、文書は常に自動的にアンロードされます。 Firefox では about:config の中に `dom.disable_beforeunload` という名前のスイッチがあり、この動作を有効にすることができます。Chrome 60 時点では、フレームまたはページが読み込まれてからユーザーが何も操作を行っていない場合、確認は行われません。 diff --git a/files/ja/conflicting/web/api/window/devicemotion_event/index.html b/files/ja/conflicting/web/api/window/devicemotion_event/index.html deleted file mode 100644 index 7c0b782d063948..00000000000000 --- a/files/ja/conflicting/web/api/window/devicemotion_event/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Window.ondevicemotion -slug: conflicting/Web/API/Window/devicemotion_event -tags: - - API - - Device Orientation - - Event Handler - - Mobile - - Motion - - Orientation - - Property - - Reference - - イベントハンドラー - - プロパティ - - モバイル - - 向き - - 端末の向き -translation_of: Web/API/Window/ondevicemotion -original_slug: Web/API/Window/ondevicemotion ---- -
{{APIRef("Device Orientation Events")}}
- -

Windows に対して送信される {{domxref("Window/devicemotion_event", "devicemotion")}} イベントのためのイベントハンドラーです。

- -

構文

- -
window.ondevicemotion = funcRef;
- -

funcRef のところは関数への参照です。この関数は発生した動きを説明する {{DOMxRef("DeviceMotionEvent")}} オブジェクトを受け取ります。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("Device Orientation")}}{{Spec2("Device Orientation")}}Initial definition.
- -

ブラウザーの互換性

- -

{{Compat("api.Window.ondevicemotion")}}

- -

関連情報

- -
    -
  • {{domxref("Window/devicemotion_event", "devicemotion")}}
  • -
  • {{DOMxRef("DeviceMotionEvent")}}
  • -
  • 端末の向きの検出
  • -
diff --git a/files/ja/conflicting/web/api/window/devicemotion_event/index.md b/files/ja/conflicting/web/api/window/devicemotion_event/index.md new file mode 100644 index 00000000000000..ee4ff620be6ac0 --- /dev/null +++ b/files/ja/conflicting/web/api/window/devicemotion_event/index.md @@ -0,0 +1,47 @@ +--- +title: Window.ondevicemotion +slug: conflicting/Web/API/Window/devicemotion_event +tags: + - API + - Device Orientation + - Event Handler + - Mobile + - Motion + - Orientation + - Property + - Reference + - イベントハンドラー + - プロパティ + - モバイル + - 向き + - 端末の向き +translation_of: Web/API/Window/ondevicemotion +original_slug: Web/API/Window/ondevicemotion +--- +{{APIRef("Device Orientation Events")}} + +Windows に対して送信される {{domxref("Window/devicemotion_event", "devicemotion")}} イベントのためのイベントハンドラーです。 + +## 構文 + +``` +window.ondevicemotion = funcRef; +``` + +`funcRef` のところは関数への参照です。この関数は発生した動きを説明する {{DOMxRef("DeviceMotionEvent")}} オブジェクトを受け取ります。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------- | ---------------------------------------- | ------------------- | +| {{SpecName("Device Orientation")}} | {{Spec2("Device Orientation")}} | Initial definition. | + +## ブラウザーの互換性 + +{{Compat("api.Window.ondevicemotion")}} + +## 関連情報 + +- {{domxref("Window/devicemotion_event", "devicemotion")}} +- {{DOMxRef("DeviceMotionEvent")}} +- [端末の向きの検出](/ja/docs/Web/API/Detecting_device_orientation) diff --git a/files/ja/conflicting/web/api/window/gamepadconnected_event/index.html b/files/ja/conflicting/web/api/window/gamepadconnected_event/index.html deleted file mode 100644 index e3e00f62f5a8c7..00000000000000 --- a/files/ja/conflicting/web/api/window/gamepadconnected_event/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Window.ongamepadconnected -slug: conflicting/Web/API/Window/gamepadconnected_event -tags: - - API - - Event Handler - - Experimental - - Gamepad API - - Property - - Reference - - Window - - ongamepadconnected -translation_of: Web/API/Window/ongamepadconnected -original_slug: Web/API/Window/ongamepadconnected ---- -
-
{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}
-
- -
{{domxref("Window")}} インターフェイスの ongamepadconnected プロパティは、ゲームパッドが接続されたとき ({{event('gamepadconnected')}}イベントが発生したとき) に実行されるイベントハンドラを表します。
- -
- -

イベントのオブジェクトの型は {{domxref("GamepadEvent")}} です。

- -

構文

- -
window.ongamepadconnected = function() { ... };
-
- -

- -
window.ongamepadconnected = function(event) {
-  // All buttons and axes values can be accessed through
-  event.gamepad;
-};
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Gamepad ', '#event-gamepadconnected', 'gamepadconnected event')}}{{Spec2('Gamepad')}}初版
- -

ブラウザの互換性

- - - -

{{Compat("api.Window.ongamepadconnected")}}

- -

参照

- - diff --git a/files/ja/conflicting/web/api/window/gamepadconnected_event/index.md b/files/ja/conflicting/web/api/window/gamepadconnected_event/index.md new file mode 100644 index 00000000000000..fc8286eff9d3a2 --- /dev/null +++ b/files/ja/conflicting/web/api/window/gamepadconnected_event/index.md @@ -0,0 +1,48 @@ +--- +title: Window.ongamepadconnected +slug: conflicting/Web/API/Window/gamepadconnected_event +tags: + - API + - Event Handler + - Experimental + - Gamepad API + - Property + - Reference + - Window + - ongamepadconnected +translation_of: Web/API/Window/ongamepadconnected +original_slug: Web/API/Window/ongamepadconnected +--- +{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}{{domxref("Window")}} インターフェイスの **`ongamepadconnected`** プロパティは、ゲームパッドが接続されたとき ({{event('gamepadconnected')}}イベントが発生したとき) に実行されるイベントハンドラを表します。 + +イベントのオブジェクトの型は {{domxref("GamepadEvent")}} です。 + +## 構文 + +``` +window.ongamepadconnected = function() { ... }; +``` + +## 例 + +```js +window.ongamepadconnected = function(event) { + // All buttons and axes values can be accessed through + event.gamepad; +}; +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName('Gamepad ', '#event-gamepadconnected', 'gamepadconnected event')}} | {{Spec2('Gamepad')}} | 初版 | + +## ブラウザの互換性 + +{{Compat("api.Window.ongamepadconnected")}} + +## 参照 + +- Ted Mielczarek と Robert Nyman による [The Gamepad API](https://hacks.mozilla.org/2013/12/the-gamepad-api/) +- [Simple API demo page](http://luser.github.io/gamepadtest/) ([ソース](https://github.com/luser/gamepadtest)) diff --git a/files/ja/conflicting/web/api/window/gamepaddisconnected_event/index.html b/files/ja/conflicting/web/api/window/gamepaddisconnected_event/index.html deleted file mode 100644 index d0a42860a0782f..00000000000000 --- a/files/ja/conflicting/web/api/window/gamepaddisconnected_event/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Window.ongamepaddisconnected -slug: conflicting/Web/API/Window/gamepaddisconnected_event -tags: - - API - - Event Handler - - Experimental - - Gamepad API - - Property - - Reference - - Window - - ongamepaddisconnected -translation_of: Web/API/Window/ongamepaddisconnected -original_slug: Web/API/Window/ongamepaddisconnected ---- -
{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}
- -

{{domxref("Window")}} インターフェースの ongamepaddisconnected プロパティはゲームパッドが切断した時 ({{event('gamepaddisconnected')}} イベントが発生したとき) に実行されるイベントハンドラーを表します。

- -

イベントのオブジェクトの型は {{domxref("GamepadEvent")}} です。

- -

構文

- -
window.ongamepaddisconnected = function() { ... };
-
- -

- -
window.ongamepaddisconnected = function() {
-  // A gamepad has been disconnected
-};
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Gamepad ', '#event-gamepaddisconnected', 'gamepaddisconnected event')}}{{Spec2('Gamepad')}}初版
- -

ブラウザの互換性

- - - -

{{Compat("api.Window.ongamepaddisconnected")}}

- -

参照

- - diff --git a/files/ja/conflicting/web/api/window/gamepaddisconnected_event/index.md b/files/ja/conflicting/web/api/window/gamepaddisconnected_event/index.md new file mode 100644 index 00000000000000..b5f779e28f4da5 --- /dev/null +++ b/files/ja/conflicting/web/api/window/gamepaddisconnected_event/index.md @@ -0,0 +1,49 @@ +--- +title: Window.ongamepaddisconnected +slug: conflicting/Web/API/Window/gamepaddisconnected_event +tags: + - API + - Event Handler + - Experimental + - Gamepad API + - Property + - Reference + - Window + - ongamepaddisconnected +translation_of: Web/API/Window/ongamepaddisconnected +original_slug: Web/API/Window/ongamepaddisconnected +--- +{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}} + +{{domxref("Window")}} インターフェースの **`ongamepaddisconnected`** プロパティはゲームパッドが切断した時 ({{event('gamepaddisconnected')}} イベントが発生したとき) に実行されるイベントハンドラーを表します。 + +イベントのオブジェクトの型は {{domxref("GamepadEvent")}} です。 + +## 構文 + +``` +window.ongamepaddisconnected = function() { ... }; +``` + +## 例 + +```js +window.ongamepaddisconnected = function() { + // A gamepad has been disconnected +}; +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName('Gamepad ', '#event-gamepaddisconnected', 'gamepaddisconnected event')}} | {{Spec2('Gamepad')}} | 初版 | + +## ブラウザの互換性 + +{{Compat("api.Window.ongamepaddisconnected")}} + +## 参照 + +- Ted Mielczarek と Robert Nyman による [The Gamepad API](https://hacks.mozilla.org/2013/12/the-gamepad-api/) +- [Simple API demo page](http://luser.github.io/gamepadtest/) ([ソース](https://github.com/luser/gamepadtest)) diff --git a/files/ja/conflicting/web/api/window/hashchange_event/index.html b/files/ja/conflicting/web/api/window/hashchange_event/index.html deleted file mode 100644 index fc699f230684ae..00000000000000 --- a/files/ja/conflicting/web/api/window/hashchange_event/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: WindowEventHandlers.onhashchange -slug: conflicting/Web/API/Window/hashchange_event -tags: - - Event Handler - - HTML DOM - - Hash - - Property - - Reference - - URL & Hash - - WindowEventHandlers -translation_of: Web/API/WindowEventHandlers/onhashchange -original_slug: Web/API/WindowEventHandlers/onhashchange ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("WindowEventHandlers")}} ミックスインの onhashchange プロパティは、hashchange イベントを処理するための {{event("Event_handlers", "event handler")}} です。

- -

hashchange イベントは、ウィンドウのハッシュが変更されると発生します({{domxref("Window.location")}} および {{domxref("HTMLHyperlinkElementUtils.hash")}} を参照)。

- -

構文

- -

イベントハンドラの使用

- -
window.onhashchange = funcRef;
-
- -

HTML イベントハンドラの使用

- -
<body onhashchange="funcRef();">
-
- -

イベントリスナーの使用

- -

イベントリスナーを追加するには、{{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用します。

- -
window.addEventListener("hashchange", funcRef, false);
-
- -

パラメーター

- -
-
funcRef
-
関数への参照。
-
- -

- -

イベントハンドラの使用

- -

この例では、イベントハンドラ(window.onhashchange)を使用して、新しいハッシュ値が変更されるたびにチェックします。 それが #cool-feature と等しい場合、スクリプトはコンソールにメッセージを記録します。

- -
function locationHashChanged() {
-  if (location.hash === '#cool-feature') {
-    console.log("あなたはクールな機能を訪れています!");
-  }
-}
-
-window.onhashchange = locationHashChanged;
-
- -

イベントリスナーの使用

- -

この例では、イベントリスナーを使用して、ハッシュが変更されるたびに通知を記録します。

- -
function hashHandler() {
-  console.log('ハッシュが変更されました!');
-}
-
-window.addEventListener('hashchange', hashHandler, false);
-
- -

ハッシュのオーバーライド

- -

この関数は、新しいハッシュを動的に設定し、2つの値のいずれかにランダムに設定します。

- -
function changeHash() {
-  location.hash = (Math.random() > 0.5) ? 'location1' : 'location2';
-}
-
- -

hashchange イベント

- -

送出された hashchange イベントには、次のプロパティがあります。

- - - - - - - - - - - - - - - - - - - -
フィールド説明
newURLDOMStringウィンドウがナビゲートされた新しい URL。
oldURLDOMStringウィンドウがナビゲートされる前の URL。
- -

event.newURL および event.oldURL のポリフィル

- -
// hashchange イベントを登録するコードの前にこのスニペットを実行してください
-if (!window.HashChangeEvent)(function(){
-  var lastURL = document.URL;
-  window.addEventListener("hashchange", function(event){
-    Object.defineProperty(event, "oldURL", {enumerable:true,configurable:true,value:lastURL});
-    Object.defineProperty(event, "newURL", {enumerable:true,configurable:true,value:document.URL});
-    lastURL = document.URL;
-  });
-}());
-
- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-window-onhashchange', 'onhashchange')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.WindowEventHandlers.onhashchange")}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/window/hashchange_event/index.md b/files/ja/conflicting/web/api/window/hashchange_event/index.md new file mode 100644 index 00000000000000..a5383304e7ae89 --- /dev/null +++ b/files/ja/conflicting/web/api/window/hashchange_event/index.md @@ -0,0 +1,127 @@ +--- +title: WindowEventHandlers.onhashchange +slug: conflicting/Web/API/Window/hashchange_event +tags: + - Event Handler + - HTML DOM + - Hash + - Property + - Reference + - URL & Hash + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onhashchange +original_slug: Web/API/WindowEventHandlers/onhashchange +--- +{{APIRef("HTML DOM")}} + +{{domxref("WindowEventHandlers")}} ミックスインの **`onhashchange`** プロパティは、[`hashchange`](/ja/docs/Web/API/Window/hashchange_event) イベントを処理するための {{event("Event_handlers", "event handler")}} です。 + +`hashchange` イベントは、ウィンドウのハッシュが変更されると発生します({{domxref("Window.location")}} および {{domxref("HTMLHyperlinkElementUtils.hash")}} を参照)。 + +## 構文 + +**イベントハンドラの使用** + +``` +window.onhashchange = funcRef; +``` + +**HTML イベントハンドラの使用** + +``` + +``` + +**イベントリスナーの使用** + +イベントリスナーを追加するには、{{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用します。 + +``` +window.addEventListener("hashchange", funcRef, false); +``` + +### パラメーター + +- `funcRef` + - : 関数への参照。 + +## 例 + +### イベントハンドラの使用 + +この例では、イベントハンドラ(`window.onhashchange`)を使用して、新しいハッシュ値が変更されるたびにチェックします。 それが `#cool-feature` と等しい場合、スクリプトはコンソールにメッセージを記録します。 + +```js +function locationHashChanged() { + if (location.hash === '#cool-feature') { + console.log("あなたはクールな機能を訪れています!"); + } +} + +window.onhashchange = locationHashChanged; +``` + +### イベントリスナーの使用 + +この例では、イベントリスナーを使用して、ハッシュが変更されるたびに通知を記録します。 + +```js +function hashHandler() { + console.log('ハッシュが変更されました!'); +} + +window.addEventListener('hashchange', hashHandler, false); +``` + +### ハッシュのオーバーライド + +この関数は、新しいハッシュを動的に設定し、2 つの値のいずれかにランダムに設定します。 + +```js +function changeHash() { + location.hash = (Math.random() > 0.5) ? 'location1' : 'location2'; +} +``` + +## hashchange イベント + +送出された `hashchange` イベントには、次のプロパティがあります。 + +| フィールド | 型 | 説明 | +| ---------- | ----------- | ---------------------------------------- | +| `newURL` | `DOMString` | ウィンドウがナビゲートされた新しい URL。 | +| `oldURL` | `DOMString` | ウィンドウがナビゲートされる前の URL。 | + +### event.newURL および event.oldURL のポリフィル + +```js +// hashchange イベントを登録するコードの前にこのスニペットを実行してください +if (!window.HashChangeEvent)(function(){ + var lastURL = document.URL; + window.addEventListener("hashchange", function(event){ + Object.defineProperty(event, "oldURL", {enumerable:true,configurable:true,value:lastURL}); + Object.defineProperty(event, "newURL", {enumerable:true,configurable:true,value:document.URL}); + lastURL = document.URL; + }); +}()); +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-window-onhashchange', 'onhashchange')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML5.1')}} | | +| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}} | {{Spec2('HTML5 W3C')}} | | + +## ブラウザーの互換性 + +{{Compat("api.WindowEventHandlers.onhashchange")}} + +## 関連情報 + +- [`hashchange`](/ja/docs/Web/API/Window/hashchange_event) イベント +- [ブラウザーの履歴の操作](/ja/docs/DOM/Manipulating_the_browser_history) +- [`history.pushState()` メソッドと `history.replaceState()` メソッド](/ja/docs/DOM/window.history) +- {{domxref("WindowEventHandlers.onpopstate")}} +- {{domxref("HTMLHyperlinkElementUtils.hash")}} diff --git a/files/ja/conflicting/web/api/window/languagechange_event/index.html b/files/ja/conflicting/web/api/window/languagechange_event/index.html deleted file mode 100644 index 2eedfbe76e5fc4..00000000000000 --- a/files/ja/conflicting/web/api/window/languagechange_event/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: WindowEventHandlers.onlanguagechange -slug: conflicting/Web/API/Window/languagechange_event -tags: - - API - - Event Handler - - Experimental - - HTML DOM - - Property - - Reference - - WindowEventHandlers -translation_of: Web/API/WindowEventHandlers/onlanguagechange -original_slug: Web/API/WindowEventHandlers/onlanguagechange ---- -
{{APIRef("HTML DOM")}} {{SeeCompatTable}}
- -

{{domxref("WindowEventHandlers")}} ミックスインの onlanguagechange プロパティは、{{event("languagechange")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。

- -

このイベントは、このインターフェイスを実装するオブジェクト(通常は {{domxref("Window")}}、{{domxref("HTMLBodyElement")}}、{{domxref("HTMLIFrameElement")}})によって受信されます。 このイベントは、優先言語リストが更新されたことを知らせるためにブラウザーによって送信されます。 このリストは、{{domxref("NavigatorLanguage.languages")}} を介してアクセスできます。

- -

構文

- -
object.onlanguagechange = function;
-
- -

- -
    -
  • function は、() 接尾辞やパラメーターを持たないユーザー定義関数の名前、または function(event) {...} などの匿名関数宣言です。 イベントハンドラには常に、{{domxref("Event")}} 型のイベントを含む1つのパラメーターがあります。
  • -
- -

- -
window.onlanguagechange = function(event) {
-  console.log('languagechange イベントを検出!');
-};
-
- -

仕様

- - - - - - - - - - - - - - - - -
仕様状態コメント
{{ SpecName('HTML WHATWG', '#handler-window-onlanguagechange', 'WindowEventHandler.onlanguagechange') }}{{ Spec2('HTML WHATWG') }}初期仕様
- -

ブラウザーの互換性

- - - -

{{Compat("api.WindowEventHandlers.onlanguagechange")}}

- -

関連情報

- -
    -
  • {{event("languagechange")}} イベントとその型の {{domxref("Event")}}
  • -
diff --git a/files/ja/conflicting/web/api/window/languagechange_event/index.md b/files/ja/conflicting/web/api/window/languagechange_event/index.md new file mode 100644 index 00000000000000..88f8ee6149f225 --- /dev/null +++ b/files/ja/conflicting/web/api/window/languagechange_event/index.md @@ -0,0 +1,51 @@ +--- +title: WindowEventHandlers.onlanguagechange +slug: conflicting/Web/API/Window/languagechange_event +tags: + - API + - Event Handler + - Experimental + - HTML DOM + - Property + - Reference + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onlanguagechange +original_slug: Web/API/WindowEventHandlers/onlanguagechange +--- +{{APIRef("HTML DOM")}} {{SeeCompatTable}} + +{{domxref("WindowEventHandlers")}} ミックスインの **`onlanguagechange`** プロパティは、{{event("languagechange")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 + +このイベントは、このインターフェイスを実装するオブジェクト(通常は {{domxref("Window")}}、{{domxref("HTMLBodyElement")}}、{{domxref("HTMLIFrameElement")}})によって受信されます。 このイベントは、優先言語リストが更新されたことを知らせるためにブラウザーによって送信されます。 このリストは、{{domxref("NavigatorLanguage.languages")}} を介してアクセスできます。 + +## 構文 + +``` +object.onlanguagechange = function; +``` + +### 値 + +- `function` は、`()` 接尾辞やパラメーターを持たないユーザー定義関数の名前、または `function(event) {...}` などの匿名関数宣言です。 イベントハンドラには常に、{{domxref("Event")}} 型のイベントを含む 1 つのパラメーターがあります。 + +## 例 + +```js +window.onlanguagechange = function(event) { + console.log('languagechange イベントを検出!'); +}; +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------- | +| {{ SpecName('HTML WHATWG', '#handler-window-onlanguagechange', 'WindowEventHandler.onlanguagechange') }} | {{ Spec2('HTML WHATWG') }} | 初期仕様 | + +## ブラウザーの互換性 + +{{Compat("api.WindowEventHandlers.onlanguagechange")}} + +## 関連情報 + +- {{event("languagechange")}} イベントとその型の {{domxref("Event")}} diff --git a/files/ja/conflicting/web/api/window/load_event/index.html b/files/ja/conflicting/web/api/window/load_event/index.html deleted file mode 100644 index 06e010ba767710..00000000000000 --- a/files/ja/conflicting/web/api/window/load_event/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: GlobalEventHandlers.onload -slug: conflicting/Web/API/Window/load_event -tags: - - API - - Event Handler - - GlobalEventHandlers - - HTML DOM - - Property - - Reference - - onload -translation_of: Web/API/GlobalEventHandlers/onload -original_slug: Web/API/GlobalEventHandlers/onload -browser-compat: api.GlobalEventHandlers.onload ---- -
{{ApiRef()}}
- -

onload は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{domxref("Window")}}、{{domxref("XMLHttpRequest")}}、{{htmlelement("img")}} 要素などで発生した {{event("load")}} イベントを処理するイベントハンドラーです。

- -

load イベントは指定されたリソースの読み込みが完了したときに発行されます。

- -

構文

- -
target.onload = functionRef;
-
- -

- -

functionRef は、ウィンドウの load イベントが発行されたときに呼び出されるハンドラー関数です。

- -

- -
window.onload = function() {
-  init();
-  doSomethingElse();
-};
-
- -
<!doctype html>
-<html>
-  <head>
-    <title>onload test</title>
-    // ES5
-    <script>
-      function load() {
-        console.log("load イベントが検出されました。");
-      }
-      window.onload = load;
-    </script>
-    // ES2015
-    <script>
-      const load = () => {
-        console.log("load イベントが検出されました。");
-      }
-      window.onload = load;
-    </script>
-  </head>
-  <body>
-    <p>load イベントは、文書の読み込みが完了したときに発行されます。</p>
-  </body>
-</html>
-
- -

メモ

- -

load イベントは文書の読み込み工程の終了時に発行されます。このイベントが発行された時点で、文書中のすべてのオブジェクトが DOM 内にあり、すべての画像、スクリプト、サブフレームの読み込みが完了しています。

- -

DOMContentLoadedDOMFrameContentLoaded のような DOM イベント ({{domxref("EventTarget.addEventListener()")}} で扱うことが可能) もありますが、これらはこのページの DOM が構築された後、他のリソースの読み込みが完了する前に発行されます。

- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/window/load_event/index.md b/files/ja/conflicting/web/api/window/load_event/index.md new file mode 100644 index 00000000000000..80bdec5d5deb27 --- /dev/null +++ b/files/ja/conflicting/web/api/window/load_event/index.md @@ -0,0 +1,85 @@ +--- +title: GlobalEventHandlers.onload +slug: conflicting/Web/API/Window/load_event +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - onload +translation_of: Web/API/GlobalEventHandlers/onload +original_slug: Web/API/GlobalEventHandlers/onload +browser-compat: api.GlobalEventHandlers.onload +--- +{{ApiRef()}} + +**`onload`** は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{domxref("Window")}}、{{domxref("XMLHttpRequest")}}、{{htmlelement("img")}} 要素などで発生した {{event("load")}} イベントを処理する[イベントハンドラー](/ja/docs/Web/Events/Event_handlers)です。 + +`load` イベントは指定されたリソースの読み込みが完了したときに発行されます。 + +## 構文 + +```js +target.onload = functionRef; +``` + +### 値 + +`functionRef` は、ウィンドウの `load` イベントが発行されたときに呼び出されるハンドラー関数です。 + +## 例 + +```js +window.onload = function() { + init(); + doSomethingElse(); +}; +``` + +```html + + + + onload test + // ES5 + + // ES2015 + + + +

load イベントは、文書の読み込みが完了したときに発行されます。

+ + +``` + +## メモ + +`load` イベントは文書の読み込み工程の終了時に発行されます。このイベントが発行された時点で、文書中のすべてのオブジェクトが DOM 内にあり、すべての画像、スクリプト、サブフレームの読み込みが完了しています。 + +`DOMContentLoaded` や `DOMFrameContentLoaded` のような [DOM イベント](/ja/docs/Web/Events) ({{domxref("EventTarget.addEventListener()")}} で扱うことが可能) もありますが、これらはこのページの DOM が構築された後、他のリソースの読み込みが完了する前に発行されます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Event("load")}} イベント +- `DOMContentLoaded` イベント ([イベントの待ち受け: 単純な DOM イベント](/ja/docs/Listening_to_events_in_Firefox_extensions#Simple_DOM_events)内) +- IIFE [Immediately-invoked function expression](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) diff --git a/files/ja/conflicting/web/api/window/messageerror_event/index.html b/files/ja/conflicting/web/api/window/messageerror_event/index.html deleted file mode 100644 index 653ad3d690571c..00000000000000 --- a/files/ja/conflicting/web/api/window/messageerror_event/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: WindowEventHandlers.onmessageerror -slug: conflicting/Web/API/Window/messageerror_event -tags: - - API - - Event Handler - - HTML DOM - - Property - - Reference - - Window - - WindowEventHandlers - - onmessageerror -translation_of: Web/API/WindowEventHandlers/onmessageerror -original_slug: Web/API/WindowEventHandlers/onmessageerror ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("WindowEventHandlers")}} インターフェイスの onmessageerror イベントハンドラは {{domxref("EventListener")}} であり、ウィンドウで messageerror タイプの MessageEvent が発生するたびに、つまり、{{glossary("Deserialization", "逆シリアル化")}}できないメッセージを受信したときに呼び出されます。

- -

{{AvailableInWorkers}}

- -

構文

- -
window.onmessageerror = function() { ... };
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-window-onmessageerror', 'onmessageerror')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザーの互換性

- -
- - -

{{Compat("api.WindowEventHandlers.onmessageerror")}}

-
- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/window/messageerror_event/index.md b/files/ja/conflicting/web/api/window/messageerror_event/index.md new file mode 100644 index 00000000000000..9f9e6420a4b298 --- /dev/null +++ b/files/ja/conflicting/web/api/window/messageerror_event/index.md @@ -0,0 +1,40 @@ +--- +title: WindowEventHandlers.onmessageerror +slug: conflicting/Web/API/Window/messageerror_event +tags: + - API + - Event Handler + - HTML DOM + - Property + - Reference + - Window + - WindowEventHandlers + - onmessageerror +translation_of: Web/API/WindowEventHandlers/onmessageerror +original_slug: Web/API/WindowEventHandlers/onmessageerror +--- +{{APIRef("HTML DOM")}} + +{{domxref("WindowEventHandlers")}} インターフェイスの **`onmessageerror`** イベントハンドラは {{domxref("EventListener")}} であり、ウィンドウで `messageerror` タイプの MessageEvent が発生するたびに、つまり、{{glossary("Deserialization", "逆シリアル化")}}できないメッセージを受信したときに呼び出されます。 + +{{AvailableInWorkers}} + +## 構文 + +``` +window.onmessageerror = function() { ... }; +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-window-onmessageerror', 'onmessageerror')}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザーの互換性 + +{{Compat("api.WindowEventHandlers.onmessageerror")}} + +## 関連情報 + +- [Channel Messaging の使用](/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging) diff --git a/files/ja/conflicting/web/api/window/rejectionhandled_event/index.html b/files/ja/conflicting/web/api/window/rejectionhandled_event/index.html deleted file mode 100644 index bfbfe134f70772..00000000000000 --- a/files/ja/conflicting/web/api/window/rejectionhandled_event/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: WindowEventHandlers.onrejectionhandled -slug: conflicting/Web/API/Window/rejectionhandled_event -tags: - - API - - Event Handler - - HTML DOM - - JavaScript - - Promises - - Property - - Reference - - WindowEventHandlers - - events - - onrejectionhandled -translation_of: Web/API/WindowEventHandlers/onrejectionhandled -original_slug: Web/API/WindowEventHandlers/onrejectionhandled ---- -
{{APIRef}}
- -

{{domxref("WindowEventHandlers")}} ミックスインの onrejectionhandled プロパティは、{{event("rejectionhandled")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、{{jsxref("Promise")}} が拒否されたときに発生します。

- -

構文

- -
window.addEventListener("rejectionhandled", function(event) { ... });
-window.onrejectionhandled = function(event) { ...};
- -

- -
window.onrejectionhandled = function(e) {
-  console.log(e.reason);
-}
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onrejectionhandled', 'onrejectionhandled')}}{{Spec2('HTML WHATWG')}}初期定義
- -

ブラウザーの互換性

- - - -

{{Compat("api.WindowEventHandlers.onrejectionhandled")}}

diff --git a/files/ja/conflicting/web/api/window/rejectionhandled_event/index.md b/files/ja/conflicting/web/api/window/rejectionhandled_event/index.md new file mode 100644 index 00000000000000..1e15a651ef2ca5 --- /dev/null +++ b/files/ja/conflicting/web/api/window/rejectionhandled_event/index.md @@ -0,0 +1,45 @@ +--- +title: WindowEventHandlers.onrejectionhandled +slug: conflicting/Web/API/Window/rejectionhandled_event +tags: + - API + - Event Handler + - HTML DOM + - JavaScript + - Promises + - Property + - Reference + - WindowEventHandlers + - events + - onrejectionhandled +translation_of: Web/API/WindowEventHandlers/onrejectionhandled +original_slug: Web/API/WindowEventHandlers/onrejectionhandled +--- +{{APIRef}} + +{{domxref("WindowEventHandlers")}} ミックスインの **`onrejectionhandled`** プロパティは、{{event("rejectionhandled")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、{{jsxref("Promise")}} が拒否されたときに発生します。 + +## 構文 + +``` +window.addEventListener("rejectionhandled", function(event) { ... }); +window.onrejectionhandled = function(event) { ...}; +``` + +## 例 + +```js +window.onrejectionhandled = function(e) { + console.log(e.reason); +} +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onrejectionhandled', 'onrejectionhandled')}} | {{Spec2('HTML WHATWG')}} | 初期定義 | + +## ブラウザーの互換性 + +{{Compat("api.WindowEventHandlers.onrejectionhandled")}} diff --git a/files/ja/conflicting/web/api/window/resize_event/index.html b/files/ja/conflicting/web/api/window/resize_event/index.html deleted file mode 100644 index 4c84bae9e5a268..00000000000000 --- a/files/ja/conflicting/web/api/window/resize_event/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: window.onresize -slug: conflicting/Web/API/Window/resize_event -tags: - - DOM - - Gecko - - Property - - Window -translation_of: Web/API/GlobalEventHandlers/onresize -original_slug: Web/API/GlobalEventHandlers/onresize ---- -

{{ ApiRef() }}

- -

GlobalEventHandlers.onresize プロパティは、{{event("resize")}} イベントを受信するとトリガーされる {{event("Event_handlers", "event handler")}} を含みます。

- -

構文

- -
window.onresize = funcRef;
-
- -

引数

- -
    -
  • funcRef: 関数への参照
  • -
- -

- -
window.onresize = doFunc;
-
- -
<html>
-<head>
-
-<title>onresize test</title>
-
-</head>
-
-<body>
-<p>Resize the browser window to fire the resize event.</p>
-
-<p>Window height: <span id="height"></span></p>
-<p>Window width: <span id="width"></span></p>
-
-<script type="text/javascript">
-  var heightOutput = document.querySelector('#height');
-  var widthOutput = document.querySelector('#width');
-
-  function resize() {
-    heightOutput.textContent = window.innerHeight;
-    widthOutput.textContent = window.innerWidth;
-  }
-
-  window.onresize = resize;
-</script>
-</body>
-</html>
-
- -

注記

- -

ブラウザウィンドウのサイズが変更された後に resize イベントが発生します。

- -

仕様

- - - - - - - - - - - - - - -
使用ステータスコメント
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}}
diff --git a/files/ja/conflicting/web/api/window/resize_event/index.md b/files/ja/conflicting/web/api/window/resize_event/index.md new file mode 100644 index 00000000000000..9ca0d377a2d364 --- /dev/null +++ b/files/ja/conflicting/web/api/window/resize_event/index.md @@ -0,0 +1,82 @@ +--- +title: window.onresize +slug: conflicting/Web/API/Window/resize_event +tags: + - DOM + - Gecko + - Property + - Window +translation_of: Web/API/GlobalEventHandlers/onresize +original_slug: Web/API/GlobalEventHandlers/onresize +--- +{{ ApiRef() }} + +**`GlobalEventHandlers.onresize`** プロパティは、{{event("resize")}} イベントを受信するとトリガーされる {{event("Event_handlers", "event handler")}} を含みます。 + +## 構文 + +``` +window.onresize = funcRef; +``` + +### 引数 + +- `funcRef`: 関数への参照 + +## 例 + +``` +window.onresize = doFunc; +``` + +``` + + + +onresize test + + + + +

Resize the browser window to fire the resize event.

+ +

Window height:

+

Window width:

+ + + + +``` + +## 注記 + +ブラウザウィンドウのサイズが変更された後に `resize` イベントが発生します。 + +## 仕様 + + + + + + + + + + + + + + +
使用ステータスコメント
+ {{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}} + {{Spec2('HTML WHATWG')}}
diff --git a/files/ja/conflicting/web/api/window/scroll/index.html b/files/ja/conflicting/web/api/window/scroll/index.html deleted file mode 100644 index 72958622faf801..00000000000000 --- a/files/ja/conflicting/web/api/window/scroll/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: ScrollToOptions -slug: conflicting/Web/API/Window/scroll -tags: - - API - - CSSOM View - - Dictionary - - Reference - - ScrollToOptions - - 辞書 -translation_of: Web/API/ScrollToOptions -original_slug: Web/API/ScrollToOptions ---- -

{{APIRef("CSSOM")}}

- -

The ScrollToOptions は CSSOM View 仕様の辞書で、ある要素がスクロールする位置、およびスクロールがスムーズに行われるかどうかを指定するプロパティを指定します。

- -

ScrollToOptions 辞書は以下のメソッドの引数として提供することができます。

- -
    -
  • {{domxref("Window.scroll()")}}
  • -
  • {{domxref("Window.scrollBy()")}}
  • -
  • {{domxref("Window.scrollTo()")}}
  • -
  • {{domxref("Element.scroll()")}}
  • -
  • {{domxref("Element.scrollBy()")}}
  • -
  • {{domxref("Element.scrollTo()")}}
  • -
- -

プロパティ

- -
-
{{domxref("ScrollToOptions.top")}}
-
ウィンドウまたは要素をスクロールするための Y 軸に沿ったピクセル数を指定します。
-
{{domxref("ScrollToOptions.left")}}
-
ウィンドウまたは要素をスクロールするための X 軸に沿ったピクセル数を指定します。
-
{{domxref("ScrollToOptions.behavior")}}
-
スクロールするのに滑らかにアニメーションするのか、一回のジャンプで瞬時に行うのかを指定します。これは実際には ScrollToOptions で実装されている ScrollOptions 辞書で定義されています。
-
- -

- -

scrolltooptions の例 (ライブでご覧ください) では、3 つの値を入力するフォームを用意しました。左と上のプロパティ (X 軸と Y 軸に沿ってスクロールする位置) を表す 2 つの数値と、滑らかなスクロールを有効にするかどうかを示すチェックボックスです。

- -

フォームが送信されると、入力された値を ScrollToOptions 辞書に格納し、辞書を引数として渡して {{domxref("Window.ScrollTo()")}} メソッドを呼び出すイベントハンドラーが実行されます。

- -
form.addEventListener('submit', (e) => {
-  e.preventDefault();
-  var scrollOptions = {
-    left: leftInput.value,
-    top: topInput.value,
-    behavior: scrollInput.checked ? 'smooth' : 'auto'
-  }
-
-  window.scrollTo(scrollOptions);
-});
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSSOM View', '#dictdef-scrolltooptions', 'ScrollToOptions')}}{{Spec2('CSSOM View')}}
- -

ブラウザーの互換性

- -

{{Compat("api.ScrollToOptions", 10)}}

diff --git a/files/ja/conflicting/web/api/window/scroll/index.md b/files/ja/conflicting/web/api/window/scroll/index.md new file mode 100644 index 00000000000000..0ed65df71f402c --- /dev/null +++ b/files/ja/conflicting/web/api/window/scroll/index.md @@ -0,0 +1,63 @@ +--- +title: ScrollToOptions +slug: conflicting/Web/API/Window/scroll +tags: + - API + - CSSOM View + - Dictionary + - Reference + - ScrollToOptions + - 辞書 +translation_of: Web/API/ScrollToOptions +original_slug: Web/API/ScrollToOptions +--- +{{APIRef("CSSOM")}} + +The **`ScrollToOptions`** は CSSOM View 仕様の辞書で、ある要素がスクロールする位置、およびスクロールがスムーズに行われるかどうかを指定するプロパティを指定します。 + +`ScrollToOptions` 辞書は以下のメソッドの引数として提供することができます。 + +- {{domxref("Window.scroll()")}} +- {{domxref("Window.scrollBy()")}} +- {{domxref("Window.scrollTo()")}} +- {{domxref("Element.scroll()")}} +- {{domxref("Element.scrollBy()")}} +- {{domxref("Element.scrollTo()")}} + +## プロパティ + +- {{domxref("ScrollToOptions.top")}} + - : ウィンドウまたは要素をスクロールするための Y 軸に沿ったピクセル数を指定します。 +- {{domxref("ScrollToOptions.left")}} + - : ウィンドウまたは要素をスクロールするための X 軸に沿ったピクセル数を指定します。 +- {{domxref("ScrollToOptions.behavior")}} + - : スクロールするのに滑らかにアニメーションするのか、一回のジャンプで瞬時に行うのかを指定します。これは実際には `ScrollToOptions` で実装されている `ScrollOptions` 辞書で定義されています。 + +## 例 + +[scrolltooptions の例](https://github.com/mdn/dom-examples/tree/master/scrolltooptions) ([ライブでご覧ください](https://mdn.github.io/dom-examples/scrolltooptions/)) では、3 つの値を入力するフォームを用意しました。左と上のプロパティ (X 軸と Y 軸に沿ってスクロールする位置) を表す 2 つの数値と、滑らかなスクロールを有効にするかどうかを示すチェックボックスです。 + +フォームが送信されると、入力された値を ScrollToOptions 辞書に格納し、辞書を引数として渡して {{domxref("Window.ScrollTo()")}} メソッドを呼び出すイベントハンドラーが実行されます。 + +```js +form.addEventListener('submit', (e) => { + e.preventDefault(); + var scrollOptions = { + left: leftInput.value, + top: topInput.value, + behavior: scrollInput.checked ? 'smooth' : 'auto' + } + + window.scrollTo(scrollOptions); +}); +``` + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---- | +| {{SpecName('CSSOM View', '#dictdef-scrolltooptions', 'ScrollToOptions')}} | {{Spec2('CSSOM View')}} | | + +## ブラウザーの互換性 + +{{Compat("api.ScrollToOptions", 10)}} diff --git a/files/ja/conflicting/web/api/window/storage_event/index.html b/files/ja/conflicting/web/api/window/storage_event/index.html deleted file mode 100644 index 0b5c58ed3f8a23..00000000000000 --- a/files/ja/conflicting/web/api/window/storage_event/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: WindowEventHandlers.onstorage -slug: conflicting/Web/API/Window/storage_event -tags: - - API - - Event Handler - - Property - - Reference - - Web Storage - - WindowEventHandler -translation_of: Web/API/WindowEventHandlers/onstorage -original_slug: Web/API/WindowEventHandlers/onstorage ---- -
{{ ApiRef() }}
- -

{{domxref("WindowEventHandlers")}} ミックスインの onstorage プロパティは、storage イベントを処理するための {{event("Event_handlers", "event handler")}} です。

- -

storage イベントは、別のドキュメントのコンテキストでストレージ領域が変更されたときに発生します。

- -

構文

- -
 window.onstorage = functionRef;
- -

- -

functionRef は、関数名や関数式です。 この関数は、その唯一の引数として {{domxref("StorageEvent")}} を受け取ります。

- -

- -

この例では、別のドキュメントでストレージキーに対する値が変更されるたびに、それを記録します。

- -
window.onstorage = function(e) {
-  console.log('キー ' + e.key +
-    ' の値が ' + e.oldValue +
-    ' から ' + e.newValue + ' に変更されました。');
-};
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG','webappapis.html#handler-window-onstorage','onstorage')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.WindowEventHandlers.onstorage")}}

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/window/storage_event/index.md b/files/ja/conflicting/web/api/window/storage_event/index.md new file mode 100644 index 00000000000000..736b9a189bc62c --- /dev/null +++ b/files/ja/conflicting/web/api/window/storage_event/index.md @@ -0,0 +1,54 @@ +--- +title: WindowEventHandlers.onstorage +slug: conflicting/Web/API/Window/storage_event +tags: + - API + - Event Handler + - Property + - Reference + - Web Storage + - WindowEventHandler +translation_of: Web/API/WindowEventHandlers/onstorage +original_slug: Web/API/WindowEventHandlers/onstorage +--- +
{{ ApiRef() }}
+ +{{domxref("WindowEventHandlers")}} ミックスインの **`onstorage`** プロパティは、[`storage`](/ja/docs/Web/API/Window/storage_event) イベントを処理するための {{event("Event_handlers", "event handler")}} です。 + +`storage` イベントは、別のドキュメントのコンテキストでストレージ領域が変更されたときに発生します。 + +## 構文 + +``` + window.onstorage = functionRef; +``` + +### 値 + +`functionRef` は、関数名や[関数式](/ja/docs/Web/JavaScript/Reference/Operators/function)です。 この関数は、その唯一の引数として {{domxref("StorageEvent")}} を受け取ります。 + +## 例 + +この例では、別のドキュメントでストレージキーに対する値が変更されるたびに、それを記録します。 + +```js +window.onstorage = function(e) { + console.log('キー ' + e.key + + ' の値が ' + e.oldValue + + ' から ' + e.newValue + ' に変更されました。'); +}; +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG','webappapis.html#handler-window-onstorage','onstorage')}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザーの互換性 + +{{Compat("api.WindowEventHandlers.onstorage")}} + +## 関連情報 + +- [`Window: storage` イベント](/ja/docs/Web/API/Window/storage_event) diff --git a/files/ja/conflicting/web/api/window/unhandledrejection_event/index.html b/files/ja/conflicting/web/api/window/unhandledrejection_event/index.html deleted file mode 100644 index c28a0f22108c3b..00000000000000 --- a/files/ja/conflicting/web/api/window/unhandledrejection_event/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: WindowEventHandlers.onunhandledrejection -slug: conflicting/Web/API/Window/unhandledrejection_event -tags: - - API - - Event Handler - - HTML DOM - - Promises - - Property - - Reference - - WindowEventHandlers - - events - - onunhandledrejection -translation_of: Web/API/WindowEventHandlers/onunhandledrejection -original_slug: Web/API/WindowEventHandlers/onunhandledrejection ---- -
{{APIRef}}
- -

{{domxref("WindowEventHandlers")}} ミックスインの onunhandledrejection プロパティは、{{event("unhandledrejection")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、処理されなかった {{jsxref("Promise")}} 拒否に対して発生します。

- -

構文

- -
window.onunhandledrejection = function;
- -

- -

function は、ウィンドウが unhandledrejection イベントを受け取ったときに呼び出す {{event("Event_handlers", "event handler")}} または関数です。 イベントハンドラは、{{domxref("PromiseRejectionEvent")}} を入力パラメーターとして受け取ります。

- -

- -

この例では、処理されなかった拒否の reason 値を単にコンソールに記録します。

- -
window.onunhandledrejection = function(e) {
-  console.log(e.reason);
-}
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onunhandledrejection', 'onunhandledrejection')}}{{Spec2('HTML WHATWG')}}初期定義
- -

ブラウザーの互換性

- - - -

{{Compat("api.WindowEventHandlers.onunhandledrejection")}}

diff --git a/files/ja/conflicting/web/api/window/unhandledrejection_event/index.md b/files/ja/conflicting/web/api/window/unhandledrejection_event/index.md new file mode 100644 index 00000000000000..656074f8ca6d97 --- /dev/null +++ b/files/ja/conflicting/web/api/window/unhandledrejection_event/index.md @@ -0,0 +1,49 @@ +--- +title: WindowEventHandlers.onunhandledrejection +slug: conflicting/Web/API/Window/unhandledrejection_event +tags: + - API + - Event Handler + - HTML DOM + - Promises + - Property + - Reference + - WindowEventHandlers + - events + - onunhandledrejection +translation_of: Web/API/WindowEventHandlers/onunhandledrejection +original_slug: Web/API/WindowEventHandlers/onunhandledrejection +--- +{{APIRef}} + +{{domxref("WindowEventHandlers")}} ミックスインの **`onunhandledrejection`** プロパティは、{{event("unhandledrejection")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、処理されなかった {{jsxref("Promise")}} 拒否に対して発生します。 + +## 構文 + +``` +window.onunhandledrejection = function; +``` + +### 値 + +`function` は、ウィンドウが `unhandledrejection` イベントを受け取ったときに呼び出す {{event("Event_handlers", "event handler")}} または関数です。 イベントハンドラは、{{domxref("PromiseRejectionEvent")}} を入力パラメーターとして受け取ります。 + +## 例 + +この例では、処理されなかった拒否の `reason` 値を単にコンソールに記録します。 + +```js +window.onunhandledrejection = function(e) { + console.log(e.reason); +} +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onunhandledrejection', 'onunhandledrejection')}} | {{Spec2('HTML WHATWG')}} | 初期定義 | + +## ブラウザーの互換性 + +{{Compat("api.WindowEventHandlers.onunhandledrejection")}} diff --git a/files/ja/conflicting/web/api/window/unload_event/index.html b/files/ja/conflicting/web/api/window/unload_event/index.html deleted file mode 100644 index be5cb16e5b3af0..00000000000000 --- a/files/ja/conflicting/web/api/window/unload_event/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: WindowEventHandlers.onunload -slug: conflicting/Web/API/Window/unload_event -tags: - - API - - Event Handler - - HTML DOM - - MakeBrowserAgnostic - - Property - - Reference - - WindowEventHandlers -translation_of: Web/API/WindowEventHandlers/onunload -original_slug: Web/API/WindowEventHandlers/onunload ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("WindowEventHandlers")}} ミックスインの onunload プロパティは、{{Event("unload")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、ウィンドウがコンテンツとリソースをアンロードするときに発生します。 リソースの除去は、unload イベントが発生した後に処理されます。

- -
-

メモ: ポップアップブロッカーを備えたブラウザーは、onunload イベントハンドラ関数にあるすべての {{domxref("Window.open()")}} メソッドの呼び出しを無視します。

-
- -

構文

- -
window.addEventListener("unload", function(event) { ... });
-window.onunload = function(event) { ... };
-
- -

通常は、onunload の代わりに {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} と {{event("unload")}} イベントを使用することをお勧めします。

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-window-onunload', 'onunload')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.WindowEventHandlers.onunload")}}

- -

Firefox 1.5 では、ページでこのイベントハンドラを使用すると、ブラウザーがメモリ内の bfcache にページをキャッシュできなくなります。 詳細については、Firefox 1.5 のキャッシュの使用を参照してください。

diff --git a/files/ja/conflicting/web/api/window/unload_event/index.md b/files/ja/conflicting/web/api/window/unload_event/index.md new file mode 100644 index 00000000000000..4226cdcedbfaf2 --- /dev/null +++ b/files/ja/conflicting/web/api/window/unload_event/index.md @@ -0,0 +1,42 @@ +--- +title: WindowEventHandlers.onunload +slug: conflicting/Web/API/Window/unload_event +tags: + - API + - Event Handler + - HTML DOM + - MakeBrowserAgnostic + - Property + - Reference + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onunload +original_slug: Web/API/WindowEventHandlers/onunload +--- +{{APIRef("HTML DOM")}} + +{{domxref("WindowEventHandlers")}} ミックスインの **`onunload`** プロパティは、{{Event("unload")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、ウィンドウがコンテンツとリソースをアンロードするときに発生します。 リソースの除去は、`unload` イベントが発生した後に処理されます。 + +> **Note:** **メモ**: ポップアップブロッカーを備えたブラウザーは、`onunload` イベントハンドラ関数にあるすべての {{domxref("Window.open()")}} メソッドの呼び出しを無視します。 + +## 構文 + +``` +window.addEventListener("unload", function(event) { ... }); +window.onunload = function(event) { ... }; +``` + +通常は、`onunload` の代わりに {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} と {{event("unload")}} イベントを使用することをお勧めします。 + +## 仕様 + +| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', '#handler-window-onunload', 'onunload')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML5.1')}} | | +| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}} | {{Spec2('HTML5 W3C')}} | | + +## ブラウザーの互換性 + +{{Compat("api.WindowEventHandlers.onunload")}} + +Firefox 1.5 では、ページでこのイベントハンドラを使用すると、ブラウザーがメモリ内の bfcache にページをキャッシュできなくなります。 詳細については、[Firefox 1.5 のキャッシュの使用](/ja/Firefox/Releases/1.5/Using_Firefox_1.5_caching)を参照してください。 diff --git a/files/ja/conflicting/web/api/xmlhttprequest/loadend_event/index.html b/files/ja/conflicting/web/api/xmlhttprequest/loadend_event/index.html deleted file mode 100644 index 847109be6c2c33..00000000000000 --- a/files/ja/conflicting/web/api/xmlhttprequest/loadend_event/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: GlobalEventHandlers.onloadend -slug: conflicting/Web/API/XMLHttpRequest/loadend_event -tags: - - API - - Event Handler - - GlobalEventHandlers - - HTML DOM - - Property - - Reference - - Web - - events - - onloadend -translation_of: Web/API/GlobalEventHandlers/onloadend -original_slug: Web/API/GlobalEventHandlers/onloadend ---- -
{{ApiRef}}
- -

onloadend は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{domxref("XMLHttpRequest/loadend_event", "loadend")}} イベントが発行されたとき (リソースの読み取り中に進捗が停止したとき) に呼び出されるコードを表すイベントハンドラー ({{event("Event_handlers", "event handler")}}) です。

- -

構文

- -
img.onloadend = funcRef;
-
- -

- -

funcRef はリソースの loadend イベントが発行されたときに呼び出されるハンドラー関数です。

- -

- -

HTML

- -
<img src="myImage.jpg">
- -

JavaScript

- -
// 'loadstart' が最初に発行され、次に 'load'、その次に 'loadend'
-
-image.addEventListener('load', function(e) {
-  console.log('Image loaded');
-});
-
-image.addEventListener('loadstart', function(e) {
-  console.log('Image load started');
-});
-
-image.addEventListener('loadend', function(e) {
-  console.log('Image load finished');
-});
- -

ブラウザーの互換性

- -
-

{{Compat("api.GlobalEventHandlers.onloadend")}}

-
diff --git a/files/ja/conflicting/web/api/xmlhttprequest/loadend_event/index.md b/files/ja/conflicting/web/api/xmlhttprequest/loadend_event/index.md new file mode 100644 index 00000000000000..ebd9282ea5193e --- /dev/null +++ b/files/ja/conflicting/web/api/xmlhttprequest/loadend_event/index.md @@ -0,0 +1,59 @@ +--- +title: GlobalEventHandlers.onloadend +slug: conflicting/Web/API/XMLHttpRequest/loadend_event +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - Web + - events + - onloadend +translation_of: Web/API/GlobalEventHandlers/onloadend +original_slug: Web/API/GlobalEventHandlers/onloadend +--- +{{ApiRef}} + +**`onloadend`** は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{domxref("XMLHttpRequest/loadend_event", "loadend")}} イベントが発行されたとき (リソースの読み取り中に進捗が停止したとき) に呼び出されるコードを表すイベントハンドラー ({{event("Event_handlers", "event handler")}}) です。 + +## 構文 + +``` +img.onloadend = funcRef; +``` + +### 値 + +`funcRef` はリソースの `loadend` イベントが発行されたときに呼び出されるハンドラー関数です。 + +## 例 + +### HTML + +```html + +``` + +### JavaScript + +```js +// 'loadstart' が最初に発行され、次に 'load'、その次に 'loadend' + +image.addEventListener('load', function(e) { + console.log('Image loaded'); +}); + +image.addEventListener('loadstart', function(e) { + console.log('Image load started'); +}); + +image.addEventListener('loadend', function(e) { + console.log('Image load finished'); +}); +``` + +## ブラウザーの互換性 + +{{Compat("api.GlobalEventHandlers.onloadend")}} diff --git a/files/ja/conflicting/web/api/xrinputsource/handedness/index.html b/files/ja/conflicting/web/api/xrinputsource/handedness/index.html deleted file mode 100644 index 2a7c5bf066d3f4..00000000000000 --- a/files/ja/conflicting/web/api/xrinputsource/handedness/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: XRHandedness -slug: conflicting/Web/API/XRInputSource/handedness -tags: - - API - - AR - - Enum - - Enumerated Type - - Handedness - - Reference - - Type - - VR - - WebXR - - WebXR Device API - - XRHandedness - - hand - - left - - right -translation_of: Web/API/XRHandedness -original_slug: Web/API/XRHandedness ---- -

{{APIRef("WebXR")}}

- -

WebXR の XRHandedness 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 XRHandedness は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。

- -

- -
-
none
-
入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。
-
left
-
入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。
-
right
-
入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。
-
- -

- -

handedness の重要な使用方法の1つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手(またはその手が制御しているデバイス)の表現を描画できるようにすることです。

- -
function updateInputSources(session, frame, refSpace) {
-  for (let source of session.inputSources) {
-    if (source.gripSpace) {
-      let gripPose = frame.getPose(source.gripSpace, refSpace);
-
-      if (gripPose) {
-        myRenderHandObject(gripPose, inputSource.handedness);
-      }
-    }
-  }
-}
-
- -

この関数は、すべてのアニメーションフレーム(または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に)で呼ばれ、入力ソースのリストをスキャンして、null ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 gripSpace が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。

- -

gripSpacenull 以外の場合、この関数は、現在の参照空間に変換された gripSpace のポーズを取得します。 それが有効であると仮定すると、myRenderHandObject() と呼ばれる関数が、グリップのポーズと handedness の値を使用して呼び出されます。 これらの値が手元にあれば(しゃれは意図していません)、myRenderHandObject() は、正しい手のために配置および形成された適切なモデルを描画できます。

- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}}{{Spec2('WebXR')}}初期定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/xrinputsource/handedness/index.md b/files/ja/conflicting/web/api/xrinputsource/handedness/index.md new file mode 100644 index 00000000000000..87ea016a05757a --- /dev/null +++ b/files/ja/conflicting/web/api/xrinputsource/handedness/index.md @@ -0,0 +1,72 @@ +--- +title: XRHandedness +slug: conflicting/Web/API/XRInputSource/handedness +tags: + - API + - AR + - Enum + - Enumerated Type + - Handedness + - Reference + - Type + - VR + - WebXR + - WebXR Device API + - XRHandedness + - hand + - left + - right +translation_of: Web/API/XRHandedness +original_slug: Web/API/XRHandedness +--- +{{APIRef("WebXR")}} + +WebXR の **`XRHandedness`** 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 `XRHandedness` は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。 + +## 値 + +- `none` + - : 入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。 +- `left` + - : 入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。 +- `right` + - : 入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。 + +## 例 + +`handedness` の重要な使用方法の 1 つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手(またはその手が制御しているデバイス)の表現を描画できるようにすることです。 + +```js +function updateInputSources(session, frame, refSpace) { + for (let source of session.inputSources) { + if (source.gripSpace) { + let gripPose = frame.getPose(source.gripSpace, refSpace); + + if (gripPose) { + myRenderHandObject(gripPose, inputSource.handedness); + } + } + } +} +``` + +この関数は、すべてのアニメーションフレーム(または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に)で呼ばれ、入力ソースのリストをスキャンして、`null` ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 `gripSpace` が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。 + +`gripSpace` が `null` 以外の場合、この関数は、現在の参照空間に変換された `gripSpace` のポーズを取得します。 それが有効であると仮定すると、`myRenderHandObject()` と呼ばれる関数が、グリップのポーズと `handedness` の値を使用して呼び出されます。 これらの値が手元にあれば(しゃれは意図していません)、`myRenderHandObject()` は、正しい手のために配置および形成された適切なモデルを描画できます。 + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}} | {{Spec2('WebXR')}} | 初期定義 | + +## ブラウザーの互換性 + +{{Compat("api.XRHandedness")}} + +## 関連情報 + +- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) +- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs) +- [WebXR アプリケーションでのゲームパッドの使用](/ja/docs/Web/WebXR%20Device%20API/Gamepads) +- {{domxref("XREye")}}: ビューを表示する対象の目を示します diff --git a/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html b/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html deleted file mode 100644 index 821294fd1e17cc..00000000000000 --- a/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: XRTargetRayMode -slug: conflicting/Web/API/XRInputSource/targetRayMode -tags: - - 3D - - API - - AR - - Enum - - Enumerated Type - - Input - - Reality - - Reference - - Type - - VR - - Virtual - - WebXR - - WebXR API - - WebXR Device API - - XR - - XRTargetRayMode - - augmented - - source - - target -translation_of: Web/API/XRTargetRayMode -original_slug: Web/API/XRTargetRayMode ---- -

{{APIRef("WebXR")}}

- -

WebXR Device APIXRTargetRayMode 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。 ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。

- -

通常、ターゲット光線は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。

- -
-
-
ハンドコントローラーから放出されるターゲット光線。
-ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット
-
- -

ターゲット光線は、単純な線(理想的には距離とともにフェードする)から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。

- -

- -
-
gaze(視線)
-
ユーザーは、ユーザーが見ている方向を検出する視線追跡システム(または視線入力)を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。
-
screen(画面)
-
ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。
-
tracked-pointer(追跡ポインター)
-
ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手(または手の中のオブジェクト)からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。
-
- -

- -

このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 null 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。

- -

このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が tracked-pointer である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 myRenderTargetRayAsBeam() が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。

- -

コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。

- -
function updateInputSources(session, frame, refSpace) {
-  for (let source of session.getInputSources()) {
-    let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);
-
-    if (targetRayPose) {
-      if (source.targetRayMode == "tracked-pointer") {
-        myRenderTargetRayAsBeam(targetRayPose);
-      }
-    }
-
-    /* ... */
-  }
-}
-
- -

詳細とより完全な例については、入力と入力ソースの記事を参照してください。

- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}{{Spec2('WebXR')}}初期定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.md b/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.md new file mode 100644 index 00000000000000..ca400482230112 --- /dev/null +++ b/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.md @@ -0,0 +1,87 @@ +--- +title: XRTargetRayMode +slug: conflicting/Web/API/XRInputSource/targetRayMode +tags: + - 3D + - API + - AR + - Enum + - Enumerated Type + - Input + - Reality + - Reference + - Type + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRTargetRayMode + - augmented + - source + - target +translation_of: Web/API/XRTargetRayMode +original_slug: Web/API/XRTargetRayMode +--- +{{APIRef("WebXR")}} + +[WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) の **`XRTargetRayMode`** 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。 ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。 + +通常、**ターゲット光線**は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。 + +
ハンドコントローラーから放出されるターゲット光線。
+ +![ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット](https://mdn.mozillademos.org/files/17089/example-target-ray.gif) + +ターゲット光線は、単純な線(理想的には距離とともにフェードする)から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。 + +## 値 + +- `gaze`(視線) + - : ユーザーは、ユーザーが見ている方向を検出する視線追跡システム(または**視線入力**)を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。 +- `screen`(画面) + - : ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。 +- `tracked-pointer`(追跡ポインター) + - : ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手(または手の中のオブジェクト)からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。 + +## 例 + +このコードの断片は、フレームごとに 1 回呼び出される関数の一部を示しています。 `null` 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。 + +このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が `tracked-pointer` である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 `myRenderTargetRayAsBeam()` が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。 + +コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。 + +```js +function updateInputSources(session, frame, refSpace) { + for (let source of session.getInputSources()) { + let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace); + + if (targetRayPose) { + if (source.targetRayMode == "tracked-pointer") { + myRenderTargetRayAsBeam(targetRayPose); + } + } + + /* ... */ + } +} +``` + +詳細とより完全な例については、[入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs)の記事を参照してください。 + +## 仕様 + +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}} | {{Spec2('WebXR')}} | 初期定義 | + +## ブラウザーの互換性 + +{{Compat("api.XRTargetRayMode")}} + +## 関連情報 + +- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) +- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs) diff --git a/files/ja/conflicting/web/css/index.html b/files/ja/conflicting/web/css/index.html deleted file mode 100644 index b2f843444df3e1..00000000000000 --- a/files/ja/conflicting/web/css/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: ツール -slug: conflicting/Web/CSS -tags: - - CSS - - Guide - - NeedsUpdate - - ガイド -translation_of: Web/CSS/Tools -original_slug: Web/CSS/Tools ---- - - -

CSS は強力な機能を多数提供していますが、その中には使いこなすのが面倒だったり、引数が多かったりするので、作業をしながら視覚化できると便利です。このページでは、これらの機能を使ってコンテンツのスタイルを整えるための CSS を構築するのに役立つ便利なツールへのリンクをいくつか紹介しています。

- -

{{LandingPageListSubpages}}

- -

その他のツール

- -
    -
  • CSS アニメーション - Stylie
  • -
  • 端末のディスプレイ情報を調べる ({{Glossary("responsive web design")}} で役立ちます) - mydevice.io
  • -
  • CSS メニュー - cssmenumaker.com
  • -
  • 強力でモダンな CSS リンターで、一貫性のある規約を施行し、スタイルシートでのエラーを回避するのに役立ちます - stylelint
  • -
- -

関連情報

- - diff --git a/files/ja/conflicting/web/css/index.md b/files/ja/conflicting/web/css/index.md new file mode 100644 index 00000000000000..d9f2896ef89f9b --- /dev/null +++ b/files/ja/conflicting/web/css/index.md @@ -0,0 +1,25 @@ +--- +title: ツール +slug: conflicting/Web/CSS +tags: + - CSS + - Guide + - NeedsUpdate + - ガイド +translation_of: Web/CSS/Tools +original_slug: Web/CSS/Tools +--- +CSS は強力な機能を多数提供していますが、その中には使いこなすのが面倒だったり、引数が多かったりするので、作業をしながら視覚化できると便利です。このページでは、これらの機能を使ってコンテンツのスタイルを整えるための CSS を構築するのに役立つ便利なツールへのリンクをいくつか紹介しています。 + +{{LandingPageListSubpages}} + +## その他のツール + +- CSS アニメーション - [Stylie](http://jeremyckahn.github.io/stylie/) +- 端末のディスプレイ情報を調べる ({{Glossary("responsive web design")}} で役立ちます) - [mydevice.io](http://mydevice.io) +- CSS メニュー - [cssmenumaker.com](http://cssmenumaker.com/) +- 強力でモダンな CSS リンターで、一貫性のある規約を施行し、スタイルシートでのエラーを回避するのに役立ちます - [stylelint](https://stylelint.io/) + +## 関連情報 + +- [CSS](/ja/docs/Web/CSS) diff --git a/files/ja/conflicting/web/http/headers/feature-policy/xr-spatial-tracking/index.html b/files/ja/conflicting/web/http/headers/feature-policy/xr-spatial-tracking/index.html deleted file mode 100644 index 1695b9bdcc85b1..00000000000000 --- a/files/ja/conflicting/web/http/headers/feature-policy/xr-spatial-tracking/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: 'Feature-Policy: xr' -slug: conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking -translation_of: Web/HTTP/Headers/Feature-Policy/xr -original_slug: Web/HTTP/Headers/Feature-Policy/xr ---- -

{{HTTPSidebar}}

- -

この機能ポリシーディレクティブは、ある時点では xr として定義されていました (ただし Chrome では {{httpheader("Feature-Policy/vr", "vr")}} として実装されていました)。代わりに {{httpheader("Feature-Policy/xr-spatial-tracking", "xr-spatial-tracking")}} を使用してください。

diff --git a/files/ja/conflicting/web/http/headers/feature-policy/xr-spatial-tracking/index.md b/files/ja/conflicting/web/http/headers/feature-policy/xr-spatial-tracking/index.md new file mode 100644 index 00000000000000..4571385e263ffd --- /dev/null +++ b/files/ja/conflicting/web/http/headers/feature-policy/xr-spatial-tracking/index.md @@ -0,0 +1,9 @@ +--- +title: 'Feature-Policy: xr' +slug: conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking +translation_of: Web/HTTP/Headers/Feature-Policy/xr +original_slug: Web/HTTP/Headers/Feature-Policy/xr +--- +{{HTTPSidebar}} + +この機能ポリシーディレクティブは、ある時点では `xr` として定義されていました (ただし Chrome では {{httpheader("Feature-Policy/vr", "vr")}} として実装されていました)。代わりに {{httpheader("Feature-Policy/xr-spatial-tracking", "xr-spatial-tracking")}} を使用してください。 diff --git a/files/ja/conflicting/web/javascript/javascript_technologies_overview/index.html b/files/ja/conflicting/web/javascript/javascript_technologies_overview/index.html deleted file mode 100644 index fafee784902eb9..00000000000000 --- a/files/ja/conflicting/web/javascript/javascript_technologies_overview/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: JavaScript 言語情報 -slug: conflicting/Web/JavaScript/JavaScript_technologies_overview -tags: - - Advanced - - ECMA - - Guide - - JavaScript -translation_of: Web/JavaScript/Language_Resources -original_slug: Web/JavaScript/Language_Resources ---- -
{{JsSidebar}}
- -

ECMAScriptJavaScript の基礎を成すスクリプト言語です。ECMAScript は標準化団体 ECMA International によって ECMA-262 および ECMA-402 specifications として標準化されています。次のような ECMAScript 標準が承認済みおよび策定中です:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様の名称リンク策定日説明
最新のエディション
ECMA-262 9thEditionWorking draftリポジトリ2018 年ECMAScript 2018
ECMA-402 5thEditionWorking draftリポジトリ2018 年ECMAScript 2018 Internationalization API
廃止および歴代のエディション
ECMA-262 (ES 1)PDF1997 年 6 月最初の ECMAScript 標準
ECMA-262 (ES 2)PDF1998 年 8 月ECMAScript 標準の改訂 2 版。ISO 16262、JIS X 3060 でもある。
ECMA-262 (ES 3)PDF1999 年 12 月ECMAScript 標準の改訂 3 版。JavaScript 1.5 に相当する。
- 正誤表も参照のこと。
ECMA-262 (ES 5)PDF2009 年 12 月ECMAScript 5。
- ES5 正誤表 および Mozilla における ECMAScript 5 のサポート も併せて参照してください。
ECMA-357PDF2004 年 6 月ECMAScript for XML (E4X)
- E4X 正誤表 も併せて参照してください。
ECMA-357 Edition 2PDF2005 年 12 月ECMAScript for XML (E4X)
ECMA-262 (ES 5.1)PDFHTML2011 年 6 月このバージョンは完全に国際標準 ISO/IEC 16262:2011 第 3 版に適合しています。
- この標準には ES5 正誤表の修正が含まれており、新機能はありません。
ECMA-402 1.0PDFHTML2012 年 12 月ECMAScript Internationalization API 1.0
ECMA-262 2015 (ES 6)PDFHTML2015 年 6 月ECMAScript 2015 (第 6 版)
ECMA-402 2.0PDF2015 年 6 月ECMAScript Internationalization API 2.0
ECMA-262 2016 (ES 7)HTML2016 年 6 月ECMAScript 2016 (第 7 版)。機能は決定済み。年内 (6 月) に承認される予定です。
ECMA-402 3.0HTML2016 年 6 月ECMAScript Internationalization API 3.0。年内 (6 月) に承認される予定です。
ECMA-262 8thEditionHTML2017年 6月ECMAScript 2017 (第 8 版)
ECMA-402 4thEditionHTML2017年 6月ECMAScript 2017 Internationalization API Specification
- -

ES.Next は、執筆時点での次のバージョンを表す動的な名前です。 ES.Next 機能は、定義により仕様がまだ確定していないため、より正確には提案と呼ばれています。

- -

ECMAScript の歴史に関する詳しい情報は Wikipedia の ECMAScript の記事を参照してください。

- -

"Harmony" というコードネームが付けられた次の改訂版や ECMAScript Internationalization API 仕様への作業は、ecmascript.org からリンクされた公開 wiki や es-discuss メーリングリスト を通じて参加したり追跡することができます。

- -

実装

- -
    -
  • SpiderMonkey - Firefox などの Mozilla 製品で使われている JavaScript エンジン
  • -
  • Rhino - Java で書かれた JavaScript エンジン
  • -
  • Tamarin - ActionScript 仮想マシン (Adobe® Flash® Player で使われている)
  • -
  • その他の実装 (Wikipedia)
  • -
- -

関連情報

- - diff --git a/files/ja/conflicting/web/javascript/javascript_technologies_overview/index.md b/files/ja/conflicting/web/javascript/javascript_technologies_overview/index.md new file mode 100644 index 00000000000000..b0820b2a235de0 --- /dev/null +++ b/files/ja/conflicting/web/javascript/javascript_technologies_overview/index.md @@ -0,0 +1,250 @@ +--- +title: JavaScript 言語情報 +slug: conflicting/Web/JavaScript/JavaScript_technologies_overview +tags: + - Advanced + - ECMA + - Guide + - JavaScript +translation_of: Web/JavaScript/Language_Resources +original_slug: Web/JavaScript/Language_Resources +--- +{{JsSidebar}} + +**ECMAScript** は [JavaScript](/ja/docs/JavaScript) の基礎を成すスクリプト言語です。ECMAScript は標準化団体 [ECMA International](http://www.ecma-international.org/) によって **ECMA-262 および ECMA-402 specifications** として標準化されています。次のような ECMAScript 標準が承認済みおよび策定中です: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様の名称リンク策定日説明
最新のエディション
ECMA-262 9thEdition + Working draftリポジトリ + 2018 年ECMAScript 2018
ECMA-402 5thEdition + Working draftリポジトリ + 2018 年ECMAScript 2018 Internationalization API
廃止および歴代のエディション
ECMA-262 (ES 1) + PDF + 1997 年 6 月最初の ECMAScript 標準
ECMA-262 (ES 2) + PDF + 1998 年 8 月ECMAScript 標準の改訂 2 版。ISO 16262、JIS X 3060 でもある。
ECMA-262 (ES 3) + PDF + 1999 年 12 月 + ECMAScript 標準の改訂 3 版。JavaScript 1.5 に相当する。
正誤表も参照のこと。 +
ECMA-262 (ES 5) + PDF + 2009 年 12 月 + ECMAScript 5。
ES5 正誤表 + および + Mozilla における ECMAScript 5 のサポート + も併せて参照してください。 +
ECMA-357 + PDF + 2004 年 6 月 + ECMAScript for XML (E4X)
E4X 正誤表 + も併せて参照してください。 +
ECMA-357 Edition 2 + PDF + 2005 年 12 月ECMAScript for XML (E4X)
ECMA-262 (ES 5.1) + PDFHTML + 2011 年 6 月 + このバージョンは完全に国際標準 + ISO/IEC 16262:2011 + 第 3 版に適合しています。
この標準には ES5 + 正誤表の修正が含まれており、新機能はありません。 +
ECMA-402 1.0 + PDFHTML + 2012 年 12 月ECMAScript Internationalization API 1.0
ECMA-262 2015 (ES 6) + PDFHTML + 2015 年 6 月ECMAScript 2015 (第 6 版)
ECMA-402 2.0 + PDF + 2015 年 6 月ECMAScript Internationalization API 2.0
ECMA-262 2016 (ES 7)HTML2016 年 6 月 + ECMAScript 2016 (第 7 版)。機能は決定済み。年内 (6 月) + に承認される予定です。 +
ECMA-402 3.0HTML2016 年 6 月 + ECMAScript Internationalization API 3.0。年内 (6 月) + に承認される予定です。 +
ECMA-262 8thEdition + HTML + 2017年 6月ECMAScript 2017 (第 8 版)
ECMA-402 4thEdition + HTML + 2017年 6月ECMAScript 2017 Internationalization API Specification
+ +**ES.Next** は、執筆時点での次のバージョンを表す動的な名前です。 ES.Next 機能は、定義により仕様がまだ確定していないため、より正確には提案と呼ばれています。 + +ECMAScript の歴史に関する詳しい情報は [Wikipedia の ECMAScript の記事](http://en.wikipedia.org/wiki/ECMAScript)を参照してください。 + +"Harmony" というコードネームが付けられた次の改訂版や ECMAScript Internationalization API 仕様への作業は、[ecmascript.org](http://www.ecmascript.org/community.php) からリンクされた公開 wiki や [es-discuss メーリングリスト](https://mail.mozilla.org/listinfo/es-discuss) を通じて参加したり追跡することができます。 + +## 実装 + +- [SpiderMonkey](/ja/docs/SpiderMonkey "SpiderMonkey") - Firefox などの Mozilla 製品で使われている JavaScript エンジン +- [Rhino](/ja/docs/Rhino "Rhino") - Java で書かれた JavaScript エンジン +- [Tamarin](/ja/docs/Tamarin "Tamarin") - ActionScript 仮想マシン (Adobe® Flash® Player で使われている) +- [その他の実装](http://en.wikipedia.org/wiki/List_of_ECMAScript_engines) (Wikipedia) + +## 関連情報 + +- [ブレンダン・アイク (Brendan Eich) のブログ](http://brendaneich.com/)。ブレンダンは JavaScript と JS エンジン SpiderMonkey の作者であり、現在もこの言語を発展させるべく ECMA ワーキンググループとともに活動しています。 +- [Dmitry Soshnikov による ECMA-262 Edition 3 と 5 の分析](http://dmitrysoshnikov.com/) diff --git a/files/ja/conflicting/web/javascript/reference/errors/unexpected_type/index.html b/files/ja/conflicting/web/javascript/reference/errors/unexpected_type/index.html deleted file mode 100644 index d90b6e33471c56..00000000000000 --- a/files/ja/conflicting/web/javascript/reference/errors/unexpected_type/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 'TypeError: can''t access property "x" of "y"' -slug: conflicting/Web/JavaScript/Reference/Errors/Unexpected_type -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_access_property -original_slug: Web/JavaScript/Reference/Errors/Cant_access_property ---- -
{{jsSidebar("Errors")}}
- -

JavaScript の例外 "can't access property" は、 {{jsxref("undefined")}} または {{jsxref("null")}} の値に対してプロパティのアクセスが行われた場合に発生します。

- -

エラーメッセージ

- -
TypeError: Unable to get property {x} of undefined or null reference (Edge)
-TypeError: can't access property {x} of {y} (Firefox)
-TypeError: {y} is undefined, can't access property {x} of it (Firefox)
-TypeError: {y} is null, can't access property {x} of it (Firefox)
-
-例:
-TypeError: x is undefined, can't access property "prop" of it
-TypeError: x is null, can't access property "prop" of it
-TypeError: can't access property "prop" of undefined
-TypeError: can't access property "prop" of null
-
- -

エラーの種類

- -

{{jsxref("TypeError")}}

- -

エラーの原因

- -

{{jsxref("undefined")}} か {{jsxref("null")}} に対してプロパティアクセスを行いました。

- -

- -

無効な場合

- -
// undefined and null cases on which the substring method won't work
-var foo = undefined;
-foo.substring(1); // TypeError: x is undefined, can't access property "substring" of it
-
-var foo = null;
-foo.substring(1); // TypeError: x is null, can't access property "substring" of it
-
- -

問題の修正

- -

undefinednull のヌルポインターアクセスを修正するには、たとえば typeof 演算子を使用することができます。

- -
if (typeof foo !== 'undefined') {
-  // Now we know that foo is defined, we are good to go.
-}
- -

関連情報

- -
    -
  • {{jsxref("undefined")}}
  • -
  • {{jsxref("null")}}
  • -
diff --git a/files/ja/conflicting/web/javascript/reference/errors/unexpected_type/index.md b/files/ja/conflicting/web/javascript/reference/errors/unexpected_type/index.md new file mode 100644 index 00000000000000..8038e8a82e8ba9 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/errors/unexpected_type/index.md @@ -0,0 +1,65 @@ +--- +title: 'TypeError: can''t access property "x" of "y"' +slug: conflicting/Web/JavaScript/Reference/Errors/Unexpected_type +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cant_access_property +original_slug: Web/JavaScript/Reference/Errors/Cant_access_property +--- +{{jsSidebar("Errors")}} + +JavaScript の例外 "can't access property" は、 {{jsxref("undefined")}} または {{jsxref("null")}} の値に対してプロパティのアクセスが行われた場合に発生します。 + +## エラーメッセージ + +```js +TypeError: Unable to get property {x} of undefined or null reference (Edge) +TypeError: can't access property {x} of {y} (Firefox) +TypeError: {y} is undefined, can't access property {x} of it (Firefox) +TypeError: {y} is null, can't access property {x} of it (Firefox) + +例: +TypeError: x is undefined, can't access property "prop" of it +TypeError: x is null, can't access property "prop" of it +TypeError: can't access property "prop" of undefined +TypeError: can't access property "prop" of null +``` + +## エラーの種類 + +{{jsxref("TypeError")}} + +## エラーの原因 + +{{jsxref("undefined")}} か {{jsxref("null")}} に対してプロパティアクセスを行いました。 + +## 例 + +### 無効な場合 + +```js example-bad +// undefined and null cases on which the substring method won't work +var foo = undefined; +foo.substring(1); // TypeError: x is undefined, can't access property "substring" of it + +var foo = null; +foo.substring(1); // TypeError: x is null, can't access property "substring" of it +``` + +### 問題の修正 + +`undefined` か `null` のヌルポインターアクセスを修正するには、たとえば [typeof](/ja/docs/Web/JavaScript/Reference/Operators/typeof) 演算子を使用することができます。 + +```js +if (typeof foo !== 'undefined') { + // Now we know that foo is defined, we are good to go. +} +``` + +## 関連情報 + +- {{jsxref("undefined")}} +- {{jsxref("null")}} diff --git a/files/ja/conflicting/web/security/certificate_transparency/index.html b/files/ja/conflicting/web/security/certificate_transparency/index.html deleted file mode 100644 index 65623fec465655..00000000000000 --- a/files/ja/conflicting/web/security/certificate_transparency/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: HTTP Public Key Pinning (HPKP) -slug: conflicting/Web/Security/Certificate_Transparency -tags: - - Deprecated - - Guide - - HPKP - - HTTP - - Obsolete - - Security -translation_of: Web/HTTP/Public_Key_Pinning -original_slug: Web/HTTP/Public_Key_Pinning ---- -

{{HTTPSidebar}}{{deprecated_header}}

- -
注: Public Key Pinning の仕組みは Certificate Transparency および {{HTTPHeader("Expect-CT")}} ヘッダーに置き換えられ、非推奨になりました。
- -

HTTP Public Key Pinning ({{Glossary("HPKP")}}) は、ウェブクライアントに特定の公開鍵をあるウェブサーバーに関連付けさせることで、偽造された証明書による{{Glossary("MITM", "中間者攻撃")}}のリスクを減少させるためのセキュリティ機能でした。これは最近のブラウザーでは削除され、対応がなくなりました。

- -

{{Glossary("TLS")}} セッションで用いられるサーバーの公開鍵の真正性を担保するため、通常その公開鍵は認証局 ({{GLossary("CA")}}) の証明書でラップされます。ブラウザーなどのウェブクライアントがこれらの認証局を信頼することで、認証局は任意のドメイン名に対する証明書を作成できます。攻撃者が1つの認証局を危殆化させることができれば、様々な TLS コネクションで中間者攻撃を仕掛けることが可能になってしまいます。 HPKP はこの {{Glossary("HTTPS")}} プロトコルへの脅威を、そのウェブサーバーにどの公開鍵が所属するのかをクライアントに伝えることで回避することができます。

- -

HPKP は Trust on First Use ({{Glossary("TOFU")}}) 技術の1つです。 HPKP の HTTP ヘッダーがウェブサーバーからクライアントへ最初に送信されて以降、そのウェブサーバーに紐付く公開鍵はクライアントで一定期間記憶されます。クライアントが再びそのサーバーを訪れた際は、既に HPKP で記憶したフィンガープリントと一致する公開鍵が、証明書チェインにおいて最低 1 つの証明書に含まれていることを確認します。そのサーバーから送信されてきた公開鍵が不明なものだった場合、クライアントはユーザーに警告を表示します。

- -

Firefox および Chrome は、認証された証明書チェーンが (内蔵の証明書ではなく) ユーザー定義の証明書であった場合、ピン留めによる認証を無効化します。つまり、独自のルート証明書をインポートしたユーザーに対しては、ピン留めによる警告が表示されません。

- -

HPKP の有効化

- -

サイトでこの機能を有効化するには、サイトに HTTPS でアクセスされたとに、 HTTP の {{HTTPHeader("Public-Key-Pins")}} ヘッダーを返す必要があります。

- -
Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubDomains][; report-uri="reportURI"]
- -
-
pin-sha256
-
二重引用符で囲まれた文字列で、 Base64 符号化された Subject Public Key Information ({{Glossary("SPKI")}}) のフィンガープリントです。異なる公開鍵に対する複数のピンを指定することが出来ます。将来のブラウザーでは SHA-256 以外のハッシュアルゴリズムが許容されるかもしれません。証明書や鍵ファイルからこの情報を抽出する方法は次の項で説明します。
-
max-age
-
このサイトへのアクセス時に必要となる(唯一ピン留めされた)鍵について、この鍵をブラウザーが記憶するべき時間を指定します。この値は秒単位で表現します。
-
includeSubDomains {{optional_inline}}
-
このパラメータは省略可能です。サイトにおけるすべてのサブドメインにもこのルールが適用されます。
-
report-uri {{optional_inline}}
-
このパラメータは省略可能です。ピンの検証に失敗した際に、失敗した旨を報告する URL を指定します。
-
- -
-

: 現在の仕様では、本番系で運用されていないバックアップ用の第2のピンを指定することが必須になっています。これにより、既にピンを持っているクライアントからのアクセス性を損なうことなく、サーバの公開鍵を変更することが可能になります。例えば、本番系の鍵が危殆化したときなどに重要となります。

-
- -

Base64 エンコードされた公開鍵情報を抽出するには

- -
-

注: 以下の例ではサーバ証明書をピン留めする方法を説明していますが、証明書の更新やローテーションを容易にするため、サーバ証明書を発行した CA の中間証明書もピン留めすることを推奨します。

-
- -

まずは証明書や鍵ファイルから公開鍵情報を抽出し、それを Base64 でエンコードする必要があります。

- -

次に示す便利なコマンドで、鍵ファイルや証明書署名要求 (CSR)、または証明書から Base64 エンコードされた情報を抽出できます。

- -
openssl rsa -in my-rsa-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64
- -
openssl ec -in my-ecc-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64
- -
openssl req -in my-signing-request.csr -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
- -
openssl x509 -in my-certificate.crt -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
- -

以下のコマンドを用いると、ウェブサイト向けに情報を抽出することができます。

- -
openssl s_client -servername www.example.com -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
- -

HPKP ヘッダーの例

- -
Public-Key-Pins:
-  pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=";
-  pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=";
-  max-age=5184000; includeSubDomains;
-  report-uri="https://www.example.org/hpkp-report"
- -

この例では、 pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=" で本番系で使用されるサーバーの公開鍵をピン止めします。2番目のピン宣言である pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=" も、バックアップキーをピン止めします。 max-age=5184000 はクライアントにこの情報を2か月間保存するように伝え、これは IETF RFC によれば合理的な期間です。このキーのピン止めは、 includeSubDomains 宣言で指示されているように、すべてのサブドメインでも有効です。最後に、 report-uri="https://www.example.net/hpkp-report" はピンの検証の失敗を報告する場所を説明します。

- -

Report-Only ヘッダー

- -

{{HTTPHeader("Public-Key-Pins")}} ヘッダーを用いる代わりに、 {{HTTPHeader("Public-Key-Pins-Report-Only")}} ヘッダーを利用することも可能です。このヘッダーを用いた場合、ピン留めの認証に失敗した場合でも指定した report-uri にレポートが送信されるのみで、ブラウザーがウェブサーバーへ接続することは可能となります。

- -

HPKP ヘッダーを送信するためのウェブサーバーの設定

- -

HPKP ヘッダーを送信するのに必要な具体的な手順はウェブサーバーによって異なります。

- -
-

注: 以下の例では、2か月間の max-age と includeSubDomains を指定しています。自身のサーバに合った適切な設定をしてください。

-
- -
-

HPKP の設定を間違えると、ユーザーが長期間接続できなくなってしまう可能性があります!バックアップの証明書を用意したり、CA の証明書をピン留めすることを推奨します。

-
- -

Apache

- -

次のような行をウェブサーバーの config に追加すると Apache で HPKP が有効になります。 mod_headers モジュールがインストールされている必要があります。

- -
Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains"
- -

Nginx

- -

次のような行を追加し、適切な pin-sha256="..." の値を設定すると nginx で HPKP が有効になります。 ngx_http_headers_module がインストールされている必要があります。

- -
add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains' always;
- -

Lighttpd

- -

鍵に関する次のような情報 (pin-sha256="..." フィールド) を含む行を追加すると、 lighttpd で HPKP が有効になります。

- -
setenv.add-response-header  = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains")
- -

注: 以下のように server.module で mod_setenv をあらかじめ読み込んでおく必要があります。

- -
server.modules += ( "mod_setenv" )
- -

IIS

- -

IIS から Public-Key-Pins ヘッダーを送信するには、以下のような数行を Web.config ファイルに追加してください。

- -
<system.webServer>
-  ...
-
-  <httpProtocol>
-    <customHeaders>
-      <add name="Public-Key-Pins" value="pin-sha256=&quot;base64+primary==&quot;; pin-sha256=&quot;base64+backup==&quot;; max-age=5184000; includeSubDomains" />
-    </customHeaders>
-  </httpProtocol>
-
-  ...
-</system.webServer>
-
- -

仕様書

- - - - - - - - - - - - - - -
仕様書題名
{{RFC("7469", "Public-Key-Pins", "2.1")}}Public Key Pinning Extension for HTTP
- -

ブラウザーの互換性

- -

{{Compat("http.headers.Public-Key-Pins")}}

- -

関連情報

- -
    -
  • {{HTTPHeader("Public-Key-Pins")}}
  • -
  • {{HTTPHeader("Public-Key-Pins-Report-Only")}}
  • -
  • Browser test site: HSTS and HPKP test
  • -
  • {{HTTPHeader("Expect-CT")}}
  • -
diff --git a/files/ja/conflicting/web/security/certificate_transparency/index.md b/files/ja/conflicting/web/security/certificate_transparency/index.md new file mode 100644 index 00000000000000..127690906fc994 --- /dev/null +++ b/files/ja/conflicting/web/security/certificate_transparency/index.md @@ -0,0 +1,162 @@ +--- +title: HTTP Public Key Pinning (HPKP) +slug: conflicting/Web/Security/Certificate_Transparency +tags: + - Deprecated + - Guide + - HPKP + - HTTP + - Obsolete + - Security +translation_of: Web/HTTP/Public_Key_Pinning +original_slug: Web/HTTP/Public_Key_Pinning +--- +{{HTTPSidebar}}{{deprecated_header}} + +> **Note:** **注:** Public Key Pinning の仕組みは [Certificate Transparency](/ja/docs/Web/Security/Certificate_Transparency) および {{HTTPHeader("Expect-CT")}} ヘッダーに置き換えられ、非推奨になりました。 + +**HTTP Public Key Pinning** ({{Glossary("HPKP")}}) は、ウェブクライアントに特定の公開鍵をあるウェブサーバーに関連付けさせることで、偽造された証明書による{{Glossary("MITM", "中間者攻撃")}}のリスクを減少させるためのセキュリティ機能でした。これは最近のブラウザーでは削除され、対応がなくなりました。 + +{{Glossary("TLS")}} セッションで用いられるサーバーの公開鍵の真正性を担保するため、通常その公開鍵は認証局 ({{GLossary("CA")}}) の証明書でラップされます。ブラウザーなどのウェブクライアントがこれらの認証局を信頼することで、認証局は任意のドメイン名に対する証明書を作成できます。攻撃者が 1 つの認証局を危殆化させることができれば、様々な TLS コネクションで中間者攻撃を仕掛けることが可能になってしまいます。 HPKP はこの {{Glossary("HTTPS")}} プロトコルへの脅威を、そのウェブサーバーにどの公開鍵が所属するのかをクライアントに伝えることで回避することができます。 + +HPKP は _Trust on First Use_ ({{Glossary("TOFU")}}) 技術の 1 つです。 HPKP の HTTP ヘッダーがウェブサーバーからクライアントへ最初に送信されて以降、そのウェブサーバーに紐付く公開鍵はクライアントで一定期間記憶されます。クライアントが再びそのサーバーを訪れた際は、既に HPKP で記憶したフィンガープリントと一致する公開鍵が、証明書チェインにおいて最低 1 つの証明書に含まれていることを確認します。そのサーバーから送信されてきた公開鍵が不明なものだった場合、クライアントはユーザーに警告を表示します。 + +> **Note:** Firefox および Chrome は、認証された証明書チェーンが (内蔵の証明書ではなく) **ユーザー定義の証明書**であった場合、**ピン留めによる認証を無効化します**。つまり、独自のルート証明書をインポートしたユーザーに対しては、ピン留めによる警告が表示されません。 + +## HPKP の有効化 + +サイトでこの機能を有効化するには、サイトに HTTPS でアクセスされたとに、 HTTP の {{HTTPHeader("Public-Key-Pins")}} ヘッダーを返す必要があります。 + +``` +Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubDomains][; report-uri="reportURI"] +``` + +- `pin-sha256` + - : 二重引用符で囲まれた文字列で、 Base64 符号化された _Subject Public Key Information_ ({{Glossary("SPKI")}}) のフィンガープリントです。異なる公開鍵に対する複数のピンを指定することが出来ます。将来のブラウザーでは SHA-256 以外のハッシュアルゴリズムが許容されるかもしれません。証明書や鍵ファイルからこの情報を抽出する方法は次の項で説明します。 +- `max-age` + - : このサイトへのアクセス時に必要となる(唯一ピン留めされた)鍵について、この鍵をブラウザーが記憶するべき時間を指定します。この値は秒単位で表現します。 +- `includeSubDomains` {{optional_inline}} + - : このパラメータは省略可能です。サイトにおけるすべてのサブドメインにもこのルールが適用されます。 +- `report-uri` {{optional_inline}} + - : このパラメータは省略可能です。ピンの検証に失敗した際に、失敗した旨を報告する URL を指定します。 + +> **Note:** **注**: 現在の仕様では、本番系で運用されていないバックアップ用の第 2 のピンを指定することが必須になっています。これにより、既にピンを持っているクライアントからのアクセス性を損なうことなく、サーバの公開鍵を変更することが可能になります。例えば、本番系の鍵が危殆化したときなどに重要となります。 + +### Base64 エンコードされた公開鍵情報を抽出するには + +> **Note:** **注:** 以下の例ではサーバ証明書をピン留めする方法を説明していますが、証明書の更新やローテーションを容易にするため、サーバ証明書を発行した CA の中間証明書もピン留めすることを推奨します。 + +まずは証明書や鍵ファイルから公開鍵情報を抽出し、それを Base64 でエンコードする必要があります。 + +次に示す便利なコマンドで、鍵ファイルや証明書署名要求 (CSR)、または証明書から Base64 エンコードされた情報を抽出できます。 + +``` +openssl rsa -in my-rsa-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64 +``` + +``` +openssl ec -in my-ecc-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64 +``` + +``` +openssl req -in my-signing-request.csr -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 +``` + +``` +openssl x509 -in my-certificate.crt -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 +``` + +以下のコマンドを用いると、ウェブサイト向けに情報を抽出することができます。 + +``` +openssl s_client -servername www.example.com -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 +``` + +### HPKP ヘッダーの例 + +``` +Public-Key-Pins: + pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; + pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; + max-age=5184000; includeSubDomains; + report-uri="https://www.example.org/hpkp-report" +``` + +この例では、 **pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="** で本番系で使用されるサーバーの公開鍵をピン止めします。2番目のピン宣言である **pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="** も、バックアップキーをピン止めします。 **max-age=5184000** はクライアントにこの情報を2か月間保存するように伝え、これは IETF RFC によれば合理的な期間です。このキーのピン止めは、 **includeSubDomains** 宣言で指示されているように、すべてのサブドメインでも有効です。最後に、 **report-uri="https\://www\.example.net/hpkp-report"** はピンの検証の失敗を報告する場所を説明します。 + +### Report-Only ヘッダー + +{{HTTPHeader("Public-Key-Pins")}} ヘッダーを用いる代わりに、 {{HTTPHeader("Public-Key-Pins-Report-Only")}} ヘッダーを利用することも可能です。このヘッダーを用いた場合、ピン留めの認証に失敗した場合でも指定した report-uri にレポートが送信されるのみで、ブラウザーがウェブサーバーへ接続することは可能となります。 + +### HPKP ヘッダーを送信するためのウェブサーバーの設定 + +HPKP ヘッダーを送信するのに必要な具体的な手順はウェブサーバーによって異なります。 + +> **Note:** **注:** 以下の例では、2 か月間の max-age と includeSubDomains を指定しています。自身のサーバに合った適切な設定をしてください。 + +> **Warning:** HPKP の設定を間違えると、ユーザーが長期間接続できなくなってしまう可能性があります!バックアップの証明書を用意したり、CA の証明書をピン留めすることを推奨します。 + +#### Apache + +次のような行をウェブサーバーの config に追加すると Apache で HPKP が有効になります。 `mod_headers` モジュールがインストールされている必要があります。 + +``` +Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains" +``` + +#### Nginx + +次のような行を追加し、適切な `pin-sha256="..."` の値を設定すると nginx で HPKP が有効になります。 `ngx_http_headers_module` がインストールされている必要があります。 + +``` +add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains' always; +``` + +#### Lighttpd + +鍵に関する次のような情報 (pin-sha256="..." フィールド) を含む行を追加すると、 lighttpd で HPKP が有効になります。 + +``` +setenv.add-response-header = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains") +``` + +**注:** 以下のように server.module で `mod_setenv` をあらかじめ読み込んでおく必要があります。 + +``` +server.modules += ( "mod_setenv" ) +``` + +#### IIS + +IIS から `Public-Key-Pins` ヘッダーを送信するには、以下のような数行を Web.config ファイルに追加してください。 + +```xml + + ... + + + + + + + + ... + +``` + +## 仕様書 + +| 仕様書 | 題名 | +| -------------------------------------------------------- | ------------------------------------- | +| {{RFC("7469", "Public-Key-Pins", "2.1")}} | Public Key Pinning Extension for HTTP | + +## ブラウザーの互換性 + +{{Compat("http.headers.Public-Key-Pins")}} + +## 関連情報 + +- {{HTTPHeader("Public-Key-Pins")}} +- {{HTTPHeader("Public-Key-Pins-Report-Only")}} +- Browser test site: [HSTS and HPKP test](https://projects.dm.id.lv/Public-Key-Pins_test) +- {{HTTPHeader("Expect-CT")}} diff --git a/files/ja/conflicting/web/svg/element/animate/index.html b/files/ja/conflicting/web/svg/element/animate/index.html deleted file mode 100644 index 27dc40aa87e350..00000000000000 --- a/files/ja/conflicting/web/svg/element/animate/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: animateColor -slug: conflicting/Web/SVG/Element/animate -tags: - - Deprecated - - Element - - SVG - - SVG Animation -translation_of: Web/SVG/Element/animateColor -original_slug: Web/SVG/Element/animateColor ---- -
{{SVGRef}}{{deprecated_header}}
- -
-

この要素はSVG1.1仕様(第2版)で廃止され、将来のSVGのバージョンで削除される可能性があります。 この要素は {{ SVGElement("animate") }} 要素に置き換えられ、FirefoxやInternet Explorerでは実装されておりません。SVGファイル製作者はこの要素の代わりに{{ SVGElement("animate") }}要素を使うべきです。

-
- -

概要

- -

animateColor要素は時間経過による色の変換を指定します。

- -

使用可能な場所

- -

{{svginfo}}

- -

- -

» animateColor.svg

- -

属性

- -

グローバル属性

- - - -

専用属性

- -
    -
  • {{ SVGAttr("by") }}
  • -
  • {{ SVGAttr("from") }}
  • -
  • {{ SVGAttr("to") }}
  • -
- -

DOM インターフェース

- -

この要素は SVGAnimateColorElement インターフェースを提供します。

- -

仕様

- - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName("SVG1.1", "animate.html#AnimateColorElement", "<animateColor>")}}{{Spec2("SVG1.1")}}最初の定義
- -

ブラウザー互換性

- - - -

{{Compat("svg.elements.animateColor")}}

- -

関連情報

- -
    -
  • {{ SVGElement("animate") }}
  • -
diff --git a/files/ja/conflicting/web/svg/element/animate/index.md b/files/ja/conflicting/web/svg/element/animate/index.md new file mode 100644 index 00000000000000..6887a2418ab0af --- /dev/null +++ b/files/ja/conflicting/web/svg/element/animate/index.md @@ -0,0 +1,64 @@ +--- +title: animateColor +slug: conflicting/Web/SVG/Element/animate +tags: + - Deprecated + - Element + - SVG + - SVG Animation +translation_of: Web/SVG/Element/animateColor +original_slug: Web/SVG/Element/animateColor +--- +{{SVGRef}}{{deprecated_header}} + +> **Warning:** この要素は SVG1.1 仕様(第 2 版)で廃止され、将来の SVG のバージョンで削除される可能性があります。 この要素は {{ SVGElement("animate") }} 要素に置き換えられ、Firefox や Internet Explorer では実装されておりません。SVG ファイル製作者はこの要素の代わりに{{ SVGElement("animate") }}要素を使うべきです。 + +## 概要 + +`animateColor`要素は時間経過による色の変換を指定します。 + +## 使用可能な場所 + +{{svginfo}} + +## 例 + +» [animateColor.svg](/files/3264/animateColor.svg) + +## 属性 + +### グローバル属性 + +- [条件処理属性](/ja/docs/Web/SVG/Attribute#ConditionalProcessing) » +- [コア属性](/ja/docs/Web/SVG/Attribute#Core) » +- [アニメーションイベント属性](/ja/docs/Web/SVG/Attribute#AnimationEvent) » +- [Xlink 属性](/ja/docs/Web/SVG/Attribute#XLink) » +- [Animation attribute target attributes](/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget) » +- [アニメーションタイミング属性](/ja/docs/Web/SVG/Attribute#AnimationTiming) » +- [Animation value attributes](/ja/docs/Web/SVG/Attribute#AnimationValue) » +- [Animation addition attributes](/ja/docs/Web/SVG/Attribute#AnimationAddition) » +- {{ SVGAttr("externalResourcesRequired") }} + +### 専用属性 + +- {{ SVGAttr("by") }} +- {{ SVGAttr("from") }} +- {{ SVGAttr("to") }} + +## DOM インターフェース + +この要素は [`SVGAnimateColorElement`](/ja/docs/DOM/SVGAnimateColorElement "en/DOM/SVGAnimateColorElement") インターフェースを提供します。 + +## 仕様 + +| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------------------ | ------------------------ | ---------- | +| {{SpecName("SVG1.1", "animate.html#AnimateColorElement", "<animateColor>")}} | {{Spec2("SVG1.1")}} | 最初の定義 | + +## ブラウザー互換性 + +{{Compat("svg.elements.animateColor")}} + +## 関連情報 + +- {{ SVGElement("animate") }} diff --git a/files/ja/conflicting/web/web_components/index.html b/files/ja/conflicting/web/web_components/index.html deleted file mode 100644 index 1e57e82fe93ea2..00000000000000 --- a/files/ja/conflicting/web/web_components/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: HTML インポート -slug: conflicting/Web/Web_Components -translation_of: Web/Web_Components/HTML_Imports -original_slug: Web/Web_Components/HTML_Imports ---- -

{{DefaultAPISidebar("Web Components")}}

- -
-

Google Chrome 73 で廃止
- この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

-
- -
-

Firefox はこの形式の HTML インポート は提供していません。詳細は状況更新を参照してください。標準化への同意が集まるか、代替機構が発表されるまで、Google の webcomponents.js などのポリフィルを使用することができます。

-
- -

HTML インポートWeb Components のパッケージング機構として使用されることを意図していますが、単独で使用することもできます。

- -

以下のように、HTML 文書中で <link> タグを使用してインポートします。

- -
<link rel="import" href="myfile.html">
- -

リンク種別 import は新設です。

- -

仕様

- - - - - - - - - - - - - - -
仕様状態備考
{{SpecName("HTML Imports")}}{{Spec2("HTML Imports")}}初回定義。
- -

ブラウザーの互換性

- -

{{Compat("html.elements.link.rel.import")}}

diff --git a/files/ja/conflicting/web/web_components/index.md b/files/ja/conflicting/web/web_components/index.md new file mode 100644 index 00000000000000..905367af050e7c --- /dev/null +++ b/files/ja/conflicting/web/web_components/index.md @@ -0,0 +1,42 @@ +--- +title: HTML インポート +slug: conflicting/Web/Web_Components +translation_of: Web/Web_Components/HTML_Imports +original_slug: Web/Web_Components/HTML_Imports +--- +{{DefaultAPISidebar("Web Components")}} + +

Google Chrome 73 で廃止
この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

+ +> **Warning:** Firefox はこの形式の _HTML インポート_ は提供していません。詳細は[状況更新](https://hacks.mozilla.org/2015/06/the-state-of-web-components/)を参照してください。標準化への同意が集まるか、代替機構が発表されるまで、Google の [`webcomponents.js`](https://github.com/webcomponents/webcomponentsjs) などのポリフィルを使用することができます。 + +_HTML インポート_ は [Web Components](/ja/docs/Web/Web_Components) のパッケージング機構として使用されることを意図していますが、単独で使用することもできます。 + +以下のように、HTML 文書中で [``](/ja/docs/Web/HTML/Element/link) タグを使用してインポートします。 + +``` + +``` + +リンク種別 `import` は新設です。 + +## 仕様 + + + + + + + + + + + + + + +
仕様状態備考
{{SpecName("HTML Imports")}}{{Spec2("HTML Imports")}}初回定義。
+ +## ブラウザーの互換性 + +{{Compat("html.elements.link.rel.import")}} diff --git a/files/ja/conflicting/web/xslt/transforming_xml_with_xslt/index.html b/files/ja/conflicting/web/xslt/transforming_xml_with_xslt/index.html deleted file mode 100644 index 1c823f3049f2de..00000000000000 --- a/files/ja/conflicting/web/xslt/transforming_xml_with_xslt/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: XSLT - リソース -slug: conflicting/Web/XSLT/Transforming_XML_with_XSLT -tags: - - Extensions - - NeedsContent - - NeedsExample - - NeedsLiveSample - - XML - - xsl -translation_of: Web/XSLT/Transforming_XML_with_XSLT/Resources -original_slug: Web/XSLT/Transforming_XML_with_XSLT/Resources ---- -
    -
  • XSL Results Firefox extension (現在レビュー待ち) - XML文書 (現在ロードされている文書または手動で入力/貼り付けられた文書) に XSL スタイルシート (URLまたはファイルシステムで手動で入力されたもの) を適用して、XSL を試すことができます。
  • -
diff --git a/files/ja/conflicting/web/xslt/transforming_xml_with_xslt/index.md b/files/ja/conflicting/web/xslt/transforming_xml_with_xslt/index.md new file mode 100644 index 00000000000000..9ff98004a2772d --- /dev/null +++ b/files/ja/conflicting/web/xslt/transforming_xml_with_xslt/index.md @@ -0,0 +1,14 @@ +--- +title: XSLT - リソース +slug: conflicting/Web/XSLT/Transforming_XML_with_XSLT +tags: + - Extensions + - NeedsContent + - NeedsExample + - NeedsLiveSample + - XML + - xsl +translation_of: Web/XSLT/Transforming_XML_with_XSLT/Resources +original_slug: Web/XSLT/Transforming_XML_with_XSLT/Resources +--- +- [XSL Results Firefox extension](https://addons.mozilla.org/ja/firefox/addon/xsl-results/) (現在レビュー待ち) - XML 文書 (現在ロードされている文書または手動で入力/貼り付けられた文書) に XSL スタイルシート (URL またはファイルシステムで手動で入力されたもの) を適用して、XSL を試すことができます。 diff --git a/files/ja/conflicting/webassembly/index.html b/files/ja/conflicting/webassembly/index.md similarity index 66% rename from files/ja/conflicting/webassembly/index.html rename to files/ja/conflicting/webassembly/index.md index cb88ce4a63d29f..6791d6a64acfaf 100644 --- a/files/ja/conflicting/webassembly/index.html +++ b/files/ja/conflicting/webassembly/index.md @@ -7,6 +7,6 @@ translation_of: WebAssembly/Index original_slug: WebAssembly/Index --- -
{{WebAssemblySidebar}}
+{{WebAssemblySidebar}} -

{{Index("/ja/docs/WebAssembly")}}

+{{Index("/ja/docs/WebAssembly")}}