This is a documentation for Board Game Arena: play board games online !

ChromeExtension

提供：Board Game Arena
2026年2月20日 (金) 15:16時点におけるHoshimikan6490 (トーク | 投稿記録)による版 (設定項目「ホームページのカスタマイズ」欄の追加)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
ナビゲーションに移動 検索に移動

注意：このドキュメントは更新が遅れている可能性が有ります。最新の情報は 英語のドキュメント をご覧ください。




Flavien氏とChristophe氏がお届けする、Google Chrome、Firefox、Opera用の拡張機能です。

Google Chrome拡張機能は、すべてのChromiumベースのブラウザ（Edge、Braveなど）と互換性があり、Androidデバイス上のKiwi BrowserやQuettaなどでも使用できます。

Firefox拡張機能は、Androidデバイス上のFirefox Mobileとも互換性があります。

Appleデバイス向けには、Orionと言う新しいブラウザがChromeとFirefoxの両拡張機能に対応していますが、現時点ではまだいくつかの不具合があります。モバイルデバイスでご利用になる場合、ダークモードが有効な状態でフォーラムを表示するには、以下のCSSルールを追加する必要があります（残念ながら、フォーラムはダークモードでは表示されません）「#forum_frame { visibility: visible!important; }」（拡張機能のオプションでカスタムCSSコードを追加可能です）

不具合のご報告やご提案、あるいは単に温かいメッセージを残したい場合は、こちらのフォーラム(英語)までお書きください。

本拡張機能はhttps://boardgamearena.com/に以下の機能を追加します。

現在のゲーム一覧

自動テーブル追跡機能を有効にしている場合（次章参照）、拡張機能のアイコンに現在あなたの操作を待っているゲーム数が表示されます。

拡張機能アイコンをクリックすると、進行中のゲーム一覧が開き、素早くアクセスできます。

オンライン対戦ゲームのロビー画面。上部に「テーブル」「大会」「フレンドのテーブル」「設定」のタブが並び、その下に「リフレクション（Reflection）」というテーブル名と、砂時計アイコン付きでユーザー名が表示されている。

保留中の招待一覧や、参加済みの大会も確認できます。

「フレンドのテーブル」タブでは、友達が開いたテーブルのうち、空席があるものを検索できます。

設定

「設定」タブでは、拡張機能の設定項目の一部にアクセスできます。各設定項目の動作は次の通りです。

その他の設定

BGAの拡張機能の、その他の設定項目の内容が書かれた画像
  • 拡張機能で使用する言語（英語、フランス語、ドイツ語、日本語）を設定できます。他の言語の追加にご協力いただける場合はご連絡ください！
  • ウェブサイトリンクを新しいロビーではなく従来のロビーにリダイレクトする設定です。
  • アリーナモードでプレイしたい際に、プレイできないゲームを非表示にする設定です。デフォルトではプレイできないゲームはグレー表示されます。
  • デフォルトの「木目」背景を単色背景に置き換える設定です。
  • ニュースフィードの動作を変更する設定です。有効化すると、ニュースフィードには自分のグループからのメッセージのみが表示されます。
  • チャットウィンドウでプレイヤー名を強制的に表示させる設定です。（デフォルトでは、プライベートチャットではプレイヤー名が非表示になり、ゲームチャットでは自分の名前が非表示になります）。
  • ダークモードで使用する絵文字の種類を設定できます。
  • ゲームの読み込み時などに、アニメーション付きのBGAロゴが表示されないようにする設定です。

通知設定

BGA Chrome拡張機能の「設定」の「通知設定」の画面
  • テーブルの状態を自動追跡する機能を有効／無効にする設定です。このオプションを有効にすると、拡張機能はあなたが参加しているテーブルのいずれかでプレイの順番が回ってきた際に通知できますが、他のプレイヤーからは常に接続中と見なされます。このオプションを無効にすると、拡張機能はプレイの順番を通知できませんが、他のプレイヤーがあなたのログイン状態を確認できるのは実際にサイトにアクセスしている時のみとなります。
  • 追跡を有効にした場合、音による通知を有効にできます。
  • 音による通知時に、任意のmp3ファイルを使用する設定です。
  • ブラウザの右上にある拡張機能のアイコンに、あなたのターンが来ているテーブル数を表示する設定です。
  • テーブルで自分の順番が回ってきた際に、ブラウザのタブに三角形が回るようなアニメーションが表示されないようにする設定です。

