HTML5 Conference
2015年1月25日(日)AM10:00〜
東京電機大学 千住キャンパス

セッション

6トラック30セッションで開催します。
なお、セッション時間や内容は予告なく変更することがあります。ご了承ください。

オープニングセッション(10:00-10:50)

基調講演

※ 会場は定員500名(先着順)となります。

セッション(11:20-17:00)

各セッションは 2 号館 5, 6 階で行います。6トラック×5時間の計30セッションです。

ルームA

11:20 - 12:00

プリンより滑らか。スムーズなアニメーションの作り方。

keywords
  • パフォーマンス
  • フロントエンド
  • Web Animations

滑らかなアニメーションは見ていて楽しいし、時間を通して情報を分かりやすく伝えることができます。しかし焼きすぎて固くなっちゃったプリンのようにアニメーションがカクカクしてしまうと見ている人も情報を美味しく味わえず、メッセージが伝わりません。

このセッションではブラウザーの仕組みについての知識を深めながら、快適に動くウェブアニメーションの作り方を学びます。主にスタイルシステム、グラフィックスの仕組み、コンポジターという3つの所を参考にして、ブラウザーの機能を上手く活かす方法について考えていきます。

最後にFirefoxとChromeで実装中のWeb Animationsというカラメルのような甘く て美味しい技術を紹介します。

13:20 - 14:00

悩める組み込み機器向けウェブコンテンツのパフォーマンス

keywords
  • パフォーマンス
  • WoT

近年、ブラウザーやブラウザーランタイムは、PCやスマートフォンのみならず、テレビ、コンソールゲーム機などの組み込み機器にも導入されるようになりました。また、Raspberry Piに代表されるSingle Board Computer(SBC)も流行りだし、ロースペックな環境で動作しなければならないウェブアプリケーション開発の需要が高まろうとしています。

多くの組み込み機器に搭載されたは、近年よく使われるAPIやCSSをサポートしています。しかし、そのパフォーマンスはスマートフォンと較べて非常に貧弱です。スマートフォンでは当たり前のパフォーマンスが得られることはありません。

本セッションでは、組み込み向け機器の現状を紹介し、その上で動作するウェブアプリケーションの開発の課題、私の経験での苦労話、そして、それに立ち向かうための Tips を紹介します。

14:20 - 15:00

つくろう!Firefox OSアプリ

keywords
  • Firefox OS

ついに国内での商用端末も発売になった Firefox OS。その特徴はアプリがHTML5 を使って作成できることです。HTMLやCSS、JavaScriptを使って作成したページ にマニフェストを足すだけでアプリとなります。このセッションではFirefox OS とそのエコシステムを、アプリ作成という視点から概観します。Firefox OSの仕 組みやAPIだけではなく、開発環境の構築からFirefox Marketplace へのアプリ の登録、公開されたアプリのバージョンアップといった、アプリの作成の流れを 一通りご紹介します。このセッションが契機となって、Firefox OSのアプリ作成 に興味をお持ちの方が一人でも増えれば幸いです。

15:20 - 16:00

Web of Things を実現する技術 - Mozilla が取り組む Web プラットフォームの進化

keywords
  • Firefox OS
  • WoT

あらゆるものが Web 技術で書かれ Web で繋がるようになると言いますがホントにそんなことは可能なのでしょうか?これから Web プラットフォームはどのように進化するのでしょうか?

これまで Web では大規模アプリ、ネイティブと遜色ないゲーム、音楽や書籍、3D や VR ヘッドセット、スマホやテレビの OS などが実現されています。Web プラットフォームを進化させ続けるため、Mozilla がどのような技術を開発してきているかご紹介します。

16:20 - 17:00

HTML5ハイブリッドアプリ開発のベストプラクティス

keywords
  • Hybrid App

HTML5ハイブリッドアプリは急速に増加するアプリ開発需要に応える一つの解として、B2C及びエンタープライズ向けアプリでの採用が急速に進んでいます。一方で、HTML5ハイブリッドアプリ開発をどのようにすすめて行くべきなのかといった情報が不足しています。

本セッションでは、自信の開発経験や日本Cordovaユーザー会での勉強会での情報共有や議論を通じて見えてきた、HTML5ハイブリッドアプリ開発のベストプラクティスについてご紹介いたします。

ルームB

11:20 - 12:00

はじめてのWeb of Things

keywords
  • WoT

最近話題のWoTことWeb of Things。これからはWebからさまざまな機器の操作や管理ができるようになるとされています。

本セッションではそもそもWeb of Thingsってなに?どんなことができるの?というところから、どうやるのか、APIや今後の展望などについて、いくつかのデモを交えてご紹介したいと思います。

