読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

paiza(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

指定URLのPC・タブレット・スマホの「キャプチャ画像」を自動表示するデモアプリを作ってみた!

f:id:paiza:20160229142835j:plain
どうも、まさとらん(@0310lan)です。

今回は、Webページのキャプチャ画像が取得できるサービス「Page2Images」の提供しているAPIを使ったデモアプリの作り方をご紹介します!

これをマスターすれば、PCやスマホなどの「表示チェックツールが簡単に作れたり、画像付きでWebサイトをキュレーションするサービスなど、ユニークなWeb開発が実現できるようになるでしょう。

応用範囲がとても広い「API」なので、ぜひ参考にしてみてください!

■「Page2Images」とは?

まずは、Page2Images」がどのようなサービスなのかを、実際に使いながら確認してみましょう!

サイトにアクセスし、「キャプチャ画像」を取得したいWebページのURLを入力します。

試しに「Bing」のURLを入力し、「GO」ボタンをクリックしてみましょう!

f:id:paiza:20160229143603j:plain

しばらく待つと、以下のように「キャプチャ画像」を取得することができます。

f:id:paiza:20160229143618j:plain

さらに、設定画面からスマホタブレットなどのデバイス指定や、画像サイズなどを細かく調整することもできます。

このように、「Page2Images」を利用すると、簡単に好きなWebページの「キャプチャ画像」を手に入れることが出来るわけです。

ただし、当然ながら画像を取得するには、「Page2Images」にアクセスして利用しなければならないわけですが、ほぼ同等の機能を持ったAPIを提供してくれているのが最大の特徴なのです!

つまり、専用のAPIを使ってプログラミングすることで、「Page2Images」のようなサービスを自分で作ることもできるし、既存のWebサービスへ「キャプチャ画像」を取得する機能を組み込むことができるようになるわけです!

■「APIキー」を取得しよう!

それでは、早速「Page2Images」のAPIを使ったプログラミング方法を解説していきたいと思います!

まずは、専用APIを利用するにあたり、必ず必要となるAPIキー」の取得方法からご紹介いたします。

無料のユーザー登録を済ませ、管理画面から「API KEY」の項目を選択すると以下のような画面が表示されます。

f:id:paiza:20160229143911j:plain

この画面では、すでに必要となる「APIキー」が表示されています。

例えば、画面中央に表示されているのがlocalhost」のAPIキーとなっています。

f:id:paiza:20160229143933j:plain

ローカル環境で開発を進める場合は、この「APIキー」を使えば問題ありません。

注意しなければいけないのは、環境が変わった時…。

例えば、オンラインエディタの「CodePen」で、このAPIを利用したければ「REQUIRE A NEW KEY」ボタンでドメインを追加する必要があります。

f:id:paiza:20160229144000j:plain

上記のように、ドメイン部分のみを抜き出して追加すれば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が付与されて、自動的に「キャプチャ画像」が取得できます

f:id:paiza:20160229144531j:plain

スマホのデバイス番号に「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タイプの画像をゲットできます!

f:id:paiza:20160229144807j:plain

■使いやすく改良してみよう!

ここまでのプログラムで、ある程度「キャプチャ画像」の取得ができるようになりました。

しかしながら、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と、デバイスは「スマホ」を選択して実行してみましょう!

f:id:paiza:20160229144932j:plain

しっかりと「キャプチャ画像」が取得できているのが分かります!

f:id:paiza:20160229144948j:plain

このサンプルからも分かるように、さまざまな方法を使って任意の「URL」や「デバイス」を指定することが出来るので、自分のWebサイトやサービスなどにも組み込みやすいと思います。

他にも、デバイスの指定ではなく「画像サイズ」を指定して取得する方法などもあります。(参考ドキュメント

今回のサンプルデモの全ソースコードコチラからチェックできます!

paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(9言語に対応)を多数ご用意いたしております。もちろん今回使用したJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

今回ご紹介した内容は、「無料プラン」でもすべて実際に試せるので、ぜひ自分でプログラミングしながら試して欲しいと思います。

いくつか制限はあるものの、基本的な機能は十分利用できるので、どのようなWeb開発が可能なのかを模索するには最適です!

また、公式ドキュメントには、サーバーとの連携手法やJavaPHPPythonなどによるコーディングサンプルなどもあるので、ご興味ある方はぜひ参考にしてみてください!

Website Screenshot Generator & API




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編