こんにちは、守谷です。

先日、TwitterでHTML5のセミナーが開催されるとの情報を聞きつけ、NHN Japan 株式会社（以降NHN）にお邪魔してきました。「NHNはハンゲームの会社です。」...と言った方がピンと来る方も多いかと思いますが、NAVERやlivedoorなどを傘下に持つ会社です。
社内の知識レベルの向上の為に始めた勉強会を外部にも公開しよう、ということでこういったセミナーを定期的に開催されているそうです。全社で取り組まれている教育制度の一環だそうですが、大変ありがたいですね。

さて、今回のテーマはHTML5。
講師は全部で4名いらして、外部から白石俊平さん（「HTML5&API入門」という書籍の著者でもあり、日本でのHTML5の第一人者のうちのお一方と言っても過言ではない方でしょう。以前、シナップのオフィスを使っての「Webkit/HTML5勉強会」を開催くださったりもした方です）と、NHNからは3名のスタッフがご登壇されました。

第一部で白石さんより改めてHTML5についての概要についてのお話しがあり、NHNのスタッフの馬場さん、野津手さん、山森さんからは、それぞれ（HTML5）+CSS3、FlashのCanvas移植、開発者からのサービス提案法をご説明くださいました。
以下で簡単なレポートをしていきますが、HTML5の入り口の話が主になっていましたので「HTML5ってなに？」という方や「実はぼんやりとしかわからないんだよね」という方にはピッタリな内容となっています。

改めてHTML5とは（by 白石さん）

SINAPlogをお読みの方はご存知の方が多いかもしれませんが、現在W3Cで標準化作業中のHTMLの仕様です。2011/5/22にLast Call（最終草案）となる予定となっていますが、白石さん曰く、仕様自体が「完成する」というのは「ブラウザーが表示出来るようになる」ことであり、現在各ブラウザベンダー側でも着々と実装を進めている段階であり、恐らく2014年あたりに仕様にブラウザー（での表示）が追いつくことになるだろうとのこと。
つまり、こんなに業界では「HTML5！」と話題になりながらも、実際仕様としては出来上がってもいないし、いわば実験中なものなのです。

ちなみに、会場ではあらかじめ挙手アンケートが取られており、大体の方々がWeb開発者（HTMLを書く人）という結果が見られました。
一方で、そのうち「業務でHTML5を使った案件を取り扱ったことがある人」との問いには1割程度の人しかいなかったというのがHTML5の現実です。
シナップでも実業務では"業界での最先端（最前線）を見据えている"星海社様の「最前線」などのサイトでしかまだ実装していません。しかもそれは「実験をしながら誰もやっていない事に取り組む」という星海社様のサイト（ブランド）作りの形態を前提にしているからこそ成り立っている案件であり、なんでもかんでもHTML5というのは時期尚早であるというのが実情でしょう。

またHTML5、と一言でいってもそのワードの範囲が曖昧でもあり（もちろん、仕様としてはきっちりと定義されているわけですが）現状としての「HTML5」というのは若干バズワードのようにも扱われている、と白石さん。
確かに、HTML5で思い浮かべるものは？と言われると、咄嗟には動的に表現されたアニメーション（しかもFlashを使っていない）であるとか、どうなっているのかよくわからないけどプログラムっぽいとか、そういった派手な所に意識が行きがちです。ところがHTML5は、本質的にはHTML（HyperTextMarkupLanguage）であり、文書を構造化する為のものなわけです。
しかし白石さんは、敢えて広義でHTML5を敢えて捉え、以下のような3つのキーワードを挙げられました。

• 【セマンティクスとアクセシビリティ】
  「More Readable for Everyone」直訳すると「全てのモノに読み易く」となるでしょうか。全てのモノというのは、人であり、プログラム（コンピューター）です。
  この一言の実現のために、新しい要素が追加されたり既存要素の変更が行なわれたり、WAI-ARIA（人間向けのアクセシビリティ仕様）やマイクロデータ（プログラム向けの情報群）とHTMLの統合が図られるなどしています。
