こんにちは。
カヤックに新卒で入社し、フロントエンドエンジニアとして
スロット制作を中心とした活動を続けている田島です。
どうぞお手柔らかによろしくお願いします。
さてさて、Webのフロントエンドエンジニアの場合、
何か作りたいアイデアを思いついてから世に公開するまでのスピードが
コピーライターに次いで早いです。
また、リッチなコンテンツや大量のコンテンツを扱って何かしようというときには
WebAPIをうまく活用すれば、自前でデータベースを作らずとも
ササッと作って公開することもできます。
今回は、そうしたフロントエンド制作を豊かにするWebAPIの中から特に
面白いと思うものを7つ選び、実例を交えて紹介していきたいと思います。
1. MediaWiki API
http://ja.wikipedia.org/w/api.php
Wikipediaの情報を取得できるAPIです。
このAPIの良いところは、 WikiPediaのページから概要の部分だけを抽出して取得できるところです。
特定の単語の百科事典として、パッと意味を引きたいときに便利です。
例) 「WBC」の概要を取得
http://ja.wikipedia.org/w/api.php?action=query&format=json&titles=WBC&prop=extracts&redirects=1&exchars=130&explaintext=1
このAPIを使って、スロットで3文字略語を当てて、その略語の意味を知ることができるサイトを作ってみました。
リンクはこちら
2. iTunes Search API
iTunesの持つ膨大な音楽アーカイブを活用できるAPIです。
このAPIでは、iTunesに登録されている楽曲のアーティスト名や楽曲名、
アルバムのジャケット画像を取得できる他、試聴部分の音楽データまで提供してくれています。
この試聴部分は、約30秒〜60秒と結構長く、主にAメロやサビの部分を切り取ってくれているため扱いやすいです。
このAPIを使って、スロットで3つのコードを当てると、そのコード進行を持つ楽曲が流れるサイトを作ってみました。
3. Flickr API
https://www.flickr.com/services/api/
本格的な写真がたくさん投稿されているサービスであるFlickrも、APIを提供してくれています。
Flikcrに投稿されている写真の多くにはExif情報が付与されていて、
地理情報から写真を探すことができるというのも面白いポイントです。
例えば、「アメリカの西海岸付近で撮られた写真」とか、「インドのタージ・マハル付近で撮られた写真」
というような検索を行うことできます。
更に、検索のオプションを「人気順」でソートすることで、Flickrに投稿されている写真の中から
特にクオリティの高い写真に絞って取得することもできます。
※写真の著作権には注意しましょう。APIに付与するlicenceパラメータで、copyrightの条件を指定して検索をかけることもできます。
このAPIを使って、スロットで3つの色を当てると、その3色の国旗を持つ国の写真ギャラリーを見ることが出来るサイトを作ってみました。
4. Spreadsheets Data API
https://developers.google.com/gdata/samples/spreadsheet_sample
扱うコンテンツの量が多くなってくると、フロントエンドだけでデータ管理をするのは大変です。
jsonで記述するのも良いですが、可読性の面や複数人で作業する場合を考えるとあまり効率的ではありません。
そんなときは、Spreadsheets Data APIを使ってGoogleのSpread SheetをAPI化しましょう。
こうすることで、データベースライクにデータ管理を楽に行うことができます。
API化の方法は、Qiitaに書いておきます。▶GoogleのスプレッドシートをAPI化する方法
5. Custom Search JSON/Atom API
https://developers.google.com/custom-search/json-api/v1/overview
GoogleはCustom Search APIの中で、画像検索の機能も提供してくれています。
その機能とはブラウザの検索機能と同様、特定の検索ワードを入れると
検索結果となる画像を返してくれるもの。
検索ワードの工夫と見せ方次第で、面白いコンテンツやサービスが作れそうです。
試しに、画像検索の結果を年代誌のように見ることのできるサイトを作ってみました。
6. YouTube API
https://developers.google.com/youtube/?hl=ja
弊社のWebサービス、オンガクスリでも使われている
YouTubeAPIですが、なかなか器用で自由度の高いものとなっています。
例えば、サイト内に埋め込んだ動画から、今何秒目の部分を再生しているのかを取得できたり、
ユーザに認証を許可してもらえばそのユーザのYouTube再生履歴を取得することもできます。
7. milccocoa
https://mlkcca.com/
最後に紹介するものはAPIではないのですが、フロントエンドエンジニアにとってとても便利なサービスです。
このmilkcocoaを使えば、リアルタイム通信を使った実装をjavascript一行だけで書くことが出来ます。
従来なら、nodejsやWebSocketが必要で、自前でサーバーサイドを設計する必要があったのですが、
そのコストを削減できるようになったのは大幅に助かります。
現在、このmilkcocoaを使って、今度はスロットではなくダーツを使ったコンテンツを制作中です。
その成果物は、1月17日に行われる1社だけの合同説明会にて展示する予定です。
ぜひぜひお越しください。
明日は
同じく新卒で、WebGLを得意技とする、中山がお送りします！
乞うご期待！
