HTML5感に参加しました

12月12日(金)にLPI-Japan様主催で行われたHTML5感というイベントに参加しました。HTML5でこんなことも出来ちゃうんだという驚きがたくさんあったのでそれを共有したいと思います。


私が今回受講したセッションは下記のようになります。

  1. 面白法人カヤックのウェブフロントエンド術 HTML5をつかった演出手法大公開
  2. HTML5技術によるマルチメディアコミュニケーションの可能性
  3. 企業サイトとHTML5
  4. これからのWebに必要なHTML5

1. 面白法人カヤックのウェブフロントエンド術 HTML5をつかった演出手法大公開

おおむね、SVGやCanvasの話がメインでした。

Canvas

Canvasは機能の多さという面ではFlashに劣りますがとても高速に動作するAPIです。
今回はベレの方法という分子の位置を計算するための公式を使った、DEMOなどをみせてもらいました。
下がそのDEMOになります。

WebGL

またWebGLに関するお話ではthree.jsがWebGLを扱う上でのデファクトスタンダードになっていること。そして、スマートフォンでもWebGLの対応が進んでおりAndroid は4.1から iPhoneは5以上であればWebGLに対応しているとのこと。
面白法人カヤックさんのページでもWebGLが使われているそうです。


SVG

またSVGに関するお話では、画面幅に応じておっぱいが上下に震えるページをDEMOとしてみせていただきました。実装にはPaper.jsというライブラリを利用していて、Path.segments[0].handleIn.xなどIllustratorを使っている人間には分かりやすくパスの操作などが行えるのだそうです。



2. HTML5技術によるマルチメディアコミュニケーションの可能性

こちらはWebRTCに関するお話でした。WebRTCとはプラグイン無しでSkypeのようなリアルタイムコミュニケーションを実現するための技術です。この機能に関連したブラウザのAPIをWebRTC APIと呼ぶのだそうです。現在Chrome,Android,Firefox,Opera等のブラウザで、使うことが出来るの出そう。今回自分もWebRTCを試そうと下記のURLにSkyWayをつかったWebRTCのデモページを作ってみました。
https://steelydylan.herokuapp.com/
環境によってはうまく動かないかもしれません

企業サイトとHTML5

IEのシェア

ブラウザのシェアでIE6, IE7, IE8, IE9, IE10で半数以上を占めることに驚きました。自分の苦手なブラウザのシェアが予想以上に多いのでこれらのブラウザにも対応出来るようなマークアップエンジニアを目指したいです。

HTML5で実現できること

HTML5ではマークアップの意味だけでなく、ローカルストレージなどのAPI的な面でも出来ることが増えました。例えばカメラの機能であったり、位置情報を取得するGeologication APIなどです。
しかしその分対応しなければいけない、クライアントの要求も増えそうです。

発声しうる課題HTML5で実現できること
マルチでバイス対応メディアクエリ/タッチイベント
モバイルアプリGPS/コンパス/カメラ
グラフィックスCanvas/SVG/CSS3
ユーザビリティの向上フォーム機能の拡張
アクセシビリティの向上セマンティックスの強化/ビデオ字幕/音声認識

これからのWebに必要なHTML5

フォーム機能の強化

HTML5ではフォームで入力するための機能が強化されました。
例えば、inputのtype属性にdateを入れるとカレンダー式のフォームに、またrange属性を入れるとスライダーになります。
また、サーバ側にデータを渡す前に未入力項目のチェックやメールアドレスのチェックなどもHTML5だけの機能で出来るようになってきました。

input typeによるフォーム部品生成

<input type="date" />
<input type="range" />

ブラウザによるフォームのチェック

必須項目 required

フォームに未入力のまま送信すると、ブラウザで「このフィールドを入力してください」というエラーメッセージを出してくれます。

<form>
<input type="text" required/>
<input type="submit" value="送信" />
</form>





メールアドレス

以下のソースで入力フィールドに@が含まれているかをチェックできます。

<form>
<input type="email" required/>
<input type="submit" value="送信" />
</form>





感想

CanvasにVideo要素から画面のイメージデータを渡してそれにグレースケールをCanvas側でかけるデモを「HTML5技術によるマルチメディアコミュニケーションの可能性」で見せて頂きました。Canvasにゲームを作る以外の可能性を見いだせてよかったです。また、ブラウザ上で画像などを保存できるFileSaver.jsなど様々なjQueryプラグインを「これからのWebに必要なHTML5」で見せて頂いて、自分もいろんなライブラリを試してみようとおもいました。
いままで、Flashなどのプラグインが必要だったウェブの世界もHTML5の発展でもっといろんなことが出来そうですね。


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →