を、一度に勉強すると頭が沸騰するがどれも連動してるし一度にやるしかない(池沼)
かつ、プロジェクトというほどお恐れたものではない。
第2通常難易度表:難易度表導入支援ツール(難易度表管理者様向け資料)
これのデータ部Jsonファイルをbmsファイルから自動で作りたかったので制作を決意。javascriptとかjQueryとか使えばいいんだなぁってのはなんとなくわかっていたんですけど、まあ色々参考にしすぎたので一度メモ。
とりあえず上記定義見ていただいたら分かると思いますが、必須項目が表示用levelとmd5(LR2IRのURL GETパラメータbmsmd5と連動させるため)なので最低限それにくわえてtitleくらいは自動で入れるようにすることにします。
- HTMLとかjavascript基本動作関連
HTMLに動的にdivや文字列、input form、textareaなどを追加する方法 - ゆっくり備忘録
動的にinputとか追加するにはajax使うしかないみたいなのでjavascriptのみでやる場合の参考資料。jQueryはappendっていうもっと便利なものが有りますよ~というのに気づくのはまた後の話。
とにかくこれみてればだいたい解決しました 少し理解に時間かかったのはeachの挙動とfindやvalといった関数(ただ仕様書を読んでないだけ)ですね まあなんかまだ良くわかってないけど、とりあえず自分なりに納得しました
jQueryで多数の要素を生成して追加する場合のパフォーマンスについて | かたつむりくんのWWW
もっと便利なappendの話です
jQueryでthisの子要素を取得するやり方いろいろ | Base Views
findの話です
複合的
jQueryでJSONをPOSTしてJSONのレスポンスを受け取る - ブログ - ワルブリックス株式会社
jsonをpostして非同期通信でなんかする話。
今回受信先の処理はphpにしました
JqueryからPHPへJSONを渡すには - Hope is a Dream. Dream is a Hope.
ほぼ一個上の奴と同じ。いろんな記事を参考にしたというだけで、多分こっちのほうがわかりやすい かも知れん
location.href(リンク)-JavaScript入門
上記方法で値を受けたあとsuccessにlocation.hrefでDL用のphpに遷移させることでDLを実装! したけど多分やめます。理由は後で
json形式でファイルを読み書きする - 遙か彼方の彼方まで
サーバ上にjsonを一時保存した後それをDLする処理を書くためにわざわざlocation.hrefを利用するためにphpを1枚書いた(多分この処理は消える)
HTML5 の File API でローカルファイルを扱ってみる | webOpixel
HTML5のFileAPIがアップロードをせずにいろいろ扱えるらしいということで、導入のため見たページ。 うーんすごいなぁHTML5
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
上と同じ感じ。こっちのほうがわかりやすい。 jQuery + FileAPIの話です。
HTML5でファイルをドロップする際に画面全体にオーバーレイを表示する方法 - Qiita
D&Dを画面全体対応にしたかったから見たんだけど、半分くらい上手くいったところで辞めました(結局bodyにid属性をつけて対応 これ多分ダメな気がするけどchromeでは動いてるしいいかな)
- ほかライブラリ
md5.js (mitsunari@cybozu labs)
md5の計算に使いました bmsファイルをFileAPIで読み込んでreadAsTextをエンコードするとLR2IRで使ってるものと同値のmd5hexが得られる。
UTF16ではなくLR2はアスキーでエンコードが正しい。(一応確認済)
で、完成したやつがこれ。
http://fdscaa.rosx.net/bmstable/_maker/
jsもjqueryもajaxもはじめて書いたのでメッチャ疲れました
以下メモ
TODO:
・jsonファイルを読み込めるようにする(現在アウトプットのみ)
・見た目なんとかする(bootstrap使おうかな!)
・他の値も入力できるようにする(コメントとか差分URLとか)
・LR2IRと整合性の確認を取る(多分いらない)
・バグ修正(あるかしらんので各位テストよろ)
・スパゲッティコード修正(多分)
todoがだいたい終わったらやるかも
・差分アップローダつくる(アップロードと同時に統一表へ登録もする!)
・統一表用の規格を考える(データ部jsonの拡張?)
・同じ曲の差分を一気に集めたいからそういうDBをつくりたい
うーん面白かったし寝るかまた明日