as-playground の開発スタートガイド

0. お約束

この非公式プロジェクトは、あくまで健全な範囲で、アソビステージの利便性を向上することを目的としています。 従って、規約に抵触する違法行為や、運営様のご迷惑となる行為は一切行いません。 もし万が一、そのような Pull Request を提出いただいても、拒否をいたします。可否の判断はプロジェクト管理者が行います。あらかじめ、ご了承ください。

また、 開発をされるまえに、ご承諾事項 に必ずご同意ください。

1. ソフトウェアのインストール

• Git
• Google Chrome / Chromium
• Node.js 16+
• Visual Studio Code

2. SkyWay のアプリケーション登録

Skyway Community Edition (無料版) のアカウントを登録し、アプリケーション登録を行ってください。

※ この SkyWay (WebRTC) は、ユーザ本人の端末間でコメントデータを送受信するために使用します。(詳細)

3. ソースコードの取得 ・ 依存モジュールのインストール

ホームディレクトリなどでターミナルを開き、以下のコマンドを実行してください。

$ git clone [email protected]:arisucool/as-playground.git

$ npm install

4. 環境設定ファイルの編集

以下の環境設定ファイルを開き、SkyWay の API キーを記述してください。

src/environments/environment.ts:

export const environment = {
  production: false,
  skyWayApiKey: '********************************'
};

src/environments/environment.prod.ts:

export const environment = {
  production: true,
  skyWayApiKey: '********************************'
};

5. ビルド ・ 開発用サーバの起動

以下のようにコマンドを実行してください。このコマンドにより、ビルドが実行され、開発用サーバが起動します。

$ npm run dev

以下のように表示されれば、準備完了です。(サーバを起動したままで開発作業を行なってください。)

** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on https://localhost:4200/ **


✔ Compiled successfully.

続けて、Web ブラウザで https://localhost:4200/ を開いてください。

6. 開発に際して

ソースコード編集時の自動ビルドについて

ソースコードを変更したときは、原則として、再ビルドが自動的に実行され、ブラウザ上に変更が自動反映されます。 従って、ページの再読み込みは必要ありません。

ただし、 as-bridge.js を編集したときは、以下の方法で as-playground を再実行してください。

• ブックマークレット版:
  • ブックマークレットを再度クリックしてください。
• Chrome 拡張機能版:
  • Chrome 拡張機能の管理画面から [更新] ボタンをクリックしたのち、アソビステージのページを再読み込みしてください。

困ったときは？

• トラブルシューティング: ユーザ向け FAQ および 開発者向け FAQ をご覧ください。
• ご質問・ご相談:　Twitter の @arisucool へDMをお送りいただけますと幸いです。
• 不具合報告:　GitHub の Issues へご投稿いただけますと幸いです。