【NZXT Kraken】画面ディスプレイに「Spotify」の現在再生中のアルバムアートを表示する方法

当ページのリンクには広告が含まれています。
めてお

こんにちは。当ブログの閲覧ありがとうございます。
管理人の「めてお」です。

自作PCの簡易水冷、NZXT Kraken シリーズでは、液晶モニターが表示されるモデルがあり、
NZXTのコントロールアプリ「CAM」を利用すれば、Gif画像やPCモニタリング情報、さらに時刻表示をすることができます。

また、「CAM」のアップデートでWebサイトの表示に対応しました。

このアップデート後、有志の方が「Spotify」の現在再生中のアルバムアートを表示するアプリケーションを作成されました。
ただ、導入方法の説明が英語で、方法が複雑なのが現状です。

本記事では、こちらのWebアプリケーションを使用して
「Spotify」の現在再生中のアルバムアートを表示する方法を解説します。

Contents

対応商品

今回の内容は、下記商品のみ対応しております。

  • NZXT Kraken Elite シリーズ
  • NZXT Kraken (2023) シリーズ
  • NZXT Kraken Z シリーズ

NZXT Kraken Eliteでは、標準でSpotifyの「Now playing」が設定できるため、本記事の設定は不要です。
なお、他シリーズの場合は設定ができませんので、同様の機能を使う場合は本記事の設定が必要になります。

NZXT
¥58,800 (2024/03/01 01:15時点 | Amazon調べ)
\\新生活SALE開催中!//
Amazon
NZXT
¥30,073 (2024/02/29 15:56時点 | Amazon調べ)
\\新生活SALE開催中!//
Amazon

方法

以前解説した方法よりかなり簡単に設定できるようになりました。

まずは、Github「Kraken Display」にアクセスします。

サイトはこちらから!

GitHub
GitHub - montolentino/nzxt-kraken-display Contribute to montolentino/nzxt-kraken-display development by creating an account on GitHub.

ページ内の「Setup」にある、リンクをコピーします。

そして、NZXT CAMの「照明」→「Kraken」内にプルダウンがありますので、「Web Integration」を選択し、「Custom」内の「Edit」をクリック、入力欄に指定したURLをコピペして→をクリックすれば適用されます。

下記のように画面が変わりますので、「Log in with Spotify」をクリックし、Spotifyアカウントでログインします。

アカウント連携の画面が出ますが、「同意する」をクリックしてください。

ログインすると、アルバムアートが表示されます。
以上で導入は完了です!

過去に解説した方法 ※メモとして残しておきます。

方法

本内容は、@mnrtlntn さんがGitHubで公開されている内容を、
日本語訳で紹介します。

IIS(インターネット・インフォメーション・サービス)の導入

こちらの記事で紹介するものは、NZXT CAMのWebインテグレーションを利用します。
そのために、まず最初にIIS(インターネット・インフォメーション・サービス)を導入します。

WinRキーを押して、「ファイル名を指定して実行」ウインドウが出たら「appwiz.cpl」と入力し、OKをクリックします。

「コントロールパネル」のウインドウが出ますので、左側の「Windowsの機能の有効化または無効化」をクリックします。

「Windowsの機能」ウインドウが出ます。
「インターネットインフォメーションサービス」を展開し、
「Web管理ツール」と「World Wide Webサービス」にチェックしてOKをクリックします。

再起動を促す画面が出たら、再起動してください。

ブラウザを起動し、「http://localhost/」にアクセスして下記画面が表示されればIISの導入は完了です。

URL Rewrite のインストール

本Webアプリを動作するにあたり、URL Rewrite」が必要になります。

ダウンロードページに移動後、下にスクロールすると「Download URL Rewrite Module…」がありますので、Japaneseの「x64 installer」をクリックします。

クリックすると、「rewrite_amd64_ja-JP.msi」がダウンロードされます。

ダウンロードされたファイルを実行したら、画面の指示にしたがってインストールしてください。
(設定等は変えなくてOKです。)
インストールが終われば完了です。

Kraken Display のダウンロード

本記事の内容に欠かせない、「Kraken Display」の本体ファイルをダウンロードします。

ダウンロードはこちらから!

GitHub
GitHub - montolentino/nzxt-kraken-display Contribute to montolentino/nzxt-kraken-display development by creating an account on GitHub.

上記リンクにアクセス後、右側にある「Release v○○○」をクリックします。

クリックして下記の画面になりましたら、一番上の「kraken-display-v○○.zip」をクリックしてzipファイルをダウンロードします。

