キャラ講義

【キャラ講義】デザイナー・ディレクターにもわかるAPI解説

【キャラ講義】デザイナー・ディレクターにもわかるAPI解説
みゆき
みゆき

つよぽん、久しぶり!

質問があって、「API」って言葉よく聞いて私もなんとなくで使っているんだけど、

APIってなんなの?

つよぽん
つよぽん

久しぶりに質問に来たね!

たしかに開発の現場とかエンジニアとの会話で「その機能はこのAPIを使えば実装できると思います」とか「こういうAPI作ってほしいんだけど…」って言葉をよく使うね^^

まこと
まこと

確かにプログラミングの勉強をしているときに良くAPIって言葉をサイトとかで見るけど、

APIって具体的にどんなものなのかちゃんと分かってないや。

つよぽん
つよぽん

OK!

じゃあ今日は次の内容でAPIについて解説していくね^^

今日の講義内容
  • APIとは
  • APIでサービスを横展開する

APIとは

つよぽん
つよぽん

まず「API」っていう言葉の説明からするね^^

Application Programming Interface(アプリケーション・プログラミング・インターフェイス)の略だよ!

みゆき
みゆき

あぷりけーしょん・ぷろぐらみんぐ・いんたーふぇーす?

もっと意味わからんくなった。。

まこと
まこと

APIって略さないで言うとそんな長い言葉なんだ。。。

つよぽん
つよぽん

そうだね長い言葉だよねw

この言葉自体は覚える必要はないけど、それぞれの単語の意味がわかるとAPIについて理解しやすいと思うからわざわざ正式名称で説明したんだ^^

みゆき
みゆき

それぞれの単語を理解するとAPIがわかるの?

つよぽん
つよぽん

うん^^

まずそれぞれの意味は次の通りだよ^^

それぞれの単語の意味
  • Application : TwitterやFacebookのようにWebサービスのバックエンドなど
  • Programming : プログラミング
  • Interface : 接点、入り口
つよぽん
つよぽん

これらの意味を使って解釈すると、

プログラミングを使って、Webサービス(バックエンド)何かのやりとりを行う接点(入り口)」っていうことになるよ。

まこと
まこと

なんとなくわかるような、わからないような。。

それと、ここでいう「何か」っていうのは具体的に何を指しているの?

つよぽん
つよぽん

ここでいう「何か」とは、基本的にクライアントをあらわすよ。

クライアントとは前回のおさらいだけど、Webブラウザ・アプリを使っているスマートフォン・パソコンなどがそうだよ^^

みゆき
みゆき

クライアントとWebサービス(バックエンド)のやりとりを行うって、

ようは普通のWebサービスのことよね?

以前「会話で使われる用語パート2 ~フロントエンド~」で教えてもらった次と同じって認識で合ってる?

WebブラウザとWebサーバーのやりとりの流れTwitterのフロントエンドとバックエンドのやりとりの流れ
つよぽん
つよぽん

うん、イメージとしては間違ってないけど上の図だと、クライアントとバックエンドは「1対1」の関係だよね?

みゆき
みゆき

えっ!?

普通WebサービスってTwitterにしろFacebookにしろサービスって1つしか無くない!?

まこと
まこと

いや、そんなことないかも。

例えばTwitterって、Twitterの会社が出しているTwitter以外に一般の開発者が作っているTwitterクライアントもたくさんあるから、

それを考えると「1対1」の関係ではなく「1対多」(バックエンド対クライアント)の関係もありえるような気がする。

つよぽん
つよぽん

そうそう!

まことの言う通りで、1つのサービスに対してクライアントが複数あることは全然あることだよ^^

特にTwitterクライアントは本当にたくさんあって、開発者はTwitterが提供しているAPIを使ってTwitterからデータを取得しているんだ!

Twitterクライアントがどんなものかは次の記事を見ればだいたいのイメージはつくと思うよ^^

みゆき
みゆき

なるほどねー!

イメージとしてはこんな感じかしら?

APIを使ったデータのやりとり
つよぽん
つよぽん

うん、そのイメージで合ってるよ!

ここでデータのやりとりって書いているけど、普通のWebサービスと違うのは「WebサービスはHTML形式でデータを返す」のに対して、

API経由でデータを取得する場合はHTML形式ではなくて「プログラムで扱いやすい形式でデータを返す」という点だね。

HTML形式で返しちゃうとどのクライアントも同じデザインになっちゃうから、デザインは開発者が作り、好きな部分にデータを埋め込むんだ^^

