recursal/MDN huggingface dataset:
ゲーム制御機構の搭載
==========

ゲーム開発プラットフォームとしての HTML5 の主な利点の 1 つは、さまざまなプラットフォームおよび端末上で実行できることです。端末間の違いを合理化することは、特に異なるコンテキストに適切なコントロールを提供するときには、複数の課題を生み出します。このシリーズの記事では、タッチ画面のスマートフォン、マウス、キーボード、そしてゲームパッドなどのあまり一般的ではないメカニズムを使用してプレイできるゲームの構築方法について説明します。

事例研究
----

ここでは Captain Rogers: Battle at Andromeda demo を例にします。

![Captain Rogers: Battle at Andromeda - cover of the game containing Enclave Games and Blackmoon Design logos, Roger's space ship and title of the game.](/ja/docs/Games/Techniques/Control_mechanisms/captainrogers2-cover.png)

Captain Rogers は Phaser フレームワークを使用して作成されています。現在、 JavaScript でシンプルな 2D ゲームを開発するための最も人気のあるツールですが、これらの記事に含まれる知識を純粋な JavaScript または他のフレームワークでゲームを構築する際に再利用することはかなり簡単なはずです。 Phaser の入門書をお探しなら、2D breakout game using Phaser チュートリアルをチェックしてみてください。

以下の記事では、モバイルのタッチ操作から、デスクトップのキーボード／マウス／ゲームパッド、そしてテレビのリモコン、ラップトップの前で叫んだり手を振ったり、バナナを握ったりといった型破りなものまで、さまざまなプラットフォームに対応するために、Captain Rogers にさまざまな操作機構を搭載する方法を紹介します。

環境の設定
-----

まず、ゲームのフォルダー構造、JavaScriptファイル、ゲーム内の状態を手短に説明し、どこで何が起きているのかを把握します。ゲームのフォルダーは以下のような感じです。

![Captain Rogers: Battle at Andromeda - folder structure of the games' project containing JavaScript sources, images and fonts.](/ja/docs/Games/Techniques/Control_mechanisms/captainrogers2-folderstructure.png)

ご覧のように、画像、JavaScript ファイル、フォント、効果音用のフォルダーがあります。 `src` フォルダーには、別個の状態として分割された JavaScript ファイル、 `Boot.js`, `Preloader.js`, `MainMenu.js`, `Game.js` があり、これらはこの順番でインデックスファイルに読み込まれます。最初のものは Phaser を初期化し、 2 つ目はすべての資産を先読みさせ、 3 つ目はプレーヤーを歓迎するメインメニューを制御し、 4 つ目は実際のゲームプレイを制御するものです。

状態にはそれぞれ `preload()`, `create()`, `update()` という既定のメソッドがあります。最初のメソッドは必要な資産を先読みするために必要で、`create()` は状態が開始されると実行され、`update()` はフレームごとに実行されます。

例えば、`create()` 関数でボタンを定義することができます。


```js
create() {
  // …
  const buttonEnclave = this.add.button(10, 10, 'logo-enclave', this.clickEnclave, this);
  // …
}
```


ゲーム開始時に一度だけ作成され、クリックされるとそれに割り当てられた `this.clickEnclave()` アクションを実行しますが、 `update()` 関数でマウスのポインタの値を使用してアクションを作成することもできます。


```js
update() {
  // …
  if(this.game.input.mousePointer.isDown) {
      // do something
  }
  // …
}
```


これはマウスボタンが押されるたびに実行され、ゲームの各フレームで入力の `isDown` という論理変数と照合されます。

これで、プロジェクトの構成がある程度理解できたと思います。今回は、主に `MainMenu.js` と `Game.js` ファイルで遊びます。`create()` と `update()` メソッド内のコードについては、後日、より詳しく説明したいと思います。

純粋な JavaScript のデモ
------------------

また、小さなオンラインデモ と GitHub で利用可能な完全なソースコードがあり、記事で記述した制御機構の基本的な対応は、純粋な JavaScript で実装されています。それは以下の与えられた記事自体で説明されますが、あなたはすでにそれで遊ぶことができ、学習の目的のためにコードを好きなように使用することができます。

記事
--

HTML5 が真にマルチプラットフォームであるため、JavaScript はモバイルゲームに最適です。以下の記事はすべて、さまざまな制御機構とインターフェイスするために提供される API に焦点を当てています。

1. モバイルのタッチ制御 (en-US) — 最初の記事は、モバイルファーストの考え方が浸透していることから、タッチでキックオフします。
2. デスクトップ PC のマウスとキーボードによる操作 (en-US) — デスクトップ／ノートパソコンでプレイする場合、ゲームに受け入れられるレベルのアクセシビリティを提供するためには、キーボードとマウスによる操作性を提供することが不可欠です。
3. デスクトップ PC のゲームパッドによる操作 (en-US) — ゲームパッド API は、デスクトップ PC やノート PC のウェブアプリケーションを操作するためにゲームパッドを使用することを可能にし、コンソール感覚を提供します。
4. 非従来型制御 (en-US) — 最後の記事では、実験的なものからちょっとクレイジーなものまで、ゲームを使用するとは思えないような、型破りな操作機構を紹介しています。
PlayCanvas を使った基本的なデモの作成
========================

PlayCanvas は有名な 3D WebGL ゲームエンジンです 。もともと Will Eastcott と Dave Evans によって作成されました。 GitHub 上でオープンソースとなっており、オンラインで使用できるエディターと優れたドキュメントが特徴です。 オンラインエディターは、パブリックプロジェクトの場合チームメンバー 2 人まで無料で使用できますが、商用でより多くの開発者が参加できるプライベートプロジェクトを希望される場合は 有償プランもあります。

![PlayCanvas website.](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/playcanvas-cover.png)

ゲームやデモ
------

PlayCanvas では、機能紹介を兼ねたデモをいくつか公開しています。

* Tanx は、マルチプレイヤーのタンクゲームで自分のタンクを乗り回したり、他のプレイヤーを射撃したりするゲームです。
* Swooop は、航空機を操縦して魔法の島を飛び回り、宝石や燃料を集めるゲームです。
* Star Lord や BMW i8 のようなビジュアリゼーションもエンジンを活用し、その機能を紹介しています。

![A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8.](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/playcanvas-demos.png)

**メモ:** さらに事例をご覧になる場合は特集されているデモも確認してください。

エンジンとエディターの違い
-------------

エンジンそのものは、 JavaScript ファイルを HTML に直接入れ込むことで標準ライブラリーとして使用でき、すぐにコーディングすることができます。さらに、 PlayCanvas のツールセットにはオンラインエディターも搭載されています。このオンラインエディターでは、シーンにコンポーネントをドラッグ & ドロップすることができます。コーディングの知識よりも、デザインの知識の方が豊富な方がゲームやシーンを要するアプリを作成する場合など、この機能は大変便利なものとなります。 エディターとエンジンは異なるアプローチですが、最終的な目的の達成という面では同等です。

PlayCanvas エンジン
---------------

 モダンブラウザー向けに構築されている PlayCanvas は、リソースローディング、エンティティシステムやコンポーネントシステム、高度なグラフィック操作、コリジョン、物理エンジン ( ammo.js
 でのビルド)、オーディオ、様々なデバイス（ゲームパッドを含む）からの入力のコントロールを扱う設備を搭載したフル装備の 3D エンジンです。 なかなかの機能が揃っているのではないでしょうか。実際に使用されているところを見てみましょう。詳細については PlayCanvas でベーシックデモをビルドする (en-US)を参照ください。

PlayCanvas エディター
----------------

ゼロからコーディングするのではなく、オンラインエディターを使用するという手もあります。 コーディングが得意というわけでない方でも、心地よく使用いただける環境になっています。 詳細は PlayCanvas でベーシックデモをビルドする (en-US)を参照ください。

まとめ
---

もちろん、自分がどういう方法でビルドしたいか、それが一番です。デザイナーであればオンラインエディターがやりやすいかもしれませんし、プログラマーであればコーディング環境で自らコントロールできるエンジンのソースファイルを好むかもしれません。 選択肢があり、最もいいと思うツールを選ぶことができるのがいい点です。
XML: Extensible Markup Language
===============================

The **Extensible Markup Language** is a strict serialisation of the Document Object Model.

XML のイントロダクション概要: この記事は、'eXtensible Markup Language' (XML、拡張可能マークアップ言語) を紹介し、その使い道について XML は HTML に似たマークアップ言語です。 これは Extensible Markup Language の略で、汎用マークアップ言語として W3C が推奨する仕様です。つまり、他のマークアップ言語とは異なり、XML は事前定義されていないため、独自のタグを定義する必要があります。この言語の主な目的は、インターネットなどのさまざまなシステム間でデータを共有することです。

XML のパースとシリアライズ場合によっては、XML のコンテンツを解析して DOM ツリーに変換する必要があるでしょう。または逆に、既存の DOM ツリーを XML にシリアライズすることもあります。この記事では、XML のシリアライズと解析の一般的な作業を容易にするため、ウェブプラットフォームで提供されるオブジェクトに注目します。
開発者ガイド
======

**これらの記事は、特定の技術や API を利用するための how-to 情報を提供します。**

HTML 学習エリア

**HTML** (ハイパーテキスト・マークアップ・ランゲージ／Hypertext Markup Language) はほぼすべてのウェブコンテンツの中心となる言語です。ブラウザー画面上で目にする大半は、基本的に HTML を用いて記述されています。

CSS 学習エリア

CSS (Cascading Style Sheets) とは HTML 内に書かれた文書の見た目を記述するスタイルシート言語です。

音声と動画の配信

ウェブ上で音声や動画を届ける手段には、「静的な」データからアダプティブライブストリームに至るまでたくさんのものものがあります。この記事は、ウェブベースのメディアを伝送する様々な仕組みや一般的なブラウザーとの互換性について学ぶ最初のステップとして作られたものです。

音声と動画の加工

様々な技術を組み合わせて新たな形を作ることができるのがウェブの美しいところです。ブラウザーには音声や動画に対する諸々の機能が組み込まれていますから、`<canvas>`や WebGL、Web Audio API といった技術を使い、直接的に音声や動画を編集することができます。例えば、エコーや圧縮効果を音声に加えたり、白黒やセピアのフィルターを動画に加えたりできます。この記事では、何をすべきかを説明するリファレンスを提供しています。

イベント開発者ガイド (en-US)

イベントは、ウェブ上での処理中に起こる様々な出来事の非同期処理のためのデザインパターンや、様々なタイプの大量の出来事の名付け・特徴化・利用のために必要です。

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()` メソッドで送信する際に使用するデータと同じ形式です。

ユーザ入力とコントロール

現代的なウェブでのユーザー入力は、単純なマウスとキーボードだけでは語れません。例えばタッチスクリーンなどを考慮する必要があります。この記事では、オープンなウェブアプリがユーザーの入力に対応したり操作を設計したりするにあたっての推奨事項を、よくある質問や、現実的な例、背景にある技術についてのより詳しく知りたい人向けの情報とともに紹介しています。

用語集

ウェブやインターネットに関連する多数の専門用語の定義。

関連情報
----

* ウェブ技術リファレンス
WebDriver
=========

WebDriver は、ユーザーエージェントの観察と制御を可能にする遠隔制御インターフェイスです。プロセスの外のプログラムがウェブブラウザーの動作を遠隔で指示する方法として、プラットフォームと言語に中立なワイヤープロトコルを提供します。

ユーザーに一貫した使い勝手を提供するには、異なるプラットフォーム上の多くのブラウザーで相互に実行できる命令セットを書くことができることが重要です。ウェブプラットフォームでの新しい開発の波、端末の多様性の増加、テクノロジー間の実際の相互運用性の要求を背景に、 WebDriver はクロスブラウザーテストのためののツールを提供します。

提供されるものは、ウェブ文書内の DOM 要素を検出したり操作したり、ユーザーエージェントの動作を制御したりするためのインターフェイスです。これは主に、ユーザーエージェントを別な制御プロセスから自動制御するテストを、ウェブ作者が書くことができるようにすることが目的ですが、場合によってはブラウザー内のスクリプトが — おそらく他の — ブラウザーを制御するために使用することもできます。

使い方
---

それでは、 WebDriver で何が実現でき、どのように見えるのでしょうか。 WebDriver はプログラミング言語に中立なので、この質問に対する答えは、使用している WebDriver クライアントと言語の選択によって異なります。

しかし、 Python で書かれた有名なクライアントを使用すると、 WebDriver との対話は次のようになるでしょう。


```python
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support.expected_conditions import presence_of_element_located

with webdriver.Firefox() as driver:

    wait = WebDriverWait(driver, 10)
    driver.get("http://google.com/ncr")
    driver.find_element_by_name("q").send_keys("cheese" + Keys.RETURN)

    wait.until(presence_of_element_located((By.CSS_SELECTOR, "h3>a")))

    results = driver.find_elements_by_css_selector("h3>a")
    for i, result in results.iteritems():
        print(f"#{i}: {result.text} ({result.get\_property('href')})")
```


これは次のような出力結果になります。
```

#1 Cheese - Wikipedia (https://en.wikipedia.org/wiki/Cheese)
```

リファレンス
------

### コマンド

コマンド (en-US)

### 種類

種類

* Error object (en-US)
* Timeouts object (en-US)
* WebElement
* WebWindow
### 能力

能力 (en-US)

### エラー

エラー (en-US)

仕様書
---

* WebDriver
関連情報
----

* クロスブラウザーテスト
* Selenium documentation
XPath
=====

XPath は XML Path Language の略称です。非 XML 構文を使って、柔軟な方法で XML 文書の様々な部分をアドレッシングする（指し示す）ことができます。さらに、文書中で指し示されたノードがパターンに一致するかどうかの判定を行うこともできます。

XPath は主に XSLT で使われていますが、 HTML や SVG のような XML 風の言語の文書の DOM においても `XPathExpression` を用いることで、 `Document.getElementById()` や `Document.querySelectorAll()` メソッドや `Node.childNodes` プロパティ、その他の DOM コア機能に依存することなく、はるかにパワフルな方法でたどることができます。

XPath は XML 文書の階層構造を辿るために（URL のような）パス表記を使います。また、URI や XML 属性値の中で使えるように非 XML 構文を採用しています。

**メモ:** XPath の対応状況は大きく異なります。 Firefox は合理的にうまく対応しています（対応をさらに改善する計画はありません）が、他のブラウザーではそれほど実装されていません。ポリフィルが必要な場合は、js-xpath または wicked-good-xpath を検討してください。

ドキュメント
------

JavaScript からの XPath 利用入門

XSLT 以外で XPath を使用する方法です。

XPath:Axes

XPath 仕様で定められている軸 (Axis) の一覧とその定義。軸はノード間の関係性を記述するのに使われます。

XPath:Functions

コア XPath 関数及び XSLT 固有の追加 XPath 関数の一覧とその定義。

XSLT による XML の変換

XSLT では変換したい XML 文書内のコードの一部を指し示すのに XPath を使います。

XPath スニペット

これらは DOM Level 3 XPath API に基づいて、独自のコードで使用できる JavaScript ユーティリティ関数です。

What is XSLT? （英語）

XSLT と XPath の予備知識が無い人を対象に、その背景や構造、概念、初歩的な専門用語を紹介する広範囲な入門ガイド。

ツール
---

XPath tester

オンラインの XPath ビルダー／デバッガーです。

関連事項
----

* XSLT, XML, DOM
* CSS セレクターと XPath の比較
アクセシビリティ
========

ウェブ開発におけるアクセシビリティとは、何らかの理由により能力に制約がある場合でも、可能な限り多くの人々がウェブサイトを使用できるようにすることを意味します。この記事では、アクセシビリティを考慮したコンテンツを開発するための情報を提供します。

多くの人にとって、技術は物事を容易にします。障碍のある人にとっては、テクノロジーは物事を可能にしてくれます。アクセシビリティとは、個人の身体的・認知的能力やウェブへのアクセス方法に関わらず、可能な限りアクセス可能なコンテンツを開発することです。

「ハードウェア、ソフトウェア、言語、文化、所在地、物理的/精神的能力にかかわらず、**ウェブは基本的にすべての人に向けて設計されています**。ウェブがこの目的を達成できると、さまざまな聴力、視力、認知能力をもつ人々がウェブにアクセスできるようになります。」 (W3C - Accessibility)

主なチュートリアル
---------

MDN のアクセシビリティ学習領域には、アクセシビリティの基本事項を含む近代的な最新のチュートリアルが含まれています。

アクセシビリティとは何か

この記事では、アクセシビリティが実際にどのようなものであるかをよく見てモジュールを開始します。これには、どのグループを考慮する必要があるのかとそのグループの理由、さまざまな人々がウェブとやりとりするために使用するツール、アクセシビリティをウェブ開発ワークフローの一部にする方法を含みます。

HTML: アクセシビリティのための良い基礎

適切な HTML 要素が常に正しい目的で使用されていることを確認するだけで、大量のウェブコンテンツをアクセシブルにすることができます。この記事では、最大限のアクセシビリティを確保するために HTML をどのように使用できるかについて詳しく説明します。

CSS と JavaScript のアクセシビリティベストプラクティス

CSS と JavaScript を適切に使用すると、アクセシブルなウェブ体験を可能にするポテンシャルがあります。また、悪用されるとアクセシビリティに大きな悪影響を与える可能性があります。この記事では、複雑なコンテンツでさえも可能な限りアクセシブルであることを保証するために考慮する必要がある CSS と JavaScript のベストプラクティスの概要を説明します。

WAI-ARIA の基礎

前の記事に従って、セマンティックでない HTML や動的に JavaScript で更新されたコンテンツを含む複雑な UI コントロールを作成することは理解しづらい場合があります。WAI-ARIA は、ブラウザーや支援技術が認識して使用できるセマンティクスを追加することで、このような問題の解決に役立つ技術です。ここでは、アクセシビリティを向上させるために基本レベルで使用する方法を示します。

アクセシブルなマルチメディア

アクセシビリティの問題を引き起こす可能性のある別のカテゴリーのコンテンツは、マルチメディアです。映像、音声、および画像のコンテンツには、補助的なテクノロジーとそのユーザーが理解できるように適切なテキストの代替が必要です。この記事では、その方法を示します。

モバイルアクセシビリティ

モバイル端末でのウェブアクセスが普及しており、iOS や Android などの普及しているプラットフォームではアクセシビリティツールが完全に提供されているため、これらのプラットフォームでのウェブコンテンツのアクセシビリティを考慮する必要があります。この記事では、モバイル固有のアクセシビリティの考慮事項について説明します。

その他の文書
------

ウェブコンテンツアクセシビリティガイドラインを理解する

この一連の記事では、W3C のウェブコンテンツアクセシビリティガイドライン 2.0 (WCAG、Web Content Accessibility Guidelines) で概説されている推奨事項に準拠するために必要な手順を理解するのに役立つ簡単な説明を提供します。

色とアクセシビリティ入門

この記事では、光と色に対する私たちの認識について説明し、アクセシブルなデザインにおける色使いの基礎を提供し、視覚的で読みやすいコンテンツのベストプラクティスを示します。

キーボードで操作可能な JavaScript ウィジェット

今まで、スタイル付きの `<div>` や `<span>` ベースのウィジェットを作りたいというウェブ開発者は、適切な技術を欠いていました。 **キーボードアクセシビリティ**は、開発者が知っておくべき最低限のアクセシビリティ要件の一部です。

ARIA

ARIA を使用して HTML 文書をより使いやすくする方法を学ぶための記事のコレクション。

モバイルアクセシビリティのチェックリスト

この記事は、モバイルアプリ開発者向けのアクセシビリティ要求事項の簡潔なチェックリストを提供します。

認知的アクセシビリティ (en-US)

ウェブコンテンツを作成する際には、認知機能障碍者がアクセスできるようにすることを意識してください。

痙攣性疾患に対するアクセシビリティ (en-US)

ウェブ上のビジュアルコンテンツの中には、特定の脳疾患を持つ人に発作を引き起こす可能性があるものがあります。問題となりうるコンテンツの種類を理解し、それらを回避するためのツールや戦略を見つけましょう。

関連情報
----

* WAI Interest Group
* 開発者ガイド
HTTP
====

**ハイパーテキスト転送プロトコル *(Hypertext Transfer Protocol, HTTP)*** は HTML などのハイパーメディア文書を転送するためのアプリケーション層プロトコルです。このプロトコルはウェブブラウザー(クライアント)とウェブサーバー間の通信を目的として設計されていますが、他の用途でも使用されることがあります。 HTTP は旧来のクライアント・サーバーモデルに則っており、クライアントはサーバーにリクエストを送信するためにポートを開き、サーバー側からのレスポンスが返ってくるまで待機します。 HTTP はいわゆるステートレスプロトコルであり、つまりサーバーは 2 つのリクエスト間で何もデータを保持しません。

チュートリアル
-------

ガイドやチュートリアルで、 HTTP の使い方を学びましょう。

HTTP の概要

クライアントサーバープロトコルの基本的な特徴です。 HTTP で実現できること、また何故それを使用すべきなのかを説明します。

HTTP キャッシュ

キャッシュは高速で快適なウェブサイトの閲覧を可能にするために非常に需要な要素です。この記事では様々なキャッシュの手法や、HTTP ヘッダーでどのようにそれらを制御するかを説明します。

HTTP Cookie

Cookie の動作は RFC 6265 で定義されています。サーバーは HTTP リクエストをクライアント側に送信する際、`Set-Cookie` ヘッダー付与することができます。クッキーの値は `Cookie` リクエストのヘッダーの識別子に含まれた、同一サーバーに対する全てのリクエストを保持しており、クライアント側はそれを返します。また、Cookie に有効期限を設定したり、特定のドメインやパスだけにステートフルな挙動を限定することもできます。

オリジン間リソース共有 (CORS)

**サイト間 HTTP リクエスト**とは、リクエストを生成したリソースがあるドメインとは **別のドメイン** のリソースをリクエストする HTTP リクエストのことを指します。例えば、ドメイン A (`http://domaina.example/`) から読み込まれた HTML ページが、`img` 要素を使用してドメイン B の画像 (`http://domainb.foo/image.jpg`) に対するリクエストを発行することがそれにあたります。昨今のウェブページでは、CSS スタイルシートや画像、スクリプト、その他のリソースを含め、上記の例のようにサイトを跨ってデータを読み込むのが一般的になっています。CORS によって、ウェブ開発者がこのようなサイト間リクエストに対して個々のサイトが示す挙動を制御することができます。

HTTP クライアントヒント

**クライアントヒント**は、サーバーがクライアントから端末、ネットワーク、ユーザー、ユーザーエージェント固有の環境設定に関する情報を積極的にリクエストするために使用できるレスポンスヘッダーの集合です。
 サーバーは、クライアントが提供する情報をもとに、送信するリソースを決定することができます。


HTTP の進化

初期バージョンの HTTP から最新の HTTP/2、姿を現した HTTP/3 以降までの変革を端的に説明します。

Mozilla ウェブセキュリティガイドライン

運用チームがセキュアなウェブアプリケーションを開発するのに役立つコツをまとめました。

HTTP メッセージ

HTTP/1.x や HTTP/2 の多様なメッセージが持つ型や構造を説明します。

HTTP セッションの典型例

一般的な HTTP セッションのフローを示しながら説明します。

HTTP/1.x のコネクション制御

HTTP/1.x で使用できる 3 種類の通信制御モデルの持つ長所と短所を説明します。

リファレンス
------

詳細な HTTP の参考資料を見ていきましょう。

HTTP ヘッダー

HTTP メッセージヘッダーは、リソース、あるいはサーバーやクライアントの挙動を示すために使用します。ヘッダーは IANA レジストリー に収録されていますが。IANA は 新たに提案された HTTP メッセージヘッダーのレジストリーも管理しています。

HTTP リクエストメソッド

HTTP では多様な操作を実現することができます。一般的な `GET` や `POST` だけでなく、`OPTIONS` や `DELETE`、`TRACE` などのあまり一般的ではないリクエストも包括しています。

HTTP ステータスレスポンスコード

HTTP レスポンスコードは、特定の HTTP リクエストが正常に完了したかを示します。レスポンスは通知レスポンス、成功レスポンス、リダイレクション、クライアントエラー、サーバーエラーの 5 つのクラスに分類されます。

CSP ディレクティブ

ウェブサイトの管理者は、`Content-Security-Policy` レスポンスヘッダーフィールドで、ユーザーエージェントが特定のページで読み込むことが許可されているリソースを制御することができます。いくつか例外はありますが、大元のサーバーやスクリプトのエンドポイントの特定をポリシーとして含んでいることが多いです。

ツールとリソース
--------

HTTP の理解やデバッグに役立つツールやリソースです。

Firefox 開発者ツール

ネットワークモニター

Mozilla 研究室

開発者、システム管理者、セキュリティの専門家の、安全でセキュアなサイトの構築を支援するプロジェクトです。

RedBot

キャッシュ関係のヘッダーを検証するツールです。

How Browsers Work (2011)

ブラウザーの内部処理や、 HTTP プロトコルのリクエスト処理のフローに関してとても詳しく書かれた記事です。ウェブ開発者であれば一読するべき記事になります。
SVG: スケーラブルベクターグラフィック
=====================

SVG を始めましょう
-----------

**スケーラブルベクターグラフィック (SVG)** は XML ベースのマークアップ言語で、二次元ベースのベクターグラフィックを記述します。

そのため、テキストベースで、どんなサイズでもきれいにレンダリングできる画像を記述するためのオープンなウェブ標準であり、特に CSS、DOM、JavaScript、SMIL を含む他のウェブ標準とうまく動作するように設計されています。 SVG は本質的に、テキストに対する HTML のような位置づけの、グラフィックに対するものです。

SVG 画像と関連する振る舞いは XML のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。

旧来の JPEG や PNG のようなビットマップ画像形式と比較して、 SVG 形式のベクター画像は、品質を損なうことなく任意の大きさでレンダリングすることができ、テキストを更新することで、グラフィックエディターを使用せずに簡単にローカライズすることができます。適切なライブラリーを使用すれば、 SVG ファイルをその場でローカライズすることも可能です。

SVG は 1999 年からワールドワイドウェブコンソーシアム (W3C) によって開発されています。

SVG 教本も参照してください。

ドキュメント
------

SVG 要素リファレンス

各 SVG 要素についての詳細情報です。

SVG 属性リファレンス

各 SVG 属性の詳細情報です。

SVG DOM インターフェイスリファレンス

JavaScript と連携するための SVG DOM API の詳細情報です。

HTML コンテンツへ SVG 効果を適用する

SVG は HTML、CSS と JavaScript と連携して動作します。SVG を使用することで、通常の HTML ページやウェブアプリケーションを拡張することができます。

ツール
---

* SVG テストスイート
* Markup Validator
例
-

* SVG authoring guidelines
* 画像としての SVG
* SMIL を用いた SVG のアニメーション
* SVG art gallery
* D3 (HTML, SVG, CSS でデータを可視化する JavaScript ライブラリー)
EXSLT
=====

EXSLT は XSLT に対する一連の拡張機能です。いくつものモジュールがあります。 Firefox が対応しているものは以下の通りです。

Math (math)EXSLT の Math パッケージは、数値の操作とノードの比較のための機能を提供します。 Math パッケージの名前空間は `http://exslt.org/math` です。

共通 (exsl)EXSLT 共通パッケージは、 XSLT の機能を拡張する基本的な関数を提供します。共通パッケージの名前空間は `http://exslt.org/common` です。

EXSLT モジュール
-----------

EXSLT関数を使用するには、その関数が属する名前空間を宣言し、関数を呼び出す際に適切な接頭辞を使用する必要があります。例えば、正規表現パッケージを使用する場合は次のようにします。


```xml
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:regexp="http://exslt.org/regular-expressions">
  <xsl:template match="/">
    ...
    <xsl:value-of select="regexp:replace(/root/@value, 'before', 'gi', 'AFTER')"/>
    ...
  </xsl:template>

</xsl:stylesheet>
```

### 共通

EXSLT Common パッケージは、 XSLT の機能を拡張する基本的な関数を提供します。 Common パッケージの名前空間は `http://exslt.org/common` です。

#### 関数

* `exsl:node-set()`
* `exsl:object-type()`
### Math

EXSLT の Math パッケージは、数値を扱ったり、ノードを比較したりするための関数を提供します。 Math パッケージの名前空間は `http://exslt.org/math` です。

#### 関数

* `math:highest()`
* `math:lowest()`
* `math:max()` (en-US)
* `math:min()` (en-US)
### 正規表現

EXSLT 正規表現パッケージは、JavaScript スタイルの正規表現を使って、テキストのテスト、照合、置換ができる関数を提供します。

EXSLT 正規表現の名前空間は、`http://exslt.org/regular-expressions` です。

#### 関数

* `regexp:match()` (en-US)
* `regexp:replace()` (en-US)
* `regexp:test()` (en-US)
### セット

EXSLT セットパッケージは、集合の操作ができる関数を提供します。これらの関数の名前空間は `http://exslt.org/sets` です。

#### 関数

* `set:difference()` (en-US)
* `set:distinct()` (en-US)
* `set:intersection()` (en-US)
* `set:has-same-node()` (en-US)
* `set:leading()` (en-US)
* `set:trailing()` (en-US)
### 文字列

EXSLT 文字列パッケージは、文字列の操作ができる関数を提供します。文字列パッケージの名前空間は `http://exslt.org/strings` です。

#### 関数

* `str:concat()` (en-US)
* `str:split()` (en-US)
* `str:tokenize()` (en-US)
関連情報
----

* EXSLT ウェブサイト
オープンウェブ技術のデモ
============

Mozilla は多種多様なオープンウェブ技術に対応しており、使用を推奨しています。このページでは、これらの技術の興味深いデモンストレーションへのリンクを提供しています。

もしオープンウェブ技術の優れたデモンストレーションやアプリケーションをご存知でしたら、ここの適切な節にリンクを追加してください。

2D グラフィック
---------

### キャンバス

* Blob Sallad: an interactive blob using JavaScript and canvas (code demos)
* miniPaint: Image editor (source code)
* Zen Photon Garden (source code)
* Multi touch in canvas demo (source code)
### SVG

* Bubblemenu (visual effects and interaction)
* Blobular (interactive)
* Summer HTML image map creator (source code)
### Video

* Video 3D Animation "mozilla constantly evolving"
* Video 3D Animation "Floating Dance"
* Video 3D Animation "The Gravel Institute: Monopoly
3D グラフィック
---------

### WebGL

* Web Audio Fireworks
* Aquarium
* Dynamic cubemap
* Kai 'Opua (source code)
### バーチャルリアリティ

* The Polar Sea (source code)
* Sechelt fly-through (source code)
CSS
---

* CSS floating logo "mozilla"
* CSS Blockout
* Rubik's cube
* Loader with blend modes
* CSS-based single page application (source code)
### 座標変換

* Impress.js (source code)
* Flickr Polaroid Stack
ゲーム
---

* IoQuake3 (source code)
* Kai 'Opua (source code)
ウェブ API
-------

### 通知 API

* HTML Notifications (source code)
### ウェブオーディオ API

* Audio Context states demo
* Audio analyser - graphical visualization of an audio signal
* IIR filter node
* Multi track
* Stereo-panner-node
### ファイル API

* Slide My Text - presentation from plain text files
### ウェブワーカー

* Web Worker Fractals
* Photo editor
* Coral generator
* Raytracer
* Fibonacci
XSLT: 拡張可能なスタイルシートの言語変換
=======================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

1. **XSLT**
2. **EXSLT**
3. **XPath**
4. ガイド
    1. よくある XSLT のエラー
    2. PI 引数
    3. Gecko の XSLT/JavaScript インターフェイス
    4. XML を XSLT で変換
    5. Mozilla JavaScript インターフェイスからの XSLT の使用
5. XSLT Elements (en-US)
    1. `<xsl:apply-imports>`
    2. `<xsl:apply-templates>`
    3. `<xsl:attribute-set>`
    4. `<xsl:attribute>`
    5. `<xsl:call-template>`
    6. `<xsl:choose>`
    7. `<xsl:comment>`
    8. `<xsl:copy-of>`
    9. `<xsl:copy>`
    10. `<xsl:decimal-format>`
    11. `<xsl:element>`
    12. `<xsl:fallback>`
    13. `<xsl:for-each>`
    14. `<xsl:if>`
    15. `<xsl:import>`
    16. `<xsl:include>`
    17. `<xsl:key>`
    18. `<xsl:message>`
    19. `<xsl:namespace-alias>`
    20. `<xsl:number>`
    21. `<xsl:otherwise>`
    22. `<xsl:output>`
    23. `<xsl:param>`
    24. `<xsl:preserve-space>`
    25. `<xsl:processing-instruction>`
    26. `<xsl:sort>`
    27. `<xsl:strip-space>`
    28. `<xsl:stylesheet>`
    29. `<xsl:template>`
    30. `<xsl:text>`
    31. `<xsl:transform>`
    32. `<xsl:value-of>`
    33. `<xsl:variable>`
    34. `<xsl:when>`
    35. `<xsl:with-param>`

**Extensible Stylesheet Language Transformations (XSLT)** は XML ベースの言語で、XML 文書の変換をするために特別な処理ソフトウェア (プロセッサー) とともに利用されます。

この処理は「変換」と呼ばていれますが、元の文書は変更されません。この「変換」ではまず、新しい XML 文書が元の文書の内容をもとに作成され、プロセッサーによってそのまま、もしくは標準 XML や HTML やテキストなどの形式でシリアライズ (出力) されます。

XSLT は異なる XML スキーマ間でのデータの変換や、XML データからウェブページや PDF 文書への変換に最も使われています。

ドキュメント
------

XSLT 要素リファレンス

リファレンスです。

XSLT を使った XML 変換

XSLT を使うと、スタイルシートの制作者は、元の XML 文書を二つの重要な手法で変換できます。すなわち、コンテンツの操作・選別（もしお望みならば大規模な並べ替えも含まれます）および、異なる形式への変換です。

Mozilla JavaScript インターフェイスから XSLT を使う

Mozilla 1.2 以降の JavaScript から XSLT 処理エンジンへのインターフェイスを説明します。

処理命令を使った引数の指定

Firefox では `<?xml-stylesheet?>` 処理指令を使ってスタイルシートの引数を指定することができます。各引数は `<?xslt-param?>` 処理指令によって指定でき、この文書ではこれらを説明しています。

XSLT チュートリアル

この W3Schools のチュートリアルでは、XML 文書を他の XHTML のような形態に変換するために、どのように XSLT を用いればいいのかを示します。

XSLT とは?

この XSLT と XPath についての強力な導入では、技術についての予備知識が無い読者を想定して、背景、前後関係、構造、コンセプト、用語紹介を含めたガイドを提供します。

一般的な XSLT エラー

この記事は Firefox で XSLT を使う際の問題点を列挙しています。

関連トピック
------

* XML, XPath