まだ間に合うHTML5 - Yeomanで追いつけ!高速webアプリ開発

8,112 views

Published on

2013/10/26に大阪で開催されたInnovation EGG 第1回のセミナーで使ったプレゼン資料です。

http://eventregist.com/e/InnovationEGG01

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

No Downloads
Views
Total views
8,112
On SlideShare
0
From Embeds
0
Number of Embeds
607
Actions
Shares
0
Downloads
38
Comments
0
Likes
36
Embeds 0
No embeds

No notes for slide

まだ間に合うHTML5 - Yeomanで追いつけ!高速webアプリ開発

  1. 1. まだ間に合う HTML5 Yeomanで追いつけ!高速Webアプリ開発 2013/10/26 Innovation EGG @kadoppe
  2. 2. 自己紹介 ● 名前 ● 門脇 恒平(29) @kadoppe ● 職業 ● ソフトウェアエンジニア ● 所属 ● HTML5-WEST.jp & 株式会社シェアウィズ
  3. 3. 本日のスライド ● SlideShare ● http://www.slideshare.net/kadoppe ● Speaker Deck ● https://speakerdeck.com/kadoppe
  4. 4. アジェンダ ● HTML5-WEST.jp 紹介 ● HTML5 でできること ● HTML5 についていくために ● Yeoman で追いつけ! 高速Webアプリ開発
  5. 5. HTML5-WEST.jpの紹介
  6. 6. HTML5-WEST.jp ● 関西で HTML5 の話題を盛り上げるため に 2010 年に発足したコミュニティ ● 活動内容 ● HTML5関連の勉強会・イベント開催 ● MLでの情報共有
  7. 7. HTML5など勉強会 ● HTML5関連技術の発表をとおして 技術向上・情報交換を行う場所 ● 不定期開催 ● 2011年に第1回が開催・現在までに8回開催 ● 「HTML5とか勉強会」をインスパイア
  8. 8. 僕とHTML5-WEST.jp
  9. 9. 出会い ● 2010/05 ● 京都GTUG HTML5 ハッカソンに参加 ● JavaScript & HTML5 初心者でした ● その後 ● HTML5読書会やハッカソンにしつこく参加 ● コアメンバーとしてお誘いをうける
  10. 10. 勉強会でプレゼン ● HTML5 など勉強会が開催されるたびに できるだけプレゼン ● それがきっかけで…
  11. 11. 雑誌の特集記事を書くことに ● WEB+DB Press vol. 76 ● 「作って学ぶデータ可視化」
  12. 12. 参加するメリット ● 新技術を知る・勉強するきっかけになる ● 技術にとがった人と知り合える ● 手を上げれば自分が発表できる ● その気になれば世界が広がる
  13. 13. 是非参加してください!
  14. 14. HTML5 でできること
  15. 15. HTML5 と HTML5 ● HTML5 はとても曖昧な言葉 ● どこからが HTML5 なの? ● どこまでが HTML5 なの?
  16. 16. 狭義のHTML5 ● HTML4の次のバージョン ● マークアップ言語としての仕様 ● 新しいタグ/要素が追加
  17. 17. 広義の HTML5 ● リッチインターネットアプリケーション (RIA) 実現のための様々な仕様群 ● 「HTML5関連技術」と呼ばれる ● 本プレゼンでは HTML5 と表記
  18. 18. いつから使える HTML5 ● A. もう使える ● 各ブラウザが段階的に対応 ● Internet Explorer 9移行 ● Mozilla Firefox 3.5移行 ● Google Chrome 3.0移行 ● Safari 3.1移行
  19. 19. HTML5 でできること ● マークアップ編 ● 表現編 ● JavaScript API編 ● スマホアプリ編
  20. 20. マークアップ編
  21. 21. シンプルなマークアップ ● よりシンプルなタグでHTMLが 記述できるように → 制作・開発効率アップ↑
  22. 22. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"> ! ! ! <!DOCTYPE html>
  23. 23. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ! ! ! <meta charset="UTF-8">
  24. 24. <style type=”text/css”>...</style> <script type=”text/javascript”>...</script> ! ! ! <style>...</style> <script>...</script>
  25. 25. セマンティックなマークアップ ● <div> 要素 ● コンピュータが意味を解釈するのが難しい ● <article>, <section> 要素などを 使うことで ● コンピュータが意味を解釈できるように ● スクリーンリーダや検索エンジンが 高機能に
  26. 26. <article> 要素 ● 記事 をマークアップ ● RSSフィードに含めたときに1つの記事として 成り立つ単位 ● 例) ● ブログのエントリ
  27. 27. <article> <h1>無鉄砲でラーメンを食べてきた</h1> <p>無性にラーメンが食べたいと思い・・・</p> <p>大行列ができてたけどめげずに並んで・・・</p> ... </article>
  28. 28. <section> 要素 ● 文章の セクション をマークアップ ● 例) ● 文章における 章
  29. 29. <section> <h1>1章 はじめに</h1> <p> ... </p> </section> <section> <h1>2章 背景</h2> <p> ... </p> </section>
  30. 30. 表現編
  31. 31. CSS3 ● Webページ上でリッチな表現を実現する ための様々なプロパティが追加された ● 画像やスクリプトが必要だった表現 → スタイルシートだけで実現可能に
  32. 32. 装飾系プロパティ ● border-radius ● 角丸 ● box-shadow, text-shadow ● ドロップシャドウ
  33. 33. .box { box-shadow: 2px 2px 2px rgba(0,0,0,0.2); border-radius: 3px; }
  34. 34. 参考:ズルいデザイン ズルいデザイン(3):box-shadowで表現する、「セミフラット」なズルいデザインテクニック (1/2) - @IT http://www.atmarkit.co.jp/ait/articles/1308/21/news008.html
  35. 35. アニメーション系プロパティ ● transition ● CSSプロパティによる状態の変化を アニメーション ● animation ● キーフレームアニメーション
  36. 36. .box { background-color: red; transition: background-color 1s; } .box:hover { background-color: blue; }
  37. 37. .box { animation: an-animation 2s infinite; } @keyframes an-animation { 0%, 100% { left: 0px; } 50% { left: 100px; } }
  38. 38. 参考:5分でわかるCSS3のグラフィックス機能 「5分でわかるCSS3のグラフィックス機能」サンプル http://www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics01/sample.html
  39. 39. Web Fonts ● フォントをWebからダウンロードし ブラウザで表示する技術 ● インストールされていないフォントが 利用可能 ● 画像文字が必要だった表現 → CSSのみで実現可能に
  40. 40. @font-face { font-family: kadoppeFont; src: url(kadoppe.woff) } .box { font-family: kadoppeFont; }
  41. 41. 便利:Google Fonts Google Fonts http://www.google.com/fonts
  42. 42. 便利:FONTPLUS FONTPLUS|フォントプラス http://webfont.fontplus.jp/
  43. 43. グラフィック描画機能 ● Canvas ● ビットマップ画像 ● Inline SVG ● ベクター画像 ● WebGL ● 3Dグラフィック
  44. 44. <canvas id="canvas" width="150" height="150"></canvas> <script> ! var canvas, ctx; canvas = document.getElementById('canvas'); ! ctx = canvas.getContext('2d'); ! ! ctx.strokeStyle = "#FF0000"; ! ctx.strokeRect(25, 25, 100, 100); ! ! ctx.fillStyle = "#FFCC00"; ! ctx.fillRect(25, 25, 100, 100); </script>
  45. 45. <svg width="150" height="150"> ! <circle r="50" cx="75" cy="75" /> </svg>
  46. 46. デモ: The Shodo The Shodo http://www.theshodo.com/
  47. 47. 事例: ShareWis 無料学習サイトShareWis http://share-wis.com
  48. 48. 事例: Hello Racer HelloRacer™ WebGL http://helloracer.com/webgl/
  49. 49. JavaScript API編
  50. 50. Geolocation API ● ユーザの位置情報を扱うためのAPI ● Webアプリケーションがユーザの場所を 知ることが可能に
  51. 51. navigator.geolocation.getCurrentPosition(function(position) { console.log(position.coords.latitude); // 緯度 console.log(position.coords.longitude); // 経度 });
  52. 52. 事例: Google Map
  53. 53. localStorage ● ブラウザにデータを保存 ● あとで取り出して使用可能 ● オフライン利用可能なWebアプリが 実現可能
  54. 54. window.localStorage.setItem(‘food’, ‘ラーメン’); console.log( window.localStorage.getItem(‘food’) );
  55. 55. File API ● コンピュータ上のファイルを読み込むた めのAPI ● 使用例:ここにファイルをドロップ JavaScript でのローカル ファイルの読み込み - HTML5 Rocks http://www.html5rocks.com/ja/tutorials/file/dndfiles/
  56. 56. Web Audio API ● 音声の生成 ● フィルター処理 ● 高精度の再生タイミング制御 ● 使用例: ● ゲーム ● シンセサイザー
  57. 57. 事例: Angry Birds Angry Birds Chrome http://chrome.angrybirds.com/
  58. 58. スマホアプリ編
  59. 59. PhoneGap ● スマートフォン用ネイティブアプリ開発フ レームワーク ● iOS, Android, Windows Phone ● HTML5 関連技術をつかって開発 ● HTML5 ● CSS ● JavaScript
  60. 60. 事例:My Heart Camer PhoneGap ¦ My Heart Camera http://phonegap.com/app/my-heart-camera/
  61. 61. 第3のモバイルOS ● iOSやAndroidに次ぐ第3のOS ● Firefox OS ● Tizen ● プラットフォームがアプリが HTML5 で実装されている
  62. 62. Firefox OS ZTE Open Powered by Firefox OS 3G Unlocked Smartphone Orange eBay Exclusive ¦ eBay http://www.ebay.com/itm/331031989534
  63. 63. Tizen Urban Airship Takes the Stage at the Tizen Developer Conference http://urbanairship.com/blog/2012/05/08/urban-airship-takes-the-stage-at-the-tizendeveloper-conference/
  64. 64. HTML5 についていくために
  65. 65. ついていく上での問題点 ● 技術が広すぎる・多すぎる ● 新技術がどんどん登場する ● API ● 大量のJavaScriptライブラリ ● Backbone.js, D3.js, Three.js, ⃝⃝.js, ...
  66. 66. どうすれば…(́・ω・`)
  67. 67. 1.とにかく興味を持つ
  68. 68. 2.とにかくコードを書く
  69. 69. でも、コードを書くの 時間かかるよ…(́・ω・`)
  70. 70. もう手遅れ?間に合わない? (́・ω・`)
  71. 71. 3.高速にコードを書こう
  72. 72. そこで
  73. 73. Yeoman追いつけ! 高速Webアプリ開発
  74. 74. Yeoman ● Web開発に関わる面倒なことを 自動化してくれるツール ● コードを書く前の準備 ● コードを書いている時の作業 ● コードを書き終わったあとの作業
  75. 75. Yeomanの構成要素
  76. 76. Yo ● Yeomanのプロジェクトを生成 ● 様々なひな形が公開されている ● webapp: 一般的なウェブアプリ用 ● backbone: Backbone.js用 ● chromeapp: Chrome Web Store用
  77. 77. Grunt ● さまざまな作業を自動化 ● 開発用サーバの起動 ● ファイル更新の監視 ● 自動テスト ● リリース作業
  78. 78. Bower ● JavaScriptライブラリのパッケージ管理 ● 検索 ● インストール ● アップデート ● 依存関係の自動解決
  79. 79. 実際につかってみる
  80. 80. 手順 ● 必要なツールの準備 ● プロジェクトの作成 ● サーバの起動 ● コードを書く ● リリース
  81. 81. 必要なツールの準備 ● Webブラウザ ● テキストエディタ ● 普段使っているもの ● ターミナル(通称:黒い画面) ● node.js
  82. 82. node.js ● サーバサイドJavaScript実行環境 ● 詳しいことは知らなくてもOK ● インストール ● pkg ファイルをダウンロードするのが簡単 http://nodejs.jp/nodejs.org_ja/docs/v0.10/
  83. 83. Yeomanのインストール $ npm install -g yo grunt-cli bower generator-webapp $ を除いた部分を ターミナルで入力してENTER
  84. 84. プロジェクトの作成 $ cd /Users/kadoppe/Source/hello-yeoman $ yo webapp
  85. 85. ひな形に何を含めるか尋ねられる とりあえず Enter を入力
  86. 86. 色々インストールされる とりあえず待つ
  87. 87. 生成されるプロジェクト ● app/ ← Webアプリのコードはこの中 ● bower.json ● Gruntfile.js ● node_modules/ ● package.json ● test/
  88. 88. app ディレクトリの中身 ● 404.html ● bower_components/ ● images/ : 画像ファイルを配置 ● index.html ● robots.txt ● scripts/ : JavaScriptファイルを配置 ● styles/ : CSSファイル
  89. 89. 導入されているフレームワーク・ライブラリ ● HTML5 Boilerplate ● Modernizr ● RequireJS ● Bootstrap
  90. 90. HTML5 Boilerplate ● HTML5でWeb制作を行うときの ベストプラクティスを集めたテンプレ ● Normalize.css ● Google Analytics導入用タグ ● IE対応 ● 詳しくは公式を見てください http://html5boilerplate.com/
  91. 91. HTML5 Boilerplate ● HTML5でWeb制作を行うときの ベストプラクティスを集めたテンプレ ● Normalize.css ● Google Analytics導入用タグ ● IE対応
  92. 92. Modernizr ● ブラウザがサポートしているHTML5・ CSS3の機能を自動検出 ● <html> 要素の class 属性に サポート状況を出力してくれる ● CSSやJavaScriptで処理を分岐 するのに便利
  93. 93. <html class=“js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>
  94. 94. RequireJS ● JavaScriptで外部JavaScriptファイル の読み込みを実現するライブラリ ● C言語でいうimport ● 大規模なJavaScriptプログラムを 書くときに便利
  95. 95. Bootstrap ● 有名なCSSフレームワーク ● あらかじめ定義された class を要素に 設定するだけで良い感じのデザインに ● デザイン力がないときに便利
  96. 96. サーバの起動 $ grunt server
  97. 97. サーバが起動し ブラウザにページが 自動的に表示される
  98. 98. コードを書く ● テキストエディタで自由にコードを編集 ● HTML: index.html ● JavaScript ● main.js: 設定関係のコード ● app.js: アプリケーションのコード ● CSS: main.scss
  99. 99. Live Reload ● ファイルを変更したら自動的にブラウザ を更新してくれる仕組み ● 「エディタ→保存→ブラウザ→更新→」 の手間が大幅に軽減
  100. 100. JavaScriptライブラリを導入 $ bower install d3.js
  101. 101. main.js におまじない追加 require.config({ paths: { d3: '../bower_components/d3/d3' }, shim: { d3: { exports: 'd3' } } }); ※ RequireJSのD3.js読み込み設定
  102. 102. app.js におまじない追加 define(['d3'], function (d3) { }); ※ RequireJSのD3.js読み込み設定
  103. 103. app.js におまじない追加 define(['d3'], function (d3) { }); ※ RequireJSのD3.js読み込み設定
  104. 104. さらに開発を高速化 ● CoffeeScript を使う ● コンパイルするとJavaScriptになる言語 ● 同じことをよりシンプルに実現できる ● Sass(SCSS)を使う ● コンパイルするとCSSになる言語 ● 変数やmixin(関数)、入れ子構造が可能
  105. 105. $.click(function () { console.log(‘clicked’); }); ! ! ! $.click -> console.log ‘clicked’
  106. 106. .wrapper .inner a { text-decoration: none; } .wrapper .inner a:hover { text-decoration: underline; } ! ! ! .wrapper { .inner { a { text-decoration: none; &:hover { text-decoration: underline; } } } }
  107. 107. リリース $ grunt build
  108. 108. リリース時にやってくれること ● JavaScriptとCSSの最適化 ● 結合と圧縮 ● 画像の最適化 ● リリースに必要なファイルのみを dist/ ディレクトリに移動
  109. 109. まとめ ● HTML5 はもう使える/使われている ● 技術の範囲・種類が多すぎてついていく のが大変 ● 興味を持ってとにかくコードを書くこと が重要 ● Yeomanで開発・学習効率アップ
  110. 110. まだ間に合う! 追いつける!
  111. 111. おしまい

×