Bar Chart Race Pro 使い方ガイド

「Bar Chart Race Pro」は、順位がリアルタイムに入れ替わるアニメーショングラフを簡単に作成できる高機能なチャートプラグインです。

CSVファイルやGoogleスプレッドシートのデータを読み込むだけで、視覚的インパクトの強いコンテンツを作成し、サイト訪問者の滞在時間を延ばすことができます。

本ガイドでは、チャートの新規作成からデータの同期、デザインのカスタマイズ方法までを解説します。

1. チャートの新規作成とデータソース選択

まずは、新しいチャートレースを作成し、元となるデータを読み込みます。

チャートの作成手順

1. WordPress管理画面の左メニューから「チャートレース」をクリックし、「新規作成」を選択します。
2. 「チャートタイトル」にチャートの名前（例：都道府県別人口推移、売上ランキングなど）を入力します。
3. 「データソース」を選択します。
   ・CSVファイルをアップロード: 手元のCSVファイルをアップロードする場合。
   ・GoogleスプレッドシートURL: Googleスプレッドシートと連携する場合。
4. ファイルを選択、またはURLを入力して「チャートを作成」ボタンを押してください。

2. データの編集とプレビュー

データの読み込みが完了すると、編集画面に移動します。

ここではリアルタイムでプレビューを確認しながら設定を行えます。

簡易データエディタ

「データエディタを開く」ボタンをクリックすると、読み込んだデータが表形式で表示されます。
ブラウザ上で数値を直接修正したり、行を追加・削除することが可能です。修正後は必ず画面右上の「更新 (Update)」ボタンを押して保存してください。

Googleスプレッドシートとの同期 (Sync)

Googleスプレッドシートをソースにしている場合、シート側でデータを更新した後に「今すぐ同期」ボタンを押すだけで、最新のデータをチャートに取り込むことができます。

3. デザインと表示設定

チャートの見た目や動きを細かくカスタマイズできます。設定を変更すると、即座にプレビューに反映されます。

デザイン・カラー設定

• タイトルを表示: チャートの上段にタイトルを表示する/しないを設定します。。
• アニメーションループ: ループ再生の有無を設定します。
• カラーパレット: 5種類のプリセット（暖色系、寒色系、ビビッド、モノクロ、メタリック）から選択できます。
• 背景画像: チャートの背景に好きな画像を設定できます。
• 文字色: ラベルや数値の文字の色を指定します。
• カスタムラベル設定: 各ラベルの背景色やアイコンを設定します。
• コンテナの余白: グラフが表示されるエリアのサイズを調整します。
• ラベル表示: バーの外側（左）と内側に表示する要素を「テキスト」「アイコン」「なし」から選択できます。

基本設定

• 再生速度: アニメーションの再生速度を調整します（0.1倍〜5.0倍）。
• バーの高さ / バーの間隔: バーの太さと間隔をピクセル単位で調整します。
• フォントサイズ: ラベルや数値の文字サイズを指定します。
• 表示件数: ランキングに表示するバーの最大数（例：Top 10）を設定します。
• Date Format: 日付の表示形式（YYYY-MM-DD, YYYY年MM月など）を選択します。

4. 【Pro機能】カスタムラベル設定（色・アイコン）

特定の項目（バー）に対して、固有の色やアイコン画像を指定することができます。

設定手順

1. 設定エリアにある「カスタムラベル設定」のアコーディオンを開きます。
2. データに含まれる項目名の一覧が表示されます。
3. カスタマイズしたい項目名をクリックし、以下の設定を行います。
   ・Color: カラーピッカーでお好みの色を指定します。
   ・Icon: 「選択」ボタンからメディアライブラリの画像を選択、またはURLを入力します。

企業のロゴや国旗などを設定することで、より視覚的にわかりやすいチャートを作成できます。

5. サイトへの表示方法

作成したバーチャートレースをサイトに表示するには、ショートコードを使用します。

ショートコードの埋め込み

編集画面の上部に表示されているショートコードをコピーしてください。

このコードを、固定ページや投稿の本文（ブロックエディタの場合は「ショートコード」ブロック）に貼り付けるだけで、アニメーショングラフが表示されます。

6. ユーザー投稿フォームの設置

「Bar Chart Race Pro」には、サイト訪問者がCSVをアップロードしてチャートを作成できる機能も備わっています。

ユーザー投稿フォームの設置に関するご注意

ショートコード ［chart_race_upload_form］ を使用して投稿フォームを設置する場合、以下のリスクと対策を十分にご理解の上、慎重に運用してください。

想定されるリスク

• 即時公開の仕様: 本機能により投稿されたチャートは、管理者の承認を経ずに即座に「公開 (Publish)」ステータスでサイト上に表示されます。
• 不適切なコンテンツの投稿: 悪意のある第三者により、公序良俗に反するデータや不適切なラベルを含むチャートが作成・公開されるリスクがあります。
• スパム・負荷攻撃: 不特定多数に公開された場合、ボット等による大量投稿が行われ、サーバーリソースを圧迫する可能性があります。

推奨される運用方法

セキュリティリスクを最小限に抑えるため、以下の環境でのご利用を強く推奨します。

• アクセス制限のあるページへの設置:
  • 固定ページの公開設定を「パスワード保護」にする。
  • 会員限定サイトや、社内イントラネット内でのみ使用する。
  • Basic認証をかけたディレクトリ下で運用する。
• 信頼できるユーザーのみへの案内: フォームのURLは一般公開せず、社内チームや特定のクライアントのみに共有してください。