coc-radar

Table of Contents

• 1. アプリ概要
• 2. サイトの機能
  • 2.1. ブックマークについて
• 3. 実装
  • 3.1. フロントエンド
  • 3.2. バックエンド
• 4. グラフ化したい探索者を追加する方法
• 5. LICENSE

キャラクター保管所のクトゥルフの探索者の 能力値をレーダーチャートで表示するWebサイト。

サイトは以下。

• coc-radar - github.io

1. アプリ概要

自分の探索者や他の探索者の能力値を簡単に比較できるようなアプリが欲しくて自作した 。初めはスクレイピングだけしてきてローカルPC上のLibreOfficeなどでグラフ化すれば よいかと考えていたけれど、アプリにしたら面白いのではないか、と考えてWebアプリに 起こしてみた。

基本的にマウスで表示したい探索者のチェックボックスを選択し、画面右のグラフが表示 されるのを眺めるだけの使い方を想定している。

登録されているデータは、作者の次郎の知り合いのデータしか今は存在しない。 他の探索者のデータも表示したい、などの要望があるかたは後述の「グラフ化したい探索 者を追加する方法」の章を参照。

2. サイトの機能

• チェックボックスにチェックした探索者のパラメータをグラフ表示

• タグと探索者名での検索

• タグのクリックによる検索の補間

• タグ横のボタンクリックで、タグの探索者の一括選択とグラフ化

• チェックボックスの選択解除

• 探索者を選択した状態でのブックマーク保存

• タグ単位で探索者を選択した状態でのブックマーク保存(タグは1つまで)

2.1. ブックマークについて

2.1.1. 探索者による保存

チェックボックスをクリックすると、探索者ごとに選択した状態になります。 この状態でブックマーク保存すると、次にブックマークを開いたときは、探索者を選択し た状態でグラフを表示します。

2.1.2. タグによる保存

タグ横のボタンをクリックした場合、同じタグの探索者をすべて選択します。 このまま、他のチェックボックスを何も選択せずにブックマークに保存すると、 タグ単位で探索者を選択した状態になります。(チェックボックスを選択すると、前述の 探索者ごとに選択した状態になります)

この状態でブックマーク保存した場合、新規に同じタグ名で探索者を創造した場合に、 次にブックマークを開いたときに新規探索者も自動でグラフに表示されるようになります 。

3. 実装

3.1. フロントエンド

React.jsを使用している。

特に画面遷移はなく、1ページで構成した。

GitHub Pages上で状態を保持させるために、URLクエリパラメータを使用している。 これは前述のブックマークとも相性がよかったためである。

画面に表示しているデータについては後述のバックエンドの項目で説明する。

3.2. バックエンド

cocというキャラクター保管所のクトゥルフPC作成ツ ールのデータからJSONを生成するツールをバッチ処理に使用している。

masterブランチが更新されたタイミングでTravisCIで前述のツールを使用してデータを取 得する。取得したデータはdocs/data/*.jsonに配置される。

データ取得と同時に、 npm run build が走り、Reactアプリをビルドし、各種JSONと一 緒にgh-pagesブランチにPUSHされる。

また、TravisCIのCron Jobにより、毎日1回はこのバッチ処理が走る。

4. グラフ化したい探索者を追加する方法

issuesに方法を記載。

5. LICENSE

MIT