2014/3/8(土)、仙台は仙台市シルバーセンター第2研修室にて「HTML5とか勉強会」が開催されました。東京ではすぐに満席になる人気勉強会がこうした地方で聞けるということで期待です。
地方版HTML5とか勉強会は好んで参加しており福島、福岡など行かせて頂いております。東京で開催される「HTML5とか勉強会」はなかなか予約がとれないので地方版に参加させて頂いております。
私がHTML5が行ける！と感じたのもやはり地方版のHTML5勉強会（福岡で行われたHTML5カンファレンス）です。html5jの白石さん、Mozilla Japanの浅井さんなど日本でもっとも先進的なHTML5な方々のお話を聞き感銘を受け自分で技術評価し実行した結果、今の自分があるのだなと今もそう考えています。
本日のアジェンダですが次の通りです。
Session1：Webの最先端で起きていること - 技術、ビジネス、コミュニティ - 白石俊平さん（html5j）
Session2：マークアップ言語としてのHTML5 - 矢倉眞隆さん（html5j）
Session3：Webの技術を幅広く - 若狹正生さん（html5j）
Session4：HTML5で始める物理シミュレーション - 遠藤理平さん（FIELD AND NETWORK）
Session5：Web プラットフォームで創る未来 - 浅井智也さん（Mozilla Japan）
たっぷり堪能したいと思います！
尚、ここに記載した内容は私が解釈を間違えて記載している部分もあります。ご了承ください。
Session1：Webの最先端で起きていること - 技術、ビジネス、コミュニティ - 白石俊平さん（html5j）
まずはじめにhtmldayにみなさん参加しましょうというお話です。htmldayは飲み会を企画するだけでも企画参加できますので参加するハードルは低いです。昨年私は「勝手に三次会」というイベントを企画し朝方６時まで飲んでいました。これも立派に企画として認めて頂きました。
最先端のWebの世界は広く深い。このためふたつのキーワードでWeb技術を考えてみます。
- トレンド
- 近未来（仕事ではまだ使えない）
トレンドのひとつに「今明るい／暗い」でユーザインターフェースを変更するというものがあります。それがHTML5Experts.jsにある「HTML5で実現できる！環境光に合わせたレスポンシブなUI」です。レスポンシブデザインというのは環境に適用させてUIを変化させる。画面の大きさを変えるだけではありません。
動画を背景にしたサイトもHTML5のvideoタグ要素を使えば作れます。これもHTML5の活用の良い例と思います。
現在、新たなUXを模索している状況ではないかと思います。例えば、JavaScriptはこれまではあまり使われていなかったですが、デザインでもJavaScriptが使われるようになります。後記しますが、汎用的な言語としてJavaScriptが利用されています。
フラットデザインというのは、単にぺったりしているサイトではいし、一過性のトレンドとかブームでもない。例えば、黒電話はもうなくなりましたが、現在使われているスマホなどはフラットデザインの良い例です。そして「主役と脇役の役割を明確にする」それがフラットデザインの根本です。
Webプラットフォームの力はこんなものではない。現在のトレンドは今ブラウザでできることです。つまり
- Webブラウザの枠を出ていない
- 利用されている機能（API）が限定的
Webブラウザの枠を出るという意味の一つにWeb OSの世界があります。FireFox OSとかGoogle Chrome OS、TIZENがその世界になります。WebブラウザがOSになります。
テレビの画像をWebブラウザにすることや車など「UIあるところにHTML5あり」といった方向になるのではないかということです。ただ最初はレスポンスの問題もあるとは思います。
汎用的な言語としてJavaScriptが使われだしています。Webブラウザで使われるだけではなく、例えばLoop Motionのようなハードウェアとブラウザを繋げるような役割にもなっている。そういう意味でJavaScriptの利用範囲が格段と広がってきています。
そして、革新的なJavaScript APIがいくつかあります。使い方が難しくなかなか手が出せないものもあります。また表現力がネイティブ並になると思います。3Dゲームなどはまだまだという感じもするが今後さらにパワーアップする方向にあります。
ハイブリットアプリという考え方があり、これはネイティブとHTML5を混在する技術です。意外にもまだあまり使われていませんが、じわじわ今後くるのではないかと考えています。
オフラインWebアプリケーションに関しては、様々な会社ががんばってアプリケーションを作成しています。その例が「google slides」です。オフラインWebアプリケーションを構築するときに考えなければならないものが「オフラインファーストの思想と実践」です。オフラインというものをきちんと考えなさいということです。
HTMLにおいて、いままでのUIは部品化できなかったが、それができるようになってきています。それがWeb Componentです。このWeb Componentはエンタープライズの世界では使われる方向にあるのではないかと思います。
コミュニティ活動と言えば私も「html5jエンタープライズ部」に所属し活動させて頂いてております。エンタープライズ業界にもHTML5を利用される方が多くなり様々なご相談を受けています。そのHTML5は様々な技術要素があるのですが、以前の(HTML4の頃)「HTMLは簡単」というイメージがあるらしく、ご説明すると唖然とする方がほとんどです。
JavaScriptに関しても以前とは比べ物にならないほどコーティング量が増えたため意外と苦戦している方も多いようです。良く登壇で「JavaScriptフレームワークを使って奇麗にスパゲティにならないように利用しましょう」ということをお話しますが、JavaScriptフレームワークを利用してもスパゲティになる方もいらっしゃいます。
そういったスキルがデザイナにまで及んでいるのではないかという雰囲気が本日の講演で感じとれました。技術のハードルは高いかもしれませんが、超えられない高さではないと思います。デザイナもアプリケーション開発者も精進あるのみです。
Session2：マークアップ言語としてのHTML5 - 矢倉眞隆さん（html5j）
マークアップとHTMLとその構造のお話です。
HTMLはアプリケーションプラットフォームとして考えられていました。ただ、HTMLはHyperText Markup Languageですので基本的にはテキストです。テキストということなので良いこともありますが、悪いこともあります。
テキストですので可搬性があります。エディタでも読めるし、タグで表現されているため正規表現などで色々加工もできるでしょう。そして、テキストなので情報伝達に優れていて特定のソフトウェアに束縛されることがありません。そう言う意味でPDFやWordなどと比較すると情報が伝えやすいということです。
こういう伝えやすさは「価値」となるのではないでしょうか？PDFで伝えるときにViewerの立ち上がりの遅さがあると思います。HTMLのようにさくっと開いて見えるというのは重要なファクタであると思います。
伝えやすさを高めるために何をすればいいのかという回答が、文書の構造をきちんと伝えるということです。HTML4でもある程度できていたがHTML5では更に構造が増え、より詳細に表現することができるようになりました。セクション要素や新しいブロック要素の追加、新しいインライン要素の追加です。
具体的にセクション要素には
- <section>：文章のなかのひとまとまり
- <nav>：グローバルナビとか目次
- <aside>：本文とそんなに関係ないもの
- <article>：独立可能（言葉では説明しづらいのでサンプルでされていました）
ただ、見た目を整えるだけなら<div>を使った方が良いです。articleの例ですが、これは一つのツイートを囲むために使われたりしています。
プロック要素には、main、header、footerなどが導入されました。この新しいブロック要素を使うことで。不要なclassやidを使わなくて済みます。
文書のアウトラインはセクションと見出しから構成されています。HTML5からなくなる可能性があります。アウトライナーというツールを使うとアウトラインが確認できます。
普通のWebサイトで、HTML5で新しく定義された要素を利用した場合ですが
- header、footer、mainは使えそう
- asideもサイドバーに使える
- sectionは見出しのあるまとまりに
- navはグローバルナビや目次に
といったところです。色々意味を考えて使ってみると良いと思います。ただpやdivをほとんどの場所で使えば良いのではないかと思います。
アクセサビリティというものがありますが、「画像」「見出し」「説明」がひとまとまりということが見た目には解ります。アイキャッチとしては成り立ちます。ただ、構造的なものとしては「画像」というものだけでは良くわからないですが、ここが従来のマークアップの考え方とは若干異なります。それが「CSS Flexbox」という考え方です。
CSS FlexboxというW3Cで規定された仕様は、いろいろできるCSSレイアウトの仕様です。「見出し」「画像」「説明」という順番にプログラムで記述しても、見た目は「画像」「見出し」「説明」という順序で表示されるというものです。CSSにorderプロパティを定義してあげることで実装することができます。CSS Flexboxは、まだまだですが今後様々なブラウザで実装されると思います。
CSS Gridというものもあり、表のようなものを定義できます。gridを使うことで柔軟なレイアウトを定義することができます。つまり仮想的な線を引いてその中に要素を入れることができます。レイアウトマネージャというのが他の言語には必ずありますが、そのHTML実装ということです。今後のブラウザ実装を待ちたいと思います。
HTML5.1でさらに斬新的な技術要素が入りますが、マークアップに関してはあまり追加される予定はありません。また、HTML5では含むことのできなかった技術要素も追加されてきます。
意味要素でもまだまだ定義されていないものがありパンくずもその一つです。
Web ComponentsはUIコンポーネントを定義でき、かつ配布可能になります。コンポーネント化することでアプリケーションの標準化が進むのではないかと考えています。今までの標準化は標準化団体が行っていましたが、そういった団体を使わずに標準化することができるためです。
もっとも利用するマークアップはdivと思いますが、エンタープライズではtableも多く使われる要素だと思います。エンタープライズでは表形式のものが多いためと思いがちですが、縦横をそろえる目的で利用されることの方が実は多いのではと思います。こういった縦横をそろえるCSS Gridがコーティングできる技術が、ブラウザで対応されることを望みます。
Session3：Webの技術を幅広く - 若狹正生さん（html5j）
HTML5によって構造が変わります。機能としては
- Offline Web Application(Application Cacheとか)
- Multmedia(Web Audioとか)
- Graphics, 3D & Effects
- Realtime / Connectivity
- Device Access
- Styling(CSS3)
これら機能は、すべてJavaScriptで実装できます。ただ、実装状況はブラウザによってまちまちなので調べながら実装しなければなりません。
Web技術がどのような領域で利用されているのかですが
- アプリケーションとWeb技術
- ゲーム機とWeb技術
- カーナビとWeb技術
- テレビとWeb技術
- 電子書籍とWeb技術
- 遠隔操作とWeb技術
- サーバサイドでのWeb技術
があります。Web技術だけで様々な領域での利用が可能になり、アイデア一つで新しいことができるようになります。しかもJavaScriptが使えれば良いのでアイデアの形にするためには、それほど敷居が高いというものではありません。組み込み系でもWeb技術が入り込んでいますので、HTML5の可能性はまだまだ尽きないといったところです。
Web技術というとコンテンツを作成し見せるといった行為だけのものと思いがちですが、実はその利用用途は無限にあるのだと思います。
Session4：HTML5で始める物理シミュレーション - 遠藤理平さん（FIELD AND NETWORK）
HTML5で物理シミュレーションを物理学会で発表したところdisられたとうお話でしたがHTML5の可能性を秘めた内容です。HTML5による三大要素があります。
- 入力：HTML
- 演算：Webブラウザ上で高速実行可能なJavaScript、マルチスレッドのWeb Workers
- 出力：OpenGLなどの3D
物理で良く利用される波動関数をグラフィック化しましたが、ソースコードの行数が少ない。物理計算の部分が140行、3Dにしている部分が140行、30行がタグというたったこれだけで波動関数がグラフ化できるというのは驚愕の事実です。
HTML5におけるグラフィックス
物理学における基本単位系にMKS単位系というものがあります。これ以降のお話は物理をやったことない人には少し難しいと思いますので割愛したいと思います。
数理物理学を大学院で専攻した私にとってはかなり興味のあるセッションでした。当時、ある教授にコンピュータ苦手なんですと相談したところ「へ〜」と返事が来て会話がそれ以降成り立たなかったことを思い出します。
このセッションはHTML5の利用方法の特別な例だと思います。これもHTML5の未来、可能性を示したものではないかと思います。
WebGLはブラウザで3DCGが実現できる技術ですし、しかもその他の言語と比較するとプログラミング行数が少ない。エンタープライズでは3Dグラフなどで利用することがあるかもしれません。
Session5：Web プラットフォームで創る未来 - 浅井智也さん（Mozilla Japan）
Web of Thingsというのは、すべてのものがWEBにつながるという意味です。具体的には、エアコンや冷蔵庫、カーナビや洗濯機などすべてのものがHTML5でシームレスにつながっていくという概念です。
Webとスマートデバイスのつながりが多くなりWeb技術がより重要になる。そしてWeb ブラウザがWeb Platformになります。独立して起動して動くアプリケーションもあります。独立してというのはWebで書かれているにも関わらずネイティブと変わらない動きをします。簡単にいうとクライアントアプリケーションがWeb技術で作ることができるということを意味しています。
そして増え続けるWeb OSとして、Firefox OS、Chrome OS、Tizen IVI、webOSがあります。この中でもFirefox OSがもっとも先進ではないかと思います。Web OSに注目する業界もあります。テレビ、放送、家電様々な業界で注目されています。W3Cのサイトに行くと確認できます。この中でも実績のあるものはFirefox OS(2013/07：スマートデバイス)とChrome OS(2011/05：ノートパソコン)です。これから登場が待たれるwebOSというものもあります。ちなみに文書上の注意ですが、Web OSというのとwebOSは意味が違いますので気をつけてください。
Web Platformの課題として
があります。ですのでWebを進化させることに魅力があります。「できなかったことをできるようにする」というのが、本来製造業にあるべき姿だと思います。
TVや車載端末のAPIはW3Cや業界団体で議論中です。これらについては各自実装しながら標準化を進めていくスタイルをとっています。ディスクトップのリモート実行も考えられています。MozとAmazoneと進めています、それがOctane Cloud AMI's on AWSです。
現状、実行速度ですがCの倍くらいでJavaと同じくらいで可能です。そこで処理系を見直したのがasm.jsです。これはMozillaが定めたJavaScriptの厳密なサブセットですが、Firefox上のJavaScriptコードをより高速に動かせるようにしたものです。実行時にパフォーマンスの最適化していましたが、常に最適化できる環境にあるなら速度を上げるといった工夫があります。そうするとC言語の1.5倍程度の処理速度になるということが解っています。asm.jsは新しい仕様ではなく既存の仕組みを使っていますので実は特別なものではありません。
asm.jsがまだCより遅い理由として
- コンパイルタイム
- 単精度演算ができない
ということがありますが、言語仕様としては仕方ないことかと思います。ただここについても工夫がまたあります。 - Always bet on JavaScript
Firfox OSですが、すっきりしたデザインで作られていて、使うアプリケーションは、インターネット上（マーケットプライス）のアプリケーション、ローカルにあるアプリケーション両方使えますし、検索はすべて１カ所からできます。とてもクリーンなメール、連絡帳や電話もシンプルに作られています。左右スワイプでアプリを切り替えることもできるのでユーザビリティはよく考えられています。
Firefox OSはWebに最適化されたシンプルでスマートな構造になっています。つまりAndroid、Tizenに比べレイヤが少なくなっています。
カーネル&HAL > Gecko > web platform > Webアプリ
のシンプルなレイヤ構造になっています。
現状多数の企業との共同開発・製品化が行われています。主要21キャリアが賛同しチップと端末メーカと一緒になりFirefox OSの開発を進めています。ローエンドを$25でリファレンスモデルを作成しましたし、Firefox OSの販売実績ですが15カ国で行われています。ニュースでもありましたように日本でも販売展開があるかもしれません。
HTML5の１歩先を暗示するWebプラットフォームのお話でした（と毎回私はそう思ってます）。浅井さんのお話というのは、私にとって１年先、いや２年先のWebの世界をお話されているのではないかと感じています（実際には「今」のことのようですが）。このわくわく感は子供の頃おもちゃを買ってもらったころの気持ちとどこか似ている感覚があります。
最後に
エンタープライズとHTML5というテーマで日頃活動させて頂いておりますが、具体的にどのように利用すれば良いのかということに頭を悩まします。もっとも無理に利用する必要もないので様々なアーキテクチャから選択する必要があります。
約１年前、HTML5を始めるのにためらいがあったのは事実です。使い物にならないのではという先入観がありました。しかし、その技術は突然出てきたものではなく過去の積み重ねの結果という理解になりましたので、実際に自分で技術評価し確信を持ったため利用しました。
過去を思い出しながら、本日のお話を聞きフロントエンドエンジニアの原点に戻れたのではないかと考えております。私も技術者の一人としてHTML5の技術を評価しエンタープライズの中で利用していきたいと思います。ただ「HTML5がすべて」ではありませんので、バランスよく技術に取り組もうと思います。
