recursal/MDN huggingface dataset:
LocalLibrary 基本テンプレート
=====================

Now that we understand how to extend templates using Pug, let's start by creating a base template for the project. This will have a sidebar with links for the pages we hope to create across the tutorial articles (e.g. to display and create books, genres, authors, etc.) and a main content area that we'll override in each of our individual pages.

Open **/views/layout.pug** and replace the content with the code below.


```pug
doctype html
html(lang='en')
  head
    title= title
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    div(class='container-fluid')
      div(class='row')
        div(class='col-sm-2')
          block sidebar
            ul(class='sidebar-nav')
              li
                a(href='/catalog') Home
              li
                a(href='/catalog/books') All books
              li
                a(href='/catalog/authors') All authors
              li
                a(href='/catalog/genres') All genres
              li
                a(href='/catalog/bookinstances') All book-instances
              li
                hr
              li
                a(href='/catalog/author/create') Create new author
              li
                a(href='/catalog/genre/create') Create new genre
              li
                a(href='/catalog/book/create') Create new book
              li
                a(href='/catalog/bookinstance/create') Create new book instance (copy)

        div(class='col-sm-10')
          block content
```


The template uses (and includes) JavaScript and CSS from Bootstrap to improve the layout and presentation of the HTML page. Using Bootstrap or another client-side web framework is a quick way to create an attractive page that can scale well on different browser sizes, and it also allows us to deal with the page presentation without having to get into any of the details—we just want to focus on the server-side code here!

The layout should be fairly obvious if you've read our above Template primer. Note the use of `block content` as a placeholder for where the content for our individual pages will be placed.

The base template also references a local css file (**style.css**) that provides a little additional styling. Open **/public/stylesheets/style.css** and replace its content with the following CSS code:


```css
.sidebar-nav {
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
```


When we get round to running our site, we should see the sidebar appear! In the next sections we will use the above layout to define the individual pages.

Next steps
----------

* Return to Express Tutorial Part 5: Displaying library data.
* Proceed to the next subarticle of part 5: Home page (en-US).
著者詳細ページ
=======

著者詳細ページには、指定された `Author` に関する情報を、その (自動的に生成された) `_id` フィールド値を使用して識別し、その `Author` に関連するすべての `Book` オブジェクトのリストを表示する必要があります。

Controller
----------

Open **/controllers/authorController.js**.

Add the following lines to the top of the file to import the *async* and *Book* modules (these are needed for our author detail page).


```js
var async = require("async");
var Book = require("../models/book");
```


Find the exported `author_detail()` controller method and replace it with the following code.


```js
// Display detail page for a specific Author.
exports.author\_detail = function (req, res, next) {
  async.parallel(
    {
      author: function (callback) {
        Author.findById(req.params.id).exec(callback);
      },
      authors\_books: function (callback) {
        Book.find({ author: req.params.id }, "title summary").exec(callback);
      },
    },
    function (err, results) {
      if (err) {
        return next(err);
      } // Error in API usage.
      if (results.author == null) {
        // No results.
        var err = new Error("Author not found");
        err.status = 404;
        return next(err);
      }
      // Successful, so render.
      res.render("author\_detail", {
        title: "Author Detail",
        author: results.author,
        author\_books: results.authors_books,
      });
    },
  );
};
```


The method uses `async.parallel()` to query the `Author` and their associated `Book` instances in parallel, with the callback rendering the page when (if) both requests complete successfully. The approach is exactly the same as described for the *Genre detail page* above.

View
----

Create **/views/author\_detail.pug** and copy in the following text.


```js
extends layout

block content

  h1 Author: #{author.name}
  p #{author.date_of_birth} - #{author.date_of_death}

  div(style='margin-left:20px;margin-top:20px')

    h4 Books

    dl
      each book in author_books
        dt
          a(href=book.url) #{book.title}
        dd #{book.summary}

      else
        p This author has no books.
```


Everything in this template has been demonstrated in previous sections.

What does it look like?
-----------------------

Run the application and open your browser to http://localhost:3000/. Select the *All Authors* link, then select one of the authors. If everything is set up correctly, your site should look something like the following screenshot.

![Author Detail Page - Express Local Library site](/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page/LocalLibary_Express_Author_Detail.png)

**メモ:** The appearance of the author *lifespan* dates is ugly! We'll address that in the final challenge in this article.

Next steps
----------

* Return to Express Tutorial Part 5: Displaying library data.
* Proceed to final subarticle of part 5 : BookInstance detail page and challenge (en-US).
Django チュートリアル: 地域図書館ウェブサイト
===========================

* 前のページ
* Overview: Django
* 次のページ

実践的なチュートリアルシリーズの最初の記事は、学習する内容を説明し、後の記事で進めていく「地域図書館」のサンプルウェブサイトの概要を示しています。

