jiro4989 / coc-radar

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

Profile

Key	value
Name	Jiro (次郎)
Birthday	1995
Place of birth	Japan
Job	SRE
Skill (Programming)	Go, Nim, Bash, Java, Kotlin, Python
Skill (Cloud infra)	AWS
Skill (IaC)	Terraform, CloudFormation, Ansible

coc-radar's Issues

ページタイトルを動的に変更したい

タグから遷移したときと表示から遷移したときとでページタイトルを変更できるようにしたい

encodeされた名前が出力された

tagの文字列がばけていた

探索者の凡例の状態を同期したい

可能なのかどうかも含めて調査

JSONをそのまま使う

よく見たらスクレイピングしなくてもデータ提供されてるやん！
https://charasheet.vampire-blood.net/help/webif

追加練習

実際にこの手順で画面に反映されるかためす。

https://charasheet.vampire-blood.net/mebb31fcc04f70c0e8c7b272594393e10

React.jsのテストコード書く

やはりテスト駆動
参考記事： https://mae.chab.in/archives/60066

表示上のテキストと値が一致しない

https://jiro4989.github.io/coc-radar/data/2520373.json
ラベルの順番がおかしい説が高い

タグの色をランダムにしたい

テスト環境構築

今の所GitHubPagesのdataにしかデータがない。つまり本番のデータしかない状態。
これだとテストがやりづらいので、テスト用の環境を整備する。

色が分かりづらい

2人くらいしかいないとき、0と1がほぼ同じ赤色になって判別しづらい。
カラーマップは定義してあるものの、もうちょい分散するようにしたほうがよい

今は8色しか色を用意していない。
しかしながら、8色でも分散の仕方はあるはずで、以下のように人数によって使う色を分散させたい。

1. Actor1
5. Actor2

これが4名のときは

1. Actor1
3. Actor2
5. Actor3
7. Actor4

という具合に。

このアプローチが可能なら、8色しか用意していなかったカラーマップを増やすことも可能なはず。
しかしながら、カラーマップの定義を今までみたいにベタ打ちで定義するとHTMLのファイルサイズが肥大化するので、
やるとするならJavaScriptで動的にカラーマップを生成する。
Bashで書いたスクリプトをJSで書き直せばいけるだろうか？

page.csvをjsonにしたい

やっぱり構造化データのが好き。

それをやるならnimble publishみたいにデータ追加用のコマンドがいる。
CSVなら手書きでも平気だけれど、JSONなら手書きはしたくない。

JSONの書式チェックのスクリプトも必要になる。

デプロイの仕方も、PRがマージされたときに走るようにしないといけなかったりと、
リリースフローも考える必要がありそう。

いっそのことリポジトリを分けてしまうのもありか？

tagでずれる

tagが２列になったことでレイアウトがずれてしまった。よくよく考えれば、タグはこれからも増え続けるしレイアウトを変更しないといけない

herokuで動作させられないか検討

• サーバはclojure
• フロントは今のまま
• Databaseには探索者のデータとかをもたせる
• あと探索者のURLの登録とかもする？

エラーになっても処理が続いてしまっている

https://travis-ci.org/jiro4989/coc-radar/builds/558879312

やること

• README (e5e4a4a)
• リストページと普通のページの違いをURLだけで判別 (jiro4989/coc@c51663f)

【固定】レーダー出力対象の追加について

この画面の右上の「New Issue」のボタンを押して
追加したい探索者ページのURLを貼り付けて貰えれば、あとは僕の方でそちらをデータに反映します。
追加したい探索者のURLは以下の2つが可能です。

1. 探索者のページ
2. 探索者のタグ検索のページ
   (※URLは一例）

僕が対応可能な時しかデータを反映できないため、Issuesを作ってもらってから反映されるまでにタイムラグがあると思います。ご了承ください。

また、データを反映してもブラウザの履歴、キャッシュの関係で画面の表示が反映されない場合があります。
その場合は時間をおいて再度アクセスするか、キャッシュを削除してみてください。

タグを検索欄に入力するだけに留める方法がほしい

クエリパラメータにtagを使用するアプローチは欲しいので、タグでの画面遷移自体は残したい。
しかしながら、自分の探索者を検索するのにいちいちタグを手入力するのもアホらしいので、タグを検索欄に入力するだけというアプローチが欲しい。

別タブで開けるようにする

表示ボタンを押すと現在のタブを変更してしまうのをやめたい

棒グラフにする

能力値のほうは円グラフでいいけれど技能値は棒グラフのがよいとの意見をいただいたので。
実際そっちのがわかりやすそうなので反映する

ロード中アイコンをだす

体感で結構待たされてる感があったので動いていることを明示するために表示する

SAN知識とかがない

SANとかそのへんのパラメータ、そういえばなかったな

src/coc_radar.nimの移動

プロジェクトとしてはReactのプロジェクトなのでnimのコードはtoolsとかに移動したほうが良いかも

素のJavaScript以外の言語で開発したい

elmかreactみたいなモダンなフレームワークで画面を作ってみたい

idを変更したい

idという項目のほうが短いし、こちらのほうがより自然だと考える

定期実行jobを組む

今はmasterブランチが更新されたタイミングでデータが更新される。
更新がない日が続くとデータが古いままになってしまうので、定期実行のタスクを組む。
毎日深夜1時くらいに開始を想定。

表示している探索者のみ表示ボタンがほしい

いちいちチェックボックス押すのめんどくさいなぁって感じた

タグ一覧がほしい

いちいちタグをスクロールして探したくない

JSONファイルを分割する

今はすべてのURLを1つのJSONファイルに出力している。
このアプローチだとURLの数が増えたときにデータの取得が完了するのに時間がかかるようになる。
それに関係ないファイルまで取得することになってしまうので、非常に無駄が多い。
よって、必要なデータだけ取得できるようにファイルを分割する。

方針としては

1. 検索ページで表示するのに必要なindex.json
2. 1探索者1JSONで、URL末尾のIDをファイル名にしたxxxxxx.json

の2種類にすればファイル数が増えたとしてもある程度処理時間の延びは軽減できると考える。

index.jsonにはいま表示されているテーブルの情報のみ保持する。（tag, id, name)
探索者のJSONのファイル名はIDなので、tagからIDを導き出せるようにする必要がある。
URLクエリパラメータのtagからindex.jsonをfetchし、index.jsonからタグにマッチする探索者のidを取り出せば
探索者ID.jsonをfetchすることは可能なはず。

加算後のデータではない