７月4日（土）九州では3回目2年ぶり鹿児島では初となるHTML5カンファレンスが「国立大学法人鹿児島大学 郡元キャンパス共通教育棟2号館1F」で開催されます。IoTをはじめどこにでもある当たり前の技術になり、徐々に浸透してきているHTML5ですが、実際にプロダクトとして利用するにはこれからという状況でもあります。また、「Extensible Web」という考え方や「WebAssembly」からもわかるように、まだまだ発展し続けている技術でもあります。そんな魅力的なHTML5に触れられ、聞け、近づけることができるカンファレンスです。

見どころ

HTML5というキーワードがだいぶ静かになりましたが、冷静に考えるとHTML5についてどのくらい知見がありますか？意外と知らないことが多いのではないかと思います、しかもまだ発展している。Microsoftの本気モードもMAXになりその動向がきになるところですし、Firefox OSがテレビに搭載されたり、Firefox OS採用の開発ボードOpen Web Boardが存在したりと。Google I/OでもPolymer 1.0が発表されるなどまだまだ目が話せない状況です。そういった15セッションの中からあえて4つセッションを上げろと難題を出されたら、次のものを涙ながらに注目のセッションとして選びたいと思います。

注目のセッション：

Windows 10 に搭載される Web ブラウザーについて
– 日本マイクロソフト株式会社 物江修 氏

“There’s an element for that!!” Now, get ready for Polymer 1.0!!!
– NTTコミュニケーションズ 小松健作 氏

Web Audio API、 Web MIDI API を使ったWebサウンドプログラミング
– ヤマハ株式会社 河合良哉 氏

Firefox エコシステム ー Mozilla が創る Web of Things 時代の技術とプラットフォーム
– Mozilla Japan 浅井智也 氏

セッション以外にも展示ルームがあり実体験としてHTML5に触れることもできます。体感できるHTML5をお楽しみください。詳しいご案内はHTML5カンファレンス鹿児島の特設サイトがありますので、そちらをご参考にしていただきたいと思います。

http://kagoshima.html5j.org/html5conference.2015/

歩き方

HTML5カンファレンス鹿児島ですがオープニング/クローズを含む全17セッションから成り立っています。デザイナーからWebエンジニア、エンタープライズ技術者まで幅広くターゲットにしたイベントですので聞くものを選ぶのも難しいところです。そんな皆様に筆者が当日の聴講すべきセミナーをプランニングしてみました。

トップエンジニア向け

トップエンジニアであるあなた。そうです、やはり最先端技術に触れておくべきところだと思います。html5j代表でもある吉川徹氏の「いまさら聞けないHTML5概要」でまずはHTML5に脳みそを浸し、Microsoft Edge、Polymer、Web MIDI、Forfox OSとエッジな話に舌鼓されてはいかがでしょうか？

1. ルームA: いまさら聞けないHTML5概要
2. ルームB: Windows 10 に搭載される Web ブラウザーについて
3. ルームA: “There’s an element for that!!” Now, get ready for Polymer 1.0!!!
4. ルームB: Web Audio API、 Web MIDI API を使ったWebサウンドプログラミング
5. ルームA: Firefox エコシステム ー Mozilla が創る Web of Things 時代の技術とプラットフォーム

エンタープライズ向け

エンタープライズに所属しているみなさんは実用的なシステムを作る上でこれから何をすべきかを考える必要があります。WoTやCordova、Polymerなどは技術として知っておくべきところだと考えます。外してはならないのがMicrosoft Edge。そうです、エンタープライズには欠かせないMicrosoft社のブラウザーのお話です。好き嫌い関係なく必須項目のひとつです。

1. ルームB: はじめてのWeb of Things
2. ルームB: Windows 10 に搭載される Web ブラウザーについて
3. ルームA: “There’s an element for that!!” Now, get ready for Polymer 1.0!!!
4. ルームA: Cordova開発者が知っておきたいレンダリングエンジンの話
5. ルームA: Firefox エコシステム ー Mozilla が創る Web of Things 時代の技術とプラットフォーム

デザイナー向け

デザイナーはHTML5の基本事項を再確認し、その後、トップデザイナー秋葉秀樹氏の「ぼっけもんデザイナーへの道」を聞くべきです。セッション案内でもありますが、「『ぼっけもん』とはチャレンジ精神に溢れ、勇気のある人の意味を持つ鹿児島弁です」ということですので、デザイナーとしての考え方を身につられるチャンスだと思います。その後WebRTCの実例や、今後デザイナーとしても必要になるだろう「音」に対するWebの取り組み、デザイン技術のイロハを聞かれてはどうかと思います。

1. ルームA: いまさら聞けないHTML5概要
2. ルームA: ぼっけもんデザイナーへの道
3. ルームC: Webと電話を繋げよう！Twilioを使った簡単アプリの作り方 & オンラインコミュニケーションを支えるHTML5
4. ルームB: Web Audio API、 Web MIDI API を使ったWebサウンドプログラミング
5. ルームB: 入門HTML5/CSS3

初心者向け

あまりHTML5はよくわからないという初心者には、HTML5の全容を確認し、HTML5の実例を聞くというのがおすすめです。きっとHTML5の魅力に触れることができるのではないかと考えます。

1. ルームA: いまさら聞けないHTML5概要
2. ルームC: 協働現場でのHTML5
3. ルームB: はじめてのWebRTC/ORTC
4. ルームC: ファブ時代のHTML5。IoTとWoT、あとロボット。
5. ルームC: Bootstrap超入門 & フロントエンドエンジニア1年生が語る『画面設計とCSS設計のポイント』

とは言っても、なかなか選ぶのが難しいのではないでしょうか。この原稿を書きつつ、これだけのセッションが並ぶと迷うのも当たり前ではないかと思っています。是非HTML5カンファレンス鹿児島のサイトを見ていただき、十分迷ってもらえたら幸いです。

開催日時・場所

• 開催日時：2015年7月4日（土）
• 開催場所：国立大学法人鹿児島大学 郡元キャンパス共通教育棟2号館1F
• 事前登録はこちらからどうぞ！
• 入場料：無料

本イベントは懇親会も用意されていて、参加費無料です。講師陣とコミュニケーションを取るチャンスでもありますのでご参加ください（噂ですが美味しい焼酎が無料で提供されるかもしれません）。それでは当日鹿児島でお会いしましょう！

最近のシステム開発の現場では、HTML5やモバイル、JSフレームワークなどの新しい道具が次々と登場してきます。「そうした新しい道具ってエンタープライズではどうなの？」「現場として受け入れられているの？」といったぶっちゃけトークを行う座談会が、8月11日に美人で有名なおだんみつさんのいる21cafeで開催されました。1時間半にわたる長時間のトークから特に盛り上がった話を紹介します。

　▲パネラーたち（左から株式会社クレスコ・小川充さん、グロースエクスパートナーズ株式会社・酒巻瑞穂さん、NTTコムウェア株式会社・川田寛さん）

日本のエンタープライズが抱える悩ましい問題とは

川田：世の中は技術革新で勉強会に行くとワクワクするんですが、でも皆さん本当に使ってますか？
私はあるところで「勉強会で紹介される技術ってお花畑だよね」「俺たちそこまでアグレッシブじゃないよね」って聞いてショックを受けたんです(笑)。とは言え、イケてるものは世の中にいっぱい出てきていて、OSS由来のベンダー製品も、モバイルもたくさん出てきています。でも日本のエンタープライズだと、結構悩ましい問題を抱えているように思うのですよ。

　▲日本のエンタープライズは世界のスタンダードと離れすぎている

（スライドを示して）そもそもですけど、エンタープライズって、エンジニアを取り巻くエコシステムが欧米と日本とで全然違いますよね。SIerなんかがまさにそれで、ユーザ企業さんのシステム費を下げようとして頑張るんですが、システム費が下がると受注費が下がるし、エンジニアが評価されないしで、利害がうまく一致せず難しい状況。

そんな中で、ITで働き方をよくしようとか、エンジニアの技術で競争力アップに貢献していこうとか、そういう投資を提案していけるかんじにはなかなかなれず、海外とかと比べると日本はよくない方向に向かってる。エンタープライズは今とてもツラい状況に陥っているのではないでしょうか。そこで今日は前向きに企業のITをよくしていく方法を、フロントエンドという観点から、語り合えたらいいなと考えています。今日のアジェンダですがこの3つです。

• 古いシステムのツラいところ、例えばIE6/VB6とか
• これから結構使えそうなWeb技術
• どうやって新しい技術を入れるか、上司を説得するか

これらの課題を考えていく会にしたいと思います。早速パネラーに自己紹介してもらいましょう。

小川：エンタープライズ部の小川です。システム提案とか社内で利用するフレームワークの選定、エンジニアのトレーニングとかをやってます。

酒巻：同じくエンタープライズ部の酒巻です。前職ではHTML5関係の技術を仕事に取り入れてました。転職して直接HTML5関連は減ってるんですが、前職の経験からエッジの効いたエンタープライズっぽいところには関っている、という結構幸せな仕事をしてます(笑)。前職では小川さんと同じ社内標準の選定や、教育を含めてオープンソースの技術をどう使っていくのかという取り組みをやってました。

レガシーシステムとの付き合い方

川田：では、まず「古いシステムのツラいところ」から。

酒巻：自分の場合は、IE6やVB6でも苦しめられることがありますね。IE6ってXPと同時に死に絶えるかと思ったら、「サポート切れてるけど長期的に見て2年後にリプレース」みたいなところがあって。その資産とエッジの技術が今ぶつかってる。特に技術者が少ない部分、ActionScriptとかPrototypeJSとかに特有の癖などをよく知っている技術者が少ないんです。そういうニッチなことを知ってる人に負荷が集中してるのが、今よく見る状況ですね。VBも一緒だと思います。VBができるエンジニアって社内で貴重です。

川田：VB6知ってる人とか「神」扱いですよね。

酒巻：そういう人はたいていエッジなものも知ってるから、一人に対してよけいに負荷が集中してしまう。知らない人は定時で帰れるのに。

小川：私は今は幸いにIE6じゃなくIE8なんですけど、VBからIE6とJava EEに置き換わってという、まずはオープン系に置き換わって、その次のリプレースってのが多いですね。私は今日は話すほうよりも、皆さんからヒントをいただきたいので、いろいろ聞きたいんです。

──ここで川田さんが、会場にIEの案件をやっている人の挙手を募ったところ、意外と少ない結果に。さらにAndroid2.3標準ブラウザについても聞いてみると…

川田：Android2.3標準ブラウザだと、IE6とあまり変わらないくらいの存在ですね。IE8を使ってるということは、エンタープライズだとJavaなどが多いと思いますが、JSFあたりは拡張にいろいろと制約が出てきませんか？

小川：私の周りでは、そもそもJSFを使ってるケースがあまり例がありません。実際はまだJSPで作られているものが多くて、それを今のHTMLベースのアプリケーションに置き換える時に、BackboneなのかAngular.jsなのか、という議論です。

川田：JavaScriptフレームワークの活用に進んだのですね。小川さんは、ちなみにどっち派ですか？

小川：今はAngular推しなんですけど、どちらかというとSenchaのように、UIのコンポーネントを持っているもののほうがエンタープライズとしてはよいのではないかと思っています。

川田：エンタープライズの重要なポイントとしてサポートというのもあるけど、ちょっと安い案件はサポートなしでいこうかな、みたいなラインを狙ってるようですが、そのあたりどう思いますか？

小川：持続可能性を考えると、オープンソースだけタダだからって単体で使うのは、ちょっと違うなと思ってます。サポートがあるというのとは別に、いろんなものを組み合わせるとどこで不整合が起きるか分からないですし、ライセンスの問題もありますし、結構難しいんですね。そう考えるといろんなオープンソースを組み合わせて、一個のプロダクトにしているものの方がよいと思います。

川田：なるほど。話は変わりますけど、「古いIE向けのシステムはIE8や9でDocumentModeを使って動かせる」という神話があるんですが、実際に中身にはJavaアプレットがあったり、もう一つはFlash/Flexだったりするわけですね。そういうのを入れ替えたり、維持したりというのはありますか。

酒巻：2年くらい前の話なんですけど、その時に自分はネイティブを選んじゃったんです。2年くらい前だとFlashでやれることがHTMLではまだつらかった時期で、しかもIE7までサポートという条件があって。技術的にはできるんですよ、技術的には。ただ投資効果が…リプレース案件だったのでお金が出ないんですよ。それで一番安く上げる方法は…ってなるとFlashになっちゃう。自分はこれはHTMLでやったら面白そうだなとは思ってたんですが…。

──会場からJavaで画像を操作するところをFlashを使おうとしたが、許可が下りなかった話が投げかけられた。ソースや設計書もなかったが、動いたのだという。

川田：JavaアプレットとかFlashを置き換える案件、いい方法はありますか？

小川：作り変えた方がいいと思います。作られた当時のビジネス要件と今のビジネス要件では、状況が違いますから。お客さんにとっては、システム更改はグローバル化に代表される様々な変化と戦うための、新しいシステムを手に入れるチャンス。我々エンジニアとしてはそこに新しい技術を入れていく方法を考えていくべきかと。

酒巻：部分置き換えって長期的に見てコストがよろしくないケースのほうが多くて、会社レベルで業務計画の一環として古い資産を置き換えていくべきってのは、常に意識してます。

川田：この世界には、「三割改修は全入れ替えと変わらない」の法則がありますからね。

