ウェブサイトのデザインは何から始めればよい？ - ウェブ開発を学ぶ

ウェブサイトのデザインは何から始めればよい？
======================

この記事では、すべてのプロジェクトにおいて重要な最初のステップである、「そのプロジェクトで何を達成したいのか」を定義することについて述べます。

|  |  |
| --- | --- |
| 前提条件: | なし |
| 目標: | 目標を定義してウェブプロジェクトの方向性を明らかにする方法を学びます。 |

概要
--

ウェブプロジェクトを開始するとき、多くの人が技術面に焦点を当てます。もちろん、作るものの技術に精通していなければなりませんが、本当に重要なことは何を達成したいかということです。そう、それは明らかなことのようですが、あまりにも多くのプロジェクトが技術的ノウハウがないためではなく、目標とビジョンがないために失敗します。

あなたがアイディアを得てそれをウェブサイトにしたいときには、何かをする前に答えるべきいくつかの質問があります。

* 本当にしたいことは何ですか？
* ウェブサイトは目標達成にどのように役立つでしょうか？
* 目標を達成するために何をどのような順序で実行する必要がありますか？

これらはすべてプロジェクトのアイディア化と呼ばれ、初心者であれ、経験豊富な開発者であれ、目標を達成するための最初のステップです。

アクティブラーニング
----------

*利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください。*

より深く掘り下げる
---------

プロジェクトは技術的側面から始まることはありません。ミュージシャンは、最初に何を演奏したいかというアイディアがない限り、決して曲を作ってはいけません。これは画家、作家、ウェブ開発者にとっても同じことです。技術は 2 番目に来ます。

技術は明らかに重要です。ミュージシャンは楽器をマスターする必要があります。しかし、良いミュージシャンは、アイディアなしに良い音楽を生み出すことはできません。したがって、コードやツールなどの技術的な側面に飛び込む前に最初のステップに戻り、実行したいことを詳細に決定する必要があります。

はじめに友人と 1 時間ディスカッションするのは良いことですが、不十分です。自分のアイディアを具現化するためにどのような道をたどらなければならないかを明確に把握するためには、座ってアイディアを体系化する必要があります。これを行うには、紙とペンと、少なくとも次の質問に答えるための時間が必要です。

**メモ:** プロジェクトのアイディア化を実行するための方法は無数にあります。ここにそれらすべてを提示することはできません (一冊の本では不十分です)。ここでは、プロフェッショナルがプロジェクトの理念、プロジェクト計画、およびプロジェクト管理と呼ぶものを処理する簡単な方法を紹介します。

### 本当にしたいことは何ですか？

他のすべてを動かすので、これは答えるべき最も重要な問いです。到達したいすべての目標を列挙してください。お金を稼ぐための商品の販売、政治的意見の表明、新しい友達の会合、ミュージシャンとのギグ、猫の写真の収集など、それは何でもかまいません。

あなたがミュージシャンだとしましょう。あなたは次のことができるとします。

* 人々に音楽を聞いてもらう
* グッズを売る
* 他のミュージシャンとの交流
* 自分の音楽について語る
* 動画で音楽を教える
* あなたの猫の写真を公開する
* 新しいガールフレンド/ボーイフレンドを探す

そのようなリストを取得したら優先順位を付ける必要があります。目標を最も重要なものからそうでないものに順番に並べます。

* 新しいガールフレンド/ボーイフレンドを探す
* 人々に音楽を聞いてもらう
* 自分の音楽について語る
* 他のミュージシャンとの交流
* グッズを売る
* 動画で音楽を教える
* あなたの猫の写真を公開する

このシンプルな練習−目標を作成し、並び替えること−は意思決定をするうえでの助けになります。(これらの機能を実装し、これらのサービスを使用して、これらのデザインを作成しますか？)

これで、優先順位付けされた目標リストが作成されたので、次の質問に移りましょう。

### ウェブサイトを使ってどのように目標を達成する？

あなたは目標のリストを持っていて、その目標に到達するためにウェブサイトが必要だと感じているわけです。本当にそうでしょうか？

例を振り返ってみましょう。音楽に関連する5つの目標、私生活に関連する1つの目標（大切な人を見つける）、そして完全に無関係な猫の写真がありましたね。これらすべての目標に応じた単一のウェブサイトを構築することは、合理的でしょうか？必要なのでしょうか？結局のところ、新しいウェブサイトを作らなくても、既存のウェブサービスの数々があなたをゴールに導いてくれるかもしれないのです。

ガールフレンド/ボーイフレンドを見つけることは、まったく新しいサイトを構築するよりも、既存のリソースを使用する方が理にかなっている典型的なケースです。なぜか？なぜなら、実際に彼女や彼氏を探すよりも、ウェブサイトの構築やメンテナンスに多くの時間を費やすことになるからです。私たちの目標は最も重要なことなので、ゼロから触れるよりも、既存のツールを活用することにエネルギーを費やすべきでしょう。繰り返しになりますが、写真を紹介するためのウェブサービスはすでにたくさん稼働率があるので、うちの猫のかわいさを広めるためだけに新しいサイトを作る価値はないでしょう。

他の 5 つの目標は、すべて音楽に関連するものです。もちろん、これらの目標に対応できるウェブサービスはたくさんありますが、この場合、私たち自身の専用ウェブサイトを構築することが理にかなっています。このようなウェブサイトは、私たちが公開したいものを単一の場所に集め（目標3、5、6に有効）、私たちと一般の人々との交流を促進する（目標2、4に有効）最良の方法なのです。要するに、これらの目標はすべて同じトピックを中心に展開されているので、すべてを一箇所にお持ちになることで、目標を達成し、フォロワーが私たちとつながるのに役立つのです。

ウェブサイトは、目標達成のためにどのように役立つのでしょうか？それに答えることで、目標に到達するための最適な方法が見つかり、無駄な労力を省くことができるのです。

### 目標を達成するために何をどのような順序で実行する必要がありますか？

何を達成したいのかがわかったところで、その目標を実行可能なステップに変えていきましょう。補足ですが、目標は必ずしも設定されたものではありません。特に、予期せぬ障害にぶつかったり、考えが変わったりした場合は、プロジェクトの進行中であっても、時間の経過とともに変化していくものです。

長い説明をするのではなく、この表の例に戻ってみましょう。

| 目標 | すべきこと |
| --- | --- |
| 人々に音楽を聞いてもらう | 1. 音楽を録音する
2. オンラインで使える音声ファイルを用意する（既存のウェブサービスでできないか？）
3. ウェブサイトの一部で、音楽にアクセスできるようにする。
 |
| 自分の音楽について語る | 1. 議論のきっかけとなる記事をいくつか書く
2. 記事の見た目を定義する
3. それらの記事をウェブサイトに掲載する（どうすればいいのか？）
 |
| 他のミュージシャンとの交流 | 1. 連絡手段を提供する（メール？Facebook？電話？郵便？）
2. ウェブサイトから連絡先を見つける方法を定義する
 |
| グッズを販売する | 1. グッズを制作する
2. グッズを保管する
3. 発送の方法を探す
4. 支払いを処理する方法を探す
5. サイト上で注文できる仕組みを作る
 |
| 動画で音楽を教える | 1. 動画レッスンを収録する
2. オンラインで見られる動画ファイルを用意する（これも、既存のウェブサービスでできるのでは？）
3. ウェブサイトの一部で動画にアクセスできるようにする
 |

2 つのことに注意してください。まず、これらの項目の中には、ウェブに関係のないものもあります（音楽の録音、記事の執筆など）。多くの場合、そうしたオフラインの活動は、ウェブ側のプロジェクトよりもさらに重要です。たとえば販売では、人々が注文できるウェブサイトを作ることよりも、供給、支払い、出荷を処理することの方がはるかに重要で、時間もかかります。

次に、実行可能なステップを設定することで、新たに答えなければならない疑問が生まれます。通常、私たちが当初考えていたよりも多くの疑問が生じるものです。（例: 自分でやるべきか、誰かに依頼すべきか、それとも第三者のサービスを使用すべきか？）

結論
--

このように、「ウェブサイトを作りたい」という単純な思いつきから、長い ToDo リストが生まれ、それは考えれば考えるほど長くなっていきます。すぐに圧倒されてしまいそうですが、慌てないでください。すべての質問に答える必要はありませんし、リストにあることをすべて実行する必要もないのです。大切なのは、自分が何をしたいのか、どうすればそこに返されるのか、というビジョンを持っていることです。明確なビジョンが持てたなら、それをいつ、どのように実行するかを決める必要があります。大きな仕事を、実行可能な小さなステップに分解してください。そして、その小さな一歩が大きな成果につながるのです。

この記事から、ウェブサイトを作成するための大まかな計画を立てることができるはずです。次の記事は、インターネットの仕組みです。


どうすればすべての種類のユーザーのためにデザインすることができるか？ - ウェブ開発を学ぶ

どうすればすべての種類のユーザーのためにデザインすることができるか？
==================================

この記事ではあらゆる種類のユーザーのためのウェブサイトを設計する基本的なヒントを紹介します。

|  |  |
| --- | --- |
| 前提条件: | ここではアクセシビリティに応じた詳細な説明はしていませんので、まずアクセシビリティとは何かを読んでください。 |
| 目標: | ユニバーサルデザインとは、障碍や技術的な制約に関係なく、すべての人のためにデザインすることを意味します。この記事では、ユニバーサルデザインのための最も重要な即効性のある方法を挙げています。 |

概要
--

ウェブサイトを構築する際、最も考慮すべき課題のひとつがユニバーサルデザインです。障碍の有無、技術的制約、文化、場所などにかかわらず、すべてのユーザーに対応することです。

アクティブラーニング
----------

*利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください。*

より深く掘り下げる
---------

### カラーコントラスト

文字を読みやすくするために、背景色とのコントラストが高い文字色を使用しましょう。視覚障碍者や街中でスマホを使用する人のために、テキストは特に読みやすくしましょう。

W3C では、前景と背景の輝度の比を計算するアルゴリズムで、良い色の混合を定義しています。計算がかなり複雑に思えるかもしれませんが、その仕事を代行してくれるツールに頼ることができます。

Paciello Group の Color Contrast Analyser をダウンロードし、インストールしてみましょう。

**メモ:** 他にも、WebAIM の Color Contrast Checker のようなコントラストチェッカーがオンライン上に多数あります。ローカルチェッカーをお勧めするのは、色の数値を探すための画面上のカラーピッカーがパッケージされているからです。

 例えば、このページの色をカラーコントラストアナライザーで調べて、結果を確認してみましょう。

 ![Color contrast on this page: excellent!](/ja/docs/Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_users/color-contrast.png)

文字と背景の輝度コントラスト比は 8.30:1 で、最低基準 (4.5:1) を超えており、多くの視覚障碍者がこのページを読むことができるはずです。

### フォントサイズ

ウェブサイトにおけるフォントサイズは、相対単位でも絶対単位でも指定することができます。

#### 絶対単位

絶対単位とは、比率計算ではなく、いわば設定された大きさを参照するもので、ほとんどの場合、ピクセル (`px`) で表現されます。例えば、 CSS でこのように宣言した場合、

```css
body {
  font-size: 16px;
}
```

… これは、何が起ころうともフォントサイズは 16 ピクセルでなければならない、とブラウザーに指示していることになります。最近のブラウザーは、「ユーザーが拡大率を 100% に設定したときの 16 ピクセル」を依頼しているように装うことで、このルールを回避しています。

しかし、 Internet Explorer は長年、 16 ピクセルを頑なに 16 ピクセルと表示していました。 Internet Explorer 8 に至るまで、拡大縮小しても何も起こりませんでした。まだ存在しているため、私たちは合わせなければなりません。

#### 相対単位

**比例単位**とも呼ばれる相対単位は、親要素を基準として計算されます。相対単位は、ユーザーのシステムの設定を尊重するため、アクセシビリティに友好的です。

相対単位は `em`、`%` や `rem` で表現されます。

パーセントベースのサイズ: `%`

この単位は、ある要素のフォントサイズが、フォントサイズが表現された前の要素の N% でなければならないことを、ブラウザーに指示します。親要素が見つからない場合、ブラウザー内の既定値を基本サイズとして計算します（通常は 16 ピクセルに相当します）。

em ベースのサイズ: `em`

この単位は、 100 分の 1 ではなく、 1 分の 1 で計算することを除けば、パーセントと同じように計算します。 "em" はアルファベットの大文字 "M" の幅と言われています（大雑把に言うと "M" が四角に収まる）。

rem ベースのサイズ: `rem`

この単位はルート要素のフォントサイズに比例し、 `em` のように 1 分の 1 で表現されます。

例えば、基本のフォントサイズを 16px、h1 （大見出し）を 32px 相当で表示したいとします。しかし、 h1 の中に `subheading` クラスの `span` を見つけると、それも既定のフォントサイズ（通常は 16px）でレンダリングしなければならないので、このようにします。

以下は、使用している HTML の例です。

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Font size experiment</title>
  </head>
  <body>
    <h1>
      This is our main heading
      <span class="subheading">This is our subheading</span>
    </h1>
  </body>
</html>
```

パーセントベースの CSS は、次のようになります。

```css
body {
  font-size: 100%;
} /\* ブラウザーの基本フォントサイズの 100% なので、ほとんどの場合、16 ピクセルとしてレンダリングされます。 \*/
h1 {
  font-size: 200%;
} /\* 本文の 2 倍の大きさなので 32 ピクセル \*/
span.subheading {
  font-size: 50%;
} /\* h1 の半分の大きさ、つまり 16 ピクセルで元のサイズに戻ります。 \*/
```

em でも同じ問題が発生します。

```css
body {
  font-size: 1em;
} /\* 1em = ブラウザーの基本フォントサイズの 100% なので、ほとんどの場合、16 ピクセルとしてレンダリングされます。 \*/
h1 {
  font-size: 2em;
} /\* 本文の 2 倍の大きさなので 32 ピクセル \*/
span.subheading {
  font-size: 0.5em;
} /\* h1 の半分の大きさ、つまり 16 ピクセルで元のサイズに戻ります。 \*/
```

ご覧のように、親、親の親、親の親の親などを保有しなければならない場合、計算はすぐに大変なことになります。(ほとんどのデザインはピクセルベースのソフトウェアで行われるため、計算は CSS をコーディングする人が行わなければなりません)。

そこで登場するのが `rem` です。この単位はルート要素のサイズに対する相対的なもので、他の親要素に対するものではありません。 CSS はこのように書き換えることができます。

```css
body {
  font-size: 1em;
} /\* 1em = ブラウザーの基本フォントサイズの 100% なので、ほとんどの場合、16 ピクセルとしてレンダリングされます。 \*/
h1 {
  font-size: 2rem;
} /\* 本文の 2 倍の大きさなので 32 ピクセル \*/
span.subheading {
  font-size: 1rem;
} /\* 元のサイズ \*/
```

もっと簡単でしょう？これは、 Internet Explorer 9 と他のすべての現行ブラウザーでの時点で動作するので、この単位は気軽に使用してください。

**メモ:** Opera Mini は rem のフォントサイズに対応していないことにお気づきかもしれません。結局は独自のフォントサイズを設定することになるので、わざわざフォント単位を与える必要はありません。

#### なぜ比例単位を使用するのか

なぜなら、いつピクセル単位で表記されたテキストの拡大表示を拒否するブラウザーが現れるかわからないからです。また、あなたのウェブサイトの統計情報を確認してください。古いブラウザーからの訪問を受ける可能性があります。

次のことをアドバイスします。

* フォントを `rem` 単位で記述すると、ほとんどのブラウザーはとても満足するはずです。
* 古いブラウザーには、自身の内部エンジンでフォントを表示させましょう。ブラウザーのエンジンは、CSS のプロパティや 値に対応できない場合は無視するので、デザイナーのビジョンに忠実でなくても、ウェブサイトが使用できるようになります。古いブラウザーは、いずれは消えていくものです。

**メモ:** ご使用のブラウザーによって異なるかもしれません。古いブラウザーに合わせなければならない場合は、 `em` を使用し、もう少し計算する必要があります。

### 行の長さ

ウェブ上の行の長さについては、長年の議論がありますが、ここではその話をします。新聞があった頃、印刷会社は、行が長すぎると読者の目が次の行に行きにくくなることに気づきました。その解決策は？段組みです。

もちろん、ウェブに移行してもこの問題は解消さ れません。読者の目は、行から行へと移動するシャトルのようなものです。目に優しくするためには、行の幅を 60 文字か 70 文字程度に制限することです。（訳注：日本語では 40 文字程度と言われています。）

そのためには、テキストのコンテナーの大きさを指定します。この HTML を考えてみましょう。

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Font size experiment</title>
  </head>
  <body>
    <div class="container">
      <h1>
        This is our main heading
        <span class="subheading">This is our subheading</span>
      </h1>

      <p>[lengthy text that spans many lines]</p>
    </div>
  </body>
</html>
```

ここに、`container` クラスを持つ `div` があります。この `div` には、幅を設定する（`width` プロパティを使用する）か、大きすぎないように最大幅を設定する（`max-width` プロパティを使用する）かのどちらかのスタイルを設定することができます。もし、伸縮性のあるレスポンシブなウェブサイトを作りたいが、ブラウザーの既定の幅が分からない場合は、 `max-width` プロパティを使用して、 1 行に 70 文字まで許容し、それ以上は許容しないようにすることができます。

```css
div.container {
  max-width: 70em;
}
```

### 画像、音声、動画の代替コンテンツ

ウェブサイトには、プレーンテキスト以外のものが入ることがよくあります。

#### 画像

画像には装飾的なものと情報的なものがありますが、ユーザーに見てもらえるという保証はありません。例えば、以下のような場合です。

* 視覚障碍者は、テキストしか扱えないスクリーンリーダーに頼っています。
* 読者が、 CDN から発信される画像をブロックする非常に厳しいイントラネットを使用している可能性があります。
* 読者が、特にモバイル機器の帯域幅を節約するために、画像を無効にしている可能性があります （下記参照）。

装飾的な画像

これらは単なる装飾であり、実際の情報を伝えるものではありません。ほとんどの場合、背景画像で置き換えることができます。空の `alt` 属性があることを確認してください。 `<img src="deco.gif" alt="">` のように、テキストが詰まることがないようにします。

情報的な画像

情報を伝えるために使用されることから、その名がつきました。例えば、グラフを表示したり、人の身振りを表示したり、その他の情報を表示することができます。少なくとも、関連する `alt` 属性を提供する必要があります。

画像が簡潔に記述できるのであれば、`alt`属性を提供すればよく、それ以上のことをする必要はありません。画像が簡潔に記述できない場合は、同じページで同じ内容を別の形で提供するか（例えば、円グラフを同じデータを提供する表で補完する）、あるいは `longdesc` 属性に頼らなければならないでしょう。この属性の値は、画像の内容を詳細に記述したリソースを明示的に指す URL です。

