10 01 2011 Python javascript HTML5 Flask Tweet
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()