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

  1. ウェブの仕組み
    1. URL とは何か
    2. インターネットの仕組み
    3. ウェブサーバーとは
    4. ドメイン名とは
    5. ハイパーリンクとは
  2. ツールとセットアップ
    1. GitHub Pages の使い方
    2. Google App Engine を使ってウェブサイトを公開する方法
    3. ウェブサーバーにファイルをアップロードするには
    4. ウェブサイトが正しく動作することを確認するには
    5. ウェブサイトを作るのにどんなソフトウェアが必要か
    6. ウェブで何かするのにかかるコスト
    7. どんなテキストエディターが利用できるか
    8. ブラウザーの開発者ツールとは
    9. ローカルテストサーバーを用意するには
  3. デザインとアクセシビリティ
    1. アクセシビリティとは
    2. アクセシビリティを推進する HTML の機能
    3. ウェブサイトのデザインは何から始めればよいか
    4. すべての種類のユーザーのためにデザインするには
    5. 一般的なウェブレイアウトには何が含まれているのか
  4. よくある CSS の問題の解決
    1. CSS の一般的な質問
    2. CSS 生成コンテンツの使用
    3. アイテムを中央揃えするには
    4. テキストに影を追加するには
    5. ポインターを当てるとボタンの色を変えるには
    6. ボックスを半透明にするには
    7. 最初の段落を強調表示するには
    8. 段落の最初の行を強調するには
    9. 画像を歪ませずにボックスを埋めるには
    10. 装飾的なボックスの作成
    11. 要素に影を追加するには
    12. 見出しの直後に来た段落を強調表示するには
  5. よくある HTML の問題の解決
  6. よくある JavaScript の問題の解決

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

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

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

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

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

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

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

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

シンプルなローカル HTTP サーバーの実行

非同期リクエストの問題を回避するには、ローカルウェブサーバーを介して実行することによって、そのようなサンプルをテストする必要があります。

コードエディターで拡張機能を使用する場合

HTML と CSS と JavaScript だけが必要で、サーバーサイドの言語が必要ない場合、最も簡単な方法はコードエディターの拡張機能を調べることです。ローカルの HTTP サーバーへのインストールと設定するには、自動化するだけでなく、コードエディターとうまく統合されます。 HTTP サーバーのローカルファイルをワンクリックでテストできます。

VSCode については、以下の無料拡張機能を調べると良いでしょう。

Python の使用

これを実現するためのもう一つの方法は、 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)/ターミナル (macOS/ Linux) を開きます。 Python がインストールされていることを確認するには、次のコマンドを入力してください。

    bash
    python -V
    # 上記のものが失敗する場合は、次のようにする
    python3 -V
    # または、 "py" コマンドが使用できる場合は、次のようにする
    py -V
    
  3. これによりバージョン番号が返されます。 これで OK であれば、 cd コマンドを使用して、テストしたいウェブサイトのコードを格納するディレクトリーに移動します。

    bash
    # 入力するディレクトリー名を入れる。例えば次のようにする
    cd Desktop
    # 必要であれば、 2 つのドットを使用するとディレクトリーを 1 つ上にジャンプする
    cd ..
    
  4. そのディレクトリーにあるサーバーを起動するコマンドを入力します。

    bash
    # 上記で Python のバージョンが 3.X と返ってきた場合
    # Windows では、 "python -m http.server" or "py -3 -m http.server" のようにする
    python3 -m http.server
    # 上記で Python のバージョンが 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 では SimpleHTTPServer)モジュールは便利ですが、単なる静的ファイルサーバーに過ぎません。 Python、PHP、JavaScript などの言語で書かれたコードの実行方法はわかりません。これを処理するには、必要なことがあります。必要なのは、実行しようとしているサーバー側の言語に依存します。いくつかの例があります。

  • Python のサーバー側コードを実行するには、Python ウェブフレームワークを使用する必要があります。 Python のウェブフレームワークには、 Django(ガイドが利用できます)、FlaskPyramid など人気のものが多く存在します。

  • Node.js (JavaScript) サーバー側コードを実行するには、生のノードまたはその上に構築されたフレームワークを使用する必要があります。 Express は良い選択です - Express Web Framework (Node.js/JavaScript) を参照してください

  • PHP サーバー側コードを実行するには、PHP の組み込み開発サーバーを起動してください。

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