paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

12種類のWebツールをAPIで提供する「ApiStacks」をJavaScriptで使ってみた!

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

今回はさまざまな機能を持ったツールをAPIから手軽に利用できるWebサービスをご紹介します!

自動スクリーンショット、メールアドレス検証、IPアドレス探索、PDF変換…など、ゼロからプログラミングすると面倒な機能を誰でも簡単に構築できるのが大きな魅力です。

Web開発にご興味ある方はぜひ参考にしてみてください!

ApiStacks

f:id:paiza:20210506121656j:plain

■「ApiStacks」の使い方

それでは、「ApiStacks」をどのように使えばいいのかを詳しく見ていきましょう!

まずはサイトのトップページにある【Sing Up】ボタンから無料のユーザー登録を済ませておきます。

f:id:paiza:20210506121711j:plain


ユーザー名、メールアドレス、パスワードを設定しましょう。

f:id:paiza:20210506121721j:plain

登録したメールアドレス宛に専用のリンクが送られてくるので、クリックして認証を済ませておいてください。


最終的に以下のようなダッシュボードが表示されたら準備は完了です!

f:id:paiza:20210506121730j:plain

この画面から利用したいAPIを選んだり、専用のAPIキーを取得したり、詳しいマニュアルなどを閲覧できるようになっています。

■Webサイトのスクリーンショットを取得する

「ApiStacks」ではさまざまな機能を持ったツールをAPIで提供していますが、まずはサンプル例として分かりやすい「スクリーンショット」を利用してみましょう。

これは任意のWebページをスクリーンショット画像に変換できるAPIであり、定期的にWebサイトの画像を更新するようなケースにも最適です。


使い方としては、ダッシュボードにある【Web Screenshots】の項目で【Activate】ボタンをクリックします。

f:id:paiza:20210506121748j:plain

これで「スクリーンショットAPI」が利用できるようになりました。


次に、インフォメーションアイコンをクリックしてみてください。

f:id:paiza:20210506121757j:plain


「スクリーンショットAPI」を利用するために必要なエンドポイントや、専用のAPIキーが表示されます。

f:id:paiza:20210506121809j:plain

このAPIキーが無いと利用できないのでコピーしておくのを忘れないようにしましょう。


あとは実際にプログラミングをしていくだけです!

今回はサンプル例としてNode.jsの実行環境を利用したJavaScriptプログラミングをご紹介しておきます。(※APIを利用するだけなので他の言語でも問題はありません)

ちなみに、環境の準備ができていない場合は「PaizaCloud」や「Repl.it」などのWebサービスを使うとブラウザからすぐに試すことができます。


以下は、「ApiStacks」を利用したサンプルコードです。

const axios = require('axios');

axios.get('https://api.apistacks.com/v1/getscreenshot', {
    headers: {'x-api-key': '****-****-****-****-****'},

    params: {
      url: 'https://paiza.hatenablog.com'
    }
})
.then(response => console.log(response.data));

ヘッダー情報の「x-api-key」プロパティには、さきほどコピーしたご自身のAPIキーに差し替えてください。

また、パラメータ情報の「url」プロパティにはスクリーンショットを取得したいWebページのURLを設定しておきましょう。今回は例として当ブログのURLにしています。


プログラムを実行すると、以下のようなレスポンスが返ってきます。

{
  status: 'ok',
  timestamp: 1620191188273,
  iscache: true,
  data: 'https://apistacks.com/cdn/repo/screenshots/***********.png'
}

上記の「data」プロパティ内に画像URLが格納されています。


URLをブラウザで開くと正常にスクリーンショットが取得できているのが分かりますね。

f:id:paiza:20210506121943j:plain

このURLはリクエスト回数に計上されないので、実際のプロジェクトで画像を表示する際にも利用できます。

このように「ApiStacks」を利用すると、わずかなコードを書くだけで便利な機能を構築していけるようになるわけです。

なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができます。

■その他、便利なAPIをご紹介!

2021年5月時点において、「ApiStacks」では12種類のツールがAPIで提供されています。なかでも特に便利なものをいくつかピックアップしてご紹介しておきます!


まずは【 PDF変換API 】です!

これは任意のWebサイトをPDFに変換できる機能を持っており、そのままファイルをダウンロードすることも可能です。

使い方やプログラムは、さきほどご紹介した「スクリーンショットAPI」と同じなのですが、エンドポイントだけ変更する必要があります。

※スクリーンショットAPIはこちら

https://api.apistacks.com/v1/getscreenshot'

※PDF変換APIはこちら

https://api.apistacks.com/v1/getpdf

それと、ダッシュボードから【Activate】ボタンをクリックして利用可能な状態にしておくのも忘れないようにしておきましょう。


プログラムを実行するとPDFにアクセスできるURLを取得できます。ブラウザから開いてみると以下のようにPDF変換されているのが分かります!

f:id:paiza:20210506122222j:plain

【 リンクスクレイピングAPI 】

