• はてなブックマークに追加
  • Yahoo!ブックマークに登録
感情解析、画像認識、空席検索、電話、tab、天気予報APIをお試し
MA史上初の女子向けMeetUp開催!はじめてのAPI体験☆
Tech×女子5人のユニット“Quintech(クインテック)”と、リクルートのメディアテクノロジーラボ(MTL)が主催するWebエンジニアの祭典「MA8」チームが、初の女子向けAPIワークショップを開催。その様子を田中里実がレポートします。
(取材・文/田中里実 総研スタッフ/宮みゆき 撮影/佐藤聡)作成日:12.10.23
<MA8>東京MeetUp Quintechプロデュース☆はじめてのAPI

田中 里実さん
田中 里実さん
伴野 智樹さん
伴野 智樹さん
ハード×API 電子工作コンテストの様子
ハード×API 電子工作コンテストの様子
辰巳 ゆかりさん
辰巳 ゆかりさん

「IT業界で女性が活躍しやすい環境をつくること」「女子による女子のための“Tech”をプロデュースすること」「Tech女子のミートアップの場をつくること」など、Tech×女子をキーワードとしていろいろな取り組みを行っている女子ユニット“Quintech(クインテック)”。花堂博美さん、岡村祐子さん、柳田亜沙美さん、辰巳ゆかりさん、そして私、田中里実のTech×女子5人で活動しています。

 今回のQuintechイベントは、「Mashup Awards 8(MA8)」とのコラボ企画。「APIって聞いたことあるけどよくわからない! 使えない! 使えるようになりたい!」というTech女子を募り、「マッシュアップ」の楽しさを体験しちゃおう!というイベントを開催しました。

 これまでは、運営者・参加者とも、ほぼ女性だけで開催しているQuintechイベント。今回はMA8のAPIパートナーの男性エンジニアの方に講師として参加してもらっているため、会場の男性比率が高い! いつものQuintechのイベントと違う雰囲気です。でも開始時間までには、参加者のTech女子たちもたくさん集まってきました。みんなワクワクしつつ、ちょっと緊張した面持ち(笑)。

 まずは事務局の伴野智樹さんから、「Mashup Awards(MA)」についてのご紹介がありました。参加者が全員女性というワークショップはMA史上初めてのこと。「通常のMAイベントは9割9分くらい男性ですが、今回は女性ばかりで緊張します」と、伴野さん。そもそも今回のQuintechプロデュースイベントも、参加者の大半が男性という状況を改善し、「もっと女子の参加者を増やしたい!」という伴野さんの想いから開催が決まったそうです。

「マッシュアップ」とはもともと音楽関連の用語で、違う曲と違う曲を「かけあわせる」という音楽の手法。Webプログラミングにおける「マッシュアップ」とは、Web上のサービスや、公開されているAPIを複数かけ合わせることで新しいサービスをつくるという意味になります。というわけで、MA8は「マッシュアップ」の技術をもとに新しいユーザー体験を生み出すアプリケーション開発コンテストなのです。

 さらに、企業賞がたくさん用意されていて「賞が取りやすい」コンテストになっているそう。実は私も昨年参加したMA7の授賞式イベントでは、授賞の数だけでも盛りだくさんで、応募者と協力企業の多さを感じました。プロレスリングで開催された昨年のMA7授賞式レポートはこちらから

 今年のMA8では電子レンジと動画サイトのマッシュアップなど、実際の「モノ」とのマッシュアップや、キネクトなど最新の入力インターフェスを用いたマッシュアップなどがトレンドなのだそう。どんなハードウェアとのマッシュアップ作品が生まれるのか、授賞式が楽しみです!

 今年は10月31日まで応募受付中だそうです。司会を担当したQuintechの辰巳ゆかりさんも言っていましたが、締切ぎりぎりでも、「速攻でつくって出す!」ことも「根性があればできる!」。ちなみに、Tech総研も「Tech総研アプリ賞」を用意しているそうです。エンジニアのキャリアアップに役立つアプリ、ぜひ応募してくださいね!

