17
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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コンソールにプロジェクトを追加
https://console.firebase.google.com/

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

#Node.js、npm、firebase-toolsのインストール
http://nodejs.org/

・上記の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

#デプロイの確認
https://console.firebase.google.com/

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

17
7
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
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?