Web Dev + Body Make

in Vancouver

marvelapi

【アメコミ】マーベルAPIでカッコいいサイトを作ろう！
Web Dev /

みなさんこんにちは！
「プロテイン飲んでますか！？」
で、おなじみのフロントエンドWebデベロッパーのヒデトです！
今回も元気にやっていきましょう！

前回に引き続き、バンクーバーのクリエイター集団「Frog Creators」がお届けする2016年アドベントカレンダー23日目の記事でございます！ぱふぱふぱふ！
カレンダーが記事でどんどん埋まってきて嬉しいですね！ちなみにこのアドベントカレンダーの16日目以降は技術特集となっております！技術に関しては僕の一番の苦手部門ですが（全然冗談にならない）、皆さんの役に立ち、且つ、楽しんでいただける記事を目指して書いております。

さて、今回僕がご紹介したいものはこちら！

Marvel API です！

spidermanMarvel-min

そう、アメコミのマーベルでございます！
2016年の末にもなると、インターネットの世界には数え切れないほどのAPIで溢れかえっています。
「何か楽しいAPIないかなー。」
っとインターネットの世界をサーフしていたところ、このAPIとの電撃的な出会いがありました。
「これならビジュアル的にもイカしやつを作れそうだ！」
ってことで簡単な１ページのウェブサイトを作ってみました！
※「簡単な」と言っていますが、技術力のない僕にはとっても時間がかかりました。僕を手助けてしてくれた心優しい人達、ありがとうございました。まだバグがいっぱいあるので助けてください。

さらに！今年の夏、マーベルのコミックにカナダのトルドー首相が登場し話題を集めました！
それがこれです！

justin-min

首相が大きく表紙を飾っています！ちゃんとカナダっぽくメープルのタンクトップを着てカナダをPRしていますね。チラッと覗かせる胸毛で男らしさもアピール。こりゃあとんだ策士です。表紙に描かれているとおり、実際にトルドー首相はボクシングをするそうですね。実はトルドー首相のパパもかつてはカナダの首相を務めており、その時もマーベルのコミックに載ったらしいです。カナダの国ぐるみで緩い感じがなんとも素敵です。

勝手に始めるQ&A

突然ですが、ここからはしばらく質疑応答形式で進めていこうと思います。ご了承ください。

Q. マーベルって何？

A. アメコミ界２大巨頭のうちの１つ、「Marvel」でございます。もう一方の巨頭は「DC Comics」ですね。なお、これ以降は英語で言っておけばカッコよく聞こえるので「マーベル」ではなく「Marvel」で統一させていただきます☆

Q. APIって何？

A. 簡単に言うと、

ソフトウェアの一部をWEB上に公開することによって、誰でも外部から利用することができるようにするための仕組みのこと。

のようです。
詳しくはこのサイトで分りやすく解説されていたので、理解を深めたい人は読んでみてください。

Q. Marvelにはどんなキャラクターがいるの？

A. 代表的なものは「スパイダーマン」「キャプテン・アメリカ」「X-Men」「デッドプール」あたりでしょうか。

Q. ちなみにDC Comicsのキャラクターは？

A. 「バットマン」「スーパーマン」「ワンダーウーマン」「スーサイド・スクワッド」あたりです。

Q. DC ComicsではAPIを公開してないの？

A. してないみたいです。DC Comics、デベロッパー界隈で一歩遅れを取ってしまいましたね。

Q. Marvel APIって？

A. Marvel.comが公開するAPIです。

Q. Marvel APIで何ができるの？

A. キャラクター、コミックス、ストーリー、ストーリーイベント、などの画像や関連情報を取得できます。画像のサイズは何種類もあったりして、色んな状況に対応できそうです。

Q. Marvel JapanではAPIを公開してないの？

A. してないです。ウェブサイトもアメリカのものほどカッコよくないし情報が少ないです。
Marvel Japan
Marvel U.S.A

Q. ヒデトの一番好きなキャラクターは？

A. 響きがスケベなので「Black Widow」です。どんなキャラクターなのかは知りません。

blackwidow-min

はい、Q&Aはここで終了です！なんとなくMarvelとMarvel APIの概要を掴んでもらえたんじゃないでしょうか。
次にMarvel APIの使い方に入っていきますよ〜。

Marvel APIを使ってみよう

まずはイメージを掴んでもらうために、僕が作ったサイトに飛んでみてください。どんなことが出来るのか分かってもらえると思います。
Marvel Heroes

marvelheroes_home-min

パソコンで見ると、コミックの見開きをイメージした形で見れるので、ぜひお手元にパソコンがある方はそちらをオススメします！
キャラクターをクリックすると新しい画像などが表示されるはずです。Marvel APIを使うことで、新しいヒーローの画像や、そのヒーローが登場するコミックの情報を取得し表示させています。Marvel APIのサーバー状況によって読み込みが遅くなることがありますがご了承ください。

さて、イメージを掴んでもらったところでMarvel APIの使い方に移っていきましょう。

ステップ１

API使用のためにMarvelサイトに登録しよう！

Marvel Developer Portal
まず最初の画面で「世界でいっちばんすごいコミックAPIを使って、めちゃくちゃカッコイイものを作ろうぜ！(和訳)」っていう熱烈な言葉でお出迎えしてくれるはずです。さすがヒーローが集まるサイトだけあって自信が溢れています！
右上のSign Inをクリックして、飛んだ先のページでSign Upをしましょう。Sign Up後に、一般ユーザー向けサイトであるMarvel.comに飛ばされたりするのでhttps://developer.marvel.com/に戻ってきましょう。