エンタープライズでも注目の最新Web技術

川田：これから先、ビジネスになりそうな技術を探っていこうかなと思うんですが、「この辺の技術要素はアツいぜ」ってのはありますか。

酒巻：鉄板ですが、Web ComponentsとServiceWorkerがすごく「来る」と思ってます。Web ComponentsのビジネスモデルとServiceWorkerのオフラインアプリケーションというのが、今の微妙に足りないHTML5プラットフォームにぴったり当てはまりそうな気がしてるんです。

小川：私の会社はWebだけでなく組込みやクラウドもやっていますが、その中で考えていくと、WebSocketですね。いろいろなデバイスがありますし、今後は薬の中にもセンサーが入るような時代になっていく。そうするとそれらのデータをどうやってWebやクラウドに上げて分析をしていくかが重要になっていて、今「何か」と「何か」をつなぐインフラとしてWebが一番適しているんですよ。そこで今注目している通信技術としてはWebSocketですね。

川田：私はやっぱり業界全体の流れに全力に乗っかろうということで、モバイルに期待していたりします。私はこれからは「モバイルファースト」じゃなく「モビリティファースト」になる説を推しています。実はブログ記事でも上げてるんですが。

小川：見ました。同感ですね。

川田：従来はデスクトップコンピューターに縛られたシステムだけです。それが今変わってきて、安価で汎用的なデバイスの中から、取捨選択しながらシステムを作っていく時代になると思うんです。デスクトップだけで完結したシステムを作るんではなく、いろいろなデバイスの中から適切なものを選んで、システムで業務フローを実現するような時代になっていくのではないかと。

酒巻：タブレットは結構もてはやされていましたが、仕事で要件とかワークフローを作っていくと専用機の方が優秀になることが多いんです。ワコムのペンタブレットとか、専用のUSBを挿すだけで動くような端末とかで。それがさっき小川さんが言ったWebSocketで通信する、API互換、Web標準でそういったマシンが繋がることがシステム開発の土台となってくれたら、すごい嬉しいなと思います。


　▲当日の会場は、テーブルには川田さんのおごりのビールが最初から並べられました

エンタープライズにUXって必要？

川田：モバイル絡みの話になりますが、エンタープライズにUX（への配慮）って必要だと思いますか？

──会場からの挙手はUXいらないと思う人、いると思う人が半々という結果に

（参加者）：ミスを少なくするというような観点で、誤解が少ないラベリングや紛らわしくないアイコンといったものは絶対必要。そういう理由で僕はUXは必要だと思います。

（参加者）：スマートフォンのOSを乗り換えるということがあるけど、たいていの人はすぐに使いこなせる。それはなぜかというと、UXがものすごく考えられていて分かりやすいから。でもエンタープライズの技術では新しいのになると「使わない」「使えない」って言われるのは、UXを考えてないからなんじゃないか。なので新しい技術で日々革新してことになったら、UXの部分だけは一本筋を通してあげないとダメではないかと…。

小川：UI/UXはお金にならないと言われる機会が多いです。例えば非常に使いにくいUIを変えたとき、現場の反応を見ると最初は大変評判が悪い。でも半年くらい経つと「使いやすい」と言われるようになる。その半年間の業務効率低下のコストと、そこで得たUI/UXが本当に等価だったのか自分は結構悩んでいて、WebとかであればUI/UXのベストプラクティスってあるんでしょうけど、企業システムの閉じた世界だと一般論では語れない何かがあるんではないかなと思ってます。

川田：私はUXは暫定的には儲からないんですけど、これから先は必要になると思ってます。エンタープライズとWebで公開されているサービスの大きな違いって評価軸で、Web系のサービスはたくさん利用してもらうことに価値がある。でも業務システムは嫌でも毎日使う。

ところが業務ってシステム化されているはずなのに案外現場に見にいってみると「使いにくい」あるいは「現場に合ってない」と思われるところをアナログに戻してるんです。そういう意味で今まであったものを置き換えるとなった時に、UXは重要なポイントになる。エンタープライズでは、モバイルとUXはセットだと考えているんです。

酒巻：UXじゃなくて、UIの話題の方がまだエンタープライズでは多いんですね。まだUIが出そろっていない「こういう時にこうする」っていうベストな選択肢が、まだ分かってない部分が多いんじゃないかなあと。

川田：エンタープライズは「ベストプラクティス」が好きですよね。

酒巻：むしろその言葉に安心して、みんな次の一歩へ進みたいっていうのがあるんじゃないかな。

小川：「モビリティ」の考え方は非常にありだと思っていて、例えば日本だとどんどん人口が減ってきていて、出産後の女性の活用、オフィスに縛られない働き方の中ではデバイスだったりノートPCが必要だけど、それは今までの業務システムの業務フローにないんです。そこで新しく再設計した上で、全部最適化されたら素晴らしい未来があると思ってますが、なかなかピンときてくれないんですね。ただ今後そういう企業や事例などが増えて、日本でもそういう働き方が普通になってくると思うので、そういうのを実現するための新しいテクノロジーはありだと思うんです。

酒巻：それは自分も夢に見ることがあるんですけど、そうなるために企業が何をするかっていうと「一部改修」「部分改修」で何とかしようって考えが多くて、それでコストが大きくなって結局取りやめようってケースが多かったんです。

小川：そこで相手側のステークホルダーを考え、「経営者の方に話すときは企業としての将来計画、ビジョンといったものをきちっと立てる」ことが必要だと思ってます。

オープンソースのフレームワークはどう？

川田：別の新しい技術の話も取り上げてみましょう。「オープンソースのフレームワークってぶっちゃけどうよ？」に何か意見はありますか？

酒巻：現在のエンタープライズで一番注目株といえば、Cordovaですね。お客様からのご要望で、ネイティブのファイルAPI、ローカルファイルにアクセスしたいっていう話が結構あるんです。「ActiveXなどで使えたのが同じWebなのに何で使えないの」って話が出てくるんですよ。そのための逃げ道として、Cordovaなどが出てきているんじゃないかと。ただ将来的に、Cordovaだけでやっていくのは怖いなって自分は思ってます。

小川：あれはまだ「闇」ですね(笑)。私もHTMLだけ作ればネイティブできますよっていうCordovaの甘い誘惑に誘われていったら、なぜかAndroidのネイティブ部分を触ることもあるという(笑)。技術の選択肢としてはありだと思いますけど、選定する側としてはメリット/デメリットをちゃんと把握した上できちんと利用するべきで、そのために一番大事なのは「味見」ですよね。

川田：弊社にはオープンソースの匠みたいな人がゴロゴロといるんですが、彼らが言うには「ここ最近の技術革新は早すぎる」。ここ10年くらいはゆっくり動いていたのに、滅茶苦茶早くなってしまった。そんな中で戦うために必要なのは、やはり「味見」だと思います。

酒巻：ブログや記事で紹介されている「光」の面だけ見て理解した気になり、とりあえず仕事に取り入れてみよう、というスタートはデスマのサイクルに陥る一因。その間に自分で味見やプロトタイプを作り、評価をするって課程が今後必要になってきますね、オープンソースをしっかり使う上では。

川田：「味見部」は何かやります？そこに html5j味見部部長の金井健一さんもいらっしゃるので…

金井：基本的に新しい技術が出たら味見をしています。なので「人柱」です。新技術がたくさん出てきても当たりなんて1割あるかどうか、本当にひと握りです。


　▲html5j Web先端技術味見部部長　AngularJS Japan User Group 管理人の金井健一さん

川田：エンタープライズのエンジニアがみんなユーザー企業にいるなら、システム費を下げればそれは直接自分たちの成績になるけど、日本では中間にSIerがいますからね。そこで新しい技術でできることとしてまず考えられるのは、「入れ替えの技術」。まず、「VB6とかFlashを使ってきたことを入れ替える技術は何だ」ってところからスタートして、その後モバイルでどうするのかを考えていくべきかと。

エンタープライズを「モダン」にするための技術

川田：最後にどうやって新しい技術を入れていくか、ぶっちゃけ「どうやって上司を説得するか」という話になります。酒巻さんはフレームワークを導入した時、どういう説得をしました？

酒巻：Angularを実際のそれなりの規模のあるシステムに取り入れました。何が大変だったかというと、エンジニアの下からの反発と、それで本当に見積り出せるのかという上からの反発ですね。

川田：見積りなんですか、上からは。

酒巻：これは何万円でできて、ウチに何万円の利益が出るかを最初にかなり正確に出したがるんです。フレームワークは前例がない。それに比べて、JSPで作ったらものすごく具体的に数値ができるんです。そこをいかに「最初に（見積もりを）作りあげるか」でしたね。

川田：Angularを入れるメリットは説明したんですか？

酒巻：はい。説明資料もかなり作りました。自分もBackboneとかEmberとかの当時エッジなJSフレームワークを味見して、最初にいけると思った唯一のフルスタックがAngularだったんですよ。

川田：一つで完結できるってことですか。

酒巻：テストとCIまでが、Angularのページに「こうすればいい」と載っています。Angularの基礎の部分を一回理解すると、それをそのまま設計に転用できるというのがすごく大きい。特にバックエンドのノウハウをそのまま使ったクラスコード、モジュール設計をできたのは上司を説得する上での説得材料になりました。

それをもとに実際に部下たちにAngular.jsを触らせて、実際できたら「できるじゃん」というノリですよね。言いかたが悪いですけどサラリーマンプログラマの人たちは安定した技術、昨日やっていたことを今日もやりたいと思う人が多いんで、それをどう切り替えさせるのか、「ほら簡単だよ」「やったらできるでしょ」さらに「こんなに楽になるよ」というのを教えてあげる、体験させてあげるっていうのが重要かなと思います。

小川：同感です。その点、Angular.jsはいいフレームワーク。後はUIフレームワークですね。SenchaやKendoUIなども検討してみてもいいと思います。

あとマイクロソフトのWinJS、これが正式にリリースされたら結構インパクト大きいと思います。企業システムのHTML5化をする上で一番ネックなのが、バックエンドの既存システムをどうやってWebAPIにするかという点です。バックエンドの話で言うと、マイクロソフトの.NETの技術はかなり素晴らしいですね。そことペアになる、マイクロソフトのサポートがあるUIフレームワークが出てきたら、乗っかってもいいかなと思っています。

川田：最近のエンタープライズでは、OSSよりベンダー製品の方が明らかに尖ってきていますよね。新製品の選定をOSSで縛ると、できないことが多すぎて困ってしまうのですが。

酒巻：自分は、Angularは入れましたけど、実際にガンガンやっていくんであれば、SenchaとかEasyUIの方が安心はできますよね。



川田：ほかにこの辺りが来るんじゃないってのはありますか？

金井： Angular.jsユーザー会会長だからAngularを推しているわけじゃないんですけど、Build 2014というマイクロソフトの技術者カンファレンスでも「.NET系とAngularの相性がすごくいい」とめちゃくちゃ盛り上がってました。マイクロソフト系列のKnockoutの話が全然出てこなかったんですよ。

小川：ちなみにJavaOne TokyoでもAngularが取り上げられていたそうです。エンタープライズJavaとの組み合わせでも、Angularは注目されているのかもしれない。

金井：たぶん、JavaScriptを書きたくないんですよね。Angularを使えば、JavaScriptの記述量をかなり減らせるから。

川田：私も「みんなJavaScriptなんか書きたくないんじゃないか」と思ってるんですよ。jQueryは「jQuery」っていう言語で、JavaScriptとは言いがたいじゃないですか。ひょっとするとここにいる皆さんも、本当はJavaScriptが嫌いなんじゃないんですか！？

(会場から) え～(笑)

川田：で、新しい技術をどう入れていくかの一歩前に戻るんですけど、フロントエンドってJavaScriptを書かない方向に行くんじゃないですか？

金井：JavaScriptにWeb Componentsが実装されると、苦手な人はわざわざJavaScript書かなくていいよっていうふうに、未来はなってます。

小川：コンポーネントが安定的に提供されて、JavaScriptに慣れないエンジニアでも大規模なものが作れるようになればいいなあと思いますね。

川田：思ったよりモバイルとフレームワークの話に行きましたよね。モバイルとフレームワークは非常に関心が高いのだと思います。モバイルに関しては「適用方法はいくらでもあるけど、提案する方法が見つからない」なのですが、フレームワークの場合は「良さは分かっているけど、お客さんにその良さを伝えられないというのが苦しい」のだと全体的に感じました。

ということで、90分にわたりいろいろ議論していただいてありがとうございました。最後にもう一度乾杯で締めましょう。乾杯！

html5j主催により開催された、WebデザイナーやWebエンジニアのためのクリエイティブ・アワード「HTML5 Japan Cup（5jCup）」。応募期間4月23日～6月30日の約2カ月で集まった作品数は、なんと289作品でした。

この数あるHTML5を使ったアプリの中から最優秀賞・優秀賞作品や審査員特別賞などを受賞した作品たちを、5jCupの審査員も務めた池澤あやかさんと一緒に紹介していきたいと思います。

　▲Rubyが得意な「GEEK系アイドル」池澤あやかさん

優秀賞4作品と審査員特別賞3作品が選抜されるまで