「天気予報API」で、ブラウザ上で「天気を表示」ボタンを表示

 それでは、実際にAPIについて学ぶセッションに移ります。前半はQuintech柳田亜沙美さんの「APIって何?」というテーマの基礎演習で、後半はMA8のAPIパートナー7社に、ハンズオン形式でAPIを教えていただく応用演習という参加型セッション。
「まず前半の基礎演習では、実際に『API』を使ってもらいます。後半はその応用演習として、講師の方に直接手取り足取り教えてもらいましょう。APIについて『理解できたな』という感触を得てもらえたらうれしいです」と、辰巳さん。

 その前半の基礎演習では、ちょっと先生っぽいファッションの柳田さんが登場です。
「現在はディレクションや企画がメインで、業務でがっつりプログラミングをしてるわけじゃありませんが、たまに書いたりすることがあります。最近よく使うAPIは、Facebook API、Twitter API 、YouTube API、楽天商品サーチAPI、Google Maps APIなど。簡単に爆速でプログラムが書けちゃうところがAPIの魅力です」(柳田さん)

 今回の演習では「天気予報API」を使って説明しました。 「お天気アプリをつくろうと思ったら、明日の天気を全地域調べて、入力して、それを出力して……みたいなこととか、考えるだけでもめんどくさいですよね。そこで登場するのが、天気予報APIです! 天気予報APIは、『地域の情報を渡すと、その地域の天気予報が返ってくる』というものです。ある地域の天気予報を表示させようと思ったときに、APIを使えば『質問を投げる』で2〜3行、『返ってきた情報を表示させる』で2〜3行くらいですみます。APIを使えば一見難しいことも、簡単にできるようになるのです」
 と、柳田さん。

 なるほど〜。「APIって便利で楽しいかも♪」と、思えたところで、次は実際に手を動かしてみました。柳田さんが用意したHTMLコードを、テキストエディタにコピーペーストし、ブラウザ上で「天気を表示」ボタンを表示してみるみなさん、真剣な表情です。

柳田 亜沙美さん
柳田 亜沙美さん

<html>
<meta charset="UTF-8">
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
</script>

<input type="button" id="btn" value="天気を表示" />
<div id="weather"></div>
<div id="mintemp"></div>
<div id="maxtemp"></div>

</html>

 ここまではみなさん順調。さらに、JavaScriptで書かれた天気予報APIをプログラムに追加します。

$(function() {
  // ボタン・クリック時の挙動を定義
  $('#btn').click(function() {
    var domain = "w002.tenkiapi.jp" // 指定のドメイン ex. w002.tenkiapi.jp
      var userid = "c5b6ec7186624fb09b356a6e51a3bd0af59ec2ee" // 指定のユーザーID
      var area = "4410" // 地域コード ex. 東京地方なら4410
      var day = "02" // 天気予報の取得日時 01:当日、02:翌日、03:翌々日
      $.getJSON(
      // APIのURL
      'http://' + domain + '/'+userid + '/daily/?p1='
       + area + '&p2=' + day + '&type=jsonp&callback=?',
      function(data) { // コールバック関数で結果データを処理
        console.debug(data);
      });
    });
  });

 ここは、地域を指定して「天気を表示」ボタンを押したときに、APIに渡すキーや地域情報や予報の日付などを指定する部分。ここから、APIから帰ってきた数値を出すという部分を書いていきます。

var weather = data.daily.wDescription;
var mintemp = data.daily.minTemp
var maxtemp = data.daily.maxTemp

// 結果データを<div>要素に反映
$('#weather').html(weather);
$('#mintemp').html(mintemp);
$('#maxtemp').html(maxtemp);

 ここでは、若干苦戦している女子も……。でも無事プログラムが動くと、「できた!」「すごーい!」とみんな動かせたことを楽しんでいました。APIって、ホントに面白い☆