※このdeveloper.marvel.comのサイトはたまにロードがうまくいかずページの一部が表示されないことがあるので、その場合は何度かリロードしたり、他のページに行って戻ってきたりしてみてください。

ステップ２

Public KeyとPrivate Keyを手に入れよう！

「Get a Key」をクリックし、表示された利用規約ページで「I Accept the terms and conditions above.」にマークし、　Acceptのボタンを押します。

そうすると、先ほどまで「Get a Key」だったところが「My Developer Accout」に変わるのでそこからkeyを入手できます。
marvel_home

メニュー内のMy Developer Accountをクリックしましょう。表示先のページで実際に作るサイトの情報を登録します。

ステップ３

APIで取得できる情報を試してみよう！

メニュー内から「Interactive Documentation」をポチッとすれば、どんなJSONをAPIが吐き出してくれるか試すことができるページに飛びます。ここでは、AJAXリクエスト時にどんなURLが必要かも確認することができます。

tryApi

ステップ４

AJAXリクエスト用のhashを作ろう！

Marvel APIではタイムスタンプ、Public Key、Private Keyの３つをMD5形式のhashにして送付する必要があります。このMD5 hashにする工程は、Cript-jsというものを使うと簡単です。
以下のコードを一行だけJavaScriptに書いてしまえば、後は勝手にMD5 hashに変換してくれます。

//
var hash = CryptoJS.MD5(ts + PRIV_KEY + PUBLIC_KEY).toString();
//

このコードをJavaScriptの中で実際どのように書くかは後で説明します。

そして、htmlに下のJavaScriptを入れます。

//
<script type="text/javascript" src="http://cryptojs.altervista.org/api/functions_cryptography.js"></script>
//

本当はこのAJAXのリクエストをサーバー側からやった方が良いらしいのですが、今回はJavaScritpでやっちゃいました。JavaScript内にPrivate Keyも載っけちゃってますが、みんな悪さはしないでね☆

ステップ５

JSONから必要な情報を取り出そう！

jQueryを使ったAJAXでJSONを取ってきます。JSONとはデータフォーマットの一種です。JSONからjQueryでデータを抽出する方法についてはこのサイトに分りやすく書いてありました。
このjQueryのコードは実際に僕のサイトで使ったコードとは若干異なっていますが、コンセプトは同じです。

var url = "http://gateway.marvel.com/v1/public/characters"
var PRIV_KEY = "自分のPrivateKey";
var PUBLIC_KEY = "自分のPublicKey";
var heroName = "Spider-Man";

GetHero(heroName);

function GetHero(heroName){
  var urlWithName = url + "?name=" + heroName;
  var ts = new Date().getTime();
  var hash = CryptoJS.MD5(ts + PRIV_KEY + PUBLIC_KEY).toString();

    $.getJSON(urlWithName, {
      ts: ts,
      apikey: PUBLIC_KEY,
      hash: hash
    },function(json){
      var heroID = json.data.results[0].id;
      var description = json.data.results[0].description;
      var thumbnail = json.data.results[0].thumbnail.path;
      var extension = json.data.results[0].thumbnail.extension;
      var charactorURL = json.data.results[0].urls[0].url;
      thumbnail = thumbnail + "." + extension;

        //ここにhtmlに情報を吐き出すコードを書く
        //thumbnailがキャラクター画像のURL
        //descriptionがキャラクター説明

    })
    .done(function(data){
      console.log(data);
    })
    .fail(function(err){
      console.log(err);
    });
};

上記では受け取ったJSONの中からキャラクター画像やキャラクター解説のデータを取ってきています。
このAJAXではjQueryメソッドの$.getJSONを使っていて、以下のように３つの引数を取っています。
$.getJSON( url [, data ] [, success ] )
$.getJSONのドキュメンテーションを見たい方はこちらから。

引数その１：AJAXリクエスト先のURL
ここでは変数の「urlWithName」です。

引数その２：AJAXリクエスト先に送るデータ

{
  ts: ts,
  apikey: PUBLIC_KEY,
  hash: hash
}

この部分です。
今回はタイムスタンプ、Public Key、MD5 hashの３つをオブジェクトの形にして渡すので、{キー：値}のように書きます。このhashは先ほどのステップ４で作成したものです。

引数その３：JSON取得後に発動するfunction
function(json){…}の部分です。引数jsonの中にAJAXで受け取ったJSONが入っています。そのJSONから必要な情報を抽出するには、json.data.results[0].descriptionのようにドットで繋ぎ、変数にぶち込みます。Marvelから送られてくるJSONの構造はステップ２で調べることができます。

以上、$.getJSONの引数３つです。

AJAXの連動

僕が作った実際のサイトでは、この後にもう１つ別のAJAXを連動させて、コミックの表紙の取得も行なっています。僕が作ったサイトをインスペクトしてJavaScriptのコードを見てみてください。

Marvel Heroes

おわり

以上、Marvel APIの使い方でした！
ざっくりとした説明だったのですがいかがでしたでしょうか。もしかしたら僕の作ったサイトをインスペクトしてコードを見てもらうのが一番分りやすいかもしれません。
ぜひ、みなさんもMarvel APIを使って楽しいウェブサイトを作ってみてください！

他にもドラゴンボールAPIとかドラゴンクエストAPIとかもあったら楽しいんですけどねー。
何かカッコイイAPIがあったら教えてください！
それでは今回はこのへんで。
Peace!

Reference
Example call to the Marvel API from js client (w/ JQuery)

«
»