html5 will take you higher! ～html5は実務で使える段階へ～
DESCRIPTION
2014-06-26に鹿児島市のソフトプラザかごしまで開催された一般社団法人鹿児島県情報サービス産業協会(KISA)主催のセミナーの講演スライドです。TRANSCRIPT
HTML5 Will Take You Higher!～HTML5は実務で使える段階へ～
目次✦自己紹介
✦ HTML5って？
✦実務で使えるHTML5
✦便利ツール
✦学習サイト
✦本日のまとめ
自己紹介
自己紹介
名前森 史憲（もり ふみのり）
出身・現住所鹿児島市
特徴丸メガネ、丸ぼうず（休止中）
2014年5月4日枕崎市 火之神公園
自己紹介
フリーランスのHTMLコーダー
★基本的にはコーダーですが、鹿児島ではディレクションもお受けしてます！
★基本はシステム用のテンプレートHTMLのコーディング
★最近は対象ブラウザが「IE9以上」という案件も出てきてます。
Suite HAIR DESIGNhttp://www.suite-hairdesign.com/
ディレクション/コーディング/運用
自己紹介
雑誌記事 / 書籍執筆
★HTML5&CSS3ポケットリファレンス（技術評論社）
★イラストいっぱいで子供さんのプログラミング教育にもおすすめ！
★Amazon、7netショッピングや全国の書店でお求めいただけます！
★電子版は技術評論社の電子書籍サイトでお求めいただけます！
自己紹介
Webサイト制作技術講師
★Webサイト制作技術専門講座NPO法人鹿児島インファーメーション
★HTML5&CSS3およびjQuery、HTML5 APIを学習する講座
カレーLOVE!カレー屋 匠★匠盛（和牛・黒豚あいがけ）
ビールLOVE!城山観光ホテルの地ビール★ベルギーホワイト★スタウトエール黒糖
チョコレートLOVE!パティスリー・ヤナギムラ★薩摩チョコチップス
自己紹介
HTML5って？
★HTML5はHTMLの5つめのバージョン
★これまでのバージョンであるHTML4、XHTML1と互換性がある
HTML5って？
★Webアプリケーションを作ることを志向✴ 狭い意味でのHTML5は文書構造だけ
✴ 広い意味では見た目の装飾をする「CSS3」、デバイスの機能を利用可能にする「JavaScript API」を含む
HTML5って？
http://en.wikipedia.org/wiki/HTML5
狭い意味のHTML5↓
広い意味のHTML5→
HTML5って？
★実例✴ 幅によってレイアウトを変更するWebサイト
-レスポンシブWebデザインスマホ版 PC版
HTML5って？
★実例✴ 3DCGを利用したゲーム
-翠星のガルガンティアhttp://fly.gargantia.jp/
★実例✴ 表示をHTML5で行うモバイルOS（アプリもHTML5）
- Firefox OS
- Tizen
HTML5って？
Firefox OSスクリーンショット
★実例✴ アプリからTVに動画配信を指示
✴ Chromecast向けアプリ開発https://github.com/googlecast
HTML5って？
HTML5って？
★実例（ニュース）✴ デジタルサイネージの表示
✴ 通常時は広告・公共情報、災害時は災害情報
✴ NTT、スマホで情報をリレーして街中のデジタルサイネージを連携させるシステムを実験http://www.rbbtoday.com/article/2013/11/19/114056.html
HTML5って？
★実例（ニュース）
✴車載ディスプレイのブラウザ＆アプリ✴ ブラウザ表示をWebkitベースに変更✴ 車載組込ブラウザの過去7年と今を40分でまとめてみるhttp://www.slideshare.net/naohikowatanabe/740-30295639
★実例（ニュース）✴ スマート家電をHTML5アプリで操作
✴ Kadecot（カデコ）プロジェクトhttp://kadecot.net/
HTML5って？
実務で使えるHTML5
HTML編（5つ紹介）
実務で使えるHTML5（HTML 1/5）
★意味付けをする新しい要素✴ nav, article, section, aside, header, footer, main ...etc
例）<article>
<h1>ベルギーのチョコレート</h1><p>ゴディバもおいしいけどピエール・マルコリーニもね。</p></article>
※IE8は JavaScript (HTML5shiv) で補うことが可能
実務で使えるHTML5（HTML 2/5）
★すべての要素に任意の属性を設定✴ data-*属性
例）<div data-beertype=”ホワイトエール”>城山ブルワリー ベルギーホワイト</div>
実務で使えるHTML5（HTML 3/5）
★プラグインなしで動画や音声を埋め込み✴ video要素、audio要素
例）<video controls width="800" height="600">
<source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"></video>
実務で使えるHTML5（HTML 4/5）
★オフライン時に閲覧するファイルリストを指定✴ html要素のmanifest属性
例）<html lang="ja" manifest="manifest.appcache">…<p>オフライン時でもこのファイルは見ることができます</p>
★html要素のmanifest属性例）manifest.appcache
CACHE MANIFESTindex.html
実務で使えるHTML5（HTML 4/5）
★html要素のmanifest属性例）.htaccess
AddType text/cache-manifest .appcache
実務で使えるHTML5（HTML 4/5）
★入力例の表示✴ input要素placeholder属性
例）<input type=”text” name=”curry_shop” placeholder="例）カレー屋 匠">
実務で使えるHTML5（HTML 5/5）
CSS編（6つ紹介）
実務で使えるHTML5（CSS 1/6）
★角丸表示✴ border-radiusプロパティ
例）div { background: green; border-radius: 10px;
}
実務で使えるHTML5（CSS 2/6）
★ウインドウ幅によって表示を変える✴ @media
例）#wrapper { width: auto; margin: 0 auto; }@media only screen and (min-width:600px) { #wrapper { width: 600px; }}
★端末内にないフォントを使って文字を表示✴ @font-face
例）@font-face {
font-family: "Butterfly Effect"; src: url(UnT_efeitoBorboleta.eot);}
body { font-family: "Butterfly Effect"; }
実務で使えるHTML5（CSS 3/6）
★複数の背景指定✴ backgroundプロパティ
例）div { background: url(bg1.png) no-repeat 0 0,
url(bg2.png) no-repeat 0 0 skyblue;}
実務で使えるHTML5（CSS 4/6）
★レイアウトに影響しない線✴ outlineプロパティ
例）input:focus { outline: 2px solid orange; }
実務で使えるHTML5（CSS 5/6）
★変形✴ transformプロパティ
例）div { transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
実務で使えるHTML5（CSS 6/6）
JavaScript編（4つ紹介）
実務で使えるHTML5（JavaScript 1/4）
★ブラウザにデータを保存✴ localStorage, sessionStorage
例）var storage = sessionStorage;storage.setItem("height","172");
var myheight = storage.getItem("height");
★ウインドウ幅によって動きを変える✴ matchMedia
例）if (window.matchMedia( "(min-width: 600px)" ).matches) {
/* ウインドウ幅600px以上の時 */} else { /* ウインドウ幅599px以下の時 */}
実務で使えるHTML5（JavaScript 2/4）
★グラフなどの描画領域を確保✴ canvas要素
例）var ctx = document.getElementById("myChart").getContext("2d");ctx.fillRect(0,0,50,50);
実務で使えるHTML5（JavaScript 3/4）
★緯度・経度の取得✴ navigator.geolocation
例）navigator.geolocation.getCurrentPosition(function(pos){ //正常処理}, function(pos){ //エラー処理});
実務で使えるHTML5（JavaScript 4/4）
便利ツール
★ブラウザのサポート状況を確認する✴ Can I use...http://caniuse.com/
✴ Quirksmodehttp://www.quirksmode.org/
便利ツール
★ブラウザごとの違いを吸収する✴ Modernizr(HTML5 shiv + α)http://modernizr.com/
✴ normalize.csshttp://necolas.github.io/normalize.css/
✴ jQueryhttp://jquery.com/
便利ツール
★手っ取り早く形にするフレームワーク✴ Bootstrap（最も知られているフレームワーク）http://getbootstrap.com/
✴ 主要なフレームワークhttp://webnaut.jp/CSS-Framework-Comparative-Chart/
✴ いろーんなフレームワークhttp://usablica.github.io/front-end-frameworks/compare.html
便利ツール
学習サイト
✴ ドットインストールhttp://dotinstall.com/
✴ CodeAcademy（英語に抵抗が少なければおすすめ）http://www.codecademy.com
学習サイト
本日のまとめ
★HTML5の活用領域はかなり広い！★実務で使えるHTML, CSS, JavaScript APIはだいぶ増えてきた！
★ツール類、学習サイトが充実してきた！
本日のまとめ
HTML5を実務でどんどん取り入れて
いち早く新しい価値を生み出しましょう
鹿児島ならではの問題を解決する製品で
世界を目指しましょう！
ご清聴ありがとうございました！m(__)m