13:20 - 14:00

WebRTC/ORTCの最新動向まるわかり!

keywords
  • WebRTC
  • ORTC

音声、映像、データのリアルタイム・コミュニケーションのオープン標準として、今、WebRTC/ORTCに注目が集まっています。本セッションでは、WebRTC/ORTCの技術をデモを交えて解説するとともに、W3C等での標準化動向や、WebRTCを活用したビジネス活用事例についても紹介します。

14:20 - 15:00

HTTP/2の現状とこれから

keywords
  • HTTP/2

2012年初めから始まったHTTP/2の仕様策定作業もいよいよ大詰めを迎え、RFC発行までもうすぐのところまで来ています。

最近ではHTTP/2の仕様化後を見据え、既に Service Workerと連携した新しいWeb Pushの仕様の検討も始まっています。

本セッションでは、最終的にHTTP/2がどのような仕様に落ち着いたのか、そして今後どのように使われていくのかHTTP/2の現状とこれからについて説明します。

15:20 - 16:00

Web Audio API、 Web MIDI API を使ったサウンドプログラミング

keywords
  • Web Audio API
  • Web MIDI API

ブラウザ上でサウンドというと、サウンドを直接扱うWeb Audio API、鍵盤等の外部MIDI機器を直接扱うWeb MIDI APIの2つのAPIが挙げられます。本セッションでは、この2つのAPIの概要の紹介、またどれくらい素早くプログラミングが可能なのか、また他のWeb APIとの連携について実例を元に紹介します。

16:20 - 17:00

Beyond CSS Architecture

keywords
  • フロントエンド

OOCSS、SMACSS、BEMといったHTML/CSS設計、またCSSプリプロセッサを前提とした設計テクニックなどが話題となった2014年ですが、2015年はその周辺にどういったツール、テクニックが話題となるのでしょうか。これらの設計手法などを前提に、より効率的で、健全なコードを保つための方法を考えてみましょう。

ルームC

11:20 - 12:00

どうなる次の Internet Explorer?、え、あれがこうなる? ほんとに?! 中の人だから言える「ここだけのハナシ」

keywords
  • Microsoft
  • Internet Explorer

バージョン 9 から Web 標準準拠へと大きく舵を切った Internet Explorer は、大きな変化の過渡期にあります。Windows 10 に搭載される次期 Internet Explorer について、現在公表可能な情報をまとめてお伝えします。

13:20 - 14:00

Web: Reboot

keywords
  • W3C
  • HTML.next

※ html5jスタッフによる同時概要通訳Tweetを行います

Our Web is young—just 25 years old! It has learned to at times "reboot" itself. One of those times is now.

Some say "Extensible Web" about the current Web reboot — but it's way more exciting than that. You'll learn to be excited you're alive in 2015, and to be part of big changes in the Web.

【日本語訳】

Webは若く、まだたったの25歳です!25年もの間、Webはリブートを何度か行ってきました。そして、いまもその時です。

「Extensible Web」は、今日のWebをリブートするものと言われますが、それはリブート以上にエキサイティングなものです。この2015年という時代に生き、Webの大きなチェンジに関われることがどれほどエキサイトかを紹介します。

14:20 - 15:00

The Next HTML Is You

keywords
  • W3C
  • HTML.next

※ html5jスタッフによる同時概要通訳Tweetを行います

The magic of the Web is built by Web developers, yet Web developers have not been very involved in the creation of Web technology itself.

This changes now.

The "Web Platform Specs" project makes open standard development as easy as open source is. This talk goes into the details of how that works.

【日本語訳】

Webのマジックは開発者によって作られますが、現状Web開発者はWeb技術の創造に深く関わっているとは言えません。

「Web Platform Specs」プロジェクトは、オープンソースのようにオープンWeb標準の開発を容易にするものです。本セッションではその詳細を紹介します。

15:20 - 16:00

Open Web Platform推進に、日本の Web Developerはどう関わっていくか

keywords
  • html5j
  • HTML.next

先の2つの Mike と Robin のセッションで紹介されるように、W3Cの標準化プロセスは大きく変わり、Open Web Platformとして、開発者に拓かれたものになろうとしています。

この変革点にあたり、日本の開発者は「何を」知り「どう」取り組んでいくべきでしょうか?

本セッションでは、開発者コミュニティ・ブラウザベンダ・W3Cそれぞれの立場で活躍するエキスパートをお招きし、Web Components を例にディスカッションを行います。

16:20 - 17:00

Polymer で作る次世代ウェブサイト

