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

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日月曜日