■柳田さんの資料
http://dl.dropbox.com/u/3773131/QuintechxMA8_%E6%BC%94%E7%BF%92.pdf

APIってすごい! MA8のAPIパートナー7社の講師と応用演習

 さて、ここから、使ってみたいAPIによってチームに分かれました。今回ご協力いただいたのは、下記7社のエンジニアのみなさま。

■各種API

一般財団法人 日本気象協会・アップフロンティア株式会社
天気予報API
http://tenkiapi.jp

メタデータ株式会社 感情分析API
http://www.metadata.co.jp/5w1h-api-ma8.html

頓智ドット株式会社 tab API
http://jyukon.blogspot.jp/2012/10/ma8-meetup-tab-api.html?spref=tw
▼今回のワークショップで使った資料を特別に公開しています!
http://bit.ly/ma8-tab

リクルート HotpepperBeauty サロン検索API
http://webservice.recruit.co.jp/relax/reference.html

PUX株式会社 画像認識API
http://www.panasonic.co.jp/pux/api_sdk/

楽天株式会社 トラベル空室検索API
http://webservice.rakuten.co.jp/api/vacanthotelsearch/

株式会社KDDIウェブコミュニケーションズ 電話API boundio
http://boundio.jp/

 私は、KDDIさんの電話API、boundioのテーブルに参加しました。電話APIとは、Webから「電話をかける」ことができるようになるAPI。例えば、レストランのウェイティングリストの代わりに、その場でお客さんが自分の電話番号を登録すると席が空いたときに、自動でお客さんに電話をしてくれる、というような利用可能性があります。

 同様のサービスとしては、twilioというサービスがあるそうで、電話APIの開発者が10万人くらい登録されているのだそう。これまで、「電話API」を知らなかったのですが、10万人以上もの人が、こういう「電話API」を利用して開発をしているんですね! 興味津々です。

 boundioでは、まず、電話したい電話番号(アナログでもデジタルでも可)を入力します。一番簡単なやり方は、手動で電話番号を入力するやり方で、その電話番号宛てに、実際に電話をかけることができます。

 では、電話をかけるとどうなるのか? このAPIでは、「通話」を行うのではなく、相手が電話に出たときに、管理画面上にアップロードした音声ファイルを流す、ということができます。面白かったのは、テキスト文字列を音声ファイルに変換できる音声合成機能。これをこのまま再生ファイルとして保存することができます。

 私は、「こんにちは、田中里実です。季節の変わり目なので風邪には気をつけてください」という文章をテキストで打って、音声ファイルにして保存。自分の電話番号にかけて、電話に出るとそれが流れる、という一連の機能を実装してみました。

 難しそうに思えますが、それが、実はなんと、たったの3行くらいのコードで実装できました! 具体的に言うと、コードは下記だけ。APIってすごい!

<html>
<meta charset="UTF-8">
<head>
<title>架電サンプル1</title>
</head>
<body>
<form method="post" action="https://boundio.jp/api/vd1/【ユーザーシリアルID】/call">
<p>電話番号:<input type="text" name="tel_to" value=""></input></p>
<p>再生ファイル:<input type="text" name="cast" value=""></input></p>
<p>APIアクセスキー:<input type="text" name="key" value=""></input></p>
<p><input type="submit" value="架電を開始する" />
</form>
</body>
</html>
APIを使った開発は予想以上に楽しかった! 最後はシャンパンで乾杯♪

 APIを触るのに夢中で様子を見に行けなかったのですが(笑)、ほかのテーブルに参加したTech女子のみなさんからも、
「楽しかった! 実際に動いたら感動する」
「私でもやれそうってちょっと思った。頑張って書いてみようかなー」
という声が聞けたので、みんな楽しんでくれていたのかな? APIを使いこなせるTech女子が増えたら、楽しいサービスがたくさん生まれそうですね♪

 続いて、ニフティの上野さんから、ニフティクラウドC4SAのご紹介。MA8のインフラパートナーで、書いたコードをコピペするだけでWebにすぐに公開できる、アイデアを形にするクラウドサービスを提供しています。