| 前提条件: | Django の紹介を読んでください。以下の記事では、Django 開発環境をセットアップする必要があります。 |
| --- | --- |
| 目的: | このチュートリアルで使用されているサンプルアプリケーションを紹介し、読者が何をするかを理解できるようにします。 |

概要
--

MDN "地域図書館" Django チュートリアルへようこそ。ここでは、地域図書館のカタログを管理するための Web サイトを開発します。

この一連のチュートリアルの記事でやることは次の通りです:

* Django のツールを使用して、Web サイトのスケルトンとアプリケーションを作成します。
* 開発用サーバーを起動および停止します。
* アプリケーションのデータを表すモデルを作成します。
* Django 管理サイトを使用してサイトのデータを設定します。
* さまざまな要求に応じて特定のデータを取得するためのビューを作成し、ブラウザーに表示する HTML として、データをレンダリングするためのテンプレートを作成します。
* 異なる URL パターンを特定のビューに関連付けるためのマッパーを作成します。
* ユーザーの認可とセッションを追加して、サイトの動作とアクセスを制御します。
* フォームを使います。
* アプリケーションのテストコードを書きます。
* Django のセキュリティを効果的に使用します。
* アプリケーションを本番環境にデプロイします。

これらの話題のいくつかについて学び、他の話題にも簡単に触れました。チュートリアルシリーズの最後は、あなた自身で簡単な Django アプリケーションを開発するのに十分な知識が必要です。

地域図書館ウェブサイト
-----------

*地域図書館（LocalLibrary）は、この一連のチュートリアルの過程で作成および展開する Web サイトの名前です。ご存じのように、ウェブサイトの目的は、利用可能な書籍を閲覧してアカウントを管理できる小さな地域図書館のオンラインカタログを提供することです。*

この例は慎重に選択されています。なぜなら、必要に応じて細かく表示することができ、ほぼすべての Django 機能を表示するために使用できます。 さらに重要なことは、Django Web フレームワークの最も重要な機能をガイドする方法を提供できることです:

* 最初のいくつかのチュートリアルの記事では、図書館員が利用可能な書籍を見つけるために使用できる簡単なブラウズ専用図書館を定義します。これにより、ほぼすべての Web サイトに共通する操作、つまりデータベースからの内容の読み取りと表示を探ります。
* 進めていくと、図書館の例は、より高度な Django の機能を説明するために自然に拡張していきます。たとえば、ユーザーが書籍を予約できるように図書館を拡張し、これを使ってフォームの使用方法をデモし、ユーザー認証をサポートできます。

これは非常に拡張可能な例ですが、地域図書館と呼んでいます。理由は、Django をすぐに起動して実行するのに役立つ最小限の情報を表示したいと考えているからです。つまり、書籍、本のコピー、作者関する情報、およびその他の重要な情報は保存します。しかし、図書館が保管する可能性のある他のアイテムに関する情報を保管したり、複数の図書館サイトやその他の「大きな図書館」機能をサポートするために必要なインフラストラクチャーを提供することはありません。

詰まってます、どこでソースを入手できますか？
----------------------

チュートリアルを進めるうちに、各ポイントでコピー＆ペーストするための適切なコードスニペットが提供されます。また、この他に自分で拡張してほしいコードもあります（いくつかのガイダンスがあります）。

詰まった場合は、ウェブサイトの完全に開発されたバージョンをGithub 上で見ることができます。

要約
--

地域図書館ウェブサイトについてと、何を学ぶのかをもう少し知りました。今度は例を含むスケルトンプロジェクトを作成しましょう。

* 前のページ
* Overview: Django
* 次のページ
ウェブサイトをどんな外見にするか
================

* 前のページ
* Overview: Getting started with the web
* 次のページ

「*ウェブサイトをどんな外見にするか*」では、コードを書き始める前に、このウェブサイトについて計画したりデザインしたりすべき事柄について説明します。例えば「どんな情報をウェブサイトで提供するのか」「どのフォントや色を使いたいのか」「このウェブサイトは何をするのか」などです。

まず最初に: 計画を立てる
-------------

始める前に、いくつか考えておかなければいけないことがあります。このウェブサイトは実際に何をすべきでしょうか？普通ウェブサイトは様々なことができます。しかし、はじめは単純なことにとどめておくべきでしょう。まずは、見出し一つ、画像一つ、そしていくつかの段落のある単純なウェブページを作ることから始めましょう。

まずはじめに、次の質問に答える必要があります。

1. **何についてのウェブサイトですか？** 犬、ニューヨーク、それともパックマン？
2. **主題についてどんな情報を表現しようとしていますか？** タイトルといくつかの段落、それからページに表示させたい画像を考えます。
3. **ウェブサイトをどんな外見にしますか？** 簡単で大まかな言葉で言うと？背景色は？適切なフォントはフォーマル？漫画？太字で派手？繊細？