keywords
  • Google
  • Web Components
  • Polymer

独自 HTML タグを可能にし、ウェブにコンポーネントと再利用の概念を持ち込む Web Components をさらに使いやすくする Polymer の使い方を、実例を交えながら紹介します。

ルームD

11:20 - 12:00

HTML5マークアップについて矢倉先生に聞いてみよう

keywords
  • マークアップ部
  • マークアップ

HTML5の仕様と一般のWeb制作者はどう付き合っていけばいいのか、矢倉先生のスライド内容を下敷きに、マークアップ部のメンバーがHTML5とその周辺仕様について質問をぶつけます。

13:20 - 14:00

Web Componentsのアクセシビリティ

keywords
  • アクセシビリティ部
  • アクセシビリティ
  • Web Components

Web Componentsによって開発者は自分で要素を定義できるようになりました。HTMLの要素であれば、その要素を誰もが使えるようにする(アクセシブルにする)のは仕様やブラウザーが行ってくれますが、自分で定義した要素をアクセシブルにするにはどのすれば良いのでしょうか?

このセッションでは、Custom ElementsとShadow DOMのアクセシビリティについて、簡単に紹介します。

14:20 - 15:00

HTML5 によるロボット制御

keywords
  • Webプラットフォーム部
  • IoT

JavaScript と ROS を用いたロボット制御について解説します。

また、 W3C Browsers and Robotics Community Group で検討が進む Robotics Web API を用いたロボット制御にも触れます。

15:20 - 16:00

大きく変動する車載情報機器、そしてHTML5の役割

keywords
  • 自動車部

CarPlay, Android Autoの登場、ドライバ支援システム(ADAS)、そして将来の自動運転に向けて、大きく変動する車載情報機器を概観し、この動きに対応するQNXのプラットフォームソリューションを説明します。また、HTML5の果たすべき役割を提案すると同時に、後半ではQNXのHTML5 SDKによる開発実例を、実機上での動作を含めてお見せしたいと思います。

16:20 - 17:00

転ばぬ先のエンタープライズWeb開発プランニング

keywords
  • エンタープライズ部

2014年はHTML5がエンタープライズに適用され始め「HTML5元年」と言える年となりました。2015年はさらに多くのHTML5適用事例を目にする機会が増えると予想されます。しかし、大規模なWebアプリケーション構築を成功させるためには、それ相応の準備が必要不可欠です。

本セッションでは、HTML5を利用したリッチWebアプリケーション開発に必要なプランニングを、実際のプロジェクトへの適用事例と絡めながらお話しします

ルームE

11:20 - 12:00

デジタルマーケティングことはじめ

keywords
  • Webマーケティング部(旧Eコマース部)

2014年のデジタルマーケティングは、ネイティブ広告やコンテンツマーケティングなど、「広告」の範囲や役割が大きく見直され、どこに配信されているのか?どんな内容か?まで深く考えるようになってきました。
さらに、スマホやタブレットが浸透するにつれ、HTML5等を活用して表現できる内容も格段に増え、もはやデジタル限定のマーケティングだけでは「モッタイナイ」と言われるようになっています。

一方で、昔からあるリスティングは、機能そのものが日々進化を続けており、マーケッターがやれることも、使える機能も、エグザイルメンバー並みに増え続けています。
今から、そしてこの先も、私たちは、増殖し続けるデジタルマーケティングと、向き合い続けなければならないのでしょうか?

だからこそ、原点に立ち返って、「マーケティングって何だっけ?」「デジタルになると何ができるんだっけ?」という話をしたいと思います。

2015年。
新しい年の始まりにこそ学びたい話をしたいと思います。

13:20 - 14:00

EPUB=Webと出版の融合、そしてHTML5&CSS3が変える本の世界

keywords
  • 電子出版部
  • EPUB

〈ブラウザで本を読む〉そして〈ブラウザで本を作る〉に関するトークセッション。EPUB×Web標準技術が、本をアクセシブルに、読みたい人も、書きたい人、表現したい人も、もっと自由に。HTML5やCSS3が次世代出版の基盤技術に。そのためのオープンなツールの開発者たちがいろいろ語ります。

14:20 - 15:00

2015年これからの日本のWebサイトパフォーマンスについて

keywords
  • パフォーマンス部
  • パフォーマンス
  • パネルディスカッション

欧米に比べて、Webサイトの定常的計測が全く根付いていない日本。そのため、デスクトップサイトもスマートフォンサイトも異様に遅いサイトばかりになっています。この現状を如何に打破するのか、パフォーマンス部部員がパネルディスカッションします。

