Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

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

http://eventregist.com/e/InnovationEGG01

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

まだ間に合う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. おしまい

×