最初のプレゼンスを作成する
CLIを使って新しいNowlyプレゼンスを作成し、最初のDiscord Rich Presenceアクティビティを送信します。
CLIから始める
Nowly CLIを使って新しいプレゼンスの雛形を作成します。
nowly init "Example"CLI 1.7.0 以降はメタデータ、スクリプト、settings.ts、翻訳、アセット用フォルダーを作成します。自動検出される settings.ts のデフォルトエクスポートで設定を定義してください。設定を参照してください。従来のインライン定義も引き続き利用できます。
基本的なプレゼンスコード
Presence と Assets はランタイムによって提供されます。詳細はPresence APIとAssetsを参照してください。
document は標準のブラウザDOM APIで、プレゼンスは拡張機能内でコンテンツスクリプトとして実行されるため利用できます。
@nowly/sdk からインポートする必要があるのは PresenceType(および createMediaTimestamps などの他のヘルパー)だけです。
import { PresenceType } from "@nowly/sdk"
const presence = new Presence()
presence.on("UpdateData", async () => {
await presence.setActivity({
details: document.title,
state: document.location.hostname,
largeImageKey: Assets.Logo,
type: PresenceType.Watching,
})
})ランタイムの流れ
ユーザーが対応するURLにアクセスすると、Nowlyはあなたのプレゼンスを読み込みます。プレゼンスはページの状態を読み取り、setActivity を呼び出します。拡張機能はそのペイロードをNowly Hostに転送し、Discordが更新されます。
開発ループ
雛形作成
プレゼンスのフォルダ、メタデータ、必要なアセットを生成します。
nowly init "Example"雛形作成
プレゼンスのフォルダ、メタデータ、必要なアセットを生成します。
nowly init "Example"設定
名前、作者、対応URL、カテゴリ、色、多言語対応の説明、そしてDiscordがすでにそのプラットフォームに対応している場合はdiscordNativeを設定します。
metadata.json を編集してください。利用可能な全フィールドについてはMetadataを参照してください。
設定
名前、作者、対応URL、カテゴリ、色、多言語対応の説明、そしてDiscordがすでにそのプラットフォームに対応している場合はdiscordNativeを設定します。
metadata.json を編集してください。利用可能な全フィールドについてはMetadataを参照してください。
実装
Presence SDKを使ってプレゼンスのロジックを記述します。
import { PresenceType } from "@nowly/sdk"
const presence = new Presence()
presence.on("UpdateData", async () => {
await presence.setActivity({
details: document.title,
largeImageKey: Assets.Logo,
type: PresenceType.Watching,
})
})実装
Presence SDKを使ってプレゼンスのロジックを記述します。
import { PresenceType } from "@nowly/sdk"
const presence = new Presence()
presence.on("UpdateData", async () => {
await presence.setActivity({
details: document.title,
largeImageKey: Assets.Logo,
type: PresenceType.Watching,
})
})検証
メタデータの構造が正しいこと、アセットが揃っていることを確認します。
nowly validate検証
メタデータの構造が正しいこと、アセットが揃っていることを確認します。
nowly validateビルド
プレゼンスを単体のバンドルにコンパイルします。
nowly build exampleビルド
プレゼンスを単体のバンドルにコンパイルします。
nowly build example読み込み
ビルドしたプレゼンスをブラウザにインストールします。方法は2つ:ビルド済み拡張機能、またはzipドロップです。
完全な比較についてはローカルでの読み込みとテストを参照してください。
初回(ブラウザにNowlyがない場合): プレゼンスを組み込んだ拡張機能一式を作成します。
nowly extension example # Chrome（デフォルト）
nowly extension example --firefoxChromeではdist/extension-devをchrome://extensionsで読み込みます。Firefoxではabout:debugging#/runtime/this-firefoxを開き、Load Temporary Add-onでdist/extension-dev-firefox/manifest.jsonを読み込みます。
すでにNowlyをunpackedで読み込んでいる場合: zipを作成し、設定 → 高度な設定 → デバッグにドロップします。ストア版では署名なしzipは拒否されます。
nowly pack example読み込み
ビルドしたプレゼンスをブラウザにインストールします。方法は2つ:ビルド済み拡張機能、またはzipドロップです。
完全な比較についてはローカルでの読み込みとテストを参照してください。
初回(ブラウザにNowlyがない場合): プレゼンスを組み込んだ拡張機能一式を作成します。
nowly extension example # Chrome（デフォルト）
nowly extension example --firefoxChromeではdist/extension-devをchrome://extensionsで読み込みます。Firefoxではabout:debugging#/runtime/this-firefoxを開き、Load Temporary Add-onでdist/extension-dev-firefox/manifest.jsonを読み込みます。
すでにNowlyをunpackedで読み込んでいる場合: zipを作成し、設定 → 高度な設定 → デバッグにドロップします。ストア版では署名なしzipは拒否されます。
nowly pack exampleテスト
対象のウェブサイトを開くと、プレゼンスが自動的に有効化されます。
サイトにアクセスする
テスト
対象のウェブサイトを開くと、プレゼンスが自動的に有効化されます。
サイトにアクセスする
コードを変更するたびに、実装→ビルド→読み込みを繰り返してください。