(エンドポイント:https://api.apistacks.com/v1/scrapelinks

これは任意のWebサイトに設置されているすべてのリンクを抽出できる機能を持っています。こちらもエンドポイントを変更するだけで、実装方法はこれまでとまったく同じです。

プログラムを実行すると以下のようなレスポンスが返ってきます!

{
 status: 'ok',
 timestamp: 1620221962399,
 url: 'http://paiza.hatenablog.com',
 data:
  [ { href: 'https://paiza.hatenablog.com/' },
    { href: 'https://paiza.hatenablog.com/' },
    { href: 'https://paiza.jp/pages/careers/vc?b_head_ban' },
    { href: 'https://paiza.hatenablog.com/archive/2021/04/29' },
    { href: 'https://paiza.hatenablog.com/entry/2021/04/29/110000' },
    { href: 'https://paiza.hatenablog.com/entry/2021/04/29/110000' },
    { href: 'https://paiza.hatenablog.com/entry/2021/04/29/110000' },
    { href: 'https://paiza.hatenablog.com/archive/2021/04/28' },
    { href: 'https://paiza.hatenablog.com/entry/2021/04/28/153000' },
        ・
        ・
        ・
        ・

「data」プロパティ内に抽出されたリンクが配列で格納されているのが分かりますね。

ちなみに【スクレイピングAPI】も提供されており、これはリンクだけでなくHTMLソース全体を取得することが可能です。
(エンドポイント:https://api.apistacks.com/v1/scrapewebsite

【 メールアドレス検証API 】

(エンドポイント:https://api.apistacks.com/v1/checkemail

「ユーザー登録」や「問い合わせフォーム」などで入力されたメールアドレスが、ちゃんと機能する有効なアドレスなのかどうかを自動で検証してくれるAPIです。

プログラムを実行すると以下のようなレスポンスが返ってきます。

{
  status: 'ok',
  timestamp: 1620219522928,
  input: 'abcdefg@hijklmn.net',
  data: {
    input: 'abcdefg@hijklmn.net',
    is_reachable: 'invalid',
    misc: { is_disposable: false, is_role_account: false },
    mx: { accepts_mail: false, records: [] },
    smtp: {
      can_connect_smtp: false,
      has_full_inbox: false,
      is_catch_all: false,
      is_deliverable: false,
      is_disabled: false
    },
    syntax: {
      address: 'abcdefg@hijklmn.net',
      domain: 'hijklmn.net',
      is_valid_syntax: true,
      username: 'abcdefg'
    }
  }
}

「data」プロパティ内にメールアドレスを検証した結果が格納されています。基本的には「is_reachable」プロパティの値を確認するといいでしょう。
(※電話番号の検証APIも提供されています)

【 QRコード生成API 】

(エンドポイント:https://api.apistacks.com/v1/generateqr

任意のURLやテキストなどを一般的に使われているQRコードに変換&生成してくれるAPIです。

プログラムを実行すると以下のようなレスポンスが返ってきます。

{
  status: 'ok',
  timestamp: 1620221395739,
  data: 'https://apistacks.com/cdn/repo/qr/*************.png'
}

「data」プロパティ内に生成されたQRコードにアクセスするためのリンクが格納されています。

実際に画像ファイルを開いてみると以下のようなQRコードが確認できます。

f:id:paiza:20210506122624j:plain

【 IPアドレス探索API 】

(エンドポイント:https://api.apistacks.com/v1/iplookup

IPアドレスを解析してタイムゾーン、国、ロケーションなどの詳細情報を取得できるAPIです。たとえば、Webサイトにアクセスしてきた訪問者の情報を調べる用途などにも使えます。

プログラムを実行すると以下のようなレスポンスが返ってきます。

{
  status: 'ok',
  timestamp: 1620221651418,
  ip: '104.68.52.120',
  data:{
    range: [ 1749286912, 1749319679 ],
    country: 'US',
    region: '',
    eu: '0',
    timezone: 'America/Chicago',
    city: '',
    ll: [ 37.751, -97.822 ],
    metro: 0,
    area: 1000
  }
}

「data」プロパティ内にIPアドレスを解析した結果が格納されているのが分かります。ちなみに【 WHOIS探索API 】も提供されており、こちらはドメインの登録日や国などの情報を取得できるようになります。

他にも「言語検出API」「OGP抽出API」「ユーザーエージェント検出API」などが提供されており、このサービスだけで多彩な機能を手軽に開発できるので便利です。

■おまけ

今回ご紹介した「ApiStacks」とよく似た機能を提供するサービスがもう1つあるので合わせてご紹介をしておきます。

OneSimpleApi

f:id:paiza:20210506122739j:plain

このサービスもスクリーンショットやPDF変換などの機能をAPIで提供しているのですが、現時点で5つのツールしかないので種類は少なめです。

ただし、細かいオプションを指定できるのが大きな特徴です。たとえば、「スクリーンショットAPI」でフルサイズのスクショを取得するサンプルコードは以下のとおりです。

axios.get('https://onesimpleapi.com/api/screenshot', {
    params: {
      token: '****************',
      output: 'json',
      url: 'https://paiza.hatenablog.com',
      full: 'yes'
    }
})
.then(response => console.log(response.data))


パラメータ情報で「full」プロパティを追加するだけで、以下のようにWebサイト全体のスクリーンショットを取得できるようになります。

f:id:paiza:20210506123005j:plain

それぞれのAPIに細かいオプションが提供されているので、機能をカスタマイズしたい場合には役立つサービスと言えるでしょう。

「ApiStacks」と組み合わせて利用するとさらに効果的かもしれませんね。

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回は、さまざまな機能を持ったツールをAPIで提供してくれるWebサービスをご紹介しました!

複雑なプログラミングを必要とせず、誰でも手軽に開発が可能で自分のWebアプリなどにもすぐ組み込むことができるのは魅力的です。プロトタイピングや個人開発などにも積極的に利用していきたいですね。

Web開発にご興味がある方も含めて、ぜひ参考にしてみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.