**メモ:** 複雑なプロジェクトでは、色、フォント、ページのアイテム間の余白、適切な文体など、詳細なガイドラインが必要です。これは、デザインガイド、デザインシステム、ブランドブックなどと呼ばれます。一例として、 Firefox Photon Design Systemがあります。

デザインをスケッチする
-----------

次に、ペンと紙を取って、あなたのサイトの見た目をどういう風にしたいのか、大まかに描き出します。はじめてのシンプルなウェブページでは、描き出すものもあまりないですが、ウェブサイトを作るうえでの習慣として身につけるべきです。ヴァン・ゴッホのようになる必要はありませんので！

![紙に描いたウェブサイトのラフ画とスケッチ](/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/website-drawing-scan.png)

**メモ:** 現実の複雑なウェブサイトの場合でも、デザインチームは普通、ラフスケッチを描くことから始めます。その後、グラフィックエディターや Web の技術を使って、デジタルのモックアップを作るのです。

多くの場合、ウェブの開発チームには、グラフィックデザイナーとユーザーエクスペリエンス (UX) デザイナーがいます。グラフィックデザイナーは、ウェブサイトの見た目を作り上げます。 UX デザイナーは、もう少し抽象的な役割を持っていて、サイトを訪れるユーザーがウェブサイトでどういう経験をし、どのように操作するかということを考えます。

資産を選ぶ
-----

この時点で、ウェブページについて、将来どう表現したいかをまとめ始めるとよいでしょう。

### テキスト

先ほど考えたちょっとした文章やタイトルは、まだそのまま残しておきます。手近なところに置いておきましょう。

### テーマカラー

色を選ぶときは、色選択ツールへ行き、好みの色を見つけましょう。色をクリックすると、 `#660066` のような 6 桁の奇妙なコードが出てきます。これは*ヘキサコード*（16 進コード）と呼ばれ、選んだ色を表します。今はどこか安全なところにコピーしておきましょう。

![MDN Docs ウェブサイトのカラーピッカーツールで、RGB、HSL、HEX の色を利用できます](/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/color-picker.png)

### 画像

画像を探すには、Google 画像検索にアクセスし、ぴったりなものを探しましょう。

1. 欲しい画像が見つかったら、クリックして拡大表示にします。
2. 画像を右クリック（Mac では Ctrl +クリック）し、[名前を付けて画像を保存...] を選択して、画像を安全に保存する場所を選択します。または、後で使用するためにブラウザーのアドレスバーから画像のウェブアドレスをコピーします。

![Google 画像検索での検索語句の検索結果](/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images.png)

なお、ウェブ上のほとんどの画像には、 Google 画像検索にあるものも含め、著作権があります。あなたが著作権を侵害してし舞うことを防ぐために、 Google のライセンスフィルターを使うと良いでしょう。 [ツール] ボタンをクリックすると、 [ライセンス] オプションが下に表示されます。「クリエイティブ・コモンズ ライセンス」などの選択肢を選択してください。

![Google 画像検索でクリエイティブ・コモンズ ライセンスの画像を取得するための検索結果のフィルタリング](/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images-licensing.png)

### フォント

画像と同様に、多くのフォントはライセンスで保護されており、サイト内で自由に使用することはできません。Google フォントは、Google が自分自身で所有するウェブサービスであり、たくさんのフォントにアクセスすることができます。

フォントが見つかったら、そのフォントを使用する方法は大きく分けて 2 つあります。

1. Google のサーバーからフォントを読み込むために、コードに参照を追加する。
2. 自分のシステムにフォントファイルをダウンロードし、フォントをホスティングし、ウェブサイトのコードでホスティングしたコピーを使用する。

**メモ:** Google フォントでホスティングされているフォントを提供すると、フォントサービスがユーザーの IP アドレスを公開するため、EU のデータプライバシー規則である GDPR に抵触する可能性があります。これが問題になりそうな場合は、2 つ目の選択肢を選んでください。

また、Arial、Times New Roman、Courier New などのセーフウェブフォントを使用することもできます。

* 前のページ
* Overview: Getting started with the web
* 次のページ
基本的なソフトウェアのインストール
=================

* Overview: Getting started with the web
* 次のページ

*基本的なソフトウェアのインストール*では、簡単なウェブ開発をするのに必要なツールを紹介し、それらのツールを適切にインストールする方法を紹介します。

現時点で実際にどのようなツールが必要か
-------------------

この記事では、必要最小限のツールをセットアップしましょう。テキストエディターと最新のウェブブラウザーです。

### テキストエディターのインストール

コンピューターには、おそらくすでにテキストエディターが入っています。Windows にはメモ帳が、macOS にはテキストエディットが、Linux にはディストリビューションによっていろいろですが、Ubuntu 22.04 LTS リリースには GNOME Text Editor が初めからインストールされてされています。

