html5 will take you higher! ～html5は実務で使える段階へ～
Post on 31-May-2015
456 Views
Preview:
DESCRIPTION
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
top related