HTML5 Will Take You Higher! ~HTML5は実務で使える段階へ~

876 views

Published on

2014-06-26に鹿児島市のソフトプラザかごしまで開催された一般社団法人鹿児島県情報サービス産業協会(KISA)主催のセミナーの講演スライドです。

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
876
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 Will Take You Higher! ~HTML5は実務で使える段階へ~

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

×