現状の目標
要求
_途中 _done完了 _stop 行き詰まり
軸
仮データベースを設置してクライアント側に記録データ一覧を適切に表示するためのデータを出力する。
_doneindex.jsの完成(表示機能の完成)
_done仮データベースからデータを取りだす機構が完成したのでそれのバグ取りを行う
_doneコンパイルする際にどういうソースコードの設置方法をとるかの方法を模索する
_donefixme タグの表示されるアイコンが全て同じになっている
_donegitに登録されているoriginを適切なものに変更する
_donemochaを使い挙動を確認。
_done取り出したデータを記録データ一覧用に加工する。
_doneクライアントから受け取るであろうデータの例を構築する。
_doneそのデータを適切に処理し該当する記録データを取り出す。
_doneこの記録データを適切な形に直し、クライアント側へ送るjson文字列とする。
_done データベースから取り出される記録データをIDの配列で返すことにする。
_done IRecord(本来のデータ)からIRecordInShortWithName(クライアントに渡す用のデータ)へ変換する際、コピーが発生してしまうので、IRecordInShortWithNameの型定義を見直す
_done ` IRecordInShortWithNameは、それぞれIDとnameをプロパティに持つのではなく、それぞれIDのみのデータとNameのみのデータに分ける。
こうすることで、IDのみのデータでコピーが発生することを防げる。
やっぱりResolve型のオブジェクトには名前もIDも入れ込むことにする
分けたところであまりメリットがない
扱いも煩雑
_done Resolvedの型定義を上記のように修正(名前は戻さなくてよい
_doneそれに伴うクライアント側表示部とサーバー側データ整理部の修正
_doneデータベースの検索について、記録を閲覧するために必要な送受信に準拠した検索方法も実装する
旧来実装したものについては残しておく。
_done受け取るデータの形を記録を閲覧するために必要な送受信に準拠した検索方法を実装する。
_done一通り組めたのでテストを行う。
_done処理をサーバーとクライアントに分離する。
_done/appbirdNotebook-public/Node.jsで簡単にサーバー構築をしてみる。を一度実現してみる。
_done上記のデータを元に分離実装を行う。クライアントからリクエストデータを送信->サーバーで処理して返答->クライアントで表示の流れ。
HTMLのロード時にサーバーへfetchする。fetchしてきたデータをもとに記録データを描写する。
_done https://firebase.google.com/codelabs/firebase-web?authuser=0#0 を学習する。
_done https://firebase.google.com/codelabs/firebase-cloud-functions?authuser=0#0 を学習する。
_done仮データベースの実装をGoogleFireStoreでもう一度実装。
_doneRealDataBaseと比較する
_doneためしに幾つかのデータを入れて
_done取り出してみる
_done テストを行ったところバグがいくつも発生したのでそれの修正を行う
_done CloudFunctionを用いてデータベースの操作をクライアントからのGETリクエストPOSTリクエストでできるように。
こいつを用いようとすると従量制にする必要があってクレジットカードの登録が必要
ちょっとまだ…やめときたい。
一瞬クライアント側から直接データを取ってこようかな?とか思った
自分が予想したよりデータの扱い方が楽だった
下手にFunctionを経由するよりはこっちの方がシンプルかもしれん
_doneIReceivedDataAtClient recordSearch型の命名変更にしっかり合わせる。
_doneIRecordGroupResolved型の命名変更にしっかり合わせる。
_stop使用するデータベースを仮のものに変えておく。
_done「記録カードをクリックするとその記録の詳細を見ることができる。」の実装についての考察
_done検索画面の実装についての考察
これらは幾つかの画面に分けられる。
_doneゲームシステムセレクト画面
ゲームシステムをカードに載せて列挙。クリックで選択させたい。
このとき、api/list/gameSystemsを使用する。
要素クリックで検索画面/ゲームモード画面へ移行。
_doneゲームモードセレクト画面
ゲームモードをリストに載せて列挙。
このとき、api/list/gameModesを使用する。
それに伴い、このステートに遷移するためにシステムIDを要求する。
要素クリックで検索画面/詳細設定画面へ移行。
_done検索/詳細設定画面
それぞれの要素をプルダウンメニューに載せて列挙。
このとき、api/list/targets, api/list/abilities, api/list/difficultiesを使用する。
このステートに遷移するために、システムIDとモードIDを要求する。
_done計測対象検索について
_done難易度から検索
api/list/difficultiesの結果をもとに「難易度」項目のプルダウンメニューを作る。
選択すると、敵を選択するプルダウンメニューが利用可能になる。
選択した際に、api/list/targetsをid指定付きで利用し、難易度項目に含まれているidに対応する名前を取得する。
帰ってきた結果をプルダウンメニューに表示する。
_done敵を選択して検索
難易度項目のプルダウンメニューを選択すると、選択可能になる。
最初の項目は「敵全て」。このままで検索を行うと、選択した難易度に登場する全ての敵について検索を行う。
複数選択可
_done能力検索について
api/list/abilitiesの結果をもとに能力検索項目のプルダウンメニューを作る。
36種の項目から一度に選択するのはあまりにも視認性が悪いのでどうにかしたい
https://joshuajohnson.co.uk/Choices/
こんなものを見つけた。
他の項目にもうまく使えるかもしれない!
_AND/OR/AllowForOrder検索を選択させる必要がある。
ラジオボタンで選択させる。
_doneボタンを投下して、記録検索結果画面へ移動する。
_doneこれら3つの画面で展示指定条件を決定する。
うち前者ふたつは、ページに最初訪れたときに設定する。
_done作品ごとにアイコンを表示することはいったん見送り。やった
_doneICOOON MONOの利用を考える
必要なアイコンは以下の通り
走る人
リスト
時計
星
パンチ
パズル
_doneそれぞれのゲームモードに対して、スコアが何を表すかの数値のデータを構造に追加する。
_doneメインメニューについての実装
それぞれの直接利用可能なページステートを列挙する。
ステートの一つとして実装する(ブラウザバックが使えるので)
_総観の実装についての考察
開発見送り。
_doneやるとすれば、新たなAPIの機能を制定する必要がある。
入力に対して、csvの出力を返すべきだろうか。
_doneログインシステムの実装についての考察
GoogleFireBase Authを使って実装する。
ここのログインユーザー名をもとに記録投稿者名が定まる。
_done記録投稿の実装についての考察
_done記録登録画面を実装する。
記録詳細画面の画面をもとに設計する。
記録の詳細な情報の入力にプルダウンメニューを利用する。
_doneTime
テキスト形式で入力
以下の正規表現で表された形式が許可される
[0-9]{1,2}:[0-9]{1,2}.[0-9]{1,2}
例00:12.34
基本形式
他のテキストは全てこれの形式に直される。
[0-9]{1,2}:[0-9]{1,2}:[0-9]{1,2}
例00:12:34
基本形式の.を:に置換したもの。
[0-9]{1,}.[0-9]{1,2}
例 12.34
単位は秒。
[0-9]{1,2}:[0-9]{1,2}[:.][0-9]{1,2}\s*-\s*[0-9]{1,2}:[0-9]{1,2}[:.][0-9]{1,2}
例02:12.13-03:24.47
一人称さんからの要望
逆でも可。テキスト入力後計算されて正しい秒数に置き換わる。
_doneDifficulty
select要素で選択。Choices.jsを使用。
単体選択。
_doneTarget
select要素で選択。Difficultyを選択すると選択できるようになる。
単体選択。
_doneAbility
select要素で選択。複数重複選択可
_doneLink
テキスト入力
以下の正規表現で表された2形式が許可される
https://twitter.com/status/[0-9]+t(\?s=[0-9]+)?
https://youtu.be/[a-zA-Z0-9\-]+?t=[0-9]+
入力後動画を表示させる機能が欲しいけど時間との兼ね合いを考える
_doneタグ
ChoicesのInputで入力
_stop表記揺れ問題はどうする?
管理委員会にまとめてもらう
「類似表現」としてまとめる
タグとは別に類似表現コレクションをまとめる
類似表現コレクションは類似表現グループを構成するタグへの参照をもった配列
この実装は後程でも大丈夫だろう
この実装は破壊的ではないので
_done走者ノート
SimpleMDEを使って入力。
_done決定ボタンをクリックすると、記録が送信される。
_done投稿すると申請用データベースへ書き込まれる。
_done記録申請委員会の人がそこにアクセス権限を持つ。
_doneAPI(offer/admin)はログイン状態でかつ管理委員会であれば利用できる。
このような権限を要する機能を「機密API」とする。
_stopただし、管理委員会メンバーにおいてはその限りでない。
投稿するとデータベースへ直接投稿する。
_doneこのとき、Discordへ通知を行かせる。
_done問題があればすぐ修正に向かえる。
ただし、Firestoreの仕様上他のAPIの使用が出来ないので、ここは見送り。
_doneトップページに最新の記録15件を表示させたい…が
一回後回し。
_done審査委員会の人が修正,削除権限を持つ。
_done]記録修正画面の実装が必要。
_doneoffer/modify,record/modifyの機能。機密API。
記録投稿画面をベースにして作れそうだ。
初期値の設定法を学ばなくてはならない
_doneapi/record/writeを実装する。
_doneIReceivedData_recordWrite型の定義
_doneRecordDatabaseにwrite(record:IRecord)メソッドを実装する。
_done走者ページの実装についての考察
_done二種の走者ページが存在する。
_done走者全員を閲覧するのと、モードごとの走者を閲覧する機能の二つ。
_done渡された値に応じて表示の内容を変えると良い。
_stoplist/runners/short, list/runner/shortという二つの修飾子を付けて情報量の少ない通信が出来るようにしたい。
これは今後に後回し。
_doneレギュレーション登録の実装についての考察
_done]api/list/modify機密APIの実装。
専用UIを作成
Editorクラスを作って、指定したデータ型に沿ってエディタを配置することができる
_stop思ったより便利なものができたと自負しているので、これは後で公開してみたい。
適切なJSONファイルを添付させて投げさせる。
形式が間違っていればエラーを吐く。
形式が正しければ、自動的に追加される。
記録申請委員会の人が修正,削除権限を持つ。
_done 記録認証機能
_done 特殊操作欄の実装
_done 記録の削除ボタン実装
_done 記録の修正ボタン実装
_done 記録の認証機能ボタン実装
_done これらの操作がなされたとき、通知をユーザーに送信する
_doneバグ取り
_done 未承認の記録一覧
_done画面実装
_done未承認の記録を、今現在指定しているゲームモード中で検索
これ未承認の記録だけを検索する機能が必要では?
_doneヒットした記録を、一覧に掲示する。
タイトルは未承認の記録一覧で
Unverified records.
_doneカードをクリックすると記録詳細に移る。
実はデータベースのデータを一度全部ごっそり引いてきてからサーバーで選別するとかいうヤバい処理をしている
_stop大規模になった時によく考える必要がある……。
_データベースのセキュリティ設定
_基本的に全体においては、
基本的にサーバーはreadonly
サーバー以外のアクセスは許可されない
_ただし、以下の領域では特定の人のみの書き込みを許可する
ユーザー情報(編集可能領域のみ)
ユーザー本人が登録可能
っていうかユーザー名に関するものはエスケープしておいた方がよさそう
あ〜〜〜〜〜〜〜〜〜〜〜〜〜ラミィちゃんかわいい
レギュレーション情報
管理委員会(とモード管理者)のみ?
_レギュレーションの管理構造
_stop後回し。
必須ではない。規模が大きくなってから考えるべき…。
とりあえず、Verified属性だけつけておく。
今現状の問題だと、管理委員会の責任が重くなりすぎるという欠点が
ならば、それぞれのレギュレーションにおいてモード管理者を設置するべき?
モードは、それぞれ管理者を表すuidの配列を保持する。
そこに記述されているuidの人は、レギュレーションのルール操作権限を得る。
こうするとなると、また新たに申請-承認システムを作らないといけないのでは!?!?!?!
めんど!!!!!!!!!!!!!!!!!
_レギュレーションにVerified属性をつける
_レギュレーションのVerified属性が真のもののみを表示するように変更
_レギュレーションの拒否とレギュレーションの承認ができるようにしたい
_拒否
Verified属性が偽のもので、拒否することで削除することができる。
_承認
Verified属性を真にできる
これらの操作は管理委員会のみが行える。
(A) ゲームタイトルを定義する
(B) ゲームモードを定義する
(C) セグメントパック,セグメントユニット,能力を定義する
申請は誰でもできる
承認は
(A),(B),(C) 管理委員会
(B),(C) ゲームタイトル管理者
(C) ゲームモード管理者
能力属性値
_ゲームモードごとのレギュレーション実装
_ ゲームモードごとにruleを持たせる。
以下の属性を持たせる
code:typescript
interface IGameModeRule{
allowedUploaders?:MultiLanguageString,
mediaType?:MultiLanguageString,
versionOfGame?:MultiLanguageString,
aboutEmulator?:MultiLanguageString,
aboutExternalTools?:MuultiLanguageString
etc?:MultiLanguageString
}
_ ルールを構成する。
それぞれの項目について、undefinedあるいは空文字列であれば項目ごと表示せず、そうでなければmarkdownとして解釈するようにする。
TitleCapsuledを使用して項目を区切る
_編集画面の設定
_能力属性設定画面
前実装したEditorを再利用すればいいのでこれはそこまで難しくないはず
Japanese,Englishの画面を制定する
JDescription,EDescriptionの画面を制定
ここからEnumSelectorを用いて残りのフラグのデータを定める
これ新しく部品を作ることになるのでは
_ boolean[]を対象としたEditorを作る。
_いくつかToggleボタンを置くことになるか?
_能力属性値設定画面
_この画面を、能力属性設定画面から飛べるようにする
_Japanese,Englishの画面を制定する
_JDescription,EDescriptionの画面を制定
_ゲームモードごとのレギュレーション実装
これはそれぞれのありうるルールに対してテキストボックスをおいてやればいい
_二つの設定画面をゲームモード編集画面の選択肢においておく。
_カービィ(能力あり)を能力制限なしに書き換える。
重要度 低
_データの送受信をする際にキー名が長すぎて通信量がかさむ問題
サーバー側でキーを更に短い文字列に置き換えて、クライアント側へ送る。
クライアント側でそのキーをjson文字列ごと置換してオブジェクトとして処理する…というのはあり。
ただし、意図しない文字列置換が発生しかねないので、この更に短い文字列は、使用頻度が低い文字列の並びをプレフィックスとして置く必要がありそう
gzipというjsonを圧縮して送受信する方法があるらしい!
役に立ちそうなので書留。