HTML5 APIガイドブック コミュニケーション系API編が面白い。ひと通り読んだので、コード書いてみてる。
2章のサンプルコードをFlaskで。サンプルコードは3つのHTMLファイルが必要だけどFlask使えば一つのファイルに全部押し込めるので管理が楽。
初期値は富士市役所のあたりから半径5キロ以内のtweetを探すようにした。で地図をドラッグすると、それに伴いtweetも連動して表示されるので、ほーこんなユーザーいるのか！と新たな発見もあった。
この本は入門書として最適かもしれん。
Flaskコード
#!/usr/bin/env python
# -*- encoding:utf-8 -*-
from flask import Flask
app = Flask(__name__)
@app.route("/")
def processing():
response = """
<!doctype html>
<html lnag=ja>
<head>
<meta charset="utf-8">
<style type="text/css">
.page { margin: 0px auto; border: 0px; padding: 0px; text-align: center;}
</style>
</head>
<body>
<div class=page>
<h1>gmap2tweet</h1>
<iframe src="/googlemap" id=gmap width="500px" height="500px"></iframe>
<iframe src="/twitter" id=twitter width="500px" height="500px"></iframe>
<div id=mesg></div>
</div>
<script>
var initialize = function(){
var origin = location.protocol + "//" + location.host;
var iframes = document.querySelectorAll('iframe');
for(var i = 0; i < iframes.length; i++){
iframes[i].contentWindow.postMessage('init', origin);
}
window.addEventListener('message', function(e){
if (e.origin == origin) {
document.getElementById('mesg').innerHTML = "receive data via xdm::" + e.data;
document.getElementById('twitter').contentWindow.postMessage(e.data, origin);
}
}, false);
}
window.onload = function(){ initialize(); }
</script>
</body>
</html>
"""
return response
@app.route("/twitter")
def twitter_processing():
response = """
<!doctype html>
<html lang=ja>
<head>
<meta charset="utf-8">
</head>
<body>
<div id=mesg></div>
<div id=results></div>
<script>
var origin = location.protocol+"//"+location.host;
var parentWin = null;
var api="http://search.twitter.com/search.json?callback=show&rpp=50&geocode=";
var jsonpObj =null;
var sendJsonp = function(latlng, radius){
if(jsonpObj)
document.body.removeChild(jsonpObj);
var scr = document.createElement('script');
scr.src = api+encodeURIComponent(latlng+","+radius+"km");
scr.type = "text/javascript";
jsonpObj = document.body.appendChild(scr);
};
var show = function(obj){
var results = obj.results;
var out = '';
var template = '<img src="#{img}"> <a href="http://twitter.com/\
#{from_user}" target="_blank"><b>#{from_user}</b></a> #{text}<br />\
#{created_at}<hr />';
for(var i = 0; i < results.length; i++){
var res = results[i];
var tmp = template.replace("#{img}", res.profile_image_url) \
.replace("#{from_user}", res.from_user) \
.replace("#{from_user}", res.from_user);
tmp = tmp.replace("#{text}", res.text) \
.replace("#{created_at}", res.created_at);
out += tmp;
}
document.getElementById('results').innerHTML = out;
};
window.addEventListener('message', function(e){
if(e.origin == origin) {
if (e.data == 'init') {
parentWin = e.source;
} else {
document.getElementById('mesg').innerHTML = e.data;
document.getElementById('results').innerHTML = "読み込み中";
sendJsonp(e.data, 5);
}
}
}, false);
</script>
</body>
</html>
"""
return response
@app.route("/googlemap")
def google_processing():
response = """
<!doctype html>
<html lang=ja>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="padding:0;margin:0;height:500px">
<div id=map_canvas style="width: 100%; height: 100%; border: 0px"></div>
<script>
var parentWin = null;
var origin = location.protocol + "//" + location.host;
var start = function() {
var latlng = new google.maps.LatLng(35.164190, 138.678609);
var myOptions = {zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var getCenter = function(){
var center = map.getCenter();
var lat = center.lat();
var lng = center.lng();
if(parentWin) {
parentWin.postMessage(lat+","+lng, origin);
}
};
window.addEventListener('message', function(e){
if(e.origin == origin) {
if(e.data == 'init') {
parentWin = e.source;
getCenter();
}
} else {
alert("illegal message from " + e.origin);
}
}, false);
google.maps.event.addListener(map, 'dragend', function(e){getCenter();});
google.maps.event.addListener(map, 'zoom_changed', function(e){getCenter();});
};
window.onload = function(){start();};
</script>
</body>
</html>
"""
return response
if __name__ == "__main__":
app.run()
現場でプロが培った Google Analyticsの使い方 (WEB PROFESSIONAL)
Google Maps APIプログラミング入門
Brave Nu World
Back of Beyond
Google App Engineプログラミング入門
やさい畑 2011年 02月号 [雑誌]
徹底解説 HTML5 APIガイドブック コミュニケーション系API編