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

paiza開発日誌

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

面倒な手続き不要!「Web API」の超お手軽活用術をJavaScriptコード付きで一挙大公開!

Webサービス紹介 開発ネタ

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

今回は、面倒な登録手続きやトークンなどが一切不要で、今すぐ利用できる便利な「Web APIを厳選してご紹介しようと思います。

これらのAPIを使うことで、Web制作がちょっと便利になったり、独自性のあるユニークなサービスを構築できるようになるでしょう。

また、簡単に扱えることから、「Web APIを使って何か作ってみたい…」と思っている初心者の方にもオススメですよ!

■「Web API」の使い方!

今回ご紹介する「API」は、いずれもJSONP」形式でデータが取得できるので、普通のJavaScriptだけで試すことが出来ます。

以下のコードを、HTMLファイルに記述するか、新規にJSファイルを作って読み込むようにしましょう。

var script = document.createElement('script');


script.src =【基本のURL】;
document.body.appendChild(script);
document.body.removeChild(script);




//コールバックされたJSONデータの読み込み
function jsonData(data) {


    console.log(data);


}

jQueryを使うともう少し簡単に書けますが、上記のように使わなくても利用できます。

【基本のURL】の箇所は、これからご紹介する「API」に記載しているURLに差し替えてください。

そして、実行するとJSONデータがコールバックされてブラウザのコンソールから確認することが出来ます!

f:id:paiza:20160620174233j:plain

あとは、取得したデータをサイトへ組み込むことで、自分の好きなようにカスタマイズして使うことが出来るわけです。

それでは早速、今すぐ使えるオススメの「Web API」をチェックしていきましょう!

■ダミーの「ユーザー情報」を取得しよう!

Random User Generator

f:id:paiza:20160620174619j:plain

一時的に利用する用途で使えるダミーの「ユーザー情報」を、扱いやすいAPIとして提供しているサービスです。

例えば、Webサービスやサイトのプロトタイプを制作する時に、ユーザーページなどの「見た目」を実際に誰かが使っている感じに近づけることが出来るでしょう。

【基本のURL】

https://randomuser.me/api?callback=jsonData

まずは、冒頭でご紹介したJSファイルに、上記のURLを差し替えてブラウザから確認してみましょう!
f:id:paiza:20160620174708j:plain

取得できるデータとしては…

➀メールアドレス
➁名前
➂顔写真
…など。

他にも、携帯番号、性別、住所など、プロトタイプで使いそうなユーザー情報を手軽に取得できるようになっています。

これらの情報を使った簡単なサンプルデモを用意してみたので、「次へ」ボタンをクリックしながら確認してみてください!(スマホの方はコチラから)

See the Pen Random User Generatorサンプル by webhacck (@webhacck) on CodePen.

ちなみに、このAPIアクセスする度にランダムなユーザー情報が取得できる仕組みになっています。

※参考
Random User Generatorドキュメント

■CodePenプロジェクトを取得しよう!

CodePen

f:id:paiza:20160620174835j:plain

ブラウザ上で手軽にWebプログラミングを実行できる人気の「CodePen」ですが、実は「JSONP」形式のデータも提供しています。

公開されている「CodePenプロジェクト」のURLを利用し、そのプロジェクトに関するさまざまなデータが取得できるので、独自のサービスへ簡単に組み込むことが出来るでしょう。

【 基本のURL 】

https://codepen.io/api/oembed?url=【CodePenプロジェクトのURL】&format=js&callback=jsonData

上記のURLに、公開済みの「CodePenプロジェクトのURL」を当てはめると、そのプロジェクト情報を取得できるのが分かります。
f:id:paiza:20160620174918j:plain

取得できるデータとしては…

➀開発者の名前
➁プロジェクトの埋め込みタグ
➂バージョン
など。

他にも、プロジェクトの「サムネイル画像」「タイトル」なども取得できます。