ウェブ開発においては、おそらくメモ帳やテキストエディットより良いものがあります。おすすめは Visual Studio Code で、これは無料のエディターであり、ライブプレビューやコードヒントを提供しています。

### 最新のウェブブラウザーのインストール

次に、コードをテストするためのデスクトップウェブブラウザーをいくつかインストールしましょう。以下からオペレーティングシステムを選び、リンクから好きなブラウザーをインストールしてみてください。

* Linux: Firefox, Chrome, Opera, Brave.
* Windows: Firefox, Chrome, Opera, Microsoft Edge, Brave （Windows 10 には最初から Edge が付属しています。それ以外の場合は、他のブラウザーをインストールしてください。）
* macOS: Firefox, Chrome, Opera, Safari, Brave （macOS と iOS には最初から Safari が付属しています。）

次に進む前に、テストに使えるように最低でも 2 つのブラウザーをインストールするようにしてください。

### ローカルのウェブサーバーのインストール

いくつかの例では、正しく動作させるためにウェブサーバー上で実行する必要があるものもあります。ローカルテストサーバーのインストール方法にて、その方法が見つかります。

プロはどんなツールを使っている？
----------------

以下の一覧はいかにも怖そうですが、幸いなことに、これらのほとんどについて何も知らなくてもウェブ開発を始めることは可能です。

* **コンピューター**。当たり前のことだと思う人もいるかもしれませんが、携帯電話や図書館のコンピューターを使ってこの記事を読んでいる人もいるでしょう。しっかりとしたウェブ開発のためには、Windows、macOS、Linux などが動作するデスクトップやノートパソコンを使ってください。
* **テキストエディター**。コードを書くために必要です。テキストエディター（たとえば Visual Studio Code、Notepad++、Sublime Text、GNU Emacs、VIM）でも、複合的な機能を持つソフトウェア（Dreamweaver や WebStorm）でも構いません。 Office 文書のエディターは、ウェブブラウザーが使うレンダリングエンジンに干渉する隠し要素に依存しているため、この用途には適していません。
* **ウェブブラウザー**。自分が書いたコードをテストするために必要です。現在最も使われているブラウザーは、Firefox、ChromeSafari、Microsoft Edge などです。モバイル端末や、ウェブサイトを見る人たちが使うかもしれない古いブラウザー（IE 8-10 など）でもサイトがどう動くのかをテストしましょう。テキストベースの端末ウェブブラウザーである Lynx は、視覚障碍のあるユーザーがサイトをどのように体験しているかを見るのに適しています。
* **画像編集ソフト**（GIMP、Paint.NET、Photoshop、Sketch、XD など）。ウェブページの画像を作成するために必要になります。
* **バージョン管理システム**。複数の人とチームでサイトを作るときや、他の人とコードを共有するときに、誤って編集の衝突などが起こらないようにするために必要になります。現在では、 Git が最も有名なバージョン管理システムであり、これに基づいたコードホスティングサービスの GitHub や GitLab もとても有名です。
* **FTP プログラム**。ウェブページを公開する時にファイルをサーバーにアップロードするために必要です（この目的では、 FTP の代わりに Git が用いられつつあります）。(S)FTP の機能が含まれている、Cyberduck、Fetch、FileZilla などのプログラムを使うと良いでしょう。
* **自動化システム**、Webpack、Grunt、Gulp はコードの最小化やテストの実行などのような反復作業を自動的に実行することができます。
* ライブラリーやフレームワークなど、共通機能をすばやく書くためのものです。ライブラリーは、既存の JavaScript や CSS のファイルであり、コードで使用するために、すぐに使える機能を提供しています。フレームワークは、この考えをさらに進めて、ウェブアプリケーションを書くためのカスタム構文を持つ完全なシステムを提供する傾向があります。
* 他にも便利なツールがたくさんあります！
* Overview: Getting started with the web
* 次のページ
評価: アクセシビリティのトラブルシューティング
========================

* 前のページ
* Overview: Accessibility

このモジュールの評価では、あなたが診断、修正するべきいくつかのアクセシビリティの問題を持った簡単なサイトを表示します。

| 前提知識: | 基本的なコンピューターの知識、HTML、CSS、JavaScript に対する基本的な理解、このコースのこれまでの記事への理解。 |
| --- | --- |
| 学習目標: | アクセシビリティの基礎に対する基本的な知識をテストすること。 |

開始地点
----

評価を始めるために、例を含むファイルの ZIP を取得してください。あなたのコンピューターのいずれかのディレクトリーにそのコンテンツを解凍してください。

