ゲームでよく見かける下のような経験値バーを、
Google スプレッドシート のグラフ機能で作ってみます。
動機
なぜ、Googleスプレッドシートかと言うと、
Googleスプレッドシート のグラフには、
Webへの埋め込み機能があるからです。
一度、サイトに埋め込んでおけば、
スプレッドシートの中身の更新に応じて、
自動的に表示される経験値バーも更新されます。
あとは、経験値の計算もGAS(Google App Script)で自動化してしまえば、
設置しておくだけで勝手に更新される経験値バーの完成です。
今回は経験値バーの見た目の設計について作ることとして、
GASによる自動更新については、下の記事などを参照してください。
clean-copy-of-onenote.hatenablog.com
グラフ機能で経験値バーを作る
Googleスプレッドシート には様々な種類のグラフが用意されていますが、
いきなり経験値バーを表示してくれるものはありません。
とはいえ、積み上げ棒グラフが経験値バーに似ているので、
これをカスタマイズして、経験値バーに仕立て上げていきます。
必要な情報
グラフ機能を使って経験値バーを表示するので、
当然、グラフを書くためのデータが必要になってきます。
経験値バーに必要な情報は、次の二つです。
- 現在獲得した経験値
- レベルアップに必要な経験値
そこで、次のようなデータをスプレッドシート に入力します。
積み上げ横棒グラフを作成する
上のデータを使って、経験値バーの土台となる棒グラフを作成します。
- データを選択した後に、「挿入」→「グラフ」を選択
- 「グラフエディタ」から「グラフの種類」→「横棒積み上げグラフ」を選択
すると、次のようなグラフが出来上がりますが、
まだ、経験値バーっぽくないですね。
そこで、このグラフをさらにカスタマイズしていきます。
棒グラフの色を変更する
経験値バーは、獲得した経験値の部分を強調して、
レベルアップまでに必要な部分は薄く表示されます。
赤色で表示された「必要経験値」のグラフをクリックし、
「系列」→「色」をクリックして、薄い灰色を選択しましょう。
これだけでも、下のようなグラフになり、
それっぽい形に近づきました。
余分な表示を消す
まだグラフっぽさが強いのは、
軸の目盛りや凡例が表示されているからでしょう。
そこで、これらの不要な表示を消していきます。
軸目盛りの削除
「グラフエディタ」→「カスタマイズ」→「グリッド線」→ 「主グリッドラインの数」から「なし」を選択します。
すると、下のようなグラフの形になります。
凡例の削除
「グラフエディタ」→「カスタマイズ」→「凡例」→
「位置」から「なし」を選択します。
これでグラフは下のような形になります。
形を整えるために縦方向に縮めました。
完成形に近付いてきましたね。
現在の経験値を表示する
あまりに情報を消しすぎて少し寂しくなってしまったので、
それっぽい情報を表示していきましょう。
まずは、現在の経験値を数値として表示します。
青色の経験値バーの部分をクリックして、
「系列」→「データラベル」にチェックを入れます。
すると、それっぽい数値表示が得られました。
現在のレベルを表示する
より経験値バーをそれっぽくするため、
レベル表示もつけてみることにします。
レベルデータを用意
ここまでではレベルのデータは用意してなかったので、
下のようにレベルのデータを追加しておきます。
CONCAT関数を使って、「レベル＋数値」の形式にしておけば、
レベルの変更は数値の部分だけの変更で良くなるため、
後々の自動更新と相性が良さそうです。
レベルを表示
レベルの表示は、縦軸方向のラベルとして表示します。
- 「グラフエディタ」→「設定」→「Y軸」から「Y軸の追加」を選択
- レベルの列を選択（図中ではK列）
- OKをクリック
これで、下のように経験値バーとレベルの表示ができました。
グラフの最大化
上で完成でも良さそうですが、
レベルもグラフに重なってくれた方がカッコよさそうです。
「グラフエディタ」→「カスタマイズ」→「グラフの種類」から、
「最大化」にチェックします。
すると、グラフが横いっぱいに引き伸ばされて、
レベルのラベルもグラフの上に重なるように表示されます。
これでかなりシンプルな経験値バーの完成です。
まとめ
Google スプレッドシート のグラフ機能を使って、
経験値バーを描画する方法を紹介しました。
ここでは、固定の数値をスプレッドシートに与えましたが、
GAS等を使って、数値を自動的に更新するようにすれば、
自動的にグラフが更新され、グラフを埋め込んだWebページでも、
自動的に経験値バーが更新されます。
ちょっとした自作のブログパーツですね。
もちろん、経験値だけではなく、
進捗バーもほぼ同じような形で作成できるので、
色々なオリジナルのバーを作って、
Web ページに貼ると面白そうです。