**メモ:** `longdesc` を使用すること、さらにはその存在については、かなり長い間議論されてきました。 W3C の Image Description Extension (longdesc) を参照すると、詳しい説明と徹底的な例が載っています。

#### 音声/動画

マルチメディアコンテンツの代替も提供することが必要です。

字幕／クローズキャプション

音声が聞こえない訪問者のために、動画にキャプションを入れる必要があります。ユーザーの中には、聴覚障害をお持ちの方や、スピーカーが機能しない方、（電車の中など）騒がしい環境で作業している方もいます。

文字起こし

字幕は、誰かが動画を見て初めて機能するものです。多くのユーザーは時間がなかったり、適切なプラグインやコーデックがなかったりします。さらに、検索エンジンは、コンテンツをインデックスするために、主にテキストに頼っています。これらの理由から、動画/音声ファイルをテキストで書き起こしたものを提供してください。

### 画像の圧縮

ユーザーによっては、画像を表示することを選んでも、特に発展途上国やモバイル機器では、利用できる帯域幅が限られている場合があります。ウェブサイトを成功させたいのであれば、画像を圧縮してください。オンラインでもローカルでも、様々なツールがあります。

* **インストールするソフトウェア** ImageOptim (Mac)、OptiPNG （全プラットフォーム）、PNGcrush （DOS、Unix/Linux）
* **オンラインツール** Dynamic drive の Online Image Optimizer （帯域幅がより有効になるように、ある形式から別の形式に自動的に変換することができます。）


アクセシビリティを推進する HTML の機能とは？ - ウェブ開発を学ぶ

アクセシビリティを推進する HTML の機能とは？
=========================

以下のコンテンツは、さまざまな障害を持つ人々にとってウェブページのアクセシビリティをより高めるために使用できる HTML の特定の機能について説明しています。

タブ移動
----

ポインティングデバイスを使用しない、または使用できないユーザーは、リンク間を `Tab` で移動できます。ですから、リンクは論理的なタブ移動の順序になっている必要があります。 `tabindex` 属性を使用すると、この順序を定義することができます。 HTML が線形である場合（そうあるべきなのですが）、論理的なタブ移動の順序は自動的に正しい位置に配置されるはずです。

```html
<ul>
  <li><a href="here.html" tabindex="1">Here</a></li>
  <li><a href="there.html" tabindex="3">There</a></li>
  <li><a href="anywhere.html" tabindex="2">Anywhere</a></li>
</ul>
```

この例では（これは純粋にデモンストレーションとして使用されています - こうはしないでください）、タブは "Here" から "Anywhere" 、"There" の順にジャンプします。

リンクタイトル
-------

自己説明的でないリンクがある場合や、リンク先をより詳細に説明をすることで好ましいことがある場合、`title`属性を使用してリンクに情報を追加することができます。

```html
<p>
  I'm really bad at writing link text.
  <a
 href="inept.html"
 title="Why I'm rubbish at writing link text: An explanation and an apology."
 >Click here</a
 >
  to find out more.
</p>
```

アクセスキー
------

**アクセスキー**を使用すると、**キーボードショートカット**をリンクに割り当てることができ、ナビゲーションが簡単になります。通常、ユーザーが `Alt` キーまたは `Ctrl` キーを押しながらアクセスキーを押すとフォーカスが移動します。正確なキーの組み合わせはプラットフォームによって変わります。

```html
<a href="somepage.html" accesskey="s">Some page</a>
```

スキップリンク
-------

タブ移動を補助するために、ユーザーがあなたのウェブページの大きな塊を飛び越えることを可能にするリンクを提供することができます。たとえば、ユーザーが多すぎるナビゲーションリンクを飛び越えて、すべてのリンクを巡回するのではなくページのメインコンテンツを読むことができるようにしたい場合があります。

```html
<header>
  <h1>The Heading</h1>
  <a href="#content">コンテンツまでスキップ</a>
</header>

<nav>
  <!-- navigation stuff -->
</nav>

<section id="content">
  <!--your content -->
</section>
```


アクセシビリティとは？ - ウェブ開発を学ぶ

アクセシビリティとは？
===========

この記事はウェブアクセシビリティの背景にある基本的な概念を紹介します。

|  |  |
| --- | --- |
| 前提条件: | None. |
| 目標: | アクセシビリティとは何か、なぜそれが重要なのかを学びます。 |

概要
--

身体的または技術的な制約のために、もしかしたら訪問者は、期待通りにウェブサイトを体験することができないかもしれません。この記事では、アクセシビリティの一般的な原則と、いくつかのルールについて説明します。

アクティブラーニング
----------

*利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください。*

より深く掘り下げる
---------

### アクセシビリティ: 一般的な原則

アクセシビリティというと、まずネガティブな制限を連想するかもしれません。この建物はアクセシビリティを確保しなければならないので、ドアの幅やトイレの大きさ、エレベーターの配置など、これらの規則に従わなければならないのです。

それは、アクセシビリティを考える上で、狭量な考え方です。アクセシビリティは、人々に力を与え、より多くのお客様にサービスを提供するための素晴らしい方法だと考えてください。ブラジルの人たちは、あなたの英語のウェブサイトを見て何ができるでしょうか。スマートフォンを持っている人たちが、大きなデスクトップモニターと無制限の帯域幅のために設計された重くて雑然としたウェブサイトを閲覧できるでしょうか。彼らはどこか別の場所に行くでしょう。一般的に、**私たちは、すべてのターゲット顧客の視点から製品について考え、それに応じて適応しなければならない**と言われています。従って、アクセシビリティなのです。

### ウェブアクセシビリティ

ウェブ特有の文脈では、アクセシビリティとは、障害、場所、技術的な制約、その他の状況にかかわらず、誰もがコンテンツから恩恵を受けることができることを意味します。

動画について考えてみましょう。

聴覚障碍

聴覚障碍者は動画からどのような恩恵を受けるのでしょうか？字幕を提供するか、あるいはそれより良いことは、全文を書き起こす必要があります。

また、人それぞれのニーズに合わせて、音量を調整できるようにしましょう。

視覚障碍

この場合も、ユーザーが動画を再生しなくても参照できるテキスト形式の写本と、音声解説（動画の中で何が起こっているかを説明する画面外の音声）を提供しましょう。

中断機能

ユーザーは動画の中の人物を理解するのに苦労することがあります。字幕を読んだり、情報を処理したりするために、動画を一時停止できるようにしましょう。

キーボードの能力

ユーザーが引っかかることなく、動画へのタブイン/アウト、再生、一時停止を行えるようにします。

#### ウェブアクセシビリティの基本

基本的なウェブアクセシビリティのために必要なものは、以下の通りです。

* 視覚に障碍をお持ちのユーザーや回線速度の遅いユーザーのために、意味を伝えるために画像が必要な場合は、代替用のテキストを入れるようにしましょう。
* すべてのユーザーがグラフィカルインターフェイス（メニューの展開など）をキーボードのみ（例えばタブキーとリターンキー）で操作できるようにしましょう。
* コンテンツの言語を明示的に指定する属性を提供し、画面の内側からテキストを正しく読み取ることができるようにしましょう。
* ユーザーがキーボードだけで、引っかからずにこのページ上のすべてのウィジェットに移動できるようにしましょう。（少なくともタブインとタブアウトはできるようにしてください。）

そして、それはほんの始まりに過ぎません。

### アクセシビリティのチャンピオンたち

1999 年以降、 W3C は Web Accessibility Initiative (WAI) という作業グループを運営しており、ガイドラインやサポート資料、国際的なリソースを通じてアクセシビリティを推進しています。

より詳しく
-----

以下を参照して下さい。

* アクセシビリティの関するウィキペディアの記事
* WAI (W3C のウェブアクセシビリティイニシアティブ)
次のステップ
------

アクセシビリティは、ウェブサイトのデザインと技術的な構造の両方に影響を与える可能性があります。

* 私たちはデザインの観点から、すべてのタイプのユーザーのためのデザインについて学ぶことを提案します。
* もし、技術的な側面の興味を持っているなら、ウェブページにおける埋め込み画像の方法を勉強することができます。


一般的なウェブレイアウトには何が含まれているのか？ - ウェブ開発を学ぶ

一般的なウェブレイアウトには何が含まれているのか？
=========================

ウェブサイトのページをデザインする際、最も一般的なレイアウトを把握しておくとよいでしょう。

|  |  |
| --- | --- |
| 前提条件: | ウェブプロジェクトで何を実現したいのかについて既に考えていること。 |
| 目標: | ウェブページのどこに何を置くか、どのように置くかを学びます。 |

概要
--

ウェブデザインについて語るのには理由があります。ウェブデザインは白紙の状態からスタートし、さまざまな方向へ展開することができます。また、あまり経験がない場合、白紙のページから始めるのは少し怖いかもしれません。 25 年以上の経験を持つ私たちが、サイト設計に役立つ共通の経験則をお教えします。

モバイルウェブに新たに注目が集まっている現在でも、主流のウェブページはほぼすべてこのパーツから作られています。

ヘッダー

サイト内の全ページの上部に表示されます。すべてのページに関連する情報（サイト名やロゴなど）と、使いやすいナビゲーションシステムが含まれています。

本文

最大の領域で、現在のページに固有のコンテンツを含みます。

サイドにあるもの

1) 本文を補完する情報。 2) ページ間で共有される情報。 3) 代替ナビゲーションシステム。実際、すべてがこのページの本文で絶対には必要でないものです。

フッター

本サイトの各ページの下部に表示されます。ヘッダーと同様、法的な通知や連絡先など、あまり目立たないグローバルな情報が含まれています。

これらの要素は、すべてのフォームファクターで非常に一般的ですが、さまざまな方法でレイアウトすることができます。以下に例を示します（**1** はヘッダー、 **2** はフッター、 **A** は本文、 **B1, B2** はサイドにあるものを表します）。

**1 列レイアウト**。特にモバイルブラウザーでは、小さな画面の中でごちゃごちゃしないようにすることが重要です。

![1 列レイアウトの例。本文が一番上で、その下にサイド記事が積み重なっています。](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/1-col-layout.png)

**2 列レイアウト**。タブレットは中型の画面であるため、タブレットをターゲットによく使用されます。

![基本的な 2 列レイアウトの例。左列にサイド記事、右列に本文を配置。](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-right.png)
![基本的な 2 列レイアウトの例。右列にサイド記事、左列に本文を配置。](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-left.png)

**3 列レイアウト**。画面の大きなデスクトップのみに適しています。（ただし、デスクトップユーザーの多くも、全画面表示よりも小さなウィンドウで見ることを好みます）。

![基本的な 3 列レイアウトの例。左右の列にサイド記事、中央の列に本文。](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/3-col-layout.png)
![もう一つの 3 列レイアウトの例。左側が横並び、右側の列が本文です。](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/3-col-layout-alt.png)
![もう一つの 3 列レイアウトの例。右側が横並び、左側の列が本文です。](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/3-col-layout-alt2.png)

それらを一斉に混ぜ合わせるところから、本当の楽しみが始まるのです。

![混合レイアウトの例。本文が上、その下にサイド記事が横に並んでいます。](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/1-col-layout-alt.png)
![混合レイアウトの例。左列に本文、右列にサイド記事を積み重ねたもの。](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-left-alt.png)
![混合レイアウトの例。左列にサイド記事、右列に本文を配置し、本文の下にサイド記事を配置したもの。](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-mix.png)
![混合レイアウトの例。 1 行目の左側に本文、同じ行の右側に 1 つ目のサイド記事、2 行目に 2 つ目のサイド記事が行全体に配置。](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-mix-alt.png)…

これらはあくまで例であり、レイアウトは自由です。画面上でコンテンツが動くこともありますが、常にヘッダー（1）を一番上に、フッター（2）を一番下に置いていることにお気づきでしょうか。また、本文（A）は最も重要なので、ほとんどの空間をそれに充てます。

これらは、みなさんが描くことのできる経験則です。もちろん、複雑なデザインや例外もあります。他の記事では、レスポンシブなサイト（画面の大きさに従って変化するサイト）や、ページごとにレイアウトが異なるサイトのデザイン方法について説明します。今のところ、サイト全体でレイアウトを統一するのが最善です。

アクティブラーニング
----------

*利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください。*

より深く掘り下げる
---------

ここで、有名なウェブサイトから、もう少し具体的な例を取り上げてみましょう。

### 1 列レイアウト

**Invision application**. 一般的な 1 列レイアウトで、ひとつのページにすべての情報を直線的に提供するものです。

![1　列レイアウトの例](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-product.jpg)
![ヘッダー、本文、サイド記事の積み重ね、フッターの1列レイアウト](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-product-overlay.jpg)

とても簡単です。ただ、多くの人がデスクトップからサイトを閲覧することに変わりはないので、デスクトップでも使いやすく、読みやすいコンテンツにしてください。

### 2 列レイアウト

**Abduzeedo** はシンプルなブログレイアウトです。ブログは通常、 2 つの列を持っています。太い列は本分用で、細い列は横に並べるもの（ウィジェット、副次ナビゲーションレベル、広告など）用の列です。

![Example of a 2 column layout for a blog](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-blog.jpg)
![A 2 column layout with the main content on the left column](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-blog-overlay.jpg)

この例では、ヘッダーのすぐ下にある画像（B1）を見てください。これは本文と関係がありますが、本文はこれがなくても意味をなすので、この画像を本文と考えることも、横に並んでいるコンテンツと考えることもできます。それはどうでもいいことです。重要なのは、ヘッダーの下に何かを置く場合、それは本文か、本文に直接関連するものでなければならないということです。

### 罠

**MICA**. これはちょっとやっかいですね。3 列レイアウトのようです。

![Example of a false 3 columns layout](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-education.jpg)
![It looks like a 3 columns layout but actually, the aside content is floating around.](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-education-overlay.jpg)

しかし、そうではありません。 B1 と B2 は本文の周りに浮かんでいるのです。 "float" という単語を覚えておいてください。 CSS について学び始めると、ピンとくるはずです。

なぜ 3 列レイアウトだと思ったのでしょうか？右上の画像が L 字型だから、 B1 が移動した本文の補助列のように見えるから、そして MICA ロゴの "M" と "I" が縦の力線を作成しているからです。

これは、古典的なレイアウトがデザインの創造性を支えている良い例です。シンプルなレイアウトは実装が簡単ですが、この分野では自分の創造性を発揮する余地を与えてください。

### より巧妙なレイアウト

**The Opera de Paris**.

![An example of a tricky layout.](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-opera.jpg)
![This is a 2 column layout but the header is overlapping the main content.](/ja/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-opera-overlay.jpg)

基本的には 2 列レイアウトですが、視覚的にレイアウトを崩すような工夫があちこちに見受けられます。特に、ヘッダーが本文の画像に重なっていること。ヘッダーのメニューの曲線と画像の下部の曲線が結びついて、ヘッダーと本文は技術的には完全に別物であるにもかかわらず、一つのもののように見えます。 Opera の例は MICA の例よりも複雑に見えますが、実際には簡単に実装できます（正確には、「簡単」というのは相対的な概念です）。

このように、基本的なレイアウトだけでも、魅力的なウェブサイトを作ることができます。自分の好きなウェブサイトを保有し、ヘッダー、フッター、本文、サイドコンテンツはどこにあるのか、自問してみてください。これはうまくいくデザイン、いかないデザインのヒントになりますよ。


ブラウザーの開発者ツールとは？ - ウェブ開発を学ぶ

ブラウザーの開発者ツールとは？
===============

近頃のブラウザーにはパワフルな開発者ツールが入っています。開発者ツールでは、現在の HTML や CSS、JavaScript の状態を検証したり、ページがどういった資産にアクセスし、どれだけ時間がかかったかといった多様なことができます。この記事ではブラウザーの開発者ツールの使い方について説明します。

**メモ:** 下のサンプルを実行していく前に、ウェブ入門の記事の中で作りあげる、初心者向けウェブサイトの例を開いてください。後ほどこれを使って説明します。

ブラウザーの開発者ツールの開き方
----------------

開発ツールは、使用するブラウザーによって異なりますが、おおよそ次のようなサブウインドウに表示されます。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/devtools_63_inspector.png)

どのように開くのかというと、 3 つの方法があります。

* ***キーボード:*** *`Ctrl` + `Shift` + `I`* ですが、以下のブラウザーでは異なります。
* **Internet Explorer および Edge:**
`F12`
    + **macOS:** *`⌘` + `⌥` + `I`*
* ***メニューバー:***
    + **Firefox:**
    ![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) メニュー ➤ ウェブ開発 ➤ 開発者ツールを開く
    + **Chrome:** その他のツール ➤ 開発者ツール
    + **Safari:** 開発 ➤ Web インスペクタ (もし、開発メニューが表示されていない場合は Safari ➤ 設定 ➤ 詳細 を開いて、メニューバーに[開発]メニューを表示 のチェックボックスをオンにします。)
    + **Opera** では 開発者用ツール ➤ Web インスペクタ
* **コンテキストメニュー:** ウェブページ上の項目で、長押しまたは右クリック (Mac では Ctrl + クリック) し、表示されたコンテキストメニューより**要素を調査**を選択してください（さらに、この方法では右クリックで選択した要素がハイライトされて表示されます）。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/inspector_context.png)

インスペクター: DOM の内容が見られる CSS エディター
-------------------------------

開発者ツールはたいてい最初にインスペクターが開きます。インスペクターの見た目は下に示すスクリーンショットのような感じです。このツールは実行時/表示時に HTML の状態がどのようになっているか見せてくれます。また、CSS がどのようにページ内の要素に適用されているかも見られます。そして、 HTML と CSS をその場で簡単に編集し、ブラウザーのビューポートに表示されている結果に反映することができます。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/inspector_highlighted.png)

もしインスペクターが表示されていない場合、

* インスペクタータブをタップまたはクリックしてください。
* Internet Explorer では、 DOM Explorer または `Ctrl` + `1` を押してください。
* Microsoft Edge や Opera では、要素をタップ／クリックしてください。
* Safari では、それに類するような名前はついていませんが、HTML が見えるでしょう。もし、画面に表示するように何も選択していなければ、スタイルボタンを押すことで CSS が見られます。
### DOM インスペクターについて詳しく知る

まずは、DOM インスペクター上の HTML の要素を右クリックして、コンテキストメニューを見てみましょう。メニューの表示はブラウザーによって異なりますが、重要な機能はほぼ同じです。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/dom_inspector.png)

* **ノードを削除** (要素を削除の場合もあり) は現在選択中の要素を削除します。
* **HTML として編集** (属性を追加や、テキストの編集の場合もあり) はその場で HTML を編集し、結果を見ることができます。テストやデバッグの際にとても便利です。
* **hover / active / focus** 要素を強制的に選択した状態にトグルします。その状態での見た目を確認することができます。
* **コピー** 現在選択されている項目の HTML をコピーします。
* CSS パスをコピーする や、XPath をコピーする といったメニューがあるブラウザーもあります。これは CSS のセレクターや、現在の HTML要素への XPath 表現のコピーを可能とするものです。

