ウェブアプリ入門PART2 WebAPIを使って マッシュアップ!! 福野泰介 jig.jp代表 @taisukef #kosenbc
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
ウェブアプリ入門PART2
WebAPIを使って
マッシュアップ!!
福野泰介 jig.jp代表
@taisukef #kosenbc
ロボコン、
プロコンに続き、
高専ビジコン！
エントリー受付
おさらい
HTMLとCSSでモバイルウェブアプリが
できそう
もっと高度に
ウェブ上の便利なサービスをWebAPIを使ってマッシュアップ！
WebAPIとは
ウェブ上で使える機能、API (=Application Programming Interface)
マッシュアップ
便利な機能を混ぜて新しいものを作ること
例）地図×写真、Twitter×グルメ・・・
混ぜるのに使うもの
ブラウザで動作するプログラミング言語
JavaScript
JavaScriptとは
HTML内に書くプログラミング言語Javaとは別物なので注意
<script>
プログラムを書くタグ<head>の中に書く
動かしてみる<!DOCTYPE html><html><head><title>JS</title><script>onload = function() {
alert(“ABC”);}</script></head><body></body></html>
onload = function()
HTMLが読み込まれてすぐに動かす関数を設定する
alert
メッセージを表示する関数
alert(“動かしてみました”);
“”は半角で書く必要あり！！
タグを作る<!DOCTYPE html><html><head><title>JS</title><script>onload = function() {
var div = document.createElement("div");div.innerHTML = “鯖江”;document.body.appendChild(div);
}</script></head><body></body></html>
CSSとの組み合わせ<style>#t1 { color: #f00; }</style><script>onload = function() {
var div = document.createElement("div");div.innerHTML = "鯖江";div.id = "t1";document.body.appendChild(div);
}</script>
ボタン<script>add = function(s) {
var div = document.createElement("div");div.innerHTML = s;div.id = "t1";document.body.appendChild(div);
}</script><body><button onclick=‘add(“鯖江”)'>オス</button></body>
<button>
ボタンを表示するタグ
onclickで実行するJavaScriptの関数を
指定できる
ユーザ関数add = function(s)
パラメータ付の関数 add を作るadd(“鯖江”)
という形で呼び出す
test = function(n, m, l) などパラメータ数は増やせる
WebAPIを呼ぶ
TwitterのWebAPIを使って特定キーワードの最新のツイートを取得
JSONP
他のウェブサービスとJavaScriptで連携するしくみ（ジェイソン・ピー）
jsonp関数を作る
jsonp = function(url) {var script = document.createElement("script");script.setAttribute("src", url);var head =
document.getElementsByTagName("head")[0];head.appendChild(script);
}
Twitter検索関数twget = function() {
var tag = '鯖江';var url = "http://search.twitter.com/search.json";jsonp(url + "?callback=tw&q=" + encodeURI(tag));
}
※詳細な仕様はこちらhttp://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search
検索結果表示関数tw = function(data) {
for (var i = 0; i < data['results'].length; i++) {var twi = data['results'][i];add(twi['from_user'] + ": " + twi['text']);
}}
呼び出し部分<!DOCTYPE html><html><head><script>add = function(s) 略jsonp = function(url) 略twget = function() 略tw = function(data) 略</script><body><button onclick='twget()'>オス</button></body></html>
他もいろいろJSONPで利用可能WebAPIいろいろ探してみてください
Flickr、ホットペッパー、楽天などなど・・・
エントリーお待ちしてます
質問Twitterで
下記ハッシュタグを付けてツイートしてください
#kosenbc
完
Related Documents
