第5回ITeLT

1. 初めてのAPI体験記
AMG Solution
池島 佑紀
©2015 AMG Solution inc. 1

2. 自己紹介
池島 佑紀
2016年新卒入社
・出身：茨城
・趣味：ロードバイク

3. ©2016 AMG Solution inc. 3
APIって何？
Application Programming Interface
“プログラムの手間を省くため、もっと簡潔
にプログラムできるように設定されたイン
ターフェース”
- Wikipediaより

4. ©2016 AMG Solution inc. 4
APIって何？
API
入力 出力

5. ©2016 AMG Solution inc. 5
APIを使ってみよう!
■お天気情報API
・livedoor お天気情報サービス
入力:地域ID(参考URLから取得)
出力:地域の気象情報(JSONデータ)
参考URL:http://weather.livedoor.com/weather_hacks/webservice

6. ©2016 AMG Solution inc. 6
APIを使う
天気情報を取得するソース
//リクエストURL 東京:130010
var url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=130010'
$.getJSON(url, function (data) {
(中略)
//天気情報
output += '<td>' + data.location.prefecture + '</td>';
output += '<td>' + data.location.city + '</td>';
output += '<td>' + data.forecasts[1].date + '</td>';
output += '<td>' + data.forecasts[1].telop + '</td>';
output += '<td>' + data.forecasts[1].temperature.max.celsius + '</td>';
output += '<td>' + data.forecasts[1].temperature.min.celsius + '</td>';
(中略)

7. ©2016 AMG Solution inc. 7
APIを使う
お天気情報取得

8. ©2016 AMG Solution inc. 8
APIを使う
お天気情報取得

9. ©2016 AMG Solution inc. 9
APIを使ってみて
・想像以上に利用も仕組みも簡単！
・APIを使うことよりjqueryの実装のほうが難
しい
・APIを組み合わせると面白い物が作れそう

10. ©2016 AMG Solution inc. 10
ご清聴ありがとうございました