今回はPCのブラウザで携帯サイトを表示させて、それをキャプチャとして画像に保存する方法をご紹介します。
OSやブラウザで様々な方法があるのですが、今回はOSはWindows、ブラウザはFireFoxという環境で進めていきます。
PCでアクセス出来る携帯サイトとは？
携帯サイトによってはアクセス元のIPアドレスを判別し、キャリアからのアクセスのみ許可する事でセキュリティを高めている場合がありますが、今回ご紹介する方法ではそういったサイトへはアクセス出来ませんので、予めご了承ください。
では、どういったサイトであれば可能なのかというと、「アクセス制限を行っていない携帯サイト」「ユーザーエージェントで判別している携帯サイト」が対象になります。「アクセス制限を行っていない携帯サイト」は特に何もしなくてもURLを入力すればアクセス出来ますので、以降は「ユーザーエージェントで判別している携帯サイト」にアクセスする方法をご紹介していきます。
ユーザーエージェントを偽装する
PCでも携帯でも(検索エンジンのクローラーでも)、サイトにアクセスする際には「自分がなにものであるか」という情報を公開しています。それがユーザーエージェントです。PHPだと「$_SERVER[‘HTTP_USER_AGENT’]」として取得出来ます。このユーザーエージェント情報を元に、何らかの処理を行うというのが、ユーザーエージェントによるアクセス制御の基本的な考え方です。
今回ご紹介する方法は、PCブラウザのユーザーエージェントを携帯端末のものに偽装し、サイト側で携帯からのアクセスとして処理してもらう方法です。FireFoxでは便利なアドオンが多数ありますので、実現させるのは比較的容易です。
FireMobileSimulatorのインストール
ユーザーエージェントを偽装するアドオンはUser Agent Switcher :: Firefox Add-onsなど、いくつかありますが、今回はFireMobileSimulatorを利用します。「FireMobileSimulator」はユーザーエージェントの偽装のみでなく、位置情報や端末固有IDの送信も可能という高機能な携帯ブラウザのシミュレーターです。インストールは下記のURLへアクセスしダウンロードページのリンクをクリックするだけです。信頼するかの質問にYESと答えた後、FireFoxを再起動すればインストール完了です。
【FireMobileSimulator公式サイト】⇒ http://firemobilesimulator.org/
Screengrab!のインストール
これまでの手順で携帯サイトを表示できる様になりましたので、次は表示されている内容をキャプチャ出来るアドオン、Screengrab!をインストールしましょう。Windows標準の「PrtSc」ボタンを利用しても良いのですが「スクロールしないと表示出来ない部分も含めて全体をキャプチャできる」「短径選択が出来る」とScreengrab!の方が優れている面が多いと思いますので私は導入をお勧めします。インストールは例によって、下記URLのリンクをクリックするだけです。
【Screengrab! :: Firefox Add-ons】⇒ https://addons.mozilla.org/ja/firefox/addon/1146
アドオンを有効にすると右下にアイコンが出ます。アイコンをクリックするとメニューが出現しますので、キャプチャを画像として保存したい際は「Save」を、クリップボードにコピーして他のツールにペーストしたい場合は「Copy」を、後の選択肢は下記のとおりとなっています。
- Complete Page/Frame：スクロールしないと表示出来ない部分も含めて全体をキャプチャ
- Visible portion：現在ブラウザで表示されている領域のみキャプチャ
- Selection：マウスで矩形選択した領域をキャプチャ
