検索 - みる会図書館

検索対象: Building the Realtime User Experience

Building the Realtime User Experienceから 78件ヒットしました。

Building the Realtime User Experience


BuiIding the ReaItime U 史 「 Experience by Ted Roden Copyright ◎ 2010 Ted R0den. AII rights reserved. printed in the United States Of America. PubIished by O'Reilly Media, lnc. , 1005 Gravenstein Highway North, Sebastopol, CA 95472. O'Reilly books may be purchased for educational, business, or sales promotional use. Online editions are alSO available for most titles ( わ れ p : 〃 川 ). sa. / 4 ⅱ わ 00 た SO れ ″ 〃 e 工 0 川 ). For more information, contact our corporate/institutional sales department: (80()) 998-9938 or co 甲 ora 惚@0 尾 〃 い . co 川 . Editor: Simon St. Laurent Production Editor: Kristen Borg Copyeditor: Genevieve d'Entremont Proofreader: Teresa Barensfeld Production Services: MoIIy Sharp lndexer: Ellen Troutman Cover Designer: Karen Montgomery te 「 iO 「 Designer: David Futato lllustrator: Robert Romano Printing History: July 2010: First Edition. NutsheII Handbook, the Nutshell Handbook 10g0 , and the O'Reilly logo are registered trademarks of O'ReiIIy Media, lnc. BuiIding ビ Realtime User Ex 〃 げ 海 1 記 , the image of a myna bird, and related trade dress are trademarks 0f O'Reilly Media, lnc. Many Of the designations used by manufacturers and sellers tO distinguish their products are claimed as trademarks. Where those designations appear in this b00k, and O'Reilly Media, lnc. , was aware 0f a trademark claim, the designations have been printed in caps or initial caps. WhiIe every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or om1SSions, or for damages resulting frOI れ the use Of the information con- tained herein. ー This book uses RepKoverTM, a durable and 飛 、 ible lay-flat binding. ISBN: 978-0-596-80615-6 [M] 1277147714

Building the Realtime User Experience


the basic CSS for the site - - > く link rel="stylesheet" type="text/css" href="/static/main. css" / 〉 く /head> く b0dy onun10ad="GUn10ad()"> く div id="header"> く h1>iPandemic く /hl> く ul id="options"> く / ul > く /diV> く diV id="messageWindow"> く form id="msg-form"> く input id="msg" placeholder="l challenge you t0 a duel! " / > く input type="submit" id="msg-send" value="Send" / > く P> Send a message (whatever you want) t0 challenge the user. く /P> く /form> く /diV> く div id="map"> く /div> く div id="fullscreen"> く /div> く div id="footer"> { % if a110W sms % } SMS is enabled tO { { mobile number } } { % else % } TO enable SMS send " く strong>{{ mobile keyword } } { { mobile key }} く /strong>" tO { { mobile short code } }. { % endif % } く a href="{{ logout_url }}">Log 0ut く /a> く /diV> く /b0dY> く /html> 从 第 don't have much to do for a user who isn't logged in, but once she does log in, we're going t0 want [ 0 load up the JavaScript files that we'll be using from Google. After the standard includes, this HTML file is justthe shellthat we'll end up populating with JavaScript. Feel free to change the CSS styles, but the id attributes should be retained because we'll be referring t0 them directly in the JavaScript. starting from the top of the BODY, we've added a header and an unordered listthat will contain any number Of options for the user at certain points during the game. BelOW that is a DIV, hidden by default, that will allow a user t0 send a message t0 another user during a challenge. Below that we have the map DIV, in which we'll draw the actual 1 れ ap. The fullscreen DIV iS used tO overlay content across the entire screen when the user takes certain actlons. 238 ー Chapter 10 : Putting lt 則 Together

Building the Realtime User Experience


HTML Since there iS no server-side part tO this example, you can put the files wherever ⅱ makes sense in your setup. 嶬 第 ' Ⅱ be creating two files [ 0 [ al : one HTML file and a JavaScript file. The first step ⅲ building these widgets is to write some HTML that will contain them. Create a file called index. html and add the following code: く div class="widget"> く ト - The FriendFeed widget く /div> く div class="content" id="trending-on-twitter"> く /div> く div class="title" id="trending-titIe">Trending く /diV> く div class="widget"> く ! - - The Trending on Twitter widget く b0dY> く /head> く /style> IMG. profile image { max-width : 48px; max-height: 48px DIV. content { overflow: auto; height: 450PX ; } border-bottom: solid lpx #ddd; width : 100 % ; overflow: hidden; display: block; DIV. line { text-align: center; padding-bottom: 3px; padding-top: 3px; font-weight: bold; background-color: #ccc; DIV. title { DIV. widget { display: inline-table; } DIV { width: 300PX ; } く style> く head> く html> く ! DOCTYPE HTML> く /html> く /body> く script type="text/javascript" src="homepage. js"> く /script> く /div> く div class="content" id="images-on-twitter"> く /div> く div class="title" id="images-tit1e">Live lmages く /diV> く div class="widget"> く ! - - The Widget showing live images posted on twitter く /div> く div class="content" id="friendfeed-updates"> く /diV> く div class="title" id="friendfeed-tit1e">FriendFeed Updates く /diV> 40 ー Chapter 3 : The Dynamic Homepage (Widgets in PseudoreaItime) JavaScript. These widgets will have a simple appearance, and l've left a lot of room for the look and the layout of the elements we'll be building programmatically through The first thing this file does is define a number of CSS style entries. These take care of

