apex map rotation

Apex Legends - マップの回転

非公式のApex Legends マップ ローテーション アプリケーション。ユーザーは、マップ変更通知を購読するだけでなく、現在および次のマップを確認できるようになります。

モチベーション

Apex Legends Status は、マップ回転機能に沿った優れた Web サイトですが、通知がありません。したがって、どれが現在のマップであるかを知る必要があるたびに手動で確認する必要があります。

Apex Legends のマップ ローテーションは、どのマップが登場するかを知ることができるようにすることで、二度と自分で確認する必要がなくなるようにする取り組みから生まれました。

特徴

• リアルタイムの地図回転
• フォアグラウンド通知 —バックグラウンド通知が準備中です。
  • カスタマイズ可能なマップ
  • カスタマイズ可能なしきい値
• インストール可能なアプリケーション (サポートを参照)

貢献する

ようこそ、Apex Legends - マップローテーションにご協力いただきありがとうございます!

リポジトリのクローンを作成する

まず、GitHub からリポジトリのクローンを作成します。

 # HTTPS
git clone https://github.com/lgaspari/apex-map-rotation.git && cd apex-map-rotation

# SSH
git clone [email protected]:lgaspari/apex-map-rotation.git && cd apex-map-rotation

パッケージをインストールする

次に、 npmを使用して依存関係をインストールします。

npm install

環境変数を構成する

.envファイルのコピーを.env.localに作成します。次のように、空の環境変数に適切な値を入力します。

• VITE_APEX_LEGENDS_API_SECRET_TOKEN : 認証用の非公式 Apex Legends API シークレット トークン

アプリケーションを開発モードで開始する

ここで、ほとんどの場合、次のコマンドを使用してアプリケーションを実行します。

npm run start

アプリケーションを実稼働モードで開始する

それ以外の場合、実稼働コードを使用してアプリケーションを実行する場合は、代わりにこれを使用します。

npm run start:production

リンティングとコードのフォーマット

コード内の問題を見つけて修正するために ESLint を使用します。次のコマンドを実行して、ローカル コードを確認します。

npm run lint

さらに、エラーの検出とコード形式の修正に役立つ Visual Studio Code の ESLint および Prettier 拡張機能をインストールすることもできます。

テスト

アプリケーションのテスト フレームワークとして Vitest を使用します。次のコマンドを実行して、ローカル テストを確認します。

npm run test

さらに、Vitest 拡張機能を Visual Studio Code にインストールして、テストを迅速に実行することもできます。

継続的インテグレーション

継続的統合ワークフローは、 mainブランチへのプッシュごとに実行されます。変更がLintおよびTestステップに合格しない場合、ワークフローは失敗します。別のコミットでこれらの問題を必ず修正してください。

導入

現在、継続的な展開は構成されていません。このコマンドを手動で実行する必要があります。

npm run deploy

予告なく本番環境に導入することはご遠慮ください。

プログレッシブ Web アプリケーション

これは実験的な機能であり、いつでも無効になる可能性があります。

アプリケーションの実行と構築には Vite を使用します。したがって、プログレッシブ Web アプリケーションのセットアップには、構成をシームレスに行う Vite PWA プラグインを使用します。

PWA アセットの生成

必要な最小限の PWA アセットを生成するには、Vite PWA Assets Generator を使用します。以下のコマンドは、pwa-assets.config.ts の構成を使用して、ファイルpublic/logo.svgに基づいてアセットを生成します。実行する前に、更新されていることを確認してください。

npm run generate-pwa-assets

PWA のトラブルシューティング

インストール

PWA のインストールで問題が発生した場合は、開発ツールの Lighthouse を使用して、機能するために何が欠けているかを確認できます。

Chromium ベースのブラウザの手順は次のとおりです。

1. 開発ツールを開く
2. 「灯台」タブに移動します
3. プログレッシブ Web アプリ カテゴリを確認する
4. 「ページ読み込みの分析」ボタンを押します
5. レビュー結果

Service Worker を更新する

アプリケーションは、Service Worker に更新があるかどうかを確認するメッセージを表示する必要があります。ただし、作業を簡単にするために、リロード時に Service Worker を更新するオプションを Dev Tools からオンにすることができます。

