これは プリッカソン Advent Calendar 2018 の19日目の記事です．
今回は，キラッとプリチャンの筐体が置いてあるお店をプログラマブルな状態で取得するためのアレコレを書いていく． また，今回紹介するアプローチにおいては公式に迷惑をかけないよう限度をわきまえた行動をする必要がある．
その点を抑えた上で，Web上における情報の管理について考える機会としたく，この記事を執筆していこうと思う． また，プログラマでない方にもわかりやすいように適宜解説を入れつつ進めていくものとする．
「あそべるお店」ページの存在
公式で，「あそべるお店」というページが提供されている．
ここでは「都道府県表示」や「キーワード検索」といった方法でお店を調べることが可能である．
このページが提供されているということは
- 店の情報がHTML上に記述されている
- JavaScriptを用いてどこかのサーバにある情報をロードして表示している
の２点が濃厚である．
前者であれば，HTMLから情報を抜き出す スクレイピング という方法で情報を抜き出すことができる． 後者であれば，どこからその情報をロードしているのかを調査し，その情報を適切に取得する方法を模索する必要がある．
HTML内にある情報の調査
「店の情報がHTML上に記述されている」という仮説について，先に検証する．
まずは，東京のページを調べる．
https://prichan.jp/shop/prefecture.html?pcode=13
表示すると，表によって東京の店一覧が表示されている． 東京の店の１つ目は 「イトーヨーカドーセブンホームセンター金町」とある． この文言がHTML内に記述されていればこの仮説は正しいことになる．
Google ChromeでHTMLのソースを調べるためには，ページ上で右クリックしページのソースを表示を選択する．
そうすることでHTMLが表示されるため，今度は 「Ctrl+F」を押す．そうすることでそのページ内を検索できるため「イトーヨーカドーセブンホームセンター金町」と入力しエンターキーを押す．
おや？HTML内の検索には１件もヒットしなかった． つまり，この仮説は間違いであることが分かった．
JSによる情報のロードを調査
次に「JavaScriptを用いてどこかのサーバにある情報をロードして表示している」という仮説について検証する．
Webページは，様々な通信を行うことで表示されている．(表示後に通信を行うものもある)(表示がどういう動作を指すかにもよるが...) それを実感するために，まずはそのすべての通信を一度確認してみよう．
右クリックによって表示されるメニューより「検証」を選択することで，デベロッパー用の画面を表示することができる．
次に，「Netowork」を選択する
その状態で，そのWebページを一度「再読み込み」してみてほしい．つまりはF5である．
するとどうだろうか，様々な情報が「Network」画面内に表示されているはずだ．例えば，「HTMLの読み込み」「フォントの読み込み」「画像の読み込み」でどのような通信がされているか表示されている．これで，そのWebページを表示するにあたってどのような通信がされているか監視できるわけだ．
この中で「JavaScriptから読み込んでいる」「店一覧の情報」を取り出したい． そこで，「JavaScriptから読み込んでいる」といったものに注目したい．
Javascriptによる情報のロードには主に「XHR」といった方式が用いられる． そこで，XHRの通信のみを表示するために，「XHR」を選択する．
するとどうだろうか，その中にとてつもなく怪しい名前の通信が確認できる．
その怪しい行を右クリックし，「Open in new tab」を選択する．そうすることで，そこで読み込まれているファイルを開くことができる．
開くとそこには...
ファイル格闘編
と，いわゆる文字化けが発生している
とりあえずはこいつを一度保存する． 「Ctrl+S」をすることで，それをファイルとして保存することができるはずだ．
さて，このファイルの中身を読むためには，正しい文字コードを認識して開く必要がある．(ここでプログラマなら「ShiftJISかな」となるわけだが)
ここからはOSによって操作が異なる．Windowsならメモ帳，MACならテキストエディットといったアプリケーションからこのファイルを開くことで無事にその中身を確認することができる．
文字化け無く正しく表示できたら，正しく表示できたものを一度コピーして，以下のページ内の「整形前」に貼り付ける．
このページは，貼られた文字が「JSON」というフォーマットであるかチェックを行い，そうであれば情報を表示する，といったものである． 貼り付けると，ページ下部に以下のように表示されるはずである
この結果が表示されたということは，この情報がJSONというフォーマットで表示されているということだ．
JSONは，データを入れ子にして表現することが可能である． 例えば，上記画像の例では
{内の行があり- 1つ右にずれて
sList : [という行があり - また1つ右にずれて
0 : {という行があり name:"イトーヨーカドー..."という行とaddress:"東京都..."という行がある
これは「データ全体({)の中に，sListというデータがあり，その中の 0 というデータの中に name と address というデータがセットで入っている」という意味である．
このように，JSONというフォーマットは プログラムから扱いやすいようにデータを入れ子構造で表現するといったものだ．
逆に言うと，我々もこのデータをプログラムから使えるというわけだ． このファイルを取得したことで，今回の「キラッとプリチャンの筐体が置いてあるお店をプログラマブルな状態で取得する」といった目的は達成されたわけだ．
使用上の注意
今回のファイルは https://prichan.jp/shop/data/pref13.js というURLで公開されている．
そのため，例えば私が作ったWebサイトからもそのそのファイルを利用することが可能である．
しかし，そういった利用は避けるべきである． これは，公式のWebサーバへのアクセス負荷が懸念されるためである．
例えば，私が「 https://prichan.jp/shop/data/pref13.js へ直接アクセスして公式ページより見やすい情報を提供するページ」を作成するとする．これにより，私の作ったWebページが大量に閲覧されたらどうだろう．もちろん https://prichan.jp/shop/data/pref13.js へも大量にアクセスがされるため，公式が想定している以上の負荷がWebサーバにかかってしまい最悪の場合サーバがダウン，公式のすべてのページが表示されなくなってしまう可能性もあり得るわけだ．
大げさに言ったが，このような事態を想定した上で正しい情報利用を心がける必要がある．
まとめ
以上が，キラッとプリチャンの筐体が置いてあるお店をプログラマブルな状態で取得するためのアレコレである．
今回この記事を見てもらう上で
- Webサイトの解析はハードルが低い
- そのため，情報を隠すことは難しい
- これらを踏まえて，利用者のマナーに委ねられている
といったことを知ってもらえれば幸いである．
また，Web上での様々な技術について，少しでも興味を持っていただけたのであれば幸いである． 例えば，JSONについて「（JSONという）気味の悪い拡張子」「聞いたことのないファイル」などと表現することはナンセンスであることがわかってもらえればと思う．
加えると，こういったことに興味を持つことは，自分の身を守ることにつながっていく． プログラマのように扱う必要はないが，最低限知っておくことによるメリットは計り知れない．
以上．