あるいは、JSBin や Glitch のようなサイトを使って試験できます。HTML, CSS, JavaScript をオンラインエディターのいずれかにペーストします。もし使っているオンラインエディターに個別の CSS/JS パネルがない場合、適当な `<style>` / `<script>` 要素内に置いて下さい。

解凍が完了した評価サイトは次のように見えるはずです:

![](/ja/docs/Learn/Accessibility/Accessibility_troubleshooting/assessment-site-finished.png)

この評価の開始時点であなたがサイトを表示したとき、いくつかの違いや問題を見つけることでしょう。これは主にマークアップ中の違いが原因であり、CSS が正しく適用されずにスタイリングの問題を引き起こしています。心配しないでください。以降の節でそれらの問題を修正します！

**メモ:** もし行き詰まって助けを求める場合 — ページ最下部の Assessment or further help セクションを見てください。

プロジェクトの概要
---------

このプロジェクトでは、熊の「事実」に関する記事を表示する架空の自然のサイトが表示されます。現状では、これはいくつものアクセシビリティの問題を持っています。あなたの仕事は現状のサイトを見て、全力を尽くして修正し、以下の質問に答えることです。

### 色

テキストは現在のカラースキームのせいで読みづらくなっています。現状のカラーコントラスト (テキスト/背景) をテストして、テストの結果を報告し、割り当てられた色を変更して修正できますか？

### セマンティック HTML

1. コンテンツはまだあまりアクセシブルではありません。スクリーンリーダーを使ってナビゲートしようとしたとき、何が起こるか報告してください。
2. スクリーンリーダーのユーザーがナビゲートしやすいように、記事のテキストを変更できますか？
3. サイトのナビゲーションメニュー ( `<div class="nav"></div>` で囲まれた部分) は正しい HTML5 セマンティック要素の中に入れることでよりアクセシブルになったかもしれません。どれを変更する必要がありますか？変更してください。

**メモ:** タグをスタイル付けする CSS ルールセレクターは、セマンティック見出しのために適切に変更する必要があります。パラグラフ要素を加えると、スタイルもより良く見えることに気がつくでしょう。

### 画像

現状の画像はスクリーンリーダーのユーザーにとってアクセシブルではありません。修正できますか？

### オーディオプレイヤー

1. `<audio>` プレイヤーは聴覚障害者にとってアクセシブルではありません。それらのユーザーのために何らかのアクセシブルな代替手段を加えることができますか？
2. `<audio>` プレイヤーは、HTML5 をサポートしていない古いブラウザーを使用しているユーザーにとってアクセシブルではありません。彼らに対してどのようにオーディオにアクセスさせることができますか？
### フォーム

1. トップにある検索フォームの `<input>` 要素はラベルとともに使用できるかもしれませんが、表示されるテキストを追加するとデザインを悪化させる可能性がありますし、視覚に問題のないユーザーにとってはあまり必要ありません。スクリーンリーダーにのみアクセシブルなラベルをどうやって追加すればいいでしょう？
2. コメントフォームの中の 2 つの `<input>` 要素は表示されるテキストラベルを含んでいますが、それらのラベルと明確に関連付けられていません。どのように関連付けますか？いくつかの CSS ルールも修正しなければいけない点に注意してください。
### コメント show/hide 制御

現状のコメント show/hide 制御ボタンは、キーボードからアクセスすることができません。タブキーによるフォーカス、リターンキーによる有効化という形で、キーボードをアクセシブルにすることができますか？

### テーブル

現状のデータテーブルはあまりアクセシブルではありません。スクリーンリーダーのユーザーにとって行と列を関連付けることは難しく、またテーブルが何を示しているのかを明確にする概要もありません。この問題を解決するために何らかの機能を HTML に追加することはできますか？

### 他には？

このウェブサイトをよりアクセシブルにする 2 つ以上の改善アイデアを挙げることができますか？

評価とヒント
------

あなたの作業を教師やメンターに渡して採点してもらったり、行き詰まってヒントが欲しい場合は次のようにしてください:

1. 成果をオンラインで共有できるエディター、例えば CodePen, jsFiddle, Glitch に置きます。
2. 採点や手助けのための投稿を MDN Discourse forum Learning category に書いてください。投稿には次のものを(英語で)入れて下さい:
    * "Assessment wanted for Accessibility troubleshooting"のような説明的なタイトル。
    * 何を試して、どうしてほしいのかの詳細。つまり行き詰まって助けてほしいのか、採点評価してほしいのか。
    * オンラインで共有できるエディター (上記ステップ 1 で触れたもの)での例のリンク。これは身につけるとよい習慣です — コーティングの問題を、他の人がコードを見ずに助けるのは困難です。
    * 助けてもらいたい問題が見つかるような、タスクや評価のページのリンク
* 前のページ
* Overview: Accessibility
チュートリアル
=======

