リフレクツール進捗報告

この記事は、OUCC Advent Calendar 2015 - Adventarの14日目の記事です。

昨日はすしす (@susisu2413)氏によるHow to 言語実装 - Object.create(null)でした。つよそう。

 

Adventarに突っ込んだはいいけどブログなかったので今日作りました。

キャンウェなくなったせいですべてのやる気が消滅してしまったほうのwenaです。部室にゲーセンを作ろう。

 

本題。

私はリフレクとかいうホッケーのエンジョイ勢であることはご存じなのではないかと思います。知らない人は覚えなくても大丈夫です。リフレクは覚えて帰ってね。

そのリフレクが、10月28日にコンバージョンしました。

バージョンアップは喜ぶべきことなわけなんですが。

………なんで前作まであったソートがなくなってるんですかね?

 

なんで全部あいうえお順ソートなんですかねぇ……。

元から公式サイトのスコア閲覧がゴミなのは知ってましたが、筐体までゴミになりました。誰がハードのスコアを昇順ソートして喜ぶんだアレ?

 

使いづらい。

 

ならスコアツールを作るしかないわけです。

まだ誰もVOLZZAのツール作ってないし。ググったけどまだなさそう?

ということでどのぐらいできたか進捗報告します。14日にはできてると思ってたのは秘密

 

どんなのになるのか

REFLEC BEAT Score Tool ver.Groovin'!!これを大変参考にしています。

 

ユーザーのするべきことは、

  1. ユーザー登録をする。(更新などができるようにするため)
  2. 公式からhtmlファイルダウンロードしてきてアップロードする(ブックマークレットとかに変えれたらいいなぁ)

ユーザーに提供する機能は、

  • ユーザーごとに、スコアデータを自由に絞り込み、ソートして閲覧できるページ

みたいな感じ。

 

ということで、必要なのは

  1. ユーザー登録・ログイン ←phpで書いた
  2. htmlファイルをパースして鯖に送信 ←jsで書いた
  3. 鯖で受け取ってデータベースに格納 ←phpで書いてる
  4. 鯖でデータベースから曲データ取り出して送信 ←phpで書くつもり
  5. 鯖から受け取って表示 ←jsでだいたい書いた

って感じかなって。

ちなみにjsとphpはどちらも未経験です。

どんな感じで作ったかと詰まったとこを適当に載せていきます。

そのうちGitHubかなにかにソースごと載せるんじゃね?

デザインとかも後で考える、ロジック先にやる、そしてロジックで満足してろくにデザインやらない、お約束ですね。

 

1.ユーザー登録・ログイン

replication.hatenablog.com

これをパクリ参考にして作りました。

会員登録もなんかそんなかんじのノリで作りました。

あんまり詰まらなかった。

f:id:wena0715:20151214134306p:plain

2.htmlファイルをパースして鯖に送信

inputタグのtype属性にfileを指定します。

multiple属性つけると一度にアップロードしてもらえるようになってお手軽。HTML5世代でないやつは切り捨て。

そして上げてもらったファイルを文字列として読み込み。DOMParserなるオブジェクトがDOMオブジェクトに変換してくれます。

あとはDOMオブジェクト掘り下げていったら目当てのデータが眠ってるって寸法です。

曲と曲ID(連番で勝手につけた)が書いてあるcsvがサーバーにあるので、それを参照して曲IDに変換して配列に。

それをJSONにしてPOSTで鯖に送ります。Ajax便利ですね。

詰まったところ

f:id:wena0715:20151214142500p:plain

公式サイトではこんな感じで楽曲データが渡されます。

これの問題になるところは、

  • フルコンするとミス数のところに文字情報が表示されず、画像になる
  • プレイしていない譜面とプレイ済みの譜面で表示する画像の数などが違う
  • クリアできなかった場合、CLEARのところには何も書かれない
  • 普通譜面とリニューアル譜面の曲名が同じである

前者3つはchildNodesの数とかTextContentの中身とかで見分けつきます。

問題はリニューアル譜面です。

手元にあるレベルとか曲につけたIDとかと公式データは、曲名を軸に紐づけています。ということは、見分けつかないリニューアル譜面は勘弁願いたいということです。

 

結局、ジャケットの画像URLを手元に置いておいて、リニューアル譜面のURLが来たら(RENEWAL)って曲名に付けることにしました。なので、未対応のリニューアル譜面は悲しいことになります。アプデについて行くの大変ね。

 

あと、手元にある曲データはBEMANIWiki 2ndからExcelのWebクエリでごそっといただいてきたやつなんですが、まあもちろん曲名は公式サイトと若干違うわけで。半角スペースか全角スペースかとか「~」か「~」かみたいな。

手作業で書き替えました。疲れた……。

 

3.鯖で受け取ってデータベースに格納

今書いてます。

ほとんどjsで整形しちゃったのでマジでMySQLでぶっこむだけです。

セキュリティ面が気になる感じ。

 

4.鯖でデータベースから曲データ取り出して送信

書きます。

MySQLさんから登録したやつをユーザーID的なものを頼りにselectして、配列にして、JSONにして、だばぁすればおkやろ。

 

5.鯖から受け取って表示

鯖から受け取るとこはまだ書いてないです。

表示部は、なんかよさげなソートとかできる表ないかなーと調べたところ、

DataTables | Table plug-in for jQueryよさげなやつを見つけました。

テーブルを指定するだけでソート機能や検索機能を付加してくれるナイスなjQueryプラグインです。

f:id:wena0715:20151214151019p:plain

こんな感じの表がワンタッチでできるのは控えめに申し上げて神。

列ごとに検索する関数なんかも用意されてるので、絞り込みも簡単だしページ遷移も必要ないわけです。正規表現も使えます。

jQueryと楽しいプラグインたちは使い始めたら帰れない気がする。

 

言いたいこと

Webアプリ製作つらい楽しい。

 

明日ははやしくんさん (@tree0_0tree) 氏の「悪魔の開発をするぞ」らしいですよ。

あくま…?