それでは表示されている DOM を編集してみましょう。要素をダブルクリックしたり、右クリックして、HTML として編集を選んでみましょう。いろいろと変更してみても問題ありませんが、保存ができませんのでご注意を。

### CSS エディターについて詳しく知る

最初は CSS エディターは現在選択中の要素に適用されている CSS ルールを表示しています。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/css_inspector.png)

以下の機能は特に便利です。

* 現在の要素に適用されている CSS ルールが詳細度の高い順に表示されています。
* それぞれの宣言の隣にあるチェックボックスをクリックして、その宣言が消されるとどうなるかを試すことができます。
* 一括指定プロパティの隣にある矢印を開くと、それぞれの個別指定プロパティに対応する現在の値が表示されます。
* 各プロパティの名前か値をクリックすると、テキストボックスが表示され、変更することで、見た目のプレビューをその場で確認することができます。
* 各宣言の隣には、その宣言が書かれているファイル名と行数が表示されています。ほとんどの場合、クリックすると開発ツールのその場所にジャンプし、編集したり保存したりすることが可能です。
* 閉じ中括弧をクリックすることで、新しい行に新しくルールを追加するためのテキストボックスを表示させることができます。

CSS ビューアーの一番上にいくつかのタブメニューがあることに気づいたでしょうか。

* **計算済み**: このタブはブラウザーによって求められた、現在選択中の要素に適用されている設定値が見られます。
* **レイアウト**: Firefox では、この領域には 2 つの部分があります。
    + **ボックスモデル**: このタブは現在選択中の要素に適用されているボックスモデルがどれだけの大きさになっているかが一覧できます。
    + **グリッド**: 閲覧しているページが CSS グリッドを使用している場合、この部分でグリッドの詳細を確認することができます。
* **フォント**: Firefox ではこのタブに現在選択中の要素のフォント設定が表示されます。
### もっと詳しく知る

各ブラウザーのインスペクターの詳細については以下をご覧ください。

* Firefox インスペクター
* Internet Explorer DOM エクスプローラー (英語)
* Chrome DOM インスペクタ (Opera のインスペクタもこれと同じ動作です)
* Safari DOM インスペクタおよびスタイルエクスプローラー (英語)
JavaScript デバッガー
----------------

JavaScript デバッガーでは、変数の値を見たり、ブレークポイント（コードの中で実行を一時停止したい場所）を設定して、コードの正常な実行を妨げる問題を特定したりすることができます。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/firefox_debugger.png)

デバッガーを起動するは、次のようにします。

**Firefox**:
 ![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) ➤ *ウェブ開発* ➤ *デバッガー* を選択するか、 `Ctrl` + `Shift` + `S` を押すかして JavaScript デバッガーを開いてください。ツールが既に開いている場合は、**デバッガー**タブをクリックしてください。

**Chrome**: 開発者ツールを開き、**ソース**タブを選択します。（Operaも、これと同じ方法で動作します）。

**Edge および Internet Explorer 11**: `F12` を押してから `Ctrl` + `3` を押すか、 ツールがすでに表示されている場合は、デバッガータブをクリックしてください。

**Safari**: 「開発者ツール」を開き、「デバッガー」タブを選択します。

### デバッガーの探究

Firefox の JavaScript デバッガーには、 3 つのペインがあります。

#### ファイルリスト

左側の最初のペインには、デバッグしているページに関連するファイルのリストが表示されます。この一覧から、作業したいファイルを選択してください。ファイルをクリックすると、そのファイルが選択され、デバッガーの中央のペインにその内容が表示されます。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/file_list.png)

#### ソースコード

実行を一時停止したい場所にブレークポイントを設定します。次の画像では、18 という数字が強調表示されていますが、これはその行にブレークポイントが設定されていることを示しています。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/source_code.png)

#### ウォッチ式とブレークポイント

右側のペインには、追加したウォッチ式と設定したブレークポイントの一覧が表示されます。

画像では、最初のセクションの **Watch expressions** に、変数 listItems が追加されていることがわかります。リストを展開させると、配列内の数値が表示されます。

次のセクション、 **Breakpoints** では、ページ上に設定されたブレークポイントが一覧表示されます。 example.js では、 `listItems.push(inputNewItem.value);` という文にブレイクポイントが設定されています。

最後の 2 つのセクションは、コードを実行しているときのみ表示されます。

**Call stack** のセクションは、現在の行に返されるためにどのようなコードが実行されたかを示しています。マウスクリックを処理する関数内のコードであり、現在ブレークポイント上で一時停止していることがわかります。

最後のセクションである **Scopes** は、コード内のさまざまな点からどのような数値が見えるかを示しています。例えば、下の画像では、 addItemClick 関数内のコードで稼働可能なオブジェクトを見ることができます。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/watch_items.png)

### もっと詳しく知る

さまざまなブラウザーでの JavaScript デバッガーについて詳しく知ることができます。

* Firefox JavaScript Debugger)
* Microsoft Edge Debugger
* Chrome Debugger
* Safari Debugger
JavaScript コンソール
----------------

JavaScript コンソールは、期待通りに使用されていない JavaScript をデバッグするための非常に便利なツールです。ブラウザーに読み込まれたページに対して JavaScript を実行し、ブラウザーがコードを実行しようとしたときに発生したエラーを報告します。どのブラウザーでもコンソールにアクセスすることができます。

開発者ツールがすでに開いている場合は、「コンソール」タブをクリックまたは押します。

そうでない場合、Firefox では、`Ctrl` + `Shift` + `K` またはメニューコマンドを使用して、コンソールを直接開くことができます。メニュー
 ![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) \_➤ ウェブ開発者 ➤ ウェブコンソール、または \_ ツール ➤ ウェブコンソール\_ 他のブラウザーでは、開発者ツールを開き、コンソールタブをクリックしてください。

すると、次のようなウィンドウが表示されます。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/console_only.png)

以下のコードをひとつずつコンソールに入力して（Enterキーを押して）、何が起こるか試してみてください。

```js
alert("hello!");
```

```js
document.querySelector("html").style.backgroundColor = "purple";
```

```js
const myWordmark = document.createElement("img");
myWordmark.setAttribute(
  "src",
  "https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png",
);
document.querySelector("h1").appendChild(myWordmark);
```

では、次のような誤ったバージョンのコードを入力してみて、何が返されるかを見てみましょう。

```js
alert('hello!);
```

```js
document.cheeseSelector("html").style.backgroundColor = "purple";
```

```js
const myWordmark = document.createElement("img");
myBanana.setAttribute(
  "src",
  "https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png",
);
document.querySelector("h1").appendChild(myWordmark);
```

ブラウザーが返すエラーの種類を見ることができるようになります。多くの場合、これらのエラーはかなり不可解ですが、これらの問題を解決するのはかなり簡単なはずです。

### もっと詳しく知る

様々なブラウザーでの JavaScript コンソールについて詳しく知ることができます。

* Firefox Web Console
* IE JavaScript console
* Chrome JavaScript Console (Opera's inspector works the same as this)
* Safari Console
関連情報
----

* HTML のデバッグ
* CSS のデバッグ


ウェブサーバーにファイルをアップロードするには？ - ウェブ開発を学ぶ

ウェブサーバーにファイルをアップロードするには？
========================

この記事では、ファイル転送ツールを使用してオンラインでサイトを公開する方法を説明します。

|  |  |
| --- | --- |
| 前提条件: | ウェブサーバとは何かとドメイン名の仕組みを知っている必要があります。基本的な環境設定方法と簡単なウェブページの作成方法も理解しておく必要があります。 |
| 目標: | 様々なファイル転送ツールを使用し、ファイルをサーバーにプッシュする方法について説明します。 |

概要
--

シンプルなウェブページを作成している場合 (例として HTML の基本を参照)、ウェブサーバー上にオンラインで転送したいと思うかもしれません。この記事では SFTP クライアント、RSync、GitHub などの選択肢をとおして、その方法を説明します。

SFTP
----

SFTP クライアントには、いくつもの選択肢があります。ここのデモは FileZilla を使うことにします。 Windows、macOS、Linux で使え、無料だからです。 FileZilla をインストールするには、 FileZilla ダウンロードページに移動し、大きなダウンロードボタンをクリックしてから、通常の方法でインストーラーファイルからインストールします。

**メモ:** もちろん他にもたくさんの選択肢があります。詳しくは公開ツールを参照してください。

FileZilla アプリケーションを開きます。次のようなものが表示されます。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/filezilla-ui.png)

### ログイン

この例では、ホスティングプロバイダー (私たちの HTTP ウェブサーバーをホスティングするサービス) が架空の会社 "Example Hosting Provider" であり、 URL は `mypersonalwebsite.examplehostingprovider.net` であったとします。

私たちはアカウントを開設し、その情報を受け取ったばかりです。

>
> Example Hosting Provider でアカウントを開設しましたことをお祝いします。
>
>
> アカウント: `demozilla`
>
>
> あなたのウェブサイトは `demozilla.examplehostingprovider.net` で表示されます。
>
>
> このアカウントに公開するには、 SFTP を使用して次の資格情報で接続してください。
>
>
> * SFTP サーバー: `sftp://demozilla.examplehostingprovider.net`
> * ユーザー名: `demozilla`
> * パスワード: `quickbrownfox`
> * ポート: `5548`
> * ウェブ上に公開するには、ファイルを `Public/htdocs` ディレクトリーに置いてください。
>
>
>

最初に `http://demozilla.examplehostingprovider.net/` を見てみましょう。見ての通り、まだそこには何もありません。