このページでは、さまざまなタイプのウェブゲームを効果的に作成するためのワークフローを紹介する、複数のチュートリアルシリーズを掲載しています。

純粋な JavaScript を使ったブロック崩しゲーム

このステップバイステップのチュートリアルでは、純粋な JavaScript を使用してシンプルなブレイクアウトクローンを実装します。その過程で、 `<canvas>` 要素を使用して、画像の描画や移動、衝突検出、制御機構、勝利と敗北状態などの基本的なゲームメカニズムを実装する基本を学びます。

Phaser を使用した 2D ブロック崩しゲーム

このステップバイステップのチュートリアルでは、前回のチュートリアルシリーズと同じブレイクアウトクローンを実装しますが、今回は、 Phaser HTML ゲームフレームワークを使って実装します。このチュートリアルでは、フレームワークを使用する際の基本的なこと（および利点）を、基本的なゲームの仕組みと一緒に教えることを目的としています。

端末の方向を使用した 2D 迷路ゲーム (en-US)

このチュートリアルでは、 HTML5 を使用して、 `<canvas>` 上の衝突検出やスプライトの配置などの基礎を取り入れた2D迷路ゲームを作成する方法を紹介します。これは、ゲームプレイを向上させるために、端末の方向とバイブレーション **API**を使用したモバイルゲームであり、 Phaser フレームワークを使用して構築されています。

2D platform game with Phaser

このチュートリアルシリーズは、 Phaser を使って、スプライト、衝突、物理、コレクションなどの基本的なプラットフォームゲームを作成する方法を紹介するものです。
ゲーム開発テクニック
==========

このページでは、オープンウェブ技術を使用してゲームを開発したい人のために、必要不可欠なコア技術をリストアップしています。

asm.js 用の非同期スクリプトの使用

特に中規模から大規模のゲームを作成する場合、非同期スクリプトは、ゲームの JavaScript をメインスレッドからコンパイルして、将来のゲーム実行時にキャッシュすることができるため、ユーザーにとって大幅なパフォーマンス向上となるため、活用することが不可欠なテクニックとなります。この記事では、その方法を説明します。

起動パフォーマンスの最適化 (en-US)

ゲームをすばやくスムーズに起動させ、ユーザーのブラウザーや機器をロックすることなく表示させる方法。

WebRTC のピアツーピアデータチャネルの使用

WebRTC では、音声と映像の通信に対応しているだけでなく、ピアツーピアのデータチャネルを設定して、プレイヤー間でテキストやバイナリーのデータを積極的に交換することができます。この記事では、これで何ができるかを説明し、これを簡単にするライブラリーを使用する方法を紹介します。

ウェブゲーム用の効率的アニメーション (en-US)

この記事では、携帯電話などのローエンド機器に対応しているウェブゲームで効率的にアニメーションを作成するためのテクニックとアドバイスを扱います。CSS の遷移と CSS アニメーション、そして `window.requestAnimationFrame` を含む JavaScript のループについて触れます。

ウェブゲームの音声

音声は、フィードバックや雰囲気を追加するものであり、ゲームにとって重要な要素です。ウェブベースの音声は急速に成熟していますが、まださまざまなブラウザーでの交渉が必要です。この記事では、ウェブゲームに音声を搭載するための詳細なガイドを提供し、可能な限り幅広いプラットフォームで現在動作しているものを見ていきます。

二次元の衝突検出

2D ゲームにおける衝突検出の簡潔な紹介。

タイルマップ (en-US)

タイルは、2Dゲームにおいてゲーム世界を構築するための非常に一般的な手法です。これらの記事は、タイルマップの紹介と、Canvas APIでタイルマップを搭載する方法を提供します。
ゲーム開発のためのツール
============

このページにはゲーム開発ツールに関する記事へのリンクがまとまっています。ゆくゆくはフレームワークやコンパイラー、デバッグ用ツールもカバーすることを目指しています。

asm.js

asm.js は極めて限定された JavaScript のサブセットで、ahead-of-time (AOT) コンパイラーで最適化されて、通常の JavaScript コードよりも極めて高速に動作します。これはもちろん、ゲーム用に優れています。

Emscripten

LLVM から JavaScript へのコンパイラーです。これを利用することで、C++ や LLVM バイトコードを出力する言語のコードを、高速に動作する JavaScript へコンパイル可能です。これはアプリをウェブに移植する優秀なツールです! 有用な Emscripten のチュートリアルはこちらです。 なお MDN にも Emscripten の記事を執筆中です。

Firefox プロファイラー

Gecko プロファイラーを利用すると、パフォーマンス上の問題を引き起こしている箇所の特定が容易になります。その結果あなたのゲームは最高速で動作できます。

Shumway

