【新サイト対応】VALORANT配信でランクを表示する方法

*当サイトはアフィリエイト広告を利用しています

VALORANT配信で画像のような現在のランクを表示している人を見たことはないでしょうか?

こちらを表示するための手順と使用するサイトを過去に本ブログで紹介しました。

ですが先日そのサイトが新しくなりAPI Keyを取得する手順が必要になったため本記事で改めて手順を紹介できればと思います!

手順

ざっくりですが手順は以下になります。

  1. https://davizeragod.github.io/にアクセス
  2. ランクを表示させたいアカウントを入力(ログインやアカウント登録などは不要)
  3. Discordサーバーに参加しAPI Keyを取得(取得後サーバー退会しても問題なし)
  4. OBSでオーバーレイを追加

1. https://davizeragod.github.io/にアクセス

まずはhttps://davizeragod.github.io/にアクセスします。

サイトのURLはサイトリニューアル前と同じになります。

アクセスすると以下のようなサイトが開くかと思います。

2. ランクを表示させたいアカウントを入力(ログインやアカウント登録などは不要)

まずは『API Key』以外の3か所を入力しましょう。

Nickname → ゲーム内の名前、#の前の部分

ID → #の後の数字、文字の部分

Region → JPを選択でOK

VALORANTのロビーで自分の名前をホバーすることで『プレイヤー名』と『ID』を確認できます。

以下の入力例のように入力できていればOKです。

入力例:

3. Discordサーバーに参加しAPI Keyを取得(取得後サーバー退会しても問題なし)

次に『API Key』を取得していきます。

以前はこちら必要なかったのですがサイトが新しくなり必要となったようです。

『API Key』の入力欄の下に『APIキーの生成方法が分からない場合、こちらをクリックしてください。』とあるのでこちらのリンクをクリック。

言語選択画面に移動するので『日本語』をクリック。

するとAPI Key取得の流れが記載されているページへ移動します。

基本的にはこちらの手順に従えばOKですが個人的に少し分かりづらいところもあったのでこちらでも解説します。

まずは『Discordサーバーへの参加はこちら』のリンクから『HenrikDev Systems』というDiscordサーバーに参加します。

『既にアカウントをお持ちですか?』のリンクからログインできます。

ログインすると謎の選択画面が出るので自分は『VALORANT API』を選択して『次へ』をクリック。

また謎の選択画面が出ますが特になにも選択せず『完了』でOKです。

するとサーバーの参加が完了します。

画面左側の『#verify』の恐らくどれでも大丈夫なのでクリック。

チャット画面に移動し表示されている『Verifizieren』をクリック。

表示されているアルファベットと同じ表記のボタンをクリックして認証します。

正しく選択できていれば以下のような表記が出ます。

画面左のチャンネルの数が増えていれば認証完了です。

チャンネルの中から『#get-a-key』をクリック。

ここでAPI Keyを発行します。

チャット欄に『Generate』というボタンがあるのでクリック。

するとチャット欄にセレクトボックスが出てくるのでそこから『VALORANT』を選択。

※自分はすでに作成してしまい新しくキーは発行できなかったのでここからの画像は手順解説ページから引用しています。

するとさらに新たにチャット欄にセレクトボックスが出てきます。

『VALORANT (Basic Key)』を選択。

すると以下のような入力画面が出てくるので画像の通り登録します。

恐らくAPI Keyの登録名と使用用途なので記述内容は分かりやすいものであればなんでも大丈夫かと思います。

PRODUCT NAME → Valorant OBS Overlay

PRODUCT DESCRIPTION → Overlay to show the rank on stream

入力ができたら青い完了ボタンをクリック。

すると個人DMにHenrikDev SystemsからAPI Keyの情報が送られてきます。

この『Key』と書かれている下にある文字列をコピーしてサイトに戻ります。

サイトに戻り『API Key』にコピーしてきた文字列を入れると下にランク表示のプレビューが出ます。

『Copy link to clipboard』をクリックしてOBS用のリンクをコピーしたらOBS操作に移っていきます。

4. OBSでオーバーレイを追加

OBSを起動してソース欄の+ボタンをクリック。

そこから『ブラウザ』を選択します。

すると小さいウィンドウが出てくるのでソースの名前を設定します。(なんでもOK)

分かりやすい名前を付けたら『OK』をクリック。

するとプロパティウィンドウが出てきます。

最初に入っているURLは消して『URL』欄に先ほどサイトからコピーしてきたURLを入力します。

幅と高さは変えなくても問題ないですが幅: 365、高さ: 160が余計な空白が少なくておすすめです。

OKをクリックするとしばらく何も表示されなかったりしますが待っているとプレビューで見たランク表示が出てきます。

好きな位置に配置して作業完了です、お疲れさまでした!

さいごに

サイトリニューアル前よりも少し手順が増えて最初は手間に感じましたが1度やっておけば以降は特にAPI-Keyの発行など不要なので皆さんの配信のクオリティアップに繋がれば幸いです。

もし参考になる点ありましたら自分のYouTubeチャンネルの登録をお願いできればと思います!

vcなしソロでアセンダント3までランクを上げていく中で得た知識などを発信したり、試したデバイスをVALORANTで使用してみてレビューしています。

ぜひチェックしていただけると嬉しいです!

それではまた。