15:20 - 17:00

【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう

keywords
  • ビギナー部
  • ハンズオン

Webデザイナー、jQuery、html5API初心者向けのハンズオンセッション。クロスフェードスライドショーをhtml5APIも交えて作ります。実際に手を動かして体験して使えるようになろう!


ハンズオン用にデータを用意しておりダウンロードする必要がございます。

会場にwifi環境はありませんので、デザリングなどオンライン出来る環境をご用意ください。また、ノートPC、エディタ、ブラウザ(ハンズオンではChromeで進行していきます)。のご用意もお願いいたします。

ルームF

11:20 - 12:00

Web技術によるデバイス制御・連携などを、まずは作り手として楽しんでみる♪

keywords
  • エンタメ技術部

JavaScriptを使ったデバイス・ガジェットの制御や、デバイス間の連携を行える環境が整ってきています。それを見て、「自分も何かやってみたいな!」などと思ってみたりするものの、実際作るのにはハードルがあったりしませんか?

その一歩を踏み出して作ってみた・試してみたという話、どんなデバイス連携が行えるかという内容を、実演も行いながらご紹介します。

13:20 - 15:00

【ワークショップ】Googleベンチャーズの手法に学ぶ。デザインスプリントのワークショップ

keywords
  • デザイン部
  • ワークショップ

デザインスプリントは、ベンチャー支援を行うGoogleベンチャーズが提唱する、スタートアップ企業向けの小規模ワークショップです。数日間でモノ作りをするハッカソンなどの一過性のものとは異なり、スタートアップ企業や、企業内の新規事業を正しく導きだし、自分たちが考え、発展させるための手法です。参加のために特殊なスキルを必要としません。コードを書いたり、デザインを描いたりはしませんので、エンジニア、プログラマ、デザイナーに限らず、企画職、マーケティング職、営業職等々、プロジェクトに関わる人全てが、よりよいプロダクトやサービスを考えることのできる時間です。

今回のワークショップでは WoT (Web of Things) と HTML5 を題材に、今まで Web 技術が載っていなかったものにWeb 技術が使われたらどうなるのか?新たなアイデアの創出を数十分に凝縮したデザインスプリントで実施します。(具体的なテーマや題材は当日まで内緒です。十分なレクチャーと、ファシリテーションを用意しておきます)

短い時間ではありますが、デザインスプリント終了後には、単なるアドバイスではなく、皆さん自信の考えの中から、気づきや、深い洞察が得られるようになると思います。またこのデザインスプリントの手法を持ち帰り、継続的にプロジェクトで活用して頂けると考えています。セッション2コマ分連続のワークショップとなりますが、ぜひご参加ください。

  • ※ 本ワークショップは、定員40名(先着順)となります。
  • ※ 本ワークショップは、GoogleおよびGoogleベンチャーズと直接の関係はありあません。
15:20 - 17:00

【ハンズオン】やってみたら実は簡単! WebGLで開ける新しい表現

keywords
  • グラフィックス部
  • WebGL
  • ハンズオン

難しいと思われがちなWebGL。でも今ではすばらしいフレームワークがいくつも登場し、少ない手数ですばらしい表現をすることも可能になってきました。本セッションではthree.jsとBlender(モデリングツール)を使いながら「明日から使えるテクニック」としてWebGLをご紹介します。

さらに、参加いただいた方に実際に手を動かしてもらうことで、よりその理解を向上してもらうハンズオン形式の内容もあります。当日はBlenderで作成したモデルデータを使いながら実際に画面に表示をするまでを行う予定です。また、さらにアドバンスドな内容として、後半ではGLSLにも触れる予定です。


セッションを受講するにあたり、前日までに以下の準備を行ってください。受講希望者多数の場合、以下の準備が完了しているかたを優先とさせていただきます。

また、当日は以下の準備が整ったラップトップ(ノートPC)をご持参ください

  • 素材の入手
  • テキストエディターの準備 (Sublime Text, Atom, Bracketsなど)
  • Blender 2.73 のインストール (モデルデータの書き出しに使用します。Blenderの準備がなくてもハンズオンの参加は可能です)
  • ローカルサーバーが使える環境
    • ローカルサーバーがない場合、ブラウザー側でクロスオリジンの制限を無効にする設定をしてください (テクスチャー画像の読み込みや Ajax のため)
  • WebGL が動作するブラウザー (ローカルサーバが無い場合は Google Chrome 推奨)

スペシャルセッション(17:40-18:50)

ライトニングトーク大会 & HTML5クイズ

※ 会場は定員500名(先着順)となります。