Shumway は Adobe Flash で作成されたものを JavaScript や WebGL などを用いてレンダリングします。これを利用することで Flash とオープンな Web 標準との間の溝を埋められます。この文書では Shumway の利用方法と、バグ修正にコントリビュートする方法について解説します。

ゲーム開発とデバッグのためのツールチェーン

通常のウェブアプリのデバッグとの違いや、ツールについて解説します。多くは開発ツールでカバーされますが、特に有用なツールチェーンのチュートリアルはこちらです。

* 基本的なツールの概要
* シェーダエディタ
* パフォーマンスツール
HTML5 ゲーム開発入門
=============

長所
--

1. HTML5 で作られたゲームはスマートフォン、タブレット、PC、スマート TV で動作します。
2. 他のメディアと同様に、ウェブ全体でゲームを広告、宣伝することができます。
3. 支払い。好きな支払い処理サービスを使って課金できます。
4. 好きな時にゲームを更新できます。
5. 自身のアナリティクスを集められます。
6. 顧客ともっと身近に繋がれます。
7. プレイヤーはいつでもどこでもゲームをプレイできます。
ウェブ技術
-----

| **機能** | **技術** |
| --- | --- |
| **オーディオ** | ウェブオーディオ API |
| **グラフィック** | WebGL (OpenGL ES
 2.0)
  |
| **入力** | タッチイベント、
 Gamepad API、端末センサー、WebRTC、全画面 API、ポインターロック API |
| **言語** | JavaScript (Emscripten を使って C/C++ を JavaScript にコンパイルする) |
| **ネットワーク** | WebRTC や WebSockets |
| **ストレージ** | IndexedDB や「クラウド」 |
| **ウェブ** | HTML,
 CSS,
 SVG,
 ソーシャル API (およびその他いろいろ！)
  |

全画面 API

全画面のゲームプレイに使います。

Gamepad API

ゲームパッドやゲームコントローラーを使用します。

HTML および CSS

ゲームのユーザーインターフェイスを構築し、装飾し、レイアウトします。

HTML audio

簡単な効果音や音楽を簡単に再生することができます。

IndexedDB

ユーザーデータを自分のコンピューターや 端末に保存します。

JavaScript

 ゲームのコードを書くための高速ウェブプログラミング言語です。
 簡単に既存のゲームを移植するには、 Emscripten や Asm.js を使用します。


ポインターロック API

マウスなどのポインティングデバイスをゲームのインターフェイス内にロックします。

SVG (Scalable Vector Graphics)

ユーザーの画面の大きさや解像度に関わらず、滑らかに拡大縮小できるベクターグラフィックを構築することができます。

型付き配列

JavaScript から生のバイナリーデータにアクセスし、GLテクスチャやゲームデータなど、あらゆるものを操作することができます。

ウェブオーディオ API

オーディオの再生、合成、操作をリアルタイムに制御します。

WebGL

高性能でハードウェアアクセラレーションに優れた三次元（および二次元）グラフィックを作成することができます。OpenGL ES 2.0。

WebRTC

電話会議やチャットのように 2 人のユーザー間で他のアプリケーションのデータをやり取りするなど、音声や映像データを制御するリアルタイム通信です。

WebSockets

アプリやサイトをサーバーに接続し、データをリアルタイムに送受信します。マルチプレイヤーゲームアクションやチャットサービスなどに最適です。

Web Workers

マルチコアプロセッサーのために、独自の JavaScript コードを実行するバックグラウンドスレッドを生成します。

XMLHttpRequest および ファイル API

新しいゲームレベルやアートワークのダウンロード、非リアルタイムのゲームステータス情報の送信など、ウェブサーバーから必要なあらゆるデータを送受信することができます。
純粋な JavaScript を使ったブロック崩しゲーム
============================

* 次のページ »

このステップバイステップのチュートリアルでは、すべて JavaScript だけで書かれた、 HTML5 の `<canvas>` で表示できる簡単な **MDN ブロック崩し**ゲームを作ります。

各ステップには編集可能なライブサンプルがあるので、中間ステージがどのように見えるかを確認しながらプレイすることができます。画像のレンダリングと移動、衝突検出、制御機構、勝敗状態などの基本的なゲーム メカニックを使用するための `<canvas>` 要素の基本的な使用方法を学びます。

このシリーズのほとんどの記事は理解するために初歩または中級レベルの JavaScript の知識を必要とします。このチュートリアルを一通りこなすことで簡単なウェブゲームを作れるようになるでしょう。

![パドルを使用してボールを弾き、スコアとライフをキープしながらレンガのフィールドを破壊していくゲーム「MDN Breakout」のゲーム画面。](/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/mdn-breakout-gameplay.png)

レッスン詳細
------

全てのレッスンは以下の通りです。そしてこれから一緒に作る MDN ブロック崩しゲームの各バージョンは GitHub 上で入手可能です。

