どうも、まさとらん（@0310lan）です。
今回は、Webページのキャプチャ画像が取得できるサービス「Page2Images」の提供しているAPIを使ったデモアプリの作り方をご紹介します！
これをマスターすれば、PCやスマホなどの「表示チェックツール」が簡単に作れたり、画像付きでWebサイトをキュレーションするサービスなど、ユニークなWeb開発が実現できるようになるでしょう。
応用範囲がとても広い「API」なので、ぜひ参考にしてみてください！
■「Page2Images」とは？
まずは、「Page2Images」がどのようなサービスなのかを、実際に使いながら確認してみましょう！
サイトにアクセスし、「キャプチャ画像」を取得したいWebページのURLを入力します。
試しに「Bing」のURLを入力し、「GO」ボタンをクリックしてみましょう！
しばらく待つと、以下のように「キャプチャ画像」を取得することができます。
さらに、設定画面からスマホやタブレットなどのデバイス指定や、画像サイズなどを細かく調整することもできます。
このように、「Page2Images」を利用すると、簡単に好きなWebページの「キャプチャ画像」を手に入れることが出来るわけです。
ただし、当然ながら画像を取得するには、「Page2Images」にアクセスして利用しなければならないわけですが、ほぼ同等の機能を持ったAPIを提供してくれているのが最大の特徴なのです！
つまり、専用のAPIを使ってプログラミングすることで、「Page2Images」のようなサービスを自分で作ることもできるし、既存のWebサービスへ「キャプチャ画像」を取得する機能を組み込むことができるようになるわけです！
■「APIキー」を取得しよう！
それでは、早速「Page2Images」のAPIを使ったプログラミング方法を解説していきたいと思います！
まずは、専用APIを利用するにあたり、必ず必要となる「APIキー」の取得方法からご紹介いたします。
無料のユーザー登録を済ませ、管理画面から「API KEY」の項目を選択すると以下のような画面が表示されます。
この画面では、すでに必要となる「APIキー」が表示されています。
例えば、画面中央に表示されているのが「localhost」のAPIキーとなっています。
ローカル環境で開発を進める場合は、この「APIキー」を使えば問題ありません。
注意しなければいけないのは、環境が変わった時…。
例えば、オンラインエディタの「CodePen」で、このAPIを利用したければ「REQUIRE A NEW KEY」ボタンでドメインを追加する必要があります。
上記のように、ドメイン部分のみを抜き出して追加すればOK！（CodePenの場合は、「*.codepen.io」になります…）
新しい「APIキー」が自動で発行されるので、「CodePen」で開発する場合はこのキーを使えば良いというわけですね。
■必要なファイルを準備する！
今回作る「サンプルデモ」に必要なファイルを準備しましょう！
用意するのは、「HTMLファイル」と「JavaScriptファイル」の2つだけなので簡単です。
「HTMLファイル」は、画像キャプチャを表示するための「img」要素と、ボタンを設置しています。
<!-- index.html --> <!doctype html> <html> <head> <meta charset="utf-8" /> <title>サンプルデモ</title> </head> <body> <img id="demo" src="" /> <button id="btn">実行</button> <script src="app.js"></script> </body> </html>
「img」要素は、適当な「ID名」を付け、「src属性」は空にしておきましょう。
ちなみに、JavaScriptで「img」要素を生成しても問題ありませんが、今回は簡単にするために最初からHTMLに「img」要素を設置しています。
あとは、「button」要素をクリックすることで、「キャプチャ画像」の取得を開始するようにしてみたいと思います。
「JavaScirptファイル」は、ひとまず「button」要素がクリックされた時に、何らかの処理ができるように書いておけば良いでしょう。
// app.js var btn = document.getElementById('btn'); btn.addEventListener(‘click’, function() { // ボタンがクリックされた時の処理 });
これで、「index.html」と「app.js」という2つのファイルが出来ました。
以降は、index.htmlファイルをブラウザで開いて、確認しながら進めていくようにしましょう！
■「キャプチャ画像」を取得してみよう！
ここからは、どのようにプログラミングして「キャプチャ画像」を取得するのかをご紹介していきます！
と言っても、仕組みは非常にシンプルで、まずは以下の「専用URL」を覚えればOKです！
http://api.page2images.com/directlink?p2i_url=【➀WebページのURL】&p2i_key=【➁APIキー】&p2i_device=【➂デバイス番号】
ポイントは3つあります。
➀は、キャプチャ画像を取得したいWebページのURL
➁は、冒頭で取得した「APIキー」
➂は、PC・スマホ・タブレット…など、デバイスを指定する番号(0〜6)
この3つを記載した「専用URL」を、「img」要素の「src属性」に設定することで、簡単に「キャプチャ画像」が取得できるようになっているのです。
試しに、「Yahoo」のWebページを使い、スマホの「キャプチャ画像」を取得してみたいと思います。
先ほど作った「app.js」に、「専用URL」を記載したクリックイベントを作ってみましょう！
// app.js var btn = document.getElementById('btn'); // HTMLファイルに記載した「img」要素を取得 var img = document.getElementById(‘demo’); btn.addEventListener(‘click’, function() { // Yahooのサイトをスマホのキャプチャ画像として取得 img.src = "http://api.page2images.com/directlink?p2i_url=http://www.yahoo.co.jp&p2i_key=33v9*********&p2i_device=1"; });
これで、「button」要素をクリックすると、「img」要素の「src属性」に自分のAPIキーを含めた専用URLが付与されて、自動的に「キャプチャ画像」が取得できます！
スマホのデバイス番号に「1」を設定することで、「iPhone5」に最適化されたスマホのキャプチャ画像を取得できます。（参考ドキュメント）
たったこれだけで、好きなWebページの「キャプチャ画像」をゲットできるのは驚きですね！（無料プランの場合は、画像を取得するまでに少し時間が掛かるように設定されていますが、これは有料プランにすると一瞬で取得できるようになります…）
■複数のデバイスを指定してみる！
せっかくなので、PCやタブレットの「キャプチャ画像」も取得してみましょう！
方法はもうお分かりのように、タブレットは「4」、PCは「6」というデバイス番号を設定すればOKなのですが、「img」要素を複数作ることで同時にさまざまなデバイスの「キャプチャ画像」を取得することも可能です。
例えば、「index.html」にPC・タブレット・スマホ用の「img」要素を追加してみます。
<!-- index.html --> <body> <button id="btn">実行</button> <img id="mobile" src="" /> <img id="tablet" src="" /> <img id="pc" src="" /> <script src="app.js"></script> </body>
そして、「app.js」にはそれぞれの「img」要素を取得し、3つ分の専用URLを記載することで同時取得が可能になります。
// app.js var mobile = document.getElementById('mobile'); var tablet = document.getElementById('tablet'); var pc = document.getElementById('pc'); var btn = document.getElementById('btn'); btn.addEventListener('click', function() { // スマホの「キャプチャ画像」を取得 mobile.src = "http://api.page2images.com/directlink?p2i_url=http://www.yahoo.co.jp&p2i_key=33v9*******&p2i_device=1"; // タブレットの「キャプチャ画像」を取得 tablet.src = "http://api.page2images.com/directlink?p2i_url=http://www.yahoo.co.jp&p2i_key=33v9*******&p2i_device=4"; // PCの「キャプチャ画像」を取得 pc.src = "http://api.page2images.com/directlink?p2i_url=http://www.yahoo.co.jp&p2i_key=33v9*******&p2i_device=6"; });
これで、以下のように3タイプの画像をゲットできます！
■使いやすく改良してみよう！
ここまでのプログラムで、ある程度「キャプチャ画像」の取得ができるようになりました。
しかしながら、WebページのURLやデバイスの設定を、毎回「img」要素の「src属性」に記載するのは大変ですし、使いにくいと思います。
そこで、誰でも簡単に使えるようにちょっとした工夫をしてみましょう！
「index.html」に、好きなWebページのURLを入力できるボックスと、デバイスを選択できるようなUIを作ります。
<!-- index.html --> <body> <!-- URL入力用のボックスを設置 --> <input id="url" type="text" /> <!-- デバイスを選択できるようにする --> <select id="device"> <option value="6">PC</option> <option value="4">タブレット</option> <option value="1">スマホ</option> </select> <button id="btn">実行</button> <img id="capture" src="" /> <script src="main.js"></script> </body>
あとは、「app.js」側で指定された情報を取得して、「専用URL」と組み合わせればOKです！
// app.js // 入力されたURLの要素を取得 var url = document.getElementById('url'); // 選択されたデバイスの要素を取得 var device = document.getElementById('device'); var capture = document.getElementById('capture'); var btn = document.getElementById('btn'); btn.addEventListener('click', function() { // URLをエンコード処理 var targetUrl = encodeURI(url.value); capture.src = "http://api.page2images.com/directlink?p2i_url=" + targetUrl + "&p2i_key=33v9*******&p2i_device=" + device.value; });
特に難しいことをしているわけではありませんが、これだけでグッと使いやすくなりました。
ちなみに、URLに日本語などが混じっていても大丈夫なように、「encodeURI()」を使ってエンコード処理をしています。
それでは試しに、「Google」のURLと、デバイスは「スマホ」を選択して実行してみましょう！
しっかりと「キャプチャ画像」が取得できているのが分かります！
このサンプルからも分かるように、さまざまな方法を使って任意の「URL」や「デバイス」を指定することが出来るので、自分のWebサイトやサービスなどにも組み込みやすいと思います。
■paizaラーニングについて
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