ダウンロードしたzipファイルの中身は、下記フォルダにコピーしてください。

C:\inetpub\wwwroot\krakendisplay
※「krakendisplay」フォルダは新規作成してください。

下記の通りになればOKです。

IISにアプリケーションをセットアップ

最初に導入した「IIS」を起動します。

WinRキーを押して、「ファイル名を指定して実行」ウインドウが出たら「InetMgr.exe」と入力し、OKをクリックします。

ISSが起動します。

左側にある、「サーバー名(PC名)」→「サイト」→「Default Web Site」を右クリックし、
「アプリケーションの追加」をクリックします。

下記ウインドウが出てきますので、黄色の箇所の通り、入力をしてOKをクリックします。

これでIIS上での導入は終了です。
正しく導入できた場合、ブラウザを起動して「http://localhost/krakendisplay」にアクセスすると、下記画面が出てきます。

ブラウザからアプリケーションをセットアップは行いません。
このページが表示された場合は、アプリケーションのセットアップが完了したことを意味しますので、このページを閉じてください。

Spotifyアプリケーションを作成

Spotifyアカウントが無い方は、事前に作成してください。

下記リンクにアクセスします。

あわせて読みたい

アクセスしたら、右上のユーザー名→「Dashboard」をクリックします。
利用規約が出てきたら、チェックして同意してください。

Dashboardの画面が出てきます。
「Create app」をクリックして、アプリケーションを作成します。

Create app画面が出てきますので、App nameとApp descriptionに「krakendisplay」
Redirect URIに「http://localhost/krakendisplay/settings」と入力します。

規約とガイドラインを理解し同意する・・・という項目にチェックをし、Saveをクリックします。

これでアプリケーションの作成は完了ですが、
後ほどAPIキーの入力などに利用しますので、画面はそのままにしてください。

Kraken Displayのセットアップ

お使いのNZXT CAMを起動し、「照明」→「Kraken ○○」→「Web Integration」→ Web Integration Custom「Edit」の順にクリックします。

URLの入力欄に「http://localhost/krakendisplay」と入力し、「→」ボタン、「Configure」ボタンの順にクリックします。

すると、先程のKraken Display Setupのウインドウが出現し、Krakenの画面ディスプレイは英語のテキストが表示されるようになります。

上記の通りになればOKです。
先程のSpotifyアプリケーションを作成した際のブラウザの画面に戻ります。

Dashboardに「krakendisplay」と表示されているはずなので、そちらをクリックします。

Home画面が表示されたら、右上の「Settings」をクリックします。

Basic Information画面が表示されます。

Client IDが表示され、「View client secret」をクリックするとClient secretも表示されます。


表示されたコードを、NZXT CAMの画面にそれぞれコピペし、Redirect Uri「http://localhost/krakendisplay/settings」と入力します。

入力し終わったら「Save Configuration」をクリックします。

下記のように画面が変わりますので、「Log in with Spotify」をクリックし、Spotifyアプリケーションを作成したアカウントでログインします。

アカウント連携の画面が出ますが、「同意する」をクリックしてください。

ログインすると、アルバムアートが表示されます。
以上で導入は完了です!

使い方

こちらのアプリケーションでは、設定等は一切なく、アルバムアート、曲名、アーティスト名が表示される機能のみとなっております。

なお、ログインしたアカウントなら、スマホから再生している曲でも表示されます。

最後に

いかがでしょうか。

こちらのアプリケーションを制作された@mnrtlntnさんに感謝するとともに、同様のアプリケーションがリリースされればKrakenシリーズの使い勝手が増えて嬉しいですよね。

めてお

本記事は以上となります!閲覧いただきありがとうございました。
参考になればシェアいただければ嬉しいです!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (3件)

  • コメント失礼します。

    私はNZXT KRAKEN Elite 240 を使用しているのですが、
    NZXT CAM のURL入力の際に、Configureというボタンを押しても白い画面が表示されるだけです。
    この記事ではウィンドウの名前がKRAKEN displayと書かれているのですが、私のCAMではNZXT CAM
    と書かれています。 この記事に書かれている手順はすべて実行できているか確認までしました。

    解決方法を教えてください。

    • 記事の閲覧、ありがとうござます。
      私の方で確認をしましたが、URL入力欄が間違っていると同様の現象が発生しました。
      IISが正常に導入されているか、ブラウザ上でリンク先が繋がっているのかを一度確認してみてください。

  • NZXT CAM の再インストールをしてみたら
    うまくいきました!
    ありがとうございます!

コメントする

CAPTCHA


Contents