A8.netのコンテンツのことや
デザイナーのお役立ち情報などを発信します

  • 2020/10/22
  • 勉強会

OAuthとAPIって何…?デザイナーが本気で考えてみた

  • さしみ

みなさんこんにちは!
クリエイティブチーム顔芸担当のさしみさんです。
名前からお察しの通り生魚ももちろん好きですが、肉も好きです!
どうぞご承知おきください。

突然ですが皆さん、APIって使ってますか?

当チームではwebデザイン制作からコーディングまでワンストップで行っておりますが、時々あるわけです。
「twitterのつぶやきをこのページに出したい」
などの事象が…!

出た、API!
出た、OAuth!!

残念ながらフロントエンドエンジニア様方ほどのPP(プログラムプロフェッショナル)ではないため、毎回この手の外部情報取得系には四苦八苦するわけです。
ですが、せっかくなのでデザイナー視点でAPIだのOAuthだのを再解釈して理解度を高め、親しみを持とう!というのが当記事のアプローチであります。

そのためより具体的且つ専門的な解釈に関しては専門の記事に譲りまして、ここでは実生活にOAuthやAPIをあてはめて仕組みをほんのり解説していきたいと思います。
もちろんPP(プログラムプロフェッショナル)の皆様方に於かれましてはツッコミどころしかないかと存じますが、怪しい箇所につきましては海よりも広い心で優しく指摘していただけると、プログラマ様への信仰が深まります。

そもそもAPIやらOAuthってなんぞ…?

ということで、そもそもどういう時に使うかという例を交えながら解説していきます。

例えば大手ニュースサイトなどを見ていると、いろんなサイトの記事が混在して掲載されたりしてますよね?
これはもちろん大手ニュースサイトに載せていいですよ~(もしくは載せてください~)という契約をしていたりするわけですが、この外部サイトから必要な情報を取得して表示する、というのがAPIのキモであります。

「●●の情報ちょうだい!」と要求した時に「●●ね!OK!」といって渡してくれるのがAPIの動きです。
「さんまちょうだい!」「あいよ!この時期脂が乗ってて旨いよ!」みたいな感じで。

APIは脂の有無は返してくれませんが。

さながらお店でのやりとりのようではないですか?

OAuthとAPIを実生活にあてはめてみた

ふらっと行った店(サーバー)で誰でも商品が買える(情報が取得できる)のがオープンなAPIです。

それとは逆に一見さんお断り、完全会員制店舗(コ●トコのような)のようなAPIも存在するわけです。

誰でも勝手に店舗に入れないように監視する仕組み…それがOAuth!
まるで店舗の前にいる警備員さんのよう。(ちょっと違うけど)

でも、お店に入れる人と入れない人の区別はどうやって行うのか?
そこで新しい単語「アクセストークン」なるものが出てきます。

アクセストークンは、例えるなら会員制店舗の会員証のようなものです。
買い物客はまず、この会員証(アクセストークン)を発行してもらわないと入店もままならないわけです。
勝手に店に入ろうとすると、入り口で警備員さんに止められちゃうわけですね。

OAuthの仕組みイメージ(取得失敗)

なので、まずは会員証を作ります。(アクセストークンの発行)
受付の方(認証サーバー)に許可をもらって会員証発行をしてもらうと、入店が可能になります。

アクセストークン発行イメージ

会員証さえ持っていれば警備員さんには止められません。
入店すると欲しい物(リクエスト)に応じて商品が購入できる(欲しい情報が入手できる)ようになるわけですね!

OAuthの仕組みイメージ(取得成功)

いかがでしたでしょうか?
非プログラマーの皆様にもOAuthやAPIの仕組みがほんのり伝われば幸いです。

OAuthやAPIなら任せろ!というデザイナーの皆様に於かれましては、弊社ファンコミュニケーションズクリエイティブチームでは現在デザイナーを募集しておりますので、ぜひご一読くださいませ。

ファンコミュニケーションズ採用ページへ

それでは、良きデザインライフを!

参考リンク

※当サイトのリンクに関しては、アフィリエイトリンクは含まれておりません

注目コンテンツ