Your SlideShare is downloading. ×
0
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,058

Published on

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

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,058
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Developer Day Google 2010 HTML5 Update Michael(tm) Smith 2010年9月27日月曜日
  • 2. Developer Day Google 2010 Michael(tm) Smith •mike@w3.org • http://twitter.com/sideshowbarker 2010年9月27日月曜日
  • 3. Developer Day Google 2010 HTML5 and friends • HTML5 spec itself • CSS3, CSS vendor extensions • SVG • related APIs 2010年9月27日月曜日
  • 4. Developer Day Google 2010 CSS3 vertical text? • WebKit bug 46123 • https://bugs.webkit.org/show_bug.cgi?id=46123 • “Implement block-flow support for all of layout” • master bug for vertical-text support • Dave Hyatt 2010年9月27日月曜日
  • 5. Developer Day Google 2010 Bug 46123: related bugs • Text • Text • Text • Text 2010年9月27日月曜日
  • 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. Developer Day Google 2010 New group: Web Notifications • http://www.w3.org/2010/web-notifications/ • Chair: Anne van Kesteren (Opera) • Editor: John Gregg (Google) • http://dev.w3.org/2006/webapi/WebNotifications/publish/ • http://lists.w3.org/Archives/Public/public-web-notification/ 2010年9月27日月曜日
  • 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. 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. 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. Developer Day Google 2010 Examples var notification = window.notifications.createNotification("mail.png" , "New Email Received"); notification.ondisplay = function() { setTimeout(notification.cancel(), 15000); } notification.show(); var notification = window.notifications.createWebNotification( "/reminder.html?eventId=" + event.id); notification.onclose = function() { cancelReminders(event); } notification.show(); 2010年9月27日月曜日
  • 12. Developer Day Google 2010 New group: Web Performance • charter: http://www.w3.org/2010/06/webperf.html • chair: Arvind Jain (Google), Jason Weber (Microsoft) • editor: Zhiheng Wang (Google) • draft: Navigation Timing • http://dev.w3.org/2006/webapi/WebTiming/ 2010年9月27日月曜日
  • 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. 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. 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. 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. 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. Developer Day Google 2010 Web Audio Incubator Group • http://w3.org/2005/Incubator/audio/wiki/ • programatically read and write raw audio data 2010年9月27日月曜日
  • 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 • http://chromium.googlecode.com/svn/trunk/ samples/audio/specification/specification.html • Mozilla Audio API now in Firefox 4 beta • https://wiki.mozilla.org/Audio_Data_API 2010年9月27日月曜日
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Developer Day Google 2010 Thanks •mike@w3.org • http://twitter.com/sideshowbarker 2010年9月27日月曜日

×