7月26日に開催された「HTML5 Japan Cup 2014 The Final」まで、実は2回の審査会を行っています。1回目はhtml5j＆5jCupスタッフ有志約30名による審査基準チェック。作品にWeb技術を使っているか、5jcup開催期間中に制作・更新されたものであるか、モバイルアプリは端末で操作できるかといった基本的な確認に加え、「独創性」「完成度」「表現力」「技術力」の観点から審査を行い、20作品に絞り込まれました。

　▲PC画面やモバイル端末、Leap Motionなどの実機を使って検証、審査するスタッフの皆さん

その20作品に対して、5jCUp審査員による二次審査会を行いました。審査員全員が半日に渡り議論を重ねながら選ばれたのが、優秀賞の4作品と審査員特別賞の3作品です。

　▲審査員の池澤あやかさん、及川卓也さん、羽田野太巳さん、Daniel Davisさん、藤村厚夫さん、秋葉秀樹さん、吉川徹さん

「HTML5 Japan Cup 2014 The Final」では優秀賞に選ばれた4組がプレゼンを行い、会場の参加者全員で10円玉で投票するというやり方で最優秀賞が決定しました。

　▲審査員も来場者と同じ一票（10円玉）を投じました

最優秀賞・優秀賞・審査員特別賞に選ばれた作品たち

＜最優秀賞＞コトバツナギ

会場の票を集め、最優秀賞に選ばれた作品は、藤岡宏和さんの「コトバツナギ」。PCやスマートフォンで「声に出して声で遊ぶ」ゲームです。シリトリもしくは連想ゲームを選択し、WebRTCと音声解析を使ってコトバをつないでいきます。コトバは文字だけでなくネット上から画像を検索して表示させる機能もあり、どんな画像が現れるのか予測できないという楽しみもあります。

　▲参加者がスマートフォンに向かってアイコトバ（合言葉）を伝えるとゲームがスタートします

デモ動画（解説文字付きデモ動画／文字なしデモ動画）が公開されていますので、ぜひこちらもご覧ください。詳しい技術解説は後日藤岡さんのレポートで！

＜優秀賞＞Enraged Fowls

優秀賞1作品目は、「Angry」と「Bird」でおなじみのゲームをThree.js（WebGLライブラリ）とCannon.js（物理エンジン）を組み合わせて3Dゲームに仕立てた「Enraged Fowls」。制作者のあんどうやすしさんいわく、WebGLと3次元の物理エンジンを一緒に使っている作品はEnraged Fowlsだけという自信作。デモ動画とソースコードも公開中です。

　▲Google I/Oで配布されたProject Cardboardをヒントに100円ショップで自作したスリングショットコントローラー

