どうも、まさとらん（@0310lan）です！
今回は、Webサービスやアプリ開発などで便利に使える機能をAPIで提供しているサービスを厳選してみたのでご紹介いたします。
画像系、ストレージ、CMS、認証系、APIモック…など、さまざまな用途に使えるサービスの特徴や基本的な使い方も合わせて解説しています。いずれも無料で使えるものばかりなので、ご興味ある方はぜひ参考にしてみてください！
■イラスト風のアバター画像を取得できるAPI
【 Joe Schmoe 】
Webサイト、ブログ、SNSなどに利用可能なアバター画像を取得できるAPIです。
イラスト風の人物画像を取得できるのが特徴で、Webサイトのチームページにアバターとして利用できるほか、自分のプロフィール画像やブログに挿入する画像など無料で利用できます。
使い方は簡単で、以下のような構成のエンドポイントを実行するだけです。
https://joeschmoe.io/api/v1/【オプション】
【オプション】部分にいくつか提供されているコマンドを入れると、アバター画像を取得できるようになっています。
たとえば、ランダムな画像を取得するならオプション部分に【random】というコマンドを挿入します。
https://joeschmoe.io/api/v1/random
JavaScriptを利用してもいいですし、単純にimgタグを次のように使っても画像を表示できます。
<img src="https://joeschmoe.io/api/v1/random" />
他にも、女性のアバター画像だけをランダムに表示したり、人物の名前をそのまま指定することも可能です。
https://joeschmoe.io/api/v1/female/random
https://joeschmoe.io/api/v1/jane
とても簡単に利用できて便利なので、エンドポイントをブックマークしておくのもよいでしょう。
＜参考リンク＞
■HTTPベースのJSONストレージを提供するAPI
【 JsonBox 】
ユーザー登録や面倒な初期設定などは一切不要で、JSONデータを無料で保存・取得・変更できるようになるAPIです。
Webサービスやアプリの簡易データベースとして手軽に活用できるのが特徴で、小規模のプロジェクトやハッカソン・IoT・勉強会などにも最適でしょう。JavaScriptからfetch()などを使って利用できますが、Node.js / Java / Go / Python / Reactなどから簡単に使えるライブラリも公開されています。
ちなみにJavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください！
たとえば、Node.jsのライブラリを使って基本的なCRUD操作を試してみましょう。JsonBox公式サイトに表示されている【BOX_ID】をコピーしておきます。（例：box_7aa294**********）
次に、Node.js用のJsonBoxライブラリを使うための準備をしておきましょう。
const JB = require('jsonbox-node'); const BOX_ID = 'box_b3899ec*************'; async function sample() { const jbn = new JB.JsonBox(); //ここに記述していく } sample();
このライブラリではasync / awitを利用して非同期処理を簡潔に記述できるのが特徴です。さきほどコピーしておいた自身のBOX_IDを記述しておくのを忘れないようにしましょう。
あとは、async関数内にCRUD操作の記述をするだけです。
【CREATE】JSONデータの作成
await jbn.create([ {name: "saburo", age: 28}, {name: 'taro', age: 32}, {name: 'john', age: 40} ], BOX_ID, 'users');
create()メソッドから複数のデータを配列で指定します。第3引数の【users】はコレクションのことで、上記の場合はusersコレクション内にJSONデータが格納されます。（コレクションは省略可能）
【READ】JSONデータの読み込み（取得）
const data = await jbn.read(BOX_ID);
console.log(data);
read()メソッドの引数にBOX_IDを指定するだけで、現在格納されているデータを取得することができます。
また、さまざまなオプションが提供されており、条件指定によって特定のデータだけを取得させるような処理も簡単にできます。
たとえば、年齢が30歳以上のユーザー情報を2件だけ取得したいような場合は次のように記述します。
await jbn.read(BOX_ID, "users", { query: "age:>30" ,limit: 2})
【UPDATE】JSONデータの更新
await jbn.update({ name: 'hanako', age: 32 }, BOX_ID, '******');
update()メソッドの引数に更新したいJSONデータを指定し、第3引数に対象となるデータIDを設定するだけです。
【DELETE】JSONデータの削除
await jbn.delete(BOX_ID, '***********')
delete()メソッドの第2引数に対象のデータIDを指定すれば削除することができます。
今のところ完全無料で利用できますが、10KBを超える容量のリクエストや1000件を超えるデータの一括操作など大規模な処理には制限があります。あくまで小規模プロジェクト向けのデータストレージとして活用しましょう。
＜参考リンク＞
■コンテンツをAPIで管理できるヘッドレスCMS
【 microCMS 】
サーバやデータベースなどの管理は一切不要で、ブログやWebサイトの中身となるコンテンツの管理だけに集中できるサービスです。
たとえばブログを作るのであれば、記事データをAPI経由で読み書き可能なのでWebやスマホアプリ向けにどこでもデータを配信できます。
ビューの部分に関しては、自分の好きなプログラミング言語やフレームワークなどを自由に組み合わせることができるわけです。最近話題のJAMstackなWeb開発にもピッタリなうえ、国産サービスという特徴を生かした日本語チャットサービスによるサポートも魅力的でしょう。
簡単な使い方として、記事コンテンツを作成＆取得してみましょう！
まずは「microCMS」の管理画面からAPIを作成して、ブログ記事のコンテンツを書いていきます。
無料プランでもコンテンツは無制限に作成できるので、複数の記事を作っておきましょう。
「microCMS」のエンドポイントは次のとおりです。
https://【サービス名】.microcms.io/api/v1/news
初回に自分の好きな【サービス名】を決められるので、その名称に置き換えてみてください。
たとえば、【myservice】という名称であれば次のエンドポイントで、記事の一覧を取得することができます。
https://myservice.microcms.io/api/v1/news
もちろん個別の記事を1つずつ取得することも可能で、その場合はエンドポイント末尾に【記事ID】を付与します。
https://myservice.microcms.io/api/v1/news/【記事ID】
この個別記事をブラウザへ表示してみましょう！
const endpoint = 'https://myservice.microcms.io/api/v1/news/【記事ID】'; fetch(endpoint,{ headers: { 'X-API-KEY': '****-***-***-***-****' } }) .then(data => data.json()) .then(json => document.body.innerHTML = json.content)
JavaScriptでfetch()を使えば簡単に表示できますね。もちろん、Node.jsなどを利用してサーバサイドで処理をしてもよいでしょう。
また、提供されているクエリを一緒に付与すれば細かい条件指定も可能になります。たとえば、特定の文字列を含むコンテンツだけを取得＆表示するようなケースにも対応できます。
＜参考リンク＞
■Webサービスの開発に必要な機能を提供してくれるAPI
【 Base 】
サインイン・ログインのような認証機能、メール送信機能、画像＆ファイルなどのストレージやフォーム機能…など、Webサービスを開発するときに必要となるさまざまな機能をAPIで提供してくれるサービスです。
特に面倒な認証系の実装をAPIで処理できるのは便利で、専用のダッシュボードからユーザーの管理もおこなえます。
Node.jsのライブラリを利用していくつかの認証処理を実際に見てみましょう！
【サインアップ】ユーザーの新規登録
ユーザーがWebサービスなどに新規登録する際のサインアップ処理を実現します。create()メソッドにメールアドレス、パスワード、確認用のパスワードを次のように設定します。
create(【メールアドレス】,【パスワード】,【確認用パスワード】)
実際のコードにすると以下のようになります。
async function signUp() { await mybase.users.create( "sample@test.com", "abcabc", "abcabc") }
実行するとBaseのダッシュボードにユーザー情報が登録されます。
【ログイン】ユーザーのログイン処理
ユーザー登録を済ませたあとにサービスへログインするときの処理を実現します。authenticate()メソッドに登録済みのメールアドレス・パスワードを次のように設定します。
authenticate(【メールアドレス】,【パスワード】)
実際のコードにすると以下のようになります。
async function login() { await mybase.sessions.authenticate( "sample@test.com", "abcabc") }
【パスワード】パスワードを忘れた場合のリセット処理
ユーザーがパスワードを忘れた場合に新規パスワードを再設定するための処理を実現します。この処理はまず最初に専用のトークンを生成することから始めます。
forgotPassword()メソッドに対象ユーザーのメールアドレスを設定して実行すると、専用のトークンが取得できます。
async function passwordToken() { const token = await mybase.passwords.forgotPassword("sample@test.com"); console.log(token); }
実行結果は以下の通り。
{ "forgot_password_token": "4j39ang0bsn" }
トークンが取得できたところで、setPassword()メソッドに以下の要素を設定します。
setPassword(【トークン】,【新しいパスワード】,【確認用パスワード】)
実際のコードは以下の通りです。
async function passwordReset() { await mybase.passwords.setPassword( "4j39ang0bsn", "hogehoge", "hogehoge") }
実行後に旧パスワードから新パスワードに変更されます。
また、任意のユーザーへメールを送信する機能もあり、以下のような構成で実行することができます。
send(【タイトル】,【送信元メールアドレス】,【送信先メールアドレス】,【本文】)
実際のコードは以下の通りです。
async function mailSend() { await mybase.emails.send( "これはBase APIからのメールです", "sample@test.com", "taro@sample.com", "Base APIはさまざまな機能を提供しています！") }
新規登録したときやパスワードリセットなど、必要に応じてユーザーへメールを送信できるので便利でしょう。
＜参考リンク＞
■APIのモックを手軽に作れるサービス
【 Postkit 】
ユーザー登録不要で「フィールド」や「タイプ」を設定するだけで、実際に利用できるAPIを構築できるサービス。主に、APIの使い方を学習するときや何かダミーのデータをGET / POSTするようなときに便利でしょう。
サイトにアクセスしたらすぐにでもフィールドとタイプを追加できるので、いくつか設定したあとに【PUBLISH】ボタンをクリックするだけで完成します。画面下には作成したAPIへ実際のデータを入力して追加できる機能も搭載されています。
画面上部には専用のエンドポイント＆APIキーも表示されており、このURLを使えばさまざまなプログラミング言語から制御することも可能です。
たとえば、Node.jsのrequest()を利用してさきほど作成したAPIのデータを取得するには次のように記述します。
const options = { url: 【URL】, method: 'GET' } request(options, (error, response, body) => { console.log(body); })
【URL】の部分は自身のものと置き換えてみてください。実行するとデータをすべて取得できるようになるので、簡単にプログラムへ組み込むことも可能です。
また、POST処理も可能になっており、たとえば新規ユーザーを追加するのであれば次のように記述できます。
const options = { url: 【URL】, method: 'POST', form: { 'name': 'taro', 'age': 29, 'area': 'Yokohama', 'tell': '090-1234-5678' } } request(options, (error, response, body) => { console.log(body); })
追加するフィールドやタイプは、さきほどサイトで設定したものと同じである必要があります。
＜参考リンク＞
■おまけ
過去に当ブログでもご紹介しているAPIに関連した記事を合わせてご紹介しておきます！
【 Pixabay API 】
著作権フリーの画像を検索＆ダウンロードできるサービス「Pixabay」が提供するAPIです。
画像検索が簡単にできる機能を提供しており、キーワードに関連する写真・イラスト・ベクターなどの画像をJSONデータで取得できます。また、ダウンロードURLも含まれているので、そのまま画像を取得する機能なども組み込めます。
詳しいAPIの使い方については次の記事で解説しているので、ぜひ参考にしてみてください！
【 Rakuten Rapid API 】
およそ8000種のAPIを横断検索できて、そのままGET / POSTのテストまで可能なプラットフォームです。
位置情報、グルメ、交通機関、音楽、ビジネス、天気、ゲーム、決済、地図、機械学習、SNS…など、非常に多彩なAPIが登録されておりさまざまなWeb開発にも活用できるでしょう。また、APIを機能をすぐにテストして確認できるうえ、サンプルのプログラムも表示してくれる便利機能が搭載されています。
プラットフォームの詳しい使い方については次の記事で解説しているので参考にしてみてください！
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaではゲームで遊びながらプログラミングを学べるコンテンツもご用意しています。『コードクロニクル』は、ファンタジーRPG風の世界観で冒険しながらプログラミング問題を解いてストーリーを進めていくゲームです。ぜひプレイしてみてください！
■まとめ
今回は、Web開発に便利なAPIを提供してくれるサービスを厳選してご紹介してみました。
基本的にすべて無料で利用可能なので、気になったものがあれば実際に試してみてどんな機能をどのように使えるのかを確認してみるとよいでしょう。使い方はいずれも簡単ですが、公式ドキュメントも充実しているので合わせて参考にしてみましょう。
ぜひ、みなさんもAPIを活用して素敵なWeb開発を楽しんでみてください！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
