スマホブラウザ版ピグでペットが登場の記事が結構読まれたようで、
この記事ではあまりにも技術的すぎると思い、解析している画面等は省いていました。
どうやって解析していくのかを知りたい、というご要望が少なからずあるかなと思い、ちょっと書いていこうかと思います。
使うのはGoogle Chromeです。
って、ブラウザで解析出来るの？
と思われるかもしれませんが、chromeにはインスペクターという機能が備わっています。
別にchromeに限った話しではなく、メジャーなブラウザには同様の機能が備わっているかと思います。
パソコンのchromeからインスペクターを起動し、スマホブラウザ版ピグにアクセスします。
インスペクターの起動は、Ctrl + Shift + J です。
スマホブラウザ版のピグのURLは、
https://s.pigg.ameba.jp/
Image may be NSFW.
Clik here to view.
HTMLの階層を掘り下げていくと、ペットの画像が見つかります。
ここでのペットの画像ファイルは、
https://stat.piggimg.ameba.jp/pigg/sp/pet/thumb/360/
配下に、ペット毎のフォルダがあって、そこの下にpng形式のファイルが格納されているようです。
この画像に対して、リンクが貼られているわけではないので、このペットの画像から何かをするというような設計にはなっていません。
続いて、ピグミーを連れているお友達のお部屋にお邪魔してみます。
Image may be NSFW.
Clik here to view.
ピグミーが見えます。
みんなが期待したのは、ピグミー同様に、ペットも表示されることだったのではないでしょうか？
そのペットをタップすることで、他人のペットでもごはんをあげられるようになるのを期待したのではないでしょうか？
ピグミーもペットも表示させるとなると、表示させる場所を考えないとならないですね。
続いて、自分のペット一覧です。
Image may be NSFW.
Clik here to view.
ここでも、当然ですが、ペットの画像が見つかります。
ただし、先のピグの部屋とはURLやファイル名が異なります。
https://pet.pigg.ameba.jp/_nuxt/img/
配下に、16進数7桁の数値のpng形式のファイル名のようです。
親の親の親がa（アンカー）タグですので、リンクが貼られているということですね。
続いて、ペットショップです。
Image may be NSFW.
Clik here to view.
ペット一覧と同様のネーミングルールのようですね。
最後に、自分のペット一覧からのペットの画面です。
Image may be NSFW.
Clik here to view.
ｃanvasタグに描かれていることが判明します。
ピグやペットを動かすわけですから、HTML5を使うというのは容易に想像出来ますね。
ざっと、こんな感じでHTMLを解析していくことが、誰にでも出来るということです。
まぁ、やる、やらないは別ですけどね。
さて、こんな解析をしていたら、とあることに気がついてしまったんです。
まぁ、それは別の記事にしましょうかね。
ではでは
↧
HTMLってどうやって解析するの？
↧