• 【互換性の追求】
  いままでの仕様が曖昧であったり、あるいは仕様が存在しなかった、という事を改訂し、一度HTML5でソースを書いてしまえばどのブラウザーでも読み取る事ができるようになることになります。
• 【リッチ・インターネット・アプリケーション】
  HTML5はアプリケーションプラットフォームを目指している。
  アプリケーションプラットフォームとは具体的に言うと、デスクトップアプリケーションと呼ばれるパソコンに入っているアプリケーション（プログラム）にできてWebアプリ（ブラウザーを通して何かをする）にできないことをどんどん減らしていくということ。たとえば簡単な例で言うと、最近Gmail等でも実装されて便利になったと実感できる機能として、ファイルをブラウザにドラッグ&ドロップすると、今までであれば「このファイルは開けません」などと出ていたかもしれないファイルが簡単にアップロードされたりするなどでしょうか。
  そういった今までできなかった色々なことがブラウザーを通してできるようになっていっているのもHTML5の仕様のお陰です。

この3つのキーワードを足がかりに、HTML5の仕様策定が進められていると考えると、今までとは違うWeb体験を得られる事になるでしょう。

さて、逆に狭義でHTML5と表現された時に入らないのが、実はHTML5に動きを付けるCSS3やJavaScriptですが、白石さんの後に登壇されたNHNの馬場さんは、主にCSS3アニメーションについての内容を話されました。

NHNはハンゲームの会社ですので、早々にケータイゲームのスマートフォン対応をされるなどの場面でCSS3の利用をされたそうです。
スマートフォンは通信しながらゲームが進められるというのが前提なので、ダウンロードサイズの軽減や高解像度端末での表示、作業工数軽減などの点でCSS3を導入されたとのこと。具体的な内容はコードの話になってしまっていたので、今回は割愛します。

また、同じようにスマートフォン対応の為に行なわれた取り組みとして、Flashアニメーション（iPhoneで表示不可）をCanvasに移植されたというお話しをされたのは、野津手さん。
Canvasというと、私のイメージではビデオを表示する為の機能（仕様）で、あまり細かい絵を描くという感覚がなかったのでまったく想像がつかなかったのですが、聞いてびっくり、ゲームの背景にある建物（「激闘！戦国絵巻」というシミュレーションゲームですが、こちらのページをご覧いただければわかり易いです）などのアニメーションを今まではFlashで作成していたものをCanvasに変換、という作業をされたそうです。

具体的には、複数枚の静止画像をタイムラインで入れ替え表示させていくだけ。今までの感覚とは違い、Flashでプロトタイプを作った上で、それを元にCanvasでタイムラインアニメーションをさせていく、という手法を取られていたという事に私は衝撃をおぼえました。

これらの技術面だけでも、ハンゲームの裏側で行なわれているHTML5への取り組みから開発メンバーの方々の技術力などの高さの予測がつきますが、最後に展開された山森さんのお話しでは、開発側が企画（サービス）提案をしよう！という、開発者の未来に展望が開けるお話しを伺う事ができました。

既存のサービスにもう一エッセンスを加える事で、サービスに人気（ひとけ）感を出し、Web上での新しいコミュニケーションの形を提案する、だとか、それを更に発展させてサービスを「場」として提供するには、などの案を聞く事ができました。普通の提案の方向（企画→開発）ではなく、「逆提案」（開発者→企画）という形を展開されました。

実はこれらのNHNの皆さんの発表内容については、HTML5勉強会を開催しました | news.uxdc.jpにて公開下さっていますので、ご覧いただけると詳細内容が把握できるかと思います。

おまけ
帰りがけに目に入った忍者......。「写真撮ってもいいですか？」とご関係者に伺うと「どうぞどうぞ、沢山撮って、いくらでも公開してしまってください！」と言って下さったので、遠慮なく撮ってまいりました。「ハンゲ.jp」のキャラクターだそうです。
NHNにお邪魔すると、入り口で出会えます。