LoginSignup
17
6

More than 5 years have passed since last update.

WebGLアプリをFirebaseにアップして遊べるようにする

Last updated at Posted at 2017-06-22

環境

Unity5.6.2f1
Windows10

概要

FirebaseHostingを使用してアップ、公開します。

Firebaseコンソールにプロジェクトを追加

・上記のurlにアクセス
・「プロジェクトの追加」を押し、プロジェクトを作成する
 ・プロジェクト名と国を設定(例:TestWebGL, 日本)
 ・testwebgl-42054となった

Node.js、npm、firebase-toolsのインストール

・上記のurlにアクセス
・ボタンを押してダウンロード(例:v8.1.2Current)
・デフォルトの設定でインストール(そのまま)
・コマンドプロンプトを起動
 スタートメニュー>windowsシステムツールにある
・「npm install -g firebase-tools」とタイプし、リターン
 firebase-toolsがインストールされる

Unityプロジェクトの作成

・Unityを起動し、プロジェクトを作成する(例:TestWebGL)
・「BuildSettings」でWebGLに「SwitchPlatform」する
・適当にシーンを1つ作り、保存(例:背景を赤くし、GUIのボタンを中央に配置)
・プロジェクトのフォルダをWindowsで開き、デプロイ(アップ)用のフォルダを作成する(例:firebase)

Firebaseにログイン

・コマンドプロンプトを起動
・「firebase login」とタイプし、リターン
 ブラウザでアカウント選択後、認証確認メッセージが出るので、許可する
・別のアカウントでログインしたい場合は「firebase logout」してから再度ログインする

デプロイ用フォルダの設定

・コマンドプロンプトを起動
・作成済みのデプロイ用のフォルダに移動する(例:firebase)
 cdコマンド(例:「cd C:\programs\unity\TestWebGL\firebase」)
・「firebase init」とタイプし、リターン
・「Are you ready to proceed? (Y/n)」はそのままリターン
・カーソルで「Hosting: Configure and deploy Firebase Hosting sites」に移動し、スペースキーを押す
 緑色の※印が付いた
・リターンを押す
・「Select a default Firebase project for this directory: (Use arrow keys)」と出るので作成済みのプロジェクトをカーソルで選択し、リターン(例:TestWebGL)
・「What do you want to use as your public directory? (public)」はそのままリターン
 publicになる
・「Configure as a single-page app (rewrite all urls to /index.html)? (y/N)」はそのままリターン
 Noになる

WebGLのビルド

・Unityを起動し、プロジェクトを開く(例:TestWebGL)
・「BuildSettings」>「BuildAndRun」を押す
・作成済みのデプロイ用フォルダの中に出来ている「public」に移動し「フォルダ選択」を押す
 ビルドが終わるとブラウザで勝手にローカル起動する
 起動が確認出来たら閉じる

Firebaseへデプロイする

・コマンドプロンプトを起動
・作成済みのデプロイ用のフォルダに移動する(例:firebase)
・「firebase deploy」とタイプし、リターン
 urlにアクセスし確認する(例:Hosting URL: https://testwebgl-42054.firebaseapp.com

デプロイの確認

・Firebaseコンソールから作成済みのプロジェクトへ移動する(例:TestWebGL)
・左側メニューから「Hosting」を選択し、ダッシュボードの「デプロイの履歴」を見る

17
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
6