以下に、簡単なサンプルデモを用意してみました。

ブラウザを更新するか、「RERUN」ボタンをクリックする度に、ランダムなCodePenプロジェクトが「情報メニュー」と共に表示されます。(スマホの方はコチラから)

See the Pen CodePen JSONPサンプル by webhacck (@webhacck) on CodePen.

URLのリストを作って、プロジェクトのキュレーションサービスなどを作ってみると面白いかもしれません。

※参考
CodePenドキュメント

■イベント検索データを取得しよう!

f:id:paiza:20160620175057j:plain

イベント検索サービスと言えば「ATND」「connpass」「Doorkeeper」が最も定番と言えるでしょう。

これらのサービスは、いずれも「JSONP」形式によるデータの取得ができるので、手軽に独自の検索サービスを組み立てることが出来るようになります。

【基本のURL】

// ATNDの検索
https://api.atnd.org/events/?keyword_or=【キーワード】&format=jsonp&callback=jsonData

// connpassの検索
https://connpass.com/api/v1/event/?keyword_or=【キーワード】&callback=jsonData

// Doorkeeper
https://api.doorkeeper.jp/events?q=【キーワード】&callback=jsonData

上記URLは、キーワードによるイベント検索を行う例ですが、「日時」「場所」「ユーザー」などによる検索も「オプション指定」を変えるだけでOKです。(各ドキュメント参照)

取得できるデータはこんな感じ!
f:id:paiza:20160620175243j:plain

上記は「ATND」の例ですが、「connpass」「Doorkeeper」もほぼ同じ内容のデータを取得することが出来ます。

➀イベント会場の住所
➁イベントページのURL
➂イベントの開始日程(終了日程もあり)
など。

他にも、「ユーザー情報」「イベント概要」「イベントタイトル」などを取得できます。

これらのデータを使って、簡単な「イベント検索デモ」を作ってみたのでチェックしてみてください。(スマホの方はコチラから)

See the Pen イベント検索サンプル by webhacck (@webhacck) on CodePen.

イベントサービスを指定して「検索」ボタンをクリックすると、登録されているイベント一覧が表示されます。(キーワードは「東京都」に固定してます…)

※参考
ATND APIドキュメント

connpass API ドキュメント

Doorkeeper ドキュメント

■「郵便番号」から住所を取得してみよう!

zipcloud

f:id:paiza:20160620175402j:plain

「会員登録」や「ネットショップ」など、サイトに用意したフォームに「住所」を入力してもらうケースは多いと思います。

そんな時に、使い勝手を良くする方法の1つとして、郵便番号を入力するだけで住所を補完してくれる機能を持った「登録フォーム」を見たことはないでしょうか。

このような機能を簡単に実現してくれるAPIを提供しているのが「zipcloud」のサービスです。

【 基本のURL 】

http://zipcloud.ibsnet.co.jp/api/search?zipcode=【郵便番号】&callback=jsonData

上記の【郵便番号】の箇所に、検索したい郵便番号を当てはめて実行すると、住所データを参照できるのが分かります。

例えば「162-0825」を当てはめて実行すると、こんな感じのデータが返ってきます。(ハイフンは無くても問題ありません…)
f:id:paiza:20160620192955j:plain

「東京都新宿区神楽坂」という住所データがしっかりと検索できており、「都道府県」や「市区町村」で分けられているのも扱いやすいのではないでしょうか。

以下に簡単なサンプルデモとして、郵便番号を入力して「検索ボタン」をクリックすると、住所が自動的に補完されるようになっているので、ぜひチェックしてみてください!(スマホの方はコチラから)

See the Pen zipcloudサンプル by webhacck (@webhacck) on CodePen.

少しでもユーザーの負担を軽減するという意味でも、ぜひ有効に活用しておきたいところですね。

※参考
zipcloudドキュメント

■「Wikipedia」のデータを取得しよう!

Wikipedia

