D&B Part1『脱出』技術的なメモ
制作ノートでは軽く触れただけのデータ送受信について、忘れないように記録を残しておく。
データ送受信
今までの作品はJavascriptのみで作られていた。つまりクライアント側のみで動作するプログラムであり、サーバーにデータを送信したり、サーバーからデータを受信したりする処理は無かった。
今回、タイムアタックをゲーム性のメインに持ってきたかったので、タイムスコアをサーバーに送信して蓄積し、ランキングを受信して表示する事が必要になった。
真面目にサーバー環境を構築するという選択肢もあったのだが、試しにGoogleスプレッドシートにデータを送信して蓄積し、Googleスプレッドシート側でランキング集計用シートを作成し、受診時はシートの内容を取得するだけというシンプルな構成を作ってみた。
GoogleスプレッドシートにはQUERY関数というデータベースを操作するSQLのSELECT文のような関数が存在するので、集計用のシートを作成してランキングデータを表示するのは実に簡単だった。
データ蓄積用のシートをQUERY関数で参照するだけでランキング集計済みのシートが出来上がるのでApps Scriptでシートを取得して戻せばJavascript側で簡単に表示できる。
しかし、実は実装に苦労した。
Javascriptはブラウザのコンソールを見ていればエラーの原因がわかるのだけど、Apps Scirpt側でのエラーはコンソール上ではわからないのでブラックボックスのようになってしまう。
まぁこれはPostmanを利用することでAPI（Apps Scirpt）側のエラーがわかるようになって解決したのだけど、気づくまではけっこう大変だった。
（ブラウザのコンソールではApps Scirpt側のエラーは全てCORSエラーとして表示される。しかし、実際は返答がないだけでCORSエラーではない。ChatGPTやGeminiにエラーを分析させてもてんで見当違いな改善策が提示されるが、それはCORSエラーを改善しようとする内容だからであり、実際にはCORSエラーではないのだから解決しないのは当然であった）
それと、今回タイムスコアの送信とランキングの受信のみなので大きな問題は発生していないけども、Apps Scirptからスプレッドシートへのアクセスにはタイムラグが結構ある。
これはデータ量が極わずかでも必ず2,3秒待たされるので、リアルタイム性が必要な情報のやり取りには向かない。
このタイムラグが気になって、スプレッドシートではなく、Googleドライブにcsvを出力したり、csvを読み取って配列に取り込む処理に作り変えようかと検証も行ったが、csvの操作に切り替えても同様にタイムラグは発生した。むしろcsvの方が動作が遅いように思えたのでスプレッドシートに記録する仕様のままとした。
応答の遅さやデータ量の制限があるのでスプレッドシートとApps Scirptでのサーバー環境構築を利用するべき状況は限られるだろう。
一方、メリットとしては
- サーバー環境の構築が不要
- Apps ScirptはJavascriptなので学習コストがほぼ無い
- スプレッドシートには便利なQUERY関数があり集計が容易
- スプレッドシートは誰でも簡単に操作でき、視覚的に確認が出来る
- 無料
コメント
コメントを投稿