![Our demozilla personal website, seen in a browser: it's empty](/ja/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/demozilla-empty.png)

**メモ:** ホスティングプロバイダーによっては、最初にあなたのウェブアドレスに行ったときに、「このウェブサイトは[ホスティングサービス]によってホストされています。」というようなページが表示されます。

SFTP クライアントを遠隔のサーバーに接続するには、次の手順を実行します。

1. メインメニューから**ファイル > サイトマネージャ...** を選択します。
2. **サイトマネージャ**ウィンドウで、**新規サイト**ボタンをクリックし、提供されたスペースにサイト名を **demozilla** として入力します。
3. ホスティングプロバイダーから提供された SFTP サーバーのホストを　**Host:** フィールドに入力します。
4. **ログオンの種類**ドロップダウンで**標準**を選択し、提供されたユーザー名とパスワードを該当するフィールドに入力します。
5. 正しいポートおよびその他の情報を入力します。

ウィンドウは次のようになります。

![](/ja/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/site-manager.png)

次に Connect を押して SFTP サーバーに接続します。

注意: ホスティングプロバイダーがホスティングスペースへの SFTP (セキュア FTP) 接続を提供していることを確認してください。 FTP は本質的に安全ではないため、使用しないでください。

### こちらとあちら：ローカルビューとリモートビュー

一度接続すると、画面は次のようになります（私たち自身の例と結びつけて、イメージをつかんでください。）

![](/ja/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/connected.png)

あなたが見ているものを調べてみましょう。

* 中央の左ペインには、ローカルファイルが表示されます。ウェブサイトを保存しているディレクトリー (例: `mdn`) に移動します
* 中央の右ペインには、リモートファイルが表示されます。遠くの FTP ルート (このケースでは、`users/demozilla`) にログインしています
* 今のところ、下部と上部のペインを無視することができます。それぞれ、あなたのコンピューターと SFTP サーバー間の接続状態を示すメッセージのログ、 SFTP クライアントとサーバー間のすべてのインタラクションのライブログです
### サーバーへのアップロード

私たちのホスト命令の例では、「ウェブ上に公開するには、ファイルを `Public/htdocs` ディレクトリーに入れてください」となっています。右ペインの指定されたディレクトリーに移動する必要があります。このディレクトリーは実質的にあなたのウェブサイトのルートで、`index.html` ファイルやその他の資産がどこに行くかを示します。

ファイルを置く正しいリモートディレクトリーが見つかったら、サーバーにファイルをアップロードしますが、それにはファイルを左ペインから右ペインにドラッグ＆ドロップする必要があります。

### 本当にオンラインですか？

これまでのところとても良いですが、ファイルは本当にオンラインですか？ ブラウザーでウェブサイト (例えば `http://demozilla.examplehostingprovider.net/`) に戻って再確認することができます。

![Here we go: our website is live!](/ja/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/here-we-go.png)

やりました！ウェブサイトは動いています！

Rsync
-----

Rsync (en-US) はローカルからリモートへのファイル同期ツールで、ほとんどの Unix ベースのシステム (macOS や Linux など) で一般的に利用可能ですが、Windows 版も存在します。

既定ではコマンドラインで使用されるため、SFTP よりも高度なツールと見なされています。基本的なコマンドはこんな感じです。

```bash
rsync [-options] SOURCE user@x.x.x.x:DESTINATION
```

* `-options` はダッシュの後に 1 つ以上の文字が続きます。たとえば、詳細エラーメッセージの場合は `-v`、バックアップを作成する場合は `-b` です。完全なリストは rsync の man ページにあります ("Options summary" を検索してください)。
* `SOURCE` は、ファイルのコピー元となるローカルファイルまたはディレクトリーへのパスです。
* `user@` は、ファイルのコピー先となるリモートサーバー上のユーザーの資格情報です。
* `x.x.x.x` はリモートサーバーの IP アドレスです。
* `DESTINATION` は、リモートサーバー上のディレクトリーまたはファイルをコピーする場所へのパスです。

あなたはホスティングプロバイダーからそのような詳細を得る必要があるでしょう。

詳細およびその他の例については、 How to Use Rsync to Copy/Sync Files Between Servers を参照してください。

もちろん、FTP の時と同じように安全な接続のもとで使用することをお勧めします。Rsync の場合は `-e` オプションを使用して、SSH を介した接続を確立するための SSH 詳細を指定します。

```bash
rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
```

必要なものの詳細については、How To Copy Files With Rsync Over SSH を参照してください。

### Rsync GUI ツール

他のコマンドラインツールと同様に、コマンドラインの使用に慣れていない人向けに Rsync 用の GUI ツールもあります。 Acrosync はそのようなツールの1つで、Windows と macOS で利用可能です。

繰り返しになりますが、ホスティングプロバイダーから接続認証情報を取得する必要がありますが、この方法でそれらを入力するための GUI が得られます。

GitHub
------

GitHub では、GitHub pages (gh-pages) を介してウェブサイトを公開することができます。

これの使い方の基本については、ウェブ入門のウェブサイトの公開の記事で説明しているので、ここでは繰り返しません。

ただし、 GitHub でウェブサイトをホスティングすることはできますが、カスタムドメインを使用することもできます。詳しいガイドは Using a custom domain with GitHub Pages をご覧ください。

ファイルをアップロードするその他の方法
-------------------

FTP プロトコルは、ウェブサイトを公開するためのよく知られた方法の 1 つですが、唯一の方法ではありません。 他にもいくつかのやり方があります。

* **ウェブインターフェイス**。リモートファイルアップロードサービスのフロントエンドとして機能する HTML インターフェイス。ホスティングサービスから提供されます。
* **WebDAV**。より高度なファイル管理を可能にする HTTP プロトコルの拡張。


ウェブ上で何かをするためにどれくらいコストがかかる？ - ウェブ開発を学ぶ

ウェブ上で何かをするためにどれくらいコストがかかる？
==========================

ウェブに関わることは、見た目ほど安いものではありません。この記事では、あなたがどれくらいの費用を負担しなければならないか、またその理由について説明します。

|  |  |
| --- | --- |
| 前提知識: | すでにどのソフトウェアが必要か、ウェブページやウェブサイトなどの違い、ドメイン名とは何かを理解していること。 |
| 目標: | ウェブサイトを作成するための完全なプロセスを確認し、各ステップでどれくらいのコストがかかるかを確認すること。 |

概要
--

ウェブサイトを立ち上げるとき、費用は何も掛からないかもしれませんし、青天井かもしれません。 この記事では、費用の有無にかかわらず、どのように準備し、またどれだけ費用がかかるかについて議論します。

ソフトウェア
------

### テキストエディター

Windows のメモ帳、Linux の Gedit、Mac の TextEdit などのテキストエディターを使った経験はおありでしょう。色分けしたり、文法をチェックしたり、コードの構築を手助けしたりするエディターを選択すれば、コードを書くのが楽になります。

無料のエディターは多くあります。たとえば、 Atom、Brackets、Bluefish、TextWrangler、Eclipse、Netbeans などです。またSublime Textのように好きなだけ試用できるが、料金を支払ったほうが良いものもあります。なかには、 PhpStorm のように、購入ライセンスによって、価格が数百円から 2 万円程度になるものもあります。 Microsoft Visual Studio は数万円から数十万円しますが、 Visual Studio Express は個人やオープンソースプロジェクトでは無料で使えます。 有料ソフトウエアには、無料の試用期間を設けているものもあります。

最初に何種類かのエディターを試して、用途に合うのはどれか調べるといいでしょう。 HTML や CSS、それに Javascript で簡単なコードを書くのであれば、シンプルなエディターをお勧めします。

テキストエディターの品質と使いやすさは、あまり価格と連動しません。実際に使ってみて、目的に合うか調べるようにしてください。例えば Sublime Text は安価ですが、多くの無料プラグインがあり、拡張性が高いエディターです。

### 画像エディター

お使いのシステムには、簡単な画像エディタやビューアが入っているはずです。 Windows ではペイント、 Ubuntuでは Eye of Gnome、 Mac では Preview などです。これらのプログラムは比較的限定的で、レイヤー、高か、グループ化を追加できる、より強力なエディタがすぐに必要になります。

編集ソフトは無料のもの (GIMP, Paint.NET)、やや高価なもの (PaintShop Pro, less than $100)、または数百ドルのもの (Adobe Photoshop) もあります。

これらは似たような機能を持っているので、どれを使用しても構いません。この中には様々な機能を網羅しているソフトもありますが、すべての機能を使う日は決して来ないでしょう。 ある時点で他の設計者とプロジェクトを交換する必要がある場合は、彼らがどのツールを使用しているかを調べる必要があります。 編集ソフトは完成したプロジェクトを標準のファイル形式にエクスポートできますが、各編集ソフトは進行中のプロジェクトを独自の特別な形式で保存します。 インターネット上のほとんどの画像は著作権で保護されているので、使用する前にファイルのライセンスを確認することをお勧めします。 Pixabay のようなサイトは、 CC0 ライセンスの下で画像提供を行なっているので、商用利用のための変更・編集を加えても公開することができます。

### メディアエディター

ウェブサイトに動画や音声を入れたい場合は、オンラインサービス（YouTube、Vimeo、Dailymotion など）を埋め込むか、自作の動画を入れることができます（帯域幅のコストについては下記をご覧ください）。

音声ファイルの場合、フリーソフト（Audacity, Wavosaur）、数百円の有料ソフト（Sound Forge, Adobe Audition）などがあります。同様に、動画編集ソフトもフリーソフト（PiTiVi, OpenShot for Linux, iMovie for Mac）、低価格のもの（Adobe Premiere Elements）、高価格のもの（Adobe Premiere Pro, Avid Media Composer, Final Cut Pro）があります。デジタルカメラに付属しているソフトウェアで、すべてのニーズを満たすことができるかもしれません。

### 公開ツール

また、ファイルをアップロードする方法も必要です。あなたの ハードディスクから遠くのウェブサーバーにアップロードします。そのためには、 (S)FTP クライアント, RSync, Git/GitHub などの公開ツールを使用する必要があります。

各オペレーティングシステムには、ファイルマネージャの一部として、 (S)FTP クライアントが入っています。 Windows のエクスプローラー、 Nautilus （Linux の一般的なファイルマネージャー）、 Mac の Finder はすべてこの機能を入れています。しかし、ローカルやリモートのディレクトリーを並べて表示したり、サーバーのパスワードを格納するために、専用の (S)FTP クライアントを選ぶ人がよくいます。

(S)FTP クライアントをインストールする場合、信頼性が高く無料の選択肢がいくつかあります。例えば、すべてのプラットフォーム用の FileZilla、 Windows 用の WinSCP、 Mac または Windows 用のCyberduck、その他があります。

FTP は本質的に安全ではないので、 SFTP - 最近ではほとんどのホスティングサイトが既定値で提供している安全で暗号化されたバージョンの FTP - または SSH 上の Rsync のような別の安全なソリューションを使用するようにすべきです。

ブラウザー
-----

ブラウザーはすでにお持ちか、無料で取得することができます。必要に応じて、 Firefox をこちらで、または Google Chrome をこちらでダウンロードしてください。

ウェブアクセス
-------

### コンピューター / モデム

コンピューターが必要です。費用は、予算や住んでいる地域によって大きく異なります。最小限のウェブサイトを公開するには、エディターとウェブブラウザーを起動できる基本的なコンピューターがあればよいので、入門レベルはかなり低く抑えることができます。

もちろん、複雑なデザインや写真の加工、音声や動画のファイルを作成する場合は、より本格的なコンピューターが必要になります。

また、遠隔地のサーバーにコンテンツをアップロードする必要があるため、モデムが必要になります（後述の「ホスティング」参照）。インターネット接続は、 ISP から月々数百円で借りることができますが、地域によって費用が異なる場合があります。

### ISP アクセス

十分な 帯域幅があることを確認してください。

* 低帯域幅のアクセスでも、「シンプルな」ウェブサイト（適度な大きさの画像、テキスト、いくつかの CSS と JavaScript）に対応するのには十分かもしれません。その場合、モデムのレンタル料を含めて、数百円程度のコストで済むでしょう。
* 一方、何百ものファイルを扱う高度なウェブサイトや、重い動画・音声ファイルをウェブサーバーから直接配信する場合は、DSL、ケーブル、ファイバーアクセスなどの広帯域接続が必要になります。この場合、低帯域幅のアクセス回線と同じ料金になる場合ありますし、より専門的なニーズには月額数万円かかることもあります。
ホスティング
------

### 帯域幅を理解する

ホスティングプロバイダーは、ウェブサイトが消費する帯域幅の量に応じて料金を請求します。これは、一定時間内に何人の人々やウェブクローリングロボットがコンテンツにアクセスしたか、またコンテンツがどれだけのサーバー空間を占有したかによって決まります。動画を YouTube, Dailymotion, Vimeo などの専用サービスに格納するのが一般的なのは、このためです。例えば、プロバイダーは「合理的な」帯域幅の使用のために、 1 日あたりの訪問者を数千人までに制限しているプランを提供しているかもしれません。ただし、これはプロバイダによって定義が異なるため、注意が必要です。信頼性の高い、有料の、私用ホスティングは、月額 10 〜 15 ドル程度を要することに留意してください。

**メモ:** 「無制限」の帯域幅というものは存在しません。膨大な量の帯域幅を消費する場合は、膨大な金額を支払うことが予想されます。

### ドメイン名

ドメイン名は、ドメイン名提供会社（レジストラ）を通じて購入する必要があります。ホスティングプロバイダーがレジストラーで ある場合もあります（例えばIonos、Gandiはレジストラーであり、同時にホスティングプロバイダーでもあります）。ドメイン名は通常、年間 5 ～ 15 ドルかかります。このコストは、以下によって変化します。

* 現地の事情: 国によってトップレベルドメイン名の価格が異なるため、より高価なものもあります。
* ドメイン名に関連するサービス: 一部のレジストラーは、住所や 電子メールアドレスを独自のアドレスで隠すことにより、 スパム防止機能を提供しています。住所はレジストラーが代行することで提供し、電子メールアドレスはレジストラーのエイリアスで隠蔽することができます。
### 自分で作るホスティングと「パッケージ」ホスティングの比較

ウェブサイトを公開する場合、データベースの設定（必要な場合）やコンテンツ管理システム (CMS) （Wordpress, Dotclear, spip など）の導入、既製または独自のテンプレートのアップロードなどを、すべてを自分自身で行うことが可能です。

ホスティングプロバイダーの環境を使用することもできますし、月額 10 ～ 15 ドル程度で、あらかじめ CMS がパッケージされた専用のホスティングサービス（Wordpress, Tumblr, Blogger など）を直接契約して利用することもできます。後者の場合、何も支払う必要はありませんが、テンプレートやその他のオプションの制御が難しくなる可能性があります。

### 無料のホスティングと有料のホスティングの比較

無料のサービスがたくさんあるのに、なぜホスティングにお金を払わなければならないのか、と思うかもしれません。

* 有料であれば、より多くの自由をお持ちいただけます。ウェブサイトは自分自身のものであり、別のプロバイダーへシームレスに移行することができます。
* 無料のホスティングプロバイダーは、自分で管理できないところで、コンテンツに広告を追加することがあります。

ファイルを簡単に移動することが可能であり、ほとんどの有料サイトで稼働時間が保証されているため、無料ホスティングに頼るよりも、有料ホスティングに行くことをお勧めします。ほとんどのホスティングプロバイダは、開始するために大きな割引を提供しています。

混合型のアプローチを選択する人もいます。例えば、メインのブログはフルドメイン名の有料ホスティングサービスに置き、自発的で戦略的でないコンテンツは無料ホスティングサービスに置くという方法です。

プロのためのウェブサイト制作会社とホスティング
-----------------------

プロのウェブサイトを望むなら、おそらくウェブ会社に依頼することでしょう。

ここで、コストは以下のような複数の要素に左右されます。

* 数ページのテキストからなるシンプルなウェブサイトでしょうか？それとももっと複雑な、何千ページもあるようなウェブサイトですか？
* 定期的に更新しますか？それとも静的なウェブサイトになるのでしょうか？
* ウェブサイトは、コンテンツ（例えば内部データ）を収集するために、社内の IT 構造と接続する必要があるでしょうか？
* 今流行っているピカピカの新機能が欲しいのでしょうか？この記事の執筆時点では、クライアントは複雑なパララックスを備えた単一のページを求めています。
* ユーザーストーリーを考えたり、複雑な UX 問題を解決したりするために広告代理店が必要でしょうか。例えば、ユーザーを引き込むための戦略を作成したり、いくつかのアイデアの中から解決策を選ぶための A/B テストなどです。

また、ホスティングについては、次のような選択肢を検討する必要があります。

* サーバーが故障したときのために、サーバーを冗長化したいですか？
* 95％ の信頼性で十分でしょうか、それとも 24 時間体制のプロのサービスが必要でしょうか？
* 注目の超高速専用サーバーが欲しいのか、それとも低速の共有機で対応できるのでしょうか？

これらの質問にどう答えるかによって、サイトのコストは数十万円から数千万円になる可能性があります。

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

さて、ウェブサイトがどのような費用を要するかを理解したところで、いよいよそのウェブサイトの設計と作業環境の設定を開始することになります。

* テキストエディターの選び方とインストール方法について読んでください。
* デザイン重視の方は、ウェブページの解剖を見てみてください。


Google App Engine を使ってウェブサイトを公開するには？ - ウェブ開発を学ぶ

Google App Engine を使ってウェブサイトを公開するには？
====================================

Google App Engine は、Google のインフラストラクチャ上でアプリケーションを構築して実行できる強力なプラットフォームです。ゼロから多階層のウェブ アプリケーションを構築する場合でも、静的なウェブサイトをホストする場合でも、必要なアプリケーションを構築することができます。ここでは、 Google App Engine でウェブサイトをホスティングするためのステップバイステップガイドを紹介します。

Google Cloud Platform プロジェクトの作成
-------------------------------

Google のツールを自分のサイトやアプリに使用するには、Google Cloud Platform で新しいプロジェクトを作成する必要があります。そのためには、Google のアカウントを保有している必要があります。

1. Google Cloud Platform Console の App Engine dashboard に移動し、 *Create* ボタンを押します。
2. プロジェクトを作成したことがない場合は、メールによる更新情報を受け取るかどうかを選択し、利用規約に同意すれば、次に進むことができるはずです。
3. プロジェクト名を入力し、プロジェクト ID を編集してメモしておきます。このチュートリアルでは、以下の値を使用します。
    * プロジェクト名: *GAE Sample Site*
    * プロジェクト ID: *gaesamplesite*
4. *Create* ボタンをクリックして、プロジェクトを作成します。
アプリケーションの作成
-----------

Cloud Platform のプロジェクトには、それぞれ 1 つの App Engine アプリケーションを入れることができます。プロジェクトにアプリを用意しましょう。

1. 公開するには、サンプルアプリが必要です。使用するものがない場合は、このサンプルアプリをダウンロードし、展開してください。
2. サンプルアプリケーションの構造を見てみましょう。`website` フォルダーにはウェブサイトのコンテンツがあり、`app.yaml` はアプリケーションの設定ファイルです。
    * ウェブサイトのコンテンツは `website` フォルダーの中に入れなければならず、そのランディングページは `index.html` と名付けなければなりませんが、それ以外はどのような形でも構いません。
    * `app.yaml` ファイルは、静的ファイルへの URL の割り当て方法を App Engine に指示するための設定ファイルです。編集する必要はありません。
アプリケーションの公開
-----------

プロジェクトを作成し、サンプルアプリのファイルをまとめて返されましたので、アプリを公開しましょう。

1. Google Cloud Shell を起動します。
2. `sample-app` フォルダーをコードエディターの左ペインにドラッグ＆ドロップします。
3. コマンドラインで以下を実行し、プロジェクトを選択します。

```bash
gcloud config set project gaesamplesite
```

4. 続いて、以下のコマンドを実行して、アプリのディレクトリーに移動してください。

```bash
cd sample-app
```

5. これでアプリケーションの展開、つまり App Engine にアプリをアップロードする準備が整いました。

```bash
gcloud app deploy
```

6. アプリケーションを設置するリージョンを選ぶには、数字を入力 してください。
7. `Y`を入力して確定してください。
8. ブラウザーで *your-project-id*.appspot.com に移動し、オンライン上のウェブサイトを確認します。例: プロジェクト ID *gaesamplesite* の場合、 *gaesamplesite*.appspot.com に移動します。
関連情報
----

詳しくは、 Google App Engine Documentation を参照してください。


ウェブサイトが正しく動作することをどうやって確認する？ - ウェブ開発を学ぶ

ウェブサイトが正しく動作することをどうやって確認する？
===========================

この記事では、ウェブサイトのさまざまなトラブルシューティングの手順と、これらの問題を解決するための基本的な操作について説明します。

|  |  |
| --- | --- |
| 前提条件: | ウェブサーバーにファイルをアップロードする方法を知っている必要があります。 |
| 目標: | 自身のウェブサイトで実行できるいくつかの基本的な問題を診断して解決する方法を学びます。 |

自身のウェブサイトをオンラインで公開しましたか？ 素晴らしい！ ただ、それは正しく動作しているでしょうか？

別の場所にあるウェブサーバーは、ローカルウェブサーバーとはまったく異なった動作をすることが多いため、オンラインになったらウェブサイトをテストすることをお勧めします。画像が表示されない、ページが読み込まれない、または読み込みが遅くなるなど、多くの問題が発生するのに驚くかもしれません。ほとんどの場合、大したことではなく、単純な間違いやウェブホスティング設定の問題です。

これらの問題を診断して解決する方法を見てみましょう。

アクティブラーニング
----------

*利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください。*

より深く掘り下げる
---------

### ブラウザーでテストする

ウェブサイトが正しく機能しているかどうかを知りたければ、まずブラウザーを起動し、テストしたいページに移動します。

#### ええと、そのイメージはどこですか？

個人的なウェブサイト `http://demozilla.examplehostingprovider.net/` を見てみましょう。予想していた画像ではありません。

![Oops, the 'unicorn' image is missing](/ja/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/image-missing.png)

Firefox のネットワークツール (**ツール ➤ ウェブ開発者 ➤ ネットワーク**) を開き、ページを再読み込みします。

![The image has a 404 error](/ja/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/error404.png)

一番下に「404」という問題があります。「404」は「リソースが見つかりません」という意味です。そのため、画像が表示されなかったのです。

#### HTTP ステータス

サーバーは、リクエストを受信するたびにステータスメッセージで応答します。最も一般的なステータスは次のとおりです。

**200: OK**

求めているリソースが配信されました。

**301: Moved permanently**

リソースは新しい場所に移動しました。あなたのブラウザーでこれをあまり見ないでしょう、しかし検索エンジンがインデックスを更新するのにこの情報をたくさん使うので "301" について知るのは良いことです。

**304: Not modified**

最後にファイルをリクエストしてからファイルが変更されていないため、ブラウザーはキャッシュからバージョンを表示できるので、応答時間が短縮され、帯域幅がより効率的に使用されます。

**403: Forbidden**

そのリソースを表示することを許可されていません。通常それは設定ミス (例えばあなたのホスティングプロバイダーがディレクトリーへのアクセス権を与えるのを忘れた) と関係があります。

**404: Not found**

一目瞭然です。これを解決する方法を以下で説明します。

**500: Internal server error**

サーバーで何か問題が発生しました。たとえば、サーバーサイドの言語 (PHP、.Net など) が機能しなくなった、またはウェブサーバー自体に構成上の問題がある可能性があります。通常、ホスティングプロバイダーのサポートチームに頼るのが最善です。

**503: Service unavailable**

通常、短期間のシステム過負荷が原因です。サーバーに何らかの問題があります。しばらくしてからもう一度試してください。

初心者が（簡単な）ウェブサイトをチェックする場合、200、304、403、404 を扱うことが最も多いでしょう。

#### 404 を修正する

では何が悪かったのでしょうか？

![Le list of images in our project](/ja/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/demozilla-images-list.png)

一見、依頼した画像は正しい場所にあるように見えますが、ネットワークツールは「404」を報告しました。それは、 HTML のコードにタイプミスがあったことが判明しました。 `unicorn_pic.png`ではなく、 `unicorn_pics.png`です。そこで、コードエディターで画像の `src` 属性を変更し、タイプミスを修正してください。

![Deleting the 's'](/ja/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/code-correct.png)

保存してサーバーにプッシュし、ブラウザーでページを再読み込みします。

![The image loads correctly in the browser](/ja/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/image-corrected.png)

そこに行きます！ HTTP ステータスをもう一度見てみましょう。

* `/` と `unicorn_pic.png` が **200** の場合は、ページと画像の再読み込みに成功したことを意味します。
* `basic.css` の **304** は、このファイルが最後のリクエスト以降変更されていないことを意味します。したがって、ブラウザーは新しいコピーを受信するのではなく、キャッシュ内のファイルを使用できます。

さて、エラーを修正し、途中でいくつかの HTTP ステータスを学習しました。

### よくあるエラー

最もよく見かけるエラーはこれらです。

#### アドレスのタイプミス

`http://demozilla.examplehostingprovider.net/` と入力したいのですが、入力が速すぎて「l」を忘れていました。

![Address unreachable](/ja/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/cannot-find-server.png)

アドレスが見つかりません。確かに。

#### 404 エラー

多くの場合、エラーは単にタイプミスが原因ですが、リソースのアップロードを忘れたか、アップロード中にネットワーク接続が切断された可能性もあります。まずファイルパスの綴りと正確さを確認し、それでも問題が解決しない場合は、ファイルをもう一度アップロードしてください。おそらく問題は解決するでしょう。

#### JavaScript エラー

誰か（おそらくあなた）がそのページにスクリプトを追加する中で間違えました。これでページの読み込みが妨げられることはありませんが、問題が発生したと感じるでしょう。

コンソールを開き (**ツール ➤ ウェブ開発者 ➤ ウェブコンソール**)、ページを再読み込みします。

![A Javascript error is shown in the Console](/ja/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/js-error.png)

この例では、エラーが何かを（非常に明確に）学び、それを修正することができます（別の一連の記事で JavaScript について説明します）。

### その他の事項を確認する

ウェブサイトが正しく機能していることを確認する簡単な方法、および発生する可能性がある最も一般的なエラーとそれらの修正方法を示しました。ページがこれらの基準を満たしているかどうかをテストすることもできます。

#### パフォーマンスはどうですか？

ページの読み込みは十分速いですか？ WebPageTest.org のようなリソースや YSlow のようなブラウザーアドオンをしようすることで、いくつか興味深いことが分かります。

![Yslow diagnostics](/ja/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/yslow-diagnostics.png)

グレードは A から F までです。私たちのページはごくわずかで、ほとんどの基準を満たしています。しかし、 CDN を使った方が良いでしょう。 1 つの画像だけを配信する場合はそれほど重要ではありませんが、広帯域幅のウェブサイトで何千もの画像を配信する場合は重要になります。

#### サーバーは十分に応答しますか？

`ping` は指定したドメイン名をテストし、サーバーが応答しているかどうかを知らせる便利なシェルツールです。
```

$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
^C
--- mozilla.org ping statistics ---
4 packets transmitted, 4 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
```

便利なキーボードショートカット、すなわち **Ctrl+C** を覚えておいてください。Ctrl+C はランタイムに「割り込み」信号を送り、停止するように伝えます。ランタイムを停止しないと、`ping` は サーバーに無期限に ping を実行します。

### 簡単なチェックリスト

* 404 をチェックします
* すべてのウェブページが期待通りに動作していることを確認します
* それが一貫してレンダリングすることを確認するためにいくつかのブラウザーでウェブサイトをチェックしてください
次のステップ
------

おめでとうございます、ウェブサイトは誰もが訪れることができるようになっています。それは大きな成果です。これで、さまざまなテーマに深く掘り下げていくことができます。

* 人々は世界中からあなたのウェブサイトに来ることができるので、あなたはそれを誰にでもアクセス可能にすることを考慮すべきです。
* ウェブサイトのデザインは少し荒すぎますか？ CSS についてもっと学ぶ時が来ました。


GitHub Pages を使うには？ - ウェブ開発を学ぶ

GitHub Pages を使うには？
===================

GitHub は「ソーシャルコーディング」のサイトです。 Git **バージョン管理システム**のストレージに対して、ソースコードリポジトリーのアップロードを許可します。その後、コードプロジェクトで共同作業を行うことができます。また、システムはオープンソースに自動設定されています。つまり、世界中の誰もが GitHub コードを検索・使用また、そこから学習しコードを改善することができます。他の人のコードでもそれが可能です！この記事は GitHub の gh-pages 機能を使って、公開コンテンツに関する基本的なガイドを提供します。

公開コンテンツ
-------

GitHub は非常に重要で役に立つコミュニティの一つで、Git / GitHub は非常に人気のあるバージョン管理システムです。現在、ほとんどのハイテク企業がワークフローでそれを使用しています。 GitHub は GitHub Pages と呼ばれるとても便利な機能を持っています。これでウェブ上にライブでウェブサイトのコードを公開することが可能です。

### GitHub の基本設定

1. 初めに、システムに Git をインストールしてください。これは GitHub が動作する基盤となるバージョン管理システムのソフトウェアです。
2. 次に、GitHub アカウントにサインアップします。それは単純かつ簡単です。
3. サインアップしたら、ユーザー名とパスワードを使って github.com にログインします。
### ソースコードのアップロード準備

GitHub リポジトリーに好きなコードを保存できますが、GitHub Pages 機能を最大限に活用するには、コードを典型的なウェブサイトとして構成する必要があります。主なエントリーポイントは、`index.html` という HTML ファイルです。

次に進む前に、自身のコードディレクトリーを Git リポジトリーとして初期化する必要があります。このために、以下のことを実行してください:

1. コマンドラインで `test-site` のディレクトリー (またはウェブサイトを含むディレクトリーと呼んだもの) を指定します。これには、`cd` コマンドを使用します (つまり、「ディレクトリーの変更」)。ウェブサイトをデスクトップの `test-site` というディレクトリーに配置した場合は、次のように入力します。

```bash
cd Desktop/test-site
```

2. コマンドラインがウェブサイトのディレクトリー内を指しているときに、次のコマンドを入力します。これは `git` ツールに、そのディレクトリーを git リポジトリーにするように指示するものです。

```bash
git init
```

#### コマンドラインインターフェイスの余談

GitHub にコードをアップロードする最良の方法は、コマンドラインを使用することです。これは、ユーザーインターフェイス内をクリックするのではなく、ファイルを作成・プログラム実行のような動作のためのコマンドを入力するウィンドウです。それは次のようなものです:

![](/ja/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages/command-line.png)

**メモ:** コマンドラインに不安がある場合は、Git グラフィカルユーザーインターフェイスを使用して、同じ作業を行うことも検討できます。

すべてのオペレーティングシステムには、コマンドラインツールが付属しています。

* **Windows**: Windows のキーを押して、**コマンドプロンプト**と入力し、表示されるリストから選択すると、**コマンドプロンプト**にアクセスできます。Windows は、Linux や OS X とは異なる、独自のコマンド規約を持っているので、下記のコマンドは、あなたのマシンでは異なるかもしれません。
* **OS X**: **ターミナル**は、**アプリケーション > ユーティリティ**にあります。
* **Linux**: 通常、**Ctrl + Alt + T** で端末を起動できます。それでもうまくいかない場合は、アプリバーまたはメニューで**ターミナル**を探します。

これには最初は、少し戸惑うかもしれませんが、心配しないでください — すぐに基本のコツをつかむでしょう。上記のようにコマンドを入力して、 Enter キーを押すことで、端末で動作するようにコンピューターに指示します。

### ソースコードのリポジトリーの作成

1. 次に、ファイルを保存するための新しいリポジトリーを作成する必要があります。GitHub ホームページの右上にあるプラス (+) をクリックしてから、**新しいリポジトリー** を選択します。
2. このページの**リポジトリー名ボックス** に、ソースコードのリポジトリー名 (例:**my-repository**) を入力します。
3. また、説明を入力することで、リポジトリーに何を格納しようとしているのかを記述します。画面は次のようなものです。

 ![](/ja/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages/create-new-repo.png)
4. **Create repository** をクリックします。これにより、次のページに移動します。

 ![](/ja/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages/github-repo.png)
### GitHub へのファイルのアップロード

1. 現在のページのこの節、*既存のリポジトリーをコマンドラインからプッシュする*ことに興味があるわけですね。この節に 2 行のコードが並んでいるはずです。最初の行全体をコピーしてコマンドラインに貼り付け、 Enter キーを押してください。コマンドは次のようなものです。

```bash
git remote add origin https://github.com/chrisdavidmills/my-repository.git
```

2. 次に、次の 2 つのコマンドを入力して、それぞれの後に Enter キーを押します。これらは、コードを GitHub にアップロードする準備をし、これらのファイルを管理するように Git に依頼するものです。

```bash
git add --all
git commit -m 'adding my files to my repository'
```

3. 最後に、表示されている 2 つのコマンドの内、2 番目のコマンドを端末に入力する、または、コマンドラインセクションから既存のリポジトリーをプッシュして」、コードを GitHub にプッシュします。

```bash
git push -u origin main
```

4. ここで、リポジトリーの GitHub Pages を有効にする必要があります。これを行うには、リポジトリーのトップページから *Settings* を選び、左のサイドバーから *Pages* を選択します。 *Source* の下にある "main" ブランチを選びます。ページが更新されるはずです。
5. GitHub Pages セクションに再度アクセスすると、`Your site is ready to be published at https://xxxxxx.` という行が表示されるはずです。
6. この URL をクリックすると、ホームページが `index.html` という名前であれば、例のライブバージョンに移動するはずです - このエントリーポイントに既定値で移動します。もし、あなたのサイトのエントリーポイントが何か別のもの、例えば `myPage.html` と呼ばれている場合は、 `https://xxxxxx/myPage.html` にアクセスする必要があります。
### GitHub の詳細

テストサイトにさらに変更を加えて、GitHub にアップロードしたい場合は、以前と同じようにファイルに変更を加えるだけです。それから、以下のコマンドを入力して (それぞれ Enter キーを押して) GitHub にそれらの変更をプッシュする必要があります。
```

git add --all
git commit -m 'another commit'
git push
```

*another commit* をより適切なメッセージに置き換えることで、今何を変更したかを記述することができます。

私たちは、Git の表面に触れたにすぎません。詳細については、 Git と GitHub を参照してください。


ウェブサイトを作るのにどんなソフトウェアが必要？ - ウェブ開発を学ぶ

ウェブサイトを作るのにどんなソフトウェアが必要？
========================

この記事では、ウェブサイトを編集、アップロード、または閲覧するときに必要なソフトウェアについて説明します。

|  |  |
| --- | --- |
| 前提知識: | すでにウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いについて知っておく必要があります。 |
| 目標: | ウェブサイトを編集、アップロード、閲覧するときに必要なソフトウェアについて学びます。 |

概要
--

ウェブ開発に必要なほとんどのプログラムは無料でダウンロードできます。この記事では、いくつかのリンクを提供します。

次のようなツールが必要です。

* ウェブページの作成と編集
* ウェブサーバーにファイルをアップロードする
* ウェブサイトを見る

ほぼすべてのオペレーティングシステムには、既定でテキストエディターとブラウザーが含まれており、ウェブサイトの閲覧に使用できます。結果的には、通常はファイルをウェブサーバーに転送するためのソフトウェアを入手するだけで済みます。

アクティブラーニング
----------

*利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください。*

より深く掘り下げる
---------

### ウェブページの作成と編集

ウェブサイトを作成したり編集したりするために、テキストエディターが必要です。テキストエディターは、形式を持たないテキストファイルの作成や修正を行います。 **RTF** のような他の形式では、太字や下線のような書式を追加することができます。しかし、これらの形式はウェブページの作成には適していません。ウェブサイトを構築する際に幅広い作業に使用するので、どのテキストエディターを使用するかを考えておきましょう。

すべてのデスクトップ OS には、基本的なテキストエディターが付属しています。これらのエディターはすべて簡単なものですが、ウェブページのコーディングのための特別な機能は持っていません。そこで、お望みなら、利用可能なサードパーティのツールがたくさんあります。サードパーティのテキストエディターには、構文の色付け、自動補完、セクションの折りたたみ、コード検索などの便利な追加機能がよくついています。エディターの簡単なリストを挙げておきます。

| OS | 内蔵エディター | サードパーティのエディター |
| --- | --- | --- |
| Windows | * メモ帳
 | * Notepad++
* Visual Studio Code
* Web Storm
* Brackets
* ShiftEdit
* Sublime Text
 |
| Mac OS | * TextEdit
 | * TextWrangler
* Visual Studio Code
* Brackets
* ShiftEdit
* Sublime Text
 |
| Linux | * Vi
 (All UNIX)
* GEdit
 (Gnome)
* Kate
 (KDE)
* LeafPad
 (Xfce)
 | * Emacs
* Vim
* Visual Studio Code
* Brackets
* ShiftEdit
* Sublime Text
 |
| ChromeOS |  | * ShiftEdit
 |

こちらは、高度なテキストエディターのスクリーンショット例です。

![Notepad++ のスクリーンショット](/ja/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need/notepadplusplus.png)

こちらは、オンラインのテキストエディターのスクリーンショット例です。

![ShiftEdit のスクリーンショット](/ja/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need/shiftedit.png)

### ウェブ上へのファイルのアップロード

ウェブサイトを公開する準備が整ったら、ウェブページを ウェブサーバーにアップロードする必要があります。さまざまなプロバイダーからサーバー上のスペースを購入できます（ウェブ上で何かをするためにどれくらいコストがかかる？を参照）。どのプロバイダーを使用するかが決まったら、プロバイダーは通常、SFTP URL、ユーザー名、パスワード、およびそれらのサーバーへの接続に必要なその他の情報の形式で、アクセス情報をメールで送信します。(S)FTPは今や幾分時代遅れになっていて、RSync や Git/GitHub のような他のアップロードシステムが普及し始めていることを覚えておいてください。

**メモ:** FTP は本質的に安全ではありません。ホスティングプロバイダーが安全な接続、例えば SSH を介した SFTP または RSync の使用を許可していることを確認してください。

ウェブサーバーを作成する際、ウェブサーバーにファイルをアップロードすることは非常に重要なステップなので、別の記事で詳しく説明します。ここでは、単純な機能に限った無料 (S)FTP クライアントの例を示すにとどめます。

| OS | FTP ソフトウェア |
| --- | --- |
| Windows | * WinSCP
* Moba Xterm
 | * FileZilla (すべての OS)
 |
| Linux | * Nautilus/Files
 (Gnome)
* Dolphin (KDE)
 |
| Mac OS | * Cyberduck
 |
| ChromeOS | * ShiftEdit (すべての OS)
 |  |

### ウェブサイトの閲覧

ご存知の通り、ウェブサイトを閲覧するためにはウェブブラウザーが必要です。私用でブラウザー使う時には、たくさんのブラウザーの選択肢がありますが、あなたがウェブサイトを開発している時には、あなたのウェブサイトがほとんどの人々のために働くことを確認するために、少なくとも以下のブラウザーで動作確認、テストをする必要があります。

* Mozilla Firefox
* Google Chrome
* Microsoft Internet Explorer
* Apple Safari

特定のグループ (技術プラットフォームや国など) を対象にする場合は、追加で Opera, Konqueror, UC Browser などブラウザーでサイトをテストする必要があります。

しかし、ブラウザーによっては特定のオペレーティングシステムでしか動作しないものがあるため、テストをすることは複雑になります。 Apple Safari は iOS と Mac OS 上で動作し、 Internet Explorer は Windows 上でのみ動作します。 Browsershots や Browserstack のようなサービスを利用するのが最善です。 Browsershots は、様々なブラウザーで見た場合のウェブサイトのスナップショットを提供します。 Browserstack は実際には仮想マシンへの完全なリモートアクセスを提供し、最も一般的な環境でサイトをテストすることができます。他にも、独自の仮想マシンをセットアップする方法もありますが、それにはいくらかの専門知識が必要です。 (もしこの方法を使うのであれば、 Microsoft は ready-to-use virtual machines ですぐに使える仮想マシンを含む開発者のためのいくつかのツールを提供しています。)

是非、実際の端末、特に実際のモバイル端末でいくつかのテストを実行してください。モバイル端末のシミュレーションは、進化中の新技術であり、デスクトップのシミュレーションよりも信頼性が低いです。もちろん、モバイル端末はお金を必要としますので、 Open Device Lab の取り組みを見てみることをお勧めします。多くのプラットフォームでテストする場合は、過度な出費を抑えて端末を共有することもできます。

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

* 一部のソフトウェアは無料ですが、すべてではありません。ウェブ上で何かをするのにいくらのコストがかかるかを調べましょう。
* テキストエディターについてさらに学びたいのなら、テキストエディターの選び方とインストール方法に関する記事をお読みください。
* ウェブ上にウェブサイトを公開する方法が分からないのであれば、「ウェブサーバーにファイルをアップロードする方法」を参照してください。


ローカルにテスト用サーバーを用意するには？ - ウェブ開発を学ぶ

ローカルにテスト用サーバーを用意するには？
=====================

この記事では、マシン上に簡単なローカルテストサーバーを設定する方法と、その使い方の基本について説明します。

|  |  |
| --- | --- |
| 前提条件: | インターネットの仕組みおよびウェブサーバーとは何かを知っておく必要があります。 |
| 目標: | ローカルのテストサーバーを設定する方法を学習します。 |

ローカルファイルとリモートファイル
-----------------

ほとんどの学習領域では、ブラウザーでサンプルを直接開くだけで済みます。 HTML ファイルをダブルクリックするか、ブラウザーウィンドウにドラッグ＆ドロップするか、ファイル > 開く...を選択して HTML ファイルを選択するなどです。これを達成する方法はたくさんあります。

ウェブアドレスのパスが `file://` で始まり、その後にローカルハードドライブのファイルへのパスが続く場合、ローカルファイルが使用されています。対照的に、 GitHub でホストされている例 (または他のリモートサーバーの例) を見ると、ウェブアドレスは `http://` または `https://` で始まっており、ファイルが HTTP 経由で受信されたことを示します。

ローカルファイルのテストに関する問題
------------------

一部のサンプルはローカルファイルとして開くと実行されません。これにはさまざまな理由があります。最も可能性が高いのは、

* **非同期リクエストを特徴としている**。 一部のブラウザー (Chrome を含む) は、ローカルファイルからサンプルを実行するだけでは非同期リクエストは実行しません (サーバーからのデータの取得を参照)。これはセキュリティ上の制限があるためです (ウェブセキュリティの詳細については、ウェブサイトのセキュリティを参照してください)
* **サーバー側の言語を使用している**。 サーバー側の言語 (PHP や Python など) では、コードを解釈して結果を提供する特別なサーバーが必要です。
* **他のファイルをインクルードしている**。 ブラウザーは通常、`file://` スキーマを使用してリソースを読み込むリクエストをオリジン間リクエストとして扱います。
 そのため、他のローカルファイルを入れることができるローカルファイルを読み込むと、 CORS エラーが発生することがあります。
シンプルなローカル HTTP サーバーの実行
----------------------

 非同期リクエストの問題を回避するには、ローカルウェブサーバーを介して実行することによって、そのようなサンプルをテストする必要があります。
 私たちの目的のためにこれを行う最も簡単な方法の 1 つは、 Python の `http.server` モジュールを使用することです。

**メモ:** 古いバージョンの Python (バージョン 2.7 まで) では、`SimpleHTTPServer` という名前の似たようなモジュールが提供されていました。Python 2.x を使用している場合、`http.server` の使用をすべて `SimpleHTTPServer` に置き換えることで、このガイドを実行することができます。しかし、最新バージョンの Python を使用することをお勧めします。

このためには次のようにします。

1. Python をインストールします。 Linux または Mac OS X を使用している場合は、既にシステム上で使用可能になっているはずです。 Windows ユーザーの方は、 Python ホームページからインストーラーを入手し、インストーラーの指示に従ってインストールすることができます。
    * python.org に進みます
    * ダウンロードセクションの下で、 Python "3.xxx" のリンクをクリックします
    * ページ下部の *Windows Installer* を選択してダウンロードします
    * ダウンロードしたら、実行します
    * インストーラーの最初のページで、 "Add Python 3.xxx to PATH" チェックボックスをオンにします
    * [インストール]をクリックし、インストールが完了したら[閉じる]をクリックします
2. コマンドプロンプト (Windows)/ターミナル (OS X/Linux) を開きます。 Python がインストールされていることを確認するには、次のコマンドを入力してください。

```bash
python -V
# If the above fails, try:
python3 -V
# Or, if the "py" command is available, try:
py -V
```

3. これによりバージョン番号が返されます。 OK の場合は、`cd` コマンドを使用してサンプルが入っているディレクトリーに移動します

```bash
# include the directory name to enter it, for example
cd Desktop
# use two dots to jump up one directory level if you need to
cd ..
```

4. そのディレクトリーにあるサーバーを起動するコマンドを入力します。

```bash
# If Python version returned above is 3.X
# On Windows, try "python -m http.server" or "py -3 -m http.server"
python3 -m http.server
# If Python version returned above is 2.X
python -m SimpleHTTPServer
```

5. 既定では、これはローカルウェブサーバー上のディレクトリーの内容を 8000 番ポート上で実行します。このサーバーにアクセスするには、ウェブブラウザーで `localhost:8000` の URL に移動します。ここにディレクトリーの内容が表示されるので、実行する HTML ファイルをクリックしてください。

**メモ:** すでに 8000 番ポートで何かが稼働している場合は、 server コマンドを実行して別のポート番号を選択することができます。例えば `python3 -m http.server 7800` (Python 3.x) または `python -m SimpleHTTPServer 7800` (Python 2.x) です。これで `localhost:7800` でコンテンツにアクセスできます。

サーバー側の言語をローカルで実行する
------------------

Python の `http.server` （Python 2.0 では `SimpleHTTPServer`）モジュールは便利ですが、単なる静的ファイルサーバーに過ぎません。 Python、PHP、JavaScript などの言語で書かれたコードの実行方法はわかりません。これを処理するには、必要なことがあります。必要なのは、実行しようとしているサーバー側の言語に依存します。いくつかの例があります。

* Python のサーバー側コードを実行するには、Python ウェブフレームワークを使用する必要があります。 Python のウェブフレームワークには、 Django（ガイドが利用できます）、Flask、Pyramid など人気のものが多く存在します。
* Node.js (JavaScript) サーバー側コードを実行するには、生のノードまたはその上に構築されたフレームワークを使用する必要があります。 Express は良い選択です - Express Web Framework (Node.js/JavaScript) を参照してください
* PHP サーバー側コードを実行するには、PHP の組み込み開発サーバーを起動してください。

```bash
cd path/to/your/php/code
php -S localhost:8000
```


どんなテキストエディターが利用可能？ - ウェブ開発を学ぶ

どんなテキストエディターが利用可能？
==================

この記事ではウェブ開発向けのテキストエディターをインストールする際に考慮すべき点をいくつか取り上げます。

|  |  |
| --- | --- |
| 前提知識: | ウェブサイトを構築するために必要な各種ソフトウェアについて理解していること。 |
| 目標: | ウェブ開発者のニーズに合った、最適なテキストエディターの選び方を学びます。 |

概要
--

ウェブサイトは、ほとんどテキストファイルで構成されています。その開発を容易で快適なものにするため、最適なテキストエディターを選びましょう。

テキストエディターは、コンピューター科学にとって基本的なものです（ウェブ開発はコンピューター科学そのものですよね）。そのため、膨大な選択肢があります。理想を言えば、できるだけ多くのエディターを試して、ワークフローに適したものを見つけるのが良いです。とは言っても、取っ掛かりをつけるため、いくつかの指針をあげることにします。

まず以下の点を検討しましょう。

* どの OS (オペレーティングシステム) を使用するか？
* どのような技術を扱うのか？
* テキストエディターに、どのような基本機能を求めるか？
* テキストエディターの機能を拡張したいか？
* テキストエディターを使用している間、サポートやヘルプが必要か？
* テキストエディターの使い勝手は重要か？

ここまでで価格に言及していないことに注目してください。明らかにそれも重要ですが、製品価格は、その品質や機能とはあまり関係ありません。使いやすいテキストエディターを無料で手に入れることも可能なのです。

人気のあるエディターの例を挙げてみましょう。

| エディター | ライセンス | 価格 | OS | サポート | ドキュメント | 機能拡張 |
| --- | --- | --- | --- | --- | --- | --- |
| Atom | MIT/BSD | 無料 | Windows, Mac, Linux | GitHub Issues | オンラインマニュアル | あり |
| Bluefish | GPL 3 | 無料 | Windows, Mac, Linux | メーリングリスト, wiki | オンラインマニュアル | あり |
| Brackets | MIT/BSD | 無料 | Windows, Mac, Linux | IRC | GitHub Wiki | あり |
| Nova | クローズドソース | $99 | Mac | Twitter,
 フォーラム,
 オンライン | eBook | あり |
| CodeLobster | クローズドソース | 無料 | Windows, Mac, Linux | フォーラム, メール | オンラインマニュアル | あり |
| Emacs | GPL 3 | 無料 | Windows, Mac, Linux | FAQ,
 メーリングリスト, News Group | オンラインマニュアル | あり |
| Espresso | クローズドソース | $99 | Mac | E-mail | オンラインマニュアル | あり |
| Gedit | GPL | 無料 | Windows, Mac, Linux | Discourse, IRC | オンラインマニュアル | あり |
| Kate | LGPL, GPL | 無料 | Windows, Mac, Linux | メーリングリスト,
 IRC | オンラインマニュアル | あり |
| Komodo Edit | MPL | 無料 | Windows, Mac, Linux | Forum | オンラインマニュアル | あり |
| Notepad++ | GPL | 無料 | Windows | Forum | オンラインマニュアル | あり |
| PSPad | クローズドソース | 無料 | Windows | FAQ,
 Forum | Online Help | あり |
| Sublime Text | クローズドソース | $70 | Windows, Mac, Linux | Forum | Official,Unofficial | あり |
| TextMate | クローズドソース | $50 | Mac | Twitter,
 IRC,
 メーリングリスト, E-mail | オンラインマニュアル,
 Wiki | あり |
| BBEdit | クローズドソース | 無料 | Mac | FAQ | オンラインマニュアル | なし |
| Vim | 固有のオープンライセンス | 無料 | Windows, Mac, Linux | メーリングリスト | オンラインマニュアル | あり |
| Visual Studio Code | オープンソース (MIT
 license) / 製品固有のライセンス
  | 無料 | Windows, Mac, Linux | FAQ | ドキュメント | あり |

アクティブラーニング
----------

このアクティブラーニングのコーナーでは、あなたが選択したエディターを使用したりインストールしたりすることを試していただきたいと思います。あなたのコンピューターには、上記で提案したエディターが既にインストールされているかもしれません（例： GNOMEデスクトップを使用している場合は Gedit、KDE を使用している場合は Kate など）が、そうでなければ、あなたが選んだ一つまたは複数のテキストエディターを使用してみてください。

お使いのエディターの設定を掘り下げ、マニュアルや文書を読んで、その機能を確認してみてください。特に（エディターで可能であれば）、以下のことを試してみてください。

* 構文強調表示の設定や色の変更
* インデントの幅をいじって、ニーズに合わせて適切な設定にする。
* 自動保存とセッション保存の設定を確認する
* 何らかの利用できるプラグインを設定し、新しいプラグインの入手方法を調査する
* カラースキームの変更
* ビューの設定を調整し、ビューのレイアウトを変更する方法を確認する
* エディターが対応しているプログラミング言語/技術を確認する

学習中は、ほとんどのテキストエディターの設定については既定値を使用しても問題ありませんが、選択したツールに精通することが重要であり、自分の使用目的に最適なものを選択することができるようになります。エディターやツールのカスタマイズについては、経験を積むことでより深く理解できるようになりますし、より重要なのは、どの機能が自分の目的にとってより有用であるかを知ることです。

より深く掘り下げる
---------

### 選択基準

それでは、テキストエディターを選ぶとき何を考慮すべきでしょうか？

#### どの OS (オペレーティングシステム) を使用するか？

もちろん、それは自分の選択です。しかし、エディターによっては特定の OS でしか稼働率がないものもあるので、切り替えが好きな人は可能性を狭めることになります。お使いのシステムで動作するのであれば、どんなエディターでも仕事をすることができますが、クロスプラットフォームのエディターは他の OS への移行を容易にします。

最初に、あなたが使う OS を選びます。次に、検討中のエディターがその OS に対応しているか確認してください。ほとんどのエディターは Windows や Mac のサポート状況を、そのウェブサイトで公開しています。 OS のバージョンが限定されている 場合もあります。 Ubuntu を使うのなら、 Ubuntu ソフトウェアセンター内を検索することをお勧めします。ただし、 Linux/UNIX の世界には多様性があり、ディストリビューションが違うと動作も異なったり、パッケージ間の互換性がなかったりします。あまり流通していないテキストエディターに関心を抱いたりすると、自分でソースからコンパイルする羽目になるかもしれません （気の弱い人にはお勧めできません）。

#### どのような技術を操りたいのか

一般論を言えば、テキストエディターなら、どんなテキストファイルでも開くことができます。自分のメモ書き程度なら、それで十分です。しかし、ウェブ開発を行い、HTML、CSS、JavaScript を使ったりすると、ファイルはかなり大きくて複雑なものになります。ウェブで扱う技術情報に基づいテキストエディターを選択して、作業を簡単にしましょう。多くのテキストエディターには次のような支援機能があります。

* **構文強調**。使用する技術のキーワードを着色表示することで、ファイルが読みやすくなります。
* **コードの補完**。よく出てくる構造を自動的に補完して、入力を手助けしてくれます（例えば、 HTML のタグを自動的に閉じたり、正しい CSS 属性の候補を挙げるなど）。
* **コードスニペット**。新規に HTML 文書を作成していると、同じ構文が何度も出てきます。コードスニペットとして登録した文書の断片を埋めていくことで、何度も入力する労苦から解放されます。

構文強調はほとんどのテキストエディターが対応していますが、他の 2 つの機能はまだのものが多いのが現状です。使用する予定のテキストエディターが、 HTML、 CSS、それに JavaScript を強調できるか確認しておきましょう。

#### テキストエディターに、どのような基本機能を求めるか？

あなたのニーズと計画によりますが、以下の機能は多くの場合に有用です。

* 文字列の検索と置換。単一ファイル、あるいは複数ファイルにわたって実行できるとよい。検索には正規表現、必要なら他のパターンを使う。
* 指定した行へ移動する。
* 大きなファイルの離れた場所を、画面を分割して表示する。
* HTML をブラウザー上で見えるように表示する。
* 散在する文字列を同時に選択する。
* プロジェクトファイルとディレクトリーを表示する。
* 自動整形機能で、コードを読みやすくする。
* 英文などのスペルチェックを行う。
* インデント設定に基づきコードを自動インデントする。

#### テキストエディターの機能を拡張したいか？

拡張型のテキストエディターは、標準で組み込まれた機能こそ少ないが、必要に応じて機能を拡張することができます。

どのような機能が必要かわからない場合、またはお気に入りのエディターにそのような機能がない場合、拡張可能なエディターを探してみてください。最高のエディターは多くのプラグインを提供しており、新しいプラグインを自動的に探してインストールする方法が理想的です。

もし、たくさんの機能が好きで、すべてのプラグインのためにエディターが遅くなるなら、 IDE （統合開発環境）を使用してみてください。IDE は多くのツールを一つのインターフェイスで提供しており、初心者には少し難しいですが、 テキストエディターに制限が多いと感じる場合は常に選択肢の一つになります。ここでは、いくつかの人気のある IDE を紹介します。

* Aptana Studio
* Eclipse
* Komodo IDE
* NetBeans IDE
* Visual Studio
* WebStorm

#### テキストエディターを使用している間、サポートやヘルプが必要か？

テキストエディターの場合、 2 種類の対応をしているかどうかを確認しましょう。

* ユーザー向けのコンテンツ（FAQ、マニュアル、オンラインヘルプなど）
* 開発者や他のユーザーとのディスカッション（フォーラム、メール、チャットなど）

エディターの使用方法を学ぶときは、文書化されたドキュメントを使用しましょう。エディターをインストールしたり使用したりする際にトラブルシューティングが発生した場合は、他のユーザーと連絡を取りましょう。

#### テキストエディターの使い勝手は重要か？

たしかに、好みの問題かもしれません。いっぽうでは、表示色やボタンの位置など、UI（ユーザーインターフェース）のそこかしこをカスタマイズしたがる人もいます。変更可能な範囲はエディターごとに異なるので、導入前に調べておきましょう。色遣いを変えられるエディターは多くあります。しかし、カスタマイズしたいことがあまり多いようなら、統合開発環境を選んだ方が賢明です。

### インストールとセットアップ

テキストエディターのインストールは、非常に分かりやすいのが普通です。その方法はプラットフォーム（OS）によって変わりますが、それほど難しいものではありません。:

* **Windows:** インストールファイルは通常、 `.exe` や `.msi` の実行可能ファイルとして提供されます。また、圧縮ファイル（`.zip`、`.7z`、`.rar`など）として提供されることもあります。その場合は、解凍するソフトウエアが別途必要になりますが、`.zip` ファイルの解凍ソフトは Windows に標準で付属してきます。
* **Mac:** エディターのウェブサイトから、 `.dmg` ファイルをダウンロードします。 Apple Store から簡単にインストールできるエディターもあります。
* **Linux:** 主要なディストリビューションについては、グラフィカルインターフェースのあるパッケージマネージャー（Ubuntu ソフトウエアセンター、mintInstall、GNOME Software、 &c など）からインストールできます。また、 パッケージ済みの`.deb` や`.rpm` ファイルとして入手できることもできます。リポジトリーサーバーからインストールすることも多いし、最悪の場合ソースコードを自分でコンパイルしなければならないこともあります。テキストエディターのウェブサイトにあるインストール手順の説明を、じっくり調べることをお勧めします。

新しいエディターをインストールしても、\*\*ファイルの関連付け\*\*を変更するまで、 OS は既定のエディターでテキストファイルを開き続けるでしょう。この手順は、あなたがファイルをダブルクリックしたときに、 OS があなたの好みのエディターで開くように設定するのに役立ちます。

* Windows
    + Windows 8
    + Windows 7
    + older systems
* macOS
* Linux
    + Ubuntu Unity
    + GNOME
    + KDE
次のステップ
------

良いテキストエディターが見つかったら、基本的な作業環境（テストサーバー）の構築に着手しましょう。あるいは、最初のウェブページを書いてみるのもいいでしょう。


Django ウェブフレームワーク (Python) - ウェブ開発を学ぶ

Django ウェブフレームワーク (Python)
==========================

Django は、Python で書かれた高機能なサーバーサイドウェブフレームワークで、とても普及しています。このモジュールは、Django が最も人気のあるウェブサーバーフレームワークの 1 つである理由、開発環境の設定方法、独自のウェブアプリケーションを作成する方法を説明します。

前提条件
----

このモジュールを進める前に、Django を知る必要はありません。理想は、サーバーサイドのウェブサイトプログラミング第一歩 を読んで、サーバーサイドのウェブプログラミングとウェブフレームワークについて理解しておくことです。

プログラミングの概念と Python に関する一般的な知識はあるとよいですが、主要概念を理解していることは必須ではありません。

**メモ:** Python は、初心者が読んで理解しやすい最も簡単なプログラミング言語の 1 つです。つまり、このモジュールをより理解したいのであれば、インターネット上の多数の無料の書籍やチュートリアルがあなたを助けてくれます。（新しいプログラマーは python.org wiki の Python for Non Programmers ページをチェックすると良いでしょう。）

ガイド
---

Django の紹介

この最初の Django の記事では、「Django とは何か」という問いに答え、このウェブフレームワークの特徴と概要を説明します。主な機能の概要と、このモジュールで詳しく説明しない高度な機能などを紹介します。また、Django アプリケーションの主要な構成部品のいくつかを示して、使いはじめる前にどのように使うのか、何ができるのかを知っておきます。

Django 開発環境の設定

Django がどのようなものか知ったので、次は Windows、Linux (Ubuntu)、Mac OS X で Django 開発環境をセットアップしてテストする方法を説明します。一般的なオペレーティングシステムを使っていれば、この記事で Django アプリケーションの開発を始められるでしょう。

Django チュートリアル: 地域図書館ウェブサイト

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

Django チュートリアル Part 2: ウェブサイトの骨組み作成

この記事は、基本的なウェブサイトプロジェクトの「骨組み」をどのように作っていくのかを示します。サイト固有の設定、URL、モデル、ビュー、テンプレートを作成する方法について説明します。

Django チュートリアル Part 3: モデルの使用 (en-US)

この記事は、地域図書館ウェブサイト用のモデルを定義する方法を示します ― モデルはアプリケーションのデータを格納するデータ構造を表し、Django はデータベースにデータを格納できます。モデルとは何か、どのように定義されるのか、および主要なフィールドタイプのいくつかを説明します。また、モデルデータにアクセスする主な方法のいくつかを簡単に示します。

Django チュートリアル Part 4: Django 管理サイト (en-US)

地域図書館ウェブサイトのモデルを作成したので、Django 管理サイトを使用して実際の書籍データを追加します。最初に、管理サイトにモデルを登録する方法を示します。その後、ログインしてデータを作成する方法を示します。最後に、管理サイトの表示を改善する方法をいくつか示します。

Django チュートリアル Part 5: ホームページの作成 (en-US)

最初のページ全体を表示するコードを追加する準備が整いました。ここでは地域図書館ウェブサイトのホームページで各モデルタイプのレコード数を表示し、他のページへのサイドバーナビゲーションリンクを提供します。基本的な URL マップやビューを作成したり、データベースからレコードを取得したり、テンプレートを使用して実践的な経験を積むことができます。

Django チュートリアル Part 6: 汎用の一覧表示と詳細表示 (en-US)

このチュートリアルでは、地域図書館ウェブサイトを拡張し、書籍や著者の一覧と詳細ページを追加します。ここでは、汎用のクラスベースのビューについて学び、共通のユースケースのために書くコードの量をどのように減らせるかを示します。また URL のパターンマッチングがどのように行われるのか詳しく説明します。

Django チュートリアル Part 7: セッションフレームワーク (en-US)

このチュートリアルでは、地域図書館ウェブサイトを拡張し、ホームページにセッションベースのアクセスカウンターを追加します。これは比較的簡単な例ですが、セッションフレームワークを使用して、自分のサイトの匿名ユーザーに永続的な動作を提供する方法を示しています。

Django チュートリアル Part 8: ユーザー認証と権限 (en-US)

このチュートリアルでは、ユーザーが自分のアカウントで自分のサイトにログインできるようにする方法と、ログインできるかどうかを制御する方法、ログインしているかどうか、アクセス許可によって表示する方法について説明します。このデモンストレーションの一環として、地域図書館ウェブサイトを拡張し、ログインページとログアウトページを追加し、貸し出された本を表示するためのユーザーとスタッフのページを追加します。

Django チュートリアル Part 9: フォームの操作 (en-US)

このチュートリアルでは、Django で HTML フォーム (en-US)を扱う方法、特にモデルインスタンスを作成、更新、削除するためのフォームを書く最も簡単な方法を紹介します。このデモンストレーションの一環として、図書館員が書籍を更新したり、管理アプリケーションを使用するのではなく独自のフォームを使用して著者の作成、更新、削除を行えるように、地域図書館ウェブサイトを拡張します。

Django チュートリアル Part 10: Django ウェブアプリケーションのテスト (en-US)

ウェブサイトが成長するにつれて、手動でテストするのが困難になります。コンポーネント間のやりとりが複雑になるにつれて、ある領域の小さな変更が、他の領域へ影響がないか検証するためのテストの追加が多く必要になります。これらの問題を軽減する 1 つの方法は、変更を行うたびに簡単かつ確実に実行できる自動テストを作成することです。このチュートリアルでは、Django のテストフレームワークを使用して、あなたのウェブサイトの単体テストを自動化する方法を示します。

Django チュートリアル Part 11: Django を本番環境にデプロイする (en-US)

これで、地域図書館の素晴らしいウェブサイトを作成 (およびテスト) できました。公開ウェブサーバーにインストールして、図書館のスタッフやメンバーがインターネット経由でアクセスできるようにしたいですね。この記事では、ウェブサイトを展開するホストを見つける方法と、サイトを実稼働のために必要な準備作業の概要について説明します。

Django ウェブアプリケーションセキュリティ (en-US)

ユーザーデータの保護は、ウェブサイトの設計において不可欠な要素です。以前、ウェブセキュリティの記事でより一般的なセキュリティ上の脅威のいくつかについて説明しました。この記事では、Django の組み込み保護がそのような脅威をどのように処理するかを実践的に実演します。

課題
--

次の課題では、上記のガイドに記載されているように、Django を使用してウェブサイトを作成する方法を理解しているかテストします。

DIY Django ミニブログ (en-US)

この課題では、このモジュールから学んだ知識の一部を使用して自分のブログを作成します。


サーバーで MIME タイプを正しく設定する - ウェブ開発を学ぶ

サーバーで MIME タイプを正しく設定する
======================

MIME タイプは、電子メール、またはウェブサーバやウェブアプリケーションによって提供されるコンテンツのメディアの種類を記述します。これらは、コンテンツがどのように処理され表示されるべきかのヒントを提供することを支援することを意図しています。

MIME タイプの例です。

* `text/html` は HTML 文書
* `text/plain` はプレーンテキスト
* `text/css` はカスケーディングスタイルシート
* `text/javascript` は JavaScript ファイル
* `text/markdown` は Markdown ファイル
* `application/octet-stream` はユーザーの操作が必要なバイナリーファイル

サーバーの既定の設定はさまざまで、コンテンツの種類を定義していないファイルには異なる MIME 型の既定値を設定します。

Apache ウェブサーバーの **2.2.7 より前**のバージョンでは、未知のコンテンツの種類に対して `text/plain` か `application/octet-stream` の MIME タイプを報告するように設定されていました。

Nginx は既定ののコンテンツの種類を定義しない場合、`text/plain` を報告します。

新しいコンテンツの種類が生まれたりウェブサーバーに追加されたりすると、ウェブ管理者は新しい MIME タイプをウェブサーバーの設定に追加しないことがあります。これは、ウェブサーバーやアプリケーションから報告される MIME タイプを尊重するブラウザー のユーザーにとって、主要な問題の原因となります。

なぜ正しい MIME タイプが重要なのか
--------------------

ウェブサーバーやアプリケーションがコンテンツに対して正しくない MIME タイプ（未知のコンテンツに対する「既定値」を含む）を報告した場合、ウェブブラウザーは作者の意図を知る術がありません。これにより、予期しない動作が発生する可能性があります。

ウェブブラウザーの中には、正しい MIME タイプを推測しようとするものがあります。このため、誤設定されたウェブサーバーやアプリケーションは、そのブラウザーで動作し続けることができます（ただし、標準を正しく実装した他のブラウザーでは動作しません）。これは HTTP の仕様に違反するだけでなく、他にもいくつかの重大な理由から悪い考えであると言えます。

制御ができなくなる

報告された MIME タイプをブラウザーが無視した場合、ウェブ管理者や作者は、コンテンツがどのように処理されるかを制御することができなくなります。

例えば、ウェブ開発者向けのウェブサイトでは、ある HTML 文書の例を `text/html` か `text/plain` のどちらかで送信し、その文書が HTML として処理されて表示されるか、ソースコードとして表示されるかを選択することができる場合があります。ブラウザーが MIME タイプを推測した場合、作者がこのオプションを利用することができなくなります。

セキュリティ

実行可能プログラムなど、一部の種類のコンテンツは本質的に安全ではありません。このため、これらの MIME タイプでは通常、その種類のコンテンツが指定されたときにウェブブラウザーが取ることができる動作が制限されています。実行可能なプログラムは、ユーザーのコンピューター上で実行されるべきではなく、少なくとも、ファイルをダウンロードするかどうかを**ユーザーに尋ねる**ダイアログを示す必要があります。

MIME タイプの推測は、悪意のある作成者が危険なファイルの MIME タイプを安全なタイプとして誤って報告することに基づく、インターネットエクスプローラーのセキュリティ悪用につながりました。これは通常のダウンロードダイアログを迂回し、結果としてインターネットエクスプローラがコンテンツを実行可能なプログラムであると推測し、ユーザーのコンピューター上で実行することになります。

JavaScript の古い MIME タイプ
-----------------------

JavaScript の MIME タイプに関する情報を探していると、JavaScript を参照する MIME タイプに複数遭遇することがあります。これらの MIME タイプには次のようなものがあります。

* `application/javascript`
* `application/ecmascript`
* `application/x-ecmascript`
* `application/x-javascript`
* `text/ecmascript`
* `text/javascript1.0`
* `text/javascript1.1`
* `text/javascript1.2`
* `text/javascript1.3`
* `text/javascript1.4`
* `text/javascript1.5`
* `text/x-ecmascript`
* `text/x-javascript`

ブラウザーはこれらの代替 MIME タイプのいずれか、いくつか、またはすべてに対応しているかもしれませんが、JavaScript ファイルの MIME タイプを示すには、`text/javascript` **のみ**を使用しましょう。

**メモ:** 詳しくは MIME タイプ（IANA メディア種別）をご覧ください。

設定する MIME タイプの決定方法
------------------

コンテンツを提供するために使用する正しい MIME タイプの値を決定する方法はいくつかあります。

* コンテンツが商用ソフトウェアを使用して作成された場合は、ベンダーの文書を読んで、アプリケーションに報告されるべき MIME タイプを確認してください。
* IANA の MIME Media Types registry の中を調べてください。ここには登録済みの MIME タイプに関するすべての情報があります。
* FILExt や File extensions reference でファイルの拡張子を検索し、その拡張子に関連する MIME タイプを確認してください。アプリケーションは 1 文字だけ異なる複数の MIME タイプを持っていることがあるので、よく注意してください。
受信したコンテンツの MIME タイプを調べる方法
-------------------------

* Firefox では
    + ファイルを読み込み、**ツール > ページの情報**を実行して、アクセスしたページの MIME タイプを確認してください。
    + **ツール > ウェブ開発者 > ネットワーク**を実行して、ページを再読み込みしてください。リクエストタブには、ページが読み込んでいるすべてのリソースのリストが表示されます。いずれかのリソースをクリックすると、ページの `Content-Type` ヘッダーを含む、利用可能なすべての情報が一覧表示されます。
* Chrome では
    + ファイルを読み込んで、**表示 > 開発者 > 開発者ツール** に進み、*ネットワーク* タブを選びます。ページを再読み込みし、検査したいリソースを選択します。ヘッダーの下にある `Content-Type` を見ていくと、リソースのコンテンツの種類が表示されます。
* ページのソースの中で、MIME タイプを示す `<meta>` 要素を探してください。例えば、`<meta http-equiv="Content-Type" content="text/html">` です。
    + 標準によると、MIME タイプを指定する `<meta>` 要素は、Content-Type ヘッダーが利用できる場合は無視されるべきです。

IANA は登録済みの MIME メディア型 ほ保守しています。HTTP 仕様書は MIME タイプのスーパーセットを定義しており、ウェブ上で使用できるメディア型を記述するために使用することができます。

正しい MIME タイプを送信するようにサーバーを設定するには
-------------------------------

目標は、サーバーを設定して各文書に対して正しい `Content-Type` ヘッダーを送信するようにすることです。

* Apache ウェブサーバーを使用している場合は、Apache の設定: .htaccess (en-US) の ***メディア型と文字エンコーディング*** の節で、様々な文書の種類とそれに対応する MIME タイプの例を調べてください。
* Nginx を使用している場合、Nginx には `.htaccess` に相当するツールがないので、変更はすべてメインの設定ファイルに入ることに注意してください。
* サーバーサイドスクリプトやフレームワークを使用してコンテンツを生成している場合、コンテンツの種類を示す方法は、使用しているツールによって異なります。

どのサーバーシステムを使用しているかにかかわらず、達成すべき効果は、`Content-Type` という名前にコロンと空白が続き、MIME タイプが続くレスポンスヘッダーを設定することです。高水準の環境では、ページを生成するときにこのようなヘッダーを設定することが多いようです。例えば PHP 環境では、この例のように PDF リソースのレスポンスヘッダーを設定することができます。

```php
header('Content-Type: application/pdf')
```

代わりに `header('application/pdf')` を設定しようとしても、動作しません。

関連リンク
-----

* IANA | MIME Media Types（英語）
* Hypertext Transfer Protocol — HTTP/1.1（英語）
* MIME タイプ（IANA メディア種別）
* Apache vs Nginx: Practical Considerations（英語）
* Migrate Apache .htaccess to Nginx server block（英語）


フレームワークなしの Node.js サーバ - ウェブ開発を学ぶ

フレームワークなしの Node.js サーバ
======================

この記事では、フレームワークを使用せずに、Node.js だけで構築された単純な静的ファイルサーバを紹介します。

Node.js用に、サーバを稼働させるのに役立つ多くのフレームワークがあります。

最も人気があるのは、次のようなものです：

* Express: 広く使われているフレームワーク
* Hapi.js: アプリケーションとサービスを構築するための豊富なフレームワーク
* Total: 他のフレームワークやモジュールに依存しない、オールインワンの Node.js フレームワーク。

これらは、どんな状況にも適しているというわけではありません。開発者は既存のフレームワークに依存することなく、独自のサーバを構築する必要があることもあるでしょう。

静的ファイルサーバーの例
------------

Node.js で構築された、簡単な静的ファイルサーバの例を以下に示します。

```js
var http = require("http");
var fs = require("fs");
var path = require("path");

http
  .createServer(function (request, response) {
    console.log("request ", request.url);

    var filePath = "." + request.url;
    if (filePath == "./") {
      filePath = "./index.html";
    }

    var extname = String(path.extname(filePath)).toLowerCase();
    var mimeTypes = {
      ".html": "text/html",
      ".js": "text/javascript",
      ".css": "text/css",
      ".json": "application/json",
      ".png": "image/png",
      ".jpg": "image/jpg",
      ".gif": "image/gif",
      ".svg": "image/svg+xml",
      ".wav": "audio/wav",
      ".mp4": "video/mp4",
      ".woff": "application/font-woff",
      ".ttf": "application/font-ttf",
      ".eot": "application/vnd.ms-fontobject",
      ".otf": "application/font-otf",
      ".wasm": "application/wasm",
    };

    var contentType = mimeTypes[extname] || "application/octet-stream";

    fs.readFile(filePath, function (error, content) {
      if (error) {
        if (error.code == "ENOENT") {
          fs.readFile("./404.html", function (error, content) {
            response.writeHead(404, { "Content-Type": "text/html" });
            response.end(content, "utf-8");
          });
        } else {
          response.writeHead(500);
          response.end(
            "Sorry, check with the site admin for error: " +
              error.code +
              " ..\n",
          );
        }
      } else {
        response.writeHead(200, { "Content-Type": contentType });
        response.end(content, "utf-8");
      }
    });
  })
  .listen(8125);
console.log("Server running at http://127.0.0.1:8125/");
```

### 各部の説明

第 1 行から第 3 行までは、Node.js が提供するモジュールを組み込みます。おおむね「インポート」に似たような手続きです。

```js
var http = require("http");
var fs = require("fs");
var path = require("path");
```

次にある関数で、サーバーを生成します。 `https.createServer`は、サーバーオブジェクトを返しますが、下の例ではポート 8125 で要求の受付を開始します。

```js
http.createServer(function (request, response) {
    ...
}).listen(8125);
console.log('Server running at http://127.0.0.1:8125/');
```

次の 4 行では、要求があった URL から、ファイルへのパスを決定します。ファイル名が明示されていないときは、デフォルト名を使うようにします。

```js
console.log("request ", request.url);
var filePath = "." + request.url;
if (filePath == "./") {
  filePath = "./index.html";
}
```

例えば、`example.org`という URL を要求されたときは、`example.org/index.html`.のことだと解釈します。

次に、要求されたファイルの拡張子を調べ、以下に定義するMIME タイプのどれかと一致したら、そのタイプを使います。一致しない場合には、デフォルトのタイプ`application/octet-stream`を使うようにします。.

```js
var extname = String(path.extname(filePath)).toLowerCase();
var mimeTypes = {
  ".html": "text/html",
  ".js": "text/javascript",
  ".css": "text/css",
  ".json": "application/json",
  ".png": "image/png",
  ".jpg": "image/jpg",
  ".gif": "image/gif",
  ".svg": "image/svg+xml",
  ".wav": "audio/wav",
  ".mp4": "video/mp4",
  ".woff": "application/font-woff",
  ".ttf": "application/font-ttf",
  ".eot": "application/vnd.ms-fontobject",
  ".otf": "application/font-otf",
  ".wasm": "application/wasm",
};

var contentType = mimeTypes[extname] || "application/octet-stream";
```

最後に、ファイルの情報をクライアントに返送します。この関数では、あらかじめ用意してあった`filePath`変数を使ってファイルを読み込みます。

```js
fs.readFile(filePath, function(error, content) {
    ...
});
```

関数のなかで最初にやることは、起こりうるエラーへの対応です。

```js
if (error) {
  ..
} else {
  ..
}
```

一番多いのは、存在しないファイルを要求された場合（`ENOENT`）で、エラーコード 404 に対応するページを返してやります。

```js
if (error.code == "ENOENT") {
  fs.readFile("./404.html", function (error, content) {
    response.writeHead(404, { "Content-Type": "text/html" });
    response.end(content, "utf-8");
  });
} else {
  response.writeHead(500);
  response.end(
    "Sorry, check with the site admin for error: " + error.code + " ..\n",
  );
}
```

何もエラーが検出されなかったら、MIME 型をヘッダーに付けて、要求されたファイルを返してやります。

```js
response.writeHead(200, { "Content-Type": contentType });
response.end(content, "utf-8");
```

拡張の検討
-----

静的なファイルの返送機能だけでなく、要求の度にページを動的に生成する機能を付け加えることを考えてみてください。


Express ウェブフレームワーク (Node.js/JavaScript) - ウェブ開発を学ぶ

Express ウェブフレームワーク (Node.js/JavaScript)
=======================================

Express は、JavaScript で書かれ、Node.js 実行環境内でホストされている、人気の指図しないウェブフレームワークです。このモジュールでは、このフレームワークの主な利点、開発環境の設定方法、一般的なウェブ開発と配置作業の実行方法について説明します。

前提条件
----

このモジュールを始める前に、サーバーサイドのウェブプログラミングとウェブフレームワークが何かを理解する必要があります。理想的なのはサーバーサイドのウェブサイトプログラミングの第一歩モジュールのトピックを読むことです。プログラミングの概念と JavaScript の一般的な知識があることを強くお勧めしますが、中核となる概念を理解するために不可欠ではありません。

**メモ:** このウェブサイトには、クライアントサイド開発のコンテキストで JavaScript を学習するための多くの有用なリソースがあります。JavaScript、JavaScript ガイド、JavaScript の基本、JavaScript(学習)。JavaScript のコアとなる言語と概念は、Node.js でのサーバーサイド開発と同じであり、この資料は関連性があります。Node.js は、ブラウザーレス環境で役立つ機能をサポートするための追加の API を提供します (たとえば、HTTP サーバーを作成してファイルシステムにアクセスするため。ただし、ブラウザーおよび DOM を操作するための JavaScript API はサポートしません)。

このガイドは Node.js と Express を使った作業についての情報を提供します。インターネットや本には他にもたくさんの優れたリソースがあります。これらのうち一部は How do I get started with Node.js (StackOverflow) と What are the best resources for learning Node.js? (Quora) からリンクされています。

ガイド
---

Express/Node の入門

この最初の Express 記事では、"Node とは何ですか？"、"Express とは何ですか？" という質問に答えます。Express ウェブフレームワークが特別になった理由の概要を説明します。主な機能の概要を説明し、Express アプリケーションの主な構成要素をいくつか紹介します (ただし、現時点ではテスト用の開発環境はまだありません)。

Node (Express) 開発環境の設定

Express の目的がわかったので、Windows、Linux (Ubuntu)、および macOS 上で Node/Express 開発環境を設定およびテストする方法を説明します。この記事は、オペレーティングシステム共通の、Express アプリの開発を始めるために必要なものを提供します。

Express チュートリアル: 地域図書館のウェブサイト

私たちの実用的なチュートリアルシリーズの最初の記事はあなたが何を学ぶかについて説明して、それを通して研究し、そしてその後の記事で進化するであろう "地域図書館" の例のウェブサイトの概要を提供します。

Express チュートリアル Part 2: スケルトンウェブサイトの作成

この記事ではどのようにして "スケルトン"ウェブサイトプロジェクトを作成し、その後サイト固有のルート、テンプレート/ビュー、およびデータベースを追加するかを説明します。

Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)

