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

DeveloperDay

Google

HTML5 Update

Michael(tm) Smith

2010年9月27日月曜日

DeveloperDay

Google

Michael(tm) Smith

• mike@w3.org

• http://twitter.com/sideshowbarker

DeveloperDay

Google

HTML5 and friends

• HTML5 spec itself

• CSS3, CSS vendor extensions

• SVG

• related APIs

DeveloperDay

Google

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

DeveloperDay

Google

Bug 46123: related bugs• Text

• Text

DeveloperDay

Google

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

DeveloperDay

Google

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/

DeveloperDay

Google

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

DeveloperDay

Google

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;};

DeveloperDay

Google

NotificationCenter interfacethe interfaceinterface 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);};

DeveloperDay

Google

Examplesvar 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();

DeveloperDay

Google

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/

DeveloperDay

Google

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

DeveloperDay

Google

NavigationTiming interfaceinterface 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;

DeveloperDay

Google

NavigationInfo interfaceinterface 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;};

DeveloperDay

Google

window.performance.timing attributeinterface Performance { readonly attribute NavigationTiming timing; readonly attribute NavigationInfo navigation;};

[Supplemental]interface Window { readonly attribute Performance performance;};

DeveloperDay

Google

Examplevar 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); }}

DeveloperDay

Google

Web Audio Incubator Group

• http://w3.org/2005/Incubator/audio/wiki/• programatically read and write raw audio data

DeveloperDay

Google

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

DeveloperDay

Google

Mozilla Audio Data APIinterface 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();

DeveloperDay

Google

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>

DeveloperDay

Google

Example: Writing audio// Create a new audio elementvar audioOutput = new Audio();// Set up audio element with 2 channel, 44.1KHz audio stream.audioOutput.mozSetup(2, 44100);

// Write samples using a Typed Arrayvar samples = new Float32Array([0.242, 0.127, 0.0, -0.058, -0.242, ...]);var numberSamplesWritten = audioOutput.mozWriteAudio(samples);

DeveloperDay

Google

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; }

DeveloperDay

Google

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); }

DeveloperDay

Google

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); }

DeveloperDay

Google

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

DeveloperDay

Google

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

DeveloperDay

Google

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.)

DeveloperDay

Google

Contact interfaceinterface 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;};

DeveloperDay

Google

Contacts API examplefunction 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'} );

DeveloperDay

Google

Capture API<input type="file" accept="image/*" id="capture"> <input type="file" accept="image/*;capture=camera" id="capture">

DeveloperDay

Google

Examplevar captureInput = document.getElementById('capture');var file = captureInput.files[0];if (file) { file.getFormatData(displayFormatData, errorHandler); //asynch}// success callback when getting format datafunction 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);

DeveloperDay

Google

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)

DeveloperDay

Google

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>

DeveloperDay

Google

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>

DeveloperDay

Google

Thanks

• mike@w3.org

• http://twitter.com/sideshowbarker

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

Technology

アダム・スミス『修辞学・文学講義』を読むharp.lib.hiroshima-u.ac.jp/onomichi-u/file/13396...アダム・スミス『修辞学・文学講義』を読む林直樹

Mike Barker バーカー , マイク

HTML5 - (01) Visão Geral do HTML5

[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]

アダム・スミスのr商業社会」と国家ritsumeikeizai.koj.jp/koj_pdfs/44308.pdfアダム・スミスの「商業社会」と国家（稲村） 91 7）スミス像を再構築しようとする動向として要約しうるであろう。

HTML5 Programming Cookbook - kimbersoft.comkimbersoft.com/pdf/PRIVATE/HTML5-Programming-Cookbook.pdf · HTML5 Programming Cookbook vi Preface HTML5 is a core technology markup language

アダム・スミスの蔵書一橋大学社会科学古典資料セ …...Hitotsubashi University Repository Title アダム・スミスの蔵書 Author(s) 水田, 洋 Citation

HTML5ではないサイトを HTML5へ - Change HTML5 from Not HTML5

HTML5 & JavaScript HTML5 JavaScript & HTML5 HTML5 HTML5 ...ec.nikkeibp.co.jp/item/contents/mokuji/m_229980.pdf · (JavaScript + HTML API) 72 Part2 HTML5 80 HTML5 File APIJs r Server-Sent

アダム・スミスの道徳理論 ―フランシス・ハチスン …...アダム・スミス(Adam Smith, 1723–1790) の道徳理論は、ハチスン (Francis Hutcheson, 1694–1746)

HTML5-CanIuse 1 HTML5-Tags Ordered Alphabetically 6 HTML5 ...vb-net.com/TrudoPoisk/HTML5-DOC-2.pdf · HTML5-CanIuse 1 HTML5-Tags Ordered Alphabetically 6 HTML5-Element Reference 12

Inspiron 14 5447 仕様 - Dell...1 ヘッドセットポートヘッドフォン、マイク、またはヘッドフォンとマイクのコンボ（ヘッドセット）を接続します。2

産業遺産の権威スチュアート・スミスとパネリストたちが語 …...スチュアート・B・スミスさん国際産業遺産保存委員会事務局長。イギリス

アダム・スミス（一）アダム・スミスはよく「経済学の父」 …アダム・スミス（一七二三－九〇）が十年余の骨身を削る苦心の末ようやく『国富論ヱ』を完成し、出版したの

HTML5 Tema4 Atributos en HTML5

HTML5 DevConf 2014 - Quintus HTML5 Game Tutorial

AM/FMラジオ付CD/USBプレーヤー取付説明書 - …...6 共通マイクの取り付け方取付概要マイクr ケーブルクランパーt 車両前方マイクr マイクr

HTML5 Introduction – Features and Resources for HTML5

[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support

HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

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

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