f:id:paiza:20160620181351j:plain

インターネットの百科事典とも言われる「Wikipedia」ですが、いろいろ調べ物をする時などに重宝することで知られています。

このWikipediaの膨大なデータも、JSONP形式で提供されており、自分のサイトやWebサービスなどへ簡単に組み込むことが可能です。

【 基本のURL 】

https://ja.wikipedia.org/w/api.php?format=json&action=query&prop=revisions&titles=【キーワード】&rvprop=content&rvparse&callback=jsonData

【キーワード】の部分に、検索したい任意のキーワード(日本語でもOK)を当てはめれば、Wikipediaの記事本文と同じデータを取得することが出来ます。
f:id:paiza:20160620181416j:plain

ちょっと階層が深いですが、いずれの検索データも「revisions配列」の中に記事本文が丸ごと入っているのが分かります。

検索するデータ毎に「➀ページ番号」が変わるため、JavaScriptでデータを読み込む時に注意が必要となります。(サンプルデモ参照)

また、オプション指定として、カテゴリデータ、画像データ、単語検索なども出来るようになっているのでコチラも合わせて使うと便利です。(ドキュメント参照)

簡単なサンプルとして、任意のキーワードを入力して「検索ボタン」をクリックするとWikipediaの記事本文を表示するデモを作ったのでチェックしてみてください!(スマホの方はコチラから)

See the Pen Wikipedia APIサンプル by webhacck (@webhacck) on CodePen.

有益なデータが非常に多いので、上手く活用すればユニークなサービスを開発することが出来るかもしれませんね。

※参考
Wikipediaドキュメント

■オープンデータを取得しよう!

LinkData

f:id:paiza:20160620181806j:plain

自由に使える多彩なオープンデータがまとめられているサービスで、「桜の名所」「世界遺産」「道の駅」「全国の避難所」…など、登録されているデータはバラエティに富んでいます。

各データの個別ページにある「その他の形式のAPIリストを表示」というリンクをクリックすることで、JSONP形式で扱えるURLを確認することが出来ます。
f:id:paiza:20160620181821j:plain

例えば、「道の駅データ」のURLだと以下のとおり!

【 基本のURL 】

http://linkdata.org/api/1/rdf1s2861i/roadside_station_rdf.json?callback=jsonData

これを実行すると、日本全国の「道の駅」情報が参照できるのが分かります。
f:id:paiza:20160620182012j:plain

取得できるデータとしては…

➀「道の駅」の名称
➁その「道の駅」がある都道府県(住所も)
など。

他にも、道の駅の「WebサイトURL」や「開始年月日」などの情報も取得でき、独自の検索サービスなどに組み込んで活用できると思います。

簡単なサンプルデモとして、都道府県を選択し「検索ボタン」をクリックすると、選択された都道府県にある「道の駅」一覧が表示されるようになっているので、チェックしてみてください!(スマホの方はコチラから)

See the Pen LinkData APIサンプル by webhacck (@webhacck) on CodePen.

JSONデータがちょっと特殊な構造になっているので、最初にコンソール画面でどんなデータが取得できるのかをじっくり確認するようにしましょう。

※参考
LinkData「道の駅」オープンデータ

paizaについて

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

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

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

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

■まとめ

今回ご紹介したAPIは、登録手続きなどが不要ですぐに利用できるものばかりなので、プロトタイプ作りや練習用としてぜひ活用していきたいところ…。

APIの紹介で掲載しているサンプルデモのコードを確認し、自分でも同じように情報を取得できるようになったら、他のサービスで提供されているAPIにもきっと挑戦できるようになっていると思います!

ぜひ、みなさんも素敵なAPIを活用して、独自サービスを開発してみてはいかがでしょうか?

※Web APIを使う際は、なるべく少ないリクエストでデータを取得するようにし、サーバー側に負担をかけないように心がけましょう。




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

http://paiza.jp

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

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