BETA

アイドルマスターシンデレラガールズ 6th ナゴヤドーム公演物販の合計額が気になったのでConsoleから計算してみた

投稿日:2018-11-17
最終更新:2018-11-17

経緯

アイドルマスターシンデレラガールズ というコンテンツに何年も入り浸っているのですが、
その中の人(演者さん)達のLIVEが、近く愛知のナゴヤドームで行われます
(先日は西武(埼玉県)のメットライフドームで行われていました)

なんとなくネットの知人たちと、その物販ページをネタに話し込んでいたのですが
グッズめっちゃありますよね、これ全種類買ったらいくらになるんだろう?
と気になったので、これを計算するjavascriptを組んでみた、というお話です。

↓こちらが、その物販ページ
物販情報│THE [email protected] CINDERELLA GIRLS 6thLIVE
(公演後、暫く経てば無効なリンクになったり、中身が書き換わるかもしれません、その時はごめんなさい)

webデベロッパーさんには恐らくお馴染み?の、F12キーからDevToolsを呼び出したり、
ページ上右クリックからの「要素を検証」といった機能で、ページを構成しているDOMを眺めたりしていました。

価格が含まれている箇所に共通性を見出せそうだったので、その箇所の情報を回収し、
ループ的な処理で数値を加算させていけば良さそうです

書いたコード

{
    let _nodes = document.querySelectorAll("div.goodslist");
    let _sum = 0;
    [..._nodes].forEach(_e=>{
        let _caption = _e.querySelector("caption").textContent;
        let _tds = _e.querySelectorAll("tr > td:nth-of-type(2)");
        console.log("------"+_caption+"----------------");
        [..._tds].forEach(_n=>{
            let _itemName = _n.parentNode.children[0].textContent;
            let _value = _n.textContent.replace(",","").replace(/\xa5/,"");
            let _addVal = parseInt(_value,10);
            console.log(_sum , "+" , _addVal ,_itemName);
            _sum += _addVal;
        });
    });
    console.log("合計" , _sum);
}

実際に、F12キーで出せるDevToolのConsoleに張り付けて実行すると以下のような感じになります

計算によると、この時点で回収したページ上のグッズ総額は

538,750円

だそうです...Σ(´ ` ) すっご!

他のライブ公演現場はどんな感じなのか分からないですが、いやぁ、なかなか驚きました。
最初見たときは「えっ?処理重複してない?」と思ってしまうくらいに..

かなりテキトーな人間なので、書いたスクリプトに不安が残り、
後付けでキャプションや品目を一緒に表示させる処理も加えています。
(最初は価格数字だけ計算表示させていた)

何故か苦戦してしまった所とその考察メモ

DevToolsのconsole上で直接スクリプトを書いていたのですが、

価格情報が "\5,000" のようになっていました。

数値だけ上手い事取りたかったので、カンマ記号 および 半角円記号の2つを
replace() という処理で除去したかったのですが、なぜかうまく行かず。
エスケープ処理必要だったっけ..?と思いながら/\\/と打ったり苦戦しても何故か思った通りにならない。

「おっかしいな~~」と思って、ページから \ の文字列をコピペしてコードに張り付けると、
ちゃんと \ でソースコード上に反映されていました

\ を DevTool上で打ち込もうとすると バックスラッシュで表示されます。

ん~~~? と思って色々調べてみると 物販ページの半角 \ 記号、なにかが違う..

知識的にあんまり深く掘り下げられませんが、色々調べてみたところ 文字コード的に違いがあったようです。

/*
いつもキーボードで打つ方。
環境によっては半角の¥だったりバックスラッシュで表示されたりする。
*/
String.fromCharCode(92); // "/" ←が出力される

/*
webページ上で半角¥記号として表示するために変換された文字を示すためのコード
場所によっては見た目はしっかり半角の¥マークとなる
色々すっぽ抜けてると、バックスラッシュとは別物である事を忘れてしまう(自爆)
*/
String.fromCharCode(165); // (半角の)"¥"が出力される

そういえば、webページ上では一部特殊文字を表現するのに、
ひと処理咬ませてナンボみたいなところがありましたっけかね...すっかり抜け落ちていました

半角の ¥ で表現させる半角円マークがこれに相当します

replaceの箇所、こうすればコピペ以外でも通せました。

"対象文字列".replace(/\xa5/,"");

参考:developer.mozilla.org MDN - JavasScript 正規表現

文字コード165を 16進数である 0xA5 にしたものですね。
正規表現にて、特定の文字を一定ルールに従ってコード番号で示せる手法を用いて、
ページ上で(変換されたうえで)表示されている半角の 記号を、ピンポイントで狙い撃ちにしました

これで無事、数字だけ取れました (n´∀`)n
あとはparseIntを使って、数値におこしたあと、加算させていくーみたいな感じですね。
( いろいろ端折ってる )

まとめ

538,750円 ...いやぁ凄い総額でしたね。
ウワサによると、全部買っていく猛者もいるらしいです。

このページを見ている、現地 or LV勢のデレPさんが居たら、是非楽しんできてください!

あっ、ちなみに自分は高森藍子推し担当で、 藤原肇ちゃんと五十嵐響子ちゃんが好きです。

デレマスはいいぞ

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

ひげさんのチラ裏だったりカンニングペーパーだったり学習ノートだったりする所です。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!