【登壇資料】「プロに求められる最新Webスキルとは？」～第3回 HTML5 企業Webシステム開発セミナー http://hifive.connpass.com/event/11445/

1. 面白法人カヤックの
ウェブフロントエンド術
HTML5をつかった演出まとめ
ゲーミフィケーションフォーム／落書きできるサ
イト／無限スクロール／高級だけどペライチ？
制作事例で紹介する現場で有効なHTML5 API

2. 自己紹介

3. 受託事業部 技術部・人事部
中農稔／ねろ
http://www.kayac.com/team/nakano-minoru
JS、AS、Node.js、C#、webGL, openFrameworks

4. @nenjiru
http://www.slideshare.net/minorunakanou
http://qiita.com/nenjiru
https://twitter.com/nenjiru
http://jsdo.it/nenjiru

5. 最近のお仕事

6. Oculus と Leapmotion を使ったライブステージ演出

9. 声でロボットを操作する音声認識サイネージ

11. ウェブじゃない？

12. じつはけっこうウェブの技術でできてる

13. HTML5／Flash／Unity／Node.js

18. HTML5の活躍する場面はウェブだけじゃない

19. フロントエンドエンジニア

20. 体験をつくる

21. HTML5 は最上位レイヤー

22. B2C/B2B どちらの現場でもHTML5を採用

23. Application cache／Canvas／Drag and Drop／Device
Orientation ／File API／Geolocation API／History
API／Selectors API／Web Audio／Web GL／Web
Speech／Web Socket／Web Storage／Web Workers／
Full Screen API／Typed Array／Server Sent
Events／SVG／Media Capture API／System Information AP

24. Application cache／Canvas／Drag and Drop／Device
Orientation ／File API／Geolocation API／History
API／Selectors API／Web Audio／Web GL／Web
Speech／Web Socket／Web Storage／Web Workers／
Full Screen API／Typed Array／Server Sent
Events／SVG／Media Capture API／System Information AP

25. カヤックにおけるHTML5の重要度

26. 専門の部署があります

27. HTMLファイ部

28. 2011年以前
マークアップ
（意匠部）
JavaScript
（技術部）

29. 現在
マークアップ／JavaScript
（HTMLファイ部）

30. 制作事例紹介

31. 日本経済新聞 田中電子版
http://pr.nikkei.com/special/tanaka/game2014/

32. ● HTML5製リッチコンテンツ
● 仮想の対戦相手のいる早押しクイズ
● CSS3、Audioをつかって豊富な演出

33. EVA style VISA CARD
http://www.evastylecard.com/

34. ● フルCanvas
● ド変態実装
● アニメーションを制御するツールも開発

35. リクナビ 社会の湯
http://job.rikunabi.com/obog_talk/

36. ● 全天球WebGLコンテンツ
● WebGLは力を入れている
● プロトタイプから提案につながった

37. カヤック コーポレートサイト
http://www.kayac.com/

38. ● すべてのページがAPIで取得できる
● それを利用して無限スクロールを実現している
● ウェブサイトとウェブアプリのハイブリット

39. Q コーポレートサイト
http://www.q-co.jp/

40. ● 赤ペンがサイト内の表現のキーになっている
● なめらかな曲線で落書きできる
● 特定の図形を描くとサイトに変化がおきる

41. Mutations Studio コーポレートサイト
http://www.mutationsltd.com/

42. ● 随所に仕掛けられた小ネタ
● 非対応ブラウザ閲覧時にも仕掛けが...
● ゲーミフィケーションなフォーム

43. クライアントワークチームでは
これらの制作物をざっくり2つに分けています

44. ・高級ペライチ
・面白コーポレート

45. 高級ペライチ
田中電子版、EVA style、社会の湯

46. 面白コーポレート
カヤック、Q、Mutations Studio

47. HTMLファイ部に求められていること

48. 表現力

49. （Flashと同等の）表現力

50. !?

51. 広告において、リッチさは最重要

52. Application cache／Canvas／Drag and Drop／Device
Orientation ／File API／Geolocation API／History
API／Selectors API／Web Audio／Web GL／Web
Speech／Web Socket／Web Storage／Web Workers／
Full Screen API／Typed Array／Server Sent
Events／SVG／Media Capture API／System Information AP

53. Canvas

54. メリット
・インストールがいらない
・HTMLとの親和性が高い
デメリット
・実行環境によって実装が違う
・クリックイベントがない
Canvas

55. Canvas は扱いやすいが
ゲームなどのリッチコンテンツを
作るにはやや貧弱

56. ライブラリを使う

57. CreateJS

58. DEMO

59. CreateJS はモバイル開発において有効
もちろん万能ではない

60. PCではかなりのレベルの作り込みは可能

61. CreateJSを使おうともスマホは
パフォーマンスという意味では
端末によってはかなり厳しい...

62. カヤックでいま一番注力しているのが

64. WebGL LP
http://www.kayac.com/service/point/webgl/

65. 案件獲得にむけてデモサイトを作り
経験値をつみ、社内布教を行った。

66. NHK 御嶽山「噴火の証言」
http://www3.nhk.or.jp/news/ontake2014/

67. データジャーナリズム

68. ところで WebGL って開発しやすい？

69. いいえ

70. ただの三角形の描画に数十行....

71. いかにして WebGL とつきあうか？

72. three.js

76. じゃあいつでるの？パフォーマンスは？

77. まもなく登場する正式版に期待！

78. まとめ

79. ウェブ広告でHTML5を採用するメリット

80. インストール不要

81. プラグイン不要

82. ひとりひとつブラウザを携帯する
時代の新体験をつくるのはHTML5

83. 面白法人カヤックの
ウェブフロントエンド術
HTML5をつかった演出まとめ
ゲーミフィケーションフォーム／落書きできるサ
イト／無限スクロール／高級だけどペライチ？
制作事例で理解する現場で有効なHTML5 API

84. ありがとうございました