さらに利用したHTML5技術として、WebWorker（画像解析）、navigator.getUserMedia (WebRTC：ウェブカメラ画像取込）、navigator.vibrate (Vibration API：タップ通知）、window.localStorage（ハイスコア保存）、devicemotionイベント（スマートフォンの裏面タップ検知）があるのだとか。最優秀賞で賞金100万円を獲得したら、電子書籍でWebGL+物理エンジンの技術について執筆するとアツく語っていましたが、今回はHTML5 Experts.jpで授賞作品の技術解説を書いていただくことになりました。お楽しみに！

＜優秀賞＞YouTubeそっくりなWebGLプレーヤー

カメラのアングルを動かせる「YouTubeそっくりなWebGLプレーヤー」で優秀賞を受賞したのは、jThree合同会社の松田光秀さん。一見動画に見えるデモ画面の中で踊るキャラクターたちは3DCGモデルで、マウスで動かすことができる。

　▲「jThree」で世界のWebをたぎらせたいとアツく語る松田さん

プレゼンで最も強調して語られたのは、松田さんが開発したjQueryの記法で作るWebGLライブラリ「jThree」の有用性について。このプラグインを使えば、デモ1本のコーディングがたったの3KBで書け、デザイナーやプログラミング初心者でも簡単にWebコンテンツを作ることが可能だという。

Oculus Riftモードやカメラコントロールは、設定不要の標準搭載。表彰後の懇親会では、池澤あやかさんもLeap MotionやOculus Riftで体験。池澤さんの感想は「ブラウザで3Dレンダリングできて、しかもLeap Motionからの入力でそのモデルが動くなんて、すごく時代は進んだなと思いました」。

　▲Leap Motionで3DCGモデルを動かす体験を試みる池澤あやかさん

＜優秀賞＞JS Racing

優秀賞4作品目は、西田慎吾（株式会社アイエムジェイ・TSUKURITE）さんのWebGLとWebSocketを使用した3Dオンラインレースゲーム「JS Racing」。審査員である羽田野太巳さんが、時間を忘れるほどはまってしまったというシンプルながらもゲーム性の高い作品です。

　▲PCだけでなく、スマートフォンからも操作ができ、複数人で同時走行やオンライン対戦も可能

その他に使ったHTL5技術はSVG、Canvas、WebFont、CSS3。クライアント技術としてTypeScript、jQuery、Three.js、Box2DJS。サーバサイド技術としては、Node.js（Socket.IO、Express、Jade）、MongoDBを活用しているとのこと。元々Flasherだったという西田さんは、TypeScriptがとても使いやすかったそうです。

＜審査員特別賞＞PACPAC

当初予定されていなかったものの審査会で優秀賞と甲乙つけがたいと評価された3作品に、審査員特別賞が授与されました。その一つがCanvasとCSS3を組み合わせて立体の面にペイントできるようにした作品「PACPAC」（いしかわさん）。

　▲池澤さんが描いた3Dの牛乳パック。拡大して見たい方はこちらから

その他に使ったHTL5技術はアニメーションにjQuery、Ajaxをページ遷移を少なくするために用い、画像の保存はクライアント側でcanvasをdataURLにして、サーバー側でファイルに保存しているとのこと。池澤あやかさんいわく 「divで牛乳パックが構成されてることに驚きが隠せなかった」のだそう。ちなみに最も応募数の多かった、html5jエンタメ技術部の「エンタメアプリ・コンテンツ賞」もダブル受賞でした。

＜審査員特別賞＞花王カタログカルタ

node.jsを利用した多人数での同時対戦が可能な花王製品カルタゲーム「花王カタログカルタ」（博報堂アイ・スタジオ）。各画像はsvg、カルタの拡大画像などのアニメーションは主にCSS3で実装することによって、パフォーマンスやクオリティの向上を図っています。

　▲製品にまつわる利用シーンなどのあるあるネタをカルタ化している

技術力に加え、インタラクティブコンテンツの制作会社である強みである最大限に活かしたマーケティング力とクリエティブ性の高い作品です。

＜審査員特別賞＞TouchBloomy

オブジェクトの連鎖点を予想して、ブラウザ上でタップしてつなげるパズルゲーム「TouchBloomy」で受賞したのは、チームアルクリットの吉村智志さん、小澤駿さん。1ステージ約30秒、ワンタップでできるシンプルなゲームで、ステージ投稿機能なども面白い仕掛けとなっています。

　▲画像を使用せずに処理速度を維持。enchant.js、canvas、DOMなどの技術を使って制作している

上記で紹介した最優秀賞・優秀賞・審査員特別賞の受賞作品について、池澤あやかさんに感想を聞いてみました。
「受賞作品はWebRTCで参加型のWebに仕上げたものが多く、印象に残りました。意外と今までは参加型のWebが少なかったので、Webの近未来を感じました。WebRTC、私も今度いじってみようと思います」

池澤あやかさんの言うとおり、今回の5jCupはWebRTCを使った応募作品が最も多く、41作品。そして、WebGLの30作品、Monaca/Onsen UIが20作品と、Webの先端技術を駆使した作品が多数応募されました。受賞作品の講評、審査員コメントは以下で紹介されていますので、合わせてご覧ください。

• 【HTML5 Japan Cup 2014】最優秀賞・優秀賞・審査員特別賞の受賞作品と審査員講評
• 【HTML5 Japan Cup 2014】テーマ賞の受賞作品と受賞理由
• geechsマガジン独占！豪華審査員インタビュー

テーマ賞作品LTで、池澤あやかさんが印象に残った2作品

「HTML5 Japan Cup 2014 The Final」表彰式終了後の懇親会では、各テーマ賞受賞者の方々によるLT大会が行われました。飲食OK、ただし全員着席で全力でLTを聞くのをルールとしたこともあり、歓声と拍手で大盛り上がり。どれも大変面白い作品ばかりなのですが、今回は池澤あやかさんが印象に残ったという2作品に絞って紹介したいと思います。

!CheerZ!　乾杯可視化システム

まず1作品目は「!CheerZ!　乾杯可視化システム」（0101室サーバ担当チーム）。センサー付きのグラスを使って乾杯を可視化し、遠方にいる人とも乾杯ができるというもの。「スマートフォンの次を狙え！生活を快適にするデバイス×Webアプリ」受賞作品。

　▲WebGLを使って表示、 Socket.IOで画像を飛ばしている

　▲乾杯するとグラスに付けている加速度センサーが認識して、地図上に表示される

UFO-Escape

もう1作品は小学6年生のプログラマ・シュン君の「UFO-Escape」。Webプラットフォーム賞の審査基準は「最低でも二つ以上のプラットフォームで、同様の挙動をすること」だったが、応募したWindowsストアアプリ、Firefox OS、Chrome Apps、Android (4以上)すべてのプラットフォームできちんと動くことが確認できた唯一の作品だったのだとか。

　▲トップバッターにも関わらず、堂々と発表するシュン君

　▲enchant.jsで作ったゲームを、Windowsストアアプリ、Firefox OS、Chrome Apps、Androidなどのプラットフォームに移植

• シュン君が挑戦した「enchant.jsでHTML5ゲームを作り、プラットフォームに移植してみよう！」
• 【HTML5 Japan Cup 2014 The Final】LT＆懇親会レポート！

＜池澤あやかさんの感想＞
カンパイ楽しかったです。この作品はジョッキの下にマイコンがとりつけてあったのですが、この作品のようにマイコンを使って現実世界と繋がるWebも今後発展していくのではないかと思います！

そしてまだ小学生の男の子が堂々とLTしていたのを見て、今後の日本は安泰だと思いました。しかもゲームもよくできてたので、本当にすごいなと。

HTML5 Experts.jpではこの後も「HTML5 Japan Cup 2014」特集を組んで、最優秀賞・優秀賞受賞者の皆さんによる技術解説レポートも掲載予定です。ご期待ください！

　▲61団体,延べ参加人数1449名（htmlday含）で日本のWebをたぎらせた「HTML5 Japan Cup 2014 The Final」にカンパイ！

HTML5を活用したハイブリッドアプリ開発について、Web業界を代表するエキスパート陣が様々な観点からレポートをお届けした「ハイブリットアプリ開発最前線」特集。

最後のレポートは「ハイブリッドアプリ開発、ホントのトコロ」と題し、第48回HTML5とか勉強会「ハイブリッドアプリ開発最新動向」の懇親会で行われたぶっちゃけトーク対談を再現レポートします。

▲登壇者（左から）：株式会社ニューフォリア 畠田喜丈さん、アシアル株式会社 久保田光則さん、AngularJS Japan User Group管理人 金井健一さん、Google Developer Expert（Chrome）吉川徹さん
モデレーター：HTML5 Experts.jp編集長 白石俊平

ハイブリッドアプリ開発にしてよかったことは？

白石：ハイブリッドアプリ開発が注目され出してもう数年が経つんですが、まだくすぶってる感があると思うんです。今日は本音でいろいろ聞けたらと。まず、ハイブリッドアプリ開発にしてよかったと思うことを聞かせてください。

久保田：僕はハイ・フィデリティ（忠実度の高い）なプロトタイプをさくっと作れることですね。アプリの機能は動かないけど、アプリのユーザーインターフェイスやインタラクションがわかる。動きやさわった感じが確かめられるし、アプリケーションの見た目の“ガワ”を作るのが断然早くなります。

これがいいアプリなのか判断に迷うフェーズでも、実際のUIの“ガワ”をがっちり作ることで、高い確度で確かめることができる。それに、クロスデバイス,クロスプラットフォームでがしがし動くので、アプリのUIを確かめるのに役立っています。サービスの受託でやってたときに、お客様にもそんなに早くできるのかって驚かれたこともありますね。

アシアル株式会社　久保田 光則さん

白石：ところで、ここまでクロスプラットフォームでの移植性の話があまり出てきていませんね。ハイブリッドの利点といえばそこだと思っていたので、意外。

畠田：ああ、移植性については、まずありきのつもりで話してました。

久保田：そうですね。ちなみに私はAndroid版は動作が遅いので、先に作るようにしています。前にiOSから作ってAndroidに移植したら遅くて大変な目に合ったことがあって…。

白石：ちなみに最近は、Androidは2.3以上をターゲットにして開発しているんですか？まだ2.2もスコープに入ってるのかな。

畠田：2.2が要求仕様書に入ってるところはまだ多いですね。ただ「端末買い換えが2年だからそこは切り捨てましょう」って、そこは削ってもらうように説得しようと試みますけどね（笑）。

吉川：私は一エンジニアとしての視点から、ハイブリッドアプリでよかった点をお話すると、やはりWebエンジニアがJavaやObjective-Cが書けなくても、AndoroidやiOSアプリの仕事が受けられることですね。最近はWebのコードで書いて、Cordovaでコンパイルすればアプリが作れる。仕事の幅が広がって楽しいです。

──ここで会場から質問が寄せられた

Q.ハイブリッドアプリというと移植性の話もあるけど、クックパッドの事例が成功として挙げられます。ユーザーを絞り込んだABテストが容易にできるだけではなく、デブロイの早さなどを考慮してハイブリッドアプリにしていると聞いたことがあるのですが、そのほかにハイブリッドアプリにしかできないことってありますか？

畠田：ハイブリッドアプリって遅いんじゃないか？というハイブリッドアプリに否定的な声に対抗できるので、クックパッドさんの成功事例は我々にとってありがたいですね。

詳しくは存じ上げないのですが、クックパッドさんにとっては、新機能のデプロイまでの時間を短くするための、現時点での最善策がハイブリッドアプリなのではないでしょうか。

株式会社ニューフォリア　畠田喜丈さん

ハイブリッドアプリで開発してドはまりしたことある？

白石：ところで、ハイブリッドアプリでドはまりした経験はありますか？デバックが全然できなかったとか、移植したら動作が違うとか。

金井：端末によって同じCSSなのに見た目が全然違うのもそうですが、JavaScriptの挙動も違うところ。一方の端末は滑らかに動くのに、別の端末だとカクカクだったり、もっさりしたり。とにかく端末ごとに挙動が違うのは予想できないので、トライ＆エラーを繰り返すことになりましたね。

html5j Web先端技術味見部部長　AngularJS Japan User Group 管理人　金井 健一さん

標準化の動きはどうなってる？

白石：CordovaやニューフォリアのAPI、Chrome AppsのAPIなど、モバイルデバイス向けのWeb APIは細分化しつつありますが、これって標準化できないものなんでしょうか。

──ここで、白石さんが突然会場の羽田野太巳さんを指名

羽田野さん、現状ってどんなかんじなんですか？

羽田野：最新情報はあまりよく知らないんだけど、統一はしばらくないんじゃないかと思います。もちろんいつかは一緒にするために施策を立てているとは思いますが、現在はFirefox OS/Windows 8/Chrome Appsなど、各ベンダーが独自にAPIを作り込んでるのが現状です。

でも、いつか標準化してくれるからそれまで開発を待とうなんてベンダーはないわけで。いろいろAPIが出てきて、いろんな事例を経験して、みんなが試していいものが残っていくし、ある意味健全です。だからまだまだ時間がかかる。個人的にはベンダーがそれぞれ独自のAPIで作っていくのは大歓迎ですね。

これまではネイティブでしかできなかったことが、JavaScriptで何でも開発できるようになってきました。今はばらばらだけど、一つのプログラム言語だけでできるようになりつつあると思います。これはまだデファクトではないけど、コンソーシアム標準的には前向きに捉えていいのではないでしょうか。

有限会社futomi 代表取締役、株式会社ニューフォリア　取締役　最高技術責任者 羽田野 太巳さん

HTML5でデバイスごとの互換性や移植性がとれてない？

白石：ところで、HTML5ならデバイスごとの互換性や移植性がとれると言われていたのに、結局選ぶプラットフォームに依存していて、互換性がとれてないですよね？その辺はいかがでしょうか。

HTML5 Experts.jp編集長　白石 俊平

さまざまなデバイスでWeb技術が果たす役割

白石：これからさらに様々なデバイスが登場し、Web技術が果たす役割も増えていくと思います。皆さんはどのようにお考えですか？

吉川：いろんなデバイスにWebの技術が広がっていくのはうれしいですね。Webの進化のスピードに合わせて、デジタル家電のUIやデザインの進化も加速するはず。期待したいです。

畠田：ユーザーインターフェイスもだんだんWebに準じたものになり、今まで古くさかったデザインやUIが洗練されたものになっていくはずです。Webで活躍しているエンジニアやデザイナーたちによって使いにくいインターフェイスやマニュアルなどが革新されていく。誰でも使えるようになる世界が早く来てほしい。

白石：ただ僕が心配しているのは、ウェアラブルなデバイスなど、デバイスの小型化がどんどん進んでいる現状では、デバイスの「非力化」も進んでいるんじゃないかと思うのです。そうなると、比較的高いCPUパワーを必要とするWeb技術は敬遠されて、ネイティブが当たり前になっちゃうんじゃないかと。Webブラウザを搭載しないデバイスも増えてきそうです。

吉川：それは心配ないんじゃないでしょうか。ハードウェアの進化があったからこそ、ウェアラブルが出てきたはず。今後もハードウェアの進化は続くでしょう。

例えば、昔のインターネット回線が遅かった時代は動画なんてありえませんでしたが、回線が早くなったからこそ品質が良くなって動画サービスがブレイクした。要は、環境次第で変わるということです。今は、ハードウェアの性能が上がってきているからこそ、Webを組み込んでも大丈夫じゃないかという流れですね。未来はそんなに暗くはないんじゃないかな。

Google Developer Expert（Chrome）　吉川 徹さん

さらに会場からは、HTMLとJavaScriptとCSSで書くから重くなるのではないかという声も。JavaScriptだけにすれば軽くなるのではという意見や、3つ以外の言語や新たなレンダリングエンジンが生まれる可能性、WebGLやFamo.usなどに対する期待の声も多く聞かれました。

未来のデバイスとWeb技術にも夢を馳せながら語り合った対談もここで終了。Webとネイティブのメリット、デメリットを合わせ持つハイブリッドアプリが、今後デバイスやWeb技術の進化とともにどう技術的課題をクリアしていくのか。編集部では今後も最新事情をお伝えしていきたいと思います。

★今回の登壇者が執筆したハイブリッドアプリ特集記事もぜひ合わせてご覧ください。

• 久保田光則さん執筆：HTML5ハイブリッドアプリ開発、最新動向はやわかり！
• 金井健一さん執筆：キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！
• 畠田喜丈さん執筆：PhoneGapとは一味違う！純国産ハイブリッドアプリフレームワーク、「アプリカン」事始め
• 吉川徹さん執筆：Chrome AppsをモバイルでもーChrome Apps on mobileー
• ハイブリッドアプリ開発最前線：特集レポート一覧はこちら

今年に入って車載プラットフォームや組み込み系OSの動きが活発になってきています。
2014年4月8日に開催された、html5j自動車部の第三回勉強会「車載とWebの今が分かる、てんこ盛りの165分」では、W3Cにおける標準化動向や個別のプロダクト（QNX Cars、TizenIVI、Firefox OS）の最新動向を業界の第一人者の方々に思う存分語ってもらいました。その模様をレポートします！

はじめに

現在、車載機器に搭載されるOSのほとんどは車載専用として開発されていますが、昨今はスマートデバイスに搭載されているOSを車載に対応させようとする動きが出ています。

第三回勉強会は、今のWebと車のかけ合わせに関するキーパーソンの方々に、Webと車載OSについて講演していただきました。非常にボリュームのある勉強会で休憩時間もあまりとれませんでしたが、その分濃厚なお話が聞けました。会場はリクルートマーケティングパートナーズさんです。

セッション1. W3C標準化と車載プラットフォームの最新動向について

最初は株式会社ニューフォリアの羽田野さんのセッションです。(スライド)

IT業界と自動車業界の動向、組み込み系でWeb技術を使用する際の課題、IVI（In-Vehicle Infotainment：車載インフォテインメント）上のWebアプリケーションストアの是非や、市場規模について、さらにはVehicle APIを提供している各社のSpecから作成したサンプルコードの比較など、最初のセッションから盛りだくさんの内容でした！

車載プラットフォーム最新動向

昨今、新たな車載向けプラットフォームが続々と発表されています。

• AppleのCarPlay
• GoogleのAndroid(OAA)
• MicrosoftのWindows in the car

CarPlayはフェラーリをはじめ、多くの自動車メーカが名を連ねています。GoogleのOAAもAudiなど、多くの自動車メーカーが加盟しています。こちらはプロダクトを発表したわけではなく、OAAという団体で議論をしているようです。

また、MicrosoftはBuildというイベントで、メトロUIを持つWindows in the carというプロダクトを作っていると発表していました。どんなメーカーが関わろうとしているかの情報等はありませんでしたが、IVIの世界に続々と車載プラットフォームが誕生しています。IT業界と自動車業界の掛け合わせが非常にホットになってきています！

IVIにおけるWeb技術使用と課題

Web技術をIVIなどの組み込み系の環境で使用するには、様々な課題があります。

パフォーマンス面はすべてをJavaScriptで行うのではなく、適材適所でハードウェアで演算させた方が速い処理はハードウェアに任せ、結果だけ利用するといった設計コンセプトになっていれば、Javascriptのパフォーマンスはなんとかなりそうです。

ハードウェアについては、スマートフォンの短期間でのハードウェアスペックの向上を見るに、時間が解決してくれそうなので、楽観視していても良いかもしれません。実装APIの不足もありますが、こちらも徐々に対応されるでしょう。これらの課題がクリアされると、組み込み系でWeb技術の利用が現実的になってきます。

では、ネイティブアプリケーションではなく、Webアプリケーションを作るメリットはなんでしょうか？

上記のメリットが考えられます。

ネイティブアプリケーションではなく、Webアプリケーションを採用することによる、ユーザー側のメリットも考慮しなくてはなりません。

ユーザーはアプリケーションがネイティブアプリケーションでもWebアプリケーションでも、うまく動いてくれれば中身は気にしないでしょう。そのため、Webアプリケーションを選択した場合のユーザーのメリットは、これから開発者が考えて提供していく必要があります。

実際にアプリケーションを作って、ビジネスをするには？

デベロッパがアプリケーションストア上でビジネスをすることは、スマートフォンでは当たり前になりました。

スマートフォンでは、サードパーティ製のアプリケーション開発が盛んに行われ、数多くの面白いアプリケーションが開発されました。スマートフォンが魅力的なデバイスとなった1つの要因でしょう。

同じようにIVIを開発者にとって魅力的なものするには、サードパーティがアプリケーション開発をしてビジネスをする土台が必要となります。そのためには、アプリケーションストアが必要になると考えられます。

Webアプリケーションでビジネスをする際の市場規模について

これらの条件がクリアされ、アプリケーションを作るための環境が整った時、IVI向けのアプリケーションを売ることができるのか？

スマートフォンとIVIの市場規模を比較すると下記のようになります。

自動車の販売台数はスマートフォンの10分の1以下です。さらにカーナビを搭載しているのは、世界的には2割程度(日本は例外で8割位)です。スマートフォンに比べると、市場規模が非常に小さいことも課題となるでしょう。

IVIのAPI比較

IVIのAPIは標準化されていないので、各社でバラバラな仕様です。IVIのアプリケーション開発の活性化のためには、標準化は欠かせません。講演では、webinos、QNX、TIZENの仕様書から、各APIで共通するギア位置の取得をするAPIを例にコードを比較していました。

同じ情報を取得するコードでも、標準化されていないため、書き方にかなりの差異がありました。そのため、複数のIVIプラットフォームに対応するアプリケーションを作ることはできず、プラットフォームの数だけ別のコードを書く必要があります。コードについては、記述が多くなるので残念ですが割愛します。詳しくは動画とスライドをご覧ください。

注意!

スライドにあるコードは各API仕様から、おそらくこのように書くのだろうと予想したコードとなります。動作確認する環境がないので、コードは架空のものであり、フィクションなのでご注意下さい！

W3C Automotive and Web Platform BG

各社様々な実装になっているという現状から、W3C Automotive and Web Platform BGが立ち上がって、Vehicle Information APIを策定しています。標準化にあたっての設計指針がドキュメントとして存在します。まとめると下記のような内容になっています。

現状、国やOEM(自動車メーカー)で特有の呼び方があります。W3Cでは、国、自動車メーカーに依存しない呼び名を使うようになっています。

Vehicle Information APIのコード

現在策定中のVehicle Information APIで、ギア位置の取得をするコードはどうなるのでしょうか？

今現在の状態が知りたい場合

// ワンショット navigator.vehicle.transmission.get().then( function(data) { console.log(data.gear); // ギア位置 // 0～10 console.log(data.mode); // モード オートマチックのレバーの位置 // "park", "reverse", "neutral", "drive" }, function(e) { console.log(e.code + ": " + e.message); } );

変化があった時にだけ情報が欲しい場合

//リスナー navigator.vehicle.transmission.subscribe(function(data) { console.log(data.gear); // ギア位置 // 0～10 console.log(data.mode); // モード // "park", "reverse", "neutral", "drive" });

上記のコードにはPromiseが使われています。最近のW3CのAPIはPromiseが前提になっているものが増えてきており、W3C Vehicle Information APIには、下記のような特徴があります。

PromiseはDOM4で規定されています。Promiseを使うと、非同期プログラミングが容易になります。ほかにもPromiseを使用したAPIには、Web Cryptography APIという暗号化のAPIもあります。

このVehicle Information APIで取得できる情報は多岐にわたり、例えば、走行情報では下記のような情報が取得できます。

• 車速(km/h)
• エンジン回転数(rpm)
• イグニッションスイッチ位置
• エンジンオイル状態
• 加速度

上記以外にも、メンテナンス情報や空調/気候情報など、多くの情報が取得できるようになります。

FAQ

• Vehicle Information APIを使って、アプリケーションから何らかの命令を与えることはできないか？

という質問がありました。APIのSETについては今のところ議論中ですが、存在します。誰にSETを許可するか？といった、Permission問題についての協議も必要で、SETについては仕様上存在していても使えるかはわかりません。

セッション2. Tizen IVI Introduction

続いて、セッション2です。高橋さんによるTizen IVIについてのセッションです。IVIに関連するTizenのアーキテクチャについて熱く語っていただきました。

このセッションでは、Tizenにおいて、ハードウェアの情報は、どのようにWebアプリケーション側に伝播するのか。そして、レイヤーを問わず、開発者にとって開発しやすい仕組みとは？APIを使用する、APIを作るということをOSのアーキテクチャを交えて見ることで、普段Webアプリケーションを開発している時には、あまり意識をしない部分についても知ることができるセッションでした。

Tizen IVIを知るための前知識

TizenとIVIのそれぞれについて知っているでしょうか？

Tizenとは？

TizenとはLinuxディストリビューションの1つです。Tizen Projectでは1つの会社で作らないような仕組みが作られており、開けた開発が行われています。ターゲットとしては、モバイル、カメラ、スマートウォッチ、IVIがあります。Tizenはソフトウェア開発コストを抑え、容易にアプリケーションを作れるように、新しい体験をユーザーに素早く提供できるように考えられたOSです。

IVIとは？

IVIはインテルが提唱した、In-Vehicle Infortainmentの略で、車の中の情報とエンターテイメントを指します。Infortainmentとは、InformationとEntertainmentを組み合わせた造語です。

• Vehicle Informationは、エンジンの状態、オイルの状態、ライトのステータスなど、様々な情報を扱います
• Vehicle Entertainmentは、例えば、車内で音楽が聞けたり映画が見れたりすることです

つまり、IVIとは車の情報とエンターテイメントを提供するものです。

Tizenのアーキテクチャについて

APIを使用するということはどういうことでしょうか？APIを作るということはどういうことでしょうか？これらはOSの下回りを知ることで、より一層の理解が得られます。そしてTizenがいかに効率良くAPIを作ることができるのかを知ることができます。

Tizenのアーキテクチャは下記の図の通りです。

次の章で、Tizen IVIのためにゼロから作っているコンポーネントを5つ紹介します。

Tizen WRT on Wayland

Web FrameworkのWeb Runtime部分に位置します。Tizen Web Appというアプリケーションを動かすためのRuntimeで、W3Cで定義されいている「Packaged Web Apps」に準拠しています。

WebkitEFLというグラフィックライブラリを使用してHTMLコンテンツをレンダリングし、HTMLコンテンツをシステムアプリケーションのように動作させます。

JavaScriptのVMは、Webkit標準のJavaScriptCoreを使用しています。

Plugin Frameworkを採用しており、プラグインの追加によって、柔軟にJavaScript APIを拡張することができるのが特徴です。一例として、Tizen Device APIが挙げられます。

• Waylandとは？
  ディスプレイサーバープロトコルの1つです。Xorgよりも、軽量で、構造もシンプル、そしてパフォーマンスも改善されています。

Automotive Message Broker(amb)

IVI Componentの一部です。車両データを抽象化するミドルウェアで、データをアプリケーション層に引き渡すデーモンです。入力プラグインが車両データを受け取り、フォーマットに合わせたデータ(CAN,OBD-2,ELM-327)をamb coreに渡します。

amd coreは中継とデーモンへ送信する役目を担っており、出力プラグイン(シンクプラグイン)へデータを発行します。

出力プラグインでは、アプリケーション層に車両データを渡します。出力プラグインでは、WebSocketで渡すこともできるのでWebアプリケーションとの親和性が高いです。

dLeyna

Multimedia Componentとして、dLeynaがあります。dLeynaはDLNA(Digital Living Network Alliance)に準拠した通信環境を提供するデーモンです。

例えば、dLeynaを導入して車内ネットワークでDLNA環境を構築することで、IVI SystemからDLNA経由で乗員の携帯電話に配信した映像コンテンツを楽しめるようになります。dLeynaは、後述するCloudeeBusを利用してWeb APIを提供します。

Cloudeebus

System and Base Componentで、DBusのAPI(Linux内部で行っているIPC通信)をJavaScriptのAPIへ変換するためのデーモンです。

ブラウザに手を加えずWeb APIを追加する仕組みで、DBusとWeb APIの変換をしてくれます。WAMP(WebSocket Application Messaging Protocol : WebSocketの上位プロトコル)を利用しています。

HTML5との関連について

dLeynaにWebSocketのAPIがありましたが、これを使って、下記のWeb APIを策定しています。

• Media Content API
• Media Server API
• Media Renderer API

Tizen IVI向けのWebアプリケーションを開発するには？

Tizen SDK for In-Vehicle Infotainmentが2014年1月にリリースされています。IVI向けのWebアプリケーションが簡単に作れるようになりした。

FAQ

• モバイルのTizenはOSSだが、クローズドな印象があります。契約を結んでいない会社でも最新仕様にアクセスできるのでしょうか？

モバイルだとアソシエーションに入っている会社とそうでない会社では差別化しているようです。 方針を決めるための議論については会員メンバーではないと関われないかも。

• IVIを動かすために一番簡単な方法はなんでしょうか？

仮想イメージを配布しているので、そちらを使うと良いです。

• Web Runtime経由でしか出力を受け取れないとのことでしたが、Webアプリしか作れなくなるのでしょうか？

出力プラグインで、DBus経由で出力すればネイティブアプリケーションも作れます。

セッション3. 車載ソフトウェア最近のトレンドとQNX CAR Platform

続いてQNX ソフトウエア システムズ株式会社の中鉢さんから、車載ソフトウェアのトレンドとQNX Car Platformについてのお話がありました。

中鉢さんは20年に渡ってナビゲーションを開発されているそうです。その中で、今が一番面白く、一番大変で、ビジネスチャンスが多くある時期であるとのことです。

そんな中、商用OSであるQNX Car Platformは、IVIのプラットフォームとして多くの実績があります。今の商用IVIプラットフォームには、どのような要件が求められ、どのような機能が搭載されているのでしょうか？

車載環境を取り巻く状況

今、車載はどういった状況にあるのでしょう？

QNXでは、システム構成はエンベデッド、ブロートイン、ビームドインと区分けしていますが、これらの住み分けが曖昧になってきています。 以前はそれぞれにデバイスが存在していましたが、今はお互いの領域に少しずつ入り込んでいる状態になっています。その他にも、オープンスタンダードが求められる時代になっています。

これらの要求に伴い、OSに対する要件が変化しています。オープンスタンダードのサポート、ISO26262で話題になっている機能安全対応や仮想化(最終的なソリューションではないと考えています)といった要件が求められています。

HTML5とUI開発

QNX SDP6.6(Software Development Platform) のApps and Mediaは、UI開発はHTML5をベースとしておりWebKitベースのHTML5エンジンを搭載しています。

HTML5アプリケーションを作るためのSDKも提供されています。

HTML5アプリケーション環境とApache Cordova

Apache Cordovaを使った形で開発できる環境を提供しています。Apache Cordovaを使うことで、クロスプラットフォームで、スマートフォン、タブレットや、さらにはテレビも視野にいれてアプリケーションを作ることができます。クロスプラットフォーム対応をすることで、アプリケーションの開発コストを下げ、車載だけのアプリケーションにしなくてよいようにしています。

また、APK RuntimeというAndroidのRuntimeも搭載しており、Dalvik仮想マシンをLinuxからQNXに移植しています。JellyBean(4.2)から動作し、JNIプラグインをサポートしています。

Dalvikはコンテナーです。Sandboxを使っており、Androidを１つのプロセスに閉じ込め、ほかのアプリケーションやシステムに影響を与えないようにして安全性を保っています。

FAQ

• QNXで脆弱性が見つかった場合のポリシーや対応の仕組みはどうなっているのでしょうか？

マイクロカーネルと言った形で、ドライバーやスタック、ファイルシステムは基本的にすべてユーザー空間で動作する。なんらかの故障やハッキングが起きた時は、そのプロセスだけ停止して再起動する仕組みを持っている。監視サイドはHA構成をとっており、監視役が落ちてしまっても大丈夫なようになっている。

• W3CのVehicle APIが統一された時の対応はどうなるのでしょうか？

Vehicle API対応はしますが、現状のApache CordovaとVehicle APIの両方を載せることになるでしょう。

セッション4. 組み込みでも使える Firefox OS

最後のセッションは、一般社団法人 Mozilla Japanの清水さんから、組み込みでも使えるFirefox OS(スライド)と題して、Firefoxの説明とFireFox OSを組み込みで使うならどうするか？という点にフォーカスしてお話をして頂きました。

Firefox OS

多くの人にWebを届けるというのがメインミッションであるため、車載はメインストリームではありません。現在は、南米や東欧方面に注力しています。

Firefox OSの特徴は、ネイティブアプリケーションがなく、すべてのアプリケーションをHTML5で作ることができるという点です。様々な会社と共同開発をしていますが、MozillaがAPIの仕様を決めているわけではありません。

共同開発をしている企業が自分たちに必要なAPIを作ることで、Firefox OSのAPIが増えるという開発体制になっています。メインターゲットは北欧や日本などのインターネットが成熟した方面ではなく、南米やヨーロッパを中心に15カ国で3種類の端末(勉強会開催日の情報です)が販売されています。

低スペックなハードウェアでも動作する

低スペックのハードウェアで動くようになっています。メインターゲットとする販売地域によっては、高スペックな端末は非常に高価で貴金属のような扱いとなり、持っているだけで犯罪の対象となってしまう可能性があります。

そのため、古く低スペックなハードウェア上で動作するOSを作り、安くスマートフォンを提供することで世界にWebを届けようとしています。

上記のスライドにはGPUも記載されていますが、GPUはなくても動きます。現在も、より低スペックなハードウェアでも動くように開発を進めています。Firefox OSはすべてオープンソースですが、携帯電話の周波数コントロールのような部分はプロプラなコードでないと動かないので注意が必要です。ソースコードのビルドは、Ubuntuが一番簡単にビルドできるようです。Mac OSでも可能です。

Firefox OSのアーキテクチャ

Firefox OSとAndroidのアーキテクチャを比較します。カーネルはAndroidが使っているLinuxのカーネルをそのまま使っています。その上にGeckoというブラウザのレンダリングエンジンが動いています。

例えば、Linuxを起動してFirefoxが動かしWebページを開く。これをFirefox OSに当てはめると、アプリケーションとWebページを区別していないので、イメージ的にはFirefoxのWebページのタブ1つ1つが、HTML5のアプリケーションというイメージです。

より詳細なアーキテクチャを見てみましょう。大きく以下の3つのレイヤーに分けることができます。

• カーネルとハードウェアのアブストラクションレイヤー
• Geckoのブラウザエンジンで、アプリケーションとの繋ぐレイヤー
• HTML5,CSS,JavaScriptのアプリケーションのレイヤー

ここで、アプリケーション層からJavaScriptでハードウェアにアクセスするためのものをWeb APIと呼んでおり、JavaScriptでラップしてあります。

ブートプロセスはLinuxとほぼ同じで、カーネルがブートしてinitからb2g(Gecko)が起動されます。そして、起動されたGeckoの上でアプリケーションが動作します。initでは、b2g以外にも様々なデーモンが起動されます。

ユーザー空間アーキテクチャ

中身はLinuxなので、b2g(Gecko)より下位層のプログラムは通常のUnixプログラムと同じように開発できます。ユーザー空間ではGeckoを中心に下記の図のようなアーキテクチャになっています。

車載でFirefox OSを使う場合、b2gより下のLinuxの世界でデバイスの情報を取ることができれば、b2gに手を加える事で、例えばギアの情報を取ることが可能となります。そして、Web API(JavaScript)でb2gとWebアプリケーションの間を繋げることで、アプリケーションからギアの情報を取得できるようになります。

Firefox OSでは、Web APIが従来のOSのシステムコールに相当し、デバイスの制御や情報の取得ができます。例として、JavaScriptからバイブレーションを制御できるWeb APIを見てみましょう。

配列でバイブレーションのパターンを書きます。この例だと、100ms震えて、30ms休止する… という動作をします。非常に簡単にハードウェアを制御できています。

Web APIの追加方法

実際には、デバイスの制御はnavigatorオブジェクトが行い、JavaScriptの世界から、C++で書かれているGeckoの世界を繋ぐ必要があります。

その実装は、インターフェイス定義言語のWebIDLを使用しています。WebIDLでインターフェイスを定義し、インターフェイスで定義したメソッドを実装します。例えば、車載でギアの情報を取得する際にも同様の手順で実装すればよいでしょう。

もう少し複雑なものを作る場合は？

例えばデータ構造を定義したいような場合、WebIDLでインターフェイスを書いて実装を書くというステップまでは同じです。

新たに定義するクラスがあるので、JavaScriptで実際に使用するクラスとC++とのバインドを行う必要があります。バインド自体は簡単で、Bindings.confに対応付けを記述します。そしてビルド対象に追加してビルドすれば使えるようになります。注意点として、オブジェクトの追加時にはGCのサイクルに追加するといった、定型的な作法があります。

このように、簡単にWeb APIを追加できます。

単純な読み書きや処理をトランザクションで行わなくてもよいものは、WebIDLを使って単純に書けばいいですが、複数のアプリケーションから同時に使う場合に競合が発生したりする場合は、Linuxの世界でデーモンプロセスを作って、デーモンを経由して実行する対応します。

このように、組み込みで使用する場合も簡単にAPIを追加できます。

最後に

勉強会の最後にアンケートを実施しました。ご回答ありがとうございます。アンケートの結果を元に、今後の勉強会の内容等を検討させていただきます。

ご協力ありがとうございました。

勉強会の動画配信はこちら

次回の勉強会もお楽しみに！

Test the Web Forward (TestTWF)とは、W3Cの仕様を実装・勧告させるために必要なテストケースをみんなで書こうというイベントです。Adobeが中心となり世界各国で開催され、その成果を認められ昨年秋にW3Cに取り込まれました。

日本でも昨年6月にTestTWFが開催され、成功を収めました。この活動を続けていこうと始めたのがhtml5jテスト部とTestTWF Meetup (仮)です。昨年9月に第1回目を開催しています。

少し間が空いてしまいましたが、4月12日、Test the Web Forward Meetup (仮), Tokyo #2を開催しました。

今回はAdobeさんに会場をご提供いただきました。おしゃれオフィスでした

3つの仕様のテストに挑戦

前回のTestTWF Meetup (仮)では、対象とする仕様を特に決めていませんでした。これはスタッフ側がテストについてあまり知らず「とりあえず書いてみよう」という話から始めたイベントだったため、準備ができなかったことがあります。

しかしそういう状態ではテストのレビューも仕様の理解もできず、満足できませんでした。というわけで、今回は対象となる仕様を決め、さらにそれらの仕様に明るい方をお呼びすることにしました。今回は次の3つを選びました。

• CSS Text Decoration
• ルビ（HTML、CSS）
• Shadow DOM

仕様のEditorやエキスパートに恵まれたため、なかなか先端技術的なセレクションになりました。

午前中はreftest, testharness.jsといったテストの書き方についてセッションを行いました。

testharness.jsの説明はACCESSの関口さんにしていただきました

CSSテストのエキスパートGérardさんも参加

今回はさらに、CSSのテストのエキスパートであるGérard Talbotさんをお招きしました。Gérardさんは数年前からCSSのテスティングに関わり、数千ものテストケースをレビューしたり、テストケースを提供したりしているCSSテストのエキスパートです。

Gérard Talbotさん。モントリオールからいらしてくださいました

Gérardさんには、CSSのテスト用フォント「Ahemフォント」について解説していただきました。Ahemフォントはプラットフォームごとに異なる書体が使われるフォントの差異を埋めるテスト用のフォントで、文字の幅やベースラインからの高さがわかりやすい数値に固定されています。文字も矩形に塗りつぶされるので、組み合わせることで図形を描けたりします。

Ahemフォントで「É p X」を表示したもの。幅は同じ1emでも、高さやベースラインからの位置が違います

他にも「テストの説明文は技術的すぎないこと（たとえば「box」という単語は避けるように注意されました）」「“not ***”などの表現を使う際はそこを太字にすると良い」といった、テストのスタイルに関する助言もいただきました。テストのレビューでは膨大なテストケースを短い時間で処理しなければならないため、簡単に、そしてだれでも判断できる表現が重要とのこと。

Gérardさんとお話していて感じたのは、テスティングへの熱意やひたむきさです。テストに関わる秘訣をお聞きしたところ「情熱をもって取り組むこと。そうすると忍耐強くテスティングに関われる。また、本当にテストが正しいのかを追求する姿勢も大事だ」とおっしゃっていました。彼が「最高傑作」としたテストとして vertical-align の挙動を確かめるテストケースを紹介してもらったのですが、制作には2年もかかったそうです。すべてのテストにこれだけかかるわけではないでしょうが、忍耐強さ、重要ですね……

午後はグループごとにレクチャー＆テスト書き

午後はCSS Text Decoration、ルビ、Shadow DOMとグループに分かれ、テストに必要な知識について学んだり、テストを書いたりしました。

CSS Text Decorationの部屋。Editorである石井さんがW3Cのプロセスから説明しています

ルビの部屋では、積極的に関わっている川幡さんによるHTML/CSSのルビに関するふかーい説明がありました

Shadow DOMの部屋。一番右のGoogle坂本さんに来ていただきました。また、W3Cの会議終了直後で西海岸にいらっしゃるShadow DOMのEditor夷藤さんにもGoogleハングアウトで参加していただきました

仕様もエキスパートの方も参加者も違いますので、それぞれ異なる進み方をしていました。Shadow DOMの部屋はテスト環境構築に少し手間取ったため提供されているドキュメントに追記したり、古いShadow DOMのテストを修正するなど、アクティブな方が多かった印象です。CSS Text Decorationはreftestでテスト可能な機能があるかを探すのに一苦労。Gérardさんの助言などもあり、ひとつの機能について皆で分担してテストケースを書いていました。テスト書きやGitの操作でも助け合っていました。

ルビは仕様で要求する機能が複雑なため、まずはじっくりと時間をかけた説明がありました。それから、シンプルなテストケースを皆で写し書きし、それができたら少しだけ難しくするというステップバイステップなアプローチをとっていました。

テスト部はまだまだテストの書き方について教えるノウハウが足りていません。こうした異なるアプローチを見たことで、いろいろなやり方ができるなあと思いました。今後の活動に活かせればと思います。

イベントも終わりに近づき、みなさんスパートを始めます。今回は合計18件のpull requestが投げられました。またイベント後もレビューコメントの対応をしていただいています。

テスト部の今後

昨年6月のTestTWFはもちろん9月のMeetupでも「人が集まるのかなあ、面白いのかなあ」など、この活動に不安を持っていました。しかし、標準化に貢献できることや仕様の勉強を楽しんでもらえる方が多く、それが活動を続けるモチベーションとなっています。

とはいえ、その場でレビューやテストのマージといった、本家Test the Web Forwardが提供するよさはMeetupには持ち込めていません。レビューやテストのカバレッジなど、本家が持つ課題について、今後はもう少し関われればと思います。また、テスト部とMeetupならではの企画ができないかなども検討していきたいと思っています。

最後に、参加者のみなさん、スピーカー・エキスパートのみなさん、スポンサーのみなさん、スタッフのみなさん、本当にありがとうございました。

関連エントリなど

• Test the Web Forward Meetup (仮) , Tokyo#2 にお邪魔して、text-emphasis-style のテストを書いてきました | Same Old Lucky Day
• Test The Web Forward（アルバム）

Photo credit：仲尾毅、水嶋彬貴

2014年2月28日にhtml5jエンタープライズコミュニティ主催で「Enterprise x HTML5 Web Application Conference 2014」が開催されました。オープニングパネルディスカッションの模様を中心に、HTML5とエンタープライズITの過去、現在、そして未来についての熱い議論をここにまとめます。

HTML5はエンタープライズITにおける3つのニーズを解決する

はじめに、html5jエンタープライズコミュニティの部長である川田氏からカンファレンス開会宣言が行われました。その中で、川田氏は、エンタープライズ分野でHTML5は次の3つのニーズを解決してくれると期待していると述べています。

ニーズ1「多様化するクライアント環境に対応する」

業務系システムでは、クライアント側の環境を中央集権的に管理することが求められます。そのため、クライアント環境は機種を限定した専用マシン、ミドルウェアについてもソフトウェアやバージョンを限定したものを用意して、カッチリと管理することが一般的に行われます。しかし、昨今のスマホやタブレットの普及によって、クライアント環境は大きく様変わりしています。モバイル環境にフォーカスすると、十分とはいえないデバイス管理機能、デバイスのフラグメンテーション、通信環境の多様化、セキュリティへの配慮の難しさなど、業務系システムを動作させる上でのハードルはかなり高くなっています。

そのような課題に対処するためのソリューションとして登場したのが、MEAP（Mobile Enterprise Application Platform）というアーキテクチャです。MEAPは、エンタープライズ向けのモバイルアプリの開発・管理を一元的に実現するサーバサイドの仕組みとクライアントサイドの仕組みを提供するプロダクトのことで、様々なベンダーから製品が提供されています。MEAPについては、ビジネス＋ITさんのサイトにわかりやすく解説されていますので、興味がある方はご一読下さい。以下、MEAPとはについて、一部引用させていただきました。

提供ベンダーによって機能も異なるが、モバイルの開発環境、配布・デプロイ、アプリケーション運用・管理のほか、アクセス認証、ユーザー管理、ログ管理、テスト環境、基幹系との連携などの機能が提供される場合もある。

引用元：ビジネス＋IT – MEAPとは（http://www.sbbit.jp/article/cont1/27694）

ニーズ2「ネイティブアプリライクなリッチアプリケーションを作成したい」

業務系システムの開発ではjQuery Pluginがよく利用されています。ベンダー製品も豊富に出ており、開発者が手軽に扱えることがメリットの一つとなっています。また、昨今では、クライアントサイドの開発のための様々なJavaScriptフレームワークが登場しています。これらを活用することで、Webアプリケーションでありながら、大規模かつ、ネイティブアプリライクなリッチアプリケーションを手軽に開発することが可能になりました。しかし、手軽といっても、JavaScriptフレームワークは、jQuery Pluginに比べ学習コストは高めなので、導入する上では検討が必要となります。

ニーズ3「営業から運用までトータルでサポートして欲しい」

HTML5を活用したアプリケーション開発では、以下のとおり、営業から開発・運用に至る全てのフェーズにて、作業を改善するための様々なツールが登場しています。これらを活用することで、開発効率を向上させることができます。

• 提案フェーズ：ノンプログラミング・ツール、GUIツールの活用
• 設計フェーズ：UIコンポーネント、JSフレームワークの活用
• 実装フェーズ：Gruntなどのタスクランナー、HTML5開発対応IDEの活用
• テストフェーズ：画面テスト、JSテストの自動化支援ツールの活用
• 運用フェーズ：MEAPの活用

エンタープライズITにおける次世代アーキテクチャの5大要素

開会宣言の最後に川田氏は、HTML5がどのようにエンタープライズITのアーキテクチャに影響をあたえるのか、次の5つのレイヤに分類しまとめました。

エンタープライズITにおける次世代アーキテクチャの5大要素

この中で、とりわけ重要なのは通信レイヤーの存在で、通信レイヤーに何を利用するかによって、システム全体のアーキテクチャや利用するベンダ製品が決まってくることが多いとのこと。また、今はWebSocketの利用が前提になってきているとも、付け加えました。

カンファレンス開会宣言の資料はこちらで公開されています。

HTML5とエンタープライズについて白熱した議論が！

開会宣言に続き、パネルディスカッションが行われました。パネリストに、日本マイクロソフト株式会社のUXエバンジェリストでRIAコンソーシアム理事の春日井良隆氏、株式会社オープンウェブ・テクノロジー代表でhtml5jファウンダーの白石俊平氏、html5jエンタープライズコミュニティ部長でNTTコムウェア株式会社技術SE部の川田寛氏を迎え、モデレーターは私、仲裕介が務めました。パネルディスカッションでは、HTML5とエンタープライズITに関して、過去と現在そして未来について、以下の様な流れで議論がなされました。

• HTML5はなぜここまでウケたのか？
• HTML5の現状はどうなっているのか？
• HTML5はエンタープライズの現場をどう変えるか？

ここでは、パネルディスカッションでの議論の模様を筆者の独断で要約してご紹介します。当日の様子はYouTubeのhtml5jチャンネルで公開中（動画へのリンクは記事末尾参照）です。参考までに議論が行われた動画上の再生時間を併記していますので、議論の詳しい内容が気になる方は、記載した再生時間を参考に動画を視聴してみて下さい。

HTML5はなぜここまでウケたのか？（動画では19:07頃）

【春日井氏】HTML5の登場で、FlashやSliverlightなどのプラグインの代わりに、Video要素やCanvas要素を活用したビデオ再生やWeb上での様々な表現が可能になった。最初に注目が集まったのはそういった部分だと思う。エンタープライズの分野では、Internet Explorer(以下、IE)9やIE10からHTML5に関連した様々なAPIが充実しはじめ、アプリケーション開発に十分に活用できるようになったことから、流行り始めた。また、開発者はオープンソースが好きで、基本的にどこかのベンダーにコミットするということはあまり好まない。そういう点からも、オープンなWeb技術であるHTML5は心理的に受け入れやすかったと思われる。

【白石氏】Web画面をリッチにしたいというニーズは昔からあり、IEではContent EditableやXHRなどの先進的な機能をIE5やIE6の頃から実装していた。しかし、Web標準が追いつかず世の中に浸透しなかったため、各ベンダーがプラグインを活用しそのニーズに答えていった。そこに、Web標準の舞台でWeb画面をリッチにするというニーズに答える、HTML5という技術が登場したため、ここまでウケたのではないか。

【川田氏】HTML5のムーブメントが起きるきっかけは、「プラグイン古いね、使いにくいね」という議論が出てきた2010年頃と記憶している。その後、マルチデバイス対応のニーズが高まり、MEAPというアーキテクチャを取り入れたベンダー製品が登場した。そのようなムーブメントにエンタープライズは大きく影響を受けるとともに、プラグインが使えない状況で、Web上でリッチなUIを作りたいというニーズが高まり、jQuery PluginやJavaScriptフレームワークが充実していき、昨今のHTML5のムーブメントにつながったのではないか。

ここで白石氏より、MEAPを活用しているかどうか来場者へ質問が行われた。結果、活用していると答えた方は０人。また、知っていると答えた方は3人ほどにとどまったため、ここで、川田氏によるMEAPの説明が行われました。（動画では26:30頃）

HTML5の現状はどうなっているのか？（動画では30:28頃）

【春日井氏】別の勉強会の発表資料によれば、昨年末の段階で、東証一部上場企業（約2000社）のコーポレートサイトでDOCTYPE宣言をHTML5で行っている会社は9.4%しかなく、専用サイトやレスポンシブデザインによるスマホ対応を行っているサイトは14.9%にとどまっている。普及という意味ではまだまだな印象。発注側やWebマスターサイド、それぞれの諸事情により、対応は進んでいないと思われる。

ここで白石氏から、来場者へHTML5への対応状況についての質問が行われた。結果、HTML5対応、スマホ対応を行っていると答えた人は3名ほど。統計情報通りだという結論になりました。

【川田氏】これでもまだHTML5は導入されている方ではないか。エンタープライズにおけるHTML5導入は今年が元年だと思っている。HTML5をエンタープライズに適用させるための各種プロダクトを含めた環境、技術者育成の仕組みなどが回り始めたのは2013年に入ってからであり、これから適応事例が増えてくると考えている。

HTML5はエンタープライズの現場をどう変えるか？（動画では38:20頃）

オープン系技術の導入において開発用ツールの選定は非常に重要

【川田氏】HTML5はオープン系技術。技術がベンダー系からオープン系に変わると開発難易度は高くなり、現場としてはしんどくなることも。しかし、コストメリットに押されてそれを採用せざるを得ない状況になる。設計については、Visual Basicが流行った頃のように、UIにもサーバ側にも業務ロジックがあるようなタイプにシフトするのか、現状のjQuery Plugin利用程度に留まるのか、まだ行く末の判断はできない。

【春日井氏】HTML5を活用した開発に関しては、開発用ツールを使うことが非常に重要になってくる。ベンダー製品のメリットはプラットフォームとセットで開発用ツールを出しているところにある。Microsoft製品であればSilverLightとVisual Studio Expressionみたいな。しかし、オープンソース製品では開発用ツールはバラバラなので、ツールの選定は開発においてとても重要になる。

【白石氏】昔エンタープライズでJavaを書いていた経験から、ベンダー系とオープン系では開発用ツールに関するアプローチ方法が異なると考えている。Java開発用のリッチな開発用ツールは様々なプロダクトが出ては消え出ては消え…結局は手書きに落ち着くということも経験した。それに比べ、Microsoft製品であれば、バックエンドからフロントエンドまでMicrosoft製のツールで固められるので、開発がすごく楽な印象があり、とても幸せそうな世界に見えた。

ここで春日井氏から「本当に幸せなんです！」というツッコミとともに、川田氏から、今の開発では、フロントのUIコンポーネントをドラッグ・アンド・ドロップで作成すると、サーバサイドまで自動で実装されるようなリッチなIDEが大手ベンダーなどから登場していると、コメントが付け加えられました。

【白石氏】HTML5の登場以前はサーバサイドレンダリングが主流だったが、HTML5の登場によってクライアントサイドでのMVCが実現できるようになった。ネイティブアプリ開発と同様にリッチな開発用ツールを活用した、ドラッグ・アンド・ドロップによる開発も十分に可能になると考えている。

開発プロダクトにおける責任の所在の変化

【春日井氏】ベンダー系技術を利用すれば開発における全てのフェーズにおいて、ある一定以上をベンダーの責任として責任転嫁することも可能だが（実際に、全てMSのせいだといわれることも…）、オープン系技術を利用する際は、自分たちで最後まで責任を取る必要がある。その反面、W3Cなどに積極的にコミットすることで、自由に仕様を作っていけるというメリットも享受できる。

春日井氏のコメントを受けて川田氏からは、オープン系技術であってもRed Hatなどそれをサポートするベンダーが存在する。白石氏はそれを受けて、オープン系技術であってもある程度のサポートを行って欲しいというニーズが存在し、それを請け負うことでサポートビジネスが成り立っていると、付け加えられました。

Web Componentsの登場が今後の開発現場に与える影響

ここで白石氏から、Web標準で議論が進んでいるWeb Componentsについての話題が出ました。来場者の認知度は4割ぐらいで、結構高い印象。白石氏から春日井氏へ、マイクロソフトとしてコミットしようとしているのかという質問。

【春日井氏】HTML5LabsでWeb Componentsは取り上げられており、現在、研究開発部門でどうやってブラウザや開発ツールに実装するのか、検討されている。

【白石氏】Web Componentsが出てくると、それを開発するツールはベンダー独自だが、そのコンポーネント部分はWeb標準という面白い状況になる。

ブラウザのバージョンアップサイクルの変化

【春日井氏】運用という観点では、ブラウザのバージョンアップサイクルが早く、ChromeとFirefoxは6週間、IEは2年に1回バージョンアップを行っている。6週間に1回出てくる新しいブラウザを検証するのは現実的ではない。そういった現状をふまえると、サポートを行う・行わないという線引をある程度決めていく必要があるのではないか。

ここで白石氏から、素早いバージョンアップで後方互換性を維持したまま、セキュリティアップデートや最新機能が提供されることに、エンタープライズITとしてはメリットを感じないのか、という問いかけがありました。

【川田氏】短いサイクルでのセキュリティアップデートは問題ないが、機能改善を行うところは問題。また、サイクルが短くなっているという点で言えば、WindowsXPでは、標準ブラウザ（IE6）のサポートはXPのEOLまで有効だったが、現在のWindows8は、サービスパックが出た時点で標準ブラウザもバージョンアップしてしまう。つまり、ベンダーサポートのライフサイクルが短くなっている点に注意する必要がある。同じブラウザを使い続けられなくなるため、運用という観点では、難しい時代が始まる。

【白石氏】Web標準に準拠したアプリケーションであれば、あるべき論を言えば、ブラウザが変わろうとも、Web標準のこの技術を使っている限りは正常に動くことを担保できなければならない。Web標準のルールはそういうことではないか。

【川田氏】IE6の頃と比べると、プラグインレスになり仕様もWeb標準に準拠したものになってきているので、エンタープライズも今後はそうなっていくのではないかと考えている。

【春日井氏】マイクロソフトのIE開発チームが目指すべき方向、理念はそれと全く同じである。IE11でSame Markup（同じマークアップをしたらブラウザが違っても同じように動作する）という考え方を打ち出したように、現在のブラウザ開発はその理念に基づいて行われている。しかし、エンタープライズでは、IEを勝手にアップデートしたくないというニーズもあり、それに答えるためのブロッカーツールや、ブラウザを個別にカスタマイズしたいというニーズに答えるための、IEAK（Internet Explorer Administration Kit）というツールも提供しており、利用をおすすめはしないが、今までどおりのライフサイクルに近い形でIEを利用する環境も整えている。

会場からの質問タイム（動画では01:02:02頃）

三者によるディスカッションが終了した後は、会場からいくつか質問を受け付けました。

• 質問1「XPのEOLに伴い、IE8をミニマム標準とする考え方は見直されるのか？」

【川田氏】IE8よりも、知らない方もいるかもしれないが、IEに搭載されているドキュメントモードのお陰で動いているWebアプリが、今も結構世の中にあることに注意する必要がある。しかし、Windows7 EOL（2020.01.14）以降のブラウザはドキュメントモードが存在しない。したがって、そういうシステムのEOLは必然的に決まってしまっている。そこを見据えた提案をSIではこれからやっていく必要がある。

【春日井氏】マイクロソフトとしては、IE6という、かつて皆様に愛されたブラウザを収束させることに現在は重点を置いている。IE8のクロージングについては、その後に検討する課題として捉えている。

ここで春日井氏から、IE11は過去のIEとの互換性を保ちつつ、今後のあるべきWeb技術のサポートの両方を目指す新しい考え方のブラウザになっているとコメントがありました。

【川田氏】ドキュメントモードをIE11から非推奨にしたという点について、大変良い判断だった考えている。非推奨になった機能はだいたい2バージョン後に消えているので、5年後、つまりはWindows7のEOL時期目前でドキュメントモードが廃止される計算になる。

• 質問２「HTML5で業務システムをガリガリ開発している先進的なユーザ企業はどこか？」

NTTコミュニケーションズでSenchaを活用した事例などが飛び出しましたが、その場では具体的な企業名は出てきませんでした。春日井氏によれば、先進的な事例を日本の開発ベンダーは大事にされるので、教えてほしいという要望はたくさんいただく、ということらしいです。

当日のセッション動画

パネルディスカッションを含む本カンファレンスの全てのセッションはこちらで視聴することができます。再生リストから再生したい動画を選択して下さい。

全セッションの資料

動画と合わせて全セッションの発表資料についても、以下カンファレンス公式サイトに掲載していますので、興味がある方はご覧ください。

Enterprise x HTML5 Conference 2014 – エンタープライズIT向けWeb標準技術のソリューション展

カンファレンスのレポート記事

カンファレンスに関するレポート記事が公開されていますので、ご紹介します。

• なぜエンタープライズITでHTML5が注目されているのか？Web業界のキーパーソンが議論（ビジネス＋IT）
• エンタープライズの課題解決を考える「Enterprise x HTML5 Conference 2014」レポート（おやつ問題解説付き）（CodeIQ MAGAZINE）
• エンタープライズ開発現場が知っておきたいHTML5の4つの意義（＠IT）

photo credit: Miyuki Baba

昨今、コネクティッド・カーやスマートカーと言った、キーワードが注目されてきており、車載機器をインターネットに接続し、スマートフォンやタブレットなどのデバイスと連携する車が増えてきました。

特に最近では、自動車のAndroid化を目指す団体Open Automotive Allianceが発足。車載機器とWeb技術、IT技術の融合に関する動きが活発化して、注目度も上がってきています。

html5j自動車部とは

自動車部ロゴ

html5j自動車部では、このような車載機器とWeb技術の融合に関する様々な動きを追いかけ、ウォッチすると共に、 車載機器に関するプロダクトの最新情報の発信、Webエンジニアと車載機器等の組み込み系エンジニアの方々との技術交流の促進に取り組んでいます。(html5j 自動車部始動！)

※本稿は2014年1月21日に行われた、html5j自動車部の2回目の勉強会のレポートです。

2014 international CESから見た自動車ICTトレンド

最初のセッションでは1月7日～10日にラスベガスで開催されたInternational CESの直後ということもあり、KDDI総研の平林氏から、2014 international CESから見た自動車ICTトレンドという内容でご講演頂きました。

セッションの前半は、自動車ICTトレンドについての発表。 セッションの後半は講演内容についてディスカッションが行われ、 和気あいあいとした雰囲気の中、皆で疑問や意見をぶつけ合っていました。

本セッションの内容と資料につきましては、諸事情により公開できませんので、このレポートでもざっくりまとめた内容となります。

そもそもCESとはコンシューマ・エレクトロニクス・ショーのことですが、昨今はテレビやオーディオだけではなく、自動車も主役になりつつあるようです。自動車とWeb技術の融合に力を入れている自動車企業が多く見られ、その一部の企業の発表内容のまとめと技術者視点での解説や疑問点を交えての発表でした。発表中にも質問が飛び交い、参加者の熱意が伺えました。

自動車メーカー・車載機器サプライヤの取り組み

専用タブレットを車載機器として設置するといった、スマートデバイスとの連携、ウェアラブルデバイス(腕時計、メガネ)との連携、音声認識やジェスチャーによる車載機器の制御。そして、スマートデバイスにHTML5のアプリケーションを載せる、といった取り組みを行っている自動車メーカーが多数ありました。

自動運転については、まだ課題が多いようで、取り組み自体は行っているが発表しているという企業は少なかったようです。

ディスカッション、質疑応答

ディスカッションは、セッション内容に触れない範囲で話題に上がったものをピックアップします。

車載組込ブラウザの過去7年と今を40分でまとめてみる

PCの世界で起きたことは、次にスマートデバイスで起きてから組み込み機器で起きると言われています。組み込み機器でもコンテンツ、ソフトウェア性能、ハードウェア性能もPCで要求されていたものに近づいてきていると予想されます。過去から現在まで、車載組み込みブラウザの世界ではどのようなことが起きていたのでしょうか？

車載機器とWeb技術の中間に位置する車載組み込みブラウザの歴史について、株式会社ACCESSの渡辺氏から、車載組込ブラウザの過去7年と今を40分でまとめてみるという内容でご講演頂きました。

• 車載組込ブラウザの過去7年と今を40分でまとめてみる(スライド)

車載組み込みブラウザは7年使うことを前提に開発する

車載組み込みブラウザは、車載器の新鮮さを保つために必要となります。7年間(車の買い替え期間の平均)使用することを前提に開発します。これは今も昔も考え方が変わっていないそうです。

そして組み込み機器全般に言えることかもしれませんが、バージョンアップが容易に行えない場合が想定されるので、バグに対してもシビアで、高い安定性を要求されます。普段我々が使うPCやスマートデバイスのアプリケーションでは、バージョンアップせずに7年間同じバージョンを使用し続けることは、ほぼないと言っていいほどに稀だと思います。

車載機器から見たHTMLの歴史

HTML4の時代、HTMLは静的コンテンツを読むことがメインでした。今はHTML5時代となり、アプリケーションが動作するようになりました。 車載組み込みブラウザでも同様に、音楽・ビデオの再生、美麗なアニメーション描画など、HTML5に対応することが求められてきています。

車載機器OSの歴史

昔は様々なOSでシェアの取り合いをしていました、それは車載OSでも同様で、グラフィックライブラリもメーカーが独自に作っているものが多く、ブラウザの移植は非常に大変だったようです。

そんな時代から、今は組み込みOSもLinuxが主流になってきており、ライブラリも以前より増え、ブラウザの移植が簡単になってきているとのことです。そして、HTML5アプリケーションに対応するOSの開発も行われており、車載機器とWeb技術との融合が進んできています。

車載機器のSoC(System on Chip)の歴史

ソフトウェアだけではなく、ハードウェアも進化しています。SoCというCPUやGPUといった主要部品を1つにまとめたチップも、過去には様々なアーキテクチャがあり、ブラウザがギリギリ動作するといったスペックの状態から、現在では、高級車の車載ハードウェアはiPhone5Sと同等の性能を持ちます。アーキテクチャもARMに収束してきたようです。

組み込み機器CPUベンチマーク

組み込み機器GPUベンチマーク

もう2、3年すると、現在のスマートデバイスと同等のハードウェア性能が一般的になるのではないか、とのことでした。スマートデバイスのアプリケーションが車載機器でも動く時代になったようです。Web技術者が車載機器向けWebアプリケーション開発を行うのも、そう遠くない未来かも知れません。

車載ブラウザの歴史

過去の車載ブラウザは、移植性、ハードウェアスペックや通信周りの制限により、快適なブラウジングというわけにはいかず、結果として、あまり使用してもらえなかったようです。現在の車載ブラウザは、これらの点をクリアしつつあり、車載もHTML5の時代となってきています。

デモ

現在主流である車載ブラウザのハードウェアでHello RacerのWebGL版を動作させるデモを実施しましたが、残念ながらうまく動作しませんでした。

デモ機材

代わりに、ほぼ同スペックの機器で動作させるデモ動画を流して頂きました。デモ動画では非常に快適に動作している様子が見れます。渡辺氏は今後の勉強会でリベンジしてくれるそうです。

次回予告

昨今、HTML5アプリケーションやWebアプリケーションを実行するための土台がソフト、ハードの面でできつつあります。近い将来、Web開発者も車載機器向けのアプリケーションやコンテンツを作る未来が来るのではないでしょうか。

次回は、アプリケーションを作るための土台である、車載プラットフォームOSについての勉強会を検討中です。お楽しみに！

2014年2月17日、日本マイクロソフトの品川本社オフィスにて、第45回HTML5とか勉強会を開催しました。今回は「ユーザーエクスペリエンスとペーパープロトタイピング」というテーマで、安藤幸央さんのご講演およびワークショップといういつもとは違った試みを行っています。

参加枠も100人の定員がすぐに埋まり、140人もの応募がありました。普段のHTML5とか勉強会に比べると、デザイナーの方の参加率が高いことが印象的ですが、エンジニアの方も興味を持って参加されていて、職種を問わず多くの方が興味を持っているテーマだということを感じました。

前半はスライドを見ながら　「ユーザーエクスペリエンス」に関してご講演頂きました。
まずは有名なサイトのプロトタイプを見て、どのサービスのプロトタイピングかを考えるということから始めました。

プロトタイプ制作でのポイント

今回は紙を使用してプロトタイプを作成します。
なぜ紙で作るのでしょうか？紙で作成すると以下のようなメリットがあります。

紙とペンでの試作のメリット

• 素早くできる
• コストが少なくてすむ
• やり直しが簡単
• 失敗してもリスクが少ない
• でき上がった感じがしない （ Photoshopだとでき上がったと勘違いされやすい）
• 余計なことを作り込めないので重要な所に集中できる
• 目と指で感じる感覚を得られる
• 紙とペンは潤沢に使えるツール

逆に欠点としては、

• また完成していないので、想像しながら試す必要がある
• アニメーションは確認できない
• 理解するのには空想力が必要かもしれない

等の欠点があるそうです。

プロトタイプの法則

それでは実際にプロトタイプを作成する場合の法則には、どのようなものがあるでしょうか。

1 画面を見直すと気づきがある

画面を見直すといろいろなことに気づきます、普段アプリなどを使っていて使いづらい、使いやすいシーンがあったら、なぜ使いやすいのか・使いづらいのかを分析してくことで気づきが生まれてきます。

2 道具にこだわろう

例えばクロッキー帳やポストイット、インターネットで入手できるUIテンプレート、ペンなどの道具や、ペンの太さを2種類に変えて、押せる部分と押せない部分をわかりやすく表現するなどTIPSなど。実際に安藤さんが使用されている用紙が文具を見本にわかりやすい作り方のポイントも解説されました。

3 アウトプットの質はインプットの質と量に比例する

良いものを作りたいのなら、いいものをたくさん見るーつまりアプリの場合はたくさんのアプリをみて使ってみることが大事です。

例えば「モバイルウェブの見本を集めているサイトなどを見て、自分の気に入るテイストや案件に合うサイトを調べてみる」、「アプリストアのランキングなどをチェックしなぜ人気なのかを考える」こともおすすめだそうです。

安藤さんの情報収集方法として、実際に参考となるサイトをスマホでキャプチャしたあとに、インターネットの書籍作成サービスで自分のミニ本を作成されているのだとか。クライアントの打ち合わせ時に手軽に見せて打ち合わせをしたり、手軽にまとめてみられるのが便利なのだそうです！

安藤さんのMinibook

アンテナを研ぎすませて新しいことを常にキャッチする姿勢とともに、自分の仕事やスタイルに合わせて、情報のまとめ方や生かし方を工夫することも、質を高めるために必要なことだと感じました。

4 素早く試して、素早く失敗しよう

5 本当に大切な2.3の機能を作ろう

すべての機能をたくさん試すよりも、まずそのアプリの中で重要な2つ3つの機能から考えてみることが大切です。

6 凝りすぎない。作り込みすぎない

紙で書くだけで大雑把で、ここに時間をかけすぎて開発時間が減るのは本末転倒です。素早く試しましょう！

7 完璧を目指さない、失敗を受け入れる

どんな人でも失敗するのは当たり前。早く失敗して良かったと考えましょう。

8　実際の環境で検討するのが重要

実際にスマートフォンで画面表示を試すにしても、会社のデスクで試すのではなく、会社の中を歩き回りながら使うだけでも違います。

例えば　車関係のアプリであれば実際車の動いている時や乗り降りに使うので、その環境に近い状況で試してみることが重要です。

9　客観的に見る、時間をおいて見る

使うであろうユーザーの立場に立って切り替えてみてみることが大切です。また、ずっと開発やデザインをしているとゲシュタルト崩壊というのか、良いのか悪いのか判断がつかなくなることがあります。その場合は時間をおいて確認しましょう。

10　素晴らしい試作も、本物ではない

リソースをかけすぎない。試作は試作と割り切って、ある段階になったら次の段階に進めるように考えると良いと思います。

手を動かしてわかる、プロトタイピングの効果

後半では2～3人でチームを作成し、自己紹介タイムの後にプロトタイプ作成に入りました。 テーマサイトは「Esty.com」通販サイトです。

PC用のサイトを見ながら要素を10個以上書き出しました。その中からスマートフォン用に表示させる内容を選んで行きました。まず各々がPICK UP！　そのあとチームで話し合って意見交換。

最後にチームの中から一人代表を選んでコンセプトと合わせて発表します。
それぞれのチームごとにさまざまな解があり、そのコンセプトを聞くことで自分の考えに凝り固まらずに、気づかなかった視点を認識します。

各チームのプロトタイプを見た後に、Esty.comの実際のスマホサイトが実際にどのようになっているかを確認。各々のプロトタイプとの違いを確認し合い、イベントを終了しました。短い時間でしたが、プロトタイプ作成でのポイントから考え方、制作まで体験することができ、続きもぜひ作りたいという声も聞かれ、有意義な時間となりました。

イベントの動画はこちら

イベント資料はこちら

デザイニアンプレイベントのご報告とVOL2のお知らせ！

最後に今回のHTML5とか勉強会・チューターの秋葉秀樹さんより、1月に行われたデザイニアンプレイベントを動画を交えながら報告、そして次回のイベント開催の告知が行われました。（プレイベントのレポート記事はこちら）

このイベントでは実際のサイトをテーマにHTMLのテンプレートを使用しエンジニアとデザイナーがチームを作りプロトタイプを作成します。3/22（土）に開催です、ぜひご参加ください！

＜デザイニアン 002＞

• 開催日:3/22（土）
• 開催時間:12:00会場 12:30より開催予定
• 定員:デザイナー15名 コーダー／プログラマー（ノートPC持参）15名　計30名
• 会場:メディアテクノロジーラボ（日比谷、銀座）
  　　　 東京都中央区銀座7-2-6 リクルートアネックス1ビル B1F　MAP
• イベントの詳細はこちらで紹介しています

会場は多くの参加者でいっぱいとなった

このイベントは世の中で行われているITやWeb系の勉強会やセミナーとは大きく趣向が異なり、拙作「HTML5KARUTA」を使ったゲームの大会を中心としたミートアップのような、宴会のようなイベントでした。企業同士のトーナメントをお酒を飲みながら観戦したり、談笑したり、用意されたブースで遊ぶこともできるというカジュアルなスペースを作ったつもりです。来場された方も通常のWeb系のイベントとは違う雰囲気に驚かれたかもしれません。

イベントではいくつかのブースを設置していた

イベントの様子はhtml5jのYoutubeチャンネルでも録画・配信されています。
HTML5KARUTAイベント問題の正解発表と解説は、CodeIQ MAGAZINEで公開中です。

そもそもなぜ「カルタ」なのか

HTML5KARUTA

HTML5KARUTAは、HTML5をこれから勉強するデザイナーやディレクター、学生や新卒採用者の学習の入り口として、マークアップエンジニアの再学習のためのツールとして作ったものです。すでにHTML5要素について理解の深い熟練者は読み手として参加し、ゲームをしながら解説を入れる役割を担うことで自分が正確な理解ができているのか再確認をすることもできます。

私がこうしたゲームによるHTML5の学習の手段を作ろうと考えたのは、実は有名な「桃太郎電鉄」というテレビゲームシリーズの影響によるところが大きかったと思っています。

このゲームはすごろく形式で日本各地の物件を買って周り資産を増やすゲームなのですが、勝利することまたは楽しむにはどこになんという名前の駅があるか、どんな産業があるかの理解が必要とされます。学生の頃地理に詳しかった人はこのゲームを遊んでいたのではないかと思いますし、同じようなことは歴史における戦略シュミレーションゲームにも言えると考えます。ゲームに熱中している間に知識が増える、これはとても良い学習の形だと思うのです。

読み札が要素の説明、取り札には各タグが書かれている

カルタの読み札は各HTML5の要素の説明となっており、どの要素のことを言っているかわかったら、そのタグが書かれている札を取ります。カルタというゲームの形をとっていますが、これは言ってしまえば単語帳を読んでいるようなものであり、プレイヤーはゲームに参加する上でその全ての説明を聞かされることになります。構造的に、説明が頭に入り、理解しやすいゲーム性になっているのです。

技術者、利用者同士の共通言語となり得るHTML

今回のイベントでは、Google、日本マイクロソフト、アドビ システムズといったWebの中心的企業のほか、クリエイター集団であるカヤックやチームラボに、NHN PlayArt、はてな、グリーのようなサービス運営、そしてLIG、プライム・ストラテジーというWeb制作会社の全10社に参加して頂きました。企業自体もバラエティに富んでいますが、それぞれの企業から名乗りを上げて頂いた方々一人ひとりの職能も、エンジニアであったりコーダーであったり、デザイナー、アプリ開発エンジニアなど様々です。

決勝戦の様子。様々な職域の制作者が一緒に遊んでいる

これら全ての業務領域の違う制作者の皆さんにとっての共通言語となり得るものは、やはりHTMLだと思います。そしてもちろん、今回参加してくれた技術者や開発者のようなプロフェッショナルでなくともHTMLは書きますよね。ブロガーやマーケターのような人でも同じゲームで遊び、ライトに学ぶことができます。

このゲームではHTML5を題材としていますが、もちろんCSSやJavaScriptで同じようなゲームを遊ぶことができるでしょう。

イベントや活動の意義について

HTML5KARUTAは2012年の12月に生まれ、13年の1月には全国のコワーキングスペースでこのカルタで実際に遊ぶイベントを開催しました。その後も各地のイベントの余興として、専門学校のイベントとして、または社内勉強会やレクリーションなどのために使われています。

各地で行われたカルタ大会

HTML5の仕様は現時点では勧告候補という状態にあります。現時点で販売している最新版のHTML5KARUTAには2013年8月時点で削除されたcommand要素とmenu要素が収録されており、その際追加されたdata要素は未収録です。2014年HTML5は勧告に達する予定ですが、その際にはこのカルタも完璧な形にできるのではないかと考えています。

前述の通り、HTML5KARUTAは「遊べる参考書」です。カルタを遊ぶことで自然と要素の意味が覚えられ、知識が深まり、プレイヤー同士の議論やコミュニケーションを促すことができます。一式遊ぶことで、全ての要素を知ることが可能です。

今回のイベントのように、ときには楽しいイベントとして学習を扱うこともあってよいのではないでしょうか。

ちなみに現在はHTML5KARUTAのオンラインゲームも公開しています。一人で遊ぶことが可能なので、こちらで修行するのもいいと思います。

ゲームで一人で練習してみるのもアリ

今後も大小様々なイベントを開催していくと思いますし、カルタを購入された方がこれを使ったイベントを行うことも自由です。この活動を皆さんにも応援頂けると嬉しいですね！