ゲーム設定

BGA Chrome拡張機能の「設定」の「ゲーム設定」の画面
  • ゲーム内のログに、フレンドがオンラインになったりオフラインになったりした通知を表示/非表示にする設定です。
  • アリーナと大会以外でのゲームにおいて、ELOスコアを表示/非表示にする設定です。この項目は、「ゲーム内のプレイヤー名の横」、「ゲームの試合結果の各プレイヤーのELOの変動」、「ゲームの試合結果の統計情報」に反映されます。
  • アリーナのゲームにおいて、ELOスコアを表示/非表示にする設定です。この項目は、「ゲーム内のプレイヤー名の横」に反映されます。
  • ゲーム内のチャットの入力ボックスを常に表示するか、マウスカーソルを近づけた時にのみ表示する設定です。
  • ゲーム内のログに、日時のタイムスタンプを表示/非表示にする設定です。
  • サポートされたゲームでは、各プレイヤーのボード間を移動するメニューを画面左上に追加する設定です。この設定は、ゲーム内の「オプション」で変更することも出来ます。
  • ゲーム終了時などに表示される「メインサイトへ戻る」ボタンが「トップページ」に戻るか、「今すぐプレイ」に戻るかを設定する項目です。
  • ゲーム終了時などに表示される「再戦を申し込む」ボタンが自動的に新しいテーブルを作成する画面に移動するか、ゲームの詳細ページに移動するかを設定する項目です。
  • ゲーム開始時に表示される、ゲームを「受け入れる」ボタンを自動的に押す/押さないようにする設定です。

ホームページのカスタマイズ

BGA Chrome拡張機能の「設定」の「ホームページのカスタマイズ」の画像

　簡単設定モードと詳細設定モードを切り替える設定です。それ以下の設定項目は、全て簡単設定モードの時にのみ表示されます。それぞれの設定項目で示された項目を表示/非表示に設定する項目です。

　また、詳細設定モードではHTMLのコードを入力して要素を任意の位置に配置出来ます。この機能を最大限に活用するためには、HTMLの基本知識を有することが期待されます。なお、デフォルトでは拡張機能が全ての拡張機能がすべての要素を含むHTMLコードを表示しますので、このコードを基に不要な要素を削除したり要素を移動させたりすることが出来ます。

　記述したHTMLのコードはhttps://jsonformatter.org/html-validatorなどのオンラインツールで確認することが出来ます。

　アイディアはあるのにHTMLコードが書けない場合も、がっかりしないでください。こちらのフォーラム(英語)で相談しましょう！

事前に定義された要素
HTMLのコード 説明
<div id='bgaext-tournaments'></div> 大会の一覧
<div id='bgaext-games-recent'></div> 新ゲームの一覧
<div id='bgaext-games-popular'></div> 有名なゲームの一覧
<div id='bgaext-games-suggested'></div おすすめのゲームの一覧
<div id='bgaext-achievements'></div> 達成した実績の一覧
<div id='bgaext-leaderboard'></div> 殿堂入りの一覧
<div id='bgaext-newsfeed'></div> ニュースフィードの一覧
<div id='bgaext-service-status'></div> サービス状況の一覧
<div id='bgaext-games-classic'></div> クラシック作品の一覧
<div id='bgaext-playmore'></div> 「もっと遊びましょう！」の一覧
<div id='bgaext-partners-events'></div> 「ニュースとイベント」の一覧