1. 開発ツールを開く
2. 「アプリケーション」タブに移動します
3. 「リロード時に更新」オプションにチェックを入れる
4. CTRL+SHIFT+Rを使用してタブを再読み込みします

それでも問題が解決しない場合は、[更新] ボタンを押して自分で Service Worker を更新できます。

アセットを更新する

PWA アセットを更新すると、ロードされた新しいアセットが表示されない場合があります。その場合は、必ずアプリケーションを再インストールしてください。

ブラウザ間の互換性 (HTTPS)

通知

通知 API の通知インターフェイスを使用して、デスクトップ通知を構成し、ユーザーに表示します。通知 API の詳細については、MDN Web ドキュメントを参照してください。

通知API

'Notification' in windowを通じて API サポートを確認します。

プラットフォーム	勇敢な	クロム	角	Firefox	サファリ	観察
macOS	はい	はい	はい	はい	はい	- -
iOS	いいえ	いいえ	いいえ	いいえ	はい¹	¹実験的機能を有効にする必要があります。
アンドロイド	はい	はい	はい	はい	該当なし	- -

即時通知の許可

Promisesを使用して、 Notification.requestPermission()を通じて通知権限を要求します。

プラットフォーム	勇敢な	クロム	角	Firefox	サファリ	観察
macOS	はい¹	はい¹	はい¹	はい	はい	¹ では、許可を与えるために追加の手動手順が必要になる場合があります。
iOS	該当なし	該当なし	該当なし	該当なし	はい¹	¹ PWA のみのサポート。
アンドロイド	はい	はい	はい¹	はい ²	該当なし	¹ では、許可を与えるために追加の手動手順が必要になる場合があります。 ² では、自己署名証明書が原因で安全でないページが表示される場合があります。

通知を送信する

new Notification(title, options);

プラットフォーム	勇敢な	クロム	角	Firefox	サファリ	観察
macOS	はい	はい	はい	はい	はい	- -
iOS	該当なし	該当なし	該当なし	該当なし	いいえ¹	¹ PWA からもです。
アンドロイド	いいえ	いいえ	いいえ	はい	該当なし	- -

Service Worker (HTTPS が必要、localhost を除く)

Service Worker は基本的に、Web アプリケーション、ブラウザー、ネットワーク (利用可能な場合) の間に位置するプロキシ サーバーとして機能します。 Service Worker API の詳細については、MDN Web ドキュメントを参照してください。

プラットフォーム	勇敢な	クロム	角	Firefox	サファリ	観察
macOS	はい	はい	はい	はい	はい	- -
iOS	はい	はい	はい	はい	はい	- -
アンドロイド	はい	はい	はい	はい	該当なし	- -

プログレッシブ Web アプリケーション (HTTPS が必要、localhost を除く)

プログレッシブ Web アプリ (PWA) は、Web プラットフォーム テクノロジを使用して構築されたアプリですが、プラットフォーム固有のアプリのようなユーザー エクスペリエンスを提供します。プログレッシブ Web アプリの詳細については、MDN Web ドキュメントを参照してください。

プラットフォーム	勇敢な	クロム	角	Firefox	サファリ	観察
macOS	はい¹	はい¹	はい¹	いいえ	いいえ	¹ は、アドレス バーの右側にあるInstall PWAボタン、またはOptions > Install appボタンからインストールできます。
iOS	いいえ	いいえ	いいえ	いいえ	はい¹	¹ はShare > Add to Home Screenボタンからインストールできます。
アンドロイド	はい¹	はい¹	はい¹	はい ²	該当なし	¹ は、 Add to Home ScreenポップアップまたはOptions > Install appボタンからインストールできます。 ² はOptions > Add to Home screenボタンからインストールできます。

クレジット

• Apex Legends を開発してくれた EA と Respawn チームに感謝します。
• このような素晴らしい API を作成してくれた Unofficial Apex Legends Status API のチームに感謝します。
• Apex Legends Status Web サイトのマップ アセットに感謝します。

免責事項

すべての画像、アイコン、商標はそれぞれの所有者に帰属します。 Apex LegendsはEAの登録商標です。ゲームのアセット、素材、アイコンはエレクトロニック アーツに帰属します。 EA と Respawn は、この Web サイトのコンテンツを承認したり、この Web サイトのコンテンツに対して責任を負ったりするものではないことに注意してください。