Building the Realtime User Experience


/ / if there is a germ, draw it on the map for(var i in germs) { ipGeo. putGermOnMap(germs[i]); This method simply catches the JSON-enoded data that is received from the /cough/ URL. If a message is supplied, we'll display that to the user, but otherwise we simply 100P through all ofthe germs and putthem on the map with a method called ipGeo. put Germ0nMap. Let's go ahead and add that method, along with a couple of others needed tO display the extra germ information on the map: ipGeo. putGermOnMap = function(germ) { var lat = germ. lat; var 10n = germ. 10n; var spread germ. spread; var C010r = germ. ( 010 て ; / / generate a marker that 100kS di 幵 erent than the default = new GIcon(G DEFAULT ICON); var bluelcon "http://www ・ google.com/intl/en us/mapfiles/ms/micons/ bluelcon. image blue-dot. png' ・ bluelcon . iconSize bluelcon. shadowSize = new GSize(46, 46 ) ; { icon: bluelcon } ; var markerOptions var marker = new GMarker(new GLatLng(1at, 10n ) , marker0ptions); / / a110W the user tO click and see the data about this germ GEvent. addListener(marker, ・ click ・ , function() { var d = germ. disease; html = " く div id="' + germ. id + ' html + = " く br> く small>" html + = " く strong>Strain く /strong> : html + = " く strong>Host く /strong>: html + = " く /div>" ipGeo. fu11screenShow(htmI); ー 十 d. strain 十 " く br>" ー + d. host + " く br>" / / show it on the map ipGeo. map. addOver1ay(marker); $('#fullscreen ・ ) . css(' display' , ipGeo. fu11screenShow = function(html) { $('#fullscreen' ) $('#fullscreen'). html(' ipGeo. fu11screenHide / / show and hide the extra germ data ' block ・ ) ; . hide(); = function() { Building the Game ltself ー 247 ' close' ) . attr('class' . c1ick(ipGeo. fu11screenHide) va r a

Building the Realtime User Experience


#toolbar UL { margin: Opx; } #toolbar UL LI { display: inline; } #waiting { text-align: center; font-style: italic; } く /style> く /head> く body> く div id="toolbar"> く u1 > く li > く input checked="yes" type="checkbox" id="all" value="l" / > く label for = " a11 " > A11 く / label > ( く span id="a11-count">O く /span>) く / li > く li > く input checked="yes" type="checkbox" id="hashtags" value="l" / > く label for="hashtags">#hashtags く /label> く input checked="yes" type="checkbox" id="links" value="l" / > ( く span id="retweets-count">0 く /span>) く label for="retweets">retweets く /label> く input checked=' yes" type="checkbox" id="retweets" value="l" / > ( く span id="ats-count">0 く /span>) く label for="ats">@ats く /label> く input checked="yes" type="checkbox" id="ats" value="l" / > ( く span id="hashtags-count">() く /span>) く /div> く / ul > く / li 〉 く li > く / li > く li > く / 1 わ く li > く / li > ( く span id="links-count">0 く /span>) く label for="links">links く /label> く div id="content"> く div id="waiting">Waiting fO て content. く /div> く /bOdy> く /html> . く /div> This is a fairly standard and simple HTML file. lt lays out a basic web page, has the most minimal 0f CSS styling, and includes two JavaScript files. Again, we re including the jsapi from Google's JavaScript hosting, which we'll be using t0 include jQuery. TO include the other JavaScript file, we're using one of the template functions defined by Tornado. Anything inside Of these curly braces is evaluated, and the output is inserted in place. ln this case, it's our lone Python expression, the function call tO static u て 1 ('twitter. js ・ ). This function expands the full URL [ 0 one 0f our static assets. 嶬 み e set up the filesystem path for this function when we initially created the application object. 94 ー Chapter 5 : Taming the Firehose with Tornad0

Building the Realtime User Experience


username If supplied, this method will show the username in bold before the actual update. This is the actual content of the update. This may be a line of text, an image, or any combination 0f HTML elements. As we move through this method, we test the data object for these variables and create the interface for each piece. After creating the main diV element, line, we check the 0bject t0 see whether we should add a profile image. Adding that is as simple as creating an image element with the right attributes and appending it tO the line element. Then, we create the paragraph element, which will be used to display the username and HTML if they are provided, and append it to the line. Once we've built the entire line, we Just prepend it t0 the top 0f the widget. This will display the tweets in reverse chronological order, with each new update being displayed atthe top. This method is called from inside a loop ⅲ the Home. catchTweets method, which runs in a IOOP as well. At the end Of every time through that method, it sets a timeout tO call itself again. After a few times through these loops, this Home. addLine method could potentially add a huge number of elements to the DOM in no time at all. This would take up quite a bit Of RAM and turn a realtime experience intO a sluggish nightmare. TO ensure that things don't get out of hand, we clean up the DOM each time through this method. The next bit of code loops through elements with a CSS class named line and removes all but the most recently added. After displaying the updates themselves, the widget should make it clear exactly how many new updates have been added. TO d0 that, the Home. catchTweets method calls html var high1ightLeve1 / / BreifIy highlight the title, turning it yellow and fading it back } , 150 の ; tit1eDiv. innerHTML = tit1eDiv. innerHTML. replace(/\: . + / , setTimeout(function() { / / Wait a beat and then return the title to the way it was 十 number 十 " new tit1eDiv. innerHTML + = / / update and highlight the title var titIeDiv = document. getEIementById(divId); Home. updateTit1e = function(divld, number) { Home. updateTit1e. Add i い 0 your わ ome 四 ge. file: / / each time this method is called, it slightly changes the C010r of the title if (high1ightLeve1 く 12 ) { / / 12 = / / and run this method again / / if we're not already light grey ( 12 ) , tit1eDiv. style. backgroundC010r var hex = high1ightLeve1. t0String(16); var high1ightStep = function ( ) { The Basic Widgets ー 47 c" in base16 (hex) increase the high1ightLeve1 十 hex 十 hex;

Building the Realtime User Experience


く b0dy class= yui-skin-sam"> く diV id="container"> a super basic login WindOW - - > く div id="login"> く div class="hd">Enter a username く /diV> く !- く div class="bd"> く ト login window content く input type="text" id="username" / 〉 く input type="button" id="login-button" va1ue="Log ln" / > く /diV> く div class="ft"> く /div> く !- login window titlebar login window fOOter - - > く /html> く /b0dY> く /script> く /diV> く /diV> く script type="text/javascript" lnclude a JavaScript file 千 て om Yahoo! く script type="text/javascript" src="{{ static url(' chat. js' ) }}"> く /script> lnclude our 10Ca1 JS file - src="http://yui.yahooapis.(0m/2.8.Or4/buiId/yui10ader/yui10ader-min.js"> 102 ー Chapter6: Chat our 立 directory. We'll add the 訪 file soon; it's important and does all of the previous chapter. lt's simply using Tornado's static url function to include a file from The way we include the other JavaScript file should look familiar after reading the you'll lose the benefit of the styles provided by the library. it comes time tO render the page. You're free tO change or 01 れ it the class names, but the div and body tags. These classes are used by YUI to style the interface elements when One of the things that sticks out about the HTML shown earlier is the class names for oughly realtime experience. Script intO one download. Fewer downloads means faster load times and a more thor- YUI to determine exactly what needs to be downloaded, and it can combine the Java- clude the JavaScript and CSS dependencies. lncluding the external files like this allows parts 0f the YUI library, we're utilizing YUILoader to automatically calculate and in- that you can use only what you need. Because this application will use a few different interface elements called widgets. YUl allows you tO mix and match components so library. This library includes code for everything from Ajax convenience functions to (Yahoo User lnterface Library (YUI) ( 印 : 〃 怩 lo 〃 げ . ッ わ 00. co 襯 レ 切 JavaScript Script and stylesheets from Yah00!. ln this example, we'll be using some of the great The most important thing tO notice about this page is that we're including some Java- for this application is just a shell of a page with the JavaScript includes that we'll need. based applications; it's not about building a complicated user interface. So our HTML applications behave with the same level Of interactivity and responsiveness as desktop- ThiS chat application iS about demonstrating hOW realtime interfaces can make web

Building the Realtime User Experience


Buy this book and get access tO the online edition for 45 days—for free! With Safari B00k5 OnIine, you can: Access the contents ofthousands of technology and business b00k5 第 Quickly search over 7000 bOOks and certification guides 第 DownIoad whole books 0 「 chapters in PDF format, at no extra COSt, tO print 0 「 read on the go Copy and paste code 第 Save up t0 35 % on O'Reilly print books ー New! Access mobile-friendly books directly from cell phones and mobile devices Stay up-to-date on emerging topics before the b00k5 are published 第 Get on-demand access tO evolving manuscripts. 第 lnteract directly with authors of upcoming books Ex が 0 thousands Of hou 「 5 ofvideo on technology and design topics ー Learn from expert video tutorials 第 WatCh and replay recorded conference sessions こ 観 力 Ⅲ Ⅲ , パ れ ea' ″ 物 : 盟 で を 伝 ド 行 ⅲ g the 0 ' RE に げ ・ 8 リ 〃 d 加 9 the ReaItime UserExperience ByTed Roden 」 une 2010 爲 34.99 ISBN 9780596806156 TO try out Safari and the online edition ofthis book FREE fo 「 45 days, go tO ″ ″ Ⅳ .0 i 〃 'y. ( om / 90 0 e 0 と 厄 d and enter the coupon code DDTXZAA. TO see the complete Safari Library, visit safari.oreilly.com/ 0 REILLY 鸞 fa ri 、 .0 re Ⅲ y.com 02009 0 ・ Reilly Media. 旧 (. 0 ・ Reilly logo is a registered trademark of 0 ・ Reilly Media,lnc. 00000 Spreading the knowledge of innovators

Building the Realtime User Experience


CHAPTER 3 The Dynamic Homepage (Widgets in PseudoreaItime) Moving past syndication, which primarily gives you benefits on the backend, this chapter lOOkS at dipping our toes intO realtime experiences on the frontend side Of things. We're going t0 start with an example that uses standard pull requests to build a few dynamic widgets to add to any website or homepage. This example will show the power Of realtime experiences and serve as a good example Of why new technologies are needed [ 0 get the most out Of modern browsers. ln a change from the concepts in previous chapters, all of these examples can be built using nothing more than HTML, a bit 0f CSS, and some JavaScript. N0t only are they based in the web browser, but there is no server setup tO get them up and running. With minor modifications you can easily put any and all of these widgets onto any webpage. The BasicWidgets The first widget that we're going to add to this homepage is a quick view into the trending topics on Twitter ( 印 : ル 襯 げ . CO 川 ). This widget will d0 two things. First, it will use Twitter's API [ 0 find the trending topics on Twitter. Trending topics are key- words that are currently very active in tweets on Twitter. Then, we'll create a realtime feed Of tweets that contain any Of those keywords. SO if "realtime" is a trending topic, this widget will display any tweet containing the word "realtime" as it comes in. 39

Building the Realtime User Experience


This game also requires a fair amount 0f Python code, plus HTML and CSS markup. AII of this code is provided for download on this book's website ( 印 尾 4 川 訪 00 た . co 川 ). lt may be easier [ 0 download the code and follow along with the text rather than typing out each passage. Plus, l'll be omitting some 0f the CSS and nonessential code for brevity in the text, but it's all included on the website and in the working application at the iPandemic website. Getting Set Up The setup of this application involves signing up for different services and acquirmg some API keys. We've already used several 0f these services this b00k. For services that you've already set up, you can either reconfigure the service tO work With this new application or start fresh with each one. we'll be using a number of different technologies to build this application and even hosting it on tWO different servers. TO set up the environment, we're going [ 0 want tO create a couple Of directories. Assuming keeping this project in your home di- rectory, open a terminal window and enter the following COmmandS tO create the basic directory structure Of this project: ~ $ mkdir N/ipandemic ~ $ mkdir N/ipandemic/appengine $ mkdir N/ipandemic/appengine/static ~ $ mkdir ~ $ mkdir %/ipandemic/tornado ~ $ mkdir %/ipandemic/tornado/templates ~ $ mkdir N/ipandemic/tornad0/static GoogIeApp Engine This application uses two different methods [ 0 hostthe code, the first ofwhich is Google App Engine. Chapter 7 includes a complete explanation 0f how t0 sign up for and configure an App Engine account. You can easily reuse the account and application that you previously used. If you are going t0 set up a new application, you should configure itthrough the interface on the App Engine website ( 印 : 〃 4 〃 〃 夜 lg ⅲ e ・ goog . co 川 and then set it up locally. Each App Engine application must have a unique application identifier, which are becoming increasingly hard t0 find. SO, after you create the application on the App Engine website, create a file in ゆ a 〃 d 夜 ⅲ c ん 〃 〃 ビ 〃 g ⅲ ビ called 叩 〃 . ) 司 and add the following code: application: yo - ロ 夘 li ( 0 目 on - ゴ d version: 1 runtime: python api version: 1 handlers: u て 1 : /static static dir: static/ 218 ー Ch 叩 ter 10 : Putting lt AII Together