上野 聡志さん
ニフティ 上野 聡志さん

 プログラミング初心者にとっては、開発環境やサーバー周りの環境を整えるのも一つのハードル。こんなに簡単にリリースできて、APIで爆速に開発できるなら、今回のイベントに参加してくれたTech女子からも、楽しい応募作品が生まれるかもしれません!

 最後はQuintechイベント恒例のシャンパンで乾杯。APIについても引き続き質問が出ていたり、活用アイデアについて議論が起きていたり、いつものQuintechイベントよりもちょっと真面目な雰囲気だったような気がします(笑)。

 いろんなAPIを知ることができ、触ったことのなかったAPIでプチ開発ができて、とても楽しかったです♪ 参加していただいたTech女子のみなさま、APIを教えていただいたMA8のAPIパートナーのみなさま、ありがとうございました!

  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
あなたを求める企業がある!
まずはリクナビNEXTの「スカウト」でチャンスを掴もう!
スカウトに登録する

このレポートを読んだあなたにオススメします

初の高校生と女性ファイナリストも! Tech総研賞は「PocketCode」

応募466作品「Mashup Awards 8」最終バトルの結果は?

今年もやってきたマッシュアップアワード「Mashup Awards 8」。今回は「TechCrunch Tokyo …

応募466作品「Mashup Awards 8」最終バトルの結果は?

応募作品は海外含め500件! Tech総研賞は「tipshare.info」に

MA7最終審査――リング上で凄絶なエンジニアバトル!

全国各地のWeb開発者の勢いを取り込み、今年も元気よく開催されたマッシュアップアワード。その総決算にあたる最終審査会が、12月…

MA7最終審査――リング上で凄絶なエンジニアバトル!

ブラウザベースでHTML5、JavaScript、CSSのコードが投稿できる

5千人以上の技術者が利用する面白法人カヤックjsdo.it

Web開発者が技術、デザイン、アイデアを競い合うWebアプリコンテスト「Mashup Awards 6」。Tech総研編集部も、…

5千人以上の技術者が利用する面白法人カヤックjsdo.it

約180種類のAPIや、プラットフォームをフル活用マッシュアップ!

ハッカソン型開発者イベント潜入!Mashup Awards6開催

Web開発者の祭典、マッシュアップアワード(Mashup Award)が今年も始まっている。セミナーや、1日合宿形式の開発者イベ…

ハッカソン型開発者イベント潜入!Mashup Awards6開催

勝間和代さんおススメのTwitter、Facebook、ニコ動をフル活用!

広瀬香美さんが語る、IT業界女子への期待とは?

「Mashup Awards 7」から生まれたIT業界を盛り上げる女子コミュニティ「MUP48」と、Tech総研が開催したIT女…

広瀬香美さんが語る、IT業界女子への期待とは?

スキルや経験はよさそうなのに…(涙)

人事が激白!悩んだ挙句、オファーを出さなかった理由

オファーが来る人、来ない人の差って何だろう?過去にスカウトを利用したことがある企業の採用担当者55人の声をもとに、「惜しいレジュメ」の特徴を…

人事が激白!悩んだ挙句、オファーを出さなかった理由

この記事どうだった?

あなたのメッセージがTech総研に載るかも

あなたの評価は?をクリック!(必須)

あなたのご意見お待ちしております

こちらもお答えください!(必須)

歳(半角数字)
(全角6文字まで)
  • RSS配信
  • twitter Tech総研公式アカウント
  • スカウト登録でオファーを待とう!
スマートグリッド、EV/HV、半導体、太陽電池、環境・エネルギー…電気・電子技術者向け特設サイト

PAGE TOP