A-FRAME 公式ドキュメントの非公式日本語訳
1.3.0 › introduction

ホスティングと & 出力

このセクションでは、A-FrameサイトとそのアセットをWeb上に展開、ホスト、公開するためのいくつかの方法を紹介します。

# サイトの公開

サイトを展開し、ホストするための多くの無料サービスがあります。 ここでは、より簡単で人気のあるオプションをいくつか紹介しますが、AWS、Heroku、またはセルフホスティングなどの他のオプションがあることは確かです。重要な注意点は、ブラウザの WebVR API の一般的なセキュリティ制限のため、これらのサイトは SSL/HTTPS で提供する必要があることです。以下のオプションはすべて SSL/HTTPS で提供されます。

# Glitch

Glitch

"Glitchは、夢のアプリを作るためのフレンドリーなコミュニティです。リミックスできるサンプルアプリ、それを修正するコードエディタ、即時のホスティングとデプロイメントにより、誰でも無料でGlitchでウェブアプリを作ることができます。"

Glitch (opens new window) は、ブラウザからサイトを作成・公開する最も簡単かつ最速の方法です。Glitchでは、コードやファイルの追加、アセットのアップロード、他の人との共同編集、独自のURL名の定義、そして変更するたびに即座にデプロイすることができます。アカウントを作ったり、ログインする必要すらありません。

  1. A-Frame Starter Glitch (opens new window)にアクセスしてみてください。
  2. Remix your ownを押して、プロジェクトをコピーしてください。
  3. 左上のプロジェクト情報とオプションのアイコンをクリックし、アプリケーションの名前を変更します（例：https://yoursitename.glitch.me）。
  4. HTMLを編集し、ファイルを追加し、プロジェクトを修正します。
  5. Showをクリックして、アプリケーションを表示します（例：Starter glitchはhttps://aframe.glitch.me にホストされています）。
  6. プロジェクトに変更を加えるたびに、アプリケーションは即座に更新されます。これは、サインインして自分のアバターをクリックし、Refresh App on Changes（変更時にアプリを更新）をトグルでオフにすることができます。

# Neocities

Neocities

"自分だけの無料ホームページを作ろう 無限の創造性、広告ゼロ。ネオシティーズは、失われた個人の創造性を取り戻すために、129,100のウェブサイトからなるソーシャルネットワークです。私たちは、無料のウェブホスティングと、あなた自身のウェブサイトを作成することができるツールを提供しています。参加してください！"

Neocities (opens new window)もまた、ブラウザ内からサイトを作成し公開することができる無料かつ簡単な方法です。Glitchのような機能はありませんが、Neocitiesはフレンドリーで、CDNではなくプロジェクトディレクトリにアセットをアップロードすることができます。このため、少なくともモデルのホスティングについては、Neocitiesの方が優れています。Neocitiesでは、ファイルを作成し、編集することができます。そして、それらはホスティングされ、公開されます（例：ngokevin.neocities.org)。

Neocities Editor

# アセットをホストする

また、オーディオ、テクスチャ、モデル、ビデオなどのアセットのホスティングについても説明します。

A-Frameサイトが同じディレクトリ（つまり、同じドメイン）にアセットと一緒に公開されている場合、アセットのホスティングについてあまり心配する必要はありません。A-Frameサイトは、相対URLを使ってアセットを参照することができ、同じドメイン上にあるので、そのアセットを取得することに問題はありません。たとえば、すべてのリソースを同じルートディレクトリに置き、すべてをNeocities、GitHub Pages、Surge経由で公開すれば、何の問題もありません。

# Content Delivery Network (CDN)

もしアセットを外部にホストしている場合、例えばCDNを使ったりしてホストしている場合、すこし注意が必要です。 アセットの初期要件はクロスオリジンでのリソース共有(CORS) (opens new window) は可能な状態で提供されている必要があります。 これはA-Frameのサイトがアセットを利用してシーンの中に表示されることを許可します。

加えて、<a-assets>を使用した際には<img>, <audio>, and <video>のようなアセットではcrossorigin="anonymous"と設定しておくべきです。 CDNを使ってアセットをホストする際に使えるサービスがあります。 There are several simple options to host assets via a CDN:

# モデルのホスティング

モデルのホスティングは、それほど単純ではありません。モデルはフォルダ内でファイルグループとして提供され、モデルファイルはテクスチャ画像などの他のファイルを相対的に参照します。したがって、モデルは同じディレクトリにある一つのフォルダとしてアップロードされなければなりません。多くの無料アセットホスティングサービスは、一度に1つのファイルしかアップロードできないようになっています。一つの解決策は、画像を個別にアップロードした後、すべての画像のパス名をCDNのパス名に変更することですが、これは面倒な作業です。CDN経由でモデルを簡単にホスティングするための、いくつかの既知のソリューションがあります。

Neocities経由でサイトを公開するならば、サイトディレクトリにファイルやディレクトリをいくつでもアップロードすることができます。

Neocities

Neocities アセットアップローダー

もしくはGitHubのリポジトリにアップロードすることもできます。

  1. GitHub リポジトリのいずれかにアクセスします。

  2. **Upload files** をクリックします。

  3. アセットをアップロードして、アップロードが完了するのを待ちます。

  4. 下部に簡単なメッセージを入力し、**Commit changes** をクリックします。

  5. 処理を待ちます。

  6. 完了したら、プライマリアセットファイルをクリックします。

  7. **Raw**をクリックします。

  8. これで、アセットの URL が GitHub にホスティングされました。これで、[JSDelivr CDN][jsdelivr] 経由でアセットのホスティングと参照ができるようになります。

# プロジェクトをシェアする

あなたのの素晴らしいプロジェクトを公開したら、それを共有して、他の人たちが中に飛び込めるようにしたいですね。

# Creating Media

A-FrameやVRはビジュアルな表現なので、動画やGIFを作成したくなるでしょう。

まず、画面を録画しましょう。 Mac OS Xの場合、内蔵のQuickTime Playerの画面録画か、OBS Studioを使って画面を録画します。 Windows では、OBS Studio を使用します。OBS Studioは、Webカメラの画像を画面の上にストリーミングして合成することもサポートしており、 ヘッドセットを使用している人を現実に見せるのに便利です（MixedRealityにおいても）。

次に、動画をトリミングする場合があります。OS Xでは、QuickTime Playerのトリミングツール（<cmd> + t）を使うことができます。

Gif動画に変換したい場合は、gifpardyを使います。 gifpardyは内部でffmpegとgifsicleを使用しています。

gifpardy in.mp4
gifpardy in.mp4 out.gif
gifpardy -r 320x240 --delay 8 in.mp4

また、トリミング、リサイズ、クロップ機能を持ち、エクスポートする前にGifファイルをプレビューすることのできるUIを持つGIF Breweryも使用できます。 また、LICECap (opens new window)を使って直接GIFにキャプチャーすることもできます。

# メディアを共有する

A-Frameで何かを作ったら、ぜひ私たちにシェアしてください。プロジェクトをシェアしていただいたら、 A Week of A-Frame (opens new window) で紹介し、コミュニティの皆様に見ていただくことができます。

# エンベッド

A-Frameのシーンをembedするには、embedded componentを使うことができます。 これを用いることでフルスクリーン表示を躱すことができ<canvas>をCSSでスタイリングできます。

この保応報では1ページに1つのシーンしかembedすることができません。 復数のシーンをembedしたい場合には <iframe>s (opens new window)を使います。

← ベストプラクティス →

TABLE OF CONTENTS
公式ドキュメント