1. キャンバスを作ってその上に描画する
2. ボールを動かす
3. ボールを壁で反射させる
4. パドルとキーボード操作
5. ゲームオーバー
6. ブロックのかたまりを作る
7. 衝突検出
8. スコアと勝ち負けを記録する
9. マウス操作
10. 仕上げ

まずは JavaScript だけで始めるのがウェブゲーム開発の確実な知識を手に入れる一番良い方法です。そのあと、自分のプロジェクトで使うフレームワークを選びましょう。フレームワークは JavaScript 言語で書かれた単なるツールです。ですから、たとえフレームワークを用いて開発しようとしていてもまずはその言語を学び、手元で実際に何が起こっているか理解すると良いでしょう。フレームワークは開発速度を上げ、ゲームのとるに足らない部分を処理してくれますが、もし何かが思ったように動かないなんてことがあったらいつでもデバッグしたり、あるいは単に JavaScript で自分なりの解を出すということもできるのです。

**メモ:** ゲームライブラリを用いた 2D ウェブゲーム開発に興味があるのであれば、このシリーズに対応する Phaser を使ったブロック崩しゲームも参照してください。

**メモ:** このシリーズはゲーム開発ワークショップのハンズオンの資料として使えます。ゲーム開発全般について話すつもりならこのチュートリアルに基づいた Gamedev Canvas Content Kit も利用できます。

次のステップ
------

それでは始めましょう! 最初の章、 キャンバスを作ってその上に描画するに進みます。

* 次のページ »
Phaser を使用した 2D ブロック崩しゲーム
=========================

* 次のページ » (en-US)

このステップバイステップのチュートリアルでは、シンプルなモバイル **MDN ブロック崩し**ゲーム を、 JavaScript で書き、 Phaser フレームワークを使用して作成します。

各ステップには、編集可能なライブサンプルがあるので、中間ステージがどのように見えるかを確認しながら遊ぶことができます。 Phaser フレームワークを使用して、画像のレンダリングと移動、衝突の検出、コントロールメカニズム、フレームワーク固有のヘルパー関数、アニメーションと調整、勝利と敗北状態などの基本的なゲームメカニズムを使用するための基本を学びます。

この連載記事を最大限に活用するためには、すでに基礎から中級の JavaScript の知識を持っている必要があります。このチュートリアルを動作させた後は、 Phaser を使って自身の簡単なウェブゲームを作ることができるはずです。

![Phaser で作成したゲーム MDN ブロック崩しのゲーム画面。パドルを使用してボールを跳ね返し、ポイントとライフを維持しながら、レンガのフィールドを破壊することができます。](/ja/docs/Games/Tutorials/2D_breakout_game_Phaser/mdn-breakout-phaser.png)

学習内容
----

すべてのレッスン、そして私たちが一緒に作っている MDN ブロック崩しゲームのさまざまなバージョンは、 GitHub で利用可能です。

1. フレームワークの初期化 (en-US)
2. 拡大縮小 (en-US)
3. 資産を読み込んで画面の内側へ表示する (en-US)
4. ボールを移動させる (en-US)
5. 物理演算
6. 壁で跳ね返す (en-US)
7. プレイヤーパドルと操作 (en-US)
8. ゲームオーバー (en-US)
9. レンガ場を作る (en-US)
10. 衝突判定 (en-US)
11. 得点 (en-US)
12. ゲームの勝利 (en-US)
13. ライフの追加 (en-US)
14. アニメーションと調整 (en-US)
15. ボタン (en-US)
16. ゲームプレイのランダム化 (en-US)

学習経路に関する注意点として、純粋な JavaScript から始めることが、ウェブゲーム開発の確かな知識を得るための最良の方法です。もしあなたが純粋な JavaScript のゲーム開発にまだ慣れていないなら、先にこのシリーズの対になるものである純粋な JavaScript を使用した 2D ブレイクアウトゲームをやっておくことをお勧めします。

その後、好きなフレームワークを選んで、プロジェクトに使用することができます。私たちは、良いサポートとコミュニティが利用でき、プラグインの良いセットがある、堅実なフレームワークである Phaser を選びました。フレームワークは、開発時間を短縮し、退屈な部分を引き受けてくれるので、あなたは楽しいことに集中することができます。しかし、フレームワークは常に完璧というわけではありません。予期せぬことが起こったり、フレームワークが提供しない機能を書きたい場合、純粋な JavaScript の知識が必要になります。

**メモ:** この連載記事は、ゲーム開発の体験型ワークショップの素材として使用することができます。また、Phaser を使ったゲーム開発についての講演を行う場合、このチュートリアルを元にした Gamedev Phaser Content Kit を使用することができます。

次のステップ
------

では、始めましょう。シリーズの最初の部分 - フレームワークの初期化 (en-US)に向かいましょう。

* 次のページ » (en-US)