始動、HTML5 ~ユーザー参加型プレゼンで、一緒にHTML5を体感しよう

IW01 HTML5&マルチデバイスのWeb開発
要旨
1.
はじめに
マルチデバイスの利用数が増加している中、対応技術として HTML5 に注目が集まっ
ている。我々は、この技術が期待どおりの機能を備えているかを調べ、実際に HTML5
を使用したアプリ開発に取り組むことにした。
2.
HTML5 とは
HTML5 が 2014 年 10 月に勧告がされ、様々な新機能が実装された。そもそも HTML は、
コンピュータの種類に関係なく機能することを目指してつくられたマークアップ言語
で、ウェブページを作成するために多く利用されている。その最新バージョンにあた
る HTML5 は従来に比べ、明確な文書構造を持つようになり、デバイス機能へのアクセ
ス、マルチメディア対応など時代に合わせた新たな機能も追加されている。現在、WEB
を取り巻く環境が多様化し、プラグインをサポートしていないブラウザへの対応や、
画面サイズを考慮したアプリ開発が望まれ、そこで HTML5 がその役目を担うのではな
いかと期待されている。我々は、まずこの期待に応えるだけの実力があるのかを調べ
てみた。
3.
机上調査結果
HTML5 への対応状況について、ここ 1 年以内にリリースされたバージョンにおいて急
速に改善していることがわかった。特に Chrome の対応が早く、最新バージョンではほ
とんど全ての機能に対応できている。また対応遅れが指摘されていた IE についても、
Windows8 IE11 において大幅に改善が見られており、利用されている PC ブラウザの 7
割が HTML5 への対応が進んでいた。ただし、実装のニュアンス(見た目、動作)が、
それぞれ異なることもわかった。デバイスについてはゲーム機やテレビなども見られ、
PC、スマホではない種類が増えていると感じた。
次に、HTML5 の新たな機能について調査した。新しい機能は大きく 8 つのテクノロジ
ーに分類される。これらの機能により、FLASH、Silverlight など、プラグインに依存
していた表現や動作がブラウザ単体で行えるようになっている。P2P や、サーバーとの
非同期通信機能も用意され、従来よりも比較的容易にリアルタイム通信などを行える
ようになった。これらの調査をふまえ、機能を利用したアプリを開発することにした。
4.
アプリ開発(デモ)
1:リアルタイムチャットシステム(WebSocket)
2:お絵かき CANVAS
(CANVAS)
3:「イイね」集計グラフ描写
(CANVAS + WebSocket)
WebSocket は従来では様々な環境や技術が必要であった通信方法を比較的容易に実
現できること、CANVAS は FLASH などプラグインで補完していた機能の代替として期待
2014 Beacon Users' Group
IW01 HTML5&マルチデバイスのWeb開発
要旨
できることから、それぞれ重要度、注目度が高いと評価し、この 2 つの機能を利用し
てアプリ開発を行った。プレゼンテーションと組み合わせることで、参加者からの声
や評価を発表最中に計測、集計することを試みている。特にスマホの利用が多いこと
が考えられ、様々な機種、ブラウザで HTML5 が動作することが重要な要件となったが、
テストでは問題なく動作した。開発にあたり、多くの時間を要したのは調査部分であ
った。HTML5 は、今回の研究まで親しんだことのない言語であり、その勉強に多くの労
力を傾けた。当初、テキストエディタで、即興的に書けるかとも期待したが、そこま
で単純ではなく、作成にあたり相応の学習が必要なことがわかった。しかし、作成環
境や、実行環境の敷居が低いため、取り組みやすいと感じた。
5.
提言・まとめ
我々の研究では、HTML5 について、新たな機能が様々なデバイスで動作するかどうか
を調べた。またその機能を利用したアプリで、参加型プレゼンテーションを設計する
ことができた。業務への利用については、現時点で、まだ対応がなされていないブラ
ウザや、デバイスもあり、対応しても実装が異なるなど混沌としていることから、対
象を絞る必要があると考えられる。しかし、勧告により標準技術となったため、今後
状況は確実に改善されていくだろう。既に家電、車、電子広告など可能な分野で HTML5
の実用が進んでおり、研究もより加速すると予想される。
今回触れられたのはごく一部の機能にとどまってしまったが、この原因は言語の調
査に時間がかかったという点にある。開発環境は手軽で取り組みやすく、比較的簡単
な言語だが、全く知識のない人物が自分で調べて学ぶには、相応の時間が必要だと感
じた。
HTML5 を学ぶことは、近い将来に業務アプリで利用できるだけではなく、タッチパネ
ルの搭載増加に伴う家電分野における UI 設計、対話型デジタルサイネージという新し
い広告コンテンツ制作など、仕事の幅を広げてくれる可能性を秘めている。
HTML5 は、プログラマも、企画担当者も、SE も、営業マンも、技師も、広報担当者
も、誰にでも使うことができ、仕事に活かせるものである。これまでプログラムに触
れてこなかった人も取り組んでもらえれば、全く異なる視点からのアイデアが生まれ
ることもあるだろう。そんな人が、プログラマに相談する場面もあるだろう。そうい
った HTML5 を介した出会いが、新たなイノベーションを生むことになって欲しいと願
っているし、なるであろうと確信している。
我々の研究によって一人でも多くの方が HTML5 に興味を持ってくれたら嬉しく思う。
さあ、始めよう。全ての UI が HTML5 になる前に。
2014 Beacon Users' Group