この記事では、Node/Express 用のデータベースについて簡単に紹介します。続いて、Mongoose を使用して「地域図書館」ウェブサイトへのデータベースアクセスを提供する方法を説明します。オブジェクトスキーマとモデルの宣言方法、主なフィールドタイプ、および基本的な検証について説明します。また、モデルデータにアクセスするための主な方法のいくつかについても簡単に説明します。

Express チュートリアル Part 4: ルートとコントローラー (en-US)

このチュートリアルでは、「地域図書館」ウェブサイトで最終的に必要なすべてのリソースエンドポイントに対して、"ダミー" ハンドラ関数を使用してルート (URL 処理コード) を設定します。完成したら、次の記事で実際のハンドラ関数を使って拡張できるように、ルート処理コードのためのモジュール構造を作ります。Express を使用してモジュラールートを作成する方法についても、非常によく理解できるでしょう。

Express チュートリアル Part 5: ライブラリデータの表示

これで、「地域図書館」のウェブサイトの書籍やその他のデータを表示するページを追加する準備が整いました。このページには、各モデルタイプのレコード数と、すべてのモデルのリストおよび詳細ページを示すホームページが含まれます。その過程で、データベースからレコードを取得したりテンプレートを使用したりする実際的な経験を積むことになります。

Express チュートリアル Part 6: フォームの操作

