From 28377f692739345c99df9107ac21b9c75fe8f33b Mon Sep 17 00:00:00 2001 From: hagiwara takayuki <141513+hagiwaratakayuki@users.noreply.github.com> Date: Sat, 29 May 2021 22:12:57 +0900 Subject: 英語版で復旧したweb/events下のファイル復旧(一部) (#957) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html files/ja/orphaned/web/api/detecting_device_orientation/index.html files/ja/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html Co-authored-by: hagiwaratakayuli Co-authored-by: Masahiro FUJIMOTO --- .../api/detecting_device_orientation/index.html | 229 --------------------- .../creating_and_triggering_events/index.html | 142 ------------- 2 files changed, 371 deletions(-) delete mode 100644 files/ja/orphaned/web/api/detecting_device_orientation/index.html delete mode 100644 files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html (limited to 'files/ja/orphaned') diff --git a/files/ja/orphaned/web/api/detecting_device_orientation/index.html b/files/ja/orphaned/web/api/detecting_device_orientation/index.html deleted file mode 100644 index 484067e66f..0000000000 --- a/files/ja/orphaned/web/api/detecting_device_orientation/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: デバイスの方向の検出 -slug: orphaned/Web/API/Detecting_device_orientation -tags: - - API - - Device Orientation - - Firefox OS - - Intermediate - - Mobile - - Motion - - Orientation - - Reference - - WebAPI -translation_of: Web/API/Detecting_device_orientation -original_slug: Web/API/Detecting_device_orientation ---- -
{{SeeCompatTable}}
- -

Web を利用可能なデバイスは、自身の方向を特定できるようになってきました。つまりデバイスは、重力との関係による自身の向きの変化を示すデータを報告できます。特に携帯電話のようなハンドヘルドデバイスは、表示内容が直立し続けるよう自動的に回転させるためにこの情報を使用でき、画面の幅が高さより大きくなるようにデバイスを回転させたときは、Web コンテンツをワイドスクリーン表示にします。

- -

方向の情報を制御する JavaScript イベントが 2 つあります。ひとつは {{domxref("DeviceOrientationEvent")}} であり、加速度センサーがデバイスの方向の変化を検出したときに発生します。Orientation イベントが報告するデータを受け取って処理することで、ユーザがデバイスを動かすことによる方向や高さの変化に対してインタラクティブに応答できるようになります。

- -

もうひとつのイベントは {{domxref("DeviceMotionEvent")}} であり、加速度が変化したときに発生します。こちらは方向ではなく加速度の変化を監視することが、{{domxref("DeviceOrientationEvent")}} との違いです。一般的に {{domxref("DeviceMotionEvent")}} を検出できるセンサーには、可動部があるストレージ装置を保護するためラップトップパソコンに内蔵するものも含みます。{{domxref("DeviceOrientationEvent")}} は、モバイルデバイスでとても一般的です。

- -

orientation イベントを処理する

- -

方向の変化を受け取り始めるには、{{event("deviceorientation")}} イベントをリッスンします:

- -
-

注記: gyronorm.js は、モバイルデバイスの加速度センサーやジャイロスコープのデータを正規化するためのポリフィルです。これは、デバイスの方向のサポート状況の違いを克服するのに役立ちます。

-
- -
window.addEventListener("deviceorientation", handleOrientation, true);
-
- -

イベントリスナ (この例では handleOrientation() という名前の JavaScript 関数) を登録すると、リスナ関数は最新の方向データとともに、周期的に呼び出されます。

- -

Orientation イベントは 4 つの値を持ちます:

- - - -

イベントハンドラ関数は以下のようなものです:

- -
function handleOrientation(event) {
-  var absolute = event.absolute;
-  var alpha    = event.alpha;
-  var beta     = event.beta;
-  var gamma    = event.gamma;
-
-  // 新たな方向データに基づいて処理を行う
-}
-
- -

方向として示される値

- -

それぞれの軸で報告される値は、標準座標系の軸を中心にした回転量を表します。これらは方向および動きとして示されるデータの記事で詳しく説明しており、ここでは概要を記載します。

- - - -

例

- -

このサンプルは方向を検出可能なデバイス上で、{{event("deviceorientation")}} イベントをサポートするブラウザを実行する場合に動作します。

- -

庭にボールがあると考えます:

- -
<div class="garden">
-  <div class="ball"></div>
-</div>
-
-<pre class="output"></pre>
-
- -

庭の幅は 200 ピクセルであり (小さな庭です)、ボールは中心にあります:

- -
.garden {
-  position: relative;
-  width : 200px;
-  height: 200px;
-  border: 5px solid #CCC;
-  border-radius: 10px;
-}
-
-.ball {
-  position: absolute;
-  top   : 90px;
-  left  : 90px;
-  width : 20px;
-  height: 20px;
-  background: green;
-  border-radius: 100%;
-}
-
- -

デバイスを動かすと、その動きに応じてボールが移動します:

- -
var ball   = document.querySelector('.ball');
-var garden = document.querySelector('.garden');
-var output = document.querySelector('.output');
-
-var maxX = garden.clientWidth  - ball.clientWidth;
-var maxY = garden.clientHeight - ball.clientHeight;
-
-function handleOrientation(event) {
-  var x = event.beta;  // -180 から 180 の範囲で角度を示す
-  var y = event.gamma; // -90 から 90 の範囲で角度を示す
-
-  output.innerHTML  = "beta : " + x + "\n";
-  output.innerHTML += "gamma: " + y + "\n";
-
-  // デバイスをひっくり返したくはないため、
-  // x の値を -90 から 90 の範囲に制限する
-  if (x >  90) { x =  90};
-  if (x < -90) { x = -90};
-
-  // 計算を容易にするため、x および y の値の範囲を
-  // 0 から 180 に変換する
-  x += 90;
-  y += 90;
-
-  // 10 は、ボールのサイズの半分である。
-  // これにより、配置場所をボールの中心に合わせる
-  ball.style.top  = (maxX*x/180 - 10) + "px";
-  ball.style.left = (maxY*y/180 - 10) + "px";
-}
-
-window.addEventListener('deviceorientation', handleOrientation);
-
- -

結果を以下に示します:

- -
{{EmbedLiveSample('Orientation_example', '230', '260')}}
- -
-

警告: Chrome と Firefox では角度の扱い方が異なり、一部の軸の向きが逆になっています。

-
- -

motion イベントを処理する

- -

motion イベントは orientation イベントと同じ方法で扱えますが、イベント名は {{event("devicemotion")}} になります。

- -
window.addEventListener("devicemotion", handleMotion, true);
- -

実際どのように変化したかの情報は、HandleMotion 関数のパラメータとして渡す {{domxref("DeviceMotionEvent")}} オブジェクトが提供します。

- -

motion イベントは 4 つのプロパティを持ちます:

- - - -

動きとして示される値

- -

{{domxref("DeviceMotionEvent")}} オブジェクトは Web 開発者に、デバイスの位置や方向が変化した速度の情報を提供します。変化量は 3 つの軸 (詳しくは方向および動きとして示されるデータをご覧ください) に沿って表します。

- -

{{domxref("DeviceMotionEvent.acceleration","acceleration")}} および {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}} で対応する軸は以下のとおりです:

