HTML ５時代に必要なスキルと考え方〜クリエイティブ HTML5 、 DEMO で感じろ！！〜

山崎 大助

https://www.facebook.com/venezia72014-03-26 版

自己紹介

Microsoft MVP 2013（ BingMapsDevelopment ）

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

Daisuke Yamazaki ( Tokyo )

自己紹介

・デジタルハリウッド ：　　スマフォ＆レスポンシブ Web デザイン講座、 Web アプリ講座、 PHP 講座

・デジタルハリウッド大学院 ：　　　　　　スマートフォン（モバイル）制作演習・ inop （ WebProfesinalFelow ）・魚津システム (WebProfesinalFelow)・ Venezia-Works ( 代表 )・ html5j (HTML5 ビギナーズ ) ・ヒカ☆ラボ、パソナテック…イベント セミナーにて登壇 ※ 自称： HTML5 界の革命派（過激派、保守派など沢山いますよ）　　　　 クリエイター（制作者、開発者とは違う立場と思ってる）

4

寄稿：

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

日経ソフトウエア、 ITPro…日経 BP 、 SoftwareDesign…

自己紹介

代表的な著書：レスポンシブ Web デザイン　　　　「超」実践デザイン集中講義

本セミナーの目標

・　え！こんなことできるの？・　面白い！！・　やってみたい！！・　もっと勉強しなきゃ！！・　この機能使ってみたい！！

　１つでも何かを感じてほしい。　やる気につながる何かを感じて持って帰ってほしい。

自己紹介

山崎さん、この仕事は長いの？

本日の案内役！！マイクです！！

自己紹介

１． 最初は別の業界からスタート

２． いつからパソコンを？

３． 今は？　　 自己紹介した内容です。　　

Communication ！！

１． Web デザイナーの方？

２． Web エンジニアの方？

３． MS 大好きな方？

４．夢ありますか？

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

夢は「意志・行動」で叶える

・意志（どうなりたいのか！）・短期／長期の目標を自分何に考える

・行動（恥ずかしくても、無駄でもやってみる）・耐える時期も必要

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

・アピールも必要（目標によっては）

・意志（どうなりたいのか！）・短期／長期の目標を自分何に考える

・行動（恥ずかしくても、無駄でもやってみる）・耐える時期も必要

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

・アピールも必要（目標によっては）

夢は「意志・行動」で叶える

気づいた時に行動！人生に遅いはない！

なぜそう言えるのか？

だって、

私２８歳からパソコン始めて、

やれてますから (^^ゞ

これから HTML5 の話

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 （時間があれば）

19

http://www.bing.com/translator

Bing Translator API

20

他の翻訳 API との違い

音声

21

　・ AUDIO タグ （ HTML5 ）　・ Transrator API （ Microsoft ）　・ WebSpeech API （ HTML5 ）

翻訳アプリ仕様 （ DEMO あり）

22

DEMO1翻訳アプリ

記事解説http://www.atmarkit.co.jp/ait/articles/1309/11/news001.html

サンプル URLhttp://www.venezia-works.com/comcamp2014/english/sample_base2.html※Chrome の最新版で確認してください。

＋ AUDIO タグ （ HTML5 ）＋ Transrator API （ Microsoft ）＋ WebSpeech API （ HTML5 ）

23

DEMO2Cuepoint.js

記事解説http://www.atmarkit.co.jp/ait/articles/1204/20/news141.html

サンプル URLhttp://www.venezia-works.com/comcamp2014/quepoint/sample.html※Chrome の最新版で確認してください。

＋ VIDEO タグ

24

DEMO3MyAnimalsNote! （ 2010年作成）

サンプル URLhttp://php5.xoop.jp/html5/※Chrome,Safari の最新版で確認してください。

＋ LocalStorage＋ CANVAS＋ CSS3

25

DEMO4Impress.js （ CSS3 ）記事解説http://www.atmarkit.co.jp/ait/articles/1203/14/news119.html

Impress.js Design （ HTML5 js CSS3 ）サンプル URLhttp://php5.xoop.jp/impress/index.html※Chrome の最新版で確認してください。

＋ CSS3-- localStorage

26

DEMO5FileAPI

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

サンプルファイルhttp://www.venezia-works.com/comcamp2014/file/index.html

＋ FileSaver.js

27

「 DEMO5 」を考え

る質問皆さんの発想・アイディアを聞きたい！

この DEMO見て、次にどんな機能つけると、サンプルはもっと良くなりますか？

28

よくある意見

写真を使ってるので、・ ぼかし、シャープなど・ 白黒、 セピアなど・ 縦横反転など

画像処理があると良さそうだよね！？できるのブラウザで・・・

「 DEMO5 」を考え

る

29

変更サンプルファイルhttp://www.venezia-works.com/comcamp2014/file/index2.html

+pixastic.js(JS画像ライブラリ )

発想、アイデア、行動、まずやってみる！！

「 DEMO5 」を考え

る

30

DEMO( 時間があれば )

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

※ こちらの URL のページ下部にはサンプルが３種類あるので試してみてください。　 Skype のようなことが簡単にできたりします。

31

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

か？

驚き、面白いって感じました？

32

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

か？

ブラウザで利用できるのはメリット

可能性を感じないはずがない！

33

夢を感じました！？

会社はベンチャーでも！！※ 危険な冒険、危険な試み・・・

マインドは

アドベンチャーでいきましょ

う！

今までの Web の業務は・・・　・ Web デザイナー

（ IE6,7,8対応、負の遺産対応 … HTML5 時代に不要）

→Web デザインナー　スクリプトは・・・

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

HTML5 CSS3Java

Script jQuary

できませんよ！

今までの Web系と呼ばれてた人は・・・、　・ Web デザイナー 　・ Web スクリプター

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

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

HTML5 CSS3Java

Script jQuary

できませんよ！

36

HTML5 時代に必要なスキル

これからはだめ！！

今求められるスキル• これからのデザイナーはスクリプトを理解できて

ることが大事。

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

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

ることが大事。

※ CSS くらい書けないと。

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

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

＋ DB の理解＋サーバ・インフラの理解＋ UI,UX の理解＋ etc…

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

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

僕はこれしかできません、やりません　・・・では通用しません、活躍の場が減かも

3939

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

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

HTML5 時代に必要なスキル

4040

◆ スマートフォンアプリ： Monaca(PhoneGap) 　　　┗ HTML5,CSS3,JavaScript　　　

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

HTML5 時代に必要なスキル

41

自身のアプリで勝負することができる時代！！フリーランスでも勝負できる！！ってこと。

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

HTML5 時代に必要なスキル

１人でもできる

42

枠にハマらるな！　　　　　　　　そんな奴らが生き残る時代！

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

HTML5 時代に必要なスキル

●●でしょ !!

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

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

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

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

自分を信じろ！！

楽しめ！

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

る

Thank You.

https://www.facebook.com/venezia7