このチュートリアルでは Pug を使用して Express で HTML フォームを操作する方法、特にデータベースからドキュメントを作成、更新、削除するためのフォームを作成する方法を説明します。

Express チュートリアル Part 7: プロダクションへのデプロイ (en-US)

これで素晴らしい「地域図書館」ウェブサイトを作成したので、それを公共のウェブサーバーにインストールして、図書館のスタッフとメンバーがインターネットを介してアクセスできるようにします。この記事では、ウェブサイトをデプロイするためのホストを見つける方法、およびサイトを運用に向けて準備するために必要な作業の概要について説明します。

チュートリアルを追加する
------------

既存のチュートリアル記事は以上となります。あなたがそれを拡張したいならば、カバーする他の興味深いトピックは以下の通りです。

* セッションの使用
* ユーザー認証
* ユーザーの認可と権限
* Express ウェブアプリケーションをテストする
* Express ウェブアプリケーションのウェブセキュリティ

そしてもちろん、評価作業を行うのは素晴らしいことです。


サーバサイドの Web サイトプログラミングの第一歩 - ウェブ開発を学ぶ

サーバサイドの Web サイトプログラミングの第一歩
==========================

このモジュールでは、サーバーサイドプログラミングに関するいくつかの基本的な質問、"これは何？"、"クライアントサイドプログラミングとどう違うの？"、"なぜ便利なの？" について答えます。次に、最も人気のあるサーバーサイドの ウェブフレームワークの概要と、最初のサイトを作成するための最適なフレームワークの選択方法に関するガイダンスを提供します。最後に、ウェブサーバーのセキュリティに関する高度な入門記事を提供します。