- - - -

{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}} では状況が若干異なります。こちらの情報はそれぞれ以下のように対応します:

- - - -

最後に {{domxref("DeviceMotionEvent.interval","interval")}} は、デバイスからデータを取得する間隔をミリ秒単位で表します。

- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}最初の仕様
- -

ブラウザ実装状況

- -
-

DeviceMotionEvent

- - - -

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

- -

DeviceOrientationEvent

- - - -

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

-
- -

関連情報

- - diff --git a/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 9d2760dce6..0000000000 --- a/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: イベントの作成と起動 -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - Advanced - - DOM - - Guide - - JavaScript - - NeedsContent - - events -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -

この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、合成イベントと呼ばれます。

- -

カスタムイベントを作成する

- -

イベントは、次のように {{domxref("Event")}} コンストラクターを使用して作成できます。

- -
var event = new Event('build');
-
-// Listen for the event.
-elem.addEventListener('build', function (e) { /* ... */ }, false);
-
-// Dispatch the event.
-elem.dispatchEvent(event);
- -

上記のコード例は {{domxref("EventTarget.dispatchEvent()")}} メソッドを使用します。

- -

このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet Explorer は例外です)。もっと冗長的なアプローチ (Internet Explorer で動作するもの) は、下記の古い方法を参照して下さい。

- -

カスタムデータの追加 – CustomEvent()

- -

イベントオブジェクトにデータを追加するには、CustomEvent インターフェイスが存在し、detail プロパティを使用してカスタムデータを渡すことができます。

- -

たとえば、イベントは次のように作成できます。

- -
var event = new CustomEvent('build', { detail: elem.dataset.time });
- -

これにより、イベントリスナー内の追加データにアクセスすることができます。

- -
function eventHandler(e) {
-  console.log('The time is: ' + e.detail);
-}
-
- -

古い方法

- -

イベントを作成する古いアプローチでは、 Java に触発された API が使用されます。以下に例を示します。

- -
// イベントの作成
-var event = document.createEvent('Event');
-
-// イベントの名前を 'build' と定義する
-event.initEvent('build', true, true);
-
-// イベントを待ち受けする
-elem.addEventListener('build', function (e) {
-  // e.target が elem と一致したとき
-}, false);
-
-// 対象が何らかの Element またはその他の EventTarget の場合
-elem.dispatchEvent(event);
-
-
- -

イベントのバブリング

- -

子要素からイベントを起動させ、祖先要素がそれを、任意でデータも、受け取りたい場合がよくあります。

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-// 新しいイベントを生成し、バブリングを許可し、 "detail" プロパティに渡したいデータを設定する
-const eventAwesome = new CustomEvent('awesome', {
-  bubbles: true,
-  detail: { text: () => textarea.value }
-});
-
-// フォームイベントが "awesome" カスタムイベントを待ち受けし、渡されたものの text() メソッドをコンソールに出力する
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-// ユーザー型の場合、 form 内の textarea は発生させるイベントを起動・処理し、それを開始点として使用する
-textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
-
- -

イベントの動的な生成と処理

- -

要素はまだ作成されていないイベントを待ち受けすることができます。

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-textarea.addEventListener('input', function() {
-  // Create and dispatch/trigger an event on the fly
-  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
-  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
-});
-
- -

ビルトインイベントの起動

- -

この例では、 DOM メソッドを使用してチェックボックスでクリック (プログラムでクリックイベントを生成する) をシミュレートする方法を示します。デモを見る。

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    view: window,
-    bubbles: true,
-    cancelable: true
-  });
-  var cb = document.getElementById('checkbox');
-  var cancelled = !cb.dispatchEvent(event);
-  if (cancelled) {
-    // A handler called preventDefault.
-    alert("cancelled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not cancelled");
-  }
-}
- -

関連情報

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