LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@N-Island

Discordにアニメの視聴ステータスを表示しよう

Last updated at Posted at 2024-12-03

こんにちは！東京農工大学で情報工学を学んでいる者です ( @nibs_tuat )。
Qiita初投稿の記事となります。

この記事は 農工大アドベントカレンダー Advent Calendar 2024 の4日目のものです。

はじめに

DiscordにはDiscord Rich Presenceと呼ばれる、アクティビティをステータスに表示できる機能があります。この機能によってプレイ中のゲームを表示したり、Spotifyなどのアプリケーションと連携することで、聞いている音楽を表示したりできます。

「ここにアニメの視聴状態も表示したい！」 と思ったのがこの記事で紹介するものを制作した経緯です。

本記事では以下のように、Discordのステータスにdアニメストアで視聴中のアニメの情報を表示できるChrome拡張&ネイティブアプリケーション(Rust製)を紹介します。

screenshot1.png

表示できる情報は以下の通りです。

  • タイトル
  • エピソード / 総再生時間
  • 現在の再生時間

アニメのサムネイルも表示しようと思えば簡単にできるのですが、著作権的に微妙そうなのと、少なからずdアニメストアのサーバーに負荷をかけることになってしまうので断念…
代わりに表示するものを検討中です。

すでに最低限動作するものはリリース済みで、プログラム等は全て以下のリポジトリにあります。

仕組み

次のような構成で動作します。

image.png

  1. content.js
    dアニメストアの各再生ウィンドウで動作し、後ろで動いているbackground.jsに再生・停止などの状態の変化とタイトルなどの情報を送信

  2. background.js
    content.jsから送られてくる各ウィンドウの情報を管理し、いずれかのウィンドウが新たに再生状態になるとネイティブアプリケーションに情報を送信

  3. ネイティブアプリケーション(Native Messaging Host)
    Chrome拡張から情報を受け取り、Rustのdiscord-sdkでDiscord側にアクティビティを表示するための情報を送信

特殊な事情がない限り、Windows・MacOS・LinuxのいずれのOSでも動作する技術で構成されています(Linuxは動作未確認)。

また、YouTube・YouTube Musicで同様のサービスが存在しており、今回使用した技術の構成はこれを参考にしています。

準備

Discordにアクティビティを表示するため、あらかじめ Discord Developer Portal でアプリケーションを登録し、Application IDを控えておきます。

詳細

簡単に各プログラムの説明をします。

Chrome拡張

manifest.json

まず、以下のようにmanifest.jsonを作成しておきます。
content_scriptsでdアニメストアの再生ページでcontent.jsが動作するように指定し、backgroundでbackground.jsがバックグラウンドで動作できるように指定します。
また、ネイティブアプリケーションと通信できるようにするため、permissionsにnativeMessagingを書いておきます。

manifest.json
{
    "name": "dAnimeDiscordPresence",
    "version": "0.1.0",
    "manifest_version": 3,
    "content_scripts": [
        {
            "matches": [
                "https://animestore.docomo.ne.jp/animestore/sc_d_pc*"
            ],
            "js": [
                "content.js"
            ]
        }
    ],
    "permissions": [
        "nativeMessaging",
        "background",
    ],
    "background": {
        "service_worker": "background.js"
    }
}

content.js

各content.jsでは始めにランダムなUUIDが生成され、このUUIDは各データと一緒にbackground.jsへ送信されます。background.jsはこのUUIDを基に各ウィンドウから送られてくるデータを識別します。
background.jsへのデータ送信はchrome.runtime.sendMessageを使用しており、データ送信は主に以下のタイミングで行われます。

  1. ページロード時
  2. 動画再生開始時
  3. 動画再生停止時
  4. ウィンドウ消去時

background.js

background.jsは各content.jsから送られてきたデータを管理し、ステータスの更新が必要な場合のみネイティブアプリケーションにjson形式でデータを送信します。
ネイティブアプリケーションへのデータ送信にはChrome拡張のNativeMessagingという機能を使用しています。この機能を使用すると、ネイティブアプリケーションの標準入出力を介してChrome拡張との通信が可能になります。

次のようにして簡単に接続することができ、接続後はport.postMessage()を呼び出すだけでデータを送信できます。

background.js (一部抜粋)
// connect to native host
function assertNative() {
    if (!isNativeConnected) {
        if (port.disconnect) port.disconnect();
        port = chrome.runtime.connectNative("com.dadp.discord.presence");
        isNativeConnected = true;
        port.onDisconnect.addListener(() => {
            if (chrome.runtime.lastError) {
                isNativeConnected = false;
                console.log("Couldn't connect to native app");
                console.log(chrome.runtime.lastError);
            }
            console.log("Disconnect")
        })
    }
}

ネイティブアプリケーション

ネイティブアプリケーションでは、Discordにデータを送信するためにRust用のdiscord-sdkを使用しています。

プログラム実行時に、このSDKとあらかじめ作成したDiscordアプリケーションのIDを使用してクライアントを作成します。この方法はライブラリのリポジトリに例が書かれています。

また、データの受信では先ほど述べたように、ネイティブアプリケーションは標準入出力を介して通信できるため実装時にChrome拡張を意識する必要はありません。ただし、データのフォーマットは決まっているため、それに合わせる必要があります。

以下のようなループを回すことでChrome拡張から受信したデータをDiscordに送信しています。

最初の32bitがデータ長を表しているので先にこれを読み取り、そのうえで受信したデータを読み込みます。受信するデータはjson形式の文字列となっているため、これをパースして指定された処理を行います。

main.rs (一部抜粋)
loop {
    // read JSON length
    let mut length_buffer = [0u8; 4];
    if reader.read_exact(&mut length_buffer).is_err() {
        break;
    }
    let data_length = u32::from_le_bytes(length_buffer) as usize;
    
    // read JSON data
    let mut json_buffer = vec![0u8; data_length];
    let _ = reader.read_exact(&mut json_buffer);
    
    let input = String::from_utf8(json_buffer).expect("Invalid UTF-8 data");
    
    let data: PresenceData = serde_json::from_str(&input).expect("Invalid JSON data");

    if data.message_type == CLAER_MESSAGE {
        tracing::info!(
            "cleared activity: {:?}",
            client.discord.clear_activity().await
        );
        continue;
    } else if data.message_type == DISCONNECT_MESSAGE {
        break;
    } else if data.message_type == UPDATE_MESSAGE {
        let rp = ds::activity::ActivityBuilder::default()
            .assets(
                ds::activity::Assets::default().large("tsumugi", Some("Watching anime")),
            )
            .kind(ds::activity::ActivityKind::Watching)
            .details(&data.title)
            .state(format!("{} / {}", &data.episodes, &data.total_duration))
            .start_timestamp((Local::now() - parse_time_string(&data.current_time)).timestamp());

        tracing::info!(
            "updated activity: {:?}",
            client.discord.update_activity(rp).await
        );
    }
}

最近になってDiscord側の仕様変更によりkindを指定できるようになり、これをWatchingとすることで「アニメを"視聴中"」と表示できるようになりました。

おわりに

「Discordにアニメ視聴のステータスを表示したい」というモチベーションから制作したものでしたが、ちゃんと動いて満足しています。

また、いつか触れたいと思っていたChrome拡張とRustにも触れることができてよかったです。

改善点もまだまだあると思うので今後も改良していけたらと思います。

農工大Advent Calendar 2024

Day 4
3
0
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
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?