前提条件
----

このモジュールを開始する前に、サーバーサイドのウェブサイトプログラミングやその他のプログラミングの知識は必要ありません。

しかしながら、"ウェブがどのように動作するか" を理解する必要があります。まず以下のトピックスを読むことをお勧めします:

* ウェブサーバーとは
* ウェブサイトをビルドするために必要なソフトウェアは？
* ウェブサーバーにファイルをアップロードするには？

基本的な事を理解できれば、このセクションを読み進む準備が整います。

ガイド
---

サーバーサイドの概要

MDN のサーバーサイドプログラミング入門コースにようこそ！この最初の記事では、「それはどんなもの？」、「クライアントサイドプログラミングとはどう違う？」、「なぜ便利なの？」 という質問に答えながら、ハイレベルな視点からサーバーサイドプログラミングを見ていきます。この記事を読めば、サーバーサイドコーディングを行うことで、 ウェブサイトにどんな機能を加えることができるか、理解できるようになります。

クライアント-サーバーの概要

サーバーサイドプログラミングの目的と潜在的な利点を知ったので、サーバーがブラウザーから "動的リクエスト" を受け取ったときに起こることを詳細に検討します。ほとんどのウェブサイトのサーバーサイドコードは同様の方法でリクエストとレスポンスを処理するので、これは自身のコードの大部分を書くときに何が必要かを理解するのに役立ちます

