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

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界の革命派（過激派、保守派など沢山いますよ）
クリエイター（制作者、開発者とは違う立場と思ってる）

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

本セミナーの目標
・え！こんなことできるの？
・面白い！！
・やってみたい！！
・もっと勉強しなきゃ！！
・この機能使ってみたい！！
１つでも何かを感じてほしい。
やる気につながる何かを感じて持って帰ってほし
い。

自己紹介
山崎さん、
この仕事は長いの？
本日の案内役！！
マイクです！！

自己紹介
１．最初は別の業界からスタート
２．いつからパソコンを？
３．今は？
自己紹介した内容です。

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

夢は「意志・行動」で叶える
・意志（どうなりたいのか！）
・短期／長期の目標を自分何に考える
・行動（恥ずかしくても、無駄でもやってみる）
・耐える時期も必要
・直向き（努力し続ける）
・アピールも必要（目標によっては）

・意志（どうなりたいのか！）
・短期／長期の目標を自分何に考える
・行動（恥ずかしくても、無駄でもやってみる）
・耐える時期も必要
・直向き（努力し続ける）
・アピールも必要（目標によっては）
夢は「意志・行動」で叶える
気づいた時に行動！
人生に遅いはない！
なぜそう言えるのか？

だって、
私２８歳からパソコン始めて、
やれてますから (^^ゞ

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

18
http://www.bing.com/translator
Bing Translator API

19
他の翻訳APIとの違い
音声

20
・ AUDIO タグ（HTML5）
・ Transrator API （Microsoft）
・ WebSpeech API（HTML5）
翻訳アプリ仕様（DEMOあり）

21
DEMO1
翻訳アプリ
記事解説
http://www.atmarkit.co.jp/ait/articles/1309/11/news001.html
サンプルURL
http://www.venezia-works.com/comcamp2014/english/sample_base2.html
※Chromeの最新版で確認してください。
＋ AUDIO タグ（HTML5）
＋ Transrator API （Microsoft）
＋ WebSpeech API（HTML5）

22
DEMO2
Cuepoint.js
記事解説
サンプルURL
http://www.venezia-works.com/comcamp2014/quepoint/sample.html
＋VIDEOタグ

23
DEMO3
MyAnimalsNote!（2010年作成）
サンプルURL
http://php5.xoop.jp/html5/
※Chrome,Safariの最新版で確認してください。
＋LocalStorage
＋CANVAS
＋CSS3

24
DEMO4
Impress.js（CSS3）
記事解説
Impress.js Design（HTML5 js CSS3）
サンプルURL
http://php5.xoop.jp/impress/index.html
＋CSS3
-- localStorage

25
DEMO5
FileAPI
記事解説
サンプルファイル
http://www.venezia-works.com/comcamp2014/file/index.html
＋FileSaver.js

26
「DEMO5」を考える
質問
皆さんの発想・アイディアを聞きたい！
このDEMO見て、次にどんな機能つける
と、サンプルはもっと良くなりますか？

27
よくある意見
写真を使ってるので、
・ぼかし、シャープなど
・白黒、セピアなど
・縦横反転など
画像処理があると良さそうだよね！？
できるのブラウザで・・・

28
変更サンプルファイル
http://www.venezia-
works.com/comcamp2014/file/index2.html
+pixastic.js(JS画像ライブラリ)
発想、アイデア、行動、まずやってみる
！！

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

30
DEMOを見てきて、いかがでしょうか？
驚き、面白いって感じました？

31
DEMOを見てきて、いかがでしょうか？
ブラウザで利用できるのはメリット
可能性を感じないはずがない！

32
夢を感じました！？
会社はベンチャーでも！！
※ 危険な冒険、危険な試み・・・
マインドは
アドベンチャーでいきましょう！

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

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

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

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

フルスタックエンジニア
（アスタリスク人材）
＋DBの理解
＋サーバ・インフラの理解
＋UI,UXの理解
＋ etc…
広いスキルが求められてる
僕はこれしかできません、やりません
・・・では通用しません、活躍の場が減かも

3838
◆ Windows ストアアプリ
┗ HTML5,CSS3,JavaScript
アプリ作成としてWeb知識が生かせる時代！

3939
◆ スマートフォンアプリ：Monaca(PhoneGap)
┗ HTML5,CSS3,JavaScript
アプリ作成としてWeb知識が生かせる時代！

40
自身のアプリで勝負することができる時代！！
フリーランスでも勝負できる！！ってこと。
自分で道を切り拓きましょう！！
create one's own future.
１人でもできる

41
枠にハマらるな！
そんな奴らが生き残る時代！
・いつ頑張るんですか！？
・いつ自分の時代にするんですか！？
●●でしょ!!
では、
いつ行動するのか！？

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

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

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

Recommended

Recommended

More Related Content

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

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