2014/03/22改訂版：HTML５時代に必要なスキルと考え方

2. HTML５時代に必要な・・・
スキルと考え方
ver2.0
山崎 大助
https://www.facebook.com/venezia72014-03-22

3. 自己紹介
Microsoft MVP
（BingMapsDevelopment）
MicrosoftMVPって？
マイクロソフトが個人の活動を評価する、特別な賞。
MVP (Most Valuable Professional) アワード プログラムは、マイクロソフ
トの製品やテクノロジーに関する豊富な知識と経験を持ち、オンラインま
たはオフラインのコミュニティや、メディアなどを通して、その優れた能
力を幅広いユーザーと共有している個人を表彰するものです。MVP アワ
ードの表彰は全世界で行われており、現在は、世界 90 か国以上、4,000
名を超える方々が MVP として精力的な活動を続けています。
Daisuke Yamazaki ( Tokyo )

4. CommunicationTime!!
１．Webデザイナーの方？
２．Webエンジニアの方？
３．MS大好きな方？
４．夢ありますか？
５．夢に近ずく行動できてます？
手を上げてね

5. 夢は自分の意志・行動で叶えられる
・意志
・短期／長期の目標を自分何に考える
・行動
・耐える時期もある
・直向き（努力し続ける）
・アピールも必要（場合によっては）

6. 夢は自分の意志・行動で叶えられる
・意志
・短期／長期の目標を自分何に考える
・行動
・耐える時期もある
・直向き（努力し続ける）
・アピールも必要（場合によっては）
やることいっぱい

7. 自己紹介
高校卒業後 → 上京
高校時代の特技は？
最初からこの業界？
いつからパソコンを？
今は？
山崎さんの今までは？

8. 自己紹介
・デジタルハリウッド ：
スマフォ＆レスポンシブWebデザイン講座、Webアプリ講座、PHP講座
・デジタルハリウッド大学院 ：
スマートフォン（モバイル）制作演習
・inop （WebProfesinalFelow）
・魚津システム (WebProfesinalFelow)
・Venezia-Works (代表)
・html5j (HTML5ビギナーズ)
・ヒカ☆ラボ、パソナテック…イベント セミナーにて登壇
※自称：HTML5界の革命派（過激派、保守派など沢山いますよ）

9. 8
寄稿：
＠IT「HTML5アプリ作ろうぜ！」連載中
日経ソフトウエア、ITPro…
日経BP、SoftwareDesign…
自己紹介
代表的な著書：
レスポンシブWebデザイン
「超」実践デザイン集中講義

10. HTML5
知ってますか？
手を上げて！！

11. HTML5 – HTML5.1
• HTML 5.0は2014年内に勧告
• HTML 5.1は2016年内に勧告

12. HTML5元年
あけましておめでとう！

13. HTMLは情報を流すだけの
テクノロジーではなくなりました
アプリケーションや！

14. HTML5 API
※もっと沢山のAPIが存在します

15. HTML5応用 ーDEMOー
• 翻訳アプリ( Audio )
• Cuepoint.js(VIDEOタグ)
• MyAnimalsNote!
（HTML5 Webアプリ ：日経ソフトウェアに掲載）
• Impress.js（CSS3）
Impress.js Design（HTML5 Webアプリ）
• FileAPI
• SkyWay（時間があれば）

16. 15
http://www.bing.com/translator
Bing Translator API

17. 16
他の翻訳APIとの違い
音声

18. 17
主な仕様：
・ AUDIO タグ （HTML5）
・ Transrator API （Microsoft）
・ WebSpeech API（HTML5）
DEMO実演

19. 18
DEMO
翻訳アプリ( Audio )
記事解説
http://www.atmarkit.co.jp/ait/articles/1309/11/news001.html
サンプルURL
http://www.venezia-works.com/comcamp2014/english/sample_base2.html
※Chromeの最新版で確認してください。

20. 19
DEMO
Cuepoint.js(VIDEOタグ)
記事解説
http://www.atmarkit.co.jp/ait/articles/1204/20/news141.html
サンプルURL
http://www.venezia-works.com/comcamp2014/quepoint/sample.html
※Chromeの最新版で確認してください。

21. 20
DEMO
MyAnimalsNote!（LocalStorage,CANVAS）
サンプルURL
http://php5.xoop.jp/html5/
※Chrome,Safariの最新版で確認してください。

22. 21
DEMO
Impress.js（CSS3）
記事解説
http://www.atmarkit.co.jp/ait/articles/1203/14/news119.html
Impress.js Design（HTML5 js CSS3）
サンプルURL
http://php5.xoop.jp/impress/index.html
※Chromeの最新版で確認してください。

23. 22
DEMO
FileAPI
記事解説
http://www.atmarkit.co.jp/ait/articles/1401/09/news023.html
サンプルファイル
http://www.atmarkit.co.jp/ait/articles/1401/09/news023.html

24. 23
DEMO
SkyWay （紹介）
http://nttcom.github.io/skyway/
※こちらのURLのページ下部にはサンプルが３種類あるので試してみてくださ
い。
Skypeのようなことが簡単にできたりします。

25. 24
DEMOを見てきて、いかがでしょうか？
・ 面白そうに見えた？
可能性を感じますよね！
・ブラウザ（マルチプラットフォーム）

26. 今までのWebの業務は・・・
・ Webデザイナー
（IE6,7,8対応、負の遺産対応 … HTML5時代に不要）
→Webデザインナー
スクリプトは・・・
１．HTML5時代で必要なスキル
HTML5 CSS3
Java
Script jQuary
できませんよ！

27. 今までのWeb系と呼ばれてた人は・・・、
・Webデザイナー
・Webスクリプター
→クライアントアプリ？
私はWebの人ですから
１．HTML5時代で必要なスキル
HTML5 CSS3
Java
Script jQuary
できませんよ！

28. 27
HTML5時代に必要なスキル
これからはだめ！！

29. 今求められるスキル
• これからのデザイナーはスクリプトを理解できて
ることが大事。
※JSのif分岐、JQueryくらいは理解しよう
• これからのプログラマーはデザインを理解できて
ることが大事。
※CSSくらい書けないと。
※UI,UXも知ってたほうがいい。

30. フルスタックエンジニア
（アスタリスク人材）
＋DBの理解
＋サーバの理解
＋UI,UXの理解
＋ etc…
広いスキルが求められてる
１．HTML5時代で必要なスキル
僕はこれしかできません、やりません
・・・通用しません、仕事も減っていきます

31. 3030
◆ Windows ストア アプリ
┗ HTML5,CSS3,JavaScript
アプリ作成としてWeb知識が生かせる時代！
HTML5時代に必要なスキル

32. 3131
◆ スマートフォンアプリ：Monaca(PhoneGap)
┗ HTML5,CSS3,JavaScript
アプリ作成としてWeb知識が生かせる時代！
HTML5時代に必要なスキル

33. 32
自身のアプリで勝負することができる
時代でもある！！
自分で道を切り拓きましょう！！
create one's own future.
HTML5時代に必要なスキル
１人でもできる

34. 33
枠にハマらるな！
そんな奴らが生き残る時代！
・ いつ頑張るんですか！？
・ いつ自分の時代にするんですか！？
HTML5時代に必要なスキル
●●でしょ!!
では、
いつ行動するのか！？

35. 常にチャレンジと努力！！
チャンスだと思ったら飛びつけ！！
待ってても何もこない！！
自分を信じろ！！
楽しめ！
いつでも皆さん次第で人生を変えられる

36. Thank You.
https://www.facebook.com/venezia7