From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/guide/ajax/community/index.html | 30 + files/ja/web/guide/ajax/getting_started/index.html | 275 ++++++++ files/ja/web/guide/ajax/index.html | 79 +++ files/ja/web/guide/ajax/other_resources/index.html | 21 + .../wai_aria_live_regions_api_support/index.html | 167 +++++ files/ja/web/guide/api/gamepad/index.html | 347 ++++++++++ files/ja/web/guide/api/index.html | 25 + files/ja/web/guide/api/vibration/index.html | 101 +++ .../index.html | 324 +++++++++ .../web/guide/audio_and_video_delivery/index.html | 553 ++++++++++++++++ .../live_streaming_web_audio_and_video/index.html | 271 ++++++++ .../index.html | 300 +++++++++ .../guide/audio_and_video_manipulation/index.html | 402 ++++++++++++ .../guide/css/block_formatting_context/index.html | 191 ++++++ .../web/guide/css/getting_started/boxes/index.html | 330 ++++++++++ .../getting_started/challenge_solutions/index.html | 324 +++++++++ .../web/guide/css/getting_started/color/index.html | 348 ++++++++++ .../css/getting_started/javascript/index.html | 148 +++++ .../guide/css/getting_started/layout/index.html | 284 ++++++++ .../web/guide/css/getting_started/lists/index.html | 245 +++++++ .../guide/css/getting_started/tables/index.html | 477 ++++++++++++++ .../getting_started/xul_user_interfaces/index.html | 303 +++++++++ files/ja/web/guide/css/media_queries/index.html | 412 ++++++++++++ files/ja/web/guide/dom/index.html | 36 + .../creating_and_triggering_events/index.html | 141 ++++ .../ja/web/guide/events/event_handlers/index.html | 172 +++++ files/ja/web/guide/events/index.html | 50 ++ .../index.html | 49 ++ .../overview_of_events_and_handlers/index.html | 136 ++++ files/ja/web/guide/graphics/index.html | 51 ++ .../canvas_tutorial/advanced_animations/index.html | 380 +++++++++++ .../applying_styles_and_colors/index.html | 725 +++++++++++++++++++++ .../canvas_tutorial/basic_animations/index.html | 711 ++++++++++++++++++++ .../html/canvas_tutorial/basic_usage/index.html | 152 +++++ .../html/canvas_tutorial/drawing_shapes/index.html | 577 ++++++++++++++++ .../guide/html/canvas_tutorial/finale/index.html | 51 ++ files/ja/web/guide/html/canvas_tutorial/index.html | 60 ++ .../canvas_tutorial/optimizing_canvas/index.html | 118 ++++ .../pixel_manipulation_with_canvas/index.html | 264 ++++++++ .../canvas_tutorial/transformations/index.html | 282 ++++++++ .../html/canvas_tutorial/using_images/index.html | 337 ++++++++++ .../web/guide/html/content_categories/index.html | 176 +++++ .../ja/web/guide/html/editable_content/index.html | 232 +++++++ .../rich-text_editing_in_mozilla/index.html | 295 +++++++++ .../ja/web/guide/html/event_attributes/index.html | 88 +++ .../html/html5/constraint_validation/index.html | 329 ++++++++++ .../guide/html/html5/html5_element_list/index.html | 584 +++++++++++++++++ files/ja/web/guide/html/html5/index.html | 171 +++++ .../html/html5/introduction_to_html5/index.html | 26 + .../guide/html/obsolete_things_to_avoid/index.html | 86 +++ .../index.html | 201 ++++++ .../using_html_sections_and_outlines/index.html | 287 ++++++++ files/ja/web/guide/html/xhtml/index.html | 59 ++ files/ja/web/guide/index.html | 92 +++ files/ja/web/guide/index/index.html | 11 + .../introduction_to_web_development/index.html | 98 +++ .../index.html | 57 ++ .../web/guide/mobile/a_hybrid_approach/index.html | 72 ++ files/ja/web/guide/mobile/index.html | 75 +++ .../guide/mobile/mobile-friendliness/index.html | 51 ++ .../ja/web/guide/mobile/separate_sites/index.html | 51 ++ .../guide/parsing_and_serializing_xml/index.html | 115 ++++ files/ja/web/guide/performance/index.html | 22 + files/ja/web/guide/printing/index.html | 124 ++++ .../using_the_page_visibility_api/index.html | 272 ++++++++ files/ja/web/guide/user_input_methods/index.html | 197 ++++++ .../ja/web/guide/using_formdata_objects/index.html | 144 ++++ files/ja/web/guide/woff/index.html | 66 ++ 68 files changed, 14230 insertions(+) create mode 100644 files/ja/web/guide/ajax/community/index.html create mode 100644 files/ja/web/guide/ajax/getting_started/index.html create mode 100644 files/ja/web/guide/ajax/index.html create mode 100644 files/ja/web/guide/ajax/other_resources/index.html create mode 100644 files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html create mode 100644 files/ja/web/guide/api/gamepad/index.html create mode 100644 files/ja/web/guide/api/index.html create mode 100644 files/ja/web/guide/api/vibration/index.html create mode 100644 files/ja/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html create mode 100644 files/ja/web/guide/audio_and_video_delivery/index.html create mode 100644 files/ja/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html create mode 100644 files/ja/web/guide/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.html create mode 100644 files/ja/web/guide/audio_and_video_manipulation/index.html create mode 100644 files/ja/web/guide/css/block_formatting_context/index.html create mode 100644 files/ja/web/guide/css/getting_started/boxes/index.html create mode 100644 files/ja/web/guide/css/getting_started/challenge_solutions/index.html create mode 100644 files/ja/web/guide/css/getting_started/color/index.html create mode 100644 files/ja/web/guide/css/getting_started/javascript/index.html create mode 100644 files/ja/web/guide/css/getting_started/layout/index.html create mode 100644 files/ja/web/guide/css/getting_started/lists/index.html create mode 100644 files/ja/web/guide/css/getting_started/tables/index.html create mode 100644 files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html create mode 100644 files/ja/web/guide/css/media_queries/index.html create mode 100644 files/ja/web/guide/dom/index.html create mode 100644 files/ja/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/ja/web/guide/events/event_handlers/index.html create mode 100644 files/ja/web/guide/events/index.html create mode 100644 files/ja/web/guide/events/orientation_and_motion_data_explained/index.html create mode 100644 files/ja/web/guide/events/overview_of_events_and_handlers/index.html create mode 100644 files/ja/web/guide/graphics/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/finale/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/transformations/index.html create mode 100644 files/ja/web/guide/html/canvas_tutorial/using_images/index.html create mode 100644 files/ja/web/guide/html/content_categories/index.html create mode 100644 files/ja/web/guide/html/editable_content/index.html create mode 100644 files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html create mode 100644 files/ja/web/guide/html/event_attributes/index.html create mode 100644 files/ja/web/guide/html/html5/constraint_validation/index.html create mode 100644 files/ja/web/guide/html/html5/html5_element_list/index.html create mode 100644 files/ja/web/guide/html/html5/index.html create mode 100644 files/ja/web/guide/html/html5/introduction_to_html5/index.html create mode 100644 files/ja/web/guide/html/obsolete_things_to_avoid/index.html create mode 100644 files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html create mode 100644 files/ja/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/ja/web/guide/html/xhtml/index.html create mode 100644 files/ja/web/guide/index.html create mode 100644 files/ja/web/guide/index/index.html create mode 100644 files/ja/web/guide/introduction_to_web_development/index.html create mode 100644 files/ja/web/guide/localizations_and_character_encodings/index.html create mode 100644 files/ja/web/guide/mobile/a_hybrid_approach/index.html create mode 100644 files/ja/web/guide/mobile/index.html create mode 100644 files/ja/web/guide/mobile/mobile-friendliness/index.html create mode 100644 files/ja/web/guide/mobile/separate_sites/index.html create mode 100644 files/ja/web/guide/parsing_and_serializing_xml/index.html create mode 100644 files/ja/web/guide/performance/index.html create mode 100644 files/ja/web/guide/printing/index.html create mode 100644 files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html create mode 100644 files/ja/web/guide/user_input_methods/index.html create mode 100644 files/ja/web/guide/using_formdata_objects/index.html create mode 100644 files/ja/web/guide/woff/index.html (limited to 'files/ja/web/guide') diff --git a/files/ja/web/guide/ajax/community/index.html b/files/ja/web/guide/ajax/community/index.html new file mode 100644 index 0000000000..a6d6e744c3 --- /dev/null +++ b/files/ja/web/guide/ajax/community/index.html @@ -0,0 +1,30 @@ +--- +title: コミュニティ +slug: Web/Guide/AJAX/Community +tags: + - AJAX +translation_of: Web/Guide/AJAX/Community +--- +

AJAX に関する有用なメーリングリスト、ニュースグループ、フォーラム、その他のコミュニティを知っている場合は、リンクを追加してください。

+ +

英語コミュニティ

+ +

http://www.ajaxlines.com - a huge collection of AJAX resources and tutorials, toolkits, websites http://www.ajaxmatters.com - information portal about AJAX and related web technologies

+ +

Ajax ワークショップ & コース

+ + + +

日本語コミュニティ

+ + diff --git a/files/ja/web/guide/ajax/getting_started/index.html b/files/ja/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..755dff5424 --- /dev/null +++ b/files/ja/web/guide/ajax/getting_started/index.html @@ -0,0 +1,275 @@ +--- +title: 始めましょう +slug: Web/Guide/AJAX/Getting_Started +tags: + - AJAX + - API + - Advanced + - JavaScript + - WebMechanics + - XMLHttpRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +

この記事は AJAX の基礎の概観と、入門のための二つの実践的なサンプルを示します。

+ +

AJAX とは?

+ +

AJAX は Asynchronous JavaScript And XML の頭文字を取ったものです。これは一言で言えば、 XMLHttpRequest オブジェクトを使ってサーバーと通信することです。 AJAX は JSON, XML, HTML, テキストファイルなど、様々な形式の情報で送受信することができます。 AJAX の最も魅力的な特徴は「非同期」であること、つまり、サーバーとの通信、データの交換、ページの更新を、ページの再読み込みなしに行うことができる点です。

+ +

AJAX でできることには、二つの重要な特徴があります。

+ + + +

Step 1 –  HTTP リクエストの送り方

+ +

JavaScript からサーバーに HTTP リクエストを送るためには、この機能を提供するオブジェクトのインスタンスが必要になります。これが XMLHttpRequest の登場する場所です。このクラスは、もともとは Internet Explorer で XMLHTTP と呼ばれる ActiveX オブジェクトとして導入されたものです。その後、 Mozilla や Safari やその他のブラウザがこれに追随し、 Microsoft 独自の ActiveX オブジェクトのメソッドやプロパティに対応する XMLHttpRequest オブジェクトを実装しました。いっぽう、 Microsoft も同様に XMLHttpRequest を実装しました。

+ +
// 古い互換コードで、もう必要ありません。
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 以前
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +
メモ: 説明のために、このコードは実際に XMLHttp インスタンスを作成するのに使用するコードよりも多少簡単にしています。より実際に近いサンプルは、この記事の step 3 を見てください。
+ +

リクエストを送ったら、応答を受け取った後に何をするかを決めなければなりません。この段階で行う必要があるのは、どの JavaScript 関数に応答を処理させるかを XMLHttp リクエストオブジェクトに教えることだけです。これは、オブジェクトの onreadystatechange プロパティに、使おうとしている JavaScript 関数の名前をこのように設定することで行えます。

+ +
httpRequest.onreadystatechange = nameOfTheFunction;
+ +

このとき、関数名の後に括弧や引数がないことに注意してください。それは、実際にそれを呼ぶのではなく単純に関数の参照を渡しているからです。また、関数名を設定するのではなく、以下のように関数や応答を処理する動作をその場で定義するという JavaScript の機能 (「無名関数」と呼ばれる) を利用することもできます。

+ +
httpRequest.onreadystatechange = function(){
+    // ここでサーバーからの応答を処理します。
+};
+
+ +

次に、応答を受け取った後に何をするかを宣言したら、以下のように HTTP 要求オブジェクトの open() と send() 呼び出して、要求を作成する必要があります。

+ +
httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();
+
+ + + +

send() メソッドの引数は、要求を POST するときにサーバーに送信したい任意のデータです。フォームデータはサーバーが解釈できる形式、例えばクエリ文字列のような形式、

+ +
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
+ +

又は、 multipart/form-data, JSON, XML など形式にしてください。

+ +

なお、データを POST する場合、要求の MIME タイプを設定する必要がある場合があります。例えば、フォームデータをクエリ文字列として send() を呼び出して送る前に、次の文を使用してください。

+ +
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

Step 2 – サーバー応答の扱い

+ +

要求を送った時に、応答を扱う JavaScript 関数の名前を設定しました。

+ +
httpRequest.onreadystatechange = nameOfTheFunction;
+
+ +

この関数では何を行うべきでしょうか。最初に、この関数ではリクエストの状態を調べる必要があります。ステータス値が XMLHttpRequest.DONE (4 に対応) であるなら、サーバーからの応答が完了しており、処理を進められることを意味します。

+ +
if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // 全てが問題ない状態で、応答も返ってきています
+} else {
+    // まだ準備ができていません
+}
+
+ +

readyState の値のリストは XMLHTTPRequest.readyState で文書化されていて、以下のようになっています。

+ + + +

次に、 HTTP 応答の 応答コードを調べます。返ってくる可能性があるコードは W3C でリスト化されています。以下の例では、 AJAX 呼び出しが成功したか失敗したかを {{HTTPStatus("200", "200 OK")}} 応答コードをチェックすることで判別します。

+ +
if (httpRequest.status === 200) {
+    // 完璧です！
+} else {
+    // 何らかの問題が発生しています。
+    // たとえば、応答に 404 (Not Found) や
+    // 500 (Internal Server Error) 応答コードが返っているなど。
+}
+
+ +

要求の状態と応答の HTTP 状態コードをチェックした後、サーバーが送信したデータを使って好きなことが何でもできます。データにアクセスするには二つの選択肢があります。

+ + + +

なお、上記の段階は非同期要求を使用した場合 (open() の第三引数が未指定か true に設定されていた場合) のみ有効です。同期要求を使用した場合は関数を指定する必要はありませんが、これはユーザーの使い勝手をひどく損なうので、避けるべきです。

+ +

Step 3 –  簡単な例

+ +

さて、ここまでに紹介した方法を使って簡単な HTTP リクエストを実行してみましょう。われわれの JavaScript では test.html という名前の、 "これはテストです" と書かれた HTML 文書を要求し、その内容を alert() で表示します。注意として、この例では vanilla JavaScript を使っています — jQuery は入っていません。また HTML, XML, PHP ファイルは同一ディレクトリに置かれています。

+ +
<button id="ajaxButton" type="button">要求を実行</button>
+
+<script>
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('中断 :( XMLHTTP インスタンスを生成できませんでした');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('リクエストに問題が発生しました');
+      }
+    }
+  }
+})();
+</script>
+
+ +

このサンプルでは以下のことを行います。

+ + + +
メモ: 要求を送信する先が静的な HTML ファイルではなく、 XML を返すコードである場合、 Internet Explorer に応答ヘッダーを設定しなければなりません。Content-Type: application/xml というヘッダーを設定しなければ、XML 要素にアクセスしようとしている行で IE が "Object Expected" という Javascript エラーを投げるでしょう。
+ +
メモ 2: Cache-Control: no-cache というヘッダーを設定しなければ、ブラウザーが応答をキャッシュして要求を再送信しなくなるため、デバッグが難しくなるでしょう。 GET 引数に、タイムスタンプやランダムな数字のような、常に異なるものを追加する方法もあります (キャッシュをバイパスするをご覧ください)
+ +
メモ 3: httpRequest 変数をグローバルに使用すると、関数の呼び出しが競合して makeRequest() が互いに上書きし合うため、競合状態が発生します。 httpRequest 変数を、 AJAX 関数を含んでいるクロージャのローカルで宣言することでこれを防ぐことができます。
+ +

通信エラーのイベント (サーバーがダウンしたなど) では、応答状態にアクセスする時に onreadystatechange メソッドの中で例外が発生します。この問題を防ぐため、 if...then 文は必ず try...catch で囲むようにしてください。

+ +
function alertContents() {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('リクエストに問題が発生しました');
+      }
+    }
+  }
+  catch( e ) {
+    alert('例外を捕捉: ' + e.description);
+  }
+}
+
+ +

Step 4 – 「X-ファイル」 もしくは XML レスポンスの扱い方

+ +

前の例では、 HTTP リクエストへの応答を受け取った後、要求オブジェクトの responseText プロパティを用いて、それに含まれている test.html の中身を取得しました。では、次に responseXML プロパティのほうを試してみましょう。

+ +

はじめに、あとでサーバーに要求する妥当な XML 文書を作成します。 test.xml ファイルの中身は以下のようなものです。

+ +
<?xml version="1.0" ?>
+<root>
+    I'm a test.
+</root>
+
+ +

スクリプトでは、リクエスト送出を以下のように変更します。

+ +
...
+onclick="makeRequest('test.xml')">
+...
+
+ +

そして、 alertContents() では、 alert(httpRequest.responseText); としている行を以下のように変更します。

+ +
var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

このコードでは、 responseXML から XMLDocument オブジェクトを取得し、 DOM メソッドを利用して XML 文書に含まれるデータにアクセスしています。 このtest.xml ファイルはここで、変更されたスクリプトはここで見ることができます。

+ +

Step 5 – データを処理する

+ +

最後に、データをサーバーに送って応答を受けましょう。 JavaScript はここで動的なページ test.php に要求し、このページは送ったデータを受けて「計算した」文字 - "Hello, [user data]!" - を返し、これを alert() します。

+ +

まずは HTML にテキストボックスを追加してユーザーが名前を入れられるようにします:

+ +
<label>Your name:
+  <input type="text" id="ajaxTextbox" />
+</label>
+<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
+  Make a request
+</span>
+ +

イベントハンドラーに、テキストボックスからユーザーデータを取得してサーバーサイドスクリプトの URL と一緒に makeRequest() に送るような行も追加します。

+ +
  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };
+
+ +

makeRequest() を編集してユーザーデータを受け取ってサーバーに渡すようにします。リクエストメソッドは GET から POST に変更し、データを httpRequest.send() 呼び出しのパラメーターとして入れます:

+ +
  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+
+ +

alertContents() 関数はステップ 3 と同じように書かれて、サーバーが計算された文字列を返していたら、 alert するようにします。しかし、サーバーが計算された文字列とオリジナルのユーザーデータの両方を返していたらどうでしょう？ユーザーがテキストボックスに "Jane" とタイプしていたら、サーバーの応答はこのようになります:

+ +

{"userData":"Jane","computedString":"Hi, Jane!"}

+ +

このデータを alertContents(),内で使うには、単に responseText をalert することはできず、これを parse して、求めるプロパティの computedString をalertします:

+ +
function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('There was a problem with the request.');
+    }
+  }
+}
+ +

test.php には以下のようなものが入ります。

+ +
$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "Hi, " . $name;
+$array = ['userName' => $name, 'computedString' => $computedString];
+echo json_encode($array);
+ +

DOM メソッドについてより詳しくは、Mozilla での DOM の実装の文書を参照してください。

diff --git a/files/ja/web/guide/ajax/index.html b/files/ja/web/guide/ajax/index.html new file mode 100644 index 0000000000..c28166501d --- /dev/null +++ b/files/ja/web/guide/ajax/index.html @@ -0,0 +1,79 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - DOM + - JavaScript + - References + - XML + - XMLHttpRequest +translation_of: Web/Guide/AJAX +--- +
はじめに
+AJAX 入門
+ +
+

Asynchronous JavaScript and XML (AJAX) はそれ自体がある種の技術というわけではありませんが、 Jesse James Garrett によって 2005 年に作られた言葉で、既存の技術同士を組み合わせた新しいアプローチを意味します。組み合わされる技術は、HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT, そして最も重要なものは {{domxref("XMLHttpRequest")}} オブジェクトです。
+ これらの技術が AJAX のモデルで組み合わされると、ウェブアプリケーションはより早く、表示されているページ全てを再読み込みすることなく、ユーザーインターフェイスを逐次更新できるようになります。そして、アプリケーションにより早い表示、より良い応答性をもたらします。

+ +

Ajax の X は XML を表していますが、 {{glossary("JSON")}} の方がより軽く JavaScript の一部であることなど数多くの利点があるため、今日では XML よりもよく使われています。 JSON と XML はどちらも Ajax モデルの情報をパッケージ化するために使用されます。

+
+ +
+
+

ドキュメント

+ +
+
はじめに
+
この記事では AJAX の基本について説明し、始めるために2つの簡単な実例を紹介します。
+
XMLHttpRequest API の使用
+
{{domxref("XMLHttpRequest")}} API は、Ajax のコアです。この記事では、次のような Ajax 技術の使用方法について説明します。 + +
+
Fetch API
+
Fetch API はリソースをフェッチするためのインターフェイスを提供します。 {{domxref("XMLHTTPRequest")}} を使用した人なら誰にでも馴染みのあるように見えますが、この API はより強力で柔軟な機能セットを提供します。
+
Server-sent イベント
+
伝統的に、ウェブページは新しいデータを受信するためにサーバにリクエストを送信しなければなりません。つまり、ページはサーバにデータを要求します。サーバが送信したイベントでは、サーバがメッセージをウェブページにプッシュすることで、いつでもウェブページに新しいデータを送信することができます。これらの着信メッセージは、ウェブページ内のイベント+データとして扱うことができます。サーバー送信イベントの使用を参照してください。
+
純粋な Ajax ナビゲーションサンプル
+
この記事では、純粋な Ajax ウェブサイトの3つのページから構成された実用的な (最小限の) 例を提供します。
+
バイナリデータの送信と受信
+
XMLHttpRequest オブジェクトの responseType プロパティを設定して、予想されるレスポンスタイプをサーバから変更することができます。可能な値は空文字列 (デフォルト), arraybuffer, blob, document, json, text です。response のプロパティには、 responseType に従って ArrayBuffer, Blob, Document, JSON、または string のようなエンティティ本文が含まれます。この記事では、Ajax の I/O 技術をいくつか紹介します。
+
XML
+
Extensible Markup Language (XML) は、特定の目的のマークアップ言語を作成する W3C 推奨の汎用マークアップ言語です。これは SGML の単純化されたサブセットであり、多くの異なる種類のデータを記述することができます。その主な目的は、異なるシステム、特にインターネットを介して接続されたシステム間でのデータの共有を容易にすることです。
+
XML の解釈とシリアライズ
+
文字列、ファイル、または JavaScript を使用して XML 文書を解釈する方法、XML 文書を文字列、Javascript Object Tree (JXON) またはファイルにシリアル化する方法
+
XPath
+
XPath は XML Path Language (XML パス言語) の略で、XML 文書のさまざまな部分をアドレス指定する (指す) 柔軟な方法を提供する非 XML 構文を使用します。これと同様に、ドキュメント内のアドレス指定されたノードをテストしてパターンに一致するかどうかを判断することもできます。
+
{{domxref("FileReader")}} API
+
FileReader API を使用すると、ウェブアプリケーションがユーザーのコンピューターに格納されているファイル (または生データバッファ) の内容を非同期に読み取ることができ、読み取るファイルまたはデータを {{domxref("File")}} または {{domxref("Blob")}} オブジェクトで特定します。 File オブジェクトはユーザーが {{HTMLElement("input")}} 要素を使用して選択した結果として返される {{domxref("FileList")}} オブジェクト、ドラッグ＆ドロップ操作の {{domxref("DataTransfer")}} オブジェクト、 {{domxref("HTMLCanvasElement")}} の mozGetAsFile() API から取得することができます。
+
XMLHttpRequest における HTML
+
W3C の XMLHttpRequest 仕様書では、もともと XML の解析のみに対応していた {{domxref("XMLHttpRequest")}} に HTML 解析の対応が追加されています。この機能を使用すると、ウェブアプリケーションは XMLHttpRequest を使用して解析された DOM として HTML リソースを取得できます。
+
+ +

すべてを見る...

+
+ +
+

ツール

+ +
+
axios
+
{{jsxref("Promise")}} ベースの {{glossary("HTTP")}} クライアントで、内部的に XMLHttpRequest を使用しています。
+
+ +

関連情報

+ +
+
Ajax: ウェブアプリケーションへの新しいアプローチ
+
Adaptive Path の Jesse James Garrett は 2005年 2月にこの記事を書いて、 Ajax とその関連概念を紹介しました。
+
XMLHttpRequest の仕様書
+
WHATWG ライブ標準
+
+
+
diff --git a/files/ja/web/guide/ajax/other_resources/index.html b/files/ja/web/guide/ajax/other_resources/index.html new file mode 100644 index 0000000000..1475956d30 --- /dev/null +++ b/files/ja/web/guide/ajax/other_resources/index.html @@ -0,0 +1,21 @@ +--- +title: AJAX に関するその他の資料 +slug: Web/Guide/AJAX/Other_Resources +tags: + - AJAX +translation_of: Web/Guide/AJAX/Other_Resources +--- + diff --git a/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html b/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html new file mode 100644 index 0000000000..fb3a9d6a63 --- /dev/null +++ b/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.html @@ -0,0 +1,167 @@ +--- +title: WAI ARIA Live Regions/API サポート +slug: Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support +tags: + - AJAX + - アクセシビリティ +translation_of: Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support +--- +

{{ Fx_minversion_header(3) }}

+ +
これらの注釈は、スクリーンリーダーの開発者向けです。 開発者は、ARIAライブリージョン開発者のドキュメントを使用する必要があります。
+ +

Firefox 3には、Mozillaエンジンがドキュメントのライブ変更を公開する方法に対する重要な改善が含まれています。
+
+ これらの機能は、ARIAライブリージョンマークアップでマークアップされたページと、追加のマークアップを追加しなかったページの両方で、スクリーンリーダー開発者がライブリージョンサポートの品質とパフォーマンスを向上させるのに役立ちます。

+ +

ARIA のライブリージョンのマークアップについては、ARIA の仕様またはライブリージョンのレポートをお読みください。

+ +

いつものように、私たちはコミュニティフォーラムの変更に関する質問や提案には門を開いています。

+ +

Web ページの突然変異のために発生したイベント

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
文書では何が変わったのですか？ATK/AT-SPI eventIAccessible2 event
Object about to be hidden or removedchildren_changed::remove (fired on the parent, with event data pointing to the child index of the accessible object to be removed)EVENT_OBJECT_HIDE* (fired on the actual accessible object about to go away)
Object shown or insertedchildren_changed::add (fired on the parent, with event data pointing to the child index of the inserted accessible object)EVENT_OBJECT_SHOW* (fired on the actual new accessible object)
Object replaced with different object (this happens especially if an object's interfaces or role changes)children_changed::remove followed immediately by children_change::addEVENT_OBJECT_HIDE followed immediately by EVENT_OBJECT_SHOW
Text removedtext_changed::deleteIA2_EVENT_TEXT_REMOVED (use IAccessibleText::get_oldText to retrieve the offsets and removed text)
Text insertedtext_changed::insertIA2_EVENT_TEXT_INSERTED (use IAccessibleText::get_newText to retrieve the offsets and inserted text)
Text replacedtext_changed::delete followed immediately by text_changed::insertIA2_EVENT_TEXT_REMOVED followed immediately by IA2_EVENT_TEXT_INSERTED
+ +

* We do not use MSAA's CREATE/DESTROY at the request of screen reader vendors, who avoid those events because they cause crashes on some important system -- SHOW/HIDE are the equivalent of those events.

+ +

イベントからオーサリング提供の ARIA ライブリージョンセマンティクスを取得する

+ +

ある祖先要素 (最も近い祖先の勝利) に定義されている場合、ページ内の任意の変更イベントに対して、作成者はイベントオブジェクトから以下のオブジェクト属性を取得できます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Object attribute namePossible valuesDefault value if not specifiedMeaningARIA markup if required
container-live"off" | "polite" | "assertive""off"Interruption policyaria-live on ancestor element
container-relevant"{{ mediawiki.external('additions') }} {{ mediawiki.external('removals') }} {{ mediawiki.external('text') }}" | "all""additions text"What types of mutations are possibly relevant? See {{ mediawiki.external('#Events_fired_for_web_page_mutations the mutation events list') }} to match the type of event with this attribute's value, to determine whether the author believed the event should be presented to the user or not.aria-relevant on ancestor element
container-busy"true" | "false" | "error""false"The current changes are not yet complete. A state change event for the A11y API's BUSY state will be fired on the container object currently marked as BUSY, once it is no longer BUSY. This is especially important in atomic regions. The entire atomic region should be presented once when it is finally no longer BUSY.aria-busy on ancestor element
container-atomic"true" | "false""false"Is this change inside a region that should always be presented at once. If yes, member-of relation will point to the root of the region (see next section)aria-atomic on ancestor element
member-ofIf container-atomic=true, points to an ancestor accessible object (thus it is actually an accessible relation, not object attribute)Not in atomic region if not providedPoints to the root of the atomic container that this object is in. This will always be an ancestor of the current object.aria-atomic on ancestor element
event-from-input"true" | "false"
+ (described more below)		Browser could not calculate thisWas the root cause of this event explicit user input?Does not require author's cooperation.
+ +

The "container-" prefix is so named because the attribute describes what the final computed property of similar name is for that node. This means that the AT does not need to traverse up the parent chain to get this information. At this time, for properties where the container-{{ mediawiki.external('name') }} attribute has not been set, the AT must have code to fall back on the default value as defined in the W3C spec.

+ +

イベントがユーザーの入力であったかどうかを判断する

+ +

All events will now provide information about whether the event was caused by user input, or was something that the web page caused. This information is retrieved differently on each platform, because some platforms use asynchronous events.

+ +

In IAccessible2, this is retrieved from the object attribute "event-from-input", which will be set to "true" or "false". If it is not present, then something went wrong and Mozilla was not able to provide this information. This information is available only for EVENT_SHOW, EVENT_HIDE, IA2_EVENT_TEXT_INSERTED and IA2_EVENT_TEXT_REMOVED.

+ +

For ATK/AT-SPI, this information is retrieved by checking the event name. If the event name has ":system" appended to it, then it is /not/ from user input. The ":system" string is calculated for children-changed and text-changed events.

+ +

Why is this useful? The majority of AJAX pages do not provide live region markup, but still need to be as usable as possible. It is difficult for a screen reader to decide when to interrupt a user with changes on a page. If the screen reader automatically reads too much, then the web page will be too annoying to use. If the screen reader doesn't read anything, then the user may miss important information.

+ +

It is believed this information will be useful for heuristics. Often, changes in a page that are directly caused by a user's keystrokes should be read. They are synchronous with what the user is doing and can thus likely be read without disorienting the user. Once the user presses the next key the speech will move on to echoing that key anyway. The screen reader may wish to take other factors into account, such as the type of change, the size of the change, where the change occured, etc. This is a potential area for innovation in screen readers.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Most recent occuranceUser input?
Key pressesYes
Mouse clicksYes
Mouse hoversNo
Page load eventsNo
+ +

Everything else, including focus changes, timer callbacks, XMLHttpRequest callbacks, etc. are neutral. They are only counted as user input if the original reason they happened was because of user input.

+ +

スクリーンリーダーが何を提示すべきか？

+ +

Please read the live region section of the WAI-ARIA Screen Reader Implementor's Guide.

diff --git a/files/ja/web/guide/api/gamepad/index.html b/files/ja/web/guide/api/gamepad/index.html new file mode 100644 index 0000000000..1cd391adb2 --- /dev/null +++ b/files/ja/web/guide/api/gamepad/index.html @@ -0,0 +1,347 @@ +--- +title: ゲームパッド API の使用 +slug: Web/Guide/API/Gamepad +tags: + - API + - Advanced + - Gamepad API + - Games + - Guide +translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API +--- +

{{DefaultAPISidebar("Gamepad API")}}

+ +

HTML5 はリッチでインタラクティブなゲームを開発するために必要なコンポーネントを多く搭載しています。 <canvas> や WebGL、 <audio> に <video> などの技術は、今までネイティブコードを書く必要のあった機能をサポートできるほどに成長しました。ゲームパッド API は開発者とデザイナーにゲームパッドやコントローラーへのアクセスを提供するものです。

+ +

ゲームパッドAPI は {{ domxref("Window") }} オブジェクトにゲームパッドとコントローラー (以下、ゲームパッド) の状態を読み取る新しいイベントをいくつか追加します。さらに、 {{ domxref("Gamepad") }} というゲームパッドの接続状態が得られるオブジェクトと {{ domxref("navigator.getGamepads") }} というゲームパッドの一覧を取得できるメソッドが追加されます。

+ +

ゲームパッドの接続

+ +

新しいゲームパッドが接続された時、アクティブなページは {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントを受け取ります。ページ読み込み時にゲームパッドがすでに接続されている場合、ゲームパッドのボタンを押すなどの操作をした時に {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントがアクティブなページに対して発生します。

+ +
+

Firefox では、ページが見える状態でかつユーザーによるゲームパッドの操作を受け付けたときにのみ、ゲームパッドが利用可能になります。これによって、ユーザーを特定する Fingerprinting に利用されることを防止しています。一度一つのコントローラーが操作されれば、他のコントローラーも自動で接続され利用可能になります。

+
+ +

以下のようにして {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} を使用します:

+ +
window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    e.gamepad.index, e.gamepad.id,
+    e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+
+ +

ゲームパッドはそれぞれ固有の ID を gamepad プロパティの中に持っています。

+ +

ゲームパッドの切断

+ +

ゲームパッドが切断されると、ゲームパッドが以前に受信したデータ(例: {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} )があると、2番目のイベント(例: {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} )がフォーカスされたウィンドウにディスパッチします:

+ +
window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Gamepad disconnected from index %d: %s",
+    e.gamepad.index, e.gamepad.id);
+});
+ +

ゲームパッドの {{domxref("Gamepad.index", "index")}} というプロパティは同じタイプの複数のコントローラーが使用されている場合であっても、システムに接続されたデバイスごとにユニークになります。 Index プロパティもまた {{ domxref("Navigator.getGamepads()") }} として戻される {{jsxref("Array")}} の index として機能します。

+ +
var gamepads = {};
+
+function gamepadHandler(event, connecting) {
+  var gamepad = event.gamepad;
+  // Note:
+  // gamepad === navigator.getGamepads()[gamepad.index]
+
+  if (connecting) {
+    gamepads[gamepad.index] = gamepad;
+  } else {
+    delete gamepads[gamepad.index];
+  }
+}
+
+window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
+window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
+
+ +

この前の例ではイベントが完了した後に gamepad プロパティがどのように保持できるかを示しています - 後でデバイスの状態照会のために使用する技術となります。

+ +

Gamepad オブジェクトの問い合わせ

+ +

ご覧のように、上述の gamepad イベントは {{ domxref("Gamepad") }} オブジェクトを返すイベントオブジェクト、上の gamepad のプロパティが含まれています。複数のゲームパッド(すなわち、そのID ) を一度に接続される可能性があるため、イベントを発生させたのはどのゲームパッドを決定するためにこれらを使用することができます。それへの参照を保持し、それがボタンや軸のいずれかの時点で押されているかを知るために照会するなど、{{ domxref("Gamepad") }} オブジェクトから様々なことを行うことができます。そうすることで、多くの場合、今回と次回のイベント発生とゲームパッドの状態を知っておく必要があり、ゲームやその他のインタラクティブな Web ページであることが望ましいです。

+ +

このようなチェックを実行すると、開発者はゲームパッドやゲームパッドの状態に基づいて、現在のフレームのための意思決定を行うために必要なアニメーションループ (例 : {{ domxref("Window.requestAnimationFrame","requestAnimationFrame") }}) と一緒に {{ domxref("Gamepad") }} オブジェクトを使用して関与する傾向があります。

+ +

{{ domxref("Navigator.getGamepads()") }} メソッドは現在 Web ページから見える {{ domxref("Gamepad") }} オブジェクト (ゲームパッドが繋がっていない時は毎回 null が返される ) のような、すべてのデバイスを配列として戻します。これは、同じ情報を得るために使用することができます。例えば、 以下に示すように上記の最初のコード例を書き換えます。

+ +
window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    gp.index, gp.id,
+    gp.buttons.length, gp.axes.length);
+});
+ +

{{ domxref("Gamepad") }} オブジェクトの機能は以下の通りです。

+ + + +
+

注: Gamepadオブジェクトは、セキュリティ上の理由から {{ domxref("Window") }} オブジェクトではなく {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントで使用できます。一度リファレンスを取得すると、そのプロパティでゲームパッドの現在の状態に関する情報を照会できます。 このオブジェクトは、ゲームパッドの状態が変わるたびに更新されます。

+
+ +

ボタン情報の使用

+ +

1つのゲームパッドの接続情報を表示する簡単な例を見てみましょう (後続のゲームパッド接続を無視します)。ゲームパッドの右側にある4つのゲームパッドボタンを使用してボールを画面の周りに移動できます。デモをライブで見ることができことができ、Githubでソースコードを見つけることができます。

+ +

まず、いくつかの変数を宣言します: 接続情報が書き込まれる gamepadInfo のパラグラフ、移動する ball、requestAnimation Frame の ID として機能する start 変数、ボールを移動するための位置変更子として機能する a および b 変数、および短縮形変数 これは、　{{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} および {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} クロスブラウザフォークで使用されます。

+ +
var gamepadInfo = document.getElementById("gamepad-info");
+var ball = document.getElementById("ball");
+var start;
+var a = 0;
+var b = 0;
+
+ +

次に {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントを使用して、接続されているゲームパッドを確認します。接続されると {{ domxref("Navigator.getGamepads()") }}[0] を使用してゲームパッドを取得し、ゲームパッドに関する情報をゲームパッドの情報 div に出力し、全体のボールの動きが始まる gameLoop() 関数が呼び出されます。

+ +
window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+
+  gameLoop();
+});
+ +

これで {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} イベントを使用して、ゲームパッドが再び切断されたかどうかを確認します。 もしそうならば、 {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} ループ (下記参照) を停止し、ゲームパッドの情報を元の状態に戻します。

+ +
window.addEventListener("gamepaddisconnected", function(e) {
+  gamepadInfo.innerHTML = "Waiting for gamepad.";
+
+  cancelRequestAnimationFrame(start);
+});
+ +

Chrome では異なる挙動になります。変数にゲームパッドの最新の状態を常に保存するのではなく、スナップショットを保存するだけなので、 Chrome で同じことを行うにはポーリングしてから {{ domxref("Gamepad") }} オブジェクトをコードで使用する必要があり、それは利用可能です。私たちはこれを {{ domxref("Window.setInterval()") }} オブジェクトが利用可能になると、ゲームパッド情報が出力され、ゲームループが開始され、 {{ domxref("Window.clearInterval()") }} を使用して間隔がクリアされます。 Chrome {{ domxref("Navigator.getGamepads()") }} の古いバージョンでは、 Webkit 接頭辞を使用して実装されています。下位互換性のために、接頭辞付きのバージョンと関数の標準バージョンの両方を検出して処理しようとします。

+ +
var interval;
+
+if (!('ongamepadconnected' in window)) {
+  // No gamepad events available, poll instead.
+  interval = setInterval(pollGamepads, 500);
+}
+
+function pollGamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  for (var i = 0; i < gamepads.length; i++) {
+    var gp = gamepads[i];
+    if (gp) {
+      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id +
+        ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+      gameLoop();
+      clearInterval(interval);
+    }
+  }
+}
+ +

今度はメインのゲームループです。ループが実行されるたびに、4つのボタンの1つが押されているかどうかがチェックされます。そうすると、a と b の移動変数の値を適切に更新し、 {{ cssxref("left") }} と {{ cssxref("top") }} のプロパティを更新し、その値を a および b とする。これはボールを画面の周りに動かす効果があります。 現在のバージョンの Chrome (この記事の執筆時点ではバージョン34) では、ボタンの値は {{ domxref("GamepadButton") }} オブジェクトではなく、 double 値の配列として保存されます。

+ +

この作業がすべて完了したら、 requestAnimationFrame() を使用して gameLoop() を再び実行して次のアニメーションフレームを要求します。

+ +
function buttonPressed(b) {
+  if (typeof(b) == "object") {
+    return b.pressed;
+  }
+  return b == 1.0;
+}
+
+function gameLoop() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  if (!gamepads) {
+    return;
+  }
+
+  var gp = gamepads[0];
+  if (buttonPressed(gp.buttons[0])) {
+    b--;
+  } else if (buttonPressed(gp.buttons[2])) {
+    b++;
+  }
+  if (buttonPressed(gp.buttons[1])) {
+    a++;
+  } else if (buttonPressed(gp.buttons[3])) {
+    a--;
+  }
+
+  ball.style.left = a * 2 + "px";
+  ball.style.top = b * 2 + "px";
+
+  start = requestAnimationFrame(gameLoop);
+}
+ +

完全な例: ゲームパッドの状態を表示する

+ +

この例では、 {{ domxref("Gamepad") }} オブジェクト、 {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベント、 {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} イベントを使用してシステムに接続されているすべてのゲームパッドの状態を表示します。デモを見て、Githubの完全なソースコードを見ることができます。

+ +
var haveEvents = 'ongamepadconnected' in window;
+var controllers = {};
+
+function connecthandler(e) {
+  addgamepad(e.gamepad);
+}
+
+function addgamepad(gamepad) {
+  controllers[gamepad.index] = gamepad;
+
+  var d = document.createElement("div");
+  d.setAttribute("id", "controller" + gamepad.index);
+
+  var t = document.createElement("h1");
+  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
+  d.appendChild(t);
+
+  var b = document.createElement("div");
+  b.className = "buttons";
+  for (var i = 0; i < gamepad.buttons.length; i++) {
+    var e = document.createElement("span");
+    e.className = "button";
+    //e.id = "b" + i;
+    e.innerHTML = i;
+    b.appendChild(e);
+  }
+
+  d.appendChild(b);
+
+  var a = document.createElement("div");
+  a.className = "axes";
+
+  for (var i = 0; i < gamepad.axes.length; i++) {
+    var p = document.createElement("progress");
+    p.className = "axis";
+    //p.id = "a" + i;
+    p.setAttribute("max", "2");
+    p.setAttribute("value", "1");
+    p.innerHTML = i;
+    a.appendChild(p);
+  }
+
+  d.appendChild(a);
+
+  // See https://github.com/luser/gamepadtest/blob/master/index.html
+  var start = document.getElementById("start");
+  if (start) {
+    start.style.display = "none";
+  }
+
+  document.body.appendChild(d);
+  requestAnimationFrame(updateStatus);
+}
+
+function disconnecthandler(e) {
+  removegamepad(e.gamepad);
+}
+
+function removegamepad(gamepad) {
+  var d = document.getElementById("controller" + gamepad.index);
+  document.body.removeChild(d);
+  delete controllers[gamepad.index];
+}
+
+function updateStatus() {
+  if (!haveEvents) {
+    scangamepads();
+  }
+
+  var i = 0;
+  var j;
+
+  for (j in controllers) {
+    var controller = controllers[j];
+    var d = document.getElementById("controller" + j);
+    var buttons = d.getElementsByClassName("button");
+
+    for (i = 0; i < controller.buttons.length; i++) {
+      var b = buttons[i];
+      var val = controller.buttons[i];
+      var pressed = val == 1.0;
+      if (typeof(val) == "object") {
+        pressed = val.pressed;
+        val = val.value;
+      }
+
+      var pct = Math.round(val * 100) + "%";
+      b.style.backgroundSize = pct + " " + pct;
+
+      if (pressed) {
+        b.className = "button pressed";
+      } else {
+        b.className = "button";
+      }
+    }
+
+    var axes = d.getElementsByClassName("axis");
+    for (i = 0; i < controller.axes.length; i++) {
+      var a = axes[i];
+      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
+      a.setAttribute("value", controller.axes[i] + 1);
+    }
+  }
+
+  requestAnimationFrame(updateStatus);
+}
+
+function scangamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  for (var i = 0; i < gamepads.length; i++) {
+    if (gamepads[i]) {
+      if (gamepads[i].index in controllers) {
+        controllers[gamepads[i].index] = gamepads[i];
+      } else {
+        addgamepad(gamepads[i]);
+      }
+    }
+  }
+}
+
+window.addEventListener("gamepadconnected", connecthandler);
+window.addEventListener("gamepaddisconnected", disconnecthandler);
+
+if (!haveEvents) {
+ setInterval(scangamepads, 500);
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}{{Spec2("Gamepad")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

diff --git a/files/ja/web/guide/api/index.html b/files/ja/web/guide/api/index.html new file mode 100644 index 0000000000..8ff10de7c1 --- /dev/null +++ b/files/ja/web/guide/api/index.html @@ -0,0 +1,25 @@ +--- +title: Web API ガイド +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - Web + - ガイド +translation_of: Web/Guide/API +--- +

ウェブには幅広い API があり、どんどん強力になって、もっと色々なことができるアプリケーションを作るために JavaScript から使用されます。それはウェブやローカルや、 Node.js などの技術を通じてサーバー上でも実行されます。このページではウェブ技術スタックで提供される API の完全な一覧を見ることができます。

+ +

アルファベット順の Web API

+ +

{{ListGroups}}

+ +

関連情報

+ + diff --git a/files/ja/web/guide/api/vibration/index.html b/files/ja/web/guide/api/vibration/index.html new file mode 100644 index 0000000000..49ab486128 --- /dev/null +++ b/files/ja/web/guide/api/vibration/index.html @@ -0,0 +1,101 @@ +--- +title: Vibration API +slug: Web/Guide/API/Vibration +tags: + - API + - Beginner + - Mobile + - Vibration +translation_of: Web/API/Vibration_API +--- +
{{DefaultAPISidebar("Vibration API")}}
+ +

現代のモバイル端末は、たいていバイブレーションハードウェアを内蔵しており、ソフトウェアのコードが端末を振動させることによりユーザーに物理的なフィードバックを与えることができます。 Vibration API はウェブアプリに、このハードウェアが存在すればアクセスすることができるようにし、端末が対応していない場合は何もしません。

+ +

バイブレーションの表現

+ +

バイブレーションはオン・オフのパルスのパターンで表され、様々な長さになることがあります。パターンは振動するミリ秒数を示す整数 1 つ、あるいはバイブレーションと休止時間のパターンを示す整数の配列で構成します。バイブレーションは {{domxref("Navigator.vibrate()")}} という単一のメソッドで制御します。

+ +

1 回のバイブレーション

+ +

1 個の値、または 1 個だけの値で構成される配列を指定することにより、バイブレーションハードウェアを 1 回振動させることができます:

+ +
window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+
+ +

どちらの例も、デバイスを 200 ミリ秒間振動させます。

+ +

バイブレーションパターン

+ +

値の配列は、デバイスが振動する時間と振動しない時間を交互に示します。配列内の各値は整数値に変換されて、デバイスを振動させるミリ秒数および振動させないミリ秒数として交互に解釈されます。例えば以下のようにします。

+ +
window.navigator.vibrate([200, 100, 200]);
+
+ +

これはデバイスを 200 ミリ秒間振動させて、その後再び 200 ミリ秒間振動させる前に 100 ミリ秒間振動を止めます。

+ +

バイブレーション/休止のペアは好きなだけ多く指定でき、またエントリ数は偶数・奇数のどちらでも可能です。各バイブレーション時間の終端で自動的にバイブレーションを止めますので、休止時間を最後のエントリとして与えなくてもよいことは注目に値します。

+ +

実行中のバイブレーションを取り消す

+ +

値 0、空の配列、あるいはすべての値が 0 の配列 を指定して {{domxref("Navigator.vibrate()")}} を呼び出すと、現在進行中のバイブレーションパターンを取り消します。

+ +

継続的なバイブレーション

+ +

基本的な setInterval および clearInterval のアクションにより、継続的なバイブレーションを生成できます:

+ +
var vibrateInterval;
+
+// 渡されたレベルでバイブレーションを開始
+function startVibrate(duration) {
+    navigator.vibrate(duration);
+}
+
+// バイブレーションを停止
+function stopVibrate() {
+    // インターバルをクリアして継続的なバイブレーションを停止
+    if(vibrateInterval) clearInterval(vibrateInterval);
+    navigator.vibrate(0);
+}
+
+// 与えられた時間とインターバルによる継続的なバイブレーションを開始
+// 数値が与えられるものとする
+function startPersistentVibrate(duration, interval) {
+    vibrateInterval = setInterval(function() {
+        startVibrate(duration);
+    }, interval);
+}
+ +

当然ながら、上記のコードスニペットは配列によるバイブレーションを考慮していません。配列に基づく継続的なバイブレーションでは、配列のアイテムの総数を計算して、その値を基にしてインターバル (おそらく、遅延時間を付加して) を作成することが必要でしょう。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Vibration API")}}{{Spec2("Vibration API")}}リンク先は最新の編集者草稿です。 W3C 版は勧告になりました。
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/ja/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html new file mode 100644 index 0000000000..d20617020b --- /dev/null +++ b/files/ja/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html @@ -0,0 +1,324 @@ +--- +title: HTML5 の動画へのキャプションと字幕の追加 +slug: >- + Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video +tags: + - Example + - Guide +translation_of: >- + Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video +--- +
+

他の記事で、 ブラウザーに依存しない動画プレイヤーの構築を、 {{ domxref("HTMLMediaElement") }} 及び {{ domxref("Window.fullScreen") }} API を使用して行う方法と、プレイヤーのスタイル付けの方法について見てきました。この記事では、同じプレイヤーと使って、 {{ domxref("Web_Video_Text_Tracks_Format","WebVTT 形式") }}及び {{ htmlelement("track") }} 要素を用いてキャプションや字幕を追加する方法を紹介します。

+
+ +

キャプション付きの動画の例

+ +

この記事ではキャプションが付いた動画プレイヤーの例を参照します。この例では Blender Foundation が作成した Sintel open movie を使用します。

+ +

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +
+

メモ: ソースコードは Github にあります。また実際の動画も見ることもできます。

+
+ +

HTML5 と動画のキャプション

+ +

動画プレイヤーにキャプションをつける方法について説明する前に、私達が知っておくべきいくつかのことについて説明します。

+ +

キャプション V.S. 字幕

+ +

Captions and subtitles are not the same thing: they have significantly different audiences, and convey different information, and it is recommended that you read up on the differences if you are not sure what they are. They are however implemented in the same way technically, so the material in this article will apply to both.

+ +

For this article we will refer to the text tracks displayed as subtitles, as their content is aimed at hearing people who have difficulty understanding the language of the film, rather than deaf or hard-of-hearing people.

+ +

<track> 要素

+ +

HTML5 allows us to specify subtitles for a video using the {{ htmlelement("track") }} element. The various attributes of this element allow us to specify such things as the type of content that we're adding, the language it's in, and of course a reference to the text file that contains the actual subtitle information.

+ +

WebVTT

+ +

The files that contain the actual subtitle data are simple text files that follow a specified format, in this case the Web Video Text Tracks (WebVTT) format. The WebVTT specification is still being worked on, but major parts of it are stable so we can use it today.

+ +

Video providers (such as the Blender Foundation) provide captions and subtitles in a text format with their videos, but they're usually in the SubRip Text (SRT) format. These can be easily converted to WebVTT using an online converter such as srt2vtt.

+ +

Modifications to the HTML and CSS

+ +

This section summarises the modifications made to the previous article's code in order to facilitate the addition of subtitles to the video. If you are not interested in this, and just want to get straight into the JavaScript and more relevant CSS, skip to the {{ anch("Subtitle implementation") }} section.
+
+ In this example we are using a different video, Sintel, as it actually has some speech in it and therefore is better for illustrating how subtitles work!

+ +

HTML Markup

+ +

As mentioned above, we need to make use of the new HTML5 <track> element to add our subtitle files to the HTML5 video. We actually have our subtitles in three different languages — English, German, and Spanish — so we will reference all three of the relevant VTT files by adding <track> elements inside our HTML5 <video> element:

+ +
<video id="video" controls preload="metadata">
+   <source src="video/sintel-short.mp4" type="video/mp4">
+   <source src="video/sintel-short.webm" type="video/webm">
+   <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
+   <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
+   <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
+</video>
+ +

As you can see, each <track> element has the following attributes set:

+ + + +

In addition to adding the <track> elements, we have also added a new button to control the subtitles menu that we will build. As a consequence, the video controls now look as follows:

+ +
<div id="video-controls" class="controls" data-state="hidden">
+   <button id="playpause" type="button" data-state="play">Play/Pause</button>
+   <button id="stop" type="button" data-state="stop">Stop</button>
+   <div class="progress">
+      <progress id="progress" value="0" min="0">
+         <span id="progress-bar"></span>
+      </progress>
+   </div>
+   <button id="mute" type="button" data-state="mute">Mute/Unmute</button>
+   <button id="volinc" type="button" data-state="volup">Vol+</button>
+   <button id="voldec" type="button" data-state="voldown">Vol-</button>
+   <button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
+   <button id="subtitles" type="button" data-state="subtitles">CC</button>
+</div>
+ +

CSS Changes

+ +

The video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward.
+
+ No image is used for the captions button, so it is simply styled as:

+ +
.controls button[data-state="subtitles"] {
+    height:85%;
+    text-indent:0;
+    font-size:16px;
+    font-size:1rem;
+    font-weight:bold;
+    color:#666;
+    background:#000;
+    border-radius:2px;
+}
+ +

There are also other CSS changes that are specific to some extra JavaScript implementation, but these will be mentioned at the appropriate place below.

+ +

Subtitle implementation

+ +

A lot of what we do to access the video subtitles revolves around JavaScript. Similar to the video controls, if a browser supports HTML5 video subtitles, there will be a button provided within the native control set to access them. However, since we have defined our own video controls, this button is hidden, and we need to define our own.

+ +

Browsers do vary as to what they support, so we will be attempting to bring a more unified UI to each browser where possible. There's more on browser compatibility issues later on.

+ +

Initial setup

+ +

As with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button:

+ +
var subtitles = document.getElementById('subtitles');
+ +

We also initially turn off all subtitles, in case the browser turns any of them on by default:

+ +
for (var i = 0; i < video.textTracks.length; i++) {
+   video.textTracks[i].mode = 'hidden';
+}
+ +

The video.textTracks property contains an array of all the text tracks attached to the video. We loop through each one and set its mode to hidden.

+ +

Note: The WebVTT API gives us access to all the text tracks that are defined for an HTML5 video using the <track> element.

+ +

Building a caption menu

+ +

Our aim is to use the subtitles button we added earlier to display a menu that allows users to choose which language they want the subtitles displayed in, or to turn them off entirely.
+
+ We have added the button, but before we make it do anything, we need to build the menu that goes with it. This menu is built dynamically, so that languages can be added or removed later by simply editing the <track> elements within the video's markup.

+ +

All we need to do is to go through the video's textTracks, reading their properties and building the menu up from there:

+ +
var subtitlesMenu;
+if (video.textTracks) {
+   var df = document.createDocumentFragment();
+   var subtitlesMenu = df.appendChild(document.createElement('ul'));
+   subtitlesMenu.className = 'subtitles-menu';
+   subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'));
+   for (var i = 0; i < video.textTracks.length; i++) {
+      subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label));
+   }
+   videoContainer.appendChild(subtitlesMenu);
+}
+ +

This code creates a {{ domxref("documentFragment") }}, which is used to hold an unordered list containing our subtitles menu. First of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one.

+ +

The creation of each list item and button is done by the createMenuItem() function, which is defined as follows:

+ +
var subtitleMenuButtons = [];
+var createMenuItem = function(id, lang, label) {
+   var listItem = document.createElement('li');
+   var button = listItem.appendChild(document.createElement('button'));
+   button.setAttribute('id', id);
+   button.className = 'subtitles-button';
+   if (lang.length > 0) button.setAttribute('lang', lang);
+   button.value = label;
+   button.setAttribute('data-state', 'inactive');
+   button.appendChild(document.createTextNode(label));
+   button.addEventListener('click', function(e) {
+      // Set all buttons to inactive
+      subtitleMenuButtons.map(function(v, i, a) {
+         subtitleMenuButtons[i].setAttribute('data-state', 'inactive');
+      });
+      // Find the language to activate
+      var lang = this.getAttribute('lang');
+      for (var i = 0; i < video.textTracks.length; i++) {
+         // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
+         if (video.textTracks[i].language == lang) {
+            video.textTracks[i].mode = 'showing';
+            this.setAttribute('data-state', 'active');
+         }
+         else {
+            video.textTracks[i].mode = 'hidden';
+         }
+      }
+      subtitlesMenu.style.display = 'none';
+   });
+   subtitleMenuButtons.push(button);
+   return listItem;
+}
+ +

This function builds the required {{ htmlelement("li") }} and {{ htmlelement("button") }} elements, and returns them so they can be added to the subtitles menu list. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. This is done by simply setting the required subtlte's mode attribute to showing, and setting the others to hidden.

+ +

Once the menu is built, it is then inserted into the DOM at the bottom of the videoContainer.
+
+ Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it:

+ +
subtitles.addEventListener('click', function(e) {
+   if (subtitlesMenu) {
+      subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block');
+   }
+});
+ +

Subtitle menu CSS

+ +

We also added some rudimentary styling for the newly created subtitles menu:

+ +
.subtitles-menu {
+    display:none;
+    position:absolute;
+    bottom:14.8%;
+    right:20px;
+    background:#666;
+    list-style-type:none;
+    margin:0;
+    padding:0;
+    width:100px;
+    padding:10px;
+}
+
+.subtitles-menu li {
+    padding:0;
+    text-align:center;
+}
+
+.subtitles-menu li button {
+    border:none;
+    background:#000;
+    color:#fff;
+    cursor:pointer;
+    width:90%;
+    padding:2px 5px;
+    border-radius:2px;
+}
+ +

Styling the displayed subtitles

+ +

One of the less well known about and supported features of WebVTT is the ability to style the individual subtitles (something called text cues) via CSS Extensions.

+ +

The ::cue pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue. There are only a handful of CSS properties that can be applied to a text cue:

+ + + +

For example, to change the text colour of the text track cues you can write:

+ +
::cue {
+   color:#ccc;
+}
+ +

If the WebVTT file uses voice spans, which allow cues to be defined as having a particular "voice":

+ +
0
+00:00:00.000 --> 00:00:12.000
+<v Test>[Test]</v>
+ +

Then this specific 'voice' will be stylable like so:

+ +
::cue(v[voice='Test']) {
+   color:#fff;
+   background:#0095dd;
+}
+ +
+

Note: Some of the styling of cues with ::cue currently works on Chrome, Opera, and Safari, but not yet on Firefox.

+
+ +

Browser Compatibility

+ +

Browser support for WebVTT and the <track> element is fairly good, although some browsers differ slightly in their implementation.

+ +

Internet Explorer

+ +

Internet Explorer 10+ subtitles are enabled by default, and the default controls contain a button and a menu that offers the same functionality as the menu we just built. The default attribute is also supported.

+ +
+

Note: IE will completely ignore WebVTT files unless you define the MIME type. This can easily be done by adding an .htaccess file to an appropriate directory that contains AddType text/vtt .vtt.

+
+ +

Safari

+ +

Safari 6.1+ has similar support to Internet Explorer 10+, displaying a menu with the different available options, with the addition of an "Auto" option, which allows the browser to choose.

+ +

Chrome and Opera

+ +

These browsers have similar implementations again: subtitles are enabled by default and the default control set contains a 'cc' button that turns subtitles on and off. Chrome and Opera ignore the default attribute on the <track> element and will instead try to match the browser's language to the subtitle's language.

+ +

Firefox

+ +

Firefox's implementation was completely broken due to a bug, leading to Mozilla turning off WebVTT support by default (you can turn it on via the media.webvtt.enabled flag.) However, this bug looks to have been fixed and WebVTT support re-enabled as of Gecko 31, so this will not be a problem for Firefox final release users for much longer (on Gecko 29 as of the time of this writing) this has been fixed as of Firefox 31, and everything works as it should.

+ +

Plugins

+ +

If, after reading through this article you decide that you can't be bothered to do all of this and want someone else to do it for you, there are plenty of plugins out there that offer caption and subtitle support that you can use.

+ +
+
plyr.io
+
This modern video player implements subtitles in both SRT and WebVTT file formats.
+
playr
+
This small plugin implements subtitles, captions, and chapters as well as both WebVTT and SRT file formats.
+
Flowplayer
+
HTML5 player supporting WebVTT.
+
jwplayer
+
This video player is very extensive and does a lot more than simply support video captions. It supports the WebVTT, SRT and DFXP formats.
+
MediaElement.js
+
Another complete video player that also support video captions, albeit only in SRT format.
+
LeanBack Player
+
Yet another video player that supports WebVTT captions as well as providing other standard player functionality.
+
SublimeVideo
+
This player also supports captions through WebVTT and SRT files.
+
Video.js
+
Supports WebVTT video subtitles.
+
Radiant Media Player
+
Supports multi-languages WebVTT closed captions
+
+ +
+

Note: You can find an excellent list of HTML5 Video Players and their current "state" at HTML5 Video Player Comparison.

+
diff --git a/files/ja/web/guide/audio_and_video_delivery/index.html b/files/ja/web/guide/audio_and_video_delivery/index.html new file mode 100644 index 0000000000..41cec436d5 --- /dev/null +++ b/files/ja/web/guide/audio_and_video_delivery/index.html @@ -0,0 +1,553 @@ +--- +title: 音声と動画の配信 +slug: Web/Guide/Audio_and_video_delivery +tags: + - Audio + - HTML5 + - Media + - NeedsTranslation + - Video +translation_of: Web/Guide/Audio_and_video_delivery +--- +
+

「静的」メディアファイルからアダプティブライブストリームまで、さまざまな方法で Web 上にオーディオとビデオを配信できます。この記事は、Web ベースのメディアのさまざまな配信メカニズムおよび一般的なブラウザとの互換性を探るための出発点として意図されています。

+
+ +

The Audio and Video Elements

+ +

Whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's {{ htmlelement("audio")}} and {{ htmlelement("video")}} elements remains pretty much the same. Currently, to support all browsers we need to specify two formats, although with the adoption of MP3 and MP4 formats in Firefox and Opera, this is changing fast. You can find compatibility information in the following places:

+ + + +

To deliver video and audio, the general workflow is usually something like this:

+ +
    +
  1. Check what format the browser supports via feature detection (usually a choice of two, as stated above.)
    2. +
  2. If the browser doesn't support playback of any of the provided formats natively, provide a fallback (such as a Flash movie.)
    3. +
  3. Identify how you want to play/instantiate the media (e.g. a {{ htmlelement("video") }} element, or document.createElement('video') perhaps?)
    4. +
  4. Deliver the media file to the player.
    5. +
+ +

HTML Audio

+ +
<audio controls preload="auto">
+  <source src="audiofile.mp3" type="audio/mpeg">
+
+  <!-- fallback for browsers that don't suppport mp3 -->
+  <source src="audiofile.ogg" type="audio/ogg">
+
+  <!-- fallback for browsers that don't support audio tag -->
+  <a href="audiofile.mp3">download audio</a>
+</audio>
+ +

The code above will create an audio player that attempts to preload as much audio as possible for smooth playback.

+ +
+

Note: The preload attribute may be ignored by some mobile browsers.

+
+ +

For further info see Cross Browser Audio Basics (HTML5 Audio In Detail)

+ +

HTML Video

+ +
<video controls width="640" height="480" poster="initialimage.png" autoplay muted>
+  <source src="videofile.mp4" type="video/mp4">
+
+  <!-- fallback for browsers that don't suppport mp4 -->
+  <source src="videofile.webm" type="video/webm">
+
+  <!-- specifying subtitle files -->
+  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
+  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
+
+  <!-- fallback for browsers that don't support video tag -->
+  <a href="videofile.mp4">download video</a>
+</video>
+ +

The code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played. We instruct the video to autoplay but to be muted by default.

+ +
+

Note: The autoplay attribute may be ignored by some mobile browsers.

+
+ +

For further info see <video> element and Creating a cross-browser video player.

+ +

Audio and Video Fallback

+ +

You can create a more comprehensive Fallback using Flash. Using flashmediaelement.swf is one way.

+ +
<audio controls>
+  <source src="audiofile.mp3" type="audio/mpeg">
+  <source src="audiofile.ogg" type="audio/ogg">
+  <!-- fallback for non supporting browsers goes here -->
+  <a href="audiofile.mp3">download audio</a>
+  <object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf">
+    <param name="movie" value="flashmediaelement.swf" />
+    <param name="flashvars" value="controls=true&isvideo=false&file=audiofile.mp3" />
+  </object>
+</audio>
+ +

The process is very similar with video — just remember to set isvideo=true in the flashvars value parameters.
+
+ More options for Fallbacks.

+ +

JavaScript Audio

+ +
var myAudio = document.createElement('audio');
+
+if (myAudio.canPlayType('audio/mpeg')) {
+  myAudio.setAttribute('src','audiofile.mp3');
+} else if (myAudio.canPlayType('audio/ogg')) {
+  myAudio.setAttribute('src','audiofile.ogg');
+}
+
+myAudio.currentTime = 5;
+myAudio.play();
+ +

We set the source of the audio depending on the type of audio file the browser supports, then set the play-head 5 seconds in and attempt to play it.

+ +
+

Note: Play will be ignored by some mobile browsers unless issued by a user-initiated event.

+
+ +

It's also possible to feed an {{ htmlelement("audio") }} element a base64 encoded WAV file, allowing to generate audio on the fly:

+ +
<audio id="player" src="data:audio/x-wav;base64,UklGRvC..."></audio>
+ +

Speak.js employs this technique. Try the demo.

+ +

JavaScript Video

+ +
var myVideo = document.createElement('video');
+
+if (myVideo.canPlayType('video/mp4')) {
+  myVideo.setAttribute('src','videofile.mp4');
+} else if (myVideo.canPlayType('video/webm')) {
+  myVideo.setAttribute('src','videofile.webm');
+}
+
+myVideo.width = 480;
+myVideo.height = 320;
+ +

We set the source of the video depending on the type of video file the browser supports we then set the width and height of the video.

+ +

Web Audio API

+ +
  var context;
+  var request;
+  var source;
+
+  try {
+    context = new AudioContext();
+    request = new XMLHttpRequest();
+    request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
+    request.responseType = "arraybuffer";
+
+    request.onload = function() {
+      context.decodeAudioData(request.response, function(buffer) {
+        source = context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(context.destination);
+        // auto play
+        source.start(0); // start was previously noteOn
+      });
+    };
+
+    request.send();
+
+  } catch(e) {
+    alert('web audio api not supported');
+  }
+ +

In this example we retrieve an MP3 file via XHR, load it into a source and play it (Try it for yourself). Find more about Web Audio API basics in Using the Web Audio API.

+ +

getUserMedia / Stream API

+ +

It's also possible to retrieve a live stream from a webcam and/or microphone using getUserMedia and the Stream API. This makes up part of a wider technology known as WebRTC (Web Real-Time Communications) and is compatible with the latest versions of Chrome, Firefox and Opera.

+ +

To grab the stream from your webcam, first set up a {{htmlelement("video")}} element:

+ +
<video id="webcam" width="480" height="360"></video>
+ +

Next, if supported connect the webcam source to the video element:

+ +
if (navigator.mediaDevices) {
+  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+  .then(function onSuccess(stream) {
+    var video = document.getElementById('webcam');
+    video.autoplay = true;
+    video.srcObject = stream;
+  })
+  .catch(function onError() {
+    alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?');
+  });
+} else {
+  alert('getUserMedia is not supported in this browser.');
+}
+
+ +

To find out more, read our {{domxref("MediaDevices.getUserMedia")}} page.

+ +

Mediastream Recording

+ +

New standards are being rolled out to allow your browser to grab media from your mic or camera using getUserMedia and record it instantly using the new MediaRecorder API. You take the stream you receive from getUserMedia, pass it to a MediaRecorder object, take the resulting output and feed it to your audio or video source*.
+
+ The main mechanism is outlined below:

+ +
navigator.mediaDevices.getUserMedia({audio:true})
+  .then(function onSuccess(stream) {
+    var recorder = new MediaRecorder(stream);
+
+    var data = [];
+    recorder.ondataavailable = function(e) {
+      data.push(e.data);
+    };
+    recorder.start();
+    recorder.onerror = function(e) {
+      throw e.error || new Error(e.name); // e.name is FF non-spec
+    }
+    recorder.onstop = function(e) {
+      var audio = document.createElement('audio');
+      audio.src = window.URL.createObjectURL(new Blob(data));
+    }
+    setTimeout(function() {
+      rec.stop();
+    }, 5000);
+  })
+  .catch(function onError(error) {
+    console.log(error.message);
+  });
+
+ +

See MediaRecorder API for more details.

+ +

Media Source Extensions (MSE)

+ +

Media Source Extensions is a W3C working draft that plans to extend {{domxref("HTMLMediaElement")}} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.

+ +

Encrypted Media Extensions (EME)

+ +

Encrypted Media Extensions is a W3C proposal to extend HTMLMediaElement, providing APIs to control playback of protected content.
+
+ The API supports use cases ranging from simple clear key decryption to high value video (given an appropriate user agent implementation). License/key exchange is controlled by the application, facilitating the development of robust playback applications supporting a range of content decryption and protection technologies.
+
+ One of the principle uses of EME is to allow browsers to implement DRM (Digital Rights Management), which helps to prevent web-based content (especially video) from being copied.

+ +

Adaptive Streaming

+ +

New formats and protocols are being rolled out to facilitate adaptive streaming. Adaptive streaming media means that the bandwidth and typically quality of the stream can change in real-time in reaction to the user's available bandwidth. Adaptive streaming is often used in conjunction with live streaming where smooth delivery of audio or video is paramount.

+ +

The main formats used for adaptive streaming are HLS and MPEG-DASH. MSE has been designed with DASH in mind. MSE defines byte streams according to ISOBMFF and M2TS (both supported in DASH, the latter supported in HLS). Generally speaking, if you are interested in standards, are looking for flexibility, or wish to support most modern browsers, you are probably better off with DASH.

+ +
+

Note: Currently Safari does not support DASH although dash.js will work on newer versions of Safari scheduled for release with OSX Yosemite.

+
+ +

DASH also provides a number of profiles including simple onDemand profiles that no preprocessing and splitting up of media files. There are also a number of cloud based services that will convert your media to both HLS and DASH.
+
+ For further information see Live streaming web audio and video.

+ + + +

Customising Your Media Player

+ +

You may decide that you want your audio or video player to have a consistent look across browsers, or just wish to tweak it to match your site. The general technique for achieving this is to omit the controls attribute so that the default browser controls are not displayed, create custom controls using HTML and CSS, then use JavaScript to link your controls to the audio/video API.

+ +

If you need something extra, it's possible to add features that are not currently present in default players, such as playback rate, quality stream switches or even audio spectrums. You can also choose how to make your player responsive — for example you might remove the progress bar under certain conditions.

+ +

You may detect click, touch and/or keyboard events to trigger actions such as play, pause and scrubbing. It's often important to remember keyboard controls for user convenience and accessibility.

+ +

A quick example — first set up your audio and custom controls in HTML:

+ +
  <audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio>
+  <button id="my-control">play</button>
+ +

add a bit of JavaScript to detect events to play and pause the audio:

+ +
window.onload = function() {
+
+  var myAudio = document.getElementById('my-audio');
+  var myControl = document.getElementById('my-control');
+
+  function switchState() {
+    if (myAudio.paused == true) {
+      myAudio.play();
+      myControl.innerHTML = "pause";
+    } else {
+      myAudio.pause();
+      myControl.innerHTML = "play";
+    }
+  }
+
+  function checkKey(e) {
+    if (e.keycode == 32 ) { //spacebar
+      switchState();
+    }
+  }
+
+  myControl.addEventListener('click', function() {
+    switchState();
+  }, false);
+
+  window.addEventListener( "keypress", checkKey, false );
+}
+ +

You can try this example out here. For more information, see Creating your own custom audio player.

+ +

Other tips for audio/video

+ +

Stopping the download of media

+ +

While stopping the playback of media is as easy as calling the element's pause() method, the browser keeps downloading the media until the media element is disposed of through garbage collection.

+ +

Here's a trick that stops the download at once:

+ +
var mediaElement = document.querySelector("#myMediaElementID");
+mediaElement.removeAttribute("src");
+mediaElement.load();
+
+ +

By removing the media element's src attribute and invoking the load() method, you release the resources associated with the video, which stops the network download. You must call load() after removing the attribute, because just removing the src attribute does not invoke the load algorithm. If the <video> element also has <source> element descendants, those should also be removed before calling load().

+ +

Note that just setting the src attribute to an empty string will actually cause the browser to treat it as though you're setting a video source to a relative path. This causes the browser to attempt another download to something that is unlikely to be a valid video.

+ +

Seeking through media

+ +

Media elements provide support for moving the current playback position to specific points in the media's content. This is done by setting the value of the currentTime property on the element; see {{ domxref("HTMLMediaElement") }} for further details on the element's properties. Simply set the value to the time, in seconds, at which you want playback to continue.

+ +

You can use the element's seekable property to determine the ranges of the media that are currently available for seeking to. This returns a {{ domxref("TimeRanges") }} object listing the ranges of times that you can seek to.

+ +
var mediaElement = document.querySelector('#mediaElementID');
+mediaElement.seekable.start(0);  // Returns the starting time (in seconds)
+mediaElement.seekable.end(0);    // Returns the ending time (in seconds)
+mediaElement.currentTime = 122; // Seek to 122 seconds
+mediaElement.played.end(0);      // Returns the number of seconds the browser has played
+
+ +

Specifying playback range

+ +

When specifying the URI of media for an {{ HTMLElement("audio") }} or {{ HTMLElement("video") }} element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.

+ +

A time range is specified using the syntax:

+ +
#t=[starttime][,endtime]
+ +

The time can be specified as a number of seconds (as a floating-point value) or as an hours/minutes/seconds time separated with colons (such as 2:05:01 for 2 hours, 5 minutes, and 1 second).

+ +

A few examples:

+ +
+
http://example.com/video.ogv#t=10,20
+
Specifies that the video should play the range 10 seconds through 20 seconds.
+
http://example.com/video.ogv#t=,10.5
+
Specifies that the video should play from the beginning through 10.5 seconds.
+
http://example.com/video.ogv#t=,02:00:00
+
Specifies that the video should play from the beginning through two hours.
+
http://example.com/video.ogv#t=60
+
Specifies that the video should start playing at 60 seconds and play through the end of the video.
+
+ +
+

Note: The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the Media Fragments URI specification implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.

+
+ +

Error handling

+ +

Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, error handling has been revised to match the latest version of the HTML5 specification. Instead of the error event being dispatched to the media element itself, it now gets delivered to the child {{ HTMLElement("source") }} elements corresponding to the sources resulting in the error.

+ +

This lets you detect which sources failed to load, which may be useful. Consider this HTML:

+ +
<video>
+<source id="mp4_src"
+  src="video.mp4"
+  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+</source>
+<source id="3gp_src"
+  src="video.3gp"
+  type='video/3gpp; codecs="mp4v.20.8, samr"'>
+</source>
+<source id="ogg_src"
+  src="video.ogv"
+  type='video/ogv; codecs="theora, vorbis"'>
+</source>
+</video>
+ +

Since Firefox doesn't support MP4 and 3GP on some platforms due to their patent-encumbered nature, the {{ HTMLElement("source") }} elements with the IDs "mp4_src" and "3gp_src" will receive error events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.

+ +

Checking whether the browser supports the supplied formats

+ +

Use the following verified sources within your audio and video elements to check support.

+ + + +

If these don't play then the browser you are testing doesn't support the given format. Consider using a different format or using a fallback.
+
+ If these work but the files you are supplying don't, there are two possible issues:

+ +

1. The media server is not delivering the correct mime types with the file

+ +

Although this is usually supported, you may need to add the following to your media server's .htaccess file.

+ +
# AddType TYPE/SUBTYPE EXTENSION
+
+AddType audio/mpeg mp3
+AddType audio/mp4 m4a
+AddType audio/ogg ogg
+AddType audio/ogg oga
+
+AddType video/mp4 mp4
+AddType video/mp4 m4v
+AddType video/ogg ogv
+AddType video/webm webm
+AddType video/webm webmv
+ +

2. Your files have been encoded incorrectly

+ +

Your files may have been encoded incorrectly — try encoding using one of the following tools, which are proven to be pretty reliable:

+ + + +

Detecting when no sources have loaded

+ +

To detect that all child {{ HTMLElement("source") }} elements have failed to load, check the value of the media element's networkState attribute. If this is HTMLMediaElement.NETWORK_NO_SOURCE, you know that all the sources failed to load.

+ +

If at that point you add another source, by inserting a new {{ HTMLElement("source") }} element as a child of the media element, Gecko attempts to load the specified resource.

+ +

Showing fallback content when no source could be decoded

+ +

Another way to show the fallback content of a video, when none of the sources could be decoded in the current browser, is to add an error handler on the last source element. Then you can replace the video with its fallback content:

+ +
<video controls>
+  <source src="dynamicsearch.mp4" type="video/mp4"></source>
+  <a href="dynamicsearch.mp4">
+    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
+  </a>
+  <p>Click image to play a video demo of dynamic app search</p>
+</video>
+
+
+ +
var v = document.querySelector('video'),
+    sources = v.querySelectorAll('source'),
+    lastsource = sources[sources.length-1];
+lastsource.addEventListener('error', function(ev) {
+  var d = document.createElement('div');
+  d.innerHTML = v.innerHTML;
+  v.parentNode.replaceChild(d, v);
+}, false);
+
+ +

Audio/Video JavaScript Libraries

+ +

A number of audio and video JavaScript libaries exist. The most popular libraries allow you to choose a consistent player design over all browsers and provide a fallback for browsers that don't support audio and video natively. Fallbacks often use Adobe Flash or Microsoft Silverlight plugins. Other functionality such as the track element for subtitles can also be provided through media libraries.

+ +

Audio only

+ + + +

Video only

+ + + +

Audio and Video

+ + + +

Web Audio API

+ + + +

Basic tutorials

+ +
+
Creating a cross-browser video player
+
A guide to creating a basic cross browser video player using the {{ htmlelement ("video") }} element.
+
Video player styling basics
+
With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.
+
Cross-browser audio basics
+
+
+

This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.

+
+
+
Media buffering, seeking, and time ranges
+
Sometimes it's useful to know how much {{ htmlelement("audio") }} or {{ htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using TimeRanges, and other features of the media API.
+
HTML5 playbackRate explained
+
The playbackRate property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.
+
Using the Web Audio API
+
Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.
+
+ +

Streaming media tutorials

+ +
+
Live streaming web audio and video
+
Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.
+
Setting up adaptive streaming media sources
+
Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)
+
DASH Adaptive Streaming for HTML 5 Video
+
Details how to set up adaptive streaming using DASH and WebM.
+
+ +

Advanced tutorials

+ +
+
Adding captions and subtitles to HTML5 video
+
This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using Web_Video_Text_Tracks_Format and the {{ htmlelement("track") }} element.
+
Writing Web Audio API code that works in every browser
+
A guide to writing cross browser Web Audio API code.
+
H.264 support in Firefox
+
This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.
+
Easy audio capture with the MediaRecorder API
+
Explains the basics of using the MediaRecorder API to directly record a media stream.
+
+ +
+

Note: Firefox OS versions 1.3 and above support the RTSP protocol for streaming video delivery. A fallback solution for older versions would be to use <video> along with a suitable format for Gecko (such as WebM) to serve fallback content. More information will be published on this in good time.

+
+ +

References

+ + diff --git a/files/ja/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html b/files/ja/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html new file mode 100644 index 0000000000..5fff3a2948 --- /dev/null +++ b/files/ja/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html @@ -0,0 +1,271 @@ +--- +title: ウェブの音声や動画のライブストリーミング +slug: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video +tags: + - ガイド + - 適応型ストリーミング +translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video +--- +
+

ライブストリーミング技術は、よくスポーツやコンサートなどのイベントの中継や、もっと一般的にはテレビやラジオの番組の配信などによく採用されています。よくストリーミングと略されるライブストリーミングは、コンピューターや機器へメディアを「ライブ」で転送するプロセスです。これは実に複雑で数多くの変量がある初期段階の主題ですので、この記事では主題を紹介し、どのように始めることができるかを説明します。

+
+ +

メディアをブラウザーにストリーミングする際に考慮しなければならないことは、有限のファイルを再生するのではなく、その場で作成されているファイルを中継しており、あらかじめ開始または終了が決められていないという点です。

+ +

ストリームメディアと固定メディアの主な違い

+ +

In this case, we are using static media to describe media that is represented by a file, whether it be an mp3 or WebM file. This file sits on a server and can be delivered — like most other files — to the browser. This is often known as a progressive download.

+ +

Live streamed media lacks a finite start and end time as rather than a static file, it is a stream of data that the server passes on down the line to the browser and is often adaptive (see below). Usually, we require different formats and special server-side software to achieve this.

+ +

適応型ストリーミング

+ +

One of the main priorities for live streaming is to keep the player synchronized with the stream: adaptive streaming is a technique for doing this in the case of low bandwidth. The idea is that the data transfer rate is monitored and if it looks like it's not keeping up, we drop down to a lower bandwidth (and consequently lower quality) stream. In order to have this capability, we need to use formats that facilitate this. Live streaming formats generally allow adaptive streaming by breaking streams into a series of small segments and making those segments available at different qualities and bit rates.

+ +

音声や動画のオンデマンドストリーミング

+ +

Streaming technology is not used exclusively for live streams. It can also be used instead of the traditional progressive download method for Audio and Video on demand:

+ +

There are several advantages to this:

+ + + +

ストリーミングプロトコル

+ +

While static media is usually served over HTTP, there are several protocols for serving adaptive streams; let's take a look at the options.

+ +

HTTP

+ +

For now, HTTP is by far the most commonly supported protocol used to transfer media on demand or live.

+ +

RTMP

+ +

Real Time Messaging Protocol (RTMP) is a proprietary protocol developed by Macromedia (now Adobe) and supported by the Adobe Flash plugin. RTMP comes in various flavours including RTMPE (Encrypted), RTMPS (Secure over SSL/TLS) and RTMPT (encapsulated within HTTP requests).

+ +

RTSP

+ +
+

Real Time Streaming Protocol (RTSP) controls media sessions between endpoints and is often used together with Real-time Transport Protocol (RTP) and with Real-time Control Protocol (RTCP) for media stream delivery. Using RTP with RTCP allows for adaptive streaming. This is not yet supported natively in most browsers, but be aware that Firefox OS 1.3 supports RTSP.
+
+ Note: some vendors implement propriety transport protocols, such as RealNetworks and their Real Data Transport (RDT).

+
+ +

RTSP 2.0

+ +

RTSP 2.0 is currently in development and is not backward compatible with RTSP 1.0.

+ +
+

Important: Although the {{ htmlelement("audio") }} and {{ htmlelement("video") }} tags are protocol agnostic, no browser currently supports anything other than HTTP without requiring plugins, although this looks set to change. Protocols other than HTTP may also be subject to blocking from firewalls or proxy servers.

+
+ +

ストリーミングプロトコルの利用

+ +

The process of using the various protocols is reassuringly familiar if you are used to working with media over HTTP.

+ +

For example:

+ +
<video src="rtsp://myhost.com/mymedia.format">
+ <!-- Fallback here -->
+</video>
+ +

Media Source Extensions (MSE)

+ +

Media Source Extensions is a W3C working draft that plans to extend {{ domxref("HTMLMediaElement") }} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.
+
+ For example, you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE.

+ +
+

Note: Time Shifting is the process of consuming a live stream sometime after it happened.

+
+ +

動画ストリーミングファイル形式

+ +

A couple of HTTP-based live streaming video formats are beginning to see support across browsers.

+ +
+

Note: You can find a guide to encoding HLS and MPEG-DASH for use on the web at Setting up adaptive streaming media sources.

+
+ +

MPEG-DASH

+ +

DASH stands for Dynamic Adaptive Streaming over HTTP and is a new format that has recently seen support added to Chrome, and Internet Explorer 11 running on Windows 8.1. It is supported via Media Source Extensions which are used by JavaScript libraries such as DASH.js. This approach allows us to download chunks of the video stream using XHR and "append" the chunks to the stream that's played by the {{ htmlelement("video") }} element. So for example, if we detect that the network is slow, we can start requesting lower quality (smaller) chunks for the next segment. This technology also allows an advertising segment to be appended/inserted into the stream.

+ +
+

Note: you can also use WebM with the MPEG DASH adaptive streaming system.

+
+ +

HLS

+ +

HLS or HTTP Live Streaming is a protocol invented by Apple Inc and supported on iOS, Safari and the latest versions of Android browser / Chrome. HLS is also adaptive.
+
+ HLS can also be decoded using JavaScript, which means we can support the latest versions of Firefox, Chrome and Internet Explorer 10+. See this HTTP Live Streaming JavaScript player.
+
+ At the start of the streaming session, an extended M3U (m3u8) playlist is downloaded. This contains the metadata for the various sub-streams that are provided.

+ +

ストリーミングファイル形式の対応

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザーDASHHLSOpus (Audio)
Firefox 32✓ [1]✓ [2]✓ 14+
Safari 6+ ✓ 
Chrome 24+✓ [1]✓ 
Opera 20+✓ [1]  
Internet Explorer 10+✓ 11✓ [2] 
Firefox Mobile✓✓✓
Safari iOS6+ ✓ 
Chrome Mobile✓✓ [2] 
Opera Mobile✓ [1]✓ 
Internet Explorer Mobile✓ 11✓ [2] 
Android✓  
+ +

[1] Via JavaScript and MSE

+ +

[2] Via JavaScript and a CORS Proxy

+ +

Video Fallbacks

+ +

Between DASH and HLS we can cover a significant portion of modern browsers but we still need a fallback if we want to support the rest.
+
+ One popular approach is to use a Flash fallback that supports RTMP. Of course, we then have the issue that we need to encode in three different formats.

+ +

音声ストリーミングファイル形式

+ +

There are also some audio formats beginning to see support across browsers.

+ +

Opus

+ +

Opus is a royalty-free and open format that manages to optimize quality at various bit-rates for different types of audio. Music and speech can be optimized in different ways and Opus uses the SILK and CELT codecs to achieve this.
+
+ Currently, Opus is supported by Firefox desktop and mobile as well as the latest versions of desktop Chrome and Opera.

+ +
+

Note: Opus is a mandatory format for WebRTC browser implementations.

+
+ +

MP3, AAC, Ogg Vorbis

+ +

Most common audio formats can be streamed using specific server-side technologies.

+ +

Note: It's potentially easier to stream audio using non-streaming formats because unlike video there are no keyframes.

+ +

サーバー側ストリーミング技術

+ +

In order to stream live audio and video, you will need to run specific streaming software on your server or use third-party services.

+ +

GStreamer

+ +

GStreamer is an open source cross-platform multimedia framework that allows you to create a variety of media-handling components, including streaming components. Through its plugin system, GStreamer provides support for more than a hundred codecs (including MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV, and FLV.)

+ +

GStreamer plugins such as souphttpclientsink and shout2send exist to stream media over HTTP. You can also integrate with Python's Twisted framework or use something like Flumotion (open source streaming software).

+ +

For RTMP transfer you can use the Nginx RTMP Module.

+ +

SHOUTcast

+ +

SHOUTcast is a cross-platform proprietary technology for streaming media. Developed by Nullsoft, it allows digital audio content in MP3 or AAC format to be broadcast. For web use, SHOUTcast streams are transmitted over HTTP.

+ +

Note: SHOUTcast URLs may require a semi-colon to be appended to them.

+ +

Icecast

+ +

The Icecast server is an open source technology for streaming media. Maintained by the Xiph.org Foundation, it streams Ogg Vorbis/Theora as well as MP3 and AAC format via the SHOUTcast protocol.

+ +

Note: SHOUTcast and Icecast are among the most established and popular technologies, but there are many more streaming media systems available.

+ +

ストリーミングサービス

+ +

Although you can install software like GStreamer, SHOUTcast and Icecast you will also find a lot of third-party streaming services that will do much of the work for you.

+ +

関連情報

+ + diff --git a/files/ja/web/guide/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.html b/files/ja/web/guide/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.html new file mode 100644 index 0000000000..fccd84627b --- /dev/null +++ b/files/ja/web/guide/audio_and_video_delivery/setting_up_adaptive_streaming_media_sources/index.html @@ -0,0 +1,300 @@ +--- +title: Setting up adaptive streaming media sources +slug: Web/Guide/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources +tags: + - Audio + - HLS + - HTML5 + - HTTP ライブストリーミング + - MPEG-DASH + - Video + - adaptive streaming +translation_of: Web/Guide/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources +--- +
+

たとえば、 HTML5 メディア要素内で利用するために、サーバー上の適応型ストリーミングメディアソースを設定するとします。あなたはどうしますか？この記事では、最も一般的な形式である MPEG-DASH と HLS (HTTP Live Streaming) の二つについて見ていきます。

+
+ +

フォーマットの選択

+ +

アダプティブ・ストリーミング・フォーマットに関しては、選択肢がたくさんあります。私たちは次の2つを選ぶことにしました。これらはモダンブラウザがサポートすることができます。

+ + + +

アダプティブストリーミングを行うためにメディアをチャンクに分割します。いくらかの時間ごとに複数の異なるクオリティのファイルを提供することが必要です。よりたくさんのビットレートでエンコードを行い、より細かく時間を分割すればより 'アダプティブ' なストリーミングになりますが、通常はサイズとエンコード時間とアダプティブさの間でバランスを取ります。

+ +

The good news is that once we have encoded our media in the appropriate format we are pretty good to go. HTTP上のアダプティブストリーミングのためには特別なサーバーサイドのコンポーネントは必要ありません。

+ +

Both MPEG-DASH and HLS use a playlist format to structure the component piece of media that make the possible streams. Various bitrate streams are broken into segments and placed in appropriate server folders — we have to provide our media players with a link to lookup files or playlists specifying the name and location of these stream folders.

+ +

MPEG-DASH エンコーディング

+ +

MPEG-DASH は従来のHTTP Webサーバーでメディアコンテンツのアダプティブビットレートストリーミングを可能にする技術です。

+ +

Media Presentation Description (MPD) ファイルが複数のストリームの解像度やコーデックや帯域情報などを持ちます。video要素の src 属性では、メディアを指定する代わりにMPDを指定します。

+ +

The MPD file tells the browser where the various pieces of media are located, it also includes meta data such as mimeType and codecs and there are other details such as byte-ranges in there too - it is an XML document and in many cases will be generated for you.

+ +

There are a few profiles we can use. We're going to take a look at Ondemand profile for Video On Demand (VOD) and the LIVE profile.

+ +

For live services streaming, the LIVE profile is a requirement. The stream switching capabilities are identical between the profiles.

+ +

Other reasons to use LIVE profile over Ondemand for VOD content may be:

+ +
    +
  1. クライアントかサーバーがレンジリクエストをサポートしていない
    2. +
  2. サーバーがレンジリクエストを効率的にキャッシュしない
    3. +
  3. サーバーがレンジリクエストを効率的にプリフェッチできない
    4. +
  4. The SIDX* is large and having to load it first slows down startup a little
    5. +
  5. 同じオリジナルファイルをその他の配信方式でも使用したい (たとえば Microsoft Smooth Streaming)
    6. +
  6. 同じメディアファイルをライブストリーミングで配信した後VODでも配信したい
    7. +
+ +

*SIDX or SegmentIndexBox is a structure describing a segment by giving its earliest presentation time and other meta-data and can often make up a large portion of the MPD file.

+ +

オンデマンドプロファイル

+ +

このプロファイルでは、オンデマンドでストリームを切り替えることができます。つまり、一連の連続ファイルを用意し、それぞれの帯域幅を指定するだけで、適切なファイルが自動的に選択されます。

+ +

オーディオトラック表現と4つの別々のビデオ表現を提供する簡単な例を示します。

+ +
<?xml version="1.0" encoding="UTF-8"?>
+<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns="urn:mpeg:dash:schema:mpd:2011"
+  xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd"
+  type="static"
+  mediaPresentationDuration="PT654S"
+  minBufferTime="PT2S"
+  profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">
+
+  <BaseURL>http://example.com/ondemand/</BaseURL>
+  <Period>
+    <!-- English Audio -->
+    <AdaptationSet mimeType="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
+      <Representation id="1" bandwidth="64000">
+        <BaseURL>ElephantsDream_AAC48K_064.mp4.dash</BaseURL>
+      </Representation>
+    </AdaptationSet>
+    <!-- Video -->
+    <AdaptationSet mimeType="video/mp4" codecs="avc1.42401E" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
+      <Representation id="2" bandwidth="100000" width="480" height="360">
+        <BaseURL>ElephantsDream_H264BPL30_0100.264.dash</BaseURL>
+      </Representation>
+      <Representation id="3" bandwidth="175000" width="480" height="360">
+        <BaseURL>ElephantsDream_H264BPL30_0175.264.dash</BaseURL>
+      </Representation>
+      <Representation id="4" bandwidth="250000" width="480" height="360">
+        <BaseURL>ElephantsDream_H264BPL30_0250.264.dash</BaseURL>
+      </Representation>
+      <Representation id="5" bandwidth="500000" width="480" height="360">
+        <BaseURL>ElephantsDream_H264BPL30_0500.264.dash</BaseURL>
+      </Representation>
+    </AdaptationSet>
+  </Period>
+</MPD>
+ +

MPD ファイルを生成すれば、video タグから参照することができます。

+ +
<video src="my.mpd" type="application/dash+xml"></video>
+ +

MPEG-DASHをサポートしないブラウザのためのフォールバックを与えるとより良いでしょう:

+ +
<video>
+  <source src="my.mpd" type="application/dash+xml">
+  <!-- fallback -->
+  <source src="my.mp4" type="video/mp4">
+  <source src="my.webm" type="video/webm">
+</video>
+ +

LIVE プロファイル

+ +

MPEG-DASH を取り扱うための良いソフトウェアは Dash Encoder です。これは MP4Box を使ってメディアを MPEG-DASH フォーマットにエンコードします。

+ +
+

Note: You will need to be comfortable with make files and installing dependencies to get this software up and running.

+
+ +
+

Note: Since MPEG-DASH decoding is done partially using JavaScript and MSE files are often grabbed using XHR, keep same origin rules in mind.

+
+ +
+

Note: If you use WebM you can use the methods shown in this tutorial DASH Adaptive Streaming for HTML 5 Video.

+
+ +

エンコードされるとファイル構造はこのようになります。

+ +
play list ->                /segments/news.mp4.mpd
+
+main segment folder ->      /segments/main/
+
+100 Kbps segment folder ->  /segments/main/news100 contains (1.m4s, 2.m4s, 3.m4s ... )
+
+200 Kbps segment folder ->  /segments/main/news200 contains (1.m4s, 2.m4s, 3.m4s ... )
+
+300 Kbps segment folder ->  /segments/main/news300 contains (1.m4s, 2.m4s, 3.m4s ... )
+
+400 Kbps segment folder ->  /segments/main/news400 contains (1.m4s, 2.m4s, 3.m4s ... )
+ +

プレイリスト(.mpd ファイル)はすべてのさまざまなビットレートファイルが存在する場所を明示的に示す XML です。

+ +
<?xml version="1.0"?>
+  <MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:mpeg:DASH:schema:MPD:2011"  xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011" profiles="urn:mpeg:dash:profile:isoff-main:2011" type="static" mediaPresentationDuration="PT0H9M56.46S">
+    <BaseURL>
+      http://example.com/segments
+    </BaseURL>
+    <Period start="PT0S">
+      <AdaptationSet bitstreamSwitching="true">
+
+        <Representation id="0" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="46986">
+          <SegmentBase>
+            <Initialization sourceURL="main/news100/1.m4s" range="0-862"/>
+          </SegmentBase>
+          <SegmentList duration="1">
+            <SegmentURL media="main/news100/2.m4s" mediaRange="863-7113"/>
+            <SegmentURL media="main/news100/3.m4s" mediaRange="7114-14104"/>
+            <SegmentURL media="main/news100/4.m4s" mediaRange="14105-17990"/>
+          </SegmentList>
+        </Representation>
+
+        <Representation id="1" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="91932">
+          <SegmentBase>
+            <Initialization sourceURL="main/news200/1.m4s" range="0-864"/>
+          </SegmentBase>
+          <SegmentList duration="1">
+            <SegmentURL media="main/news200/2.m4s" mediaRange="865-11523"/>
+            <SegmentURL media="main/news200/3.m4s" mediaRange="11524-25621"/>
+            <SegmentURL media="main/news200/4.m4s" mediaRange="25622-33693"/>
+          </SegmentList>
+        </Representation>
+
+        <Representation id="1" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="270370">
+          <SegmentBase>
+            <Initialization sourceURL="main/news300/1.m4s" range="0-865"/>
+          </SegmentBase>
+          <SegmentList duration="1">
+            <SegmentURL media="main/news300/2.m4s" mediaRange="866-26970"/>
+            <SegmentURL media="main/news300/3.m4s" mediaRange="26971-72543"/>
+            <SegmentURL media="main/news300/4.m4s" mediaRange="72544-95972"/>
+          </SegmentList>
+        </Representation>
+
+        ...
+
+      </AdaptationSet>
+    </Period>
+  </MPD>
+ +

MPD ファイルは、さまざまなメディアが配置されている場所をブラウザに伝え、 mimeType やコーデックなどのメタデータも含み、そこにはバイト範囲などの詳細も含まれています。一般的にこれらのファイルは自動的に生成されます。

+ +
+

メモ: 音声と動画のストリームを異なるファイルに分割することも可能です。帯域幅に応じて優先順位を付けて個別に処理することができます。

+
+ +

MPD ファイルを生成すれば、 {{ htmlelement("video") }} 要素で参照することができます。

+ +
<video src="my.mpd" type="application/dash+xml"></video>
+ +

MPEG-DASH をサポートしないブラウザのためのフォールバックを与えるとより良いでしょう:

+ +
<video>
+  <source src="my.mpd" type="application/dash+xml">
+  <!-- fallback -->
+  <source src="my.mp4" type="video/mp4">
+  <source src="my.webm" type="video/webm">
+</video>
+ +
+

メモ: MPEG-DASH の再生は dash.js と Media Source Extensions のブラウザ対応に依存します。最新の dash.js リファレンスプレイヤー を参照してください。

+
+ +

HLS エンコーディング

+ +

HTTP Live Streaming (HLS) is an HTTP-based media streaming protocol implemented by Apple. It's incorporated into iOS and OSX platforms and works well on mobile and desktop Safari and most Android devices with some caveats.

+ +

Media is usually encoded as MPEG-4 (H.264 video and AAC audio) and packaged into an MPEG-2 Transport Stream, which is then broken into segments and saved as one or more .ts media files. Apple provides tools to convert media files to the appropriate format.

+ +

HLS エンコーディングツール

+ +

HLS エンコードのための役立つツールがいくつかあります。

+ + + +
+

メモ: これらのツールについて詳しくは Using HTTP Live Streaming を読んでください。

+
+ +

インデックスファイル (プレイリスト)

+ +

The HLS Index File (much like MPEG-DASH's .mpd file) contains the information on where all the media segments reside, as well as other meta data such as bandwidth application. Apple uses the .m3u8 format (an extension of its .m3u playlist format) for index files — see below for an example:

+ +
#EXT-X-VERSION:3
+#EXTM3U
+#EXT-X-TARGETDURATION:10
+#EXT-X-MEDIA-SEQUENCE:1
+
+# Old-style integer duration; avoid for newer clients.
+#EXTINF:10,
+http://media.example.com/segment0.ts
+
+# New-style floating-point duration; use for modern clients.
+#EXTINF:10.0,
+http://media.example.com/segment1.ts
+#EXTINF:9.5,
+http://media.example.com/segment2.ts
+#EXT-X-ENDLIST
+ +
+

Note: Comprehensive information on how to encode media for Apple's HLS format can be found on Apple's Developer Pages.

+
+ +

See Also

+ +

Further resources on adaptive streaming.

+ +

General information

+ + + +

HLS overview and references

+ + + +

MPEG-DASH overview and references

+ + + +

MPEG-DASH tools

+ + + +

Adaptive streaming examples

+ + diff --git a/files/ja/web/guide/audio_and_video_manipulation/index.html b/files/ja/web/guide/audio_and_video_manipulation/index.html new file mode 100644 index 0000000000..6518a4dcd7 --- /dev/null +++ b/files/ja/web/guide/audio_and_video_manipulation/index.html @@ -0,0 +1,402 @@ +--- +title: 音声と動画の加工 +slug: Web/Guide/Audio_and_video_manipulation +tags: + - Audio + - Canvas + - Examples + - Guide + - HTML5 + - Media + - Video + - Web Audio API + - WebGL + - developer recommendation +translation_of: Web/Guide/Audio_and_video_manipulation +--- +
+

ウェブのよいところは、複数の技術をまとめて新しいものを作ることができる点です。ネイティブの音声や動画をブラウザー上で利用できるということは、これらのデータストリームを {{htmlelement("canvas")}}、WebGL、Web Audio API を利用して操作することで、音声や動画に直接変更を加えることができることを意味します。例えば音声にリバーブやコンプレッション効果をかけたり、動画にグレイスケールやセピアのフィルターをかけたりすることができます。この記事では、必要なことを説明するためのリファレンスを提供します。

+
+ +

動画の加工

+ +

動画の各フレームからピクセルの値を読むことができることは、とても有用です。

+ +

動画とキャンバス

+ +

{{htmlelement("canvas")}} 要素はウェブページ上でグラフィックを描画するための平面を提供します。これは強力で、動画の処理にも有用です。

+ +

一般的なテクニックは次のようになります。

+ +
    +
  1. {{htmlelement("video")}} 要素からのフレームを中間の {{htmlelement("canvas")}} 要素に描画します。
    2. +
  2. 中間の <canvas> 要素からデータを取得し、それを加工します。
    3. +
  3. 加工したデータを「画面」の <canvas> を通じて描画します。
    4. +
  4. 一時停止し、繰り返します。
    5. +
+ +

例えば、動画を処理してグレースケールで表示する場合を考えてみましょう。この場合、ソース動画と出力のグレースケールのフレームの両方を表示します。通常、「動画をグレースケールで再生」機能を実装する場合、 display: none を <video> 要素のスタイルに追加して、ソース動画が画面に描画されず、変更されたフレームのみが表示されるキャンバスが表示されるようにします。

+ +

HTML

+ +

動画プレイヤーと、 <canvas> 要素は次のように記述します。

+ +
<video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous">
+  <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm">
+  <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4">
+</video>
+
+<canvas id="my-canvas" width="480" height="270"></canvas>
+ +

JavaScript

+ +

このコードはフレームの加工を扱います。

+ +
var processor = {
+  timerCallback: function() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    var self = this;
+    setTimeout(function () {
+      self.timerCallback();
+    }, 16); // roughly 60 frames per second
+  },
+
+  doLoad: function() {
+    this.video = document.getElementById("my-video");
+    this.c1 = document.getElementById("my-canvas");
+    this.ctx1 = this.c1.getContext("2d");
+    var self = this;
+
+    this.video.addEventListener("play", function() {
+      self.width = self.video.width;
+      self.height = self.video.height;
+      self.timerCallback();
+    }, false);
+  },
+
+  computeFrame: function() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    var l = frame.data.length / 4;
+
+    for (var i = 0; i < l; i++) {
+      var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3;
+
+      frame.data[i * 4 + 0] = grey;
+      frame.data[i * 4 + 1] = grey;
+      frame.data[i * 4 + 2] = grey;
+    }
+    this.ctx1.putImageData(frame, 0, 0);
+
+    return;
+  }
+};
+ +

ページの読み込み後に、次のように呼び出してください。

+ +
processor.doLoad()
+ +

結果

+ +

{{EmbedLiveSample("Video_and_canvas", '100%', 580)}}

+ +

これは、キャンバスを使用して動画フレームを加工する方法を示すとてもシンプルな例です。効率をよくするために、対応しているブラウザーで実行する場合は {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} を setTimeout() の代わりに使用することを検討したほうがいいでしょう。

+ +
+

注: 潜在的なセキュリティ上の問題により、動画がコードと異なるドメインより配信されている場合、動画を配信しているサーバーで CORS (オリジン間リソース共有) を有効にする必要があります。

+
+ +

動画と WebGL

+ +

WebGL はキャンバスを使用してハードウェアアクセラレーションによる三次元や二次元の描画を行う強力な API です。 {{htmlelement("video")}} 要素と組み合わせることで、動画をテクチャとして利用できます。つまり三次元空間上に動画を配置し、再生できます。

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}

+ +
+

注: このデモのソースコードは GitHub にあります (ライブで表示も)。

+
+ +

再生速度

+ +

音声や動画の再生速度は {{htmlelement("audio")}} もしくは {{htmlelement("video")}} 要素の {{domxref("HTMLMediaElement.playbackRate", "playbackRate")}} と呼ばれる属性を使用して調整することができます。 playbackRate には再生速度の倍率を指定します。例えば 0.5 を指定すると半分の速度で、 2 を指定すると倍速で再生されます。

+ +

なお、 playbackRate プロパティは <audio> と <video> の両方で動作しますが、どちらの場合も、再生速度を変更するものの音程は変更しません。音声の高さを変更するには、 Web Audio API を使用する必要があります。 {{domxref("AudioBufferSourceNode.playbackRate")}} プロパティを参照してください。

+ +

HTML

+ +
<video id="my-video" controls
+       src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v">
+</video>
+ +

JavaScript

+ +
var myVideo = document.getElementById('my-video');
+myVideo.playbackRate = 2;
+ + + +

{{ EmbedLiveSample('Playable_code', 700, 425) }}

+ +
+

注: playbackRate のデモを試してみてください。

+
+ +

音声の加工

+ +

playbackRate の一方で、音声を加工するためには Web Audio API を利用することが一般的です。

+ +

音源の選択

+ +

Web Audio API は、様々なソースから音声を受け取り、それを処理してを受信し、それを処理して音を処理した後に送信する出力機器を表す {{domxref("AudioDestinationNode")}} に送り出すことができます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
この音声ソースの場合...この Web Audio ノード型を使用してくださいnode type
HTML の {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素の音声トラック{{domxref("MediaElementAudioSourceNode")}}
メモリ内の生の音声データバッファー{{domxref("AudioBufferSourceNode")}}
サイン波やその他の合成波形を生成するオシレーター{{domxref("OscillatorNode")}}
WebRTC の音声トラック (例えば {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を使用して取得できるマイク入力){{domxref("MediaStreamAudioSourceNode")}}
+ +

音声フィルター

+ +

Web Audio API では {{domxref("BiquadFilterNode")}} を利用することで様々なフィルターやエフェクトを利用できます。

+ +

HTML

+ +
<video id="my-video" controls
+       src="myvideo.mp4" type="video/mp4">
+</video>
+ +

JavaScript

+ +
var context = new AudioContext(),
+    audioSource = context.createMediaElementSource(document.getElementById("my-video")),
+    filter = context.createBiquadFilter();
+audioSource.connect(filter);
+filter.connect(context.destination);
+
+// Configure filter
+filter.type = "lowshelf";
+filter.frequency.value = 1000;
+filter.gain.value = 25;
+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 425) }}

+ +
+

注: CORS が有効になっていない環境では、動画はコードと同じドメイン上になければなりません。これはセキュリティ上の問題を避けるためです。

+
+ +

よく使われる音声フィルター

+ +

このノードでよく利用されるフィルターは以下の通りです。

+ + + +
+

注: 詳しくは {{domxref("BiquadFilterNode")}} を参照してください。

+
+ +

たたみ込みとインパルス

+ +

{{domxref("ConvolverNode")}} を利用することで、音声にインパルス応答を適用することができます。インパルス応答とはハンドクラップのような短い音のインパルスから作成された音のことです。インパルス応答はインパルスが作られた環境 (例えばトンネル内で手を叩くことで発生するエコー) を示します。

+ +

例

+ +
var convolver = context.createConvolver();
+convolver.buffer = this.impulseResponseBuffer;
+// Connect the graph.
+source.connect(convolver);
+convolver.connect(context.destination);
+
+ +

適用例としてはこの Codepen をご覧ください (ただし、とても、とてもくだらないです。小さな子どもが喜ぶくらいでしょう)。

+ +

空間的な音

+ +

パンナーノードを使用することで、音源の位置を操作できます。パンナーノード—{{domxref("PannerNode")}}—は、ソースコーンの位置だけでなく、その方向も指定することができます。位置や方向は三次元空間上で指定します。

+ +

例

+ +
var panner = context.createPanner();
+panner.coneOuterGain = 0.2;
+panner.coneOuterAngle = 120;
+panner.coneInnerAngle = 0;
+
+panner.connect(context.destination);
+source.connect(panner);
+source.start(0);
+
+// Position the listener at the origin.
+context.listener.setPosition(0, 0, 0);
+ +
+

注: GitHub リポジトリに例があります (ライブ版も)。

+
+ +

JavaScript によるコーデック

+ +

JavasCript でより低レベルでの音声操作が可能です。これを利用することで、オーディオコーデックを自作することができます。

+ +

以下にフォーマットとそのコーデックのリストを示します。

+ + + +
+

注: AudioCogs でいくつかのデモを試せます。 Audiocogs は JavaScript でのコーデック実装を行うためのフレームワークである Aurora.js を提供しています。

+
+ +

例

+ + + +

関連情報

+ +

チュートリアル

+ + + +

リファレンス

+ + + +
{{QuickLinksWithSubpages("/ja/docs/Web/Apps/Fundamentals/")}}
diff --git a/files/ja/web/guide/css/block_formatting_context/index.html b/files/ja/web/guide/css/block_formatting_context/index.html new file mode 100644 index 0000000000..6f0f4f7964 --- /dev/null +++ b/files/ja/web/guide/css/block_formatting_context/index.html @@ -0,0 +1,191 @@ +--- +title: ブロック整形コンテキスト +slug: Web/Guide/CSS/Block_formatting_context +tags: + - CSS + - Guide + - Reference + - Web + - ウェブ + - ガイド +translation_of: Web/Guide/CSS/Block_formatting_context +--- +
{{ CSSRef }}
+ +

ブロック整形コンテキスト (block formatting context) は、ウェブページにおける CSS の視覚的なレンダリングの一部です。ブロックボックスのレイアウトが行われ、浮動が他の要素と相互作用する領域です。

+ +

ブロック整形コンテキストは、以下のうちの少なくとも一つから生成されます。

+ + + +

ブロック整形コンテキストは、それを生成する要素の内側にあるすべてのものを含みます。

+ +

ブロック整形コンテキストは、浮動要素の配置設定 ({{ cssxref("float") }} を参照) と解除 ({{ cssxref("clear") }}を参照) にとって重要です。浮動要素の配置設定と解除の規則は、同一のブロック整形コンテキスト内にあるものにだけ適用されます。浮動要素は他のブロック整形コンテキストの内容のレイアウトには影響せず、 clear は同じブロック整形コンテキスト内の以前の浮動要素のみを解除します。マージンの相殺も、同じブロック整形コンテキストに所属するブロック同士でしか発生しません。

+ +

例

+ +

浮動コンテンツとその横のコンテンツの高さを同じにする

+ +
+

いくつかの例を見て、新しいブロック整形コンテキスト (BFC) を生成することによる効果を確認してみましょう。

+ +

以下の例では、 <div> に border が適用されている中に浮動要素があります。その <div> の内容は、浮動要素の横にあります。浮動要素の内容がその横のコンテンツよりも高いので、 <div> の境界は浮動要素を突き抜けてしまいます。フロー内とフローの外の要素のガイドで説明している通り、浮動要素はフローから出るので、 <div> の background および border はコンテンツのみを含みますが、浮動要素は含みません。

+ +

HTML

+ +
<div class="box">
+    <div class="float">I am a floated box!</div>
+    <p>I am content inside the container.</p>
+</div>
+ +

CSS

+ +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

{{EmbedLiveSample("example1", 200, 200)}}

+
+ +
+

overflow: auto; の使用

+ +

新しいブロック整形コンテキスト (BFC) を生成すると、浮動要素を含むようになります。以前からよくある方法は、 overflow: auto を設定するか、初期値である overflow: visible 以外の値を設定するものです。

+ +

CSS

+ + + +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+    overflow: auto;
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

{{EmbedLiveSample("With_overflow", 200, 200)}}

+
+ +

overflow: auto を設定することで浮動要素を含む新しい BFC を生成しました。 <div> はレイアウトの中のミニレイアウトになりました。すべての子要素はその中に含まれます。

+ +

overflow を使用して新しい BFC を生成することの問題は、 overflow プロパティがブラウザーにあふれた内容をどのように扱いたいかを伝えるためのものであることです。このプロパティを純粋に使用して BFC を作成すると、不要なスクロールバーやクリップされた影が表示される場合があります。また、この目的で overflow を使用した理由が明らかではない可能性があるため、将来の開発者にとっては読みにくくなる可能性があります。 overflow を使用する場合、コードに説明するためのコメントをすることをお勧めします。

+ +

display: flow-root の使用

+ +
+

A newer value of display lets us create a new BFC without any other potentially problematic side-effects. Using display: flow-root on the containing block creates a new BFC .

+ +

CSS

+ + + +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+    display: flow-root
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

{{EmbedLiveSample("flowroot", 200, 200)}}

+
+ +

With display: flow-root; on the <div>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.

+ +

The value name of flow-root makes sense when you understand you are creating something that acts like the root element (<html> element in browser) in terms of how it creates a new context for the flow layout inside it.

+ +
+

Note: display: flow-root; is not supported by Safari.

+
+ +

マージンの相殺

+ +

Creating a new BFC to avoid the margin collapsing between two neighbor div:

+ +

HTML

+ +
<div class="blue"></div>
+<div class="red-outer">
+  <div class="red-inner">red inner</div>
+</div>
+
+ +

CSS

+ +
.blue, .red-inner {
+  height: 50px;
+  margin: 10px 0;
+}
+
+.blue {
+  background: blue;
+}
+
+.red-outer {
+  overflow: hidden;
+  background: red;
+}
+
+ +

{{EmbedLiveSample("Margin_collapsing", 120, 120)}}

+ +

仕様書

+ + + +

関連情報

+ + diff --git a/files/ja/web/guide/css/getting_started/boxes/index.html b/files/ja/web/guide/css/getting_started/boxes/index.html new file mode 100644 index 0000000000..eeb39e5e46 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/boxes/index.html @@ -0,0 +1,330 @@ +--- +title: Boxes +slug: Web/Guide/CSS/Getting_started/Boxes +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Building_blocks +--- +
{{CSSTutorialTOC}}
+ +

{{previousPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} これは CSS Getting Started チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。

+ +

ボックスについて

+ +

ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。

+ +

中央に、要素（element）がその内容を表示するのに必要なスペースがあります。その周りに パディング（padding） があり、その周りに ボーダー（border） があります。その周りには マージン（margin） があって、他要素とその要素を隔てています。

+ + + + + + + + +
+
+

マージン

+ +

ボーダー

+ +
+

パディング

+ +
+

要素

+
+
+
+ +

薄い灰色がレイアウトの部品を示します。

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

要素

+
+
+
+ +

ブラウザではこう見えます。

+
+ +

パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。

+ +

彩色

+ +

パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。

+ + + + + + + + +
+
+

マージン

+ +

ボーダー

+ +
+

パディング

+ +
+

要素

+
+
+
+ +

要素の背景色は緑です。

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

要素

+
+
+
+ +

ブラウザではこう見えます。

+
+ +

ボーダー

+ +

ボーダーを使って、要素を線や枠囲みで装飾できます。

+ +

要素の境界線をすべて同じにするには、{{cssxref("border")}} プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。

+ +

選べるスタイル:

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

また、スタイルを none か hidden にして、明示的にボーダーを消したり、色を transparent にして、レイアウトを変えずにボーダーを透明にしたりできます。

+ +

一辺ずつボーダーを定義するには、次のプロパティを使います: {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}}。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。

+ +
+
例
+ +

次のルールは、見出し要素の背景色と上辺のボーダーを定義します:

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+}
+ +

結果は次のようになります:

+ + + + + + + +
+

スタイルつきの見出し

+
+ +

次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:

+ +
img {border: 2px solid #ccc;}
+
+
+ +

結果は次のようになります:

+ + + + + + + + +
画像:Image:Blue-rule.png
+ +

マージンとパディング

+ +

マージンとパディングで要素の位置を調整し、周りに余白を作ります。

+ +

{{cssxref("margin")}} プロパティと {{cssxref("padding")}} プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。

+ +

幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。

+ +

幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。

+ +

4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left

+ +
+
例
+ +

次のルールは、remark クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。

+ +

パディングで囲むことで、テキストから枠が少し離れます。

+ +

左マージンは段落を他のテキストからインデントします:

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

結果は次のようになります:

+ + + + + + + +
+

ここは通常の段落です。

+ +

ここは remark 用の段落です。

+
+
+ +
+
さらに詳しく
+ +

マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。

+ +

ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。

+ +

望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。

+ +

パディング、マージン、ボーダーについての詳しい情報は、リファレンスの ボックスモデル をご覧ください。

+
+ +

実習: ボーダーの追加

+ +

CSS ファイル style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください:

+ +
h3 {border-top: 1px solid gray;}
+
+ +

前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

ブラウザを更新すると次の結果になります:

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
チャレンジ
+ +

スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

（幅や色を正確に同じにする必要はありません。）

+
+ +

このチャレンジの解答を見る。

+ +

さて次は？

+ +

{{nextPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の レイアウト を変えます。

diff --git a/files/ja/web/guide/css/getting_started/challenge_solutions/index.html b/files/ja/web/guide/css/getting_started/challenge_solutions/index.html new file mode 100644 index 0000000000..df62dacd38 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/challenge_solutions/index.html @@ -0,0 +1,324 @@ +--- +title: Challenge solutions +slug: Web/Guide/CSS/Getting_started/Challenge_solutions +translation_of: Web/Guide/CSS/Getting_started/Challenge_solutions +--- +

このページは、 CSS Getting Started チュートリアルにあるチャレンジの解答例です。これ以外の解答も考えられます。以下の章名はチュートリアルページのタイトルと一致します。

+

CSS をなぜ用いるか

+

Colors

+
+
+ Challenge
+
+
+
+ Without looking up a reference, find five more color names that work in your stylesheet.
+
+ Solution
+
+ CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.
+
+

どのように CSS は動作するのか

+

DOM inspector

+
+
+ Challenge
+
+ In DOMi, click on a STRONG node. Use DOMi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text.
+
+ Solution
+
+ In the menu above the right-hand pane, choose CSS Rules.  You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.
+
+

接続と継承

+

Inherited styles

+
+
+ Challenge
+
+ Change your stylesheet so that only the red letters are underlined.
+
+ Solution
+
+ Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this: + 
p {color: blue; }
+strong {color: orange; text-decoration: underline;}
+
+
+
+

Later sections of this tutorial describe style rules and declarations in greater detail.

+

セレクター

+

Second paragraph blue

+
+
+ Challenge
+
+ Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters the same color as they are now, but makes all the other text in the second paragraph blue.
+
+ Solution
+
+ Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + 
#second { color: blue; }
+
+ A more specific selector, p#second also works.
+
+

Both paragraphs blue

+
+
+ Challenge
+
+ Now change the rule you have just added (without changing anything else), to make the first paragraph blue too.
+
+ Solution
+
+ Change the selector of the new rule to be a tag selector using p: + 
p { color: blue; }
+
+
+
+

The rules for the other colors all have more specific selectors, so they override the blue of the paragraph.

+

読みやすい CSS

+

Commenting out a rule

+
+
+ Challenge
+
+ Comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red.
+
+ Solution
+
+ One way to do this is to put comment delimiters around the rule for .carrot: + 
/*
+.carrot {
+  color: orange;
+}
+*/
+
+
+
+

文章のスタイル

+

Big initial letters

+
+
+ Challenge
+
+ Without changing anything else, make all six initial letters twice the size in the browser's default serif font.
+
+ Solution
+
+ Add the following style declaration to the strong rule: + 
  font: 200% serif;
+
+ If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden.
+
+

色

+

Three-digit color codes

+
+
+ Challenge
+
+ In your CSS file, change all the color names to 3-digit color codes without affecting the result.
+
+ Solution
+
+ The following values are reasonable approximations of the named colors: + 
strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+
+
+
+

コンテンツ

+

画像の追加

+
+
+ チャレンジ
+
+ 各行の初めに画像を表示するように、スタイルシートに一つルールを追加してください。
+
+ 解答
+
+ 次のルールをスタイルシートに追加します: + 
p:before{
+  content: url("yellow-pin.png");
+}
+
+
+
+

リスト

+

小文字のローマ数字

+
+
+ チャレンジ
+
+ スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください。
+
+ 解答
+
+ lower-roman のリストスタイルを使って、リスト項目に一つルールを定義します: + 
li {
+  list-style: lower-roman;
+}
+
+
+
+

大文字

+
+
+ チャレンジ
+
+ 見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください。
+
+ 解答
+
+ body 要素（見出しの親要素）にはカウンターをリセットするルールを、見出しにはカウンターを表示し増加させるルールを追加します: + 
/* numbered headings */
+body {counter-reset: headnum;}
+h3:before {
+  content: "(" counter(headnum, upper-latin) ") ";
+  counter-increment: headnum;
+}
+
+
+
+
+

ボックス

+

海の境界線

+
+
+ チャレンジ
+
+ スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください。
+
+ 解答
+
+ 次のルールでこの効果を出せます: + 
ul {
+  border: 10px solid lightblue;
+}
+
+
+
+
+

レイアウト

+

デフォルトの画像位置

+
+
+ チャレンジ
+
+ サンプル文書 doc2.html を編集し、次のタグを文書の末尾近く、</BODY> のすぐ前に追加します: <IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> 画像がどこに現れるか、推測してみてください。それからブラウザを更新して、正しかったかどうかを確認してください。
+
+ 解答
+
+ 画像は2番めのリストの右側に現れます。
+ pin_placement.png
+
+

画像位置の固定化

+
+
+ チャレンジ
+
+ スタイルシートにルールを追加して、文書の右上に画像を置くようにしてください。
+
+ 解答
+
+ 次のルールでできます: + 
#fixed-pin  {
+  position:fixed;
+  top: 3px;
+  right: 3px;
+}
+
+
+

表

+

Borders on data cells only

+
+
+ Challenge
+
+ Change the stylesheet to make the table have a green border around only the data cells.
+
+ Solution
+
+ The following rule puts borders around only {{ HTMLElement("td") }} elements that are inside the {{ HTMLElement("tbody") }} element of the table with id=demo-table: + 
#demo-table tbody td {
+  border:1px solid #7a7;
+}
+
+
+
+

メディア

+

Separate print style file

+
+
+ Challenge
+
+ Move the print-specific style rules to a separate CSS file and import them into your style4.css stylesheet.
+
+ Solution
+
+ Cut and paste the lines between /* print only */ and /* end print only */ into a file named style4_print.css. In style4.css, add the following line at the beginning of the file: + 
@import url("style4_print.css") print;
+
+
+
+

Heading hover color

+
+
+ Challenge
+
+ Make the headings turn blue when the mouse pointer is over them.
+
+ Solution
+
+ The following rule achieves the desired result: + 
h1:hover {
+  color: blue;
+}
+
+
+
+

JavaScript

+

Move box to the right

+
+
+ Challenge
+
+ Change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards.
+
+ Solution
+
+ Add lines to modify the margin-left property. Be sure to specify it as marginLeft in JavaScript. The following script achieves the desired result: + 
// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "#fa4";
+  square.style.marginLeft = "20em";
+  button.setAttribute("disabled", "true");
+  setTimeout(clearDemo, 2000, button);
+}
+
+function clearDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "transparent";
+  square.style.marginLeft = "0em";
+  button.removeAttribute("disabled");
+}
+
+
+
+
diff --git a/files/ja/web/guide/css/getting_started/color/index.html b/files/ja/web/guide/css/getting_started/color/index.html new file mode 100644 index 0000000000..d1f75c2413 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/color/index.html @@ -0,0 +1,348 @@ +--- +title: 色 +slug: Web/Guide/CSS/Getting_started/Color +tags: + - CSS + - 'CSS:Getting_Started' + - Getting_Started +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +

この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。

+ +

サンプルスタイルシートに、背景色を指定出来るようになります。

+ +

{{ 英語版章題("Information: Color") }}

+ +

解説: 色

+ +

このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 black gray silver white 
プライマリーred lime blue 
セカンダリーyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
+ +

 

+ + + + + + + + +
詳細情報
ブラウザが上記以上の名前付きの色をサポートしている可能性もあります + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

拡張された色の名前リストについては、CSS 3 カラーモジュールの SVG 色キーワード を参照してください。利用者のブラウザがサポートしていない色を利用しないように注意してください。

+
+ +

より広い色空間を利用するためには、赤、緑、青の各色の割合を、# の後に 3 文字の16 進数 、0 – 9 か a – f、a – f は 10 – 15 を意味します、で指定してください。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
+ +

完全な色空間を利用するためには、それぞれの色について 2 文字の 16 進数を利用します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
+ +

これらの 6 桁の 16 進数は画像ソフトやその他のツールで取得可能です。

+ + + + + + + + + + + +
Examples
少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
赤から始めます #f00
桃色に近づけるため、緑・青を追加 #f77
橙に近づけるため、緑を追加 #fa7
暗くするため、全ての色を減らす #c74
飽和を減らすため、色の値を近づける #c98
色同士を完全に同じにすると、灰色 #ccc
+
空色のようなパステル調を出すには: + + + + + + + + + + + + + +
白から始めます: #fff
他の色の値を少し減らします: #eef
+
+ +

 

+ + + + + + + + +
More details
色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。 +

たとえば、次の色はマロン (濃い赤) になります :

+ +
+ 
+rgb(128, 0, 0)
+
+
+ +


+ 色指定の詳細については、CSS 仕様書の 色 をご覧ください。

+ +

メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の CSS2 システム色 があります。

+
+ +


+ {{ 英語版章題("Color properties") }}

+ +

色のプロパティー

+ +

color プロパティーをすでに利用しました。

+ +

同様に background-color プロパティーを指定することで、要素の背景色を変えることができます。

+ +

背景色には transparent を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。

+ + + + + + + + +
Example
このチュートリアルの サンプル ボックスは、このような 淡黄色を背景色にしています。 +
+ 
+background-color: #fffff4;
+
+
+ +

より詳細は のボックスは淡灰色を使っています。

+ +
+ 
+background-color: #f4f4f4;
+
+
+
+ +

{{ 英語版章題("Action: Using color codes") }}

+ +

試してみましょう: カラーコードを利用する

+ +

CSS ファイルを編集します。 以下で太字で書かれている変更を付け加え、最初の文字を淡青色の背景にしてください。 (ファイルのレイアウトとコメントは以下のものとは異なるとは思いますが、 好みのレイアウトやコメントの形式を利用してください。)

+ +
+
/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+
+
+ +

ブラウザを再読み込みして結果を見てみましょう。

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

 

+ + + + + + + + +
Challenge
結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。 +

(完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)

+
+ +


+ {{ 英語版章題("What next?") }}

+ +

次は ?

+ +

あなたのサンプルは完全にスタイルと中身に分離されました。

+ +

次のページでは、この完全分離の状態に例外を作る方法を説明します。 Content

diff --git a/files/ja/web/guide/css/getting_started/javascript/index.html b/files/ja/web/guide/css/getting_started/javascript/index.html new file mode 100644 index 0000000000..9f8cf9b250 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/javascript/index.html @@ -0,0 +1,148 @@ +--- +title: JavaScript and CSS +slug: Web/Guide/CSS/Getting_started/JavaScript +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +
+ {{CSSTutorialTOC}}
+

これは CSS チュートリアル 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。

+

第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。

+

代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。

+

前の章（第 1 部）: メディア
+ 次の章: SVG

+

JavaScriptについて

+

JavaScript はプログラミング言語 です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。

+

JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。

+

3 つの方法があります:

+ + + + + + + + +
+ さらに詳しく
JavaScript, についてのさらに詳しい情報は、この wiki の JavaScript のページをご覧ください。
+

実習: JavaScript の実演

+

新規 HTML 文書 doc5.html を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:

+
+ 
<!DOCTYPE html>
+<html>
+
+<head>
+<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
+<link rel="stylesheet" type="text/css" href="style5.css" />
+<script type="text/javascript" src="script5.js"></script>
+</head>
+
+<body>
+<h1>JavaScript sample</h1>
+
+<div id="square"></div>
+
+<button type="button" onclick="doDemo(this);">Click Me</button>
+
+</body>
+</html>
+
+
+

新規 CSS ファイル style5.css を作り、次の内容をコピー＆ペーストしてください:

+
+ 
/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+}
+
+button {
+  padding: .5em 2em;
+}
+
+
+

新規テキストファイル script5.js を作り、以下の内容をコピー＆ペーストしてください:

+
+ 
// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "#fa4";
+  button.setAttribute("disabled", "true");
+  setTimeout(clearDemo, 2000, button);
+}
+
+function clearDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "transparent";
+  button.removeAttribute("disabled");
+}
+
+
+

ブラウザで HTML 文書を開いて、ボタンを押してください。

+

この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:

+ + + + + + + +
+ + + + + + + + + +
+

JavaScript sample

+
 
+ 		+ + + + + + + + + +
+

JavaScript sample

+
 
+
+
+ この実演についての重要な補足: + +
+ + + + + + + +
+ チャレンジ
スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。
+

チャレンジの解答を見る。

+

さて次は？

+

このページにわかりづらいところやご意見があれば Discussion ページに参加してください。

+

この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: XBL bindings

diff --git a/files/ja/web/guide/css/getting_started/layout/index.html b/files/ja/web/guide/css/getting_started/layout/index.html new file mode 100644 index 0000000000..5f75322d74 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/layout/index.html @@ -0,0 +1,284 @@ +--- +title: Layout +slug: Web/Guide/CSS/Getting_started/Layout +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/CSS_layout +--- +
+ {{CSSTutorialTOC}} {{previousPage("/ja/docs/CSS/Getting_Started/Boxes", "Boxes")}}
+

これは CSS Getting Started チュートリアルの第 12 章です。ここでは、文書のレイアウトを調整する方法をいくつか述べます。サンプル文書のレイアウトを変えてみましょう。

+

レイアウトについて

+

CSS を使うと、文書のレイアウトを変えるような様々な視覚効果を定義できます。レイアウト定義の手法には、上級者向けで、この基本チュートリアルの範疇を超えるようなものもあります。

+

多くのブラウザで同じ見た目になるようレイアウトを設計すると、スタイルシートはブラウザのデフォルトのスタイルシートやレイアウトエンジンと、入り組んだ方法で相互作用します。これもまた基本チュートリアルの範疇を超えた、上級者向けの話題です。

+

このページでは、あなたが試せるような簡単な技法をいくつか述べます。

+

文書の構造

+

文書のレイアウトを操作するなら、その構造を変える必要があるかもしれません。

+

お使いのマークアップ言語には、構造化のための汎用タグがあるかもしれません。たとえば、HTML では構造化に {{HTMLElement("div")}} 要素を使うことができます。

+
+
+ 例
+

サンプル文書では、2 番目の見出しの下にある、番号づけされた段落はどれも、入れ物に入っていません。

+

セレクタで指定する要素がないため、スタイルシートでこれらの段落の周囲に枠を描くことができません。

+

この構造的な問題を直すために、段落の周りに {{HTMLElement("div")}} タグを一つ追加します。このタグは一意で、id 属性で見分けられます。

+ 
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+

これで、両方のリストの周りに枠を定義するルールをスタイルシートに追加できます。

+ 
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+

結果は次のようになります:

+ + + + + + +
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+

サイズの単位（Size units）

+

このチュートリアルではこれまで、サイズを pixels (px) で定義してきました。これはコンピューターの画面のようなディスプレイデバイスでの用途にはふさわしいものです。しかし、ユーザがフォントサイズを変えると、レイアウトがおかしくなる可能性があります。

+

多くの用途で、サイズをパーセンテージか ems (em) で定義するのがよいでしょう。em は通常、現在のフォントサイズを指します（文字 m の幅）。ユーザがフォントサイズを変えると、レイアウトが自動的に調整されます。

+
+
+ 例
+

次のテキストの左辺のボーダーは pixel 単位のサイズで定義されています。

+

右辺のボーダーは ems 単位のサイズで定義されています。

+

ブラウザの表示フォントサイズを変えて、右辺のボーダーが調整されることと、左辺のボーダーはされないことを確認してください:

+ + + + + + +
+
+ 僕の大きさを変えてお願い
+
+
+
+
+ さらに詳しく
+

その他のデバイスには、これ以外の長さの単位が適しています。

+

これについては、このチュートリアルの後半のページにもっと情報があります。

+

すべての利用可能な値と単位の詳細は、CSS 仕様書の Values をご覧ください。

+
+

テキストのレイアウト

+

2 つのプロパティで、要素の内容がどのように文字寄せされるか定義します。これは、単純なレイアウトの調整にも使えます。

+
+
+ {{cssxref("text-align")}}
+
+ 文字寄せを行います。次のうちいずれかの値を使います: left, right, center, justify
+
+ {{cssxref("text-indent")}}
+
+ 指定した幅でインデントを行います。
+
+

これらのプロパティは要素内のテキストだけではなく、テキストに似たコンテンツにも適用されます。これらのルールが要素の子に継承されることを忘れないでください。結果を見て驚かないように、子要素で明示的にこれらをオフにする必要があるかもしれません。

+
+
+ 例: 見出しを中央寄せする
+ 
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+

表示結果:

+ + + + + + +
+

(A) The oceans

+
+

HTML 文書では、見出しの下に見える内容は構造的には見出しに含まれていません。したがって見出しを文字寄せしても、見出しの下にあるタグにそのスタイルは継承されません。

+
+

フロート（Floats、浮動体）

+

{{cssxref("float")}} プロパティは、要素を左または右に押しつけます。これは要素の位置やサイズを操作する簡単な方法です（以降、float 指定された要素のことをフローティング要素と呼びます）。

+

文書の残りのコンテンツは通常、フローティング要素の周囲に流れ込み（flow）ます。{{cssxref("clear")}} プロパティを使うと、残りの要素をフローティング要素から離して、この流れを制御できます。

+
+
+ 例
+

サンプル文書では、リストはウィンドウいっぱいに広がります。これは、左側に浮動させると回避できます。

+

見出しを定位置に留めるには、その左側にあるフローティング要素から、見出しを離れさせるような定義も必要です。

+ 
ul,
+#numbered { float: left; }
+h3 { clear: left; }
+
+
+

結果は次のようになります:

+ + + + + + +
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+

（ボックスの右側でボーダーがテキストに近すぎるので、少しパディングが必要です）

+

位置取り

+

{{cssxref("position")}} プロパティと次の値のうちの 1 つを指定すると、要素の位置を 4 つの方法で定義できます。

+

これは高度なプロパティです。基本チュートリアルで取り上げるのは、これが簡単に使えるためです。しかし、複雑なレイアウトに使うなら難しくなります。

+
+
+ relative
+
+ 相対的。要素の位置は通常位置に比べて相対的に移動します。指定量だけ要素を動かす場合にこれを使ってください。場合によっては、要素のマージンを使って同じ効果が得られることがあります。
+
+ fixed
+
+ 固定。要素の位置は固定されます。文書のウィンドウに対する相対値で指定してください。文書の他の部分がスクロールしても、要素は固定されたままです。
+
+ absolute
+
+ 絶対的。要素は祖先要素の内、直近のポジショニング要素 (position プロパティの値が relative、fixed 、absolute の何れかの要素 ) に対する絶対位置に、もしくはポジショニング要素が無い場合はルート要素に対する絶対位置に配置されます。親要素自身に位置指定が必要無い場合には position:relative を用いる事により親要素自身への影響を回避できます。
+
+ static
+
+ 静止。デフォルトです。明示的に位置づけをオフにしたいときにこの値を使ってください。
+
+

position プロパティ（static を除く）の値といっしょに、次のプロパティから一つかそれ以上を指定します: top 、 right 、 bottom 、 left 、 width 、 height これにより、要素の現れる場所やおそらくはそのサイズも指定します。

+
+
+ 例: 複数の要素を重ねる
+

2 つの要素を重なり合うように位置づけるには、文書に入れ物になる親要素を作り、その中に 2 つの要素を入れます:

+ 
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+

スタイルシートで、親要素の position を relative にします。移動量を指定する必要はありません。子要素の position を absolute にします。

+ 
#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin: 0; /* 要素の周囲のマージンを 0 に */
+  top: 0; /* 上部からの距離 */
+  left: 0; /*  左部からの距離 */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+
+

結果は、スラッシュの上にバックスラッシュが乗り、次のようになります。

+
+

/

+

\

+
+ + + + + + +
 
+
+
+
+ さらに詳しく
+

位置決めに関する完全な記事は、 CSS 仕様書の複雑な 2 つの章: Visual formatting model と Visual formatting model details にあります。

+

多くのブラウザで機能するようにスタイルシートをデザインするつもりなら、ブラウザごとの標準の解釈の仕方や、おそらくは特定ブラウザの特定バージョンのバグについても考慮する必要があります。

+
+

実習: レイアウトの定義

+
    +
  1. サンプル文書 doc2.html と スタイルシート style2.css を、上の『文書の構造』と『フロート』の各章にある例を使って変更してください。
    2. +
  2. フロート の例にパディングを追加し、右のボーダーからテキストを 0.5em 離してください。
    3. +
+
+
+ チャレンジ
+

サンプル文書 doc2.html を変更して、文書の末尾近く、</body> の直前に次のタグを追加します。

+ 
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+

もし初めの方のチュートリアルで画像ファイルをダウンロードしていなければ、いま行なって、他のサンプルファイルと同じディレクトリに置いてください。

+

+

画像が文書内のどこに現れるか予測してみてください。ブラウザを更新して、予測が正しかったかどうかを見ます。

+

スタイルシートにルールを追加して、文書の右上に画像が置かれるようにしてください。

+

ブラウザを更新し、ウィンドウを小さくします。文書をスクロールしても、画像が右上に留まることを確認しましょう。

+
+
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+

 

+
+ Yellow map pin
+
+
+
+

このチャレンジの解答を見る

+

さて次は？

+

{{nextPage("/ja/docs/CSS/Getting_Started/Tables", "Tables")}} あなたは、この基本チュートリアルのほとんどすべてのトピックスを踏破しました。次のページでは CSS ルールのもっと高度なセレクタと、テーブル のスタイルづけに特有のやり方をいくつか述べます。

diff --git a/files/ja/web/guide/css/getting_started/lists/index.html b/files/ja/web/guide/css/getting_started/lists/index.html new file mode 100644 index 0000000000..ecea2636d7 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/lists/index.html @@ -0,0 +1,245 @@ +--- +title: Lists +slug: Web/Guide/CSS/Getting_started/Lists +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +

{{ CSSTutorialTOC() }}

+

{{ previousPage("/ja/docs/CSS/Getting_Started/Content", "Content") }} これは CSS Getting Started チュートリアルの第10章です。CSS を使ってリストの外見を決める方法について述べます。リストを含む新しいサンプル文書と、リストの体裁を決めるスタイルシートを作ってください。

+

リストについて

+

前章 のチャレンジでは、どの要素の直前にでも、コンテンツを追加してリスト項目のように表示する方法がわかりました。

+

CSS にはリスト用に作られた特別なプロパティがあります。使えるときには使ったほうがたいてい便利です。

+

リストにスタイルを定義するには、{{ cssxref("list-style") }} プロパティを使ってマーカーの種類を指定します。

+

CSS ルールでは、セレクタにリスト項目要素を選ぶこともできますし（例：{{ HTMLElement("li") }}）、親のリスト要素を選んで、リスト要素がスタイルを継承するようにもできます（例：{{ HTMLElement ("ul") }}））。

+

箇条書きリスト（unordered list）

+

箇条書きリストでは、すべてのリスト項目に同じ方法でマーカーがつきます。

+

CSS には3種類のマーカーがあり、ブラウザは次のように表示します:

+ +

もしくは、画像の URL を指定できます。

+
+
+ 例
+

次のルールはリスト項目のクラス別に異なったマーカーを定義します:

+ 
li.open {list-style: circle;}
+li.closed {list-style: disc;}
+
+

リスト内でこれらのクラスを使うと、open と closed の項目の区別がはっきりします（例：to-doリスト):

+ 
<ul>
+  <li class="open">Lorem ipsum</li>
+  <li class="closed">Dolor sit</li>
+  <li class="closed">Amet consectetuer</li>
+  <li class="open">Magna aliquam</li>
+  <li class="closed">Autem veleum</li>
+</ul>
+
+

結果は次のようになるでしょう:

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+

番号順リスト（ordered lists）

+

番号順リストでは、リスト項目は各々違ったマーカーをつけられ、順番を表します。

+

マーカーの種類を定義するには {{ cssxref("list-style") }} プロパティを使ってください:

+ +
+
+ 例
+

これは info クラスの {{ HTMLElement("ol") }} 要素についてのルールで、項目が大文字のアルファベットで識別されます。

+ 
ol.info {list-style: upper-latin;}
+
+

リスト内の {{ HTMLElement("li") }} 要素はこのスタイルを継承します:

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+
+
+ さらに詳しく
+

{{ cssxref("list-style") }} は略記用のプロパティです。複雑なスタイルシートでは、値ごとに個別のプロパティを使いたくなるかもしれません。これら個別のプロパティや、CSS がリストを定義する方法については、リファレンス {{ cssxref("list-style") }} をご覧ください。

+

箇条書きリスト ({{ HTMLElement("ul") }}) や番号リスト ({{ HTMLElement("ol") }}) の慣例的なタグを定めている HTML のようなマークアップ言語を使うなら、その意図通りにタグを使うのはよい練習になります。しかしながら、CSSでは お望みであれば {{ HTMLElement("ul") }} に番号リストを表示させたり、{{ HTMLElement("ol") }} に箇条書きリストを表示させたりもできます。

+

リストのスタイルづけはブラウザによって実装方法が異なります。どのブラウザでも同じ結果が出るとは思わないでください。

+
+

カウンター

+
+

注:  一部のブラウザーはカウンターをサポートしていません。Quirks Mode site の CSS contents and browser compatibility ページに、カウンターや他の CSS 機能についてのブラウザの実装状況の詳しい表があります。このサイトの CSS Reference の各ページにもブラウザ実装状況の表があります。

+
+

カウンターはリスト項目だけでなく、どの要素にも番号をつけられます。例えば、ある文書では見出しや章を数えたいかもしれません。

+

通し番号を定義するには、独自に名前をつけた counter が必要です。

+

カウントが開始されるより前の要素のいずれかで、{{ cssxref("counter-reset") }} プロパティとカウンター名を使ってカウンターをリセットしてください。これは数える要素の親で行うのが適していますが、リスト項目より前に現れる要素ならどれでも使えます。

+

番号が増える要素の各々に {{ cssxref("counter-increment") }} プロパティとカウンター名を使ってください。

+

カウンターを表示するには、セレクタに {{ cssxref(":before") }} または {{ cssxref(":after") }} を追加し、content プロパティを使います（前のページ コンテンツ で行った要領です）。

+

content プロパティの値として、counter() とカウンター名を記述します。オプションとして種類を記述します。種類は上の 番号順リスト の欄にあるものと同じです。

+

通常、カウンターを表示する要素もまたカウンターを増やします。

+
+
+ 例
+

次のルールは numbered クラスを持つ {{ HTMLElement("h3") }} 要素が現れるたびにカウンターを初期化します:

+ 
h3.numbered {counter-reset: mynum;}
+
+

 

+

次のルールは numbered クラスを持つ {{ HTMLELement("p") }} 要素が現れるたびにカウンターを表示し、番号を増やします:

+ 
p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+
+

結果は次のようになります:

+ + + + + + +
Heading
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+
+ さらに詳しく
+

読者がみな、カウンターをサポートするブラウザを使っているとわからなければ、カウンターは使えません。

+

カウンターを使えると、リストの項目と切り離してカウンターにスタイルをつけられる利点があります。上の例では、カウンターは太字ですがリスト項目は違います。

+

もっと複雑な方法でカウンターを使えます — 例えば、様式に沿う文書の章、見出し、サブ見出し、段落を数えます。詳しくは、CSS 仕様書の Automatic counters and numbering をご覧ください。

+
+

実習: スタイルづけされたリスト

+

新しいHTML文書、doc2.html を作成してください。次の内容をコピー＆ペーストします:

+
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample document 2</title>
+    <link rel="stylesheet" href="style2.css">
+  </head>
+  <body>
+
+    <h3 id="oceans">The oceans</h3>
+    <ul>
+      <li>Arctic</li>
+      <li>Atlantic</li>
+      <li>Pacific</li>
+      <li>Indian</li>
+      <li>Southern</li>
+    </ul>
+
+    <h3 class="numbered">Numbered paragraphs</h3>
+    <p class="numbered">Lorem ipsum</p>
+    <p class="numbered">Dolor sit</p>
+    <p class="numbered">Amet consectetuer</p>
+    <p class="numbered">Magna aliquam</p>
+    <p class="numbered">Autem veleum</p>
+
+  </body>
+</html>
+
+

新しいスタイルシート、style2.css を作成してください。次の内容をコピー＆ペーストします:

+
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+

レイアウトやコメントが気に入らなければ変えてください。

+

ブラウザで文書を開きます。カウンター対応のブラウザなら下の例に似たものが見えるでしょう。非対応のブラウザなら、数字が見えません（おそらくコロンも）:

+ + + + + + +
+

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+

Numbered paragraphs

+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+ チャレンジ
+

スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください:

+ + + + + + +
+

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

 

+

次のように、見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください:

+ + + + + + +
+

(A) The oceans

+

. . .

+

(B) Numbered paragraphs

+

. . .

+
+
+

チャレンジの解答を見る。

+

さて次は？

+

{{ nextPage("/ja/docs/CSS/Getting_Started/Boxes", "ボックス") }} 文書を表示するとき、ブラウザは要素をページ上に並べる際に、要素を囲むようにスペースを作ります。次のページでは、要素の基礎となる形である ボックス（boxes）を CSS で扱う方法について述べます。

diff --git a/files/ja/web/guide/css/getting_started/tables/index.html b/files/ja/web/guide/css/getting_started/tables/index.html new file mode 100644 index 0000000000..0fb13e5828 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/tables/index.html @@ -0,0 +1,477 @@ +--- +title: Tables +slug: Web/Guide/CSS/Getting_started/Tables +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +
+ {{CSSTutorialTOC}}{{previousPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}
+

これは CSS Getting Started チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。

+

表（テーブル）について

+

テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。

+

文書を設計する際には、テーブルを細かな情報同士の 関係性 を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。

+

精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（レイアウト）のほうが適しています。

+

テーブルの構造

+

テーブルでは、情報の一つ一つが セル（cell） に入れて表示されます。

+

ページを横切るように並ぶセルが、 行（row）を作ります。

+

テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、ヘッダー（header）です。テーブルの終わりにある特殊な行グループが、フッター（footer）です。テーブルの中心的な行が ボディ（body）で、これも、グループに入っているかもしれません。

+

ページ下方に向けて並ぶセルは列（column）を作りますが、CSS のテーブルでは、列の用途には制限があります。

+
+
+ 例
+

Selectors ページの Selectors based on relationships の表には、行が 5 つ、セルが 10 個あります。

+

最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。

+

列は 2 つあります。

+
+

このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に 伸びた（span）複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。

+

ボーダー

+

セルにはマージンがありません。

+

セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを collapse にすると、間隔を完全に取り除くことができます。

+
+
+ 例
+

テーブルが 3 つあります。

+

左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:
+ （表示例は、この wiki の制限により、正しく表示されていないかもしれません）

+ + + + + + + + +
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+

キャプション

+

{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。

+

底部に移動させるには、{{cssxref("caption-side")}} プロパティを bottom にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。

+

キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。

+
+
+ 例
+

このテーブルは底部にキャプションがあります

+

（表示例は、この wiki の制限により、正しく表示されていないかもしれません）

+ 
#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+
+ + + + + + +
+ + + + + + + +
+ Suits
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+
+

空のセル

+

テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。

+

隠すには empty-cells: hide; と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。

+
+
+ 例
+

次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。

+

左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:

+ + + + + + + +
+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+
+
+
+
+ 詳細
+

テーブルについての詳しい情報は、CSS 仕様書の Tables をご覧ください。

+

そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。

+
+

実習: テーブルのスタイルづけ

+
    +
  1. 新しい HTML 文書 doc3.html を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください: +
    + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample document 3</title>
+    <link rel="stylesheet" href="style3.css">
+  </head>
+  <body>
+    <table id="demo-table">
+      <caption>Oceans</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Area</th>
+          <th>Mean depth</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>million km<sup>2</sup></th>
+          <th>m</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Arctic</th>
+          <td>13,000</td>
+          <td>1,200</td>
+        </tr>
+        <tr>
+          <th>Atlantic</th>
+          <td>87,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Pacific</th>
+          <td>180,000</td>
+          <td>4,000</td>
+        </tr>
+        <tr>
+          <th>Indian</th>
+          <td>75,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Southern</th>
+          <td>20,000</td>
+          <td>4,500</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th>Total</th>
+          <td>361,000</td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>Mean</th>
+          <td>72,000</td>
+          <td>3,800</td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
+
    +
    +
    2. +
  2. 新しいスタイルシート style3.css を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します: + 
    /*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table > tfoot td {
+  background-color: #cee;
+}
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+
    +
    3. +
  3. 文書をブラウザで開きます。次の内容に似たものになるでしょう: + + + + + + +
    +
    +

    Oceans

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     AreaMean depth
     million km2m
    Arctic:13,0001,200
    Atlantic:87,0003,900
    Pacific:180,0004,000
    Indian:75,0003,900
    Southern:20,0004,500
    Total:361,000 
    Mean:72,0003,800
    +
    +
    +
    +
    4. +
  4. 表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです: +
      +
    • キャプションはテーブルのボーダーより外側に置かれています。
      • +
    • もしオプションでフォントの最小値を設定していれば、 km2 の上付き文字に影響します。
      • +
    • 空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。
      • +
    • コロンはスタイルシートで追加しています。
      • +
    +
    5. +
+
+
+ チャレンジ
+

スタイルシートを、テーブルが次のようになるように変えてください:

+ + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
+
+

Oceans

+
+
+
+

チャレンジの解答を見る。

+

さて次は？

+

{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の Full property table をご覧ください。

+

次のページでは、CSS スタイルシートの目的と構造をもう一度見ていきます。

diff --git a/files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html b/files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html new file mode 100644 index 0000000000..035c65e106 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html @@ -0,0 +1,303 @@ +--- +title: XUL ユーザ インターフェース +slug: Web/Guide/CSS/Getting_started/XUL_user_interfaces +translation_of: Archive/Beginner_tutorials/XUL_user_interfaces +--- +

{{ CSSTutorialTOC() }}

+

このページでは、ユーザ インターフェースを作成する言語を解説します。これは Mozilla 特有の言語です。

+

簡単なデモを作り、Mozilla ブラウザで実行してみましょう。

+

ユーザ インターフェース

+

HTML ではユーザ インターフェースをある程度サポートしていますが、スタンドアローンのアプリケーションを作成するのに必要な機能は十分に備わっていません。

+

Mozilla は、ユーザ インターフェイス作成用の言語 XUL (XML ユーザ インタフェース言語、"ズール" と読まれることが多い) を開発し、HTML の制約を解消しました。

+

XUL では、よく使われるユーザ インターフェースの機能が最初から組み込まれています。例えば、ダイアログやウイザードといった特殊なウィンドウ、ステータス バー、メニュー、ツール バーなどです。ブラウザーさえも組み込まれています。

+

XUL をこのチュートリアルで紹介されてきた CSS スタイル、JavaScript コードや XBL バインディングと組み合わせて使うと、高度な専用機能を部品から作成することができます。

+

他の XML ベースの言語と同じように、XUL でも CSS スタイルシートを使用します。

+ + + + + + + +
+ さらに詳しく
XUL ユーザー インターフェースの詳細は、この wiki の XUL ページをご覧下さい。
+

実例: XUL デモ

+

XUL ドキュメント ファイルをプレーン テキスト ファイル (doc7.xul) で新規作成します。下記の内容を一番下までスクロールし、すべての行をコピー & ペーストしてください。

+
+ 
<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="style7.css"?>
+<!DOCTYPE window>
+
+<window
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  title="CSS Getting Started - XUL demonstration"
+  onload="init();">
+
+<script type="application/javascript" src="script7.js"/>
+
+<label class="head-1" value="XUL demonstration"/>
+
+<vbox>
+
+  <groupbox class="demo-group">
+    <caption label="Day of week calculator"/>
+    <grid>
+      <columns>
+        <column/>
+        <column/>
+        </columns>
+      <rows>
+        <row>
+          <label class="text-prompt" value="Date:"
+            accesskey="D" control="date-text"/>
+          <textbox id="date-text" type="timed"
+            timeout="750" oncommand="refresh();"/>
+          </row>
+        <row>
+          <label value="Day:"/>
+          <hbox id="day-box">
+            <label class="day" value="Sunday" disabled="true"/>
+            <label class="day" value="Monday" disabled="true"/>
+            <label class="day" value="Tuesday" disabled="true"/>
+            <label class="day" value="Wednesday" disabled="true"/>
+            <label class="day" value="Thursday" disabled="true"/>
+            <label class="day" value="Friday" disabled="true"/>
+            <label class="day" value="Saturday" disabled="true"/>
+            </hbox>
+          </row>
+        </rows>
+      </grid>
+    <hbox class="buttons">
+      <button id="clear" label="Clear" accesskey="C"
+        oncommand="clearDate();"/>
+      <button id="today" label="Today" accesskey="T"
+        oncommand="setToday();"/>
+      </hbox>
+    </groupbox>
+
+  <statusbar>
+    <statusbarpanel id="status"/>
+    </statusbar>
+
+</vbox>
+
+</window>
+
+
+

次に、CSS ファイルを style7.css として新規作成します。下記の内容を一番下までスクロールし、すべての行をコピー & ペーストしてください。

+
+ 
/*** XUL demonstration ***/
+window {
+  -moz-box-align: start;
+  background-color: -moz-dialog;
+  font: -moz-dialog;
+  padding: 2em;
+  }
+
+.head-1 {
+  font-weight: bold;
+  font-size: 200%;
+  padding-left: 5px;
+  }
+
+
+/* the group box */
+.demo-group {
+  padding: 1em;
+  }
+
+.demo-group grid {
+  margin-bottom: 1em;
+  }
+
+.demo-group column {
+  margin-right: .5em;
+  }
+
+.demo-group row {
+  margin-bottom: .5em;
+  }
+
+.demo-group .buttons {
+  -moz-box-pack: end;
+  }
+
+
+/* the day-of-week labels */
+.day {
+  margin-left: 1em;
+  }
+
+.day[disabled] {
+  color: #777;
+  }
+
+.day:first-child {
+  margin-left: 4px;
+  }
+
+
+/* the left column labels */
+.text-prompt {
+  padding-top: .25em;
+  }
+
+
+/* the date input box */
+#date-text {
+  max-width: 8em;
+  }
+
+
+/* the status bar */
+statusbar {
+  width: 100%;
+  border: 1px inset -moz-dialog;
+  margin: 4px;
+  padding: 0px 4px;
+  }
+
+#status {
+  padding: 4px;
+  }
+
+#status[warning] {
+  color: red;
+  }
+
+
+

テキストファイルを script7.js として新規作成します。下記の内容を一番下までスクロールし、すべての行をコピー & ペーストしてください。

+
+ 
// XUL demonstration
+
+var dateBox, dayBox, currentDay, status; // elements
+
+// called by window onLoad
+function init() {
+  dateBox = document.getElementById("date-text")
+  dayBox = document.getElementById("day-box")
+  status = document.getElementById("status")
+  setToday();
+  }
+
+// called by Clear button
+function clearDate() {
+  dateBox.value = ""
+  refresh()
+  }
+
+// called by Today button
+function setToday() {
+  var d = new Date()
+  dateBox.value = (d.getMonth() + 1)
+    + "/" + d.getDate()
+    + "/" + d.getFullYear()
+  refresh()
+  }
+
+// called by Date textbox
+function refresh() {
+  var d = dateBox.value
+  var theDate = null
+
+  showStatus(null)
+  if (d != "") {
+    try {
+      var a = d.split("/")
+      var theDate = new Date(a[2], a[0] - 1, a[1])
+      showStatus(theDate)
+      }
+    catch (ex) {}
+    }
+  setDay(theDate)
+  }
+
+// internal
+function setDay(aDate) {
+  if (currentDay) currentDay.setAttribute("disabled", "true")
+  if (aDate == null) currentDay = null
+  else {
+    var d = aDate.getDay()
+    currentDay = dayBox.firstChild
+    while (d-- > 0) currentDay = currentDay.nextSibling
+    currentDay.removeAttribute("disabled")
+    }
+  dateBox.focus();
+  }
+
+function showStatus(aDate) {
+  if (aDate == null) {
+    status.removeAttribute("warning")
+    status.setAttribute("label", "")
+    }
+  else if (aDate === false || isNaN(aDate.getTime())) {
+    status.setAttribute("warning", "true")
+    status.setAttribute("label", "Date is not valid")
+    }
+  else {
+    status.removeAttribute("warning")
+    status.setAttribute("label", aDate.toLocaleDateString())
+    }
+  }
+
+
+

ここでは、ブラウザーのデフォルト テーマを使用してください。デモの結果が筆者の意図した通りになるようにするためです。もし他のテーマを使ってしまうと、ユーザー インターフェースの スタイルが違ったものになり、デモが変わった結果になるかもしれません。

+

Mozilla ブラウザーで XUL ドキュメントを開きインターフェースを使ってみてください。

+

この wiki は XUL とページ内 JavaScript に対応していないので、ここではデモをお見せできませんが下のようになるはずです。

+ + + + + + +
+

XUL demonstration

+
+

Day of week calculator

+ + + + + + + + + + + + + + + +
Date:6/27/2005
Day:Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday
  +
+

Clear Today

+
+
+
+
+

June 27, 2005

+
+
+

このデモで注目すべき点は下記の通りです。

+ +

ドキュメントのスタイ-ルシートをよく見て、その中のルールをすべて理解しているか確認してください。もし分からないものがあったらコメント アウトして、ブラウザーでリロードしてください。するとそのルールが無効になることで、どのような変化があるかが分かります。

+ + + + + + + +
+ チャレンジ
Use the DOM Inspector tool to examine the Date textbox. It is made up of other elements that are generated by its XBL binding. +

Discover the class of its html:input element. This is the element that actually receives user input.

+

Using this knowledge, add a rule to the stylesheet that makes the background of the Date box pale blue when it has keyboard focus (but white when keyboard focus is somewhere else).

+
+

What next?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

In this demonstration, you see the standard rectangular shapes that are common to most user interfaces. Mozilla also supports a specialized graphics language for creating shapes, using CSS stylesheets to specify the style. The next page demonstrates this: SVG and CSS.

diff --git a/files/ja/web/guide/css/media_queries/index.html b/files/ja/web/guide/css/media_queries/index.html new file mode 100644 index 0000000000..961536b070 --- /dev/null +++ b/files/ja/web/guide/css/media_queries/index.html @@ -0,0 +1,412 @@ +--- +title: メディアクエリ +slug: Web/Guide/CSS/Media_queries +tags: + - CSS + - CSS Reference +--- +

{{ gecko_minversion_header("1.9.1") }}

+ +

CSS 3 ではメディア依存のスタイルシートのサポートが強化され、よりメディアの特性に適したスタイルシートを適用できます。メディアクエリは、メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定 (limits the style sheets' scope) する一つ以上の式からなります。メディア特性には、メディアの幅と高さ、色数などがあります。メディアクエリにより、コンテンツそのものを変更せずに、出力デバイスに合わせてコンテンツを表現することができます。

+ +

構文

+ +

メディアクエリは、メディアタイプと、メディア特性を必要とする一つ以上の式からなります。この式の結果は、true または false になります。クエリの結果は、ドキュメントが表示されるデバイスの種類がメディアクエリで指定されたメディアタイプにマッチし、さらにメディアクエリのすべての式が true のとき、true になります。

+ +

論理演算子

+ +

論理演算子を使用して複雑なメディアクエリを記述できます。論理演算子には、not および and, only があります。

+ +

また、複数のメディアクエリをカンマ区切りのリスト形式で併記することもできます。リスト内のいずれかのメディアクエリが true であれば、関連付けられたスタイルシートが適用されます。これは論理演算子の "or" と等価です。

+ +

not キーワードは、クエリの結果を否定します。例えば、"all and (not color)" のクエリは、モノクロデバイスではメディアタイプに関係なく true になります。

+ +

only キーワードは、メディアクエリに対応していない古いブラウザからスタイルシートを隠します:

+ +
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+
+ +

擬似 BNF (この表記を好む方のために)

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

メディアクエリは大文字と小文字を区別しません。メディアクエリに書かれた未知のメディアタイプは常に false になります。

+ +
注記: 式 (expression) の前後には括弧が必要です。括弧を書かないとエラーになります。
+ +

メディア特性

+ +

ほとんどのメディア特性には、特性が式の値 "以上" または "以下" であることを明示的に制約する "min-" または "max-" 前置詞を付けられます。これは、HTML や XML に干渉する "<" および ">" 記号の使用を避けるためのものです。値を指定せずにメディア特性を使用した場合、特性の値が 0 でなくても、式の結果は true になります。

+ +
注記: メディア特性がブラウザを実行中のデバイスに適用されない場合、メディア特性に記述された式の値は常に false になります。例えば、音声デバイスに対するアスペクト比の問い合わせは常に false になります。
+ +

color

+ +

値: {{cssxref("<color>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスのカラーコンポーネントあたりのビット数を指示します。デバイスがカラー表示可能なものでない場合、この値は 0 になります。

+ +
注記: カラーコンポーネントがカラーコンポーネントごとに異なるビット数を持つ場合、最も小さな数値が使用されます。例えば、ディスプレイが、青は 5 ビット、赤と緑は 6 ビットのカラーコンポーネントで構成されている場合、デバイスはカラーコンポーネントあたり 5 ビット使用するものとみなされ、color テーブルではビット数の最小値が使用されます。
+ +

例

+ +

すべてのカラー表示可能なデバイスにスタイルシートを適用するには:

+ +
@media all and (color) { ... }
+
+ +

カラーコンポーネントあたり最低 4 ビットのデバイスにスタイルシートを適用するには:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスのカラー検索テーブルのエントリ数を指示します。

+ +

例

+ +

インデックス化されたカラーを使用するすべてのデバイスにスタイルシートを適用するよう指示するには:

+ +
@media all and (color-index) { ... }
+
+ +

最低 256 色を持つインデックス化されたカラーデバイスにスタイルシートを適用するには:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

値: 整数 / 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの対象とする表示領域のアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。

+ +

例

+ +

以下は、表示領域が、その高さよりも幅が広い場合に使用される、特別なスタイルシートを選択します。

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

これは、アスペクト比が 1:1 以上の場合のスタイルを選択します。

+ +

device-aspect-ratio

+ +

値: 整数 / 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスのアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。

+ +

例

+ +

以下は、ワイドスクリーンディスプレイに使用する特別なスタイルシートを選択します。

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

これは、アスペクト比が 16:9 または 16:10 の場合のスタイルを選択します。

+ +

device-height

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの高さを記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。

+ +

例

+ +

幅 800 ピクセル未満のスクリーンに表示されるドキュメントにスタイルシートを適用するには:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+
+ +

device-width

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの幅を記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。

+ +

grid

+ +

値: 整数
+ メディア: all
+ min/max 前置詞の使用: 不可

+ +

出力デバイスがグリッドデバイスとビットマップデバイスのどちらなのかを決定します。デバイスがグリッドベース (tty ターミナルや電話機のディスプレイなど表示部が一行ずつ) の場合、値は 1 になります。ビットマップデバイスの場合は 0 になります。

+ +
注記: Gecko (および Firefox) は現在グリッドデバイスに対応していないため、このメディア特性はサポートされていません。
+ +

例

+ +

ディスプレイの表示幅が 15 文字以下の handheld デバイスにスタイルを適用するには:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
注記: "em" 単位はグリッドデバイスで特別な意味を持ちます。"em" 単位の正確な幅を特定することができないため、1em はグリッドセル一つ分の幅と高さであると仮定されます。
+ +

height

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

height メディア特性には、出力デバイスの描画域の高さを記述します (viewport の高さやプリンタのページ印刷領域の高さなど)。

+ +
注記: ユーザがウィンドウの大きさを変更すると、width や height メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。
+ +

monochrome

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 可

+ +

モノクロ (グレースケール) デバイス上のピクセルあたりのビット数を指示します。デバイスがモノクローム表示でない場合、デバイスの値は 0 になります。

+ +

例

+ +

すべてのモノクロデバイスにスタイルシートを適用するには:

+ +
@media all and (monochrome) { ... }
+
+ +

ピクセルあたり最低 8 ビットのモノクロデバイスにスタイルシートを適用するには:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

値: landscape | portrait
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスが横置き (landscape: 高さより幅が広い表示) と縦置き (portrait: 幅より高さが高い表示) のどちらのモードなのかを指示します。

+ +

例

+ +

縦置き方向のときにだけスタイルシートを適用するには:

+ +
@media all and (orientation: portrait) { ... }
+ +

resolution

+ +

値: {{cssxref("<resolution>")}}
+ メディア: {{cssxref("Media/Bitmap", "bitmap")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの解像度 (ピクセル密度) を指示します。解像度は、1 インチあたりのドット数 (dpi) または 1 センチメートルあたりのドット数 (dpcm) で指定されます。

+ +

例

+ +

解像度が最低 300 dpi のデバイスにスタイルシートを適用するには:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

scan

+ +

値: progressive | interlace
+ メディア: {{cssxref("Media/TV", "tv")}}
+ min/max 前置詞の使用: 不可

+ +

テレビ出力デバイスの走査方式を記述します。

+ +
注記: Gecko (および Firefox) は現在 tv メディアタイプをサポートしていないため、このメディア特性も同様にサポートされていません。
+ +

例

+ +

プログレッシブ方式で走査するテレビにだけスタイルシートを適用するには:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

width メディア特性には、出力デバイスの描画域の幅を記述します (viewport の幅やプリンタのページ印刷領域の幅など)。

+ +
注記: ユーザがウィンドウの大きさを変更すると、width や height メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。
+ +

例

+ +

幅 20 em 以上の handheld デバイスまたは screen デバイスにスタイルシートを指定したいときは:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

次のメディアクエリは、印刷された幅が 8.5 インチ以上のメディアに適用されるスタイルシートを指定します:

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

次のメディアクエリは、viewport の幅が 500 ピクセルから 800 ピクセルの場合に使用されるスタイルシートを指定します:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+ +

Mozilla 独自のメディア特性

+ +

{{ gecko_minversion_header("1.9.2") }}

+ +

Mozilla はいくつかの Gecko 独自のメディア特性を提供しています。これらの一部は公式のメディア特性として提案される予定です。

+ +

-moz-images-in-menus

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

メニューに画像が表示できるデバイスの場合、この値は 1 になります。そうでない場合は 0 になります。これは、{{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS 擬似クラスに相当します。

+ +

-moz-mac-graphite-theme

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

Mac OS X で、ユーザがデバイスのアピアランスを "Graphite" に設定している場合、この値は 1 になります。ユーザが標準の青色のアピアランスを使用しているか Mac OS X でない場合、この値は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS 擬似クラスに相当します。

+ +

-moz-maemo-classic

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが Maemo でオリジナルのテーマを使用している場合、この値は 1 になります。新しい Fremantle テーマを使用している場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-end-backward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-end-forward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-start-backward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-start-forward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-thumb-proportional

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、スクロールバーのトンボのサイズを変化させる (ドキュメント全体に対する表示部分の割り合いによる) 場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS 擬似クラスに相当します。

+ +

-moz-touch-enabled

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスが (タッチスクリーンの) タッチイベントをサポートしている場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS 擬似クラスに相当します。

+ +

例

+ +

例えば、ユーザがタッチスクリーンデバイスで操作している場合に、指で押しやすくするため、ボタンを大きめに描画することが考えられます。

+ +

-moz-windows-classic

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが Windows でテーマを適用していない (uxtheme を使用する代わりにクラシックモードで使用している) 場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(windows-classic)") }} CSS 擬似クラスに相当します。

+ +

-moz-windows-compositor

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが Windows で DWM compositor を使用している場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS 擬似クラスに相当します。

+ +

-moz-windows-default-theme

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが現在 Windows の既定のテーマ (Luna, Royale, Zune または Vista Basic, Vista Advanced, Aero Glass を含む Aero) の一つを使用している場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS 擬似クラスに相当します。

+ +

参照

+ + diff --git a/files/ja/web/guide/dom/index.html b/files/ja/web/guide/dom/index.html new file mode 100644 index 0000000000..17c6e376c3 --- /dev/null +++ b/files/ja/web/guide/dom/index.html @@ -0,0 +1,36 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +--- +

{{draft}}

+ +

Document Object Model はHTML と XML ドキュメントのための API です。 DOM はドキュメントの構造的表現を提供しており、開発者がコンテンツ自身や、ドキュメントの表示を変更することができるようになります。基本的に、スクリプトやプログラミング言語を通して、ページを繋げています。

+ +

obuject（例、ドキュメントオブジェクトはドキュメント自身を表したり、テーブルオブジェクトはhtmlのテーブル要素を表す、など）内に組み込まれているウェブページを作成したり、操作するためのすべてのプロパティやメソッド、イベントはweb開発者が使用可能です。これらのオブジェクトにはjavascript等のスクリプト言語でアクセス可能です。

+ +

 

+ +

DOMはほぼ大抵 JavaScript と合わせて使用されます。しかし、DOMはどんなプログラミング言語にも非依存なものとして設計されました。 a single, consistent API を使用してドキュメントの構造的な表現を作ることが可能です。このサイトでは私たちはJavaScriptにフォーカスを当てていますが、DOMを実装するのはどのような言語でも可能です。

+ +

The DOM is most often used in conjunction with JavaScript. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for any language.

+ +

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

+ +

DOMはなぜ重要なのか?

+ +

"Dynamic HTML" (DHTML) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the W3C FAQ).

+ +

As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers. The user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

+ +

 

+ +

DOMについてもっと知る

+ +

{{LandingPageListSubpages}}

diff --git a/files/ja/web/guide/events/creating_and_triggering_events/index.html b/files/ja/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..442a8be237 --- /dev/null +++ b/files/ja/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,141 @@ +--- +title: イベントの作成と起動 +slug: Web/Guide/Events/Creating_and_triggering_events +tags: + - Advanced + - DOM + - Guide + - JavaScript + - NeedsContent + - events +translation_of: 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");
+  }
+}
+ +

関連情報

+ + diff --git a/files/ja/web/guide/events/event_handlers/index.html b/files/ja/web/guide/events/event_handlers/index.html new file mode 100644 index 0000000000..5123afd667 --- /dev/null +++ b/files/ja/web/guide/events/event_handlers/index.html @@ -0,0 +1,172 @@ +--- +title: DOM onevent ハンドラー +slug: Web/Guide/Events/Event_handlers +tags: + - Beginner + - DOM + - DOM Beginner + - NeedsBeginnerUpdate + - NeedsUpdate +translation_of: Web/Guide/Events/Event_handlers +--- +

ウェブプラットフォームでは、DOM イベントの通知を受け取るための方法をいくつか提供しています。よく使われる方法は2つあり、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} と、特定の onevent ハンドラーです。このページでは、後者がどのように機能するのかについて注目します。

+ +

onevent ハンドラーの登録

+ +

onevent ハンドラーは特定の DOM 要素のプロパティで、その要素がイベントに対してどのように反応するかを管理します。要素には、対話的なもの (リンク、ボタン、画像、フォームなど) と対話的ではないもの (基本の <body> 要素など) があります。イベントとは、以下のようなアクションのことです。

+ + + +

onevent ハンドラーは通常、onclick, onkeypress, onfocus など、反応するイベントに従って名前が付けられています。

+ +

on<…> イベントハンドラーを指定することで、指定されたオブジェクトの特定のイベント ({{event("click")}} など) に対してさまざまな方法で指定することができます。

+ + + +

onevent イベントハンドラープロパティは、1 つのイベントハンドラーを割り当てることができる一種のプレースホルダーとして機能します。与えられたオブジェクト上の同じイベントに対して複数のハンドラーをインストールできるようにするには、その addEventListener() メソッドを呼び出して、オブジェクト上の与えられたイベントに対するハンドラーのリストを管理することができます。ハンドラーは、その {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 関数を呼び出すことで、オブジェクトから削除することができます。

+ +

要素に適用されるイベントが発生すると、そのイベントハンドラーが次々と呼び出され、イベントを処理できるようになります。自分で呼び出す必要はありませんが、多くの場合、イベントの発生を簡単にシミュレートするために呼び出すことができます。例えば、ボタンオブジェクト myButton を指定した場合、 myButton.onclick(myEventObject) を実行することでイベントハンドラーを直接呼び出すことができます。イベントハンドラーがイベントオブジェクトからデータにアクセスしない場合は、 onclick() を呼び出すときにイベントを省略することができます。

+ +

これは、イベントハンドラーのいずれかがイベントオブジェクト自身に対して {{domxref("Event.stopPropagation", "stopPropagation()")}} を呼び出すことでイベントの処理を明示的に停止しない限り、すべてのハンドラーが呼び出されるまで続きます。

+ +

要素以外のオブジェクト

+ +

イベントハンドラーはまた、 {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }} などを含む、イベントを生成する多くの要素以外のオブジェクトのプロパティを使用して設定することもできます。例えば、 progress イベントが XMLHttpRequest のインスタンスで発生した場合は次のようになります。

+ +
const xhr = new XMLHttpRequest();
+xhr.onprogress = function() { … };
+ +

HTML の onevent 属性

+ +

HTML 要素には onevent という名前の属性があり、これを利用して HTML コード内に直接イベントのハンドラーを登録することができます。要素が HTML から構築されると、その onevent 属性の値がその要素を表す DOM オブジェクトにコピーされるので、JavaScript を使って属性の値にアクセスすると、HTML で設定された値が得られます。

+ + + +

HTML の属性値への更なる変更は {{domxref("Element/setAttribute", "setAttribute")}} メソッドで行うことができます。 JavaScript プロパティを変更しても効果あありません。

+ +

HTML

+ +

このような HTML 文書があったとします。

+ +
<p>Demonstrating quirks of <code>on<em>event</em></code> HTML attributes on
+   <a onclick="log('Click!')">these three words</a>.
+</p>
+
+<div></div>
+ +

JavaScript

+ +

この JavaScript は、 HTML 属性の値が JavaScript オブジェクトのプロパティの変更によって影響を受けないことを示しています。

+ +
let logElement = document.querySelector('div');
+let el = document.querySelector("a");
+
+function log(msg) { logElement.innerHTML += `${msg}<br>` };
+function anchorOnClick(event) { log("Changed onclick handler") };
+
+// Original Handler
+log(`Element's onclick as a JavaScript property: <code> ${el.onclick.toString()} </code>`);
+
+//Changing handler using .onclick
+log('<br>Changing onclick handler using <strong> onclick property </strong> ');
+
+el.onclick = anchorOnClick;
+
+log(`Changed the property to: <code> ${el.onclick.toString()} </code>`);
+log(`But the HTML attribute is unchanged: <code> ${el.getAttribute("onclick")} </code><br>`);
+
+//Changing handler using .setAttribute
+log('<hr/><br> Changing onclick handler using <strong> setAttribute method </strong> ');
+el.setAttribute("onclick", 'anchorOnClick(event)');
+
+log(`Changed the property to: <code> ${el.onclick.toString()} </code>`);
+log(`Now even the HTML attribute has changed: <code> ${el.getAttribute("onclick")} </code><br>`);
+ +

結果

+ +

{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}

+ +

歴史的な理由から、{{HTMLElement("body")}} および {{HTMLElement("frameset")}} 要素の一部の属性/プロパティは、実際にはその親 {{domxref("Window")}} オブジェクトにイベントハンドラーを設定します。(HTML 仕様はこれらを {{domxref("GlobalEventHandlers/onblur", "onblur")}}, {{domxref("GlobalEventHandlers/onerror", "onerror")}}, {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}, {{domxref("GlobalEventHandlers/onload", "onload")}}, {{domxref("GlobalEventHandlers/onscroll", "onscroll")}} と命名しています。)

+ +

イベントハンドラーの引数、this の結びつけ、および返値

+ +

イベントハンドラーが HTML 属性として指定されている場合、指定されたコードは次の引数を持つ関数にラップされます。

+ + + +

イベントハンドラーが呼び出されると、ハンドラー内の this キーワードは、ハンドラーが登録されている DOM 要素に設定されます。詳しくは、this キーワードのドキュメントを参照してください。

+ +

ハンドラーからの返値は、イベントが取り消されるかどうかを決定します。返値値の具体的な処理はイベントの種類によって異なります。詳細については、HTML 仕様の「イベントハンドラー処理アルゴリズム」を参照してください。

+ +

イベントハンドラーが呼び出されたとき

+ +
+

作成中 (非捕獲リスナー)

+
+ +

用語集

+ +

イベントハンドラーという用語は、次のように使用されます。

+ + + +

イベントを待ち受けするためのさまざまな方法を議論するときは、

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ +

イベントハンドラープロパティが存在することの検出

+ +

JavaScript の {{jsxref("Operators/in", "in")}} 演算子でイベントハンドラープロパティの存在を検出することができます。例えば、以下のようになります。

+ +
if ("onsomenewfeature" in window) {
+  /* do something amazing */
+}
+
+ +

イベントハンドラーとプロトタイプ

+ +

DOM プロトタイプオブジェクトには、IDL で定義された属性の値を設定したり、アクセスしたりすることはできません。つまり、例えば Window.prototype.onload を変更することはできません。以前は、 Gecko では イベントハンドラー (onload など) が IDL 属性として実装されていなかったので可能だったのですが、現在はできなくなりました。これにより互換性が向上します。

diff --git a/files/ja/web/guide/events/index.html b/files/ja/web/guide/events/index.html new file mode 100644 index 0000000000..d05127c86a --- /dev/null +++ b/files/ja/web/guide/events/index.html @@ -0,0 +1,50 @@ +--- +title: イベント開発者ガイド +slug: Web/Guide/Events +tags: + - DOM + - Event + - Guide + - events +translation_of: Web/Guide/Events +--- +
{{draft()}}
+ +

イベントは、ウェブページの生存期間に起こる様々な出来事を非同期に扱うために使用されるデザインパターンと、さまざまな種類の多数の出来事についての名前、特性付け、利用の両方を指します。

+ +

概要ページでは、デザインパターンの紹介と最近のウェブブラウザーで定義され行われる出来事の種類の概要を提供します。

+ +

カスタムイベントページでは、独自コードでイベントコードのデザインパターンを使用して、ユーザーオブジェクトによって発行される新しいイベント型を定義し、それらのイベントを処理するためのリスナー関数を登録し、ユーザーのコードでイベントを発生させる方法について説明します。

+ +

その他のページでは、ウェブブラウザーで定義されているさまざまな種類のイベントの使用方法について説明します。残念なことに、これらのイベントはウェブブラウザーの進化に合わせて部分的に定義されてきたため、最新のウェブブラウザーに組み込まれている、または定義されているイベントの満足のいく体系的な特徴付けはありません。

+ +

ウェブブラウザーが実行されている端末は、例えば実世界での場所や方向の変化によってイベントが発生することがあり、これは方向座標系上のページおよび三次元変換の使用上のページで部分的に説明されているとおりです。これは端末の縦の方向が変化した場合とは異なりますが、似ています。

+ +

ブラウザーが表示されるウィンドウがイベントを発生させることがあります。例えば、ユーザーがウィンドウを最大化したり、その他の変更があったりすると、サイズ変更イベントが発生します。

+ +

ウェブページを読み込んでいるプロセスがユーザーに表示するためにウェブページをダウンロードし、解析し、レンダリングする様々な段階を補完するための応答としてイベントを発生することがあります。

+ +

ウェブページのコンテンツへのユーザーの操作がイベントを発生させることがあります。ユーザーの操作によって発生したイベントは、ブラウザー設計の初期の頃に進化し、イベントが呼び出される順序およびその順序を制御することができる方法を定義する複雑なシステムを含んでいます。さまざまな種類のユーザー対話型イベントには、以下のものがあります。

+ + + +

構造面やコンテンツにおけるウェブページの変更が、いくつかのイベントを発生させることがあり、変化イベントのページで説明されているとおりですが、これらのイベントはより軽い Mutation Observer のアプローチに置き換えられて非推奨になっています。

+ +

HTML 文書に埋め込まれたメディアストリームがいくつかのイベントを発生させることがあり、メディアイベントページで説明されている通りです。

+ +

ウェブページによって行われるネットワークリクエストが、いくつかのイベントを発生させることがあります。

+ +

他にも、ウェブブラウザーが定義したイベントの発生源で、このガイドではまだ言及していないものがたくさんあります。

+ +
+

メモ: このイベント開発者ガイドは継続的な作業が必要です。構造を再編したりページを書き直したりする必要があります。イベントについて知っておくことが必要なすべてをここで提供できるようになりたいと考えています。

+
+ +

文書

+ +

{{LandingPageListSubpages}}

diff --git a/files/ja/web/guide/events/orientation_and_motion_data_explained/index.html b/files/ja/web/guide/events/orientation_and_motion_data_explained/index.html new file mode 100644 index 0000000000..467800a0d6 --- /dev/null +++ b/files/ja/web/guide/events/orientation_and_motion_data_explained/index.html @@ -0,0 +1,49 @@ +--- +title: 方向および動きとして示されるデータ +slug: Web/Guide/Events/Orientation_and_motion_data_explained +tags: + - DOM + - Mobile + - Motion + - NeedsContent + - Orientation + - Responsive Design + - páginas_a_traducir + - rotation +translation_of: Web/Guide/Events/Orientation_and_motion_data_explained +--- +

{{ Draft() }}

+

方向や動きのイベントを使用するときは、ブラウザから与えられる値の意味を理解することが重要です。この記事では操作時の座標システムに関する詳細情報と、それらの使い方を説明します。

+

座標フレームについて

+

{{原語併記("座標フレーム", "coordinate frame")}} は、オブジェクトに関する 3 軸 (X、Y、Z) の方向が定義されているシステムです。方向や動きのイベントを使用するときに考慮する座標フレームは 2 つあります:

+

地球座標フレーム

+

{{原語併記("地球座標フレーム", "Earth coordinate frame")}} は、地球の中心に固定されている座標フレームです。すなわち、軸は重力によって引かれる力および標準的な磁北方向に基づいて揃えられます。私たちは大文字 ("X"、"Y"、"Z") を、地球座標フレームの軸を示すために使用します。

+ +

デバイス座標フレーム

+

{{原語併記("デバイス座標フレーム", "Device coordinate frame")}} は、デバイスの中心に固定された座標フレームです。私たちは小文字 ("x"、"y"、"z") を、デバイス座標フレームの軸を示すために使用します。

+

axes.png

+ +
+ 注意: 電話機やタブレットでは、デバイスの方向が常にスクリーンの標準的な方向に対して考えられます。これは、ほとんどのデバイスで "ポートレート" 方向になります。ラップトップコンピュータでは、方向はキーボードに対して考えられます。補正するためにデバイスの方向の変化を検知したい場合は、orientationchange イベントを使用できます。
+

回転について

+

回転は、デバイス座標フレームと地球座標フレームとの度合いの違いという点から各軸で表現され、またそれは度単位で測られます

+

Alpha

+

z 軸を中心にした回転、すなわちデバイスをひねるようにすると、alpha 回転角が変化します:

+

alpha.png

+

alpha 角はデバイスの上端が地球の北極をまっすぐ向いているときが 0 度であり、デバイスが左へ回転するのに従って増加します。

+

Beta

+

x 軸を中心にした回転、すなわちデバイスを向こう側やユーザ側へ向かって傾けると、beta 回転角が変化します:

+

beta.png

+

beta 角はデバイスの上端および下端から地球の表面までの距離がどちらも同じであるときが 0 度であり、デバイスを前方へ傾けるのに従って 180 度まで増加、後方へ傾けるのに従って -180 度まで減少します。

+

Gamma

+

y 軸を中心にした回転、すなわちデバイスを左右に傾けると、gamma 回転角が変化します:

+

gamma.png

+

gamma 角はデバイスの左端および右端から地球の表面までの距離がどちらも同じであるときが 0 度であり、デバイスを右へ傾けるのに従って 90 度まで増加、左へ傾けるのに従って -90 度まで減少します。

diff --git a/files/ja/web/guide/events/overview_of_events_and_handlers/index.html b/files/ja/web/guide/events/overview_of_events_and_handlers/index.html new file mode 100644 index 0000000000..0a52f3b4c6 --- /dev/null +++ b/files/ja/web/guide/events/overview_of_events_and_handlers/index.html @@ -0,0 +1,136 @@ +--- +title: Overview of Events and Handlers +slug: Web/Guide/Events/Overview_of_Events_and_Handlers +translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers +--- +
+

This overview of events and event handling explains the code design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle.

+
+ +

Events and event handling provide a core technique in JavaScript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page,  relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing.

+ +

Events and event handling become central to web programming with the addition of the language to browsers, accompanying a switch in the rendering architecture of browsers from fetch and load page rendering to event driven, reflow based, page rendering. Initially, browsers wait, until they receive all of the resources associated with a page, to parse, process, draw, and present the page to the user. The displayed page remains unchanged until the browser requests a new page. With the change to dynamic page rendering, browsers loop continuously between processing, drawing, presenting content, and waiting for some new event trigger. Event triggers include the completion of the loading of a resource on the network e.g., downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser e.g., processes the HTML content of a page, the interaction of a user with the contents of the page e.g., clicks a button. Douglas Crockford explains this change effectively in several lectures, notably his talk, An Inconvenient API: The Theory of the DOM, which shows the change in flow from the original browser flow

+ +
A comparison of the sequential and event-driven browser load sequences.
+ +

to the event driven browser. The latter approach changes the last steps from a single flow into a perpetual loop, where waiting for and handling the incidence of new events follows painting. The innovation of the dynamic approach allows for a page to be partially rendered even when the browser has not finished retrieving all resources; this approach also allows for event driven actions, which JavaScript leverages. (The talk is available from several sources, including this one.) Currently, all execution environments for JavaScript code use events and event handling.

+ +

The event design pattern

+ +

The event system, at its core, is simply a programming design pattern. The pattern starts with an agreement over a kind of event and:

+ + + +

The pattern is implemented by

+ + + +

The function is said to be a 'listener' or a 'handler' with both names used interchangeably. This pattern can easily be followed using completely custom code, as explained in the article on custom events. The pattern is also used by modern web browsers which define many events emitted in response to user input or browser activity.

+ +

Modern web browsers follow the event pattern using a standardized approach. Browsers use as the data structure for the properties of the event, an object derived from the EventPrototype object. Browsers use as the registration method for the function which will handle those data structures a method called addEventListener which expects as arguments a string event type name and the handler function. Finally, browsers define a large number of objects as event emitters and define a wide variety of event types generated by the objects.

+ +

Button Event Handler Demo

+ +

For example, browser button elements are intended to emit events named 'click' in response to a mouse click or, when displayed in touch sensitive surfaces, to a finger tap. We could define in the HTML page a button as:

+ +
<button id="buttonOne">Click here to emit a 'click' event</button>
+ +

and, in our JavaScript code, we could first define a function to listen to that 'click' event:

+ +
var example_click_handler = function (ev){
+    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
+    alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind );
+};
+ +

and second register our function with the the Button object, either on the scripting side using the DOM (Document Object Model) representation of the HTML page:

+ +
var buttonDOMElement = document.querySelector('#buttonOne');
+buttonDOMElement.addEventListener('click', example_click_handler);
+ +

or within the HTML page by adding the function as the value of the 'onclick' attribute, although this second approach is usually only used in very simple web pages.

+ +

{{ EmbedLiveSample('Button_Event_Handler') }}

+ +

This code relies on the agreement that there is a kind of event called 'click' which will call any listener (or 'handler') function with an Event object argument (actually, in this case a derivative MouseEvent object) and which will be fired by HTML button elements after user interaction. The code has no visible effect until a user interacts with the button either by placing the mouse pointer over the HTML button and clicking on the left mouse button or by placing a finger or stylus of some kind on the screen above the HTML button; when that happens, the buttonDOMElement JavaScript object would call the example_click_handler function with an Event object as an argument. The function, in turn, would perform whatever action was chosen by the programmer, in this case to open an HTML alert dialog. Note that the handler has access to the ev object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.

+ +

As a second example, much modern JavaScript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the HTML has been processed and is available for alteration or decoration. For example, code might be attached as:

+ +
var funcInit = function(){
+    // user code goes here and can safely address all the HTML elements from the page
+    // since the document has successfully been 'loaded'
+}
+document.addEventListener('DOMContentLoaded', funcInit);
+
+ +

so that this code will only be executed after the document object emits the 'DOMContentLoaded' event because the HTML has been parsed and Javasript objects created representing each of the nodes of the HTML document. Note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code merely needs to wait to run until after then event has happened.

+ +

The pattern is therefore easy to learn and implement. The difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. There is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations.

+ +

Notable events

+ +

Web browsers define a large number of events so it is not practical to list them all. The Event Reference attempts to maintain a list of the standard Events used in modern web browsers.

+ +

In general, we can distinguish events of different kinds based on the object emitting the event including:

+ + + +

although this list is currently incomplete.

+ +

Some notable events are:

+ +
+

Note: This list of events will need work to make relevant; that work is awaiting some global reorganization work on the documents. This will also need finding a good explanation of the events involved during page loading, such as discussed partially in this web page or in this Stack Overflow question.

+
+ + + +

 

+ +

The Event object hierarchy

+ +

The web browser defines many events of different kinds. Each definition includes, as the data structure passed to the handler function, an object which inherits from the EventPrototype object.

+ +

A partial diagram of the class hierarchy of event objects is:

+ +
+

Note: This diagram is incomplete.

+
+ +

+ +

The Web API Documentation contains a page defining the Event object which also includes the known DOM event subclasses of the Event object.

+ +

Documents

+ +

Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:

+ + + +

 

+ +

 

+ +

 

diff --git a/files/ja/web/guide/graphics/index.html b/files/ja/web/guide/graphics/index.html new file mode 100644 index 0000000000..e8f842c2cb --- /dev/null +++ b/files/ja/web/guide/graphics/index.html @@ -0,0 +1,51 @@ +--- +title: ウェブのグラフィック +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Graphics + - HTML5 + - SVG + - Web + - WebGL + - WebRTC + - ウェブ + - グラフィック +translation_of: Web/Guide/Graphics +--- +

ウェブサイトやアプリケーションは、画像などのグラフィックを表現する必要がある場合がよくあります。静的な画像であれば、 {{HTMLElement("img")}} 要素を使ったり、 {{cssxref("background-image")}} プロパティで HTML 要素の背景を設定したりすることで、簡単に表示することができます。その場でグラフィックを構築したり、事後に画像を操作したりすることもできます。これらの記事は、このような操作を行う方法についての詳しい情報を提供しています。

+ +
+
+

2D グラフィック

+ +
+
Canvas
+
{{HTMLElement("canvas")}} 要素は、 JavaScript を使用して 2D グラフィックを描画する API を提供します。
+
SVG
+
SVG (Scalable Vector Graphics) を使うと、直線や曲線、他の幾何学図形を使用してグラフィックを描画できます。ビットマップの使用を避けることにより、どのようなサイズにもすっきりと変更可能な画像を生成できます。
+
+ +

すべて見る...

+
+ +
+

3D グラフィック

+ +
+
WebGL
+
ウェブ用の 3D グラフィック API である WebGL をはじめて使う方向けのガイドです。この技術は、標準の OpenGL ES 仕様をウェブコンテンツ内で使用できます。
+
+ +

動画

+ +
+
HTML5 の audio と video を使用する
+
HTML 文書内に動画や音声を埋め込み、再生を制御をします。
+
WebRTC
+
WebRTC の「RTC」は、Real-Time Communications の頭文字です。これは、ブラウザークライアント間 (P2P) で音声/動画ストリーミングとデータ共有を可能にする技術です。
+
+
+
diff --git a/files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..d8cf43a362 --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html @@ -0,0 +1,380 @@ +--- +title: 高度なアニメーション +slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations +tags: + - Canvas + - Graphics + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

前の章では、いくつかの基本的なアニメーションを作成して、物の動かし方を学びました。このパートでは、 運動そのものをより詳細に見て、 アニメーションをより高度にするための物理を追加していきましょう。

+
+ +

ボールを描く

+ +

アニメーションの勉強のために、ボールを使おうと思うので、最初にボールを canvas 上に描きましょう。次のコードは私たちの準備をしてくれるでしょう。

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

普通は、まず描画コンテキストが必要になります。 ボールを描くため、 プロパティと canvas にボールを描くための draw() メソッドを持つ ball オブジェクトを作りましょう。

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

ここでは特別なことはなく、ball は本当に単純な円で、{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} メソッドの助けを借りて描かれています。

+ +

速度の追加

+ +

ボールが手に入りましたので、このチュートリアルの前の章で習ったように、基本的なアニメーションを加えていきましょう。また {{domxref("window.requestAnimationFrame()")}} がアニメーションの制御を手助けしてくれます。The ball gets moving by adding a velocity vector to the position. For each frame, we also {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} the canvas to remove old circles from prior frames.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

境界線

+ +

Without any boundary collision testing our ball runs out of the canvas quickly. We need to check if the x and y position of the ball is out of the canvas dimensions and invert the direction of the velocity vectors. To do so, we add the following checks to the draw method:

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

最初のデモ

+ +

これまでで、実際にどのように動くか見てみましょう。canvas にマウスを移動させて、アニメーションを開始してます。

+ + + +

{{EmbedLiveSample("First_demo", "610", "310")}}

+ +

加速

+ +

動きをよりリアルにするために、このような速度で再生できます。たとえば：

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

This slows down the vertical velocity each frame, so that the ball will just bounce on the floor in the end.

+ + + +

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ +

後引きの効果

+ +

Until now we have made use of the {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} method when clearing prior frames. If you replace this method with a semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, you can easily create a trailing effect.

+ +
ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ctx.fillRect(0,0,canvas.width,canvas.height);
+ + + +

{{EmbedLiveSample("Third_demo", "610", "310")}}

+ +

マウスコントロールの追加

+ +

ボールに対するちょっとした制御をするために、たとえば mousemove イベントを使用してボールをマウスの動きに従わせる。といったことができます。click イベントでボールを開放して、またバウンドさせる。といったことも可能です。

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255,255,255,0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e){
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener("click",function(e){
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

マウスを使ってボールを動かして、クリックで開放してください。

+ +

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

+ +

ブロック崩し

+ +

This short chapter only explains some techniques to create more advanced animations. There are many more! How about adding a paddle, some bricks, and turn this demo into a Breakout game? Checkout our Game development area for more gaming related articles.

+ +

関連項目

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..c23a5e1ce1 --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,725 @@ +--- +title: スタイルと色を適用する +slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
+ +
+

「canvas に図形を描く」の章ではデフォルトの線と塗りのスタイルのみを使いました。ここではより魅力的に描くために使うことのできるcanvasのオプションについて見ていきます。具体的には、色、線のスタイル、グラデーション、パターンや影を追加する方法について学びます。

+
+ +

色

+ +

これまでは描画コンテキストの方法についてのみ見てきました。色を図形に適用するために、"fillStyle"と"strokeStyle"という2つの重要なプロパティを利用することができます。

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
図形の塗りつぶしのスタイルを記述する
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
図形のアウトラインのスタイルを記述する。
+
+ +

colorの部分にはCSSでの{{cssxref("<color>")}}表現やグラデーションオブジェクトまたはパターンオブジェクトが入ります。グラデーションオブジェクトとパターンオブジェクトについては後ほど学ぶことにします。 デフォルトでは、輪郭線・塗りつぶしの色は黒に設定されています。 (CSS色では#000000)

+ +
+

注記: strokeStyleおよびfillStyleプロパティを設定すると、その設定した値がデフォルトとなって、それ以降に描かれる図形の線や塗りはその色で行なわれるようになります。それぞれの図形をそれぞれ別の色で描きたい場合は、シェイプを描くごとにstrokeStyleおよびfillStyleプロパティを設定する必要があります。

+
+ +

入力できる有効な文字列は、CSS {{cssxref("<color>")}}表現の値である必要があります。 下記の例では同じ色について説明しています。

+ +
// これらは全てfillStyleにオレンジ色を代入します
+
+ctx.fillStyle = "orange";
+ctx.fillStyle = "#FFA500";
+ctx.fillStyle = "rgb(255,165,0)";
+ctx.fillStyle = "rgba(255,165,0,1)";
+
+ +

プロパティ fillStyle の例

+ +

この例では二重のforループを使って正方形からなるグリッドを作ってみたい。そしてその正方形の一つひとつは違った色になるようにしたい。結果は下のスクリーンショットのようになるだろう。かなり面白い画像ができているだろう。それぞれのブロックで別々な色を表現するために、２つの変数i,jを用いている。変数iは赤成分を、変数jは緑成分を変化させている。青成分は固定されている。By modifying the channels, you can generate all kinds of palettes. By increasing the steps, you can achieve something that looks like the color palettes Photoshop uses.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 6; i++) {
+    for (var j = 0; j < 6; j++) {
+      ctx.fillStyle = `rgb(${Math.floor(255-42.5*i)}, ${Math.floor(255-42.5*j)}, 0)`;
+      ctx.fillRect(j*25, i*25, 25, 25);
+    }
+  }
+}
+ + + +

結果は以下のようになる:

+ +

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

プロパティ strokeStyle の例

+ +

This example is similar to the one above, but uses the strokeStyle property to change the colors of the shapes' outlines. We use the arc() method to draw circles instead of squares.

+ +
  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i=0;i<6;i++){
+      for (var j=0;j<6;j++){
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                         Math.floor(255-42.5*j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+        ctx.stroke();
+      }
+    }
+  }
+
+ + + +

The result looks like this:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

透明度のコントロール

+ +

canvasに不透明な形状を描画するだけでなく、半透明の形状を描画することもできます。 これは、globalAlphaプロパティを設定するか、輪郭線や塗りつぶしのスタイルに半透明の色を割り当てることによって行われます。

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
代入された透明度の値を、代入後にcanvasに描画されるすべての図形に適用します。値は0.0（完全に透明）から1.0（完全に不透明）の間でなければなりません。デフォルトでは1.0（完全に不透明）が設定されています。
+
+ +

globalAlphaプロパティは、同様の透明度でcanvasにいくつもの図形を描画する場合に役に立ちますが、それ以外の場合は、色を設定するときにそれぞれの図形に透明度を設定する方が一般的に便利です。

+ +

strokeStyleプロパティとfillStyleプロパティはCSSのrgba表現を利用できるため、次のような表記を使用して透明な色を割り当てることもできます。

+ +
// 輪郭線と塗りつぶしの色に透明色を割り当てる
+
+ctx.strokeStyle = "rgba(255,0,0,0.5)";
+ctx.fillStyle = "rgba(255,0,0,0.5)";
+
+ +

rgba()関数はrgb()関数によく似ていますが、1つ引数が増加します。最後の引数には、この色の透明度の値を設定します。有効な値の範囲は、0.0（完全に透明）から1.0（完全に不透明）です。

+ +

プロパティ globalAlpha の例

+ +

In this example, we'll draw a background of four different colored squares. On top of these, we'll draw a set of semi-transparent circles. The globalAlpha property is set at 0.2 which will be used for all shapes from that point on. Every step in the for loop draws a set of circles with an increasing radius. The final result is a radial gradient. By overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. By increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0,0,75,75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75,0,75,75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0,75,75,75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75,75,75,75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i=0;i<7;i++){
+    ctx.beginPath();
+    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

An example using rgba()

+ +

In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // Draw semi transparent rectangles
+  for (var i=0;i<10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (var j=0;j<4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
+    }
+  }
+}
+ + + +

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

+ +

Line styles

+ +

There are several properties which allow us to style lines.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Sets the width of lines drawn in the future.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Sets the appearance of the ends of lines.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Sets the appearance of the "corners" where lines meet.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
Returns the current line dash pattern array containing an even number of non-negative numbers.
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
Sets the current line dash pattern.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
Specifies where to start a dash array on a line.
+
+ +

You'll get a better understanding of what these do by looking at the examples below.

+ +

A lineWidth example

+ +

This property sets the current line thickness. Values must be positive numbers. By default this value is set to 1.0 units.

+ +

The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path. Because canvas coordinates do not directly reference pixels, special care must be taken to obtain crisp horizontal and vertical lines.

+ +

In the example below, 10 straight lines are drawn with increasing line widths. The line on the far left is 1.0 units wide. However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++){
+    ctx.lineWidth = 1+i;
+    ctx.beginPath();
+    ctx.moveTo(5+i*14,5);
+    ctx.lineTo(5+i*14,140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

+ +

Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.

+ +

+ +

If you consider a path from (3,1) to (3,5) with a line thickness of 1.0, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. This is what happens with the 1.0 width line in the previous example code.

+ +

To fix this, you have to be very precise in your path creation. Knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the 1.0 line width ends up completely and precisely filling a single pixel vertical line.

+ +
+

Note: Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current lineCap style whose default value is butt; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the lineCap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).

+ +

Note also that only start and final endpoints of a path are affected: if a path is closed with closePath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the lineJoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). See the next two sections for demonstrations of these additional line styles.

+
+ +

For even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels.

+ +

While slightly painful when initially working with scalable 2D graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. A 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position.

+ +

A lineCap example

+ +

The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

+ +

+ +
+
butt
+
The ends of lines are squared off at the endpoints.
+
round
+
The ends of lines are rounded.
+
square
+
The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
+
+ +

In this example, we'll draw three lines, each with a different value for the lineCap property. I also added two guides to see the exact differences between the three. Each of these lines starts and ends exactly on these guides.

+ +

The line on the left uses the default butt option. You'll notice that it's drawn completely flush with the guides. The second is set to use the round option. This adds a semicircle to the end that has a radius half the width of the line. The line on the right uses the square option. This adds a box with an equal width and half the height of the line thickness.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10,10);
+  ctx.lineTo(140,10);
+  ctx.moveTo(10,140);
+  ctx.lineTo(140,140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i=0;i<lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25+i*50,10);
+    ctx.lineTo(25+i*50,140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

A lineJoin example

+ +

The lineJoin property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).

+ +

There are three possible values for this property: round, bevel and miter. By default this property is set to miter. Note that the lineJoin setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case.

+ +

+ +
+
round
+
Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to half the line width.
+
bevel
+
Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
+
miter
+
Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is effected by the miterLimit property which is explained below.
+
+ +

The example below draws three different paths, demonstrating each of these three lineJoin property settings; the output is shown above.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round','bevel','miter'];
+  ctx.lineWidth = 10;
+  for (var i=0;i<lineJoin.length;i++){
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5,5+i*40);
+    ctx.lineTo(35,45+i*40);
+    ctx.lineTo(75,5+i*40);
+    ctx.lineTo(115,45+i*40);
+    ctx.lineTo(155,5+i*40);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

A demo of the miterLimit property

+ +

As you've seen in the previous example, when joining two lines with the miter option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, as the angles between each line decreases, the distance (miter length) between these points increases exponentially.

+ +

The miterLimit property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join gets drawn instead. Note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterLimit property (whose default value is 10.0 in the HTML {{HTMLElement("canvas")}}), so the miterLimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.

+ +

More exactly, the miter limit is the maximum allowed ratio of the extension length (in the HTML canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. It can equivalently be defined as the maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. It is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join:

+ + + +

Here's a little demo in which you can set miterLimit dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.

+ +

If you specify a miterLimit value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a miterLimit above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with intermediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0,0,150,150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5,50,160,50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0,100);
+  for (i=0;i<24;i++){
+    var dy = i%2==0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
+  }
+  ctx.stroke();
+  return false;
+}
+
+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

+ +

Using line dashes

+ +

The setLineDash method and the lineDashOffset property specify the dash pattern for lines. The setLineDash method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the lineDashOffset property sets an offset where to start the pattern.

+ +

In this example we are creating a marching ants effect. It is an animation technique often found in selection tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other basic animations.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10,10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+ +

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

+ +

Gradients

+ +

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
+
+ +

For example:

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+
+ +

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
+
+ +

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

+ +
var lineargradient = ctx.createLinearGradient(0,0,150,150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+
+ +

A createLinearGradient example

+ +

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0,0,0,150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10,10,130,130);
+  ctx.strokeRect(50,50,50,50);
+
+}
+
+ + + +

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

+ +

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

+ +

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

+ +

A createRadialGradient example

+ +

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+
+ + + +

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

+ +

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

+ +

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

+ +

Patterns

+ +

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
+
+ +

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

+ +
+
repeat
+
Tiles the image in both vertical and horizontal directions.
+
repeat-x
+
Tiles the image horizontally but not vertically.
+
repeat-y
+
Tiles the image vertically but not horizontally.
+
no-repeat
+
Doesn't tile the image. It's used only once.
+
+ +

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

+ +
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img,'repeat');
+
+ +
+

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

+
+ +

A createPattern example

+ +

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function(){
+
+    // create pattern
+    var ptrn = ctx.createPattern(img,'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0,0,150,150);
+
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

+ +

Shadows

+ +

Using shadows involves just four properties:

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
+
+ +

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

+ +

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

+ +

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

+ +
+

Note: Shadows are only drawn for source-over compositing operations.

+
+ +

A shadowed text example

+ +

This example draws a text string with a shadowing effect.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+  ctx.font = "20px Times New Roman";
+  ctx.fillStyle = "Black";
+  ctx.fillText("Sample String", 5, 30);
+}
+
+ + + +

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

+ +

We will look at the font property and fillText method in the next chapter about drawing text.

+ +

Canvas fill rules

+ +

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
+
+ Two values are possible:

+ + + +

In this example we are using the evenodd rule.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
+  ctx.fill("evenodd");
+}
+ + + +

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html new file mode 100644 index 0000000000..1690518a7d --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html @@ -0,0 +1,711 @@ +--- +title: Basic animations +slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
+ +
+

私たちが {{HTMLElement("canvas")}} 要素の操作に JavaScript を使うのは、とても簡単にインタラクティブなアニメーションを作成できるからです！本章では、いくつかの基本的なアニメーションで、その概要をつかんでいきます。

+
+ +

おそらく最大の制約は、キャンバスに図形を一度描画すると、その状態が維持されることです。アニメーションさせる場合にも、移動する部分と以前に描いた部分をすべて再描画する必要があります。複雑なフレームの再描画には時間がかかり、パフォーマンスは、実行しているコンピューターの速度に大きく依存します。

+ +

基本的なアニメーションの手順

+ +

フレームを描画させる手順は、このようになります。

+ +
    +
  1. キャンバスをクリアする
    + 描画する図形がキャンバス全体 (たとえば、背景画像) に収まらない限り、以前に描画した図形をすべてクリアする必要があります。それを行う最も簡単な方法は、{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} メソッドを使うことです。
    2. +
  2. キャンバスの状態を保存する
    + キャンバスの状態に影響を与える設定(スタイル、変形など)を変更していて、フレームを描画するたびに元の状態を使用したい場合は、その状態を保存する必要があります。
    3. +
  3. アニメ―ションさせる図形を描画する
    + 実際に、フレームの描画を行います。
    4. +
  4. キャンバスの状態を復元する
    + 状態を保存した場合は、新しいフレームを描画する前に状態を復元します。
    5. +
+ +

アニメーションの制御

+ +

図形は、canvas のメソッドを直接使用するか、カスタム関数を呼び出すことによって描画されます。通常は、スクリプトの実行が終了したときにのみ、これらの結果がキャンバスに表示されます。たとえば、for ループ内からアニメーションを実行することはできません。

+ +

つまり、一定の期間ごとに描画関数を実行する方法が必要です。このようなアニメーションを制御するには、2 つの方法があります。

+ +

スケジュールの更新

+ +

まず、{{domxref("window.setInterval()")}}、{{domxref("window.setTimeout()")}} があります。それから、{{domxref("window.requestAnimationFrame()")}} 関数があります。これらは、特定の関数を一定時間で呼び出すために使用できます。

+ +
+
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+
function で指定した関数を delay ミリ秒ごとに繰り返し実行します。
+
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+
function で指定した関数を delay ミリ秒後に実行します。
+
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+
アニメーションを実行することをブラウザーに通知し、次の再描画の前にアニメーションを更新するため、ブラウザーが指定の関数を呼び出すように要求します。
+
+ +

ユーザーの操作が必要ない場合は、提供されたコードを繰り返し実行する setInterval() 関数を使用できます。ゲームを作成したい場合、キーボードまたはマウスのイベントを使用してアニメーションを制御するため setTimeout() を使用できます。{{domxref( "EventListener")}}を設定することで、ユーザーの操作を取得し、アニメーション関数を実行します。

+ +
+

以下の例では、{{domxref("window.requestAnimationFrame()")}} メソッドを使用してアニメーションを制御します。requestAnimationFrame メソッドは、フレームを描画する準備ができた時にシステムがアニメーションフレームを呼び出すことで、よりスムーズで効率的な方法でアニメーションを提供します。通常、コールバック回数は 1 秒あたり 60 回となり、バックグラウンドタブで実行している場合は、レートが低くなることがあります。特にゲームのアニメーションループの詳細については、ゲーム開発のビデオゲームの解剖学を参照してください。

+
+ +

アニメーションする太陽系

+ +

この例は、太陽系の小さなモデルをアニメーションさせます。

+ +
var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+
+ + + +

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+ +

アニメ―ションする時計

+ +

この例は、アニメーションする時計で現在時間を表示します。

+ +
function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  for (var i=0;i<12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i<60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr>=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);
+ + + +

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+ +

ループする風景

+ +

この例は、左から右へ風景写真をスクロールさせます。Wikipedia からヨセミテ国立公園の画像を使いましたが、キャンバスよりも大きな任意の画像を使用できます。

+ +
var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; // lower is faster
+var scale = 1.05;
+var y = -4.5; // vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width * scale;
+    imgH = img.height * scale;
+
+    if (imgW > CanvasXSize) {
+        // image larger than canvas
+        x = CanvasXSize - imgW;
+    }
+    if (imgW > CanvasXSize) {
+        // image width larger than canvas
+        clearX = imgW;
+    } else {
+        clearX = CanvasXSize;
+    }
+    if (imgH > CanvasYSize) {
+        // image height larger than canvas
+        clearY = imgH;
+    } else {
+        clearY = CanvasYSize;
+    }
+
+    // get canvas context
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // set refresh rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // if image is <= Canvas Size
+    if (imgW <= CanvasXSize) {
+        // reset, start from beginning
+        if (x > CanvasXSize) {
+            x = -imgW + x;
+        }
+        // draw additional image1
+        if (x > 0) {
+            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+        }
+        // draw additional image2
+        if (x - imgW > 0) {
+            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
+        }
+    }
+
+    // image is > Canvas Size
+    else {
+        // reset, start from beginning
+        if (x > (CanvasXSize)) {
+            x = CanvasXSize - imgW;
+        }
+        // draw aditional image
+        if (x > (CanvasXSize-imgW)) {
+            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
+        }
+    }
+    // draw image
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // amount to move
+    x += dx;
+}
+
+ +

以下は、画像をスクロールする {{HTMLElement("canvas")}} です。ここで指定する幅と高さは、JavaScript コードの CanvasXZSize および CanvasYSize 変数の値と一致する必要があることに注意してください。

+ +
<canvas id="canvas" width="800" height="200"></canvas>
+ +

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

+ +

マウス追跡アニメーション

+ +
<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Document</title>
+        <script>
+            var cn;
+            //= document.getElementById('cw');
+            var c;
+            var u = 10;
+            const m = {
+                x: innerWidth / 2,
+                y: innerHeight / 2
+            };
+            window.onmousemove = function(e) {
+                m.x = e.clientX;
+                m.y = e.clientY;
+
+            }
+            function gc() {
+                var s = "0123456789ABCDEF";
+                var c = "#";
+                for (var i = 0; i < 6; i++) {
+                    c += s[Math.ceil(Math.random() * 15)]
+                }
+                return c
+            }
+            var a = [];
+            window.onload = function myfunction() {
+                cn = document.getElementById('cw');
+                c = cn.getContext('2d');
+
+                for (var i = 0; i < 10; i++) {
+                    var r = 30;
+                    var x = Math.random() * (innerWidth - 2 * r) + r;
+                    var y = Math.random() * (innerHeight - 2 * r) + r;
+                    var t = new ob(innerWidth / 2,innerHeight / 2,5,"red",Math.random() * 200 + 20,2);
+                    a.push(t);
+                }
+                //cn.style.backgroundColor = "#700bc8";
+
+                c.lineWidth = "2";
+                c.globalAlpha = 0.5;
+                resize();
+                anim()
+            }
+            window.onresize = function() {
+
+                resize();
+
+            }
+            function resize() {
+                cn.height = innerHeight;
+                cn.width = innerWidth;
+                for (var i = 0; i < 101; i++) {
+                    var r = 30;
+                    var x = Math.random() * (innerWidth - 2 * r) + r;
+                    var y = Math.random() * (innerHeight - 2 * r) + r;
+                    a[i] = new ob(innerWidth / 2,innerHeight / 2,4,gc(),Math.random() * 200 + 20,0.02);
+
+                }
+                //  a[0] = new ob(innerWidth / 2, innerHeight / 2, 40, "red", 0.05, 0.05);
+                //a[0].dr();
+            }
+            function ob(x, y, r, cc, o, s) {
+                this.x = x;
+                this.y = y;
+                this.r = r;
+                this.cc = cc;
+                this.theta = Math.random() * Math.PI * 2;
+                this.s = s;
+                this.o = o;
+                this.t = Math.random() * 150;
+
+                this.o = o;
+                this.dr = function() {
+                    const ls = {
+                        x: this.x,
+                        y: this.y
+                    };
+                    this.theta += this.s;
+                    this.x = m.x + Math.cos(this.theta) * this.t;
+                    this.y = m.y + Math.sin(this.theta) * this.t;
+                    c.beginPath();
+                    c.lineWidth = this.r;
+                    c.strokeStyle = this.cc;
+                    c.moveTo(ls.x, ls.y);
+                    c.lineTo(this.x, this.y);
+                    c.stroke();
+                    c.closePath();
+
+                }
+            }
+            function anim() {
+                requestAnimationFrame(anim);
+                c.fillStyle = "rgba(0,0,0,0.05)";
+                c.fillRect(0, 0, cn.width, cn.height);
+                a.forEach(function(e, i) {
+                    e.dr();
+                });
+
+            }
+        </script>
+        <style>
+            #cw {
+                position: fixed;
+                z-index: -1;
+            }
+
+            body {
+                margin: 0;
+                padding: 0;
+                background-color: rgba(0,0,0,0.05);
+            }
+        </style>
+    </head>
+    <body>
+        <canvas id="cw"></canvas>
+    </body>
+</html>
+
+ +
表示例
+ + + + + + + +
+

beyblade

+
+ +

スネークゲーム

+ +
<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Nokia 1100:snake..Member berries</title>
+</head>
+
+<body>
+    <div class="keypress hide">
+        <div class="up" onclick="emit(38)">&#8593;</div>
+        <div class="right" onclick="emit(39)">&#8594;</div>
+        <div class="left" onclick="emit(37)">&#8592;</div>
+        <div class="down" onclick="emit(40)">&#8595;</div>
+    </div>
+    <div class="banner" id="selector">
+        <div>
+            Time :<span id="time">0</span>
+        </div>
+        <div>LousyGames ©</div>
+        <div>
+            Score :<span id="score">0</span>
+        </div>
+        <div class="touch off" onclick="touch(this)">touch</div>
+    </div>
+    <canvas id="main"></canvas>
+</body>
+<style>
+    body {
+        margin: 0;
+        overflow: hidden;
+        background: #000
+    }
+
+    .banner {
+        text-align: center;
+        color: #fff;
+        background: #3f51b5;
+        line-height: 29px;
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        font-family: monospace;
+        height: 30px;
+        opacity: .4;
+        display: flex;
+        transition: .5s
+    }
+
+    .banner:hover {
+        opacity: 1
+    }
+
+    div#selector>div {
+        flex-basis: 30%
+    }
+
+    @keyframes diss {
+        from {
+            opacity: 1
+        }
+
+        to {
+            opacity: 0
+        }
+    }
+
+    .keypress>div {
+        border: dashed 3px #fff;
+        height: 48%;
+        width: 48%;
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        align-self: center;
+        align-items: center;
+        font-size: -webkit-xxx-large;
+        font-weight: 900;
+        color: #fff;
+        transition: .5s;
+        opacity: .1;
+        border-radius: 7px
+    }
+
+    .keypress {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        opacity: 1;
+        user-select: none
+    }
+
+    .keypress>div:hover {
+        opacity: 1
+    }
+
+    .touch {
+        background: #8bc34a
+    }
+
+    .off {
+        background: #f44336
+    }
+
+    .hide {
+        opacity: 0
+    }
+</style>
+</html>
+ +

Javascript

+ +
function tmz() {
+        var e = new Date(t),
+            i = new Date,
+            n = Math.abs(i.getMinutes() - e.getMinutes()),
+            o = Math.abs(i.getSeconds() - e.getSeconds());
+        return n + " : " + o
+    }
+
+    function coll(t, e) {
+        return t.x < e.x + e.w && t.x + t.w > e.x && t.y < e.y + e.h && t.h + t.y > e.y
+    }
+
+    function snake() {
+        this.w = 15, this.h = 15, this.dx = 1, this.dy = 1, this.xf = 1, this.yf = 1, this.sn = [];
+        for (var t = {
+            x: w / 2,
+            y: h / 2
+        }, e = 0; e < 5; e++) this.sn.push(Object.assign({}, t)), t.x += this.w;
+        this.draw = function () {
+            var t = d && d.search("Arrow") > -1,
+                e = -1;
+            if (t) {
+                var i = {
+                    ...this.sn[0]
+                };
+                if ("ArrowUp" == d && (i.y -= this.h), "ArrowDown" == d && (i.y += this.h), "ArrowLeft" == d && (i.x -= this.w), "ArrowRight" == d && (i.x += this.w), i.x >= w ? i.x = 0 : i.x < 0 && (i.x = w - this.w), i.y > h ? i.y = 0 : i.y < 0 && (i.y = h), e = fa.findIndex(t => coll({
+                    ...this.sn[0],
+                    h: this.h,
+                    w: this.w
+                }, t)), this.sn.unshift(i), -1 != e) return console.log(e), fa[e].renew(), void (document.getElementById("score").innerText = Number(document.getElementById("score").innerText) + 1);
+                this.sn.pop(), console.log(6)
+            }
+            this.sn.forEach((t, e, i) => {
+                if (0 == e || i.length - 1 == e) {
+                    var n = c.createLinearGradient(t.x, t.y, t.x + this.w, t.y + this.h);
+                    i.length - 1 == e ? (n.addColorStop(0, "black"), n.addColorStop(1, "#8BC34A")) : (n.addColorStop(0, "#8BC34A"), n.addColorStop(1, "white")), c.fillStyle = n
+                } else c.fillStyle = "#8BC34A";
+                c.fillRect(t.x, t.y, this.w, this.h), c.strokeStyle = "#E91E63", c.font = "30px serif", c.strokeStyle = "#9E9E9E", i.length - 1 != e && 0 != e && c.strokeRect(t.x, t.y, this.w, this.h), 0 == e && (c.beginPath(), c.fillStyle = "#F44336", c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill()), c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill(), c.beginPath()
+            })
+        }
+    }
+
+    function gc() {
+        for (var t = "0123456789ABCDEF", e = "#", i = 0; i < 6; i++) e += t[Math.ceil(15 * Math.random())];
+        return e
+    }
+
+    function food() {
+        this.x = 0, this.y = 0, this.b = 10, this.w = this.b, this.h = this.b, this.color = gc(), this.renew = function () {
+            this.x = Math.floor(Math.random() * (w - 200) + 10), this.y = Math.floor(Math.random() * (h - 200) + 30), this.color = gc()
+        }, this.renew(), this.put = (() => {
+            c.fillStyle = this.color, c.arc(this.x, this.y, this.b - 5, 0, 2 * Math.PI), c.fill(), c.beginPath(), c.arc(this.x, this.y, this.b - 5, 0, Math.PI), c.strokeStyle = "green", c.lineWidth = 10, c.stroke(), c.beginPath(), c.lineWidth = 1
+        })
+    }
+
+    function init() {
+        cc.height = h, cc.width = w, c.fillRect(0, 0, w, innerHeight);
+        for (var t = 0; t < 10; t++) fa.push(new food);
+        s = new snake(w / 2, h / 2, 400, 4, 4), anima()
+    }
+
+    function anima() {
+        c.fillStyle = "rgba(0,0,0,0.11)", c.fillRect(0, 0, cc.width, cc.height), fa.forEach(t => t.put()), s.draw(), document.getElementById("time").innerText = tmz(), setTimeout(() => {
+            requestAnimationFrame(anima)
+        }, fw)
+    }
+
+    function emit(t) {
+        key.keydown(t)
+    }
+
+    function touch(t) {
+        t.classList.toggle("off"), document.getElementsByClassName("keypress")[0].classList.toggle("hide")
+    }
+    var t = new Date + "",
+        d = void 0,
+        cc = document.getElementsByTagName("canvas")[0],
+        c = cc.getContext("2d");
+    key = {}, key.keydown = function (t) {
+        var e = document.createEvent("KeyboardEvent");
+        Object.defineProperty(e, "keyCode", {
+            get: function () {
+                return this.keyCodeVal
+            }
+        }), Object.defineProperty(e, "key", {
+            get: function () {
+                return 37 == this.keyCodeVal ? "ArrowLeft" : 38 == this.keyCodeVal ? "ArrowUp" : 39 == this.keyCodeVal ? "ArrowRight" : "ArrowDown"
+            }
+        }), Object.defineProperty(e, "which", {
+            get: function () {
+                return this.keyCodeVal
+            }
+        }), e.initKeyboardEvent ? e.initKeyboardEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, t) : e.initKeyEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, 0), e.keyCodeVal = t, e.keyCode !== t && alert("keyCode mismatch " + e.keyCode + "(" + e.which + ")"), document.dispatchEvent(e)
+    };
+    var o, s, h = innerHeight,
+        w = innerWidth,
+        fw = 60,
+        fa = [];
+    window.onkeydown = function (t) {
+        var e = t.key;
+        (e.search("Arrow") > -1 || "1" == e) && (d = t.key), "i" != e && "I" != e || (console.log("inc"), fw -= 10), "d" != e && "D" != e || (console.log("dec"), fw += 10)
+    }, init();
+
+ +
表示例
+ + + + + + + +
+

Snake game

+
+ +

その他のサンプル

+ +
+
A basic ray-caster
+
キーボードを使ってアニメーションをどのように制御するか説明した良いサンプルです。
+
Advanced animations
+
高度なアニメーション技術と物の動きについて見ていきます。
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html b/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html new file mode 100644 index 0000000000..c9bc6c17f4 --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html @@ -0,0 +1,152 @@ +--- +title: Basic usage of canvas +slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +
+

まずチュートリアルの最初として {{HTMLElement("canvas")}} {{Glossary("HTML")}} 要素を説明します。このページを読めば、canvas 要素に 2D の画像を描けるようになります。

+
+ +

<canvas> 要素

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

{{HTMLElement("canvas")}} は {{HTMLElement("img")}} と似ています。src 属性と alt 属性がない点が明確に異なりますが、{{htmlattrxref("width", "canvas")}} と {{htmlattrxref("height", "canvas")}} の属性がある点などは共通しています。 これらの属性は必ず指定しなければならないものではありません。このほかに様々な {{Glossary("DOM")}} 属性を利用できます。 width と height 属性が指定されなかった場合、canvas は幅 300 ピクセル、高さ 150 ピクセルの要素として初期化されます。画面上の大きさは {{Glossary("CSS")}} によって変更できますが、その場合 canvas に描画される画像は CSS の指定に合わせて拡大 / 縮小されます。この際、元の画像のアスペクト比は考慮されないため、指定の仕方によっては画像が歪んで表示されます。

+ +
+

付記: 画像が歪んでいると感じた時は、<canvas> の width と height 属性の値を設定して、CSS によるサイズの変更をしないようにしましょう。

+
+ +

id 属性は 全ての要素が持つ属性 で <canvas> に固有なものではありません。これを利用することで、ユニークな ID を要素に持たせられます。ID を持たせることで、JavaScript の中から、その要素を探すのが簡単になります。

+ +

<canvas> 要素は通常の画像と同じようにレイアウトされます。({{cssxref("margin")}} や {{cssxref("border")}}、 {{cssxref("background")}} といったルールも利用可能ですが、これらは実際に描画される画像には影響を与えません。スタイルが何も設定されていない場合、canvas は最初透明なものとして描画されます。スタイルとレイアウトに関しては専用のページを設けています。詳細は、そちらをご覧ください。

+ +
+

代替コンテンツ

+ +

<canvas> 要素は対応していないブラウザ、例えば Internet Explorer 9 以前、で表示するための代替コンテンツを定義できます。これは {{HTMLElement("img")}} というよりは、むしろ {{HTMLElement("video")}} や {{HTMLElement("audio")}}、{{HTMLElement("picture")}} 要素に似ています。

+ +

代替コンテンツの定義方法はシンプルで、<canvas> 要素の内部に代わりに表示するコンテンツを記述します。対応していないブラウザは <canvas> を無視するため、その内部のコンテンツが表示されるというわけです。

+ +

次の例では JavaScript によって canvas に対して、代替テキストが設定されています：

+ +
<canvas id="stockGraph" width="150" height="150">
+  現在の株価: $3.15 +0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

使用するブラウザを変更するよう利用者に伝えることは、利用者のために全くなりません。どのような代替テキスト / コンテンツを設定するのが適切かは make the canvas more accessible をご覧ください。

+ +

</canvas>：閉じタグが必須です

+ +

代替コンテンツを内部に持つ関係上、{{HTMLElement("img")}} 要素と異なって {{HTMLElement("canvas")}} 要素は閉じタグ (</canvas>) が必須となっています。タグを閉じなかった場合は、残りのページ全てが代替コンテンツとして処理され、その結果としてそれらが表示されなくなります。

+ +

代替コンテンツが必要でない場合は、単に <canvas id="foo" ...></canvas> と書けば対応するブラウザで動作します。

+ +

描画コンテキスト

+ +

{{HTMLElement("canvas")}} は固定された大きさの描画可能領域を作成できます。この領域は、1 つ以上の描画コンテキストとして表現され、そのコンテキストを通じて描画領域を操作します。このチュートリアルでは、2 次元グラフィックスを描画するためのコンテキストについてのみ解説しますが、これ以外の描画コンテキストも存在します。その典型例が WebGL です。これは OpenGL ES に基づいた 3 次元グラフィックスを扱える描画コンテキストです。

+ +

初期状態での canvas には何も描画されていません。ここに描画を行うには、まず JavaScript で描画コンテキストを取得する必要があります。 {{HTMLElement("canvas")}} 要素の {{domxref("HTMLCanvasElement.getContext", "getContext()")}} を呼ぶことで、描画コンテキストは取得できます。呼び出す際の引数によって、取得されるコンテキストの種類が変わります。"2d" を指定することで、2 次元のグラフィックスを扱える描画コンテキストが取得できます。これで取得されたコンテキストの詳細は {{domxref("CanvasRenderingContext2D")}} をご覧ください。

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

最初の行では {{domxref("document.getElementById()")}} メソッドを呼んで、DOM 中から {{HTMLElement("canvas")}} 要素をあらわすノードを探しています。2 行目では見つけた要素の getContext() メソッドを呼んで、描画コンテキストを取得しています。

+ +
+

対応しているかどうかの確認

+ +

{{HTMLElement("canvas")}} 要素に対応していないブラウザでは、代替コンテンツが表示されます。JavaScript からは getContext() メソッドの有無を調査することで、ブラウザが対応しているかどうかを確認できます。確認するためのコードは以下のようになります：

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+
+
+
+ +

サンプルコード

+ +

以上の点をまとめたサンプルコードは以下のようになります。このサンプルコードは、後の説明でも利用します。

+ +
+

付記：スクリプトを HTML に埋め込むのは、よいやり方ではありません。この例では分かりやすさのために、仕方なく埋め込んでいます。

+
+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

スクリプト中の draw() 関数はページのロード完了時に一度だけ呼び出されます。これは、document の {{event("load")}} イベントを利用しているためです。他の関数同様 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}} や {{domxref("WindowTimers.setInterval", "window.setInterval()")}}、他のイベントハンドラから呼び出すことができますが、今の所ページがロードされた時にのみ呼び出されます。

+ +

このサンプルコードでは何も描画されない領域が表示されます。実際の動作は次で確認できます：

+ +

{{EmbedLiveSample("サンプルコード", 160, 160)}}

+ +

単純な描画

+ +

手始めに単純な例を見てみましょう。次の例では重なり合う 2 つの四角形が描画されます。そのうちの 1 つは透明度が設定されており、下の色が透けて見えます。この例がどのように動作しているかは、次のページで解説します。

+ +
<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8"/>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 50, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 50, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

この例は次のように動作します：

+ +

{{EmbedLiveSample("単純な描画", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html b/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..99e2c55b69 --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html @@ -0,0 +1,577 @@ +--- +title: canvas に図形を描く +slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes +tags: + - Canvas + - Graphics + - HTML + - HTML Canvas + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
+ +
+

canvas の環境をセットアップしましたので、canvas に描画する方法を詳しく見ていくことができます。この記事を読み終わると矩形、三角形、線、円弧、曲線を描く方法を学び、基本的な図形について理解できます。canvas にオブジェクトを描く際はパスを扱うことが不可欠ですので、その方法を見ていきます。

+
+ +

グリッド

+ +

+ +

描き始める前に、canvas のグリッドもしくは 座標空間 について話す必要があります。前のページの HTML テンプレートは幅 150 ピクセル、高さ 150 ピクセルの canvas 要素を持っていました。右の図に、この画像とデフォルトのグリッドを重ねて描きました。普通 グリッド上の 1 単位は canvas 上の 1 ピクセルに相当します。このグリッドの原点は左上の角 ( 座標 (0,0) ) に位置します。全ての要素がこの原点から相対的に配置されます。よって青い正方形の左上の場所は左から x ピクセル、上から y ピクセル (座標 (x,y) ) に来ます。このチュートリアルの後半で原点を他の位置へずらす方法、グリッドを回転したり、伸縮したりする方法を見ることになります。今はデフォルトで我慢しましょう。

+ +

矩形を描く

+ +

{{Glossary("SVG")}} とは異なり、{{HTMLElement("canvas")}} は 2 つの原始図形「矩形」「パス（複数の点が線によって結ばれている）」のみをサポートしています。他の全ての図形は 1 つ以上のパスを組み合わせて作らなくてはなりません。幸いなことに、パスを描く一連の関数があり、とても複雑な図形を作ることができます。

+ +

最初に矩形を見ていきましょう。canvas に矩形を描く 3 つの関数があります:

+ +
+
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
+
塗りつぶされた矩形を描きます。
+
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
+
矩形の輪郭を描きます。
+
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
+
指定された領域を消去し、完全な透明にします。
+
+ +

3 つの関数は同じパラメータをとります。x と y は矩形の左上の角の canvas 上での位置 (原点から相対的) を指定します。width と height は矩形のサイズを指定します。

+ +

下は、前のページの draw() 関数ですが、この 3 つの関数を追加しました。

+ +

矩形の例

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}
+ +

結果は以下のように見えるはずです。

+ +
{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}
+ +

fillRect() 関数は 100x100 ピクセルの大きな黒色正方形を描きます。clearRect() 関数は中心から 60x60 ピクセルの正方形を取り除き、最後に strokeRect() が消去された正方形の中に 50x50 ピクセルの矩形の輪郭を描きます。

+ +

後のページで clearRect() の代わりのメソッドを 2 つ見て、描く図形の色と輪郭のスタイルを変更する方法を見ます。

+ +

次の節でみるパス関数と異なり、全ての 3 つの矩形関数は直ちに canvas に描きます。

+ +

パスを描く

+ +

パスについて見ていきましょう。パスは点のリストであり、それらは曲線かそうでない形状、およびさまざまな幅や色を設定可能な線分で結ばれます。パスやサブパスは、閉じることができます。パスを使って図形を描くには、 いくつかの余分な作業が必要です。

+ +
    +
  1. 始めに、パスを作成します。
    2. +
  2. 次に、パスへ描画するために描画コマンドを使用します。
    3. +
  3. パスが作成されたら、描画するための stroke または fill を実行できます。
    4. +
+ +

これらのステップで使用する関数を以下に示します:

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
新しいパスを作成します。パスを作成すると以降の描画コマンドは、そのパスを構築するために直接作用します。
+
パスのメソッド
+
オブジェクトのためにさまざまなパスを設定するメソッド群です。
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
直線をパスに追加し、現在のサブパスの開始地点につなぎます。
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
輪郭をなぞる方式で、図形を描きます。
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
パスの内部エリアを塗りつぶして、単色の図形を描きます。
+
+ +

パスを作る最初の作業は beginPath() メソッドを呼び出すことです。内部では、パスは図形を一緒に作るサブパス (線、円弧など) のリストとして保存されます。このメソッドが呼び出される毎に、リストはリセットされ新しい図形を始めることができます。

+ +
注記: beginPath() を呼び出した直後や canvas を新規作成した直後など、現在のパスが空であるときに最初にパスを構築するコマンドは、実際は何であるかにかかわらず常に moveTo() として扱われます。このためパスをリセットした後はほぼ必ず、開始位置を明示することが必要になるでしょう。
+ +

2 番目の作業は描かれる実際のパスを定義するメソッドを呼び出すことです。まもなくみることになります。

+ +

3 番目は任意の作業ですが、closePath() メソッドを呼び出すことです。このメソッドは現在の点から始点に向けて直線を描くことで図形を閉じようとします。もし図形がすでに閉じられているかリストに点がひとつしかない場合はこの関数は何もしません。

+ +
注記: fill() メソッドが呼ばれるときは開いている図形は自動的に閉じられ、closePath() メソッドを使う必要はありません。これは、stroke() を呼び出すときはあてはまりません。
+ +

三角形の描画

+ +

単純な図形 (三角形) を描くコードはこのようになります。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75, 50);
+    ctx.lineTo(100, 75);
+    ctx.lineTo(100, 25);
+    ctx.fill();
+  }
+}
+ +

表示結果は以下の様になります。

+ +
{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}
+ +

ペンの移動

+ +

とても役に立つ関数である moveTo() は、自身は何も描画しませんが、上述のパスリストの一部になります。 1 枚の紙の上の 1 つの場所からペンか鉛筆を持ち上げてそれを次の場所に置くと考えるとよいでしょう。

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
x と y で指定した座標に、ペンを移動します。
+
+ +

canvas が初期化されるか beginPath() メソッドが呼ばれたとき、ほとんどの場合 moveTo() メソッドを始点を他の場所に置くために使います。moveTo() メソッドを繋がっていないパスを描くために使うこともできます。下のスマイリーを見てください。

+ +

これをあなた自身で試すには、以下のコードを使うことができます。さきほど見た draw() 関数に貼り付けるだけです。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 外の円
+    ctx.moveTo(110, 75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // 口 (時計回り)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左目
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右目
+    ctx.stroke();
+  }
+}
+ +

表示結果は以下の様になります。

+ +

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

繋がっている線を見るには moveTo() メソッドを取り除いてください。

+ +
注記: arc() 関数とそのパラメータの解説は {{anch("Arcs","円弧")}} の節をご覧下さい。
+ +

線

+ +

直線を描くには lineTo() メソッドを使います。

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
現在の描画位置から x と y で指定した位置に、線を描きます。
+
+ +

このメソッドは 2 つの引数 x と y を取ります。それらは線の終点の座標です。始点は前回のパスに依存します。前回のパスの終点が始点になる、など。始点は moveTo() メソッドを使って変更することもできます。

+ +

次の例では 2 つの三角形が描かれています。 1 つは塗られ、もう 1 つは輪郭線が描かれています。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

最初に新しい図形のパスを始めるために beginPath() メソッドが呼ばれています。次に 始点を望む位置に移動するために moveTo() メソッドが呼ばれています。三角形の 両側の辺を作る 2 つの線が描かれています。

+ +
{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}
+ +
+ +

あなたは塗られた三角形と輪郭線の描かれたものとの違いに気がつくでしょう。上で述べたように、これはパスが塗られる( fill される) と図形は自動的に閉じられ、stroke されるときはそうでないからです。輪郭の描かれた三角形で closePath() を行わないと 2 つの線しか描かれず、三角形は完成しません。

+ +

円弧

+ +

円弧や円を描くために arc() または arcTo() メソッドを使います。

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
+
(x, y) を中心の位置、radius を半径、startAngle を開始角度、endAngle を終了角度、anticlockwise を方向 (デフォルトは時計回り) とする円弧を描きます。
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
+
指定した制御点と半径によって円弧を描き、その前の描画位置と直線で接続します。
+
+ +

arc メソッドを詳しく見ていきましょう。このメソッドは 6 つのパラメーターをとります。x と y は、円弧を描く円の中心座標です。radius はそのまま、半径です。startAngle と endAngle パラメーターは円弧の始まりと終わりをラジアンで定義します。始まりと終わりの角度は x 軸から計算します。anticlockwise パラメーターは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描くブーリアン値です。

+ +
+

注記: arc 関数の角度は度ではなく、ラジアンで計算されます。度からラジアンに変換するには以下の JavaScript 式を使うことができます : radians = (Math.PI/180)*degrees

+
+ +

以下の例は上で見てきた例よりすこし複雑です。全て異なる角度と塗り方で 12 の異なる円弧を描きます。

+ +

2 つの for ループは円弧の行と列のループです。全ての円弧毎に beginPath() を使って新しいパスを始めます。コードの中で、次に何が行われているか読みやすくするために全てのパラメーターを変数として書きましたが、いつもこのようにする必要はありません。

+ +

x と y 座標は充分明確です。radius と startAngle は固定です。endAngle は最初の列が 180 度 (半円) から始まって、最後の列で完全な円を作るように 90 度ずつ増加します。

+ +

clockwise パラメーターの文は最初と 3 番目の列では時計回りの円弧として 2 番目と 4 番目の列では反時計回りの円弧という結果になります。最後に、if 文は上半分は輪郭を描画された円弧を、下半分は塗られた円弧を作ります。

+ +
+

注記: この例では、ほかの例より若干大きなサイズである 150 x 200 ピクセルの canvas が必要です。

+
+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for (var i = 0;i < 4;i++) {
+      for(var j = 0;j < 3;j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // x 座標
+        var y = 25 + i * 50; // y 座標
+        var radius = 20; // 円弧の半径
+        var startAngle = 0; // 円孤の始点
+        var endAngle = Math.PI + (Math.PI * j) / 2; // 円孤の終点
+        var anticlockwise = i % 2 !== 0; // 時計回りまたは反時計回り
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i > 1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+ +
{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}
+ +

ベジェと二次曲線

+ +

次に見ていく種類のパスはベジェ曲線です。三次および二次の種類が利用可能です。通常複雑な自然の図形を描くのに使われます。

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
現在のペンの位置から x および y で指定した終端へ、cp1x および cp1y で指定した制御点を使用して二次ベジェ曲線を描きます。
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
現在のペンの位置から x および y で指定した終端へ、(cp1x, cp1y) および (cp2x, cp2y) で指定した制御点を使用して三次ベジェ曲線を描きます。
+
+ +

これらの違いは右の画像を使うことで説明することができます。二次ベジェ曲線は始点と終点 (青い点) と 1 つの制御点 (赤い点) を持つのに対して、三次ベジェ曲線は 2 つの制御点を持ちます。

+ +

それらのメソッドの両方の x と y パラメータは終点の座標です。cp1x と cp1y は最初の制御点、cp2x と cp2y は 2 番目の制御点の座標です。

+ +

Adobe Illustrator のようなベクタードローイングソフトとは違い、何をやっているのかの直接の視覚的フィードバックが得られないので、二次および三次ベジェ曲線を使うことはとても挑戦的です。このことは複雑な図形を描くことをとても難しくします。以下の例で、いくつかの単純で基本的な図形を描きます、しかしもしあなたに時間と特に忍耐があればはるかに複雑な図形を作ることができます。

+ +

これらの例で非常に難しいものは何もありません。 どちらの場合も、最終的に描かれた一連の曲線が完全な図形となるのを見ることになります。

+ +

二次ベジェ曲線

+ +

この例では、吹き出しをレンダリングするために複数の二次ベジェ曲線を使用しています。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // 二次曲線の例
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}
+
+ +
{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}
+ +

三次ベジェ曲線

+ +

この例では、三次ベジェ曲線を使ってハートを描画します。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // 三次ベジェ曲線の例
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}
+
+ +
{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}
+ +

矩形

+ +

canvas に直接矩形を描く例 ({{anch("Drawing rectangles","矩形を描く")}}) で見た 3 つのメソッドのほかに、開いているパスリストに矩形を追加する rect() メソッドがあります。

+ +
+
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
+
(x, y) で指定した位置を左上の角にして、width および height で指定した幅および高さの矩形を描きます。
+
+ +

このメソッドが実行される前に、パラメーターに (x,y) を持った moveTo() メソッドが自動的に呼ばれます。すなわち、始点が標準の位置に置かれます。

+ +

組み合わせ

+ +

このページの全ての例で図形につき一種類のパス関数のみを使ってきました。しかし、図形を作るのに使用できるパスの種類の制限は一切ありません。そこで、この最後の例では非常に有名なゲームのキャラクタを作るために全てのパス関数を組み合わせてみましょう。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx, 12, 12, 150, 150, 15);
+    roundedRect(ctx, 19, 19, 150, 150, 9);
+    roundedRect(ctx, 53, 53, 49, 33, 10);
+    roundedRect(ctx, 53, 119, 49, 16, 6);
+    roundedRect(ctx, 135, 53, 49, 33, 10);
+    roundedRect(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for (var i = 0;i < 8;i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for(i = 0;i < 6;i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for(i = 0;i < 8;i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// 角丸の四角形を描画するためのユーティリティ関数
+
+function roundedRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + radius);
+  ctx.lineTo(x, y + height - radius);
+  ctx.arcTo(x, y + height, x + radius, y + height, radius);
+  ctx.lineTo(x + width - radius, y + height);
+  ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
+  ctx.lineTo(x + width, y + radius);
+  ctx.arcTo(x + width, y, x + width - radius, y, radius);
+  ctx.lineTo(x + radius, y);
+  ctx.arcTo(x, y, x, y + radius, radius);
+  ctx.stroke();
+}
+
+ +

以下の様な表示結果となります。

+ +
{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}
+ +

これらは非常に単純な例ですので、詳細は割愛します。ポイントは fillStyle を使用している点と、独自関数 roundedRect() を定義している点です。この様に繰り返し利用する可能性のある処理を関数化しておくと、コード量を減らすことができます。

+ +

fillStyle の詳細についてはこのチュートリアルの後半で説明します。プロパティで、塗りの色を初期値の黒から白に、そしてもう一度黒に変更しています。

+ +

Path2D オブジェクト

+ +

最後の例で見たように、オブジェクトを描くための一連のパスや描画コマンドを、canvas に置くことができます。コードをシンプルにしてパフォーマンスを向上させるために最近のバージョンのブラウザで使用できる {{domxref("Path2D")}} オブジェクトは、描画コマンドをキャッシュあるいは記録することを可能にしています。これにより、パスをすばやく再実行できます。Path2D オブジェクトの構築方法を見ていきましょう:

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
Path2D() コンストラクタは、新たにインスタンス化した Path2D オブジェクトを返します。任意で別のパス (コピーを作成)、あるいは SVG パスデータを構成する文字列を引数に指定できます。
+
+ +
new Path2D();     // 空のパスオブジェクトを作成する
+new Path2D(path); // 別の Path2D オブジェクトを複製する
+new Path2D(d);    // SVG パスデータからパスを作成する
+ +

これまで見てきた moveTo、rect、arc、quadraticCurveTo など、あらゆるパスメソッドを Path2D オブジェクトで使用できます。

+ +

また Path2D API には、パスを結合するための addPath メソッドが追加されています。これは、複数の部品を組み合わせてオブジェクトを構築したい場合などに役立ちます。

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
+
現在のパスに、変換行列 (任意指定) とともに、パスを追加します。
+
+ +

Path2D の例

+ +

この例では、矩形と円を作成します。どちらも Path2D オブジェクトとして保存しており、後で使用することができます。新たな Path2D API に合わせて、いくつかのメソッドが現在のパスに代わり任意で Path2D を受け入れられるように更新されました。ここでは、canvas に両方のオブジェクトを描くため、1つの path 引数を stroke および fill で使用しています。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+
+ +

{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+ +

SVG パスを使用する

+ +

canvas の新たな Path2D API の、もうひとつの強力な機能が、canvas でパスを初期化するために SVG パスデータを使用できることです。これにより、SVG と canvas の両方でパスデータを使い回すことができるでしょう。

+ +

パスはある点に移動して (M10 10) 、そこから右へ水平に 80 ポイント移動 (h 80)、下へ 80 ポイント移動 (v 80) 、80ポイント 左へ移動 (h -80) 、そして始点へ戻ります (z)。この例は Path2D コンストラクタのページで確認できます。

+ +
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/ja/web/guide/html/canvas_tutorial/finale/index.html b/files/ja/web/guide/html/canvas_tutorial/finale/index.html new file mode 100644 index 0000000000..e28beb611e --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/finale/index.html @@ -0,0 +1,51 @@ +--- +title: 最後に +slug: Web/Guide/HTML/Canvas_tutorial/Finale +tags: + - キャンバス + - グラウフィックス + - チュートリアル +translation_of: Web/API/Canvas_API/Tutorial/Finale +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
+ +
+

おめでとう! Canvas tutorialは終了です! ここでのナレッジはWebで2Dグラフィックスを作成する際に役立つでしょう。

+
+ +

他の例とチュートリアル

+ +

ここでは様々なデモや更なるcanvasについての例を紹介します。

+ +
+
Codepen.io
+
ブラウザ上のフロントエンドディベロッパー向けのプレイグラウンドとコードエディターです。
+
HTML5 Canvas Tutorials
+
Canvas APIsの例です。
+
Game development
+
ゲームは最も人気な活動の一つです。標準に準拠したWebブラウザで実行できる、より良くより強力なゲームを開発するための新しい技術が定期的に登場しています。
+
+ +

他の Web APIs

+ +

これらのAPIはcanvasとグラフィックスを更に動かす際におそらく使われます

+ +
+
WebGL
+
複雑なグラフィックスや3Dを含んだレンダリングのためのアドバンスドなAPIです。
+
SVG
+
スケーラブル・ベクター・グラフィックスを使用すると、スムーズなスケールを行うために描画されるサイズには関係なく、ベクター(ライン)とシェイプのセットとして画像を描画します。
+
Web Audio
+
WebAudioAPIは、Web上のオーディオを制御したり、ディベロッパーがオーディオのリソースを選択したり、エフェクトをオーディオに追加したり、オーディオ・ビジュアライザーを作成したり、空間的エフェクト(音響のような)を適用したり、他にも様々な処理を行うためのオーディオの多目的なシステムを提供します。
+
+ +

質問

+ +
+
Stackoverflow
+
質問のタグは"canvas"となります。
+
Comments about this tutorial – the MDN documentation community
+
このチュートリアルに対するコメントや感謝の言葉があるなら、是非我々に届けてほしいです。
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/index.html b/files/ja/web/guide/html/canvas_tutorial/index.html new file mode 100644 index 0000000000..b84af866ef --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/index.html @@ -0,0 +1,60 @@ +--- +title: canvas チュートリアル +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +
{{CanvasSidebar}}
+ +
+ +
+

<canvas> 要素は、スクリプト (一般的に JavaScript) を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な (またはあまり簡単ではない) アニメーションに使うことができます。このページの画像は後でこのチュートリアルの中でみる <canvas> を実際に使った例です。

+
+ +

このチュートリアルでは、2D グラフィックスを描画するために <canvas> 要素を使用する方法を、基礎から説明します。提供する例は、<canvas> で出来ることの、いくつかの明確なアイデアと、それをあなた自身のコンテンツで作成開始できるようなコードスニペットを提供します。

+ +

<canvas> は Apple によって OS X の Dashboard のために WebKit へ初めて導入され、後にブラウザーに実装されました。現在は、あらゆる主要ブラウザーがサポートしています。

+ +

始める前に

+ +

<canvas> を使うことはそれほど難しくはありませんが、HTML と JavaScript の基本的な理解が必要です。一部の古いブラウザーは <canvas> 要素をサポートしていませんが、最近のバージョンの主要ブラウザーはすべてサポートしています。canvas のデフォルトのサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の height および width プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。

+ +

チュートリアル

+ + + +

関連情報

+ + + +

貢献者への注記

+ +

2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。

+ +
{{Next("Web/API/Canvas_API/Tutorial/Basic_usage")}}
diff --git a/files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html b/files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..0975cec653 --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html @@ -0,0 +1,118 @@ +--- +title: canvas の最適化 +slug: Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas +tags: + - Advanced + - Canvas + - Graphics + - HTML + - HTML5 + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

{{HTMLElement("canvas")}} 要素は、ウェブで 2D グラフィックスを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリが Canvas API の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。この記事では、 canvas 要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。

+
+ +

パフォーマンスに関する TIPS

+ +

キャンバスのパフォーマンスを向上させるための TIPS 集を以下に掲載します。

+ +

同様のプリミティブや繰り返し使用するオブジェクトをオフスクリーン canvas で事前にレンダリングする

+ +

アニメーションフレーム毎に同じ描画操作を繰り返していることに気づいたら、あらかじめオフスクリーンキャンバスに描画しておくことを検討しましょう。そして、必要な時に本来のキャンバスにオフスクリーン画像を、最初の場所で生成したときのステップなしで描画することができます。

+ +
myCanvas.offscreenCanvas = document.createElement('canvas');
+myCanvas.offscreenCanvas.width = myCanvas.width;
+myCanvas.offscreenCanvas.height = myCanvas.height;
+
+myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
+
+ +

浮動小数点数値の座標を避けて整数を使用する

+ +

canvas で整数以外の値を使用してオブジェクトを描画すると、サブピクセルレンダリングを実行します。

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

これはアンチエイリアス効果を生成するために、ブラウザーに追加の計算処理を強制します。これを避けるために、たとえば {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} を呼び出す際に {{jsxref("Math.floor()")}} を使用して、すべての座標で端数処理を行ってください。

+ +

drawImage で画像のスケーリングを行わない

+ +

{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} でいつも画像のスケーリング処理を行うのではなく、さまざまなサイズの画像をオフスクリーン canvas でキャッシュしてください。

+ +

複雑なシーンでは複数レイヤーの canvas を使用する

+ +

アプリケーションでは、一部のオブジェクトは頻繁に動かしたり変更したりする必要があるのに対し、他のものは比較的静止していることが分かるかもしれません。この場合に可能な最適化は、複数の <canvas> 要素を使用してアイテムをレイヤー化することです。

+ +

例えば、 UI があるゲームが最上位にあり、中間にゲームプレイの動作があり、最下位に静止した背景があるとします。この場合、ゲームを３つの <canvas> レイヤーに分割することができます。 UI はユーザーの入力のみに基づいて変化し、ゲームプレイレイヤーはフレーム毎に変化し、背景は基本的に変化しないままでいます。

+ +
<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black;
+  }
+
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3; }
+  #game-layer { z-index: 2; }
+  #background-layer { z-index: 1; }
+</style>
+
+ +

大きな背景画像に CSS を使用する

+ +

静止した背景画像がある場合は、ただの {{HTMLElement("div")}} に CSS の {{cssxref("background")}} プロパティを使用し、 canvas の下に配置することで描画することができます。これにより、大きな画像を毎回 canvas に描画する処理を避けます。

+ +

CSS transforms を使用して canvas をスケーリングする

+ +

CSS 変形 は、 GPU を使用しますのでより高速です。もっともよいのは拡大縮小しないことですが、そうでなければ大きな canvas を縮小するよりも小さな canvas を拡大したほうが良好です。

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+
+ +

透過をやめる

+ +

アプリケーションが canvas を使用していて背後のものを透過させる必要がない場合は、 {{domxref("HTMLCanvasElement.getContext()")}} で描画コンテキストを生成する際に alpha オプションを false に設定しましょう。この情報を使用してブラウザーが描画を最適化する可能性があります。

+ +
var ctx = canvas.getContext('2d', { alpha: false });
+ +

その他の TIPS

+ + + +

関連情報

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html b/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html new file mode 100644 index 0000000000..33e9ef3e21 --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html @@ -0,0 +1,264 @@ +--- +title: Canvas とピクセル操作 +slug: Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas +tags: + - Canvas + - Graphics + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
+ +
+

これまで、canvas の実際のピクセルは見てきませんでした。ImageData オブジェクトを使用して、ピクセルデータを操作するためにデータ配列へ直接読み取りや書き込みを行うことが可能です。また、画像のスムージング (アンチエイリアシング) の制御方法や canvas の画像を保存する方法も見ていきます。

+
+ +

ImageData オブジェクト

+ +

{{domxref("ImageData")}} オブジェクトは、canvas オブジェクトの領域にあるピクセルデータを表します。これは以下の読み取り専用プロパティを持ちます:

+ +
+
width
+
画像の幅をピクセル数で表します。
+
height
+
画像の高さをピクセル数で表します。
+
data
+
0 から 255 の間の (両端の値を含む) 整数データを RGBA の順で収めた一次元配列を表す {{jsxref("Uint8ClampedArray")}} です。
+
+ +

data プロパティは、生のピクセルデータを参照するためにアクセス可能な {{jsxref("Uint8ClampedArray")}} を返します。それぞれのピクセルは 4 つの 1 バイト値 (赤、緑、青、アルファの順、すなわち "RGBA" 形式) で表します。また、それぞれの色成分は 0 から 255 の間の整数で表します。さらに、それぞれの成分は配列内で連続した添字が割り当てられており、左上のピクセルの赤色成分が配列の添え字 0 になります。配列の中でピクセルは左から右へ進み、さらに下へと進んでいきます。

+ +

{{jsxref("Uint8ClampedArray")}} は height × width × 4 バイトのデータがあり、添字の範囲は 0 から (height×width×4)-1 になります。

+ +

例えば画像の 50 行目の 200 列目にあるピクセルから青色成分の値を読み取るには、以下のようにします:

+ +
blueComponent = imageData.data[((50*(imageData.width*4)) + (200*4)) + 2];
+ +

Uint8ClampedArray.length 属性を読み取ると、ピクセル配列のサイズをバイト数で知ることができます:

+ +
var numBytes = imageData.data.length;
+
+ +

ImageData オブジェクトを作成する

+ +

新たに空の ImageData オブジェクトを作成するには、{{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} メソッドを使用します。createImageData() メソッドは 2 種類の形式があります:

+ +
var myImageData = ctx.createImageData(width, height);
+ +

これは、特定の寸法の新たな ImageData オブジェクトを作成します。すべてのピクセルは透明な黒色に設定されます。

+ +

anotherImageData で指定したオブジェクトと同じ寸法の、新たな ImageData オブジェクトを作成することもできます。新しいオブジェクトのピクセルは、すべて透明な黒色に設定されます。画像データはコピーされません!

+ +
var myImageData = ctx.createImageData(anotherImageData);
+ +

コンテキストのピクセルデータを取得する

+ +

canvas コンテキストのピクセルデータの複製を持つ ImageData オブジェクトを取得するには、getImageData() メソッドを使用します:

+ +
var myImageData = ctx.getImageData(left, top, width, height);
+ +

このメソッドは (left,top)、(left+width, top)、(left, top+height)、(left+width, top+height) の点で四隅を表した canvas の領域のピクセルデータを表す ImageData オブジェクトを返します。点の座標は、canvas の座標空間の単位で指定します。

+ +
+

注記: 返される ImageData オブジェクトで、canvas の外部にあるピクセルはすべて透明な黒色になります。

+
+ +

このメソッドは、Manipulating video using canvas の記事でも説明しています。

+ +

カラーピッカー

+ +

この例では、マウスカーソルの下にある色を表示するために getImageData() メソッドを使用しています。ここでは現在のマウスカーソルの位置を layerX と layerY で求めて、getImageData() が提供するピクセル配列で該当位置のピクセルデータを探します。最後に、色を表示するための <div> で背景色とテキストを設定するために、配列データを使用します。

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ',' + data[1] +
+             ',' + data[2] + ',' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+
+ +

{{EmbedLiveSample('A_color_picker', 610, 240)}}

+ +

コンテキストにピクセルデータを描く

+ +

putImageData() メソッドを使用して、コンテキストにピクセルデータを描くことができます:

+ +
ctx.putImageData(myImageData, dx, dy);
+
+ +

引数 dx と dy は、描画したいピクセルデータの左上の隅を描く位置を、コンテキストのデバイス座標で示します。

+ +

例えば myImageData が表す画像全体をコンテキストの左上の隅から描くには、単純に以下のようにします:

+ +
ctx.putImageData(myImageData, 0, 0);
+
+ +

色のグレースケール化と反転

+ +

この例ではすべてのピクセルの値を変更するためにイテレートを行って、putImageData() を使用して変更後のピクセル配列を canvas に書き戻しています。invert 関数は、単純に最大値の 255 からそれぞれの色の値を減算します。grayscale 関数は、単純に赤、緑、青の平均値を使用します。また、例えば x = 0.299r + 0.587g + 0.114b といった式による加重平均も使用できます。詳しくは Wikipedia の Grayscale (日本語版) をご覧ください。

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      var avg = (data[i] + data[i +1] + data[i +2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+
+ +

{{EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270)}}

+ +

ズームとアンチエイリアシング

+ +

{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} メソッド、第 2 の canvas、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} プロパティの力を借りて、画像をズームアップして詳しく見ることができます。

+ +

マウスカーソルの位置を取得して、そこから上下左右に 5 ピクセルの範囲の画像を切り取ります。そして切り取った画像を別の canvas にコピーして、望むサイズにリサイズします。ズーム用の canvas では、元の canvas から切り取った 10×10 ピクセルの画像を 200×200 ピクセルにリサイズしています。

+ +
zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);
+ +

アンチエイリアシングはデフォルトで有効ですので、ピクセルをはっきりさせるためにスムージングを無効化したいと考えるかもしれません。チェックボックスを切り替えると、imageSmoothingEnabled プロパティ (さまざまなブラウザ向けに接頭辞が必要です) の効果を確認できます。

+ + + + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}
+ +

{{EmbedLiveSample('Zoom_example', 620, 490)}}

+ +

画像を保存する

+ +

{{domxref("HTMLCanvasElement")}} は、画像を保存する際に役に立つ toDataURL() メソッドを提供します。これは、引数 type で指定した形式 (既定値は PNG) で表した画像を持つ data URI を返します。返される画像の解像度は 96 dpi です。

+ +
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
+
既定の設定。PNG 画像を作成します。
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
+
JPG 画像を作成します。オプションで、品質を 0 から 1 の範囲で指定できます。1 は最高品質、0 はほとんど見分けがつかなくなりますがファイルサイズを小さくできます。
+
+ +

canvas から生成した data URI は、例えば任意の {{HTMLElement("image")}} のソースとして使用したり、ディスクに保存するために download 属性を持つハイパーリンクに投入することができます。

+ +

また、canvas から {{domxref("Blob")}} を生成することもできます。

+ +
+
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
+
canvas に含まれる画像を表す Blob オブジェクトを作成します。
+
+ +

関連情報

+ + + +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
diff --git a/files/ja/web/guide/html/canvas_tutorial/transformations/index.html b/files/ja/web/guide/html/canvas_tutorial/transformations/index.html new file mode 100644 index 0000000000..066b5d2b84 --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/transformations/index.html @@ -0,0 +1,282 @@ +--- +title: Transformations +slug: Web/Guide/HTML/Canvas_tutorial/Transformations +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial/Transformations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
+ +
これまでのチュートリアルで、canvas のグリッドや座標空間について学びました。今まではデフォルトのグリッドしか使用しておらず、また必要に応じて canvas 全体のサイズを変更していました。変換 (transformations) には、元の canvas を別の場所に移す、回転する、拡大縮小するといった、より強力な手段があります。
+ +

状態を保存および復元する

+ +

変換のメソッドを見ていく前に、より複雑な描画を始めたときに不可欠になメソッドを 2 つ見ておきましょう。

+ +
+
{{domxref("CanvasRenderingContext2D.save", "save()")}}
+
canvas 全体の状態を保存します。
+
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
+
直近に保存した canvas の状態を復元します。
+
+ +

canvas の状態は、スタックに保存されます。save() メソッドを呼び出すたびに、現在の描画状態をスタックにプッシュします。描画状態は以下の情報で構成されます:

+ + + +

save() メソッドは、何回でも呼び出すことができます。restore() メソッドを呼び出すたびに、最後に保存された状態をスタックからポップして、すべての保存済み設定を復元します。

+ +

save および restore の例

+ +

この例は、連続した矩形のセットを描画するときに、描画状態のスタックがどのように機能するかを示します。

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0,0,150,150);   // 既定の設定で矩形を描画
+  ctx.save();                  // 既定の状態を保存
+
+  ctx.fillStyle = '#09F';      // 設定変更
+  ctx.fillRect(15,15,120,120); // 新たな設定で矩形を描画
+
+  ctx.save();                  // 現在の状態を保存
+  ctx.fillStyle = '#FFF';      // 設定変更
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30,30,90,90);   // 新たな設定で矩形を描画
+
+  ctx.restore();               // 以前の状態を復元
+  ctx.fillRect(45,45,60,60);   // 復元した設定で矩形を描画
+
+  ctx.restore();               // 以前の状態を復元
+  ctx.fillRect(60,60,30,30);   // 復元した設定で矩形を描画
+}
+ + + +

最初のステップで、大きな矩形を既定の設定で描きます。次にこの状態を保存して、塗りつぶし色を変更します。そして、2 番目のやや小さい青色の矩形を描いて、状態を保存します。もう一度描画設定を変更して、3 番目の半透明な白色の矩形を描きます。

+ +

ここまでは、これまでの章で行ってきたことによく似ています。しかし最初に restore() 文を呼び出したとき、スタックの先頭の描画状態が削除されて、その設定が復元されます。save() を使用して状態を保存しなければ、前の状態に戻すために塗りつぶし色や透過性を手動で変更しなければなりません。ここではプロパティが 2 つであり容易ですが、プロパティが多ければコードが一気にとても長くなります。

+ +

2 番目の restore() 文を呼び出すと、元の状態 (1 番目の save を呼び出す前に設定した状態) を復元して、最後の矩形を再び黒色で描きます。

+ +

{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

+ +

移動

+ +

1 番目の変換メソッドとして、translate() を見ていきましょう。このメソッドは、canvas や canvas の原点をグリッド内の別の位置へ移動するために使用します。

+ +
+
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
+
canvas や canvas の原点をグリッド上で移動します。x は水平方向の移動距離、y はグリッドを垂直方向の移動距離を示します。
+
+ +

変換を行う前に canvas の状態を保存しておくことは、よいアイデアです。ほとんどの場合、元の状態に戻すためには逆の変換を行うよりも restore メソッドを呼び出すほうが簡単です。また、ループ内で変換を行っているときに canvas の状態の保存や復元を行わなければ、canvas の端の外側に描画したために、描いたものの一部を失ってしまうかもしれません。

+ +

translate の例

+ +

この例は、canvas の原点を移動する利点をいくつか示しています。translate() メソッドを使用しなければ、すべての矩形が同じ位置 (0,0) に描かれます。また translate() によって、fillRect() 関数で座標を手動で調整する必要なく、どこにでも自由に矩形を置くことができます。これにより若干理解しやすく、また使いやすくなります。

+ +

draw() 関数で、for ループを使用して fillRect() 関数を 9 回呼び出しています。それぞれのループで canvas を移動して矩形を描き、その後に元の状態を復元します。描画位置を調節する translate() を頼って、fillRect() は毎回同じ座標を使用していることに注目してください。

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i=0;i<3;i++) {
+    for (var j=0;j<3;j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
+      ctx.translate(10+j*50,10+i*50);
+      ctx.fillRect(0,0,25,25);
+      ctx.restore();
+    }
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

+ +

回転

+ +

2 番目の変換メソッドは rotate() です。現在の原点を中心にして canvas を回転させるために使用します。

+ +
+
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
+
現在の原点を中心にしてラジアンで示した angle の分、canvas を時計回りに回転します。
+
+ +

回転の中心は、常に canvas の原点です。中心を変更するには、translate() メソッドを使用して canvas を移動しなければなりません。

+ +

rotate の例

+ +

この例は、まずは canvas の原点で矩形を回転するために rotate() メソッドを使用して、次に矩形自身の中心で回転するために translate() の助けを借りています。

+ +
+

備忘: 角度はラジアン (radians) で表しており、度数 (degrees) ではありません。これは以下の方法で変換できます: radians = (Math.PI/180)*degrees

+
+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 左の矩形を canvas の原点で回転する
+  ctx.save();
+  // blue rect
+  ctx.fillStyle = "#0095DD";
+  ctx.fillRect(30,30, 100, 100);
+  ctx.rotate((Math.PI/180)*25);
+  // 灰色の矩形
+  ctx.fillStyle = "#4D4E53";
+  ctx.fillRect(30,30, 100, 100);
+  ctx.restore();
+
+  // 右の矩形を矩形の中心で回転する
+  // draw blue rect
+  ctx.fillStyle = "#0095DD";
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // 矩形の中心に移動する
+                          // x = x + 0.5 * 幅
+                          // y = y + 0.5 * 高さ
+  ctx.rotate((Math.PI/180)*25); // 回転する
+  ctx.translate(-200, -80); // 元の位置に移動する
+
+  // 灰色の矩形を描く
+  ctx.fillStyle = "#4D4E53";
+  ctx.fillRect(150, 30, 100, 100);
+}
+
+ +

矩形を中心で回転するために、canvas を矩形の中心へ移動した後に canvas を回転します。そして canvas を 0,0 へ移動した後に矩形を描きます。

+ + + +

{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

+ +

スケーリング

+ +

次の変換メソッドはスケーリングです。canvas のグリッドの単位を増減するために使用します。これは、図形やビットマップを縮小または拡大して描くために使用できます。

+ +
+
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
+
canvas の単位を x (水平方向) または y (垂直方向) で指定した分スケーリングします。どちらの引数も実数です。1.0 より小さい値は単位あたりのサイズが減少、1.0 より大きい値は単位あたりのサイズが増加します。1.0 では単位あたりのサイズが変わりません。
+
+ +

負数を使用すると軸を反転できます (例えば translate(0,canvas.height); scale(1,-1); で、原点が左下の隅にある有名なデカルト座標系になります)。

+ +

デフォルトでは、canvas の 1 単位は 1 ピクセルとまったく同じです。例えば、スケーリング係数に 0.5 を適用すると 1 単位が 0.5 ピクセルになり、図形が半分のサイズで描かれます。同様にスケーリング係数を 2.0 に設定すると単位あたりのサイズが増えて、1 単位あたり 2 ピクセルになります。この結果、図形は 2 倍の大きさで描かれます。

+ +

scale の例

+ +

この例は、図形をさまざまなスケーリング係数で描きます。

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // シンプルな図形を描いて、スケーリングする
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1,10,10,10);
+  ctx.restore();
+
+  // 水平方向に反転する
+  ctx.scale(-1, 1);
+  ctx.font = "48px serif";
+  ctx.fillText("MDN", -135, 120);
+}
+
+ + + +

{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

+ +

変形

+ +

最後に、以下の変換メソッドで、変換行列によって直接変更することができます。

+ +
+
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
+
引数で表した行列と、現在の変換行列で乗算を行います。変換行列は以下のとおりです: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
+
+ +
+
いずれかの引数が Infinity になる場合は、メソッドで例外を発生させるのではなく行列を infinite としてマークしなければなりません。
+
+ +

この関数の引数は以下のとおりです:

+ +
+
a (m11)
+
水平方向のスケーリング。
+
b (m12)
+
水平方向のスキュー。
+
c (m21)
+
垂直方向のスキュー。
+
d (m22)
+
垂直方向のスケーリング。
+
e (dx)
+
水平方向の移動。
+
f (dy)
+
垂直方向の移動。
+
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
+
現在の変形を単位行列にリセットして、同じ引数で transform() メソッドを呼び出します。これは基本的に、現在の変形をアンドゥしてから指定した変形を行う操作を一度に行うものです。
+
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
+
現在の変形を単位行列にリセットします。これは ctx.setTransform(1, 0, 0, 1, 0, 0); を呼び出すことと同じです。
+
+ +

transform と setTransform の例

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI/6);
+  var cos = Math.cos(Math.PI/6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i=0; i <= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
+  ctx.fillRect(0, 50, 100, 100);
+}
+
+ + + +

{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
diff --git a/files/ja/web/guide/html/canvas_tutorial/using_images/index.html b/files/ja/web/guide/html/canvas_tutorial/using_images/index.html new file mode 100644 index 0000000000..588a662e5b --- /dev/null +++ b/files/ja/web/guide/html/canvas_tutorial/using_images/index.html @@ -0,0 +1,337 @@ +--- +title: 画像を使う +slug: Web/Guide/HTML/Canvas_tutorial/Using_images +tags: + - Advanced + - Canvas + - Graphics + - HTML + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
+ +
+

これまで、図形を作成してスタイルを適用する方法を見てきました。{{HTMLElement("canvas")}} のより面白い機能のひとつが、画像を扱えることです。これは動的な画像合成を行う、グラフの背景として使用する、ゲームのスプライトとして使用するなどといったことが可能です。PNG、GIF、JPEG といった、ブラウザがサポートする形式の外部画像を使用できます。同じページ上の別の canvas 要素によって生成された画像も、ソースとして使用できます!

+
+ +

基本的には 2 ステップの手続きによって、画像を canvas にインポートします:

+ +
    +
  1. {{domxref("HTMLImageElement")}} オブジェクトまたは別の canvas 要素への参照を、ソースとして取得します。URL を与えることでも、画像を使用できます。
    2. +
  2. drawImage() 関数を使用して、画像を canvas に描きます。
    3. +
+ +

これを行う方法を見ていきましょう。

+ +

描く画像を取得する

+ +

canvas API は、以下のデータ形式を画像ソースとして使用できます:

+ +
+
{{domxref("HTMLImageElement")}}
+
{{HTMLElement("img")}} 要素だけでなく、Image() コンストラクタを使用して作成した画像も含みます。
+
{{domxref("HTMLVideoElement")}}
+
HTML の {{HTMLElement("video")}} 要素を画像ソースとして使用すると、現在のフレームを動画から取得して、画像として使用します。
+
{{domxref("HTMLCanvasElement")}}
+
別の {{HTMLElement("canvas")}} 要素を画像ソースとして使用できます。
+
+ +

これらのソースは集約的に、{{domxref("CanvasImageSource")}} 型から参照されています。

+ +

canvas で使用する画像を取得する方法がいくつかあります。

+ +

同一ページ上の画像を使用する

+ +

以下のいずれかを使用して、canvas として同一ページ上の画像への参照を取得できます:

+ + + +

ほかのドメインにある画像を使用する

+ +

{{HTMLElement("img")}} 要素の {{htmlattrxref("crossorigin", "img")}} 属性 ({{domxref("HTMLImageElement.crossOrigin")}} プロパティに反映されます) を使用して、drawImage() を呼び出してほかのドメインから画像を読み込む許可を求めることができます。ホスティングドメインが画像のクロスドメインアクセスを許可している場合は、canvas を汚染せずに画像を使用できます。そうでない場合は、画像を使用すると canvas を汚染します。

+ +

ほかの canvas 要素を使用する

+ +

通常の画像と同様に、{{domxref("document.getElementsByTagName()")}} または {{domxref("document.getElementById()")}} メソッドを使用してほかの canvas 要素にアクセスできます。対象の canvas を使用する前に、そのキャンバスで描画を終えるようにしてください。

+ +

より実践的な使用法のひとつが、別の大きな canvas のサムネイルビューとして第 2 の canvas を使用することです。

+ +

最初から画像を作成する

+ +

もうひとつの方法は、スクリプト内で新たな {{domxref("HTMLImageElement")}} オブジェクトを作成することです。そのために、便利な Image() コンストラクタを使用できます:

+ +
var img = new Image();   // 新たな img 要素を作成
+img.src = 'myImage.png'; // ソースのパスを設定
+
+ +

このスクリプトを実行すると、画像の読み込みが始まります。

+ +

画像の読み込みが完了する前に drawImage() を呼び出しても、何も行いません (あるいは、古いブラウザでは例外が発生するかもしれません)。よって画像を読み込む前に描画しないようにするために、load イベントを使用する必要があります:

+ +
var img = new Image();   // 新たな img 要素を作成
+img.addEventListener("load", function() {
+  // drawImage を実行する文をここに置く
+}, false);
+img.src = 'myImage.png'; // ソースのパスを設定
+
+ +

これは、外部の画像を 1 つしか使用しない場合はよい方法ですが、複数の画像を追跡しなければならない場合は、より器用な方法に頼らなければなりません。画像の事前読み込み法を見ていくことはこのチュートリアルの対象を超えますが、心に留めておいてください。

+ +

data: URL で画像を埋め込む

+ +

画像を埋め込む別の方法が、data: url です。Data URL によって、画像を Base64 でエンコードした文字列として、コード内で完全に定義できます。

+ +
var img = new Image();   // 新たな img 要素を作成
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+
+ +

data URL の利点のひとつが、別にサーバとの通信を行うことなく即座に結果の画像を使用できることです。ほかに潜在的な利点として CSS、JavaScript、HTML、画像をひとつのファイルにカプセル化することもでき、ほかの場所へ持ち運びやすくなります。

+ +

この方法の欠点は画像がキャッシュされないことと、大きな画像をエンコードした URL がとても長くなることです。

+ +

動画のフレームを使用する

+ +

{{HTMLElement("video")}} 要素が提供する動画のフレームも (動画が非表示であっても) 使用できます。例えば ID が "myvideo" である {{HTMLElement("video")}} 要素があるとき、以下のようなことができます:

+ +
function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+
+ +

これは動画の {{domxref("HTMLVideoElement")}} オブジェクトを返します。このオブジェクトは先に述べたとおり、CanvasImageSource として使用できるオブジェクトのひとつです。

+ +

画像を描く

+ +

ソース画像オブジェクトへの参照を取得したら、drawImage() メソッドを使用して画像を canvas に描画できます。後ほど見るように、drawImage() メソッドをオーバーロードした派生形がいくつかあります。もっとも基本的な形式は以下のようなものです:

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
+
引数 image で指定した CanvasImageSource を、座標 (x, y) に描画します。
+
+ +
+

SVG 画像は、ルート <svg> 要素で幅と高さを指定しなければなりません。

+
+ +

例: シンプルな折れ線グラフ

+ +

以下の例は、小さな折れ線グラフの背景として外部の画像を使用しています。背景画像を使用すると背景を生成するコードが不要になりますので、スクリプトをかなり小さくすることができます。この例では画像を 1 つしか使用しませんので、描画する文を実行するために image オブジェクトの load イベントハンドラを使用しています。drawImage() メソッドは背景画像を座標 (0, 0) に配置します。これは canvas の左上の隅です。

+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    ctx.drawImage(img,0,0);
+    ctx.beginPath();
+    ctx.moveTo(30,96);
+    ctx.lineTo(70,66);
+    ctx.lineTo(103,76);
+    ctx.lineTo(170,15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}
+ +

結果のグラフは以下のようになります:

+ +

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+ +

スケーリング

+ +

drawImage() メソッドの第 2 の形式は引数が 2 つ追加されており、canvas に拡大・縮小した画像を配置することができます。

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
+
これは引数 width および height を追加しており、画像を canvas に描画する際のサイズを示します。
+
+ +

例: 画像をタイリングする

+ +

以下の例は画像を壁紙として使用して、canvas 上で数回繰り返して貼り付けています。ループ処理によって、さまざまな場所に縮小した画像を貼り付けました。以下のコードでは、最初の for ループで行の繰り返し処理を行います。2 番目の for ループで列の繰り返し処理を行います。画像は元のサイズの 3 分の 1 である、50x38 ピクセルに縮小しています。

+ +
+

注記: 画像を拡大しすぎると不鮮明に、あるいは縮小しすぎると荒くなります。読みやすくしておかなければならない文字列が画像内にある場合は、サイズを変更しないほうがよいでしょう。

+
+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    for (var i=0;i<4;i++){
+      for (var j=0;j<3;j++){
+        ctx.drawImage(img,j*50,i*38,50,38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}
+ +

canvas の結果は以下のようになります:

+ +

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+ +

切り抜き

+ +

drawImage() メソッドの第 3 かつ最後の形式は、画像ソースについて 8 個の引数が追加されています。これはソース画像の一部を切り抜いて、サイズ変更および canvas への描画を行います。

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
+
この関数は、image から左上の隅が (sx, sy)、幅と高さが sWidth および sHeight である矩形で指定されるソース画像の領域を取得して、canvas の (dx, dy) で示した位置に配置して、dWidth および dHeight で指定したサイズに拡大・縮小します。
+
+ +

何を行っているかを正しく理解するために、右の画像を見ると役に立つでしょう。始めの 4 つの引数は、ソース画像を切り抜く場所とサイズを定義します。最後の 4 つの引数は、描画先 canvas で画像を描画する矩形を定義します。

+ +

切り抜きは、画像を合成する際に役に立つでしょう。ひとつの画像ファイルにすべての要素を置いておき、このメソッドを使用して完成形の描画結果に合成します。例えばチャートを作成したいときに、すべての必要なテキストをひとつのファイルに収めた PNG 画像を用意して、データに応じてチャートの目盛りをとても簡単に変更できるでしょう。ほかの利点として、すべての画像を個別に読み込む必要がありませんので、読み込みパフォーマンスが向上するでしょう。

+ +

例: 画像をフレームに収める

+ +

以下の例では前の例と同じサイの画像を使用していますが、頭の部分を切り抜いて額縁の中に合成しています。額縁の画像は、ドロップシャドウを含む 24 ビット PNG 画像です。GIF や 8 ビット PNG 画像と異なり、24 ビット PNG 画像は 8 ビットのアルファチャンネルが含まれていますので、マットカラーに悩まされることなく背景に重ねることができます。

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+
+ +
function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // スライス画像を描く
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // フレームを描く
+  ctx.drawImage(document.getElementById('frame'),0,0);
+}
+ +

この例では、画像の読み込みに別の方法を使用しています。新しい {{domxref("HTMLImageElement")}} オブジェクトを作成して画像を読み込む代わりに、画像を HTML ソース内の {{HTMLElement("img")}} タグとして直接含めておき、そこから画像を取り込んでいます。この画像は、CSS の {{cssxref("display")}} プロパティを none に設定して隠しています。

+ +

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

+ +

スクリプト自体はとてもシンプルです。それぞれの {{HTMLElement("img")}} に ID 属性を割り当てており、{{domxref("document.getElementById()")}} を使用して簡単に選択できます。最初の画像からサイを切り抜いて canvas 上でサイズを調整するため単純に drawImage() を使用して、その後に第 2 の drawImage() を呼び出して枠を描きます。

+ + + +

この章の最後の例では、小さなアートギャラリーを作ります。いくつかの画像を持つテーブルで、ギャラリーを構成します。ページを読み込むとそれぞれの画像のために {{HTMLElement("canvas")}} 要素を挿入して、そこに画像と額縁を描画します。

+ +

ここでは、周囲に描く額縁を含むすべての画像が一定の幅および高さです。額縁をぴったり合わせるために画像の幅と高さを使用するよう、スクリプトを改良することができるでしょう。

+ +

以下のコードは自明でしょう。{{domxref("document.images")}} コンテナに対するループ処理を行って、適宜新たな canvas 要素を追加します。おそらく、DOM についてあまり詳しくない場合に注意したほうがよいことは、{{domxref("Node.insertBefore")}} メソッドを使用していることです。insertBefore() は、ある要素 (image) の前に新たな要素 (canvas 要素) を挿入したいときに使用する、親ノード (テーブルのセル) のメソッドです。

+ +
<html>
+ <body onload="draw();">
+     <table>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
+      </tr>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
+      </tr>
+     </table>
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+ </body>
+</html>
+
+ +

こちらが、見栄えをよくするための CSS です:

+ +
body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

額縁付き画像を描く JavaScript が、すべてを結びつけます:

+ +
function draw() {
+
+  // すべての画像に対するループ処理
+  for (var i=0;i<document.images.length;i++){
+
+    // 額縁の画像用の canvas は追加しない
+    if (document.images[i].getAttribute('id')!='frame'){
+
+      // canvas 要素を作成
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width',132);
+      canvas.setAttribute('height',150);
+
+      // 画像の前に挿入
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // canvas に画像を描く
+      ctx.drawImage(document.images[i],15,20);
+
+      // 額縁を追加
+      ctx.drawImage(document.getElementById('frame'),0,0);
+    }
+  }
+}
+ +

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

+ +

画像のサイズ変更の動作を制御する

+ +

先に述べたとおり、サイズを変更した画像は変更処理の影響で、不鮮明またはブロック状のアーティファクトが発生します。描画コンテキスト内で画像のサイズを変更する際に使用する画像スムージングアルゴリズムを制御するために、描画コンテキストの {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} プロパティを使用できます。デフォルトではこれが true であり、画像のサイズを変更する際にスムージングを行います。以下のように、この機能は無効化できます:

+ +
ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}
diff --git a/files/ja/web/guide/html/content_categories/index.html b/files/ja/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..9f0b98251f --- /dev/null +++ b/files/ja/web/guide/html/content_categories/index.html @@ -0,0 +1,176 @@ +--- +title: コンテンツカテゴリー +slug: Web/Guide/HTML/Content_categories +tags: + - Advanced + - Guide + - HTML + - HTML5 + - NeedsUpdate + - Web +translation_of: Web/Guide/HTML/Content_categories +--- +

すべての HTML 要素は1つ以上のコンテンツカテゴリーに属していて、カテゴリーごとに共通した特徴を持つ要素を分類しています。これは緩い分類ですが（実際には、カテゴリーの要素間に関係性はありません）、カテゴリーに共通した振る舞いや関連したルールを定義したり説明したりするのに役立ちます。とりわけ、複雑な詳細に立ち入るときには。どのカテゴリーにも属さない要素も存在します。

+ +

コンテンツカテゴリーは3種類あります。

+ + + +
+

注: コンテンツカテゴリーとその機能比較についての詳細な説明は、この記事の範囲外です。詳しく知りたければ、 HTML 仕様書の関連部分を読みましょう。

+
+ +

いかに様々なコンテンツカテゴリーが関係し合っているかを表すベン図です。以下の章でこれらの関係を文章で説明します。

+ +

主要コンテンツカテゴリー

+ +

メタデータコンテンツ

+ +

メタデータコンテンツのカテゴリーに属する要素は、表示方法や文書のその他の部分の挙動を変化させたり、他の文書へのリンクを確立させたり、その他の本文外の情報を伝えたりします。

+ +

このカテゴリーに属する要素: {{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}

+ +

フローコンテンツ

+ +

フローコンテンツのカテゴリーに属する要素は、一般にテキストや埋め込みコンテンツを含みます。このカテゴリーに属する要素: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} および文字列。

+ +

特定の条件が満たされている場合のみ、このカテゴリーに属する要素がいくつか存在します。

+ + + +

区分コンテンツ

+ +

区分コンテンツ (sectioning content) のモデルに属する要素は {{HTMLElement("header")}} 要素、 {{HTMLElement("footer")}} 要素、そして見出しコンテンツのスコープを定義する現在のアウトライン内のセクションを作成します。

+ +

このカテゴリーに属する要素: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}

+ +
+

メモ: このコンテンツモデルを区分化ルートカテゴリーと混同しないでください。区分化ルートは、通常のアウトラインからそれ自身のコンテンツを分離させるものです。

+
+ +

見出しコンテンツ

+ +

見出しコンテンツ (heading content) は明示的に区分コンテンツ要素によってマークアップされたか、もしくは、見出しコンテンツ自身によって明示的に定義されたセクションの見出しを定義します。

+ +

このカテゴリーに属する要素: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}

+ +
+

メモ: {{HTMLElement("header")}} 要素は見出しを含む可能性がありますが、それ自身は見出しコンテンツではありません。

+
+ +
+

メモ: {{HTMLElement("hgroup")}} 要素は HTML 5 の最終決定の前に W3C HTML 仕様書から削除されましたが、 WHATWG の仕様書には含まれており、多くのブラウザーは少なくとも部分的に対応しています。

+
+ +

記述コンテンツ

+ +

記述コンテンツ (phrasing content) は、文章とその中に含まれるマークアップを定義します。記述コンテンツの集まりで段落を構成します。

+ +

このカテゴリーに属する要素: {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} および通常の文字列です (空白文字だけで構成されたものを除く)。

+ +

他にも特定の条件が満たされたときのみ、このカテゴリーに属する要素がいくつかあります。

+ + + +

埋め込みコンテンツ

+ +

埋め込みコンテンツ (Embedded content) は、文書に他のリソースを取り込んだり、他のマークアップ言語や名前空間を挿入したりするものです。このカテゴリーに属する要素: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}

+ +

対話型コンテンツ

+ +

対話型コンテンツ (interactive content) にはユーザとのやり取りのために固有にデザインされた要素が含まれます。このカテゴリーに属する要素: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}。
+ 要素によっては、特定の条件下にある場合にのみこのカテゴリーに所属します。

+ + + +

知覚可能コンテンツ

+ +

コンテンツが空でも非表示でもない時は知覚可能 (palpable) です。これは描画され実在するコンテンツです。フローコンテンツまたは記述コンテンツの要素には、知覚可能なノードが少なくとも1つあります。

+ +

フォーム関連コンテンツ

+ +

フォーム関連コンテンツ (form-associated content) は form 属性によって表される、フォームオーナーを持つ要素を含みます。フォームオーナーは、このカテゴリーの要素を内包する {{HTMLElement("form")}} 要素か form 属性で id が指定された要素です。

+ + + +

このカテゴリーにはいくつかのサブカテゴリーが含まれています。

+ +
+
リスト化
+
IDL コレクションの {{domxref("HTMLFormElement.elements", "form.elements")}} と fieldset.elements によってリスト化された要素です。 {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} を含みます。
+
ラベル付け可能
+
{{HTMLElement("label")}} に関連付けできる要素です。 {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} を含みます。
+
提出可能
+
フォームが提出 (submit) されるときにフォームデータセットを構築するために用いることができる要素です。 {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} を含みます。
+
リセット可能
+
フォームがリセットされるときに影響を受けることがある要素です。 {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} {{HTMLElement("textarea")}} を含みます。
+
+ +

二次カテゴリー

+ +

要素の二次分類がいくつかあり、知っておくと便利です。

+ +

スクリプト対応要素

+ +

スクリプト対応要素 (Script-supporting elements) は、文書の出力に直接貢献はしない要素です。代わりに、スクリプトコードを直接含んだり、スクリプトで使われるデータを定義したりして、スクリプトへの対応のために働きます。

+ +

スクリプト対応要素は以下の通りです。

+ + + +

透過的コンテンツモデル

+ +

要素が透過的コンテンツモデル (transparent content model) を持っている場合、透過的な要素が削除されたり、子要素で置き換えられたりしても、それ自身のコンテンツが必ず妥当な HTML 5 として構造化されているものです。

+ +

例えば、 {{HTMLElement("del")}} と {{HTMLELement("ins")}} 要素は透過的です。

+ +
<p>私たちはこれらの真実を<del><em>不可侵なものでありかつ否定できない</em></del><ins>自明の</ins>ものであるとし続けた。</p>
+
+ +

これらの要素が削除されたとしても、この断片は（文章としては正しくありませんが）妥当な HTML です。

+ +
<p>私たちはこれらの真実を<em>不可侵なものでありかつ否定できない</em>自明のものであるとし続けた。</p>
+
+ +

その他のコンテンツモデル

+ +

区分化ルート (sectioning root)。

diff --git a/files/ja/web/guide/html/editable_content/index.html b/files/ja/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..92fec4523f --- /dev/null +++ b/files/ja/web/guide/html/editable_content/index.html @@ -0,0 +1,232 @@ +--- +title: コンテンツを編集可能にする +slug: Web/Guide/HTML/Editable_content +tags: + - Advanced + - Example + - Guide + - HTML + - HTML5 + - Text + - Web + - contenteditable + - text entry + - text input +translation_of: Web/Guide/HTML/Editable_content +--- +

HTML では、すべての要素を{{原語併記("編集可能状態", "editable")}} にすることができます。JavaScript のいくつかのイベントハンドラーと併用することで、ウェブページを多機能でかつ高速に動作するリッチテキスト・エディターにしてしまうことも可能です。本記事では、この機能に関する情報を提供します。

+ +

どのような挙動を示すか

+ +

編集可能にする個所と密接に関係する要素へ {{htmlattrxref("contenteditable")}} 属性を設定しなければなりません。

+ +

ユーザーが内容を編集可能な {{HTMLElement("div")}} 要素を作成する、簡単な記述例を示します。

+ +
<div contenteditable="true">
+  このテキストは閲覧者が編集することができます。
+</div>
+ +

上記の HTML は以下のようになります:

+ +

{{EmbedLiveSample('How_does_it_work')}}

+ +

コマンドを実行する

+ +

HTML 要素の contenteditable 属性を true に設定すると、{{domxref("document.execCommand()")}} メソッドが使用可能になります。これは、編集可能な部分の内容物を操作する コマンド を実行できます。ほとんどのコマンドは文書の選択範囲に作用します (例えば、テキストに太字や斜体などのスタイルを適用する) が、新しい要素を挿入する (リンクを追加するなど) コマンドや行全体に作用する (インデント) コマンドもあります。contentEditable を使用しているときに execCommand() を呼び出すと、現在アクティブな編集可能要素に作用します。

+ +

マークアップ生成の違い

+ +

さまざまなブラウザーで contenteditable を使用することは、ブラウザーが生成するマークアップの違いのために、長い間苦痛でした。例えば、編集可能な要素内で新しいテキストの行を作成するために Enter/Return を押下したときのようなシンプルな場合でさえ、主要なブラウザー間で扱いが異なっていました (Firefox は {{htmlelement("br")}} 要素を挿入、IE/Opera は {{htmlelement("p")}} を使用、Chrome/Safari は {{htmlelement("div")}} を使用)。

+ +

幸い、最新のブラウザーではこれらが多少統一されています。Firefox 60 では Chrome、最新の Opera、Edge、Safari に合わせて、{{htmlelement("div")}} 要素で行をくくるように更新しました。

+ +

前出の例で試してみてください。

+ +
+

注記: Internet Explorer はもはや開発されておらず、<div> ではなく {{htmlelement("p")}} 要素を使用します。

+
+ +

別の方法で段落を分割したい場合は、前出のブラウザーはすべて {{domxref("document.execCommand")}} をサポートしていますので、defaultParagraphSeparator コマンドで分割方法を変更できます。例えば、{{htmlelement("p")}} 要素を使用するには以下のようにします:

+ +
document.execCommand("DefaultParagraphSeparator", false, "p");
+ +

また Firefox 55 より、defaultParagraphSeparator で非標準の引数として br をサポートしています。これは、ブラウザーが Firefox であるかを確認することで古い Firefox をサポートするウェブアプリケーションで、残念ながら新しい Firefox 向けにウェブアプリケーションを修正するための十分な時間がない場合に、designMode または contenteditable のエディターを初期化する際に以下の行を挿入すると、古い Firefox の動作に戻すことができます:

+ +
document.execCommand("defaultParagraphSeparator", false, "br");
+ +

セキュリティ

+ +

セキュリティ上の理由で Firefox は、JavaScript コードがクリップボード関連の機能 (コピーや貼り付けなど) を使用することをデフォルトで許可していません。about:config を使用して以下の設定を行うと、これらを有効化できます:

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

例: シンプルであるが完成されたリッチテキストエディター

+ +
+
<!doctype html>
+<html>
+<head>
+<title>Rich Text Editor</title>
+<script type="text/javascript">
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+    document.execCommand("defaultParagraphSeparator", false, "div");
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
+  oPrntWin.document.close();
+}
+</script>
+<style type="text/css">
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+</style>
+</head>
+<body onload="initDoc();">
+<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
+<input type="hidden" name="myDoc">
+<div id="toolBar1">
+<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option selected>- formatting -</option>
+<option value="h1">Title 1 &lt;h1&gt;</option>
+<option value="h2">Title 2 &lt;h2&gt;</option>
+<option value="h3">Title 3 &lt;h3&gt;</option>
+<option value="h4">Title 4 &lt;h4&gt;</option>
+<option value="h5">Title 5 &lt;h5&gt;</option>
+<option value="h6">Subtitle &lt;h6&gt;</option>
+<option value="p">Paragraph &lt;p&gt;</option>
+<option value="pre">Preformatted &lt;pre&gt;</option>
+</select>
+<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- font -</option>
+<option>Arial</option>
+<option>Arial Black</option>
+<option>Courier New</option>
+<option>Times New Roman</option>
+</select>
+<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- size -</option>
+<option value="1">Very small</option>
+<option value="2">A bit small</option>
+<option value="3">Normal</option>
+<option value="4">Medium-large</option>
+<option value="5">Big</option>
+<option value="6">Very big</option>
+<option value="7">Maximum</option>
+</select>
+<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- color -</option>
+<option value="red">Red</option>
+<option value="blue">Blue</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- background -</option>
+<option value="red">Red</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+</div>
+<div id="toolBar2">
+<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
+<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
+<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
+<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
+<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
+<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
+<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
+<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
+<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
+<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
+<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
+<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
+<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
+<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
+<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
+<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
+<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
+<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
+<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
+<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
+</div>
+<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
+<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
+<p><input type="submit" value="Send" /></p>
+</form>
+</body>
+</html>
+
+
+ +
注記: ページ内でエディターの作成や挿入を標準化する方法を知りたい場合は、より複雑なリッチテキストエディターの例 をご覧ください。
+ +

関連情報

+ + diff --git a/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html new file mode 100644 index 0000000000..799a251274 --- /dev/null +++ b/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html @@ -0,0 +1,295 @@ +--- +title: Mozilla におけるリッチテキスト編集 +slug: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +tags: + - Midas + - ガイド +translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +--- +
+

メモ: この文書は古くなっています。コンテンツを編集可能にするにある最新のドキュメントを参照することをお勧めします。

+
+ +

Mozilla 1.3 は、Microsoft® Internet Explorer の designMode 機能の実装を導入しました。 Mozilla 1.3 のリッチテキスト編集機能は、HTML 文書をリッチテキスト編集環境へと変える designMode 属性をサポートします。更に、Firefox 3 以降、Mozilla は、あらゆる要素を編集可能にしたり編集不能にしたりする (後者は、編集可能な環境に含まれる固定したい要素の編集をできなくするのに使います) Internet Explorer の contentEditable 属性をサポートするようになりました。 

+ +

リッチテキスト編集の準備をする

+ +

リッチテキスト編集機能は、ドキュメント内の iframe 要素などの designMode プロパティを "On" にすることによって初期化されます。designMode が "On" にされると、そのドキュメントはリッチテキスト編集範囲となり、ユーザはテキストエリアに入力するかのように書き込むことができるようになります。コピーやペーストなどの最も基本的なキーボード操作は可能ですが、その他の機能はウェブサイト側で実装する必要があります。

+ +

同様に、contentEditable 属性を "true" にすることにより、ドキュメント中の個々の要素を編集可能にすることができます。

+ +

コマンドの実行

+ +

HTML ドキュメントを designMode にすると、ドキュメントオブジェクトは 編集可能な範囲の内容を操作するためのコマンドを実行する execCommand メソッドを使えるようになります。ほとんどのコマンドは、ドキュメント内の選択されている範囲に影響を及ぼす (太字にする、斜体にするなど) ものですが、その他にも、新たな要素 (リンクなど) を挿入したり、その行全体に影響を及ぼす (インデントなど) ものもあります。contentEditable を使用している場合では、execCommand メソッドを呼んだときには現在アクティブな編集可能要素に影響を及ぼします。

+ +

Internet Explorer との相違

+ +

Mozilla と Internet Explorer designMode の挙動の大きな違いのひとつに、編集可能ドキュメントにおいて生成されるコードの違いがあります。Internet Explorer がHTML タグ (em, i など) を使用するのに対し、Mozilla 1.3 はデフォルトでは span の style 属性としてマークアップを行います。useCSS コマンドを使うと、CSS によるマークアップと HTML によるマークアップを切り替えることができます。

+ +

Figure 1: 生成される HTML の違い

+ +

Mozilla:

+ +
<span style="font-weight: bold;">I love geckos.</span>
+<span style="font-weight: bold; font-style: italic;
+    text-decoration: underline;">Dinosaurs are big.</span>
+
+ +

Internet Explorer:

+ +
<STRONG>I love geckos.</STRONG>
+<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG>
+
+ +

さらに、 Mozilla と IE では、designMode で主に使われる iframe 内のドキュメントオブジェクトにアクセスする方法が異なっています。Mozilla は IFrameElement.contentDocumentという W3C 標準の方式を採用していますが、IE は IFrameElement.document を利用します。

+ +

DevEdge は、 xbDesignMode という JavaScript のヘルパークラスを提供しています。このクラスは、 IE と Mozilla の相違を気にせずに済むような designMode のラッパーとなっています。

+ +


+ イベントハンドルが無効

+ +

さらに、 Mozilla には、ドキュメントが designMode になると、そのドキュメント内のイベントが無効になるという特徴があります。designMode をオフにすると (Mozilla 1.5 ではこの切り替えが可能となります)、再びイベントはアクティブになります。

+ +

さらなる情報 は、Migrate apps from Internet Explorer to Mozilla の Rich text editing の節をご覧ください。

+ +

例

+ +

ご注意ください: サンプルファイルは他サイトから取り入れられています。現在これは利用できません。 --fumble 18:13, 24 Apr 2005 (PDT)

+ +

例 1

+ +

まず最初の例として、HTML 文書自身の designMode を "On" にしてみます。これにより、Mozilla 1.3 ではドキュメント全体が編集可能となります。ただし Internet Explorer では、javascript により現在のドキュメント自身の designMode を変更することができません。Internet Explorer で同様のことをするためには、body タグの contentEditable 属性を "true" にする必要があります。

+ +

Figure 2: First example

+ +
HTML:
+<body contentEditable="true" onload="load()">
+
+JavaScript:
+function load(){
+  window.document.designMode = "On";
+}
+
+ +

例 2

+ +

2つめの例は、テキストを太字/斜体/アンダーライン付きにしたり、リンクを追加したり、文字色を変更したりすることが可能な簡単なリッチテキスト編集ページです。このサンプルページは、リッチテキスト編集エリアとなる iframe から成り立っており、太字/斜体/文字色変更などが使えるようになっています。

+ +

Figure 3: リッチテキスト編集の準備をする

+ +
HTML:
+<body onload="load()">
+
+JavaScript:
+function load(){
+  getIFrameDocument("editorWindow").designMode = "On";
+}
+
+function getIFrameDocument(aID){
+  // if contentDocument exists, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    return document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    return document.frames[aID].document;
+  }
+}
+
+ +

この例には、iframe 内のドキュメントをより簡単に編集できるようにし、さらに HTML コードをきれいに保つような doRichEditCommand 関数が含まれています。この関数は、要求されたコマンドを execCommand() によって実行し、さらに編集可能ドキュメントにフォーカスを戻します。そうしないと、押したボタンにフォーカスが移ってしまい、編集作業の邪魔になってしまうからです。

+ +

Figure 4: リッチテキスト編集コマンドを使用する

+ +
HTML:
+<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>
+
+JavaScript:
+function doRichEditCommand(aName, aArg){
+  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
+  document.getElementById('editorWindow').contentWindow.focus()
+}
+
+ +

例: シンプルだが完全なリッチテキストエディター

+ +
+
<!doctype html>
+<html>
+<head>
+<title>Rich Text Editor</title>
+<script type="text/javascript">
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
+  oPrntWin.document.close();
+}
+</script>
+<style type="text/css">
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+</style>
+</head>
+<body onload="initDoc();">
+<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
+<input type="hidden" name="myDoc">
+<div id="toolBar1">
+<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option selected>- formatting -</option>
+<option value="h1">Title 1 &lt;h1&gt;</option>
+<option value="h2">Title 2 &lt;h2&gt;</option>
+<option value="h3">Title 3 &lt;h3&gt;</option>
+<option value="h4">Title 4 &lt;h4&gt;</option>
+<option value="h5">Title 5 &lt;h5&gt;</option>
+<option value="h6">Subtitle &lt;h6&gt;</option>
+<option value="p">Paragraph &lt;p&gt;</option>
+<option value="pre">Preformatted &lt;pre&gt;</option>
+</select>
+<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- font -</option>
+<option>Arial</option>
+<option>Arial Black</option>
+<option>Courier New</option>
+<option>Times New Roman</option>
+</select>
+<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- size -</option>
+<option value="1">Very small</option>
+<option value="2">A bit small</option>
+<option value="3">Normal</option>
+<option value="4">Medium-large</option>
+<option value="5">Big</option>
+<option value="6">Very big</option>
+<option value="7">Maximum</option>
+</select>
+<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- color -</option>
+<option value="red">Red</option>
+<option value="blue">Blue</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- background -</option>
+<option value="red">Red</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+</div>
+<div id="toolBar2">
+<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
+<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
+<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
+<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
+<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
+<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
+<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
+<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
+<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
+<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
+<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
+<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
+<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
+<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
+<img class="intLink" title="Add indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
+<img class="intLink" title="Delete indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
+<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
+<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
+<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
+<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
+</div>
+<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
+<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
+<p><input type="submit" value="Send" /></p>
+</form>
+</body>
+</html>
+
+
+ +
Note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
+ +

リソース

+ + + +
+

原典情報

+ + +
diff --git a/files/ja/web/guide/html/event_attributes/index.html b/files/ja/web/guide/html/event_attributes/index.html new file mode 100644 index 0000000000..305d8491d4 --- /dev/null +++ b/files/ja/web/guide/html/event_attributes/index.html @@ -0,0 +1,88 @@ +--- +title: Event 属性 +slug: Web/Guide/HTML/Event_attributes +tags: + - Beginner + - Guide + - HTML + - Intermediate + - JavaScript +translation_of: >- + Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these +--- +

すべての HTML 要素は、特定のイベントが発生したときの JavaScript の実行が許可された属性の集合から成り立ちます。これらは Event 属性と呼ばれ、その属性名には "on" の接頭辞が付きます。例えば、ユーザーが要素をクリックしたときに JavaScript を実行するために、JavaScript を onclick 属性の中に書きます。

+ +

イベントの応答として JavaScript のコードが実行された場合、this スコープは HTML 要素となり、このスコープ内にある event 変数を通して {{domxref("Event")}} オブジェクトにアクセスできます。

+ +
+

警告: これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、{{domxref("Window")}} オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。

+
+ +

これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為には {{domxref("EventTarget.addEventListener()")}} 関数を使ってください。

+ +

この Event 属性は、'unsafe-inline' キーワードを使わない限りすべてのインラインスクリプトをブロックするコンテンツ・セキュリティ・ポリシーを使うことよって ブロックされる可能性があります。

+ +

Event 属性の使用例

+ +

この例は {{HTMLElement("div")}} がクリックされる度にテキストを要素に追加します。

+ +
+

注意: これは、これらの属性の 1 つを使用する例であり、するべきではない方法です。

+
+ +
<!doctype html>
+<html>
+  <head>
+    <title>Event 属性の例</title>
+    <script>
+      function doSomething() {
+        document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>";
+      }
+    </script>
+  </head>
+  <body>
+    <div onclick="doSomething();">クリック!</div>
+    <div id="thanks"></div>
+  </body>
+</html>
+
+ +

この例を実行してみてください:

+ +

{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}

+ +

イベントリスナーの使用例

+ +

代わりに、以下に示すように {{domxref("EventTarget.addEventListener()")}} を使うべきです。

+ +
<!doctype html>
+<html>
+  <head>
+    <title>Event 属性の例</title>
+    <script>
+      function doSomething() {
+        document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>";
+      }
+
+      // ページのロードが完了した時に呼ばれる;
+      // ここは、ページ内の要素にイベントリスナを追加するなど、何でも必要な設定を実行する場所です。
+
+      function setup() {
+        document.getElementById("click").addEventListener("click", doSomething, true);
+      }
+      // ウィンドウ内のドキュメントのロードが完了したことを知る為の、
+      // "load" イベントを受け取る為にイベントリスナを window オブジェクトに追加する
+
+      window.addEventListener("load", setup, true);
+    </script>
+  </head>
+  <body>
+    <div id="click">クリック!</div>
+    <div id="thanks"></div>
+  </body>
+</html>
+ +

この動作を以下の例から確認できます:

+ +

{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}

+ diff --git a/files/ja/web/guide/html/html5/constraint_validation/index.html b/files/ja/web/guide/html/html5/constraint_validation/index.html new file mode 100644 index 0000000000..c0315fe912 --- /dev/null +++ b/files/ja/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,329 @@ +--- +title: 制約検証 +slug: Web/Guide/HTML/HTML5/Constraint_validation +tags: + - CSS + - Guide + - HTML5 + - NeedsContent + - Selectors +translation_of: Web/Guide/HTML/HTML5/Constraint_validation +--- +

ウェブフォームの作成は常に複雑な作業でした。フォーム自体をマークアップすること自体は簡単ですが、それぞれの入力欄が妥当で一貫しているかどうかをチェックすることはもっと難しく、問題をユーザーに伝えることは頭痛がするかもしれません。HTML5 では、フォームに新しい仕組みが導入されました。{{ HTMLElement("input") }} 要素に意味を持つ新しい型と、クライアント側でフォームの内容をチェックする作業を簡単にする制約検証が追加されました。基本的な、よくある制約は、JavaScript を必要とせずに、新しい属性を設定することでチェックできます。もっと複雑な制約は制約検証 API を使用して検査することができます。

+ +

これらの概念の基本的な入門 (サンプル付き) は、フォーム検証チュートリアルをご覧ください。

+ +
メモ: HTML5 の制約検証は、サーバー側での検証の必要性をなくす訳ではありません。不正なフォームのリクエストは減少することが期待されるものの、不正なリクエストはまだ互換性のないブラウザー（例えば、HTML5 や JavaScript に対応していないブラウザー）から送られたり、ウェブアプリケーションをだまそうとする悪意のある人から送られたりする可能性があります。従って、HTML4 の時と同様、クライアント側で行われている検証と一貫性のある方法で、サーバー側でも入力の制約を検証する必要があります。
+ +

組込みの基本的な制約

+ +

HTML5 では、基本的な制約は 2通りの方法で定義されます。

+ + + +

意味を持つ入力型

+ +

{{ htmlattrxref("type", "input") }} 属性の組込み制約は次の通りです。

+ + + + + + + + + + + + + + + + + + + + + +
入力型制約の説明関連付けられた違反
<input type="URL">値は絶対 URL であり、URL Living Standard で定義された通りでなければなりません。TypeMismatch 制約違反
<input type="email">値は統語的に妥当なメールアドレス、ふつうは username@hostname.tld の書式でなければなりません。TypeMismatch 制約違反
+ +

これらの入力型のどちらでも、{{ htmlattrxref("multiple", "input") }} 属性が設定されていたら、この入力欄にカンマ区切りのリストで複数の値を設定することができます。これらの中でここで書かれた条件に満足しないものがある場合、Type mismatch 制約違反が発生します。

+ +

なお、ほとんどの入力型には組込み制約がありません。制約検証によって防ぐことができたり、既定で不正な値を妥当な値に変換する無害化アルゴリズムがあったりするためです。

+ + + +

上記で述べた type 属性に加えて、下記の要素が基本的な制約を記述するのに使われます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性属性をサポートする入力タイプとりうる値制約の説明関連する違反
patterntext, search, url, tel, email, passwordJavaScript 正規表現 (ECMAScript 5 global, ignoreCase と multiline フラグが無効でコンパイルされたもの)値はパターンに一致する必要があります。patternMismatch 制約違反
minrange, number有効な数値値以上であること。rangeUnderflow 制約違反
date, month, week有効な日付
datetime, datetime-local, time有効な日付と時刻
maxrange, number有効な数値値以下であること。rangeOverflow 制約違反
date, month, week有効な日付
datetime, datetime-local, time有効な日付と時刻
requiredtext, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; {{ HTMLElement("select") }} と {{ HTMLElement("textarea") }} 要素にも。none Boolean 属性のため: 存在すれば true, 存在しなければ false値は必須 (セットされた場合)。valueMissing 制約違反
stepdate日の整数値step がリテラル値 any にセットされていない場合、値は min + step の整数倍stepMismatch 制約違反
month月の整数値
week週の整数値
datetime, datetime-local, time秒の整数値
range, number整数値
minlengthtext, search, url, tel, email, password; と {{ HTMLElement("textarea") }} 要素整数長文字列数 (code points) は、空でない場合は属性値より少なくならない。{{ HTMLElement("textarea") }}では改行はすべて 1 つの文字に正規化される (CRLF の組と対象的に)。tooShort 制約違反
maxlengthtext, search, url, tel, email, password; と {{ HTMLElement("textarea") }} 要素整数長文字列数 (code points) は属性値を超えない。tooLong 制約違反
+ +

制約検証プロセス

+ +

Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:

+ + + +

Calling checkValidity() is called statically validating the constraints, while calling reportValidity() or submitting the form is called interactively validating the constraints.

+ +
Note: + + +
+ +

HTML5 制約 API を使用した複雑な制約

+ +

Using JavaScript and the Constraint API, it is possible to implement more complex constraints, 例えば、constraints combining several fields, or constraints involving complex calculations.

+ +

Basically, the idea is to trigger JavaScript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.

+ +

Constraint combining several fields: Postal code validation

+ +

The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like D- in Germany, F- in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.

+ +
+

注: This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts.

+
+ +

As an example, we will add a script checking the constraint validation for this simple form:

+ +
<form>
+    <label for="ZIP">ZIP : </label>
+    <input type="text" id="ZIP">
+    <label for="Country">Country : </label>
+    <select id="Country">
+      <option value="ch">Switzerland</option>
+      <option value="fr">France</option>
+      <option value="de">Germany</option>
+      <option value="nl">The Netherlands</option>
+    </select>
+    <input type="submit" value="Validate">
+</form>
+ +

This displays the following form:

+ +

{{EmbedLiveSample("Constraint_combining_several_fields_Postal_code_validation")}}

+ +

First, we write a function checking the constraint itself:

+ +
function checkZIP() {
+  // For each country, defines the pattern that the ZIP has to follow
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
+  };
+
+  // Read the country id
+  var country = document.getElementById("Country").value;
+
+  // Get the NPA field
+  var ZIPField = document.getElementById("ZIP");
+
+  // Build the constraint checker
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // Check it!
+  if (constraint.test(ZIPField.value)) {
+    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
+    // give a message about the format required for this country
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+ +

Then we link it to the onchange event for the {{ HTMLElement("select") }} and the oninput event for the {{ HTMLElement("input") }}:

+ +
window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}
+ +

You can see a live example of the postal code validation.

+ +

アップロード前のファイルサイズの制限

+ +

Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint Validation API, and especially the field.setCustomValidity() method, with another JavaScript API, here the File API.

+ +

Here is the HTML part:

+ +
<label for="FS">Select a file smaller than 75 kB : </label>
+<input type="file" id="FS">
+ +

This displays:

+ +

{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}

+ +

The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:

+ +
function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // If there is (at least) one file selected
+  if (files.length > 0) {
+     if (files[0].size > 75 * 1024) { // Check the constraint
+       FS.setCustomValidity("The selected file must not be larger than 75 kB");
+       return;
+     }
+  }
+  // No custom constraint violation
+  FS.setCustomValidity("");
+}
+ +

Finally we hook the method with the correct event:

+ +
window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}
+ +

You can see a live example of the File size constraint validation.

+ +

制約検証における表示の整形

+ +

Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.

+ +

要素の外見の制御

+ +

The look of elements can be controlled via CSS pseudo-classes.

+ +

CSS の :required および :optional 疑似クラス

+ +

The {{cssxref(':required')}} and {{cssxref(':optional')}} pseudo-classes allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.

+ +

:placeholder-shown CSS pseudo-class

+ +

See {{cssxref(':placeholder-shown')}}

+ +

CSS の :valid :invalid 疑似クラス

+ +

The {{cssxref(':valid')}} and {{cssxref(':invalid')}} pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.

+ +

制約違反の文字列の制御

+ +

The following items can help with controlling the text of a constraint violation:

+ + diff --git a/files/ja/web/guide/html/html5/html5_element_list/index.html b/files/ja/web/guide/html/html5/html5_element_list/index.html new file mode 100644 index 0000000000..fef48af8f1 --- /dev/null +++ b/files/ja/web/guide/html/html5/html5_element_list/index.html @@ -0,0 +1,584 @@ +--- +title: HTML5 の要素 +slug: Web/Guide/HTML/HTML5/HTML5_element_list +tags: + - HTML + - HTML5 +translation_of: Web/HTML/Element +--- +

This page list all standard HTML5 elements, described by their opening tag and grouped by function. Contrary to the HTML Element index which lists all possible tags, standard, non-standard, valid, obsolete or deprecated ones, this list only the valid HTML5 elements. Only those should be used in new Web sites.

+ +

The symbol この要素は HTML5 で追加された要素です。 indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification.

+ +

ルート要素

+ + + + + + + + + + + + + + +
要素説明
{{HTMLElement("html")}}HTML 文書、XHTML 文書のルート（基点）要素。他の全ての要素はこの要素の子孫要素として配置しなくてはなりません。
+ +

文書メタデータ要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("head")}}Represents a collection of metadata about the document, including links to or definitions of scripts and style sheets.
{{HTMLElement("title")}}Defines the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags are not interpreted.
{{HTMLElement("base")}}Defines the base URL for relative URL in the page.
{{HTMLElement("link")}}Used to link JavaScript and external CSS with the current HTML document.
{{HTMLElement("meta")}}Defines metadata that can't be defined using other HTML element.
{{HTMLElement("style")}}Style tag is used to write inline CSS.
+ +

スクリプティング要素

+ + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("script")}}Defines either an internal script or link to an external script. The script language is JavaScript
{{HTMLElement("noscript")}}Defines an alternative content to display when the browser doesn't support scripting.
+ +

セクショニング要素と見出し要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("body")}} +
Represents the main content of an HTML document. There is only one <body> element in a document.
+
{{HTMLElement("section")}} この要素は HTML5 で追加された要素です。Defines a section in a document
{{HTMLElement("nav")}} この要素は HTML5 で追加された要素です。Defines a section that contains only navigation links
{{HTMLElement("article")}} この要素は HTML5 で追加された要素です。Defines self-contained content that could exist independantly of the rest of the content
{{HTMLElement("aside")}} この要素は HTML5 で追加された要素です。Defines some content set aside from the rest of page content. If it is removed, the remaining content still make sence.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces.
{{HTMLElement("hgroup")}} この要素は HTML5 で追加された要素です。Groups a set of <h1> to <h6> elements when a heading has multiple levels
{{HTMLElement("header")}} この要素は HTML5 で追加された要素です。Defines the header of a page or section. It often contains a logo, the title of the Web site and a navigational table of content.
{{HTMLElement("footer")}} この要素は HTML5 で追加された要素です。Defines the footer for a page or section. It often contains a copyright notice, some links to legal information or addresses to give feedback.
{{HTMLElement("address")}}Defines a section containing contact information.
+ +

グループ化要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("p")}}Defines a portion that should be displayed as a paragrah.
{{HTMLElement("hr")}}Represents a thematic break between paragraphs of a section or article or any longer content.
{{HTMLElement("pre")}}Indicates that its content is preformatted and that this format must be preserved.
{{HTMLElement("blockquote")}}Represents a citation.
{{HTMLElement("ol")}}Defines an ordered list of items, that is a list which change its meaning if we change the order of its elements
{{HTMLElement("ul")}}Defines an unordered list of items.
{{HTMLElement("li")}}Defines a item of a enumeration list often preceded by a bullet in English.
{{HTMLElement("dl")}}Defines a definition list, that is a list of terms and their associated definitions.
{{HTMLElement("dt")}}Represents a term defined by the next <dd>.
{{HTMLElement("dd")}}Represents the definition of the terms immediately listed before it.
{{HTMLElement("figure")}} この要素は HTML5 で追加された要素です。Represents a figure illustrated a part of the document.
{{HTMLElement("figcaption")}} この要素は HTML5 で追加された要素です。Represents the legend of a figure.
{{HTMLElement("div")}}Represents a generic container with no special meaning.
+ +

テキストレベル・セマンティクス要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("a")}}ハイパーリンク。他の文書などへのリンク機能を提供します。
{{HTMLElement("em")}}Representsemphasized text, like a stress accent.
{{HTMLElement("strong")}}Represents especiallyimportant text.
{{HTMLElement("small")}}Represents aside comment, that is text like a disclaimer, a copyright which is not essential to the comprehension of the document.
{{HTMLElement("s")}}Represents content that is nolonger accurate or relevant.
{{HTMLElement("cite")}}Represents thetitle of a work.
{{HTMLElement("q")}}インラインの短い引用。段落をまたぐ様な引用には blockquote 要素を用います。
{{HTMLElement("dfn")}}Represents a term whosedefinition is contained in its nearest ancestor content.
{{HTMLElement("abbr")}}Represents anabbreviation or anacronym, eventually with its meaning.
{{HTMLElement("data")}} この要素は HTML5 で追加された要素です。Associates to its content amachine-readable equivalent. (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of HTML5).
{{HTMLElement("time")}} この要素は HTML5 で追加された要素です。Represents adate andtime value, eventually with a machine-readable equivalent.
{{HTMLElement("code")}}コンピューターのコード
{{HTMLElement("var")}}Represents avariable, that is an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.
{{HTMLElement("samp")}}Represents theoutput of a program or a computer.
{{HTMLElement("kbd")}}キーボードのキーコマンドや音声コマンドなどのユーザ入力を表します（※名称が「キーボード要素」であるにも関わらず、キーボード以外のユーザ入力も表せる点に注意が必要です）
{{HTMLElement("sub")}},{{HTMLElement("sup")}}Represents asubscript, respectively asuperscript.
{{HTMLElement("i")}}Represents some text in analternate voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought or a ship name.
{{HTMLElement("b")}}Represents a text which to which attention is drawn forutilitarian purposes. It doesn't convey extra importance and doesn't implicate an alternate voice.
{{HTMLElement("u")}}Representsunarticulate non-textual annoatation, such labeling the text as being misspelt or labeling a proper name in Chinese text.
{{HTMLElement("mark")}} この要素は HTML5 で追加された要素です。Represents text highlighted forreference purposes, that is for its relevance in another context.
{{HTMLElement("ruby")}} この要素は HTML5 で追加された要素です。Represents content to be marked withruby annotations, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanesefurigana.
{{HTMLElement("rt")}} この要素は HTML5 で追加された要素です。Represents thetext of a ruby annotation.
{{HTMLElement("rp")}} この要素は HTML5 で追加された要素です。Representsparenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.
{{HTMLElement("bdi")}} この要素は HTML5 で追加された要素です。Represents text that must beisolated from its surrounding for bidirectional text formatting. It allows to embed span of text with a different, or unknown, directionality.
{{HTMLElement("bdo")}}Represents thedirectionality of its children, in order to explicitly override the Unicode bidirectional algorithm.
{{HTMLElement("span")}}Represents text with no specific meaning. This has to be used when noother text-semantic element conveys an adequate meaning, which, in this case, is often brought by global attributes like class, lang, or dir.
{{HTMLElement("br")}}改行（ HTML のソースコード内での改行コードは、特定の要素内のもの、或いは特定のスタイルが指定された要素内のものしか表示される文書に改行として反映されません ）
{{HTMLElement("wbr")}} この要素は HTML5 で追加された要素です。Represents aline break opportunity, that is a suggested wrapping point in order to improve readability of text split on several lines.
+ +

変更要素

+ + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("ins")}}文書に追加された内容である事を示す
{{HTMLElement("del")}}文書から削除された内容である事を示す
+ +

埋め込みコンテンツ要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("img")}}画像
{{HTMLElement("iframe")}}Represents anested browsing context, that is an embedded HTML document.
{{HTMLElement("embed")}} この要素は HTML5 で追加された要素です。Represents aintegration point for an external, often non_HTML, application or interactive content.
{{HTMLElement("object")}}Represents anexternal resource, which will be treated as an image, an HTML sub-document or an external resource to be processed by a plugin.
{{HTMLElement("param")}}Definesparameters for use by plugins invoked by <object> elements.
{{HTMLElement("video")}} この要素は HTML5 で追加された要素です。Represents avideo, and its associated audio files and captions, with the necessary interface to play it.
{{HTMLElement("audio")}} この要素は HTML5 で追加された要素です。Represents asound, or anaudio stream.
{{HTMLElement("source")}} この要素は HTML5 で追加された要素です。Allows authors to specify alternative media resources for media elements like <video> or <audio>.
{{HTMLElement("track")}} この要素は HTML5 で追加された要素です。Allows authors to specify timedtext track for media elements like <video>or <audio>.
{{HTMLElement("canvas")}} この要素は HTML5 で追加された要素です。Represents abitmap area that scripts can be used to render graphics, like graphs, game graphics, any visual images on the fly.
{{HTMLElement("map")}}In conjunction with <area>, defines animage map.
{{HTMLElement("area")}}In conjunction with <map>, defines animage map.
{{SVGElement("svg")}} この要素は HTML5 で追加された要素です。Defines an embeddedvectorial image.
{{MathMLElement("math")}} この要素は HTML5 で追加された要素です。Defines amathematical formula.
+ +

テーブルデータ要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("table")}}行と列を持つ図表。テーブル。
{{HTMLElement("caption")}}テーブルのキャプション
{{HTMLElement("colgroup")}}テーブルの、一つ以上の列グループを表す
{{HTMLElement("col")}}テーブルの列を表す
{{HTMLElement("tbody")}}Represents the block of rows that describes theconcrete data of a table.
{{HTMLElement("thead")}}Represents the block of rows that describes thecolumn labels of a table.
{{HTMLElement("tfoot")}}Represents the block of rows that describes thecolumn summaries of a table.
{{HTMLElement("tr")}}Represents arow of cells in a table.
{{HTMLElement("td")}}Represents adata cell in a table.
{{HTMLElement("th")}}Represents aheader cell in a table.
+ +

フォーム関連要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("form")}}Represents aformular, consisting of controls, that can be submitted to a server for processing.
{{HTMLElement("fieldset")}}フォームコントロール要素のグループ化に用いる
{{HTMLElement("legend")}}<fieldset> のキャプション
{{HTMLElement("label")}}フォームコントロールのキャプション
{{HTMLElement("input")}}Represents atyped data field allowing the user to edit the data.
{{HTMLElement("button")}}Represents abutton.
{{HTMLElement("select")}}Represents a control allowing theselection among a set of options.
{{HTMLElement("datalist")}} この要素は HTML5 で追加された要素です。Represents aset of predefined options for other controls.
{{HTMLElement("optgroup")}}Represents aset of options, logically grouped.
{{HTMLElement("option")}}Represents anoption in a <select> element, or a suggestion of a <datalist> element.
{{HTMLElement("textarea")}}Represents amultiline text edit control.
{{HTMLElement("keygen")}} この要素は HTML5 で追加された要素です。Represents akey pair generator control.
{{HTMLElement("output")}} この要素は HTML5 で追加された要素です。Represents theresult of a calculation.
{{HTMLElement("progress")}} この要素は HTML5 で追加された要素です。Represents thecompletion progress of a task.
{{HTMLElement("meter")}} この要素は HTML5 で追加された要素です。Represents a scalarmeasurement (or a fractional value), within a known range
+ +

インタラクティブコンテンツ要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("details")}} この要素は HTML5 で追加された要素です。Represents awidget from which the user can obtain additional information or controls.
{{HTMLElement("summary")}} この要素は HTML5 で追加された要素です。Represents asummary,caption, orlegend for a given <details>.
{{HTMLElement("command")}} この要素は HTML5 で追加された要素です。Represents acommand that the user can invoke.
{{HTMLElement("menu")}} この要素は HTML5 で追加された要素です。Represents alist of commands.
+ +

関連情報

+ + diff --git a/files/ja/web/guide/html/html5/index.html b/files/ja/web/guide/html/html5/index.html new file mode 100644 index 0000000000..70a1bf5a71 --- /dev/null +++ b/files/ja/web/guide/html/html5/index.html @@ -0,0 +1,171 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - HTML + - HTML5 + - References + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 は HTML で定義されている最新の標準仕様の名称です。この用語は、 2 つの異なる概念を表しています。これは HTML 言語の新しいバージョンであり、新しい要素、属性、動作、およびより多彩でパワフルなウェブサイトやアプリケーションを構築することができるより大きな一連の技術でもあります。このセットは HTML5 & friends と呼ばれることがあり、よく HTML5 と短縮されます。

+ +

このリファレンスは、すべてのオープンウェブ開発者に便利になるように設計されており、機能に基づいていくつかのグループに分類された数多くの HTML5 の技術についてのリソースにリンクしています。

+ + + +
+
+

Semantics

+ +
+
HTML5 のセクションとアウトライン
+
HTML5 ではアウトラインとセクションに関する要素が追加されました。 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}, {{HTMLElement("hgroup")}}
+
HTML5 の audio 要素と video 要素の利用
+
{{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素はマルチメディアコンテンツの埋め込みや操作を可能にします。
+
フォームの改善
+
HTML5 ではウェブフォームに様々な改善が施されています。制約バリデーション API、多数の新しい属性、 {{HTMLElement("input")}} 要素の属性の新しい {{htmlattrxref("type", "input")}} の値の追加。そして新要素として {{HTMLElement("output")}} が追加されています。
+
新しいセマンティック要素
+
セクション、メディア、フォーム要素のほかに、 {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} あるいは {{HTMLElement("meter")}} のような多くの新しい要素、妥当な HTML5 の要素はますます増えています。
+
{{HTMLElement("iframe")}} の改善
+
{{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("srcdoc", "iframe")}} 属性を使用することで、著者は今やセキュリティレベルを明確にし、望まれた {{HTMLElement("iframe")}} 要素の描画が可能となりました。
+
MathML
+
HTML 文書に数式を直接埋め込むことができます。
+
HTML5 の紹介
+
この記事では、ウェブデザインやウェブアプリケーションでの HTML5 の利用方法を紹介します。
+
HTML5 リファレンスガイド
+
マークアップ作成ツール、コード例、ウェブ開発者ツールを含む HTML5 のクイックリファレンスシートです。このガイドは利用やアクセスがしやすいようにダウンロードできます。このページは W3C の支援によって、 HTML5 を使用した基本的な親しみやすさと経験のために作成されました。
+
ダウンロード可能な HTML5 ガイド
+
HTML5 のクイックガイドで、よくある HTML タグと新しい HTML5 のタグを含みます。 Downloadable in PDF and PNG formats.
+
HTML5 虎の巻 
+
HTML 5、要素、イベント属性、互換性をマスターしたいと思う初心者向けの HTML 5 の小さな虎の巻です。
+
HTML5 準拠のパーサー
+
HTML 文書のバイト列を DOM に変換するパーサーは拡張され、妥当ではない HTML に直面したときも含め、すべての場合で使用する振る舞いを詳細に定義されるようになりました。これによって、予測可能性や、 HTML5 準拠のブラウザー間で相互運用性が格段に高まりました。
+
+ +

Connectivity

+ +
+
Web Socket
+
Web Socket はページとサーバーが永続的な接続を作成し、 HTML ではないデータを交換することを可能にします 。
+
Server-sent event
+
サーバーがクライアントからのリクエストに対するレスポンスとしてのみデータを送ることができたという、古典的な枠組みより、サーバーがクライアントにイベントを送出することが可能になります。
+
WebRTC
+
この RTC (Real-Time Communication) という技術によって、プラグインや外部のアプリケーション無しに、ブラウザで直接、他者に接続して、テレビ会議を操作することが可能になります。
+
+ +

Offline & storage

+ +

オフラインリソース: アプリケーションキャッシュ

+ +
+
Firefox は HTML5 のオフラインリソースの仕様に完全に対応しています。その他のほとんどのブラウザーは、ある程度のレベルでオフラインリソースに対応しています。
+
オンラインおよびオフラインのイベント
+
Firefox 3 は WHATWG の、アプリケーションや拡張機能にアクティブなインターネット接続があるかどうかを検出させ、接続の成功やダウンも検出する、オンラインおよびオフラインのイベントをサポートしています。
+
WHATWG のクライアントサイドセッションと、 DOM Storage として知られる永続的なストレージ
+
クライアントサイドセッションと永続的なストレージは、ウェブアプリケーションが、構築されたデータをクライアントサイドに保存することを可能とします。
+
IndexedDB
+
IndexedDB は、インデックスを使って、ブラウザーで大量に構造化されたデータの保存と、このデータの高性能な検索のためのウェブ標準です。
+
ウェブアプリケーションからファイルを扱う
+
新しい HTML5 File API のサポートが Gecko に加えられており、ウェブアプリケーションはユーザーによって選択されたローカルファイルにアクセスすることができるようになっています。これは、type が file である  {{HTMLElement("input")}} HTML 要素の新しい multiple 属性を使った、複数のファイル選択のサポートを含みます。 FileReader もあります。
+
+ +

Multimedia

+ +
+
HTML5 の audio 要素 と video要素の利用
+
{{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素はマルチメディアコンテンツの埋め込みと操作を可能にします。
+
WebRTC
+
この RTC (Real-Time Communication) という技術によって、プラグインや外部のアプリケーション無しに、ブラウザで直接、他者に接続して、テレビ会議を操作することが可能になります。
+
Camera API の利用
+
コンピューターのカメラの使用、操作、およびカメラ画像を格納することができます。
+
Track and WebVTT
+
{{HTMLElement("track")}} 要素は字幕とチャプターを可能にします。 WebVTT はテキストトラックフォーマットです。
+
+ +

2D/3D graphics AND effects

+ +
+
Canvas チュートリアル
+
新しい {{HTMLElement("canvas")}} 要素についてと、 Firefox でどのようにグラフや他のオブジェクトを描画するかを学習します。
+
HTML5 text API for <canvas> elements
+
HTML5 の text API が {{HTMLElement("canvas")}} 要素によってサポートされます。
+
WebGL
+
WebGL は、 HTML5 の {{HTMLElement("canvas")}} 要素で利用できる、OpenGL ES 2.0 に厳密に従った API を提供することで、 3D グラフィックスを Web にもたらします。
+
SVG
+
ベクター画像の XML ベースのフォーマット。HTML5 では SVG を直接文書に埋め込む事が可能になりました。
+
+
+ +
+

Performance and Integration

+ +
+
Web Worker
+
JavaScript の評価をバックグラウンドのスレッドに委譲することを可能にして、これらの動作がインタラクティブなイベントを低速にすることを防ぐことを可能にします。
+
XMLHttpRequest Level 2
+
ページのいくつかのパーツの非同期に取得することを可能にして、時間とユーザーのアクションによって変化する、動的なコンテンツを表示することを可能とします。これは Ajax の背後にある技術です。
+
JIT-compiling JavaScript engines
+
新世代 の JavaScript エンジンは以前よりはるかに強力で、パフォーマンスの向上を導きます。
+
History API
+
ブラウザーの閲覧履歴の操作ができます。特に対話的に新しい情報を読み込むページに於いて有益な API です。
+
contentEditable 属性で、あなたのウェブサイトが wiki に変身！
+
HTML5 は contentEditable 属性を標準化しました。この機能についてより学びます。
+
ドラッグ＆ドロップ API
+
HTML5 の ドラッグ＆ドロップ API は、ウェブサイト内部あるいはウェブサイト間の、アイテムのドラッグ及びドロップのサポートを可能にします。これはまた、拡張機能や Mozilla ベースのアプリケーションで使用するための、よりシンプルな API 提供します。
+
HTML でのフォーカスの管理
+
新しい HTML5 の activeElement と hasFocus 属性がサポートされています。
+
Web ベースのプロトコルハンドラー
+
navigator.registerProtocolHandler() メソッドを使って、ウェブアプリケーションをプロトコルのハンドラーとして登録することができます。
+
requestAnimationFrame
+
アニメーションのレンダリングのに最適なチューニングが施された新しいメソッド。
+
Fullscreen API
+
ブラウザの UI を表示せずに、ウェブページやアプリケーションがスクリーン全体の使用を制御します。
+
Pointer Lock API
+
ゲームや類似したアプリケーションが、ポインタがウィンドウの境界に達したときにフォーカスを失わないように、コンテンツにポインタをロックすることを可能にします。
+
オンラインおよびオフラインのイベント
+
オフラインで有能な良い Web アプリケーションを構築するため、アプリケーションが実際にオフラインであるときのことを知る必要があります。ついでに、アプリケーションが再度オンライン状態を返したときのことも知る必要があります。
+
+ +

Device access

+ +
+
Camera API の利用
+
コンピュータのカメラからの画像の使用、操作、保存が可能になります。
+
Touch events
+
閲覧者のタッチスクリーン押下によって発生するイベントに対応するハンドラ。
+
Geolocation の利用
+
ブラウザが閲覧者の現在位置を取得し、これを利用する事が出来ます。
+
デバイスの方向の検出
+
ブラウザを起動しているデバイスが方向を変えたときに、その情報を得られるようにします。例えば、デバイスの姿勢に反応するゲームを作るための入力デバイス、あるいは縦長または横長というスクリーンの方向に、ページのレイアウトを適応するために利用できます。
+
Pointer Lock API
+
ゲームや類似したアプリケーションが、ポインタがウィンドウの境界に達したときにフォーカスを失わないように、コンテンツにポインタをロックすることを可能にします。
+
+ +

StylIng

+ +

CSS は、さらに複雑な方法で要素を形成することができるように拡張されてきました。 CSS はもう一枚岩の仕様ではなく、異なるモジュールがすべてレベル 3 ではありませんが、これはしばしば CSS3 として参照されます。いくつかのモジュールはレベル 1 、あるモジュールはレベル 4 で、その中間のすべてのレベルをカバーしています。

+ +
+
背景のスタイル付けの新機能
+
{{cssxref("box-shadow")}}、 複数の背景、 CSS の {{cssxref("filter")}} を用いてボックスに影をつけることができるようになりました。これらは Advanced box effects を読むことで知ることができます。
+
より飾った境界線
+
{{cssxref("border-image")}} およびそれに関連する個別指定プロパティを用いて枠線の形成に画像を使うことができるだけでなく、 {{cssxref("border-radius")}} プロパティによって角丸の枠線に対応しています。
+
スタイルのアニメーション
+
異なる状態にアニメーションするための CSS Transitions の使用、またはイベントの引き金無くページのパーツをアニメーションするための CSS Animations の使用により、ページの可動要素を操作することができます。
+
タイポグラフィの改善
+
著者には、より良いタイポグラフィに到達するための、より良いコントロールがあります。 {{cssxref("text-overflow")}} やハイフネーションはもちろん、影もコントロールでき、またはその装飾はより明確にコントロールすることができます。新しい {{cssxref("@font-face")}} @-規則のおかげで、特別な書体をダウンロードし、適用することができます。
+
新しい表象的なレイアウト
+
デザインの柔軟性の向上のため、二つの新しいレイアウトが加えられました。 CSS 段組みレイアウトと、 CSS フレックスボックスレイアウトです。
+
+
+
diff --git a/files/ja/web/guide/html/html5/introduction_to_html5/index.html b/files/ja/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..64143bdd59 --- /dev/null +++ b/files/ja/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,26 @@ +--- +title: HTML5 の紹介 +slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5 は、HTML 標準の最も新しいバージョンです。HTML5 によって、リッチメディアのサポートだけでなく、ユーザ、彼らのローカルデータ、サーバの間でより簡単にかつ効果的にやり取りするための Web アプリケーションを作成するための拡張されたサポートを提供するための新機能も手に入れることができます。

+ +

HTML5 はまだ策定段階にあるため、現在の仕様に対する変更は当然あり得ます。そのため、すべてのブラウザで HTML5 の機能のすべてがサポートされているわけではありません。ですが、Gecko (そしてその拡張である、Firefox) には、素晴らしいほどに、HTML5 の最初の段階のサポートが含まれており、さらなる機能のサポートに対する取り組みを続けています。Gecko は バージョン1.8.1 から HTML5 の機能をサポートし始めました。HTML5 のメインページに Gecko がサポートしている HTML5 の機能のリストがあります。複数ブラウザのサポート状況の詳細な情報については、CanIUse ウェブサイトを参照してください。

+ +

{{ 英語版章題("The HTML5 doctype") }}

+ +

HTML5  の DOCTYPE

+ +

HTML5 の DOCTYPE は非常にシンプルです。HTML コンテントで HTML5 を使用することを示すには、単純に以下のようにします：

+ +
<!DOCTYPE html>
+
+ +

この非常にシンプルな DOCTYPE は、現在 HTML5をサポートしていないブラウザでさえ、HTML の古くから存在する部分に HTML5の規格通りに入り込み、それらがサポートしない HTML5 の新機能を無視することを意味する、標準モードに切り替えます。

+ +
+

{{ languages( {"en": "en/HTML/HTML5/Introduction to HTML5", "fr":"fr/HTML/Introduction_à_HTML5", "pt": "pt/HTML/HTML5/Introdução_ao_HTML5"} ) }}

+
diff --git a/files/ja/web/guide/html/obsolete_things_to_avoid/index.html b/files/ja/web/guide/html/obsolete_things_to_avoid/index.html new file mode 100644 index 0000000000..4fb68efa3b --- /dev/null +++ b/files/ja/web/guide/html/obsolete_things_to_avoid/index.html @@ -0,0 +1,86 @@ +--- +title: Historical artifacts to avoid +slug: Web/Guide/HTML/Obsolete_things_to_avoid +tags: + - HTML + - NeedsContent + - NeedsTechnicalReview +translation_of: Learn/HTML/Introduction_to_HTML +--- +

導入

+ +

多くの人々はページのソースを見てコピー & ペーストすることで、元のサイトが上手に作成されているかを考えることなく HTML、CSS、JavaScript を学習しました。これは、過去には必要であったかもしれないが現在は無意味になっているコーディングの慣習を習得してしまうことを意味します。このページでは、時間がたつにつれて不要あるいは悪い慣習になった事柄を説明します。

+ +

Doctype

+ +

(X)HTML には 10 種類ほどの doctype があります。それらの違いはわずかです (違いがない場合もあります)。HTML5 の doctype の使用を推奨します。

+ +
<!DOCTYPE html>
+ +

これはすべてのブラウザ (Internet Explorer 6 を含む) で標準準拠モードになります。

+ +

<meta> 要素と charset 属性

+ +

以下の記述を含むソースコードを見ることがよくあります:

+ +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+ +

ところが、すべての Web ブラウザ (Internet Explorer 6 を含む) は以下のように短縮した場合でも同様に動作します:

+ +
<meta charset="UTF-8" />
+
+ +

すばらしい リバースエンジニアリング や プラグマティズム によってこの知識を獲得しました。これを使用してください。

+ + + +

存在しない <meta> 要素

+ +

多数の非推奨、非標準、不使用な値がいまだにサイトからサイトへコピーされています。特に以下の値は使用しないでください:

+ + + +

スクリプト内の HTML コメント

+ +

かつては一部のブラウザのみが {{ HTMLElement("script") }} タグを認識していました。そのためスクリプトとして解釈されるべきテキストを、ブラウザが表示してしまうことがありました。この現象に対する自然なアイデアは、スクリプトを HTML のコメントに収めることでした。この方法では、スクリプトを実行するブラウザはそのスクリプトを実行し、スクリプトを認識しないブラウザはスクリプトを無視しました。

+ +

そのような時期から、我々は以下のような記述を受け継いできました:

+ +
<script><!--
+var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+//-->
+</script>
+
+ +

または以下のような記述:

+ +
<script type="text/javascript">
+<!--//--><![CDATA[//><!--
+Blabla.extend(MyFramework.settings, { "basePath": "/" });
+//--><!]]>
+</script>
+
+ +

このような記述は、今日では無意味です。スクリプトを実行しないブラウザであっても、 {{ HTMLElement("script") }} タグを無視します。スクリプトだけを {{ HTMLElement("script") }} 要素の開始タグと終了タグの間に記述してください。また、{{ htmlattrxref("src", "script") }} 属性で指定する別のファイルにスクリプトを含めることもよいです。合わせて、HTML5 の {{ htmlattrxref("async", "script") }} 属性や {{ htmlattrxref("defer", "script") }} 属性を用いることも考えてみましょう。

+ +

もはや使用すべきではない要素

+ +

font

+ +

<font> タグに代わり、CSS を用いて要素や id/class セレクタにフォントスタイルを適用してください。

+ +

b, i, u

+ +

これらは少々議論の余地がありますが、適切な場合はできる限り、それぞれ {{ HTMLElement("strong") }}、 {{ HTMLElement("em") }}、CSS (text-decoration:underline) を適用した {{ HTMLElement("span") }} を用いるようにしてください。

+ +

これらのうちどの要素を選択するかは、裁量に任せます。一部の開発者向けページでは、単純に {{ HTMLElement("b") }} を {{ HTMLElement("strong") }} で、{{ HTMLElement("i") }} を {{ HTMLElement("em") }} で置き換えるようにアドバイスしています。このアドバイスに従うことは悪い考えです。 {{ HTMLElement("strong") }} は特に重要な記述のため、一方 {{ HTMLElement("em") }} はそれ以外に強調する記述のための要素です。たとえば、文字をイタリック体にする目的で単純に {{ HTMLElement("em") }} を用いるのは悪い考えです。強調しないイタリック体の文字列は、CSS で font-style:italic を用いて実現してください。同様に、書籍や芸術作品のタイトルは伝統的にイタリック体のテキストで記載しますが、このような箇所は {{ HTMLElement("em") }} や {{ HTMLElement("i") }} より {{ HTMLElement("cite") }} 用を用いる方が、より意味を持ちます。

diff --git a/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..08f5330b89 --- /dev/null +++ b/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html @@ -0,0 +1,201 @@ +--- +title: 読み込みが速い HTML ページを作成するための Tips +slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages +tags: + - Advanced + - Guide + - HTML + - NeedsUpdate + - Performance + - Web + - Web Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

これらの豆知識は、一般の知識や実験に基づくものです。

+ +

ウェブページを最適化すると、訪問者に対して応答性のよいサイトを提供するだけでなく、ウェブサーバーやインターネット接続の負荷を低減する効果もあります。これは大規模なサイトや、緊急事態で通信量が急増するニュース速報のようなサイトでは重要でしょう。

+ +

ページの読み込みパフォーマンスの最適化は、低速なダイヤルアップ接続やモバイルデバイスの利用者向けコンテンツのためだけではありません。ブロードバンド向けコンテンツでも重要であり、高速接続の利用者であっても劇的な改善につながるでしょう。

+ +

豆知識

+ +

ページの量の削減

+ +

ページの量は、ページ読み込みパフォーマンスにおいて断然重要な要素です。

+ +

最小化として知られる不要なホワイトスペースやコメントの削除、インラインのスクリプトや CSS の外部ファイルへの移動によりページの量を削減することで、ページの構造変更を最小限にしてダウンロードの性能を向上できるでしょう。

+ +

HTML Tidy のようなツールを利用すると、妥当な HTML ソースから行頭のホワイトスペースや過剰な空行を自動的に取り除くことができます。他に JavaScript ソースを、書式変更や難読化および長い識別子を短いものに置き換えることで 「{{原語併記("圧縮", "compress")}}」するツールもあります。

+ +

ファイル数の最少化

+ +

ウェブページが参照するファイル数を削減することで、ページのダウンロードに必要な HTTP コネクションの数が減り、それによってリクエストを送信したり、レスポンスを受け取ったりする時間が短縮できます。

+ +

ブラウザーのキャッシュ設定によっては、ブラウザーが各ファイルの If-Modified-Since ヘッダーで、ファイルが最後にダウンロードされてから変更されているかどうかを確認するリクエストを送信することがあります。ページをレンダリングする前に、ブラウザがこれらの各ファイルの変更時刻をチェックする必要があるため、参照されたファイルの最終変更時刻をチェックするのに時間がかかり過ぎると、ウェブページの初期表示が遅くなることがあります。

+ +

CSS で多数の背景画像を使用している場合は、画像スプライトと呼ばれる方法でで画像を 1 つに結合することで必要な HTTP による参照の数を減らすことができます。すなわち、背景として用いる画像ファイルは毎回同じものを適用し、それを適切な x/y 座標に調整します。これは寸法が限られている要素について最善の方法ですが、適用できない場合もあるでしょう。しかし、HTTP リクエストを少なくしてキャッシュする画像を単一にすることで、ページの読み込み時間を削減できます。

+ +

コンテンツ配信ネットワーク (CDN) を使用する

+ +

この記事の目的のために、CDN はサーバーと訪問者の間の物理的な距離を縮めるための手段です。サーバーの起点と訪問者の間の距離が長くなると、読み込み時間が長くなります。ウェブサイトのサーバーがアメリカにあり、インドからの訪問者がいるとします。米国からの訪問者と比較して、ページの読み込み時間はインドの訪問者の方がはるかに長くなります。

+ +

CDN は地理的に分散したサーバーネットワークで、ユーザーとウェブサイトの距離を縮めるために連携して機能します。CDN はキャッシュされたウェブサイトのバージョンを保存し、それらをユーザーに最も近いネットワークノードを介して訪問者に提供するので、待ち時間が短縮されます。

+ +

参考文献:

+ + + +

ドメイン検索の削減

+ +

ドメインが分かれていると DNS の参照に時間がかかるため、CSS の link や JavaScript や画像の src に多数のドメインが現れるほど、ページの読み込み時間が長くなるでしょう。

+ +

現実的でない場合があるかもしれませんが、ページがあるドメインと異なるドメインの使用数は必要最低限にするよう注意すべきです。

+ +

再利用されるコンテンツのキャッシュ

+ +

どんなコンテンツでも、キャッシュできるか、キャッシュされているか、キャッシュ期限が適切であるかを確認してください。

+ +

特に、Last-Modified ヘッダーに注意してください。これは、効率のよいページのキャッシュができるようにします。このヘッダーは、ファイルを読み込もうとしているユーザーエージェントに、ファイルがいつ更新されたかなどの情報を伝えます。多くのウェブサーバーは、静的なページ (.html、.css など) にはファイルシステムに格納されている最終更新日に基づいて、自動的に Last-Modified ヘッダーを追加します。もちろん、動的なページ (.php、.aspx など) については取得できないので、ヘッダーを送信しません。

+ +

そのため、特に動的に生成されるページについては、この件について調べてみると有益です。よって特に、動的に生成されるページのためにこの問題について調べることは有益です。少し厄介ですが、通常キャッシュできないページのリクエストを大幅に節約できるでしょう。

+ +

詳細情報:

+ +
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. Wikipedia の HTTP ETag の記事
    4. +
  4. Caching in HTTP
    5. +
+ +

ページのコンポーネントの最適な順序

+ +

最初の表示に必要な CSS または JavaScript と共に、ページコンテンツをまずダウンロードすると、ページの読み込み中にユーザーに最もすばやくページを表示させることができます。このコンテンツは通常テキストであるため、転送中のテキスト圧縮の効率が良く、ユーザーへの反応がもっと早くなります。

+ +

使用される前にページの読み込みが完了する必要がある動的機能は、最初は無効にしておき、ページの読み込みが完了した後でのみ有効にするようにしましょう。これにより、JavaScript がページコンテンツの後に読み込まれるようになり、ページ読み込み時に全体が表示されるまでの時間が短縮されます。

+ +

インラインスクリプト数の削減

+ +

インラインスクリプトがあると、インラインスクリプトのパース中にページの構造が変わる可能性があるとパーサーが想定しなければならないため、ページの読み込みにおいて重荷になることがあります。一般的にはインラインスクリプトの使用を減らし、また特に document.write() を用いたコンテンツの出力を減らすことで、ページ読み込みのパフォーマンスが向上するでしょう。 document.write() に基づく旧来のコンテンツ操作方法ではなく、最新のブラウザー向けの方法である AJAX を使用してください。

+ +

最新の CSS と正しいマークアップの使用

+ +

最新の CSS を用いるとマークアップの量を削減し、レイアウトの点で (スペーサーの) 画像使用を減らし、また多くの場合スタイル付けした文字列の画像を置き換えることが可能です。画像は CSS と文字列の組み合わせに比べ、多大なコストがかかります。

+ +

正しいマークアップを使用することは、ほかにも利点があります。第一に、ブラウザーが HTML を解釈する際にエラー訂正を行う必要がなくなります (ユーザーの記述法の多様性を認めるかどうかという哲学的な問題とは別です。厳密な、許容範囲のない書式を強制するというより、プログラム的に「正しく」または正規化しましょう)

+ +

さらに、正しいマークアップをすることによって、ウェブページをプリプロセスができる他のツールが自由に利用できるようになります。例えば、HTML Tidy はホワイトスペースや省略可能な終了タグを除去することができます。しかし、重大なマークアップの誤りがあるページではツールを実行できません。

+ +

コンテンツをまとめる

+ +

テーブルをレイアウトのために使うのは陳腐化した方法であり、もはや使うべきではありません。レイアウトを行うには、代わりに floats、positioning、フレックスボックス、グリッドを使用してください。

+ +

テーブルは現在でも妥当なマークアップと考えられていますが、表形式のデータを表示するために用いるべきです。ブラウザーがページを迅速に表示するためには、テーブルを入れ子にしないようにしてください。

+ +

以下のように深い入れ子のテーブルを使用する代わりに、

+ +
<table>
+  <table>
+    <table>
+          ...
+    </table>
+  </table>
+</table>
+ +

以下のように入れ子にしないテーブルや div を用いてください。

+ +
<table>...</table>
+<table>...</table>
+<table>...</table>
+
+ +

CSS Flexible Box Layout と CSS Grid Layout の仕様書も参照してください。

+ +

SVG の資産を最小化し圧縮する

+ +

多くの描画アプリケーションで作成された SVG は、不必要なメタデータを含んでいることが多く、削除することができます。サーバーで SVG 資産を gzip で圧縮するよう設定しましょう。

+ +

画像を縮小して圧縮する

+ +

画像が大きいと、ページの読み込みに時間がかかります。画像をページに追加する前に、圧縮することを検討してください。 Compress Jpeg、Tiny PNG、その他多くのツールがオンラインで利用可能です。photoshop などのオフラインツールも使用できます。

+ +

画像やテーブルのサイズ指定

+ +

ブラウザーが直ちに画像やテーブルの高さや幅を決めることができれば、ブラウザーはコンテンツの再配置を行うことなくウェブページを表示できます。これはページの表示を高速化するだけでなく、ページの読み込みが完了するまでにレイアウトが不安定に変化することを防ぎます。よって、可能な限り画像には height と width を指定するべきです。

+ +

テーブルは以下のセレクターとプロパティの組み合わせを用いるべきです:

+ +
  table-layout: fixed;
+
+ +

そして、 <col> 要素および <colgroup> 要素を用いて列の幅を指定しましょう。

+ +

ユーザーエージェント要件の賢い選択

+ +

ページデザインを最大限に改善するには、プロジェクトのユーザーエージェントの要件を合理的なものにしましょう。すべてのブラウザー、特に古いバージョンのブラウザーでコンテンツがピクセル単位で正確に見えるように要求しないでください。

+ +

理想的には、適切な標準仕様に対応している最新のブラウザーを最低要件にするよう考慮するべきです。これには、最近のバージョンの Firefox、Internet Explorer、Google Chrome、Opera、Safari が含まれます。

+ +

ただし、この記事に記載している秘訣の多くはあらゆるユーザーエージェントに適用できる汎用的なテクニックであり、かつブラウザーの対応要件にかかわらずどのようなウェブページにでも適用できます。

+ +

可能なら async や defer を使用する

+ +

async と defer 属性の両方と互換性のある JavaScript を使用し、特に、複数の script タグがある場合、可能ならば async をいつでも使用してください。
+
+ これにより、ページで JavaScript が読み込み中である間はレンダリングを中断できます。さもなければ、ブラウザーはこれらの属性を持たない script タグの後にあるコンテンツをレンダリングしないでしょう。

+ +

注意: これらの属性が初回のページ読み込みに大きな効果があるとしても、属性は使用するべきですがすべてのブラウザーで動作するとは考えないようにしてください。よい JavaScript コードを作るためのガイドラインすべてに従っていれば、コードを変更する必要はありません。

+ +

ページ構造の例

+ +

· HTML

+ +
+
· HEAD
+
+ +
+
+
+
· LINK ...
+ ページの外観に必要な CSS ファイルです。管理のために関連性のない CSS は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
+
+
+
+ +
+
+
+
· SCRIPT ...
+ ページの読み込み中に必要な機能の JavaScript ファイルです。ページの読み込み後にしか実行しない DHTML は含めないようにしてください。
+
管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
+
+
+
+ +
+
· BODY
+
· 小さな塊 (tables / divs) のページコンテンツは、ページ全体の読み込みを待つことなく表示することができます。
+
+ +
+
+
+
· SCRIPT ...
+ DHTML を実行するのに用いるスクリプトです。DHTML のスクリプトはたいてい、ページが完全に読み込まれて必要なオブジェクトがすべて初期化された後にのみ実行します。よって、ページのコンテンツより先に読み込む必要はありません。先に読み込むと、ページが最初に表示されるのが遅くなります。
+
管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
+
ロールオーバー効果で用いる画像がある場合は、ページのコンテンツをダウンロードした後に画像の先読みをしておきましょう。
+
+
+
+ + + + diff --git a/files/ja/web/guide/html/using_html_sections_and_outlines/index.html b/files/ja/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..90e68e7b77 --- /dev/null +++ b/files/ja/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,287 @@ +--- +title: HTML のセクションとアウトラインの使用 +slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +tags: + - Advanced + - Example + - Guide + - HTML + - HTML5 + - Outlines + - Overview + - Sections + - Web +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
{{HTMLSidebar}}
+ +
+

重要: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。

+
+ +

HTML5 の仕様書では、文書の構造を整理するのに役立つ意味づけする区分化要素がいくつか導入されました。意味づけする区分化要素は、ブラウザーや読み上げアプリや音声アシスタントなど、ユーザーに代わって文書を解釈する他の技術に構造的な意味を伝えるために特別に設計されています。

+ +

意味づけする区分化要素は、文書内のより大規模な構造を明確にします。以前の版の HTML には、関連するコンテンツをグループ化するための一般的なメカニズムとして <div> 要素だけがあり、意味づけが限られていましたが、これらの要素は、これを強化するためのものです。例えば、 <div class="navigation"> はブラウザーにその内容についての意味を何も示唆しません。 HTML ソースを読む人間だけが、 navigation のようなクラスの意味を判断することができます。それに対して、 <nav> 区分化要素は、含まれているコンテンツをブラウザーやその他の端末により明確に説明します。リンクやその他のナビゲーション構造は、ユーザーがサイトやページのコンテンツのどこにいるかを理解して移動するのに役立ちます。

+ +

HTML5 には新しい意味づけする要素が追加され、コンテンツの意味的な領域においてウェブサイトの区分化を進化・明確化することができるようになりました。開発者は、これらの意味づけ要素を意図した目的に沿って使用することが重要です。多くのアクセシビリティツールや一部のブラウザーが提供しているリーダービューは、意味づけされた区分化要素に依存しています。そのため、既存の <div> 要素群を、一括での <section> 要素群に入れ替えてはいけません。

+ +

HTML5 の区分化要素

+ + + +

区分化に使用されるその他の意味づけする HTML 要素

+ + + +

区分化要素はどのように機能するのか

+ +
 <body>
+    <header>
+      <nav>
+        <ul>
+          <li><a href="#">link</a></li>
+          <li><a href="#">link</a></li>
+          <li><a href="#">link</a></li>
+        </ul>
+      </nav>
+      <h1>
+        Page Title
+      </h1>
+    </header>
+
+    <section>
+      <h2>
+        My Blog Posts
+      </h2>
+      <article>
+        <header>
+          <p>
+            Article Title
+          </p>
+        </header>
+        <p>
+          content
+        </p>
+      </article>
+      <article>
+        <header>
+          <p>
+            Article Title
+          </p>
+        </header>
+        <p>
+          content
+        </p>
+      </article>
+      <aside>
+        <p>
+          Author info
+        </p>
+      </aside>
+    </section>
+
+    <footer>
+      Copyright Info
+    </footer>
+  </body>
+ + + +

<nav> はナビゲーションブロックを示し、主要なナビゲーションメニューに使用してください。

+ +
<nav>
+  <ul>
+    <li><a href="#">link</a></li>
+    <li><a href="#">link</a></li>
+  </ul>
+</nav>
+ +

入れ子になったメニュー

+ +

<nav> 要素は入れ子にしてはいけません。 <nav> には、主要なメニューと従属的なメニューの両方を含めることができます。

+ +
<nav>
+  <ul>
+    <li><a href="#">primary link</a></li>
+    <li>
+      <a href="#">primary link</a>
+      <ul>
+        <li><a href="#">secondary link</a></li>
+        <li><a href="#">secondary link</a></li>
+      </ul>
+    </li>
+    <li><a href="#">primary link</a></li>
+  </ul>
+</nav>
+ + + +

<nav> 要素は、サイトのナビゲーションメニューにのみ使用します。ソーシャルメディアのプロフィールまたはブログロールなどのリンク集は、 <nav> 要素で囲むべきではありません。

+ +

<nav> 内の HTML 要素

+ +

リスト要素はナビゲーションでよく使われますが、必須というわけではありません。<p> などの他の要素を使用することができます。

+ +

article 要素

+ +

<article> 要素は自己完結型のコンテンツを示します。つまり、<article> 要素を除く他のすべての HTML を削除しても、そのコンテンツが読者にとって意味を持つものです。

+ +
<article>
+  <h1>How to Become an MDN Contributor</h1>
+  <p>
+    Do you want to help protect the web?....
+  </p>
+</article>
+ +

article 内で入れ子になった要素

+ +

<article> 要素は header, aside, footer などの他の意味づけ要素を持つことができます。これは、要素のクラスプロパティに CSS セレクターを追加して文書のスタイルを設定する場合に便利です。

+ +
<article>
+  <header>
+    <h1>How to Become an MDN Contributor</h1>
+  </header>
+  <p>
+    Do you want to help protect the web?....
+  </p>
+  <aside>
+    <blockquote>
+      Amazing quote from article
+    </blockquote>
+  </aside>
+  <footer>
+    <p>
+      Author info, publication date
+    </p>
+  </footer>
+</article>
+ +

article と section の入れ子

+ +

article は section の中に含むことができ、 section は article の中に含むことができます。本に例えると、関連する記事でセクションに分割することができます。これらの article はどちらも関連する情報の section を含むことができます。

+ +
<section>
+  <h1>Getting Involved</h1>
+  <article>
+    <header>
+      <h2>How to Become an MDN Contributor</h2>
+      <p>Do you want to help protect the web?....</p>
+    </header>
+    <section>
+      <h3>Steps to Editing an Article</h3>
+    </section>
+    <footer>
+      <p>Author info</p>
+      <p>publication date</p>
+    </footer>
+  </article>
+</section>
+ +

section 要素

+ +

section 要素は、テーマによるコンテンツのグループ化のために使用されます。 W3C の仕様ふまえ、通常はセクションには見出しを含めるべきです。見出しに <header> 要素の使用が必須というわけではありません。

+ +
<section>
+  <h1>Amazing MDN Contributors</h1>
+    <ul>
+      <li><img src="link" alt="descriptive text"></li>
+      <li><img src="link" alt="descriptive text"></li>
+      <li><img src="link" alt="descriptive text"></li>
+    </ul>
+</section>
+ +

aside 要素

+ +

<aside> 要素は、メインコンテンツとは別に配置される関連コンテンツを定義します。しばしばコールアウト、引用ブロック、定義などに使用されます。 <aside> 要素は、追加だが関連性のある情報を含む補足情報によく使用されます。

+ +
<section>
+  <h1>Amazing MDN Contributors</h1>
+    <ul>
+      <li><img src="link" alt="descriptive text"></li>
+      <li><img src="link" alt="descriptive text"></li>
+      <li><img src="link" alt="descriptive text"></li>
+    </ul>
+    <aside>
+     <p>To get involved contact</p>
+    </aside>
+</section>
+ +

aside 要素の入れ子

+ +

<aside> 要素は、他の区分化 HTML 要素の内部に配置できます。 <aside> の内部に <aside> を含めることはできません。コールアウトボックスの中にコールアウトボックスを持たないということを意味します。

+ +

HTML5 非対応ブラウザーでの HTML5 要素の利用

+ +

セクションと見出しの要素は、いくつかの手順を踏むことで多くの HTML5 非対応ブラウザーでも動作させることができます。オーディエンスの特定の対象が Internet Explorer 8 以前を使用している場合、以下の手順に従うと期待通りに動作させることができます。ただし、グローバルではこれらのブラウザーの使用はとても少なくなったので、そのような場面はわずかです。

+ +

HTML5 のセマンティック要素は特別な DOM インターフェイスを必要としませんが、これらに明示的に対応していない古いブラウザーは、特定の CSS スタイルが必要です。未知の要素は既定で display: inline としてスタイル付けされるため、これらには display: block と設定したいところです。

+ +
article, aside, footer, header, nav, section {
+  display: block;
+}
+
+ +

もちろんウェブ開発者はそれらに異なるスタイルを指定できますが、 HTML5 非対応ブラウザーでは、そのような要素のための既定のスタイル指定が意図通りにはならないことを忘れないでください。 {{HTMLElement("time")}} 要素が含まれていないのは、 HTML5 非対応ブラウザーのそれに対する既定のスタイル指定が、 HTML5 対応ブラウザーにおけるスタイル指定と同じだからということにも注意してください。

+ +

さらに、より古いバージョンの IE では、 DOM のインスタンスを生成しない限り、対応していない要素のスタイル指定ができません。以下のように、特定のスクリプトを追加することで実現することができます。

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  </script>
+<![endif]-->
+
+ +

最後の予防措置として、 {{HTMLElement("noscript")}} 要素を {{HTMLElement("head")}} 要素内に明示的に追加して、 JavaScript を無効にしたユーザーに対して、このページが JavaScript に依存していることを警告することができます。

+ +
<noscript>
+  <p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
+  <p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
+    ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
+  <p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
+</noscript>
+
+ +

まとめると、 Internet Explorer (バージョン 8 以下) を含め、また、それらのブラウザーがスクリプトを利用しないように設定されていても正しく表示を代替する、 HTML5 非対応ブラウザー向けの HTML5 のセクショニングおよび見出し要素の対応を可能にするコードは以下になります。

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  </script>
+<![endif]-->
+<noscript>
+  <p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
+  <p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
+    ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
+  <p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
+</noscript>
+
+ +
+

注: このコードは HTML validator ではエラーが発生します。これは必ずしも本当に悪いことだとは言えません — サイトには若干のバリデーションエラーがあるものです — が、気を付けなければなりません。

+
+ +

まとめ

+ +

HTML5 で導入された新しい意味づけ要素により、標準的な方法でウェブ文書の構造を記述することができるようになります。これらの要素は、 HTML5 ブラウザーを持っていて、ページを理解するのに役立つ構造を必要としている人、例えば、何らかの支援技術の助けを必要としている人に大きな利点をもたらします。これらの新しい意味づけ要素は使用が簡単で、負担がほとんどなく、 HTML5 に非対応のブラウザーでも動作するようにすることができます。したがって、それらは制限なく使用されるべきです。

diff --git a/files/ja/web/guide/html/xhtml/index.html b/files/ja/web/guide/html/xhtml/index.html new file mode 100644 index 0000000000..d467020da5 --- /dev/null +++ b/files/ja/web/guide/html/xhtml/index.html @@ -0,0 +1,59 @@ +--- +title: XHTML +slug: Web/Guide/HTML/XHTML +tags: + - Guide + - HTML + - Web + - Web Development + - Web Standards + - XML + - ウェブ標準 + - ウェブ開発 + - ガイド +translation_of: Web/Guide/HTML/XHTML +--- +

XHTML は、 HTML 文書のうち {{Glossary("XML")}} の構文規則に適合して書かれたものを指すために歴史的に使用されてきた用語です。

+ +

以下の例では HTML 文書とそれに対応する "XHTML" 文書、それにともに提供される適切な {{Glossary("HTTP")}} の {{HTTPHeader("Content-Type")}} ヘッダーを示しています。

+ +

HTML 文書

+ +
Content-Type: text/html
+
+<!DOCTYPE html>
+<html lang=ja>
+  <head>
+    <meta charset=utf-8>
+    <title>HTML</title>
+  </head>
+  <body>
+    <p>これは HTML 文書です</p>
+  </body>
+</html>
+
+ +

XHTML 文書

+ +
Content-Type: application/xhtml+xml
+
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+  <head>
+    <title>XHTML</title>
+  </head>
+  <body>
+    <p>これは XHTML 文書です</p>
+  </body>
+</html>
+
+ +

慣習として、 "XHTML" 文書が Content-Type: application/xhtml+xml ヘッダーを伴ってウェブに提供される例はわずかしかありませんでした。代わりに、 XML 構文規則に合うように書かれた文書であっても、 Content-Type: text/html ヘッダーを付けて提供されていました。 — 従って、ブラウザーは XML パーサーではなく HTML パーサーを用いて文書を解析しており、様々な時に驚くような問題を発生させていました。以下の記事に問題の詳細が記述されています。

+ + diff --git a/files/ja/web/guide/index.html b/files/ja/web/guide/index.html new file mode 100644 index 0000000000..19846285d4 --- /dev/null +++ b/files/ja/web/guide/index.html @@ -0,0 +1,92 @@ +--- +title: 開発者ガイド +slug: Web/Guide +tags: + - Guide + - Landing + - Web +translation_of: Web/Guide +--- +

これらの記事は、特定の技術やAPIを利用するための how-to 情報を提供します。

+ +
+
+
+
HTML 学習エリア
+
+

HTML (ハイパーテキスト・マークアップ・ランゲージ／Hypertext Markup Language) はほぼすべてのウェブコンテンツの中心となる言語です。ブラウザー画面上で目にする大半は、基本的に HTML を用いて記述されています。

+
+
CSS 学習エリア
+
+

CSS (Cascading Style Sheets) とは HTML 内に書かれた文書の見た目を記述するスタイルシート言語です。

+
+
音声と動画の配信
+
ウェブ上で音声や動画を届ける手段には、「静的な」データからアダプティブライブストリームに至るまでたくさんのものものがあります。この記事は、ウェブベースのメディアを伝送する様々な仕組みや一般的なブラウザーとの互換性について学ぶ最初のステップとして作られたものです。
+
音声と動画の加工
+
様々な技術を組み合わせて新たな形を作ることができるのがウェブの美しいところです。ブラウザーには音声や動画に対する諸々の機能が組み込まれていますから、{{htmlelement("canvas")}}や WebGL、Web Audio API といった技術を使い、直接的に音声や動画を編集することができます。例えば、エコーや圧縮効果を音声に加えたり、白黒やセピアのフィルターを動画に加えたりできます。この記事では、何をすべきかを説明するリファレンスを提供しています。
+
イベント開発者ガイド
+
+

イベントは、ウェブ上での処理中に起こる様々な出来事の非同期処理のためのデザインパターンや、様々なタイプの大量の出来事の名付け・特徴化・利用のために必要です。

+
+
AJAX
+
+

Asynchronous JavaScript + XML (AJAX) は既存の技術同士を組み合わせた新しいアプローチで、ウェブアプリケーションはより速く、表示されているページ全てを再読み込みすることなく、ユーザーインターフェイスを逐次更新できるようになります。そして、アプリケーションにより早い表示、ユーザー操作へのより良い応答性をもたらします。

+
+
ウェブのグラフィック
+
+

現代のウェブサイトとアプリケーションは、グラフィックスによる表現を必要としています。

+
+
Web API ガイド
+
+

すべての Web API のリストとそれが何をするのか。

+
+
JavaScript
+
+

JavaScriptは、ウェブアプリケーションの作成に使われる強力なスクリプト言語です。

+
+
Localizations and character encodings
+
+

ブラウザー内部では文章は Unicode 形式で処理されます。ところが、ネットワークを介して文章をブラウザーに送る過程では、文字をバイトで表現する (文字エンコード) ことが行われています。HTMLの仕様では (すべての Unicode 文字を表現できる) UTF-8 エンコーディングを利用することが推奨されており、如何なるエンコーディングが使われていようと、ウェブコンテンツはそのエンコーディングを宣言する必要があります。

+
+
モバイルウェブ開発
+
この記事では、モバイル端末でもしっかりと動作するウェブサイトを設計するのに必要な主な技術の一部についての概要を示しています。Firefox for Android もご覧ください。
+
+
+ +
+
+
プログレッシブウェブアプリ
+
+

PWA はどの環境でも動作し、ネイティブアプリケーションと同等のユーザー体験を得られるようないくつかの機能を提供します。このガイド集には PWA について知っておくべき全てのことが書かれています。

+
+
最適化とパフォーマンス
+
+

現代的なウェブアプリやウェブサイトを構築する時に重要なのは、コンテンツをすばやく効率的に作ることです。強力なデスクトップシステムでも、比較的スペックの低い小型端末でも十分に動作するような作り方を学びましょう。

+
+
XML のパースとシリアライズ
+
+

ウェブプラットフォーム上での XML のパースやシリアライズには複数の方法があり、それぞれ長所と短所があります。

+
+
Web Open Font Format (WOFF)
+
+

WOFF (Web Open Font Format) はウェブ上で誰もが使えるフリーのフォントファイルフォーマットです。

+
+
Unicode Bidirectional Text Algorithm (BiDi)
+
Unicode® BiDi アルゴリズムはUnicode文章の標準の一つで、ブラウザーが Unicode の文章をレンダリングするにあたってどのように文字を整理すべきかを定めています。このガイドではこのアルゴリズムの概要を説明し、また、特に適切に多言語対応させたい時に、どういう風に制作コンテンツに適用すべきかを説明しています。
+
FormData オブジェクトの使用
+
+

FormData オブジェクトは、XMLHttpRequest を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが "multipart/form-data" に設定されている場合に、submit() メソッドで送信する際に使用するデータと同じ形式です。

+
+
ユーザ入力とコントロール
+
現代的なウェブでのユーザー入力は、単純なマウスとキーボードだけでは語れません。例えばタッチスクリーンなどを考慮する必要があります。この記事では、オープンなウェブアプリがユーザーの入力に対応したり操作を設計したりするにあたっての推奨事項を、よくある質問や、現実的な例、背景にある技術についてのより詳しく知りたい人向けの情報とともに紹介しています。
+
用語集
+
ウェブやインターネットに関連する多数の専門用語の定義。
+
+
+
+ +

関連情報

+ + diff --git a/files/ja/web/guide/index/index.html b/files/ja/web/guide/index/index.html new file mode 100644 index 0000000000..9f0d683123 --- /dev/null +++ b/files/ja/web/guide/index/index.html @@ -0,0 +1,11 @@ +--- +title: 索引 +slug: Web/Guide/Index +tags: + - Index + - ガイド +translation_of: Web/Guide/Index +--- +
{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}
+ +

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

diff --git a/files/ja/web/guide/introduction_to_web_development/index.html b/files/ja/web/guide/introduction_to_web_development/index.html new file mode 100644 index 0000000000..0b5ba72e9d --- /dev/null +++ b/files/ja/web/guide/introduction_to_web_development/index.html @@ -0,0 +1,98 @@ +--- +title: ウェブ開発入門 +slug: Web/Guide/Introduction_to_Web_development +tags: + - CSS + - CodingScripting + - HTML + - JavaScript + - Web + - 初心者 + - 開発 +translation_of: Web/Guide/Introduction_to_Web_development +--- +

ウェブ開発を始めたばかりであるか、単に視野を新しいウェブの世界に広げているかに関わらず、ここにあるリンクはあなたが始めるのを助けてくれるはずです。

+ +

学習リソースへの別の (重複する) リンクセットについては、MDN の学習ページを参照してください。

+ +
メモ: このページの推奨リソースは変更されることがあります。
+ + + + + + + + +
+

ドキュメントのトピック

+ +

HTML

+ + + +

CSS

+ + + +

JavaScript

+ +

初級

+ + + +

中級

+ + + +

上級

+ + + 		+

リソース

+ +
+
W3C Web Education Community Group Wiki
+
ウェブデザイン、HTML、HTML5、CSS、JavaScript、アクセシビリティを網羅。これはウェブ開発の領域をまたいだ基礎を学びたい初心者が最初に開始するのに良いポイントです。
+
SitePoint
+
HTML, CSS, JavaScript 学習の信頼できるリファレンスで、さまざまなブラウザーの機能サポートやブラウザーのバグにも触れている。
+
HTMLDog
+
初心者向け HTML と CSS のすばらしく包括的なリファレンス。
+
Google's HTML, CSS, and Javascript from the Ground Up
+
こちらの簡単に理解できる、Google's expert web developers の動画チュートリアルは HTML, CSS,  JavaScript の基礎をカバーしている。
+
CSSTutorial.net Beginner Tutorials
+
幅広いテキストと動画のチュートリアルで、基本から中級の CSS をカバーしている。
+
Tizag CSS Tutorials
+
CSS を短く簡潔なチュートリアルで理解したい人向けの、簡単にフォローできるリファレンス。
+
jQuery Fundamentals
+
オープンソースのリファレンス本で、初心者向け JavaScript と JQuery の詳しい説明がある。
+
JavaScript From Null: A Video Series
+
"視覚"ベースの学習を求める完全な初心者向けの JavaScript 動画シリーズ。
+
+
diff --git a/files/ja/web/guide/localizations_and_character_encodings/index.html b/files/ja/web/guide/localizations_and_character_encodings/index.html new file mode 100644 index 0000000000..2ac71992d7 --- /dev/null +++ b/files/ja/web/guide/localizations_and_character_encodings/index.html @@ -0,0 +1,57 @@ +--- +title: ローカライゼーションと文字エンコーディング +slug: Web/Guide/Localizations_and_character_encodings +translation_of: Web/Guide/Localizations_and_character_encodings +--- +

ブラウザは内部的にテキストを Unicode として処理します。ただし、ネットワークを介してブラウザにテキストを転送するには、文字をバイトで表現する方法 (文字エンコーディング) が使用されます。HTML 仕様では、UTF-8 エンコーディング (これはすべての Unicode を表すことができます) の使用を推奨しています。使用されるエンコーディングにかかわらず、Web コンテンツがどのエンコーディングを使用するかを宣言する必要があります。

+ +

ページの文字エンコーディングを指定するためには、{{HTMLElement("meta")}} 要素の {{htmlattrxref("charset", "meta")}} 属性を使用します。これは {{HTMLElement("head")}} ブロックの中で使用する必要があります。

+ +

例えばページが (推奨されている通りに) UTF-8 文字エンコーディングを使用していることを指定するには、{{HTMLElement("head")}} ブロックの中に次の行を記述します:

+ +
<meta charset="utf-8">
+
+ +

詳細とブラウザの内部

+ +

HTML 仕様が要求するように Web コンテンツでエンコーディングが宣言されている場合、Firefox はそのエンコーディングを用いてバイトを内部表現に変換します。残念ながら、UTF-8 を使うことや、UTF-8 の使用を宣言することは、Web コンテンツを提供する上で必ずしも一般的な方法ではありませんでした。1990 年代には、エンコーディングを宣言せずに、すべての Unicode を表現できない地域固有のエンコーディングを使うことが広まっていました。

+ +

Firefox は、エンコーディングを宣言していないレガシーなコンテンツに対して使用するフォールバックエンコーディングを必要とします。ほとんどのロケールでは、フォールバックエンコーディングは (しばしば ISO-8859-1 と呼ばれる) windows-1252 となります。これは 1990 年代にほとんどの Windows アプリケーションで使用されていたエンコーディングであり、またほとんどの Unix アプリケーションで使用されていたエンコーディングのスーパーセットでもあり、アメリカや西ヨーロッパで展開されていました。しかし、1990 年代にはすでに Web パブリッシングが一般的になっていたものの、windows-1252 エンコーディングがその地域の言語に適していなかったようなロケールがあります。これらのロケールにおいて、エンコーディングを宣言していないレガシーなコンテンツは、windows-1252 以外のレガシーなエンコーディングを通常使用しています。レガシーなコンテンツに対応するために、Firefox の一部のローカライゼーションにおいては、windows-1252 ではないフォールバックエンコーディングが必要となります。

+ +

残念ながらこのことは、Web と接する際の Firefox の機能がロケールごとに異なること、そして、フォールバックエンコーディングが異なるロケールをまたいでレガシーなコンテンツを読むのは困難であることを意味します。UTF-8 の採用後に Web パブリッシングが盛んになったロケールでこの問題が発生しないように、1990 年代の慣習から windows-1252 以外のレガシーなエンコーディングをもたないロケールは、フォールバックエンコーディングを windows-1252 とし、フォールバックエンコーディングが windows-1252 である古いロケールをまたぐコンテンツの読解に支障をきたさないようにする必要があります。新しく作成されたロケールネイティブな UTF-8 コンテンツはエンコーディングを宣言することが期待されますが、その場合フォールバックエンコーディングがコンテンツの処理に関与することはありません。

+ +

さらに、1990 年代に地域固有のエンコーディングが一つに定まっておらず、複数のレガシーなエンコーディングをヒューリスティックに検出する機能が Web ブラウザに導入されたロケールが少数存在します。その後 Web 製作者がヒューリスティック検出機能の存在を前提とするようになったことから、Firefox は現在もこれらのロケールにおいてヒューリスティック検出機能を備えています。

+ +

Finding canonical encoding names

+ +

The text below refers to canonical names of encodings. The canonical names are the values to the right of the equals sign in unixcharset.properties.

+ +

Specifying the fallback encoding

+ +

As of Firefox 28, this section is obsolete, since the preference intl.charset.default no longer exists. The mapping from locales onto fallback encodings is now built into Gecko itself.

+ +

The fallback encoding is specified by the preference intl.charset.default in intl.properties. It should be set to the canonical name of the legacy encoding that users of the localizations are most likely to encounter when browsing non-conforming legacy Web content that doesn't declare its encoding. Note that the fallback encoding as defined by the previous sentence does not necessarily need to be able to represent the characters needed for the language of the localization!

+ +

The fallback encoding should be left to windows-1252 for Western European locales, North, Central and South American locales, African locales, Central Asian locales and Oceanian locales. It typically needs to be set to something other than windows-1252 for Central and Eastern European locales, Middle Eastern locales and East Asian locales.

+ +

In order to avoid the problem of Web authors creating new UTF-8 content without declaring that the content uses UTF-8 and in order to maximize the ability of users to read content cross-locale, do not set the fallback encoding to UTF-8 for any newly-introduced localization. Note that Firefox no longer sends the Accept-Charset HTTP header, so there is no need to consider what gets advertised in Accept-Charset when setting the fallback encoding.

+ +

For locales where the fallback encoding is currently ISO-8859-1, it should be changed to windows-1252. ISO-8859-1 is decoded in the exact same way as windows-1252, but Firefox is moving to treating windows-1252 as the preferred label for this encoding in accordance with the Encoding Standard.

+ +

For locales where Internet Explorer has more market share than Firefox, the fallback encoding should typically be set to the same value as in Internet Explorer. You can see the fallback encoding a particular browser has by loading a test page. (Be sure to use a browser installation that has its settings left to the defaults when investigating!)

+ +

For locales where Firefox has more market share than Internet Explorer, it's probably best not to change the fallback encoding even if it doesn't follow the guidance given above. (For example, the fallback encoding for the Polish, Hungarian and Czech locales should probably continue to be ISO-8859-2 even though IE has a different fallback encoding.)

+ +

When in doubt, use windows-1252 as the fallback encoding.

+ +

ヒューリスティック検出モードの指定

+ +

ヒューリスティック検出モードは intl.properties にある intl.charset.detector という設定により指定します。この設定値は、ロシア語、ウクライナ語、そして日本語以外のすべてのロケールでは必ず空でなければなりません。どのような場合においても "universal" 検出器を指定してはいけません。その名前とは裏腹に、まったく普遍的 (universal) ではないためです!

+ +

少数言語に関する例外

+ +

If the localization is for minority language and the users are typically literate in the majority language of the region and read Web content written in the majority language very often, it is appropriate to specify the fallback encoding and the heuristic detection mode to be the same as for the localization for the majority language of the region. For example, for a localization for minority language in Russia, it is appropriate to copy the settings from the Russian localization.

+ +

いくつかのエンコーディングを文字エンコーディングメニューから選びやすくする

+ +

The preference intl.charsetmenu.browser.static in intl.properties makes some character encodings more easily available in the Character Encoding menu in the browser. The value should be a comma-separated list of canonical encoding names. The list should include at least the fallback encoding, windows-1252 and UTF-8. For locales where there are multiple common legacy encodings, all those encodings should be included. For example, the fallback encoding for Japanese is Shift_JIS, but there are other legacy encodings: ISO-2022-JP and EUC-JP. Therefore, it makes sense for the list to be Shift_JIS, EUC-JP, ISO-2022-JP, windows-1252, UTF-8.

diff --git a/files/ja/web/guide/mobile/a_hybrid_approach/index.html b/files/ja/web/guide/mobile/a_hybrid_approach/index.html new file mode 100644 index 0000000000..6437181c13 --- /dev/null +++ b/files/ja/web/guide/mobile/a_hybrid_approach/index.html @@ -0,0 +1,72 @@ +--- +title: ハイブリッドアプローチ +slug: Web/Guide/Mobile/A_hybrid_approach +tags: + - Mobile + - Responsive Design + - Web Development +translation_of: Web/Guide/Mobile/A_hybrid_approach +--- +

銀の弾丸はウェブ開発で見つけるのが難しいです — 状況に応じてさまざまなテクニックを最大限に活用する戦略に出くわす可能性が高くなります。 これは私たちの3つ目のアプローチです。 これは、別々のサイトとレスポンシブデザインのアプローチを組み合わせることでそれらの欠点のいくつかを回避することを目的としています。

+ +

このハイブリッドアプローチは、モバイル開発を3つの目標に分割し、次に各目標に個別に取り組むために利用可能な最善のテクニックを適用することを中心としています。 この記事では、ここでは例としてテクニックの潜在的な組み合わせの1つを紹介しますが、さまざまな状況ではさまざまな組み合わせが適切になります。 覚えておくべき最も重要な概念は、サーバー側とクライアント側のテクニックをあなたの状況に合うように組み合わせることができるということです。

+ +

長所

+ +

レスポンシブウェブデザインは素晴らしいです — 今のところそれはさまざまな状況でレイアウトをできるだけ良く見せるために利用可能な最良のテクニックです。 モバイルとデスクトップのユースケースが十分に似ている場合、これはレイアウト変更のための間違いなく好ましい選択肢です。 ただし、サイトのコンテンツをユーザーのコンテキストに合うように変えるためにクライアント側のテクニックを使用するのは面倒です。

+ +

幸いなことに、ここではクライアント側のテクニックを使用することに技術的に制限されていません — もう1つの選択肢は、サーバー側のユーザーエージェント検出を使用してユーザーに正しいコンテンツを表示することです。 これにより、サーバー側でコンテンツを変えるという複雑さが保たれますが、それでも私たちのレイアウトはレスポンシブデザインの柔軟性と将来の備えから利益を得ることができます。

+ +

レイアウトではなくコンテンツ専用のユーザーエージェント検出を使用すると、コンテンツごとに1つの URL を設定して、コンテンツのレイアウトをユーザーのブラウザーに合わせることもできます。 これは一般的に良いこと（英語）だと考えられています。 まったく異なる2つのサイトを管理するのではなく、ユーザーが気になるコンテンツのページに転送するだけです。 そしてデザインはレスポンシブなので、各ページはユーザーの画面上で可能な限り見栄えがよいことがわかります。

+ +

また、サーバー側のテクニックを取り入れることで、レスポンシブデザインのパフォーマンスの問題に対処することもできます。 例えば、レスポンシブウェブデザインに関してよく批判されている点は、フル解像度の画像が、常に縮小された画像を表示する携帯電話を含むすべてのデバイスに送信されることです。 この問題に対処するためのそのようなテクニックの1つ（リンク切れ）は、WURFL デバイス能力ライブラリと一緒にサーバー側のユーザーエージェント検出を使用して、ユーザーのデバイス用に適切なサイズの画像を送信することです。 これをサービスとして提供するさまざまな製品（英語）も登場しています。 もちろん、このテクニックには、ユーザーエージェント検出に関連したすべての欠点があります。 それでもうまくいかなくても、fluid images（利用可能なスペースに応じて拡大縮小する柔軟な画像）を使用するよりもパフォーマンスに関しては悪くありません。

+ +

上記のテクニックを組み合わせることで、純粋な別々のサイトよりも柔軟で、純粋なレスポンシブデザインよりも優れたパフォーマンスを持つ、モバイルウェブ開発戦略を得ることができます。

+ +

短所

+ +

混合アプローチの1つの欠点は、クライアント側とサーバー側の両方でコードパスの数が増加する可能性があることです。 これにより、他のアプローチよりも開発に時間がかかります。 しかし、適切に計画すれば、コードを保守可能な方法で整理することができます。 もう1つの欠点は、このアプローチはレスポンシブデザインに依存しているため、通常、レトロフィットとしてではなく、新しいプロジェクトまたは既存のフレキシブルレイアウトを持つプロジェクトに最も適していることです。 同様に、ユーザーエージェント検出を使用しているため、時間が経つにつれて検出ルールを更新する必要があります。

+ +

この選択肢を選ぶのが正しいとき

+ +

サーバー側とクライアント側のテクニックを組み合わせることは、常に考慮に値するものです。 非常に多くの選択肢があるので、採用した個々のテクニックの長所と短所を比較検討する必要があります。

+ +

多くの場合、ハイブリッドアプローチの複雑さが増すことは必然ではありません。 例えば、ユーザーが実際に使用しているデバイスに基づいてコンテンツを調整する必要すらないかもしれません — ブラウザーに機能があるかどうかを知るだけで十分な場合があります。 これは、Modernizr の JavaScript 機能検出または Detect It を使用して、クライアント側で識別できる可能性があるものです。 実際に自分のコンテンツを調整しようとしている軸を掘り下げて自問するのは害になることはありません。

+ +

サーバー側のテクニックをレスポンシブデザインに取り入れることについて説明しましたが、モバイルとデスクトップのユースケースが大きく異なる場合は、ハイブリッドアプローチを使用する方法もあります。 例えば、メディアクエリとフレキシブルレイアウトを組み合わせることで、別々のサイトのデザインの柔軟性を高めることができます。 あなたもモバイルサイトのデザインをタブレットにも快適に拡張するのに十分適応可能にすることができるかもしれません。

+ +

例

+ +

webowonder_mobile_and_desktop-300x225.jpgMozilla の Web O Wonder デモサイトでは、ハイブリッドアプローチの基本バージョンを試してみましたが、良い結果が得られました。 レスポンシブウェブデザインのいくつかの要素を使用して、サイトにモバイルレイアウトを設定したり、ユーザーエージェント検出を使用してモバイル向けの動画を提供したり、ユーザーが携帯電話の場合はデモを並べ替えたりします。 github でソースコードをチェックしてください。

+ +

私達はまたこのアプローチを含むもっと多くの開発をすぐにやることができます！ 実際、次のようなメインの Mozilla サイトへの1つの可能性のある道筋は、上の「長所」セクションに概説されています。

+ + + +

物事はまだ開発段階にあるので、これまでのところモバイルについてはそれほど多くはありませんが、新しい mozilla.org が github で成長するのをいつでも見ることができます。 私たちの進歩についての最新情報は Mozilla Webdev ブログを購読してください。

+ +

まとめ

+ +

万能の解決策はありません。 モバイルユーザーのコンテンツやユーザーフローを大幅に変更したいウェブアプリケーションは、おそらく別のモバイルサイトに移動する必要があります。 モバイルユーザー向けにコンテンツを変更する必要がないコンテンツ指向のページは、レスポンシブデザインで満足するでしょう。 モバイルユーザー向けのサイトのメッセージを少し変える必要があるが、レスポンシブデザインのメリットを享受したい場合は、ハイブリッドアプローチが最善の策です。 このような決定は、モバイルウェブ開発の中核をなすものです。 達成したいことについて具体的に考え、妥協点を認識しながら実用的なアプローチを選択することです。 がんばろう！

+ +

モバイルウェブ開発への取り組み

+ +

モバイルプラットフォーム向けに開発するための背景やその他のアプローチについては、以下の記事を参照してください。

+ + + +
+

原本情報

+ +

この記事は、もともと 2011 年 6 月 27 日に Mozilla Webdev ブログで「モバイルウェブ開発へのアプローチ 第4回 – ハイブリッドアプローチ」として Jason Grlicky によって公開されました。（英語）

+
+ +

 

diff --git a/files/ja/web/guide/mobile/index.html b/files/ja/web/guide/mobile/index.html new file mode 100644 index 0000000000..796f4e5f27 --- /dev/null +++ b/files/ja/web/guide/mobile/index.html @@ -0,0 +1,75 @@ +--- +title: モバイルウェブ開発 +slug: Web/Guide/Mobile +tags: + - Intermediate + - NeedsExample +translation_of: Web/Guide/Mobile +--- +

このページでは、モバイル端末で適切に機能するウェブサイトを設計するために必要となる、主要な一部のテクニックの概要を説明します。 Mozilla の Firefox OS プロジェクトに関する情報を探している場合は、 Firefox OS のページを参照してください。または、 Android 版 Firefox に興味があるかもしれません。

+ +

モバイル端末向けの設計とブラウザー間の互換性の2つの節に整理しました。また、 Jason Grlicky によるウェブ開発者向けのモバイルへの親和性のガイドも参照してください。

+ +

モバイル端末向けの設計

+ +

モバイル端末は、デスクトップパソコンやノートパソコンと比較して、ハードウェアの特性がまったく異なります。画面は通常、明らかに小さくなりますが、ユーザーが端末を回転させると、画面の向きがポートレートモードとランドスケープモードの間で自動的に切り替わります。通常、ユーザー入力用のタッチスクリーンがあります。位置情報や画面の向きなどの API は、デスクトップでは未対応であったりあまり有用でなかったりしますので、これらの API はモバイルユーザーに、サイトと対話するための新しい方法を提供します。

+ +

小さな画面での作業

+ +

レスポンシブウェブデザインは、ウェブサイトのレイアウトを表示する環境 — 特に、大きさと画面の向き — の変化に合わせることができる一連の技術を表す用語です。これには次のような技術が含まれています。

+ + + +

viewport メタタグで、ブラウザーに対してユーザーの端末の適切な表示倍率でサイトを表示するよう指示します。

+ +

タッチ画面での操作

+ +

タッチ画面を使うには、 DOM タッチイベントの作業をする必要があります。 CSS の {{cssxref(":hover")}} 擬似クラスを使用することはできないでしょうし、指はマウスポインターより太いという事実を考慮して、クリック可能なアイテムをボタンのようにデザインする必要があるでしょう。この記事、 designing for touch screens を参照してください。

+ +

pointer または any-pointer メディアクエリを使用して、タッチ可能な端末で異なる CSS を読み込むことができます。

+ +

画像の最適化

+ +

端末の帯域幅が低かったり高価だったりするユーザーを支援するために、デバイスの画面サイズと解像度に適した画像をロードして画像を最適化することができます。 CSS でこれを行うには、画面の高さ、幅、ピクセル比でクエリを行います。

+ +

CSS プロパティを使用して、画像を使用せずにグラデーションや影などの視覚効果を実装することもできます。

+ +

モバイル API

+ +

最後に、端末の向きや位置情報など、モバイル端末が提供する新しい可能性の利点を活用することができます。

+ +

クロスブラウザー開発

+ +

クロスブラウザーコードを書く

+ +

様々なモバイル端末で受け入れられ動作するウェブサイトを作成するには、以下のことが必要です。

+ + + +

例えば、一部のテキストに背景としてグラデーションを、 -webkit-linear-gradient のようなベンダー接頭辞の付いたプロパティを使用して設定する場合、最も良いのは {{cssxref("linear-gradient")}} プロパティの他のベンダー接頭辞が付いたものを含めることです。それを行わない場合は、少なくとも既定の背景がテキストとコントラストが付いていることを確認してください。つまり、ページが少なくとも linear-gradient 規則の対象外のブラウザーで利用できるようにします。

+ +

この Gecko 固有のプロパティの一覧と、この WebKit 固有のプロパティの一覧、そして Peter Beverloo の table of vendor-specific properties を参照してください。

+ +

CSS Lint などのツールを使用すると、コード内のこのような問題を探すのに役立ちますし、 SASS や LESS などのプリプロセッサーを使用すると、クロスブラウザーのコードを生成するのに役立つことがあります。

+ +

ユーザーエージェントの推測に注意

+ +

以上のような手法を使用して、ウェブサイトが画面の大きさやタッチ画面などといった特定の端末特性を検出し、それに適応することが望ましい形です。しかし、これは非現実的である場合があり、ウェブサイトがブラウザーのユーザーエージェント文字列を解析して、デスクトップ、タブレット、携帯電話を区別し、端末ごとに異なるコンテンツを提供することに手を出しがちです。

+ +

これを行う場合は、アルゴリズムが正しく、特定のブラウザーのユーザーエージェント文字列を理解していないために、間違った種類のコンテンツをデバイスに提供していないことを確認してください。ユーザーエージェント文字列を使用して端末の種類を決定するガイドを参照してください。

+ +

複数のブラウザーでのテストTest on multiple browsers

+ +

ウェブサイトを複数のブラウザーでテストしてください。これは複数のプラットフォームでテストをするということです。 — 少なくとも iOS と Android です。

+ + diff --git a/files/ja/web/guide/mobile/mobile-friendliness/index.html b/files/ja/web/guide/mobile/mobile-friendliness/index.html new file mode 100644 index 0000000000..3b01479341 --- /dev/null +++ b/files/ja/web/guide/mobile/mobile-friendliness/index.html @@ -0,0 +1,51 @@ +--- +title: モバイルの親しみやすさ +slug: Web/Guide/Mobile/Mobile-friendliness +tags: + - Mobile + - Web Development +translation_of: Web/Guide/Mobile/Mobile-friendliness +--- +

モバイルの親しみやすさとは？

+ +

あなたが誰に話しているかによって、モバイルの親しみやすさ（friendliness）は多くのことを意味します。サイトのユーザーエクスペリエンスを向上させるための 3 つの目標（プレゼンテーション、コンテンツ、パフォーマンス）の観点から考えると便利です。

+ +

目標 1（プレゼンテーション）

+ +

「さまざまな画面サイズで適切に機能するウェブサイトを作成してください。」

+ +

最近では、携帯電話、タブレット、電子ブックリーダーなど、さまざまな形状のデバイスでウェブにアクセスできます。言うまでもありませんが、複雑な JavaScript アニメーションとマウスオーバー効果でいっぱいの固定幅で 3段組みのレイアウトは、2 インチ幅の画面と小型のプロセッサを搭載した携帯電話では見た目も感じ方もよくありません。タッチスクリーン用のサイズ（英語）の要素を持つ、すっきりと真っ直ぐ並んだページレイアウトの方が、はるかに適切です。最初の目標が、モバイルデバイスのユーザーの生活を楽にするような方法でコンテンツを提示することにあるのはこのためです。

+ +

目標 2（コンテンツ）

+ +

「モバイルユーザー向けにコンテンツを調整してください。」alaska_air_mobile_and_desktop-300x225.png

+ +

ユーザーが携帯電話を使っている場合、ユーザーがあなたのサイトで何をしたいのかを考えてみましょう。その好例が、アラスカエアのウェブサイト（英語）です。彼らのデスクトップサイトは訪問者に旅行を予約させることに焦点を合わせています。ところが、モバイルユーザーは、フライトのチェックインや、フライトが遅れるかどうかを確認することに関心があります。これを反映するようにサイトのコンテンツを調整し、モバイルユーザーのニーズを満たしています。

+ +

目標 3（パフォーマンス）

+ +

「遅い接続でも、ユーザーにスムーズな操作を提供します。」

+ +

近年物事は良くなってきていますが、ワイヤレスデータ接続を介してインターネットを閲覧することは依然としてかなりつらいこともあります。そのため、実際に必要なものだけをユーザーに送信するという、優れたパフォーマンスの実践（英語）を実践することがこれまで以上に重要になります。

+ +

視聴者を知る

+ +

厳密にはモバイルの親しみやすさの定義の一部ではありませんが、対象視聴者が誰であるかを定義することで、これらの目標はより具体的になります。例えば、モバイル戦略を選択するときに、どのブラウザーとデバイスを対象にするかを念頭に置くことが絶対に重要です。視聴者がアーリーアダプターでいっぱいであるならば、規格に優しいブラウザーのタブレットとスマートフォンに集中することができます。一方で、サイトのユーザーの多くが機能が低いブラウザーのデバイスを使用している場合は、実行可能な選択肢として特定の戦略が排除される可能性があります。

+ +

モバイルウェブ開発へのアプローチ

+ +

以下のアプローチは、さまざまな手段でこれらの各目標を達成することを目的としています。

+ + + +
+

原本情報

+ +

もともと 2011 年 5 月 4 日に Mozilla Webdev ブログに Jason Grlicky による「モバイルウェブ開発へのアプローチ 第1部 - モバイルの親しみやすさは？」として公開されました。（英語）

+
+ +

 

diff --git a/files/ja/web/guide/mobile/separate_sites/index.html b/files/ja/web/guide/mobile/separate_sites/index.html new file mode 100644 index 0000000000..2bafcd7453 --- /dev/null +++ b/files/ja/web/guide/mobile/separate_sites/index.html @@ -0,0 +1,51 @@ +--- +title: モバイルとデスクトップで別々のサイト +slug: Web/Guide/Mobile/Separate_sites +tags: + - Mobile + - Web Development +translation_of: Web/Guide/Mobile/Separate_sites +--- +

モバイルウェブ開発への「別々のサイト」アプローチは、モバイルウェブユーザーとデスクトップウェブユーザーのために異なるサイトを作成することを含みます。このアプローチにはプラス面とマイナス面があります。

+ +

長所

+ +

この最初の選択肢はこれまでで最も人気があります — ユーザーエージェント検出を使用して、携帯電話のユーザーを別のモバイルサイト（典型的には m.example.com）に転送する方法です。一言で言えば、このテクニックではサーバー側のロジックを使用してモバイルウェブ開発の 3 つの目標（英語）すべてを一度に解決します — ユーザーのブラウザーが携帯電話のように見える場合は、携帯電話用にフォーマットされ、速度が最適化されたモバイルコンテンツを配信します。

+ +

概念的には単純ですが、特にテンプレートをサポートする CMS またはウェブアプリケーションを使用している場合は、これが既存のサイトに追加する最も簡単な選択肢です。モバイルユーザーにはモバイル固有のコンテンツ、スタイル、およびスクリプトのみが送信されるため、この方法では、ここに示されている他の選択肢のどれよりも最高のパフォーマンスが得られます。最終的に、デスクトップとモバイルでまったく異なるユーザーエクスペリエンスを実現できます — 結局のところ、それらは 2 つの異なるサイトです！

+ +

短所

+ +

残念ながら、このアプローチは欠点がないわけではありません。手始めに、モバイルユーザーに公開したいサイトの各ページに対して 2 つの異なるページを管理しています。CMS を使用している場合は、この重複を最小限に抑えるようにサイトのテンプレートを配置することが可能です。ただし、モバイルとデスクトップでテンプレートに違いがあるときはいつでも、コードには複雑な原因がひそんでいます。同様に、2 セットのフロントエンドロジックをコーディングする必要があるため、これにより新しいサイト機能の実装時間が長くなります。

+ +

ただし、それよりもさらに重要なのは、ユーザーエージェントの検出には本質的に欠陥があり（英語）、将来を見据えたものではないという事実です。新しいブラウザーが登場するたびに、それに対応するようにアルゴリズムを調整する必要があります。そして誤検知は特に怖いです — モバイルサイトを誤ってデスクトップユーザーに配信すると当惑させるかもしれません。

+ +

この選択肢を選ぶのが正しいとき

+ +

sumo_screenshot.pngまず、対象視聴者に古いかローエンドのフィーチャーフォン（英語）のユーザーが含まれている場合は、この戦略をある程度（英語）採用する必要があるかもしれません。これは、一部のフィーチャーフォンのデフォルトブラウザーは、デスクトップを対象としたウェブサイトと同じマークアップをサポートしておらず、代わりに XHTML-MP や古い WML などの形式を理解するためです。

+ +

この要因はさておき、この戦略が他の方法よりも本当に優れているケースが 1 つあります。モバイルデバイスでユーザーに提供したい機能がデスクトップのそれとは極端に異なる場合は、別々のサイトを使用するのが最も実用的な選択（英語）になる可能性があります。これは、完全に完全に別々の HTML、JavaScript、CSS を携帯電話と PC に送信するという選択肢があるからです。

+ +

このアプローチを使用することを余儀なくされるもう 1 つのケースは、何らかの理由で既存のデスクトップサイトを変更できず、100% 別のモバイルサイトを必要とする場合です。理想的ではありませんが、少なくともこの選択肢があります。

+ +

例

+ +

Facebook、YouTube、Digg、Flickr など、あなたが実際に目にする主要なウェブアプリケーションのほとんどがこの方法を選択しています。実際、Mozilla はモバイル版の addons.mozilla.org（AMO）と support.mozilla.org（SUMO）にこの戦略を選択しました。このアプローチの例の背後にあるソースコードを実際に見たい場合は、AMO または SUMO（リンク切れ）の github リポジトリをチェックしてください。

+ +

モバイルウェブ開発へのアプローチ

+ +

モバイルプラットフォーム向けに開発するための背景やその他のアプローチについては、以下の記事を参照してください。

+ + + +
+

原本情報

+ +

この記事は、もともと 2011 年 5 月 13 日に Mozilla Webdev ブログで「モバイルウェブ開発へのアプローチ 第2部 - 別々のサイト」として Jason Grlicky によって公開されました。（英語）

+
+ +

 

diff --git a/files/ja/web/guide/parsing_and_serializing_xml/index.html b/files/ja/web/guide/parsing_and_serializing_xml/index.html new file mode 100644 index 0000000000..9adb073f0c --- /dev/null +++ b/files/ja/web/guide/parsing_and_serializing_xml/index.html @@ -0,0 +1,115 @@ +--- +title: XML のパースとシリアライズ +slug: Web/Guide/Parsing_and_serializing_XML +tags: + - AJAX + - Add-ons + - DOM + - DOM Parsing + - Extensions + - Guide + - HTMLDocument + - JSON + - Parsing + - Parsing XML + - Serializing + - Serializing XML + - XML + - XMLDocument + - XMLHttpRequest +translation_of: Web/Guide/Parsing_and_serializing_XML +--- +

場合によっては、{{Glossary("XML")}} のコンテンツを解析して {{Glossary("DOM")}} ツリーに変換する必要があるでしょう。または逆に、既存の DOM ツリーを XML にシリアライズすることもあります。この記事では、XML のシリアライズと解析の一般的な作業を容易にするため、ウェブプラットフォームで提供されるオブジェクトに注目します。

+ +
+
{{domxref("XMLSerializer")}}
+
DOM ツリーをシリアライズし、XML を含む文字列に変換します。
+
{{domxref("DOMParser")}}
+
XML を含む文字列を解析して DOM ツリーを構築し、入力データに基づいて適切な {{domxref("XMLDocument")}} または {{domxref("Document")}} を返します。
+
{{domxref("XMLHttpRequest")}}
+
URL からコンテンツを読み込みます。XML コンテンツは、XML 自体から構築された DOM ツリーを持つ XML {{domxref("Document")}} オブジェクトとして返されます。
+
XPath
+
XML 文書の特定の部分のアドレスを含む文字列を作成し、それらのアドレスに基づいて XML ノードを特定する技術。
+
+ +

XML 文書を作成する

+ +

次のいずれかの方法で XML 文書を作成します (これは {{domxref("Document")}} のインスタンスです)。

+ +

文字列を DOM ツリーにパースする

+ +

この例では、{{domxref("DOMParser")}} を使用して文字列の XML フラグメントを DOM ツリーに変換します:

+ +
+
const xmlStr = '<a id="a"><b id="b">hey!</b></a>';
+const parser = new DOMParser();
+const dom = parser.parseFromString(xmlStr, "application/xml");
+// print the name of the root element or error message
+console.log(dom.documentElement.nodeName == "parsererror" ? "error while parsing" : dom.documentElement.nodeName);
+
+
+ +

URL にできるリソースを DOM ツリーにパースする

+ +

XMLHttpRequest を使用する

+ +

URL アドレス指定が可能な XML ファイルを読み込み解析して DOM ツリーにするサンプルコードを次に示します:

+ +
const xhr = new XMLHttpRequest();
+
+xhr.onload = function() {
+  dump(xhr.responseXML.documentElement.nodeName);
+}
+
+xhr.onerror = function() {
+  dump("Error while getting XML.");
+}
+
+xhr.open("GET", "example.xml");
+xhr.responseType = "document";
+xhr.send();
+
+ +

xhr オブジェクトの {{domxref("XMLHttpRequest.responseXML", "responseXML")}} フィールドで返される値は XML の解析により構築された {{domxref("Document")}} です。

+ +

document が {{Glossary("HTML")}} である場合、上記のコードは {{domxref("Document")}} を返します。document が XML である場合、返されるオブジェクトは {{domxref("XMLDocument")}} になります。この 2 種類は基本的に同じですが、その違いは主に歴史的な部分であり、差別化にはいくつかの実用的な利点があります。

+ +
+

Note: There is in fact an {{domxref("HTMLDocument")}} interface as well, but it is not necessarily an independent type. In some browsers it is, while in others it is simply an alias for the Document interface.

+
+ +

XML 文書のシリアライズ

+ +

Given a {{domxref("Document")}}, you can serialize the document's DOM tree back into XML using the {{domxref("XMLSerializer.serializeToString()")}} method.

+ +

Use the following approaches to serialize the contents of the XML document you created in the previous section.

+ +

DOM ツリーを文字列にシリアライズ

+ +

First, create a DOM tree as described in How to Create a DOM tree. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}.

+ +

To serialize the DOM tree doc into XML text, call {{domxref("XMLSerializer.serializeToString()")}}:

+ +
const serializer = new XMLSerializer();
+const xmlStr = serializer.serializeToString(doc);
+ +

HTML 文書のシリアライズ

+ +

If the DOM you have is an HTML document, you can serialize using serializeToString(), but there is a simpler option: just use the {{domxref("Element.innerHTML")}} property (if you want just the descendants of the specified node) or the {{domxref("Element.outerHTML")}} property if you want the node and all its descendants.

+ +
const docInnerHtml = document.documentElement.innerHTML;
+
+ +

As a result, docHTML is a {{domxref("DOMString")}} containing the HTML of the contents of the document; that is, the {{HTMLElement("body")}} element's contents.

+ +

You can get HTML corresponding to the <body> and its descendants with this code:

+ +
const docOuterHtml = document.documentElement.outerHTML;
+ +

関連項目

+ + diff --git a/files/ja/web/guide/performance/index.html b/files/ja/web/guide/performance/index.html new file mode 100644 index 0000000000..3b3ab08489 --- /dev/null +++ b/files/ja/web/guide/performance/index.html @@ -0,0 +1,22 @@ +--- +title: 最適化とパフォーマンス +slug: Web/Guide/Performance +tags: + - Landing + - Optimization + - Web + - パフォーマンス +translation_of: Web/Guide/Performance +--- +

最新の Web アプリケーションやサイトを構築するときには、コンテンツのパフォーマンスを良くすることが重要です。つまり、迅速かつ効率的に機能させることです。これにより、強力なデスクトップシステムのユーザーにとっても、より少ない電力のハンドヘルドデバイスにとっても効果的に機能します。Web サイトやブログの掲載結果を確認するためのツールがいくつかあります。最も注目すべきツールは以下の通りです。

+ + + +

上記のリソースには、Web パフォーマンスのベストプラクティスも含まれています。開発プロセス全体を通して Web パフォーマンスを考慮して Web パフォーマンスを優先させることは、ユーザーが可能な限り最高のユーザーエクスペリエンスを得るために重要です。

+ +

{{LandingPageListSubpages}}

diff --git a/files/ja/web/guide/printing/index.html b/files/ja/web/guide/printing/index.html new file mode 100644 index 0000000000..eaf85ea86d --- /dev/null +++ b/files/ja/web/guide/printing/index.html @@ -0,0 +1,124 @@ +--- +title: 印刷 +slug: Web/Guide/Printing +tags: + - DOM + - Guide + - NeedsContent + - NeedsRelocation + - printing +translation_of: Web/Guide/Printing +--- +

コンテンツを印刷するときに、ウェブサイトまたはアプリケーションで使い勝手を向上させたい場合があります。考えられるシナリオはいくつかあります。

+ + + +

他にも印刷処理を管理したい場合がありますが、これらは最も一般的なシナリオの一部です。この記事では、ウェブコンテンツの印刷品質を向上させるためのヒントとテクニックを紹介します。

+ +

印刷スタイルシートの使用

+ +

{{HTMLElement("head")}} タグの中に次のように追加してください。

+ +
<link href="/path/to/print.css" media="print" rel="stylesheet" />
+
+ +

レイアウトを改善するためのメディアクエリの使用

+ +

印刷リクエストの検出

+ +

ブラウザーによっては (Firefox 6 以降や Internet Explorer など) コンテンツが印刷を開始することを判断できるように、 beforeprint および afterprint イベントを送信します。これを使用して、印刷中に表示されるユーザーインターフェイスを調整することができます (例えば、印刷処理中にユーザーインターフェイス要素を表示したり隠したりするなど)。

+ +
メモ: window.onbeforeprint および window.onafterprint を使用してこれらのイベントにハンドラーを割り当てることもできますが、 {{domxref("EventTarget.addEventListener()")}} を使用することをお勧めします。
+ +

例

+ +

よくある例をいくつか紹介します。

+ +

ポップアップウィンドウを開き、終了したら閉じる

+ +

ユーザーがコンテンツを印刷した後に popup window (例えば文書の印刷用など) を自動的に閉じたい場合は、次のようなコードで実現できます。

+ +
<!doctype html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JavaScript Window Close Example </title>
+  <script type="text/javascript">
+    function popuponclick() {
+      my_window = window.open('', 'mywindow', 'status=1,width=350,height=150');
+      my_window.document.write('<html><head><title>Print Me</title></head>');
+      my_window.document.write('<body onafterprint="self.close()">');
+      my_window.document.write('<p>When you print this window, it will close afterward.</p>');
+      my_window.document.write('</body></html>');
+  }
+  </script>
+</head>
+<body>
+  <p>To try out the <code>afterprint</code> event, click the link below to open
+  the window to print. You can also try changing the code to use <code>beforeprint</code>
+  to see the difference.</p>
+  <p><a href="javascript: popuponclick()">Open Popup Window</a></p>
+</body>
+</html>
+
+ +
ライブ例を表示
+ +

外部ページを開かずに印刷する

+ +

外部ページを開かずに印刷できるようにしたい場合は、非表示の {{HTMLElement("iframe")}} (HTMLIFrameElement を参照) を利用し、ユーザーがコンテンツを印刷した後で自動的にそれを削除するようにすることで実現できます。以下の例は、 externalPage.html という名前のファイルを印刷することができる例です。

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function closePrint () {
+  document.body.removeChild(this.__container__);
+}
+
+function setPrint () {
+  this.contentWindow.__container__ = this;
+  this.contentWindow.onbeforeunload = closePrint;
+  this.contentWindow.onafterprint = closePrint;
+  this.contentWindow.focus(); // Required for IE
+  this.contentWindow.print();
+}
+
+function printPage (sURL) {
+  var oHiddFrame = document.createElement("iframe");
+  oHiddFrame.onload = setPrint;
+  oHiddFrame.style.position = "fixed";
+  oHiddFrame.style.right = "0";
+  oHiddFrame.style.bottom = "0";
+  oHiddFrame.style.width = "0";
+  oHiddFrame.style.height = "0";
+  oHiddFrame.style.border = "0";
+  oHiddFrame.src = sURL;
+  document.body.appendChild(oHiddFrame);
+}
+</script>
+</head>
+
+<body>
+  <p><span onclick="printPage('externalPage.html');" style="cursor:pointer;text-decoration:underline;color:#0000ff;">Print external page!</span></p>
+</body>
+</html>
+
+ +
メモ: 古いバージョン Internet Explorer は、非表示の {{HTMLElement("iframe")}} の印刷することができません。
+ +

関連情報

+ + diff --git a/files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html b/files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html new file mode 100644 index 0000000000..524153a17e --- /dev/null +++ b/files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html @@ -0,0 +1,272 @@ +--- +title: Page Visibility API +slug: Web/Guide/User_experience/Using_the_Page_Visibility_API +tags: + - DOM + - Intermediate + - Tutorials +translation_of: Web/API/Page_Visibility_API +--- +
{{DefaultAPISidebar("Page Visibility API")}}
+ +

タブを使って閲覧している場合、どのウェブページもバックグラウンドにあってユーザーから見えていない場合があります。 Page Visibility API では、現在ページが見えているかどうかを調べる機能とともに、文書が表示されたり非表示になったりした時を監視することができるイベントを提供します。

+ +
+

メモ: The Page Visibility API は、文書が表示されていない時に不必要なタスクの実行を抑止することで、リソースを節約したり実行効率を上げたりするために特に有用です。

+
+ +

ユーザーがウィンドウを最小化したり他のタブに切り替えたりした時、 API は {{event("visibilitychange")}} イベントを送信してリスナーにページの状態が変化したことを知らせます。イベントを検出していくつかの操作を実行したり、様々な動作をしたりすることができます。例えば、ウェブアプリで動画を再生している場合、ユーザーがタブをバックグラウンドにした場合に動画を一時停止させ、ユーザーがこのタブに戻ったときに再生を再開させたりすることができます。ユーザーは動画の位置に迷うことがなく、動画の音声が新しく前景になったタブの音声を邪魔せず、ユーザーがその間に動画を見落とすことがなくなります。

+ +

{{HTMLElement("iframe")}} の可視状態は、親文書と同じになります。 CSS プロパティにより ({{cssxref("display", "display: none;")}} のように) <iframe> を隠しても visibility のイベントは発生せず、またフレームに含まれる文書の状態も変わりません。

+ +

使用例

+ +

Page Visibility API の使用例をいくつか考えてみましょう。

+ + + +

以前、開発者はこれを検出するために不完全な代替手段を使用していました。例えば window で onblur/onfocus ハンドラーを登録することでページがアクティブではないときを知る助けになりますが、ページがユーザーから隠された状態であることは知らせてくれません。 Page Visibility API はこれを解決します。

+ +
+

メモ: {{domxref("GlobalEventHandlers.onblur", "onblur")}} 及び {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} はユーザーがウィンドウを切り替えたことを教えてくれますが、非表示にしたという意味になるとは限りません。ページが非表示になるのは、ユーザーがタブを切り替えたり、タブを含むブラウザーウィンドウを最小化したりした時だけです。

+
+ +

Policies in place to aid background page performance

+ +

Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include:

+ + + +

Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden.

+ + + +

例

+ +

ライブサンプルをご覧ください (音声つき動画あり)。

+ +

この例では別のタブに切り替えたときに動画再生を一時停止、また元のタブに戻った時に再生を再開しており、以下のコードで作られました:

+ +
// hidden プロパティおよび可視性の変更イベントの名前を設定
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 や Firefox 18 以降でサポート
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// ページが隠れたとき、動画再生を一時停止する。
+// ページが表示されたとき、動画を再生する。
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// ブラウザーが addEventListener または Page Visibility API をサポートしない場合に警告
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Page Visibility の変更を扱う
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // 動画が一時停止されたときに、タイトルを設定する。
+  // 一時停止したことを示す。
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // 動画を再生するときに、タイトルを設定する。
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+
+ +

Document インターフェイスに追加されたプロパティ

+ +

The Page Visibility API adds the following properties to the {{domxref("Document")}} interface:

+ +
+
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
+
ページがユーザーから隠された状態であると思われる場合に true を、そうでない場合に false を返します。
+
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
+
文書の現在の可視状態を示す {{domxref("DOMString")}} です。取りうる値は以下の通りです。 +
+
visible
+
ページのコンテンツは少なくとも部分的に可視状態です。実際は、最小化されていないウィンドウのフォアグラウンドのタブにページがあることを意味します。
+
hidden
+
ページのコンテンツはユーザーから見えていません。実際は、文書がバックグラウンドのタブか最小化されているウィンドウにある、あるいは OS のスクリーンがロックされていることを意味します。
+
prerender
+
ページのコンテンツはプリレンダリングされており、ユーザーから見えていません (document.hidden では隠されているとみなされます)。文書は prerender の状態から始まるかもしれませんが、プリレンダリングは1つの文書は1回しか行われないので、他の状態からこの状態に移ることはありません。 +
メモ: すべてのブラウザーがプリレンダリングに対応しているわけではありません。
+
+
unloaded
+
ページがメモリからアンロードされている途中です。 +
メモ: すべてのブラウザーが unloaded の値に対応しているわけではありません。
+
+
+
+
{{domxref("Document.onvisibilitychange")}}
+
{{event("visibilitychange")}} イベントが発生したときに呼び出されるコードを提供する {{domxref("EventListener")}} です。
+
+ +
//startSimulation および pauseSimulation は別途定義される
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}初回定義
+ +

ブラウザーの対応

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本対応13 {{property_prefix("webkit")}}
+ 33		{{CompatGeckoDesktop(18)}}[2]1012.10[1]7
onvisibilitychange{{CompatVersionUnknown}}{{CompatGeckoDesktop(56)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Budget-based background timeout throttling57{{CompatGeckoDesktop(58)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本対応5.0[3]{{CompatGeckoMobile(18)}}[2]1012.10[1]7[4]
onvisibilitychange{{CompatVersionUnknown}}{{CompatGeckoMobile(56)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Budget-based background timeout throttling{{CompatNo}}{{CompatGeckoMobile(58)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] ブラウザーウィンドウを最小化しても visibilitychange イベントは発生せず、また hidden は true に変わりません。

+ +

[2] Firefox 10 から Firefox 51 まで、このプロパティは -moz- 接頭辞を使用することができました。

+ +

[3] Android 4.4 はこの機能に webkit の接頭辞付きで対応しています。

+ +

[4] From iOS 11.0.2 onwards, the values are not correct in standalone mode (when you press "Add to Homescreen") and when the screen is locked (you pressed the power button). The value for hidden is false and visibilityState is visible.

+ +

関連情報

+ + diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html new file mode 100644 index 0000000000..407b717dad --- /dev/null +++ b/files/ja/web/guide/user_input_methods/index.html @@ -0,0 +1,197 @@ +--- +title: ユーザ入力とコントロール +slug: Web/Guide/User_input_methods +tags: + - Screen Orientation + - contenteditable + - drag and drop + - fullscreen + - keyboard + - mouse + - pointer lock + - touch + - user input +translation_of: Web/Guide/User_input_methods +--- +
+

現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術についてより詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、タッチイベント、ポインターロック API、Screen Orientation API、全画面 API、ドラッグ＆ドロップなどがあります。

+
+ +

ユーザー入力とコントロールのワークフロー

+ +

The following diagram illustrates the typical workflow for implementing user input mechanisms:

+ +

+ +

First of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on. Once you decided the input mechanisms, you can control them using tools offered by the web platform or JavaScript libraries.

+ +

推奨事項

+ +

Available input mechanisms depend on the capabilities of the device running the application:

+ + + +

The following is a set of recommendations and best practices for using such tools in Open Web Apps.

+ +

Decide what input mechanism you’re using

+ +

キーボード

+ +

Keyboard input can be controlled by your app. For example if you want to add controls when any key gets pressed, you need to add an event listener on the window object:

+ +
window.addEventListener("keydown", handleKeyDown, true);
+window.addEventListener("keyup", handleKeyUp, true);
+ +

where handleKeyDown and handleKeyUp are the functions implementing the controls about the keydown and keyup events.

+ +
+

注: Have a look at the Events reference and {{domxref("KeyboardEvent")}} guide to find out more about keyboard events.

+
+ +

マウス

+ +

The events occurring when the user interacts with a pointing device such as a mouse are represented by the {{domxref("MouseEvent")}} DOM Interface. Common mouse events include click, dblclick, mouseup, and mousedown. The list of all events using the Mouse Event Interface is provided in the Events reference.

+ +

When the input device is a mouse, you can also control user input through the Pointer Lock API and implement Drag & Drop (see below).

+ +

指でのタッチ

+ +

When developing web applications meant to be installed on touchscreen devices, it’s a good practice to take into consideration the different capabilities in terms of screen resolution and user input. Touch events can help you implement interactive elements and common interaction gestures on touchscreen devices.

+ +

If you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired:

+ +
element.addEventListener("touchstart", handleStart, false);
+element.addEventListener("touchcancel", handleCancel, false);
+element.addEventListener("touchend", handleEnd, false);
+element.addEventListener("touchmove", handleMove, false);
+ +

where element is the DOM element you want to register the touch events on.

+ +
+

注: For further information about what you can do with touch events, please read our touch events guide.

+
+ +

ポインターイベント

+ +

When dealing with devices that incorporate multiple forms of input, like mouse, finger touch and pen input, it might be hard to develop a solution that works for all these different control mechanisms. Pointer Events help developers more easily manage events across devices by normalizing the handling of each one. A pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device. The events for handling generic pointer input look a lot like those for mouse: pointerdown, pointermove, pointerup, pointerover, pointerout, etc.

+ +
+

注: Pointer Events are not widely supported yet, but a pointer.js polyfill is available on Mozilla Github.

+
+ +

コントロールの実装

+ +

ポインターロック

+ +

In some cases, typically game development, you might need to access mouse events even when the cursor goes past the boundary of the browser or screen: the {{domxref("Pointer_Lock_API")}} gives you full control of the pointing device.

+ +

This is the code to request pointer lock on an element:

+ +
element.requestPointerLock();
+ +
+

注: For a full tutorial and reference, read our {{domxref("Pointer_Lock_API")}} page.

+
+ +

画面の回転

+ +

When screen orientation matters for your application, you can read the screen orientation state, be informed when this state changes, and able to lock the screen orientation to a specific state (usually portrait or landscape) through the Screen Orientation API.

+ +

Orientation data can be retrieved through the {{domxref("screen.orientation")}} attribute or through the orientation media feature. When screen.orientation changes, the {{domxref("screen.orientationchange")}} event is fired on the screen object. Locking the screen orientation is made possible by invoking the {{domxref("screen.lockOrientation")}} method, while the {{domxref("screen.unlockOrientation")}} method removes all the previous screen locks that have been set.

+ +
+

注: More information about the Screen Orientation API can be found in Managing screen orientation.

+
+ +

全画面

+ +

You might need to present an element of your application (such as a {{ htmlelement("video") }}, for example) in fullscreen mode. You can achieve this by calling {{domxref("Element.requestFullscreen()")}} on that element. Bear in mind that many browsers still implement this with a vendor prefix, so you will probably need to fork your code something like this:

+ +
var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+} else if (elem.msRequestFullscreen) {
+  elem.msRequestFullscreen();
+} else if (elem.mozRequestFullScreen) {
+  elem.mozRequestFullScreen();
+} else if (elem.webkitRequestFullscreen) {
+  elem.webkitRequestFullscreen();
+}
+ +
+

注: To find more out about adding fullscreen functionality your application, read our documentation about using fullscreen mode.

+
+ +

ドラッグ＆ドロップ

+ +

Drag & Drop allows your application’s users to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

+ +

Here is an example that allows a section of content to be dragged.

+ +
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
+    This text <strong>may</strong> be dragged.
+
</div>
+ +

in which we:

+ + + +
+

注: You can find more information in the MDN Drag & Drop documentation.

+
+ +

contentEditable

+ +

In open web apps any DOM element can be made directly editable using the contenteditable attribute.

+ +
<div contenteditable="true">
+    This text can be edited by the user.
+</div>
+ +
+

注: Compatibility information, examples and other resources can be found in the Content Editable guide.

+
+ +

例

+ +
+
Tracking multiple touch points at a time
+
This example tracks multiple touch points at a time, allowing the user to draw in a {{htmlelement("canvas")}} with more than one finger at a time. It will only work on a browser that supports touch events.
+
Simple pointer lock demo
+
We've written a simple pointer lock demo to show you how to use it to set up a simple control system. The demo uses JavaScript to draw a ball inside a {{htmlelement("canvas")}} element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse.
+
contentEditable demo
+
This is a working example showing how contenteditable can be used to create an editable document section, the state of which is then saved using LocalStorage.
+
+ +

チュートリアル

+ + + +

関連情報

+ + diff --git a/files/ja/web/guide/using_formdata_objects/index.html b/files/ja/web/guide/using_formdata_objects/index.html new file mode 100644 index 0000000000..a353cae222 --- /dev/null +++ b/files/ja/web/guide/using_formdata_objects/index.html @@ -0,0 +1,144 @@ +--- +title: FormData オブジェクトの利用 +slug: Web/Guide/Using_FormData_Objects +tags: + - Advanced + - Example + - Forms + - Guide + - HTML + - Web +translation_of: Web/API/FormData/Using_FormData_Objects +--- +

FormData オブジェクトは、XMLHttpRequest を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが multipart/form-data に設定されている場合に、{{domxref("HTMLFormElement.submit","submit()")}} メソッドで送信する際に使用するデータと同じ形式です。

+ +

スクラッチから FormData オブジェクトを作成する

+ +

以下のように FormData オブジェクトはあなた自身で作成でき、インスタンス化したら {{domxref("FormData.append","append()")}} メソッドを呼び出すことでフィールドに付加します:

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // 数値 123456 は直ちに文字列 "123456" へ変換されます
+
+// HTML の file input でユーザが選択したファイル
+formData.append("userfile", fileInputElement.files[0]);
+
+// ファイルのような JavaScript オブジェクト
+var content = '<a id="a"><b id="b">hey!</b></a>'; // 新しいファイルのボディ...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+
+ +
注記: フィールド "userfile" および "webmasterfile" はどちらも、ファイルを含んでいます。フィールド "accountnum" に与えた数値は FormData.append() メソッドにより直ちに文字列へ変換されます (フィールドの値として {{domxref("Blob")}}、{{domxref("File")}}、または文字列をとることができます: 値が Blob でもファイルでもない場合は、文字列に変換されます)。
+ +

このサンプルでは "username"、"accountnum"、"userfile"、"webmasterfile" という名前のフィールドの値を持つ FormData のインスタンスを作成しており、またフォームのデータを送信するために XMLHttpRequest の send() メソッドを使用しています。フィールド "webmasterfile" は {{domxref("Blob")}} です。Blob オブジェクトはファイルに似たオブジェクトで、イミュータブルな生デーです。Blob は必ずしも JavaScript ネイティブ形式のデータを表すとは限りません。{{domxref("File")}} インターフェイスは Blob を基にしており、blob の機能性を継承しつつユーザのシステムにあるファイル向けのサポートを拡張しています。Blob を作成するために、{{domxref("Blob.Blob","Blob()")}} コンストラクタを呼び出すことができます。

+ +

HTML フォームから FormData オブジェクトを取り出す

+ +

既存の {{HTMLElement("form")}} のデータを含む FormData オブジェクトを構築するために、FormData オブジェクトを作成する際にその form 要素を指定します:

+ +
var formData = new FormData(someFormElement);
+
+ +

例:

+ +
var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+
+ +

以下のように、FormData オブジェクトをフォームより取得してから送信するまでの間に、追加のデータを付加することもできます:

+ +
var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);
+ +

これにより、必ずしもユーザが編集可能である必要がない追加情報を含めるために、送信前にフォームデータを拡張することができます。

+ +

FormData オブジェクトを使用してファイルを送信する

+ +

FormData を使用してファイルを送信することもできます。type が "file" である {{HTMLElement("input")}} 要素を、{{htmlelement("form")}} に含めます:

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Custom file label:</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Stash the file!" />
+</form>
+<div></div>
+
+ +

そして、以下のようなコードを使用して送信できます:

+ +
var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+
+ +
+

注記: フォームへの参照を渡した場合は、open() の呼び出しで指定したメソッドよりもフォームで指定したメソッドを優先します。

+
+ +

以下のように、{{domxref("FormData")}} オブジェクトへ直接 {{domxref("File")}} や {{domxref("Blob")}} を追加することもできます:

+ +
data.append("myfile", myBlob, "filename.txt");
+
+ +

{{domxref("FormData.append","append()")}} メソッドを使用する際は省略可能な第 3 引数を使用して、Content-Disposition ヘッダに含めるファイル名を渡すことができます。これはサーバへ送信されます。ファイル名を指定しない (あるいは引数がサポートされない) 場合は、"blob" という名前を使用します。

+ +

正しいオプションを設定することで、jQuery と共に FormData を使用することもできます:

+ +
var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // jQuery がデータを処理しないよう指定
+  contentType: false   // jQuery が contentType を設定しないよう指定
+});
+
+ +

FormData オブジェクトを使用せずに AJAX でフォームやファイルを送信する

+ +

FormData オブジェクトを使用せずに、AJAX でシリアライズや送信する方法を知りたい場合は、 こちらの節をご覧ください。

+ +

関連情報

+ + diff --git a/files/ja/web/guide/woff/index.html b/files/ja/web/guide/woff/index.html new file mode 100644 index 0000000000..d3de610467 --- /dev/null +++ b/files/ja/web/guide/woff/index.html @@ -0,0 +1,66 @@ +--- +title: WOFF (Web Open Font Format) +slug: Web/Guide/WOFF +tags: + - CSS + - Fonts + - WOFF +translation_of: Web/Guide/WOFF +--- +

WOFF (Web Open Font Format) は、Mozilla が Type Supply や LettError、他の組織と提携して開発した新しい Web フォント形式です。これは、TrueType および OpenType, Open Font Format に使用されているテーブルベースの sfnt 構造と同じ圧縮されたバージョンを使用しています。WOFF には、これにメタデータと個人利用のためのデータ構造が追加されており、作成者とベンダーがライセンス情報を書き込むことができる予約フィールドも含まれています。

+ +

WOFF の使用には 3 つの利点があります:

+ +
    +
  1. フォントデータが圧縮されているため、サイトで WOFF を使用すると、無圧縮の TrueType や OpenType ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮されます。
    2. +
  2. 自社の TrueType や OpenType 形式のフォントが Web 上で使用されることを許可したくない多くのフォントベンダーは、WOFF 形式のフォントなら使用を許可できるでしょう。これは、サイトのデザイナーに対してフォントの可用性を高めることになります。
    3. +
  3. プロプライエタリなブラウザベンダーもフリーソフトウェアのブラウザベンダーも、WOFF 形式を好んでいます。つまり、他の既存のフォント形式と異なり、WOFF 形式のフォントが、Web のための真にユニバーサルで相互運用が可能なフォント形式になる可能性があります。
    4. +
+ +

WOFF と WOFF2 という、2 つのバージョンの WOFF があります。これらの主な違いは、使用する圧縮アルゴリズムです。{{cssxref("@font-face")}} では format 記述子で、それぞれ 'woff' と 'woff2' で識別されます。

+ +

WOFF の使用

+ +

Web コンテンツのテキストに WOFF フォントを使用するには、{{cssxref("@font-face")}} CSS プロパティを使用します。これは、OpenType や TrueType 形式のフォントの使用方法と同じです。WOFF 形式のフォントは圧縮されているため、より効率的にコンテンツがダウンロードされるでしょう。

+ +

WOFF フォントを扱うためのツール

+ + + +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('WOFF2.0', '', '')}}{{Spec2('WOFF2.0')}}新しい圧縮アルゴリズム
{{SpecName('WOFF1.0', '', '')}}{{Spec2('WOFF1.0')}}最初期の仕様
+ +

ブラウザ実装状況

+ + + +

{{Compat("css.at-rules.font-face")}}

+ +

関連情報

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