Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)


Published on

このセッションでは最近登場した HTML5 の新しい機能や関連仕様について概要を解説します。各ブラウザによるここ半年のサポート状況や、どのブラウザにもサポートされていない HTML5 の新機能についてもご紹介します。

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)

  1. 1. Developer Day Google 2010 HTML5 Update Michael(tm) Smith 2010年9月27日月曜日
  2. 2. Developer Day Google 2010 Michael(tm) Smith • • 2010年9月27日月曜日
  3. 3. Developer Day Google 2010 HTML5 and friends • HTML5 spec itself • CSS3, CSS vendor extensions • SVG • related APIs 2010年9月27日月曜日
  4. 4. Developer Day Google 2010 CSS3 vertical text? • WebKit bug 46123 • • “Implement block-flow support for all of layout” • master bug for vertical-text support • Dave Hyatt 2010年9月27日月曜日
  5. 5. Developer Day Google 2010 Bug 46123: related bugs • Text • Text • Text • Text 2010年9月27日月曜日
  6. 6. Developer Day Google 2010 Why is vertical text important? • market for e-books in Japan and Taiwan • devices with browser engines that have vertical-text support will have more market value • other e-book publishing platforms already have vertical text support • bring feature parity to the Web platform for this feature 2010年9月27日月曜日
  7. 7. Developer Day Google 2010 New group: Web Notifications • • Chair: Anne van Kesteren (Opera) • Editor: John Gregg (Google) • • 2010年9月27日月曜日
  8. 8. Developer Day Google 2010 What are Web notifications? • OS-independent API for exposing platform-level notification mechanisms to Web applications • useful for any Web application where real-time notifications are useful • Web-based e-mail client, instant-messaging clients, auction sites, etc., can integrate their Web app behavior with the notification features of the operating systems of their end usersText 2010年9月27日月曜日
  9. 9. Developer Day Google 2010 Notification interface (DRAFT) interface Notification : EventTarget { void show(); void cancel(); attribute Function onclick; attribute Function ondisplay; attribute Function onerror; attribute Function onclose; attribute DOMString replaceId; attribute DOMString dir; }; 2010年9月27日月曜日
  10. 10. Developer Day Google 2010 NotificationCenter interface the interface interface NotificationCenter { // permission values const unsigned long PERMISSION_ALLOWED = 0; const unsigned long PERMISSION_UNKNOWN = 1; const unsigned long PERMISSION_DENIED = 2; attribute unsigned long permissionLevel; void requestPermission(in Function callback) raises(Exception); Notification createNotification(in DOMString iconUrl, in DOMString title, in DOMString body); }; 2010年9月27日月曜日
  11. 11. Developer Day Google 2010 Examples var notification = window.notifications.createNotification("mail.png" , "New Email Received"); notification.ondisplay = function() { setTimeout(notification.cancel(), 15000); }; var notification = window.notifications.createWebNotification( "/reminder.html?eventId=" +; notification.onclose = function() { cancelReminders(event); }; 2010年9月27日月曜日
  12. 12. Developer Day Google 2010 New group: Web Performance • charter: • chair: Arvind Jain (Google), Jason Weber (Microsoft) • editor: Zhiheng Wang (Google) • draft: Navigation Timing • 2010年9月27日月曜日
  13. 13. Developer Day Google 2010 What is “Navigation Timing”? • Current JavaScript-based mechanisms cannot provide complete end-to-end user-latency data for a Web app • allow JavaScript mechanisms to provide complete client-side latency measurements within Web apps, for the purpose of evaluating user's perceived page load time 2010年9月27日月曜日
  14. 14. Developer Day Google 2010 NavigationTiming interface interface NavigationTiming { readonly attribute unsigned longlong navigationStart; readonly attribute unsigned longlong unloadEventStart; readonly attribute unsigned longlong unloadEventEnd; readonly attribute unsigned longlong redirectStart; readonly attribute unsigned longlong redirectEnd; readonly attribute unsigned longlong fetchStart; readonly attribute unsigned longlong domainLookupStart; readonly attribute unsigned longlong domainLookupEnd; readonly attribute unsigned longlong connectStart; readonly attribute unsigned longlong connectEnd; readonly attribute unsigned longlong requestStart; readonly attribute unsigned longlong requestEnd; readonly attribute unsigned longlong responseStart; readonly attribute unsigned longlong responseEnd; readonly attribute unsigned longlong domLoading; readonly attribute unsigned longlong domInteractive; readonly attribute unsigned longlong domContentLoaded; readonly attribute unsigned longlong domComplete; readonly attribute unsigned longlong loadEventStart; 2010年9月27日月曜日
  15. 15. Developer Day Google 2010 NavigationInfo interface interface NavigationInfo { const unsigned short TYPE_NAVIGATE = 0; const unsigned short TYPE_RELOAD = 1; const unsigned short TYPE_BACK_FORWARD = 2; const unsigned short TYPE_NEW_WINDOW = 3; const unsigned short TYPE_RESERVED = 255; readonly attribute unsigned short type; readonly attribute unsigned short redirectCount; }; 2010年9月27日月曜日
  16. 16. Developer Day Google 2010 window.performance.timing attribute interface Performance { readonly attribute NavigationTiming timing; readonly attribute NavigationInfo navigation; }; [Supplemental] interface Window { readonly attribute Performance performance; }; 2010年9月27日月曜日
  17. 17. Developer Day Google 2010 Example var t = performance.timing; var n = performance.navigation; if (t.loadEnd > 0) { var page_load_time = t.loadEnd - t.navigationStart; if (n.type == n.TYPE_LINK) { alert (page_load_time); } } 2010年9月27日月曜日
  18. 18. Developer Day Google 2010 Web Audio Incubator Group • • programatically read and write raw audio data 2010年9月27日月曜日
  19. 19. Developer Day Google 2010 Web Audio APIs • experimental APIs from Google, Mozilla • Google Audio API in Chrome beta/dev-channel • Mozilla Audio API now in Firefox 4 beta • samples/audio/specification/specification.html • Mozilla Audio API now in Firefox 4 beta • 2010年9月27日月曜日
  20. 20. Developer Day Google 2010 Mozilla Audio Data API interface nsIDOMNotifyAudioAvailableEvent : nsIDOMEvent { readonly attribute jsval frameBuffer; readonly attribute float time; }; HTMLMediaElement additions readonly attribute unsigned long mozChannels; readonly attribute unsigned long mozSampleRate; attribute unsigned long mozFrameBufferLength; HTMLAudioElement additions void mozSetup(in long channels, in long rate); unsigned long mozWriteAudio(array); unsigned long long mozCurrentSampleOffset(); 2010年9月27日月曜日
  21. 21. Developer Day Google 2010 Example: Reading audio <audio id="audio" src="song.ogg"></audio> <script> var audio = document.getElementById("audio"); audio.addEventListener('MozAudioAvailable', audioAvailableFunction, false); audio.addEventListener('loadedmetadata', loadedMetadataFunction, false); </script> 2010年9月27日月曜日
  22. 22. Developer Day Google 2010 Example: Writing audio // Create a new audio element var audioOutput = new Audio(); // Set up audio element with 2 channel, 44.1KHz audio stream. audioOutput.mozSetup(2, 44100); // Write samples using a Typed Array var samples = new Float32Array([0.242, 0.127, 0.0, -0.058, -0.242, ...]); var numberSamplesWritten = audioOutput.mozWriteAudio(samples); 2010年9月27日月曜日
  23. 23. Developer Day Google 2010 Google AudioNode API interface AudioNode { void connect(in AudioNode destination, in unsigned long output = 0, in unsigned long input = 0); void disconnect(in int output = 0); readonly attribute AudioContext context; readonly attribute unsigned long numberOfInputs; readonly attribute unsigned long numberOfOutputs; } 2010年9月27日月曜日
  24. 24. Developer Day Google 2010 Example function setupAudioContext() { context = new AudioContext(); compressor = context.createCompressor(); gainNode1 = context.createGainNode(); streamingAudio = document.getElementById('audioTagID'); streamingAudio.audioSource.connect(gainNode1); gainNode1.connect(compressor); compressor.connect(context.destination); } 2010年9月27日月曜日
  25. 25. Developer Day Google 2010 Example function playSound() { var oneShotSound = context.createBufferSource(); oneShotSound.buffer = dogBarkingBuffer; // Create a filter, panner, and gain node. var lowpass = context.createLowPass2Filter(); var panner = context.createPanner(); var gainNode2 = context.createGainNode(); // Make connections oneShotSound.connect(lowpass); lowpass.connect(panner); panner.connect(gainNode2); gainNode2.connect(compressor); // Play 0.75 seconds from now oneShotSound.noteOn(context.currentTime + 0.75); } 2010年9月27日月曜日
  26. 26. Developer Day Google 2010 new HTML5 parsers • conform to parsing algorithm in HTML5 spec • ensure same DOM for any given byte stream • Mozilla was first to implement and ship (Henri Sivonen); now in Firefox 4 • WebKit now has HTML5 parser too (Adam Barth and Eric Seidel); now in Chrome, WebKit • IE9 parser does not conform to the HTML5 spec but uses some aspects of it 2010年9月27日月曜日
  27. 27. Developer Day Google 2010 WebSocket status • two parts: (1) client-side API, (2) protocol • client-side API is simple • WebSocket protocol spec is still unstable • WebSocket protocol will become more complex, not backward-compatible • Ian Fette is now editor of protocol spec • all server libraries will change; browsers too 2010年9月27日月曜日
  28. 28. Developer Day Google 2010 Other new APIs • Contacts API: read access to a user's unified address book (useful on mobile, etc.) • Media Capture API: “camera” API; HTML form enhancements to provide access to device image, audio, video capture capabilities of device (useful on mobile, etc.) 2010年9月27日月曜日
  29. 29. Developer Day Google 2010 Contact interface interface Contact { readonly attribute DOMString id; attribute DOMString displayName; attribute ContactName name; attribute DOMString nickname; attribute ContactField[] phoneNumbers; attribute ContactField[] emails; attribute ContactAddress[] addresses; attribute ContactField[] ims; attribute ContactOrganization[] organizations; attribute DOMString updated; attribute DOMString birthday; attribute DOMString anniversary; attribute DOMString gender; attribute DOMString note; attribute ContactField[] photos; attribute ContactField[] tags; attribute ContactField[] relationships; attribute ContactField[] urls; attribute DOMString utcOffset; }; 2010年9月27日月曜日
  30. 30. Developer Day Google 2010 Contacts API example function successContactFindCallback(contacts) { // do something with resulting contact objects for (var i in contacts) alert(contacts[i].displayName); // ... } function generalErrorCB(error) { // do something with resulting errors alert(error.code); // ... } // Perform address book search. Obtain 'name' and 'emails' properties // and initially filter the list to Contact records containing 'Bob': navigator.service.contacts.find(['name', 'emails'], successContactFindCallback, generalErrorCB, {filter: 'Bob'} ); 2010年9月27日月曜日
  31. 31. Developer Day Google 2010 Capture API <input type="file" accept="image/*" id="capture"> <input type="file" accept="image/*;capture=camera" id="capture"> 2010年9月27日月曜日
  32. 32. Developer Day Google 2010 Example var captureInput = document.getElementById('capture'); var file = captureInput.files[0]; if (file) { file.getFormatData(displayFormatData, errorHandler); //asynch } // success callback when getting format data function displayFormatData(formatData) { var mainType = file.type.split("/")[0]; // "image", "video" or "audio" var mediaDescriptionNode = document.createElement("p"); if (mainType === "image") { mediaDescriptionNode.appendChild(document.createTextNode( "Dimensions " + formatData.width + "x" + formatData.height); } else { mediaDescriptionNode.appendChild(document.createTextNode( "Duration: " + formatData.duration + "s"); } captureInput.parentNode.insertBefore(mediaDescriptionNode, captureInput); 2010年9月27日月曜日
  33. 33. Developer Day Google 2010 HTML5 features unimplemented • HTML5 forms (Web Forms 2) still only completely implemented in Opera; other browsers still like many of the UI parts • HTML5 <details> element; expandable view of detail info, as in, e.g., OS “Get Info” • HTML5 context-menu mechanism; enables a Web app to customize browser context menu (menu shown by right- clicking) 2010年9月27日月曜日
  34. 34. Developer Day Google 2010 HTML5 details element <section class="progress window"> <h1>Copying "Really Achieving Your Childhood Dreams"</h1> <details> <summary>Copying... <progress max="3755" value="9752"></progress> 25%</summary> <dl> <dt>Transfer rate:</dt> <dd>452KB/s</dd> <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>Remote filename:</dt> <dd>/www/lectures/raycd.m4v</dd> <dt>Duration:</dt> <dd>01:16:27</dd> <dt>Color profile:</dt> <dd>SD (6-1-6)</dd> <dt>Dimensions:</dt> <dd>320×240</dd> </dl> </details> </section> 2010年9月27日月曜日
  35. 35. Developer Day Google 2010 HTML5 context menu <form name="npc"> <label>Character name: <input name=char type=text contextmenu=namemenu></label> <menu type=context id=namemenu> <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandName()"> <command label="Prefill fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"> </menu> </form> 2010年9月27日月曜日
  36. 36. Developer Day Google 2010 Thanks • • 2010年9月27日月曜日