クリエイティブ・コモンズ...Dec. 2016 No. TMScholarOne Manuscripts ユーザーカンファレンス201 開催報告 クリエイティブ・コモンズ・ライセンス(CCライセンス
HTML5時代に必要なスキルと考え方...
-
Upload
daisuke-yamazaki -
Category
Technology
-
view
1.033 -
download
1
description
Transcript of HTML5時代に必要なスキルと考え方...
HTML 5時代に必要なスキルと考え方〜クリエイティブ 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 デザイン 「超」実践デザイン集中講義
本セミナーの目標
・ え!こんなことできるの?・ 面白い!!・ やってみたい!!・ もっと勉強しなきゃ!!・ この機能使ってみたい!!
1つでも何かを感じてほしい。 やる気につながる何かを感じて持って帰ってほしい。
自己紹介
山崎さん、この仕事は長いの?
本日の案内役!!マイクです!!
自己紹介
1. 最初は別の業界からスタート
2. いつからパソコンを?
3. 今は? 自己紹介した内容です。
Communication !!
1. Web デザイナーの方?
2. Web エンジニアの方?
3. MS 大好きな方?
4.夢ありますか?
5.夢に近ずく行動できてます? 手を上げてね
夢は「意志・行動」で叶える
・意志(どうなりたいのか!)・短期/長期の目標を自分何に考える
・行動(恥ずかしくても、無駄でもやってみる)・耐える時期も必要
・直向き(努力し続ける)
・アピールも必要(目標によっては)
・意志(どうなりたいのか!)・短期/長期の目標を自分何に考える
・行動(恥ずかしくても、無駄でもやってみる)・耐える時期も必要
・直向き(努力し続ける)
・アピールも必要(目標によっては)
夢は「意志・行動」で叶える
気づいた時に行動!人生に遅いはない!
なぜそう言えるのか?
だって、
私28歳からパソコン始めて、
やれてますから (^^ゞ
これから 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 のページ下部にはサンプルが3種類あるので試してみてください。 Skype のようなことが簡単にできたりします。
31
DEMO を見てきて、いかがでしょう
か?
驚き、面白いって感じました?
32
DEMO を見てきて、いかがでしょう
か?
ブラウザで利用できるのはメリット
可能性を感じないはずがない!
33
夢を感じました!?
会社はベンチャーでも!!※ 危険な冒険、危険な試み・・・
マインドは
アドベンチャーでいきましょ
う!
今までの Web の業務は・・・ ・ Web デザイナー
( IE6,7,8対応、負の遺産対応 … HTML5 時代に不要)
→Web デザインナー スクリプトは・・・
1. HTML5 時代で必要なスキル
HTML5 CSS3Java
Script jQuary
できませんよ!
今までの Web系と呼ばれてた人は・・・、 ・ Web デザイナー ・ Web スクリプター
→クライアントアプリ? 私は Web の人ですから
1. HTML5 時代で必要なスキル
HTML5 CSS3Java
Script jQuary
できませんよ!
36
HTML5 時代に必要なスキル
これからはだめ!!
今求められるスキル• これからのデザイナーはスクリプトを理解できて
ることが大事。
※ JS の if分岐、 jQuery くらいは理解しよう
• これからのプログラマーはデザインを理解できて
ることが大事。
※ CSS くらい書けないと。
※ UI,UX も知ってたほうがいい。
フルスタックエンジニア(アスタリスク人材)
+ DB の理解+サーバ・インフラの理解+ UI,UX の理解+ etc…
広いスキルが求められてる
1. HTML5 時代で必要なスキル
僕はこれしかできません、やりません ・・・では通用しません、活躍の場が減かも
3939
◆ Windows ストア アプリ ┗ HTML5,CSS3,JavaScript
アプリ作成として Web 知識が生かせる時代!
HTML5 時代に必要なスキル
4040
◆ スマートフォンアプリ: Monaca(PhoneGap) ┗ HTML5,CSS3,JavaScript
アプリ作成として Web 知識が生かせる時代!
HTML5 時代に必要なスキル
41
自身のアプリで勝負することができる時代!!フリーランスでも勝負できる!!ってこと。
自分で道を切り拓きましょう!! create one's own future.
HTML5 時代に必要なスキル
1人でもできる
42
枠にハマらるな! そんな奴らが生き残る時代!
・ いつ頑張るんですか!?・ いつ自分の時代にするんですか!?
HTML5 時代に必要なスキル
●●でしょ !!
では、 いつ行動するのか!?
常にチャレンジと努力!!
チャンスだと思ったら飛びつけ!!
待ってても何もこない!!
自分を信じろ!!
楽しめ!
いつでも皆さん次第で人生を変えられ
る
Thank You.
https://www.facebook.com/venezia7