SkyBoard

概要

映像内へのペイントや画像配置を行うことができるライブ配信アプリです
詳細はQiitaの記事でも説明しています
アプリケーションはこちらで公開しています

ディレクトリ構成

src: 基本的なソースコードを管理しているディレクトリ
- assets/: ソースコードから参照する画像ファイルなどソースコード以外のファイルを管理している
- components/: Vue.jsのコンポーネントを管理している
- js/module/: JavaScriptの処理を記述したファイルを管理している
public: 公開する必要があるがソースコードから参照されていないファイルを管理している
functions: Firebase Functionsに関するファイルを管理しているディレクトリ

動作環境

開発はNode.js 18.18.0で行ったため，このバージョン以上が導入されていることを前提としています
Node.jsのインストールについてはasdfやVoltaなどを使用すると良いと思います
開発およびデプロイにFirebaseを使用しているため，Firebase CLIについても同様にインストールおよびログインが完了した状態にしてください

前準備

ローカルでアプリケーションを動作させるためには以下のファイルが必要です
.env: 環境変数を記述するためのファイル
- SkyWayを使用するためのAppIDやSecret Keyを読み込むために使用します
```
VITE_SKYWAY_APP_ID=${Your SkyWay App ID}
VITE_SKYWAY_SECRET_KEY=${Your Skyway Secret Key}
```

合わせてsrc/main.js内でFirebase Functions Emulatorを使用する設定を有効化してください

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const functions = getFunctions(firebaseApp);
// connectFunctionsEmulator(functions, "localhost", 8081); // ローカルで開発する場合はこの行のコメントを解除

パッケージのインストール

npmの必要なパッケージをインストールします

npm install
cd functions
npm install

開発サーバーの実行

プロジェクトのルートディレクトリで以下のコマンドを実行します

npm run dev

http://localhost:5173にアクセスしてページが表示されれば成功です

ビルド・デプロイ

Firebaseにデプロイする際はデプロイ先のプロジェクトを.firebasercに記載してください

{
  "projects": {
    "default": "Your Firebase Project ID"
  }
}

src/main.jsでFirebase Emulatorを使用する設定になっている場合はビルド前に該当箇所をコメントアウトしてください
シークレットキーなどを秘匿したままSkyWay Tokenを取得する処理を実行するためにFirebase Functionsを使用しています
- 同様の構成で行う場合はFirebaseプロジェクトを従量課金プランに変更しておく必要があります
- 他の仕組みを使う場合などは適宜処理を置き換えてください
functions/.envとして前準備と同等の内容の.envファイルを作成してください

npm run build
firebase deploy

kou256 / SkyBoard

SkyBoard

概要

ディレクトリ構成

動作環境

前準備

パッケージのインストール

開発サーバーの実行

ビルド・デプロイ

About

Languages