HTML５時代に必要な・・・スキルと考え方

ver2.0

山崎 大助

https://www.facebook.com/venezia72014-03-22

自己紹介

Microsoft MVP

（BingMapsDevelopment）

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

名を超える方々が MVP として精力的な活動を続けています。

Daisuke Yamazaki ( Tokyo )

CommunicationTime!!

１．Webデザイナーの方？

２．Webエンジニアの方？

３．MS大好きな方？

４．夢ありますか？

５．夢に近ずく行動できてます？手を上げてね

夢は自分の意志・行動で叶えられる

・意志

・短期／長期の目標を自分何に考える

・行動

・耐える時期もある

・直向き（努力し続ける）

・アピールも必要（場合によっては）

夢は自分の意志・行動で叶えられる

・意志

・短期／長期の目標を自分何に考える

・行動

・耐える時期もある

・直向き（努力し続ける）

・アピールも必要（場合によっては）

やることいっぱい

自己紹介

高校卒業後→ 上京

高校時代の特技は？

最初からこの業界？

いつからパソコンを？

今は？

山崎さんの今までは？

自己紹介

・デジタルハリウッド ：

スマフォ＆レスポンシブWebデザイン講座、Webアプリ講座、PHP講座

・デジタルハリウッド大学院 ：

スマートフォン（モバイル）制作演習

・inop （WebProfesinalFelow）

・魚津システム (WebProfesinalFelow)

・Venezia-Works (代表)

・html5j (HTML5ビギナーズ)

・ヒカ☆ラボ、パソナテック…イベント セミナーにて登壇

※自称：HTML5界の革命派（過激派、保守派など沢山いますよ）

8

寄稿：

＠IT「HTML5アプリ作ろうぜ！」連載中

日経ソフトウエア、ITPro…

日経BP、SoftwareDesign…

自己紹介

代表的な著書：

レスポンシブWebデザイン

「超」実践デザイン集中講義

HTML5

知ってますか？

手を上げて！！

HTML5 – HTML5.1

• HTML 5.0は2014年内に勧告

• HTML 5.1は2016年内に勧告

HTML5元年

あけましておめでとう！

HTMLは情報を流すだけの

テクノロジーではなくなりました

アプリケーションや！

HTML5 API

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

HTML5応用 ーDEMOー• 翻訳アプリ( Audio )

• Cuepoint.js(VIDEOタグ)

• MyAnimalsNote!

（HTML5 Webアプリ ：日経ソフトウェアに掲載）

• Impress.js（CSS3）

Impress.js Design（HTML5 Webアプリ）

• FileAPI

• SkyWay（時間があれば）

15

http://www.bing.com/translator

Bing Translator API

16

他の翻訳APIとの違い

音声

17

主な仕様：・ AUDIO タグ （HTML5）・ Transrator API （Microsoft）・ WebSpeech API（HTML5）

DEMO実演

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の最新版で確認してください。

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の最新版で確認してください。

20

DEMOMyAnimalsNote!（LocalStorage,CANVAS）

サンプルURL

http://php5.xoop.jp/html5/

※Chrome,Safariの最新版で確認してください。

21

DEMOImpress.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の最新版で確認してください。

22

DEMOFileAPI

記事解説http://www.atmarkit.co.jp/ait/articles/1401/09/news023.html

サンプルファイルhttp://www.atmarkit.co.jp/ait/articles/1401/09/news023.html

23

DEMOSkyWay （紹介）http://nttcom.github.io/skyway/

※こちらのURLのページ下部にはサンプルが３種類あるので試してみてください。

Skypeのようなことが簡単にできたりします。

24

DEMOを見てきて、いかがでしょうか？

・ 面白そうに見えた？

可能性を感じますよね！

・ブラウザ（マルチプラットフォーム）

今までのWebの業務は・・・

・ Webデザイナー（IE6,7,8対応、負の遺産対応 … HTML5時代に不要）

→Webデザインナー

スクリプトは・・・

１．HTML5時代で必要なスキル

HTML5 CSS3Java

ScriptjQuary

できませんよ！

今までのWeb系と呼ばれてた人は・・・、

・Webデザイナー

・Webスクリプター

→クライアントアプリ？私はWebの人ですから

１．HTML5時代で必要なスキル

HTML5 CSS3Java

ScriptjQuary

できませんよ！

27

HTML5時代に必要なスキル

これからはだめ！！

今求められるスキル

• これからのデザイナーはスクリプトを理解できて

ることが大事。

※JSのif分岐、JQueryくらいは理解しよう

• これからのプログラマーはデザインを理解できて

ることが大事。

※CSSくらい書けないと。

※UI,UXも知ってたほうがいい。

フルスタックエンジニア（アスタリスク人材）

＋DBの理解

＋サーバの理解

＋UI,UXの理解

＋ etc…

広いスキルが求められてる

１．HTML5時代で必要なスキル

僕はこれしかできません、やりません・・・通用しません、仕事も減っていきます

3030

◆ Windows ストア アプリ┗ HTML5,CSS3,JavaScript

アプリ作成としてWeb知識が生かせる時代！

HTML5時代に必要なスキル

3131

◆ スマートフォンアプリ：Monaca(PhoneGap)

┗ HTML5,CSS3,JavaScript

アプリ作成としてWeb知識が生かせる時代！

HTML5時代に必要なスキル

32

自身のアプリで勝負することができる時代でもある！！

自分で道を切り拓きましょう！！create one's own future.

HTML5時代に必要なスキル

１人でもできる

33

枠にハマらるな！

そんな奴らが生き残る時代！

・ いつ頑張るんですか！？・ いつ自分の時代にするんですか！？

HTML5時代に必要なスキル

●●でしょ!!

では、いつ行動するのか！？

常にチャレンジと努力！！

チャンスだと思ったら飛びつけ！！

待ってても何もこない！！

自分を信じろ！！

楽しめ！

いつでも皆さん次第で人生を変えられる

Thank You.

https://www.facebook.com/venezia7