はじめてのモバイルウェブアプリ 2

ウェブアプリ入門PART2

WebAPIを使って

マッシュアップ!!

福野泰介 jig.jp代表

@taisukef #kosenbc

ロボコン、

プロコンに続き、

高専ビジコン！

エントリー受付

おさらい

HTMLとCSSでモバイルウェブアプリが

できそう

もっと高度に

ウェブ上の便利なサービスをWebAPIを使ってマッシュアップ！

WebAPIとは

ウェブ上で使える機能、API (=Application Programming Interface)

マッシュアップ

便利な機能を混ぜて新しいものを作ること

例）地図×写真、Twitter×グルメ・・・

混ぜるのに使うもの

ブラウザで動作するプログラミング言語

JavaScript

JavaScriptとは

HTML内に書くプログラミング言語Javaとは別物なので注意

動かしてみる<!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

はじめてのモバイルウェブアプリ 2

Internet