みゆき
みゆき

HTML形式で返すと全てのクライアントで同じデザインになっちゃうのはわかったけど、プログラムで扱いやすい形式ってどんなものがあるの?

つよぽん
つよぽん

プログラミングの基礎を知っている必要があるから具体的な話はまた別の講義でしようと思うけど、

JSON」や「XML」というデータ形式を使うよ^^

最近はJSONを使うのが一般的な感じがするね(^^)

みゆき
みゆき

JSON? XML?

何の呪文ですか?(^^;)

つよぽん
つよぽん

JSONもXMLも決まったルールでデータを書くもので、具体的にどんなものかは次の資料が参考になると思うから一読しておくと良いと思うよ^^

みゆき
みゆき

はーい^^

まこと
まこと

JSONとXMLかー。

まだ勉強した中で使ったこと無かったけど、今やっているチュートリアルが終わったら自分のサービス作ろうと思ってたから、

Twitterクライアント作ってAPIとJSONについて身につけようっと!

APIでサービスを横展開する

つよぽん
つよぽん

さっきはTwitterを例にAPIを使って異なるTwitterクライアントを作れることを説明したけど、

その他にも別々のサービス共有して使うデータをAPI経由で取得するということも出来るよ^^

まこと
まこと

別々のサービスで共有して使うってどういうこと?

つよぽん
つよぽん

例えば、「メルカリ」ってサービスは知っているよね?

みゆき
みゆき

知ってる知ってる!

毎日寝る前に良い商品無いかなーってついついずっと見ちゃって、よく寝坊しちゃうw

まこと
まこと

プログラミングの勉強に使うための技術書とか良く買う^^

つよぽん
つよぽん

メルカリはメルカリ以外にも「カウル」っていうサービスとか、もうサービス提供終わっちゃったけど「アッテ」「teacha」っていうサービスを横展開してたんだ^^

このサービスを横展開するというのが、「別々のサービスで共有して使う」ってことだよ^^

まこと
まこと

横展開するっていうのがまだイマイチ理解できていないんだけどどういうこと?

つよぽん
つよぽん

メルカリとカウルの例で考えると次のようにメルカリとカウルで共有して使っているデータがあるんだ^^

共通して使っているデータ
  • ユーザー情報
  • ユーザーの評価
  • 商品情報
  • 購入情報(メルカリで買った本がカウルの本棚に登録される)
つよぽん
つよぽん

こんな感じで、メルカリとカウルのようにサービス自体は違うのに、APIを通すことでデータを共有して使うことが出来るんだ^^

API経由で別サービスで共通で使うデータを取得する
まこと
まこと

へー!APIって可能性が無限大じゃん!

なんか色々アイデア思い浮かびそう!

つよぽん
つよぽん

サービスによってはAPIを公開しているものと公開していないものがあるから、APIを使ってサービスを作りたいなって思った場合は、

まずは自分が使おうと思っているAPIが公開されているかどうか確認すると良いよ^^

まこと
まこと

了解です!

あー早くサービス作れるよになりたい!

みゆき
みゆき

APIを使って色々なサービスのデータを取得出来るなら、

ゼロから自分たちでデータを用意しなくても良いから、いろいろとビジネスアイデア思い浮かびそうね^^

つよぽん
つよぽん

そう!それこそAPIの強みなんだ^^

さっきまことが言ってたようにAPIは可能性が無限大なんだ!

1つのAPIしか使っちゃいいけないなんてルールはないから、複数のAPIを組み合わせて今まで世の中に無かったようなサービスを作ることだって出来るんだよ^^

みゆき
みゆき

APIは1つだけじゃなくて複数を使っても良いのね!

そうなるとますます可能性が広がるわ〜^^

まこと
まこと

さっきTwitterクライアント作ろうと思ってけど、世の中にどんなAPIがあるのか今度いろいろ調べてみようかなー

つよぽん
つよぽん

じゃあ今日はこんな感じでAPI講義を終えたいと思います^^

最後に今日学んだことをまとめておくね!

今日のおさらい
  • APIはクライアントとバックエンドのデータのやりとりを行う接点(入り口)
  • APIを通して取得できるデータ形式はHTML形式ではなくプログラムで扱いやすいJSON形式が一般的
  • クライアントは好きにデザインが出来て、取得したデータを任意のところに配置できる
  • APIを通して別サービスでもデータを共有して使うことが出来る

 

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です