メインコンテンツまでスキップ

初心者向けセルフホスティング

このドキュメントは、Webプログラミングの初心者向けです。Webアプリケーションのさまざまな部分をどのように組み合わせてPlayCanvasアプリケーションを提供したり、ユーザのブラウザに他のウェブページを提供するかを説明します。

ウェブスタック​

基本的に、ウェブアプリケーションを3つに分離することができます：サーバーサイド、クライアントサイド、静的コンテンツです。一部のみ非常にシンプルな場合や他のサービスにより処理される場合がありますが、ほとんどの場合、ウェブアプリケーションには3つとも含まれます。

サーバサイドのコード​

ユーザーがウェブブラウザでリンクを開くと、ブラウザは、インターネット上のどこかでサーバに要求を送信してHTMLページを要求します。最もシンプルな形の場合、ウェブサーバ上のハードディスクに置かれるテキストのページで、インターネットを介してブラウザに戻り設定されます。

テキストや画像を表示するドキュメントであるウェブページの場合、これは非常にうまく機能します。しかし、インタラクティブな要素を加えるには、多くの場合、サーバは要求を受信した後にいくつかの処理を行い、その処理の結果を含むHTMLのページをレンダリングします。

例えば、PHPでページ内の現在の日付と時刻を表示することができます。

<html>
    <head>
        <title>My Homepage</title>
    </head>
    <body>
        <h1>The date is</h1>
        <?php
            echo date(DATE_RFC2822);
        ?>
        <p>Have a nice day</p>
    </body>
</html>

このPHPコードは以下のようなHTMLページを作成し、ブラウザに送信して表示させることができます。

<html>
    <head>
        <title>My Homepage</title>
    </head>
    <body>
        <h1>The date is</h1>
        Mon, 11 Apr 2016 06:54:14 -0400
        <p>Have a nice day</p>
    </body>
</html>

サーバサイドのコードを書く際、沢山の異なる言語やフレームワークから選択することができます。PHP、Python、Nodejs、Rubyは一般的な選択肢です。これらの最終的な結果は同じです。HTMLページの要求を受信し、いくつかの処理を行い、HTMLデータを返します。

PlayCanvasのアプリケーションを作成する際、PlayCanvasで書くコードがサーバ側で実行されることはなく、プロジェクトのサーバサイドのコードは提供していません。

クライアントサイドコード​

ウェブスタックでは、プログラミングを行いユーザー入力に応答するのはサーバだけではありません。クライアントサイドは、ブラウザ内で実行しているコードを指します。このコードは、ブラウザが実行される言語である、JavaScriptです。クライアントサイドのJavaScriptでさまざまな操作を実行することができます。最もシンプルなのは、サーバからダウンロードしたHTMLページの変更です。

const title = document.getElementById("title");
title.innerHTML = "This is the new title";

また、最も複雑なケースは、PlayCanvasを使用して完全な3D WebGLゲームを書くこと場合です。PlayCanvasを使用して書くものは全て、クライアントサイドのJavaScriptです。

静的コンテンツ​

ウェブアプリケーションの一部は、動的ではなく、変更する必要がありません。例えば、画像、オーディオファイル、テキストファイル、また、PlayCanvasアプリケーションの場合は3Dモデルやテクスチャです。これは、ローカルディスクのファイルを読み込むようなものですが、インターネット上なので少し遅くなります。静的コンテンツの提供はサーバサイドコードのようにウェブサーバによって実行され、場合によっては、同じマシンになります。インタラクティブな要素がないため、要求を満たすための処理は行われません。ウェブサーバは単に要求されたファイルを返送します。

静的コンテンツにおいて重要なのは、できるだけ速くクライアントにダウンロードすることです。

PlayCanvas アプリケーションのホスティング​

PlayCanvasアプリケーションを構築すると、クライアントサイドのJavaScriptコードを書いて、静的コンテンツであるアセットを作成します。PlayCanvasプロジェクトではサーバサイドのコードは一切ありません。

PlayCanvasを使用して公開すると、アプリケーションが提供される場所でURLを設定して、クライアントサイドアプリケーションを起動するHTMLページを送り返し、サーバサイドを処理します。HTMLページが読み込まれるとそれはPlayCanvasアプリケーションのクライアントサイドjavascriptを実行します。これにより、静的コンテンツサーバからすべてのアセットを読み込みます。

可能な限り迅速に、世界中のエンドユーザーにPlayCanvasアプリケーションを提供するため、PlayCanvasのホスティングを最適化しました。PlayCanvasアプリケーションをデプロイする最も簡単な方法は、公開ボタンをクリックして、 playcanv.as URLを送信することです。場合によっては、独自のアプリケーションをホストする必要があります。

PlayCanvas アプリケーションのセルフホスティング​

PlayCanvasアプリケーションのセルフホスティングに関する詳細ページがあります。要約すると、セルフホスティングを行うには上記で説明したのウェブスタックの三つの部分を提供する必要があります。

サーバ​

標準的なPlayCanvasアプリケーションの場合、サーバサイドのコードは必要ありません。しかし、ダウンロードしたアプリケーションに含まれるindex.htmlファイルなどの静的コンテンツを提供する必要があるので、ウェブサーバを指定する必要があります。Linuxで使用する2つの一般的なウェブサーバアプリケーションはApacheとNginxです。Windowsで使用する1つの一般的なウェブサーバはIISです。

静的コンテンツ​

Serverで説明した通り、静的なコンテンツとして、ウェブサーバのindex.htmlファイルを含むすべてPlayCanvasのコンテンツを提供します。

静的コンテンツを提供する際、良好なパフォーマンスを得るためにはgzip圧縮を有効にして、コンテンツの正しいキャッシュ・ヘッダーを設定することが重要です。静的コンテンツでヘッダのキャッシングと圧縮を有効にする方法は、ウェブサーバーのドキュメントを参照してください。

クライアント​

以下のような理由で、PlayCanvasのよく使われるフォーマットに対するコンテンツタイプが設定されていないサーバーがあるため、サーバーからアプリケーションを読み込もうとするとエラーが発生する場合があります。

もしブラウザーでアセットが正しく提供されていないというエラーや警告が出た場合は、これらのタイプを追加する必要があるかもしれません。

以下は、PlayCanvasアプリケーションで使用されるコンテンツタイプのリストです：

ファイルタイプContent type
AACaudio/aac
BASISapplication/octet-stream
BINapplication/octet-stream
DDSimage/dds
GLBmodel/gltf-binary
JPEGimage/jpeg
JSapplication/javascript
JSONapplication/json
MP3audio/mpeg
MP4video/mp4
OGGaudio/ogg
PNGimage/png
TEXTtext/plain
WASMapplication/wasm
WAVaudio/x-wav
XMLapplication/xml

Client​

クライアントサイドのコードは、PlayCanvasアプリケーションの一部として書かれている全てです。ブラウザがindex.htmlファイルを読み込む際、PlayCanvasアプリケーションを起動し、あなたが書いたすべてのクライアントサイドコードを実行します。