サーバーサイドウェブフレームワーク

前の記事では、ウェブクライアントとサーバー間の通信、HTTP リクエストとレスポンスの性質、およびウェブブラウザーからのリクエストにレスポンスするためにサーバーサイドウェブアプリケーションが実行する必要があることについて説明しました。この知識をもとに、ウェブフレームワークがどのようにこれらのタスクを単純化できるかを探り、最初のサーバーサイドウェブアプリケーションのためのフレームワークをどのように選択するかを考えてみましょう。

ウェブサイトのセキュリティ

ウェブサイトのセキュリティでは、ウェブサイトのデザインと使用方法のあらゆる面で警戒が必要です。この入門記事ではウェブサイトのセキュリティの第一人者にはなりませんが、脅威がどこから発生するのか、そして最も一般的な攻撃に対して Web アプリケーションを強化するために何ができるのかを理解するのに役立ちます。

課題
--

コードをまだ説明していないため、この "概要" モジュールでは課題はありません。サーバーサイドプログラミングを使用して提供できる機能の種類が何かをよく理解していることを期待しています。また、初めてのウェブサイトを作成するために使用するサーバーサイドの ウェブフレームワークについて決断していることを望みます。


Node 開発環境の設定 - ウェブ開発を学ぶ

Node 開発環境の設定
============

* 前のページ
* Overview: Express Nodejs
* 次のページ

Express の目的が理解できたので、Windows、Linux (Ubuntu)、および macOS 上で Node/Express 開発環境をセットアップしてテストする方法を説明します。どのような一般的な OS を使用していても、この記事では Express アプリケーションの開発を開始するために必要なものを提供します。

| 前提条件: | 端末/コマンドラインを開く方法を知っている。開発用コンピューターの OS にソフトウェアパッケージをインストールする方法を知っている。 |
| --- | --- |
| 目標: | コンピューター上に Express 用の開発環境をセットアップします。 |

Express 開発環境概要
--------------

Node と Express のおかげでウェブアプリケーションの開発を始めるためにコンピューターをセットアップすることが非常に簡単になります。このセクションでは必要なツールの概要、Ubuntu、macOS、および Windows に Node (および Express) をインストールするための最も簡単な方法について説明し、インストールをテストする方法を示します。

### Express 開発環境とは何か?

*Express* 開発環境には *Nodejs*、*NPM* パッケージマネージャー、および (オプションで) ローカルコンピューターに *Express Application Generator* がインストールされています。

*Node* と *NPM* パッケージマネージャーは、準備されたバイナリパッケージ、インストーラー、オペレーティングシステムのパッケージマネージャー、またはソースから一緒にインストールされます (次のセクションを参照)。 *Express* は、*NPM* によって、個々の *Express* ウェブアプリケーションの依存関係として (テンプレートエンジン、データベースドライバー、認証ミドルウェア、静的ファイルを提供するためのミドルウェアなどの他のライブラリと共に) インストールされます。

*NPM* は MVC パターンに従ったスケルトンの *Express* ウェブアプリケーションを作成するための便利なツールである *Express Application Generator*を (グローバルに) インストールするためにも使用できます。Express を使用するアプリを作成したり、同じアーキテクチャ上のレイアウトや依存関係を持つ Express アプリを構築したりするためにこのツールを使用する必要はないため、アプリケーションジェネレーターはオプションです。ただし、使い始めるのがはるかに簡単になり、モジュール式のアプリケーション構造が促進されるため、これを使用します。

**メモ:** 他のウェブフレームワークとは異なり、開発環境には独立した開発用の ウェブサーバーは含まれていません。*Node/Express* では、ウェブアプリケーションが独自のウェブサーバーを作成して実行します。

テキストエディタやコード編集用の IDE、コードの異なるバージョンを安全に管理するための Git などのソース管理マネジメントツールなど、一般的な開発環境の一部である他の周辺ツールもあります。これらの種類のツール (特にテキストエディタ) が既にインストールされていると仮定しています。

### どのオペレーティングシステムがサポートされていますか？

*Node* は Windows、macOS、Linux の多くの「フレーバー」、Docker などで実行できます (nodejs のダウンロードページに完全なリストがあります)。ほとんどのパーソナルコンピューターは開発中に Node を実行するのに必要な性能を持っているはずです。*Express* は *Node* 環境で実行されるため、*Node* を実行する任意のプラットフォームで実行できます。

この記事では Windows、macOS、および Ubuntu Linux のセットアップ手順を説明します。

### どのバージョンの Node/Express を使用すべきですか？

たくさんの Node のリリースがあります - 新しいリリースにはバグ修正、ECMAScript (JavaScript) 標準のより最新のバージョンのサポート、そして Node API の改良が含まれています。

一般的には最新の *LTS* (長期サポート) リリースを使用するべきです。比較的最新の機能を持ちながら (そして現在も積極的にメンテナンスされています)、"最新の" リリースより安定しているからです。LTS バージョンに存在しない機能が必要な場合は、*最新版*リリースを使用してください。

*Express* は常に最新のバージョンを使うべきです。

### データベースやその他の依存関係についてはどうですか？

データベースドライバー、テンプレートエンジン、認証エンジンなどのその他の依存関係はアプリケーションの一部であり、NPM パッケージマネージャーを使用してアプリケーション環境にインポートされます。それらについては、後のアプリ固有の記事で説明します。

Node のインストール
------------

*Express* を使用するには、まず *Nodejs* と Node Package Manager (NPM) をオペレーティングシステムにインストールする必要があります。以下のセクションでは Ubuntu Linux 18.04、macOS、および Windows 10 に Long Term Supported (LTS) バージョンの Nodejs をインストールする最も簡単な方法について説明します。

**メモ:** **Tip:** 以下のセクションは、ターゲット OS プラットフォームに *Node* と *NPM* をインストールする最も簡単な方法を示しています。他の OS を使用している場合、または現在のプラットフォームで他の方法を使用したい場合は、パッケージマネージャーによる Node.js のインストール (nodejs.org) を参照してください。

### macOS および Windows

Windows と macOS への *Node* と *NPM* のインストールは、提供されているインストーラーを使用することができるため、簡単です。

1. 必要なインストーラーをダウンロードします
    1. https://nodejs.org/ja/ に進みます
    2. "ほとんどのユーザーに推奨" である LTS ビルドをダウンロードするためのボタンを選択してください。
2. ダウンロードしたファイルをダブルクリックし、インストールの指示に従って Node をインストールします。
### Ubuntu 18.04

Node 10.x の最新の LTS バージョンをインストールする最も簡単な方法は、パッケージマネージャーを使ってそれを Ubuntu *バイナリ配布*リポジトリーから入手することです。これはあなたの端末で以下の 2 つのコマンドを実行することによって非常に簡単に行うことができます。

```bash
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
```

**警告:** それらは非常に古いバージョンの Node を含んでいるので、通常の Ubuntu リポジトリーから直接インストールしないでください。

### Nodejs および NPM インストールのテスト

Node がインストールされていることをテストする最も簡単な方法は、ターミナル/コマンドプロンプトで "version" コマンドを実行し、バージョン文字列が返されることを確認することです。

```bash
>node -v
v10.16.0
```

*Nodejs* パッケージマネージャー *NPM* もインストールされているはずで、同じ方法でテストできます。

```bash
>npm -v
6.9.0
```

もう少し刺激的なテストとして、ブラウザーで正しい URL にアクセスしたときにブラウザーに「Hello World」を単純に出力する、非常に基本的な "純粋な Node" サーバーを作成しましょう。

1. 次のテキストを **hellonode.js** というファイルにコピーします。これは純粋な Node 関数 (Express からは何もしていません) といくつかの ES6 構文を使用します。

```js
//HTTP モジュールを読み込む
const http = require("http");
const hostname = "127.0.0.1";
const port = 3000;

//HTTP サーバーを作成し、3000 番ポートでリクエストを待機します。
const server = http.createServer((req, res) => {
  //HTTP ステータスとコンテンツタイプを持つ応答 HTTP ヘッダーを設定します。
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end("Hello World\n");
});

//3000 番ポートでリクエストを待機し、受信したときにログ出力するコールバック関数
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
```

このコードは "http" モジュールをインポートし、それを使用して 3000 番ポートで HTTP リクエストを待機するサーバーを作成 (`createServer()`) します。次に、スクリプトはサーバーをテストするために使用できるブラウザー URL についてのメッセージをコンソールに出力します。 `createServer()` 関数は、HTTP リクエストを受信したときに呼び出されるコールバック関数を引数として取ります。これは HTTP ステータスコード 200 ("OK") とプレーンテキスト "Hello World" のレスポンスを返します。

**メモ:** このコードが何をしているのか正確に理解できなくても心配しないでください。Express を使い始めたら、コードについて詳しく説明します。
2. コマンドプロンプトで `hellonode.js` ファイルと同じディレクトリーに移動し、次のようにスクリプト名とともに `node` を呼び出してサーバーを起動します。

```bash
>node hellonode.js
Server running at http://127.0.0.1:3000/
```

3. `http://127.0.0.1:3000` の URL に移動します。すべてがうまくいったら、ブラウザーは単に文字列 "Hello World" を表示するはずです。
NPM の使用
-------

Node 自体の次に、NPM は Node アプリケーションを操作するための最も重要なツールです。NPM は、アプリケーションが開発、テスト、および/または運用に必要なパッケージ(JavaScript ライブラリ) を取得するために使用されます。また、開発プロセスで使用されるテストやツールを実行するために使用されることもあります。

**メモ:** Node の観点からすると、Express は NPM を使用してインストールしてから独自のコードで必要とするもう 1 つのパッケージです。

手動で NPM を使用して、必要な各パッケージを別々に取り出すことができます。通常、代わりに package.json というプレーンテキストの定義ファイルを使用して依存関係を管理します。このファイルにはパッケージの名前、バージョン、説明、実行する初期ファイル、プロダクション依存関係、開発依存関係、それが動作可能な *Node* のバージョンなど、特定の JavaScript "package" に対するすべての依存関係が一覧表示されます。**package.json** ファイルには、NPM がアプリケーションを取得して実行するために必要なものがすべて含まれている必要があります (再利用可能なライブラリを作成している場合は、この定義を使用してパッケージを npm リポジトリーにアップロードし、他のユーザが利用できるようにします)。

### 依存関係の追加

次の手順では NPM を使用してパッケージをダウンロードし、それをプロジェクトの依存関係に保存してから、それを Node アプリケーションで要求する方法を示します。

**メモ:** ここでは Express パッケージを取得してインストールするための手順を示します。後で、このパッケージなどが Express Application Generator を使用してすでにどのように指定されているかを示します。このセクションは NPM がどのように機能するのか、および Application Generator によって何が作成されているのかを理解するのに役立ちます。

1. まず、新しいアプリケーション用のディレクトリーを作成し、そこに移動します。

```bash
mkdir myapp
cd myapp
```

2. アプリケーション用の **package.json** ファイルを作成するには、npm `init` コマンドを使用します。このコマンドはアプリケーションの名前とバージョン、初期エントリポイントファイルの名前 (デフォルトでは **index.js**) など、さまざまなことを要求します。今のところ、デフォルトをそのまま使用します。

```bash
npm init
```

**package.json** ファイル (`cat package.json`) を表示すると、受け入れたデフォルトが表示され、最後にライセンスが表示されます。

```json
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```

3. `myapp` ディレクトリーに Express をインストールし、それをあなたの package.json ファイルの依存関係リストに保存してください。

```bash
  npm install express --save
```

4. **package.json** の依存関係セクションが **package.json** ファイルの最後に表示され、Express が含まれます。

```json
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3"
  }
}
```

5. このライブラリを使用するには、index.js ファイルで以下に示すように `require()` 関数を呼び出します。"myapp" アプリケーションディレクトリーのルートにファイルを作り、以下の内容を記述します。
```

const express = require('express')
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!')
});

app.listen(8000, () => {
  console.log('Example app listening on port 8000!')
});
```

このコードは、最小限の「HelloWorld」Express ウェブアプリケーションを示しています。これは「express」モジュールをインポートし、それを使用して 8000 番ポートで HTTP リクエストを待機するサーバ ー(`app`) を作成し、サーバーをテストするために使用できるブラウザー URL を説明するメッセージをコンソールに出力します。 `app.get()` 関数は、指定された URL パス ('/') で HTTP `GET` リクエストにのみ応答します。この場合、関数を呼び出して *Hello World!* メッセージを送信します。
6. コマンドプロンプトでスクリプトを使用して node を呼び出すことでサーバーを起動できます。

```bash
>node index.js
Example app listening on port 8000
```

7. URL (http://127.0.0.1:8000/) に移動します。すべてがうまくいったら、ブラウザーは単に文字列 "Hello World!" を表示するはずです。
### 開発の依存関係

依存関係が開発中にのみ使用される場合は、代わりに "開発依存関係" として保存する必要があります (パッケージユーザーが本番環境にインストールする必要がないようにするため)。たとえば、一般的な JavaScript Linting ツールの eslint を使用するには、次のように NPM を呼び出します。

```bash
npm install eslint --save-dev
```

次のエントリがアプリケーションの **package.json** に追加されます。

```js
  "devDependencies": {
    "eslint": "^4.12.1"
  }
```

**メモ:** "Lint" は一連のコーディングのベストプラクティスに準拠しているかどうかを認識して報告するために、ソフトウェアで静的分析を実行するツールです。

### タスクの実行

依存関係の定義と取得に加えて、**package.json** ファイルに名前付きスクリプトを定義し、NPM を呼び出してそれらを run-script コマンドで実行することもできます。このアプローチは、実行中のテストや開発の一部を自動化したり、ツールチェーン (たとえば JavaScript の縮小、画像の縮小、コードの LINT/分析などのツールの実行) を構築したりするためによく使用されます。

**メモ:** Gulp や Grunt のようなタスクランナーもテストや他の外部ツールを実行するために使うことができます。

たとえば、前のセクションで指定した eslint 開発依存関係を実行するためのスクリプトを定義するには、次のスクリプトブロックを **package.json** ファイルに追加します (アプリケーションソースが /src/js フォルダにあると仮定します)。

```js
"scripts": {
  ...
  "lint": "eslint src/js"
  ...
}
```

もう少し詳しく説明すると、`eslint src/js` は、app ディレクトリー内の `src/js` ディレクトリーに含まれる JavaScript ファイルに対して `eslint` を実行するために terminal/command 行に入力できるコマンドです。アプリの package.json ファイル内に上記を含めると、このコマンドのショートカット - つまり `lint` が提供されます。

こうすれば、NPM を使って eslint を実行することができます。

```bash
npm run-script lint
# OR (using the alias)
npm run lint
```

この例は元のコマンドより短く見えないかもしれませんが、複数のコマンドのチェーンを含めて、npm スクリプト内にもっと大きなコマンドを含めることができます。一度にすべてのテストを実行する単一の npm スクリプトを指定できます。

Express Application Generator のインストール
-------------------------------------

Express Application Generator ツールは Express アプリケーションの「スケルトン」を生成します。次に示すように、NPM を使用してジェネレーターをインストールします (`-g` フラグを指定すると、ツールをグローバルにインストールして、どこからでも呼び出すことができます)。
```

npm install express-generator -g
```

デフォルト設定で "helloworld" という名前の Express アプリを作成するには、作成する場所に移動して、図のようにアプリを実行します。

```bash
express helloworld
```

**メモ:** 利用するテンプレートライブラリ等の他の設定を指定することもできます。すべてのオプションを見るには、`help` コマンドを使用してください。

```bash
express --help
```

NPM は現在の場所のサブフォルダーに新しい Express アプリケーションを作成し、コンソールにビルドの進行状況を表示します。完了すると、Node の依存関係をインストールしてアプリを起動するために入力する必要があるコマンドがツールに表示されます。

**メモ:** 新しいアプリには、そのルートディレクトリーに **package.json** ファイルがあります。これを開くと、Express やテンプレートライブラリ Jade など、インストールされている依存関係を確認できます。

```js
{
  "name": "helloworld",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "jade": "~1.11.0",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
  }
}
```

次に示すように、NPM を使用して helloworld アプリのすべての依存関係をインストールします。

```bash
cd helloworld
npm install
```

次に、以下のようにアプリを実行します (コマンドは Windows と Linux/macOS で若干異なります)。

```bash
# Windows のコマンドプロンプトで helloworld を実行
SET DEBUG=helloworld:* & npm start

# Windows の PowerShell で helloworld を実行
SET DEBUG=helloworld:* | npm start

# Linux/macOS で helloworld を実行
DEBUG=helloworld:* npm start
```

DEBUG コマンドは有用なロギングを作成し、その結果、以下に示すような出力が得られます。

```bash
>SET DEBUG=helloworld:* & npm start

> helloworld@0.0.0 start D:\Github\expresstests\helloworld
> node ./bin/www

  helloworld:server Listening on port 3000 +0ms
```

ブラウザーを開いて `http://127.0.0.1:3000/` に移動し、デフォルトの Express ウェルカムページを表示します。

![Express - Generated App Default Screen](/ja/docs/Learn/Server-side/Express_Nodejs/development_environment/express_default_screen.png)

スケルトンアプリケーションの生成に関する記事にアクセスしたら、生成されたアプリケーションについて詳しく説明します。

まとめ
---

これで、Express ウェブアプリケーションを作成するために使用できる Node 開発環境がコンピューター上で稼働しています。また、NPM を使用して Express をアプリケーションにインポートする方法、および Express Application Generator ツールを使用してアプリケーションを作成して実行する方法についても説明しました。

次の記事では、この環境と関連ツールを使って完全なウェブアプリケーションを構築するためのチュートリアルを始めます。

あわせて参照
------

* ダウンロード ページ (nodejs.org)
* パッケージマネージャを利用した Node.js のインストール (nodejs.org)
* Express のインストール (expressjs.com)
* Express Application Generator (expressjs.com)
* 前のページ
* Overview: Express Nodejs
* 次のページ