任意のHTMLコードを記述できますが、拡張機能では以下のスタイルを定義して、コードの作成を支援します：

  • <div class='bgaext-flex-col'>：このDIV内の要素は、小さなマージンで区切られながら、縦に並んだ列に配置されます。
  • <div class='bgaext-flex-row'>：このDIV内の要素は、各要素の最適なサイズを尊重しつつ、ページ幅全体にわたって横並びに配置されます。
  • <div class='bgaext-flex-row-distribution'>：このDIV内の要素はすべて同じ幅ですが、このDIVには必ず幅を設定する必要があります。

[ほぼすべての可能な要素を含む例]

最初の３列には以下の行が含まれます。

  • １列目：大会
  • ２列目：次の２要素
    • １行目：新ゲーム、人気ゲーム、おすすめのゲーム
    • ２行目：実績、殿堂入り
  • ３列目：ニュースフィードとサービス状況

次の２列には以下の行が含まれます。

  • １行目：クラシック作品
  • ２行目：「もっと遊びましょう！」エリア
<div class='bgaext-flex-col'>
	<div class='bgaext-flex-row'>
		<div id='bgaext-tournaments'></div>
		<div class='bgaext-flex-col'>
			<div class='bgaext-flex-row'>
				<div id='bgaext-games-recent'></div>
				<div id='bgaext-games-popular'></div>
				<div id='bgaext-games-suggested'></div>
			</div>
			<div class='bgaext-flex-row'>
				<div id='bgaext-achievements'></div>
				<div id='bgaext-leaderboard'></div>
			</div>
		</div>
		<div class='bgaext-flex-col'>
			<div id='bgaext-newsfeed'></div>
			<div id='bgaext-service-status'></div>
		</div>
	</div>
	<div class='bgaext-flex-row'>
		<div id='bgaext-games-classic'></div>
		<div id='bgaext-playmore'></div>
	</div>
</div>

要素が少ないより単純な例

この例には、次の順序で単一行に「ニュースフィード、大会、新ゲーム、人気ゲーム」が含まれます。 

<div class='bgaext-flex-row'>
	<div id='bgaext-newsfeed'></div>
	<div id='bgaext-tournaments'></div>
	<div id='bgaext-games-recent'></div>
	<div id='bgaext-games-popular'></div>
</div>

私(英語版Wikiの筆者)のお気に入りの表示例 

<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
#bgaext-partners-events { flex-grow: 0.4; }
</style>

<div class='bgaext-flex-col'>
  <div class='bgaext-flex-row'>
    <div class='bgaext-flex-col'>
      <div class='bgaext-flex-row-distribution'>
        <div id='bgaext-games-recent'></div>
        <div id='bgaext-games-suggested'></div>
      </div>
      <div id='bgaext-achievements'></div>
    </div>
    <div class='bgaext-flex-col'>
      <div id='bgaext-newsfeed'></div>
      <div id='bgaext-service-status'></div>
    </div>
  </div>
  <div class='bgaext-flex-row'>
    <div id='bgaext-games-classic'></div>
    <div id='bgaext-partners-events'></div>
    <div id='bgaext-playmore'></div>
  </div>
</div>

豆知識

「ニュースフィード」の高さを制限するには、例えば以下のようなCSSコードを追加してスクロールバーを表示させることができます。 

<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
	max-height: 900px;
	overflow: auto;
}
</style>
<div class='bgaext-flex-row'>
	<div id='bgaext-newsfeed'></div>
	<div id='bgaext-tournaments'></div>
</div>

または、以下の様に内容を切り詰めます。 

<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
	max-height: 900px;
	overflow: hidden;
}
</style>
<div class='bgaext-flex-row'>
	<div id='bgaext-newsfeed'></div>
	<div id='bgaext-tournaments'></div>
</div>

「殿堂入り」の高さを制限するには、例えば以下のようなコードを使用することが出来ます。 

<style>
#bgaext-leaderboard .bga-ranked-player-list {
	max-height: 525px;
	overflow: hidden;
}
</style>


あ

「http:///index.php?title=ChromeExtension&oldid=13697」から取得