Your SlideShare is downloading. ×
0
まだ間に合う HTML5
Yeomanで追いつけ!高速Webアプリ開発

2013/10/26 Innovation EGG @kadoppe
自己紹介
●

名前
● 門脇 恒平(29) @kadoppe

●

職業
● ソフトウェアエンジニア

●

所属
● HTML5-WEST.jp & 株式会社シェアウィズ
本日のスライド
●

SlideShare
● http://www.slideshare.net/kadoppe

●

Speaker Deck
● https://speakerdeck.com/kadoppe
アジェンダ
●

HTML5-WEST.jp 紹介

●

HTML5 でできること

●

HTML5 についていくために

●

Yeoman で追いつけ!
高速Webアプリ開発
HTML5-WEST.jpの紹介
HTML5-WEST.jp
●

関西で HTML5 の話題を盛り上げるため
に 2010 年に発足したコミュニティ

●

活動内容
● HTML5関連の勉強会・イベント開催
● MLでの情報共有
HTML5など勉強会
●

HTML5関連技術の発表をとおして
技術向上・情報交換を行う場所

●

不定期開催
● 2011年に第1回が開催・現在までに8回開催

●

「HTML5とか勉強会」をインスパイア
僕とHTML5-WEST.jp
出会い
●

2010/05
● 京都GTUG HTML5 ハッカソンに参加
● JavaScript & HTML5 初心者でした

●

その後
● HTML5読書会やハッカソンにしつこく参加
● コアメンバーとしてお誘いをうける
勉強会でプレゼン

●

HTML5 など勉強会が開催されるたびに
できるだけプレゼン

●

それがきっかけで…
雑誌の特集記事を書くことに
●

WEB+DB Press vol. 76
● 「作って学ぶデータ可視化」
参加するメリット
●

新技術を知る・勉強するきっかけになる

●

技術にとがった人と知り合える

●

手を上げれば自分が発表できる

●

その気になれば世界が広がる
是非参加してください!
HTML5 でできること
HTML5 と HTML5
●

HTML5 はとても曖昧な言葉

●

どこからが HTML5 なの?

●

どこまでが HTML5 なの?
狭義のHTML5
●

HTML4の次のバージョン

●

マークアップ言語としての仕様
● 新しいタグ/要素が追加
広義の HTML5
●

リッチインターネットアプリケーション
(RIA) 実現のための様々な仕様群

●

「HTML5関連技術」と呼ばれる

●

本プレゼンでは HTML5 と表記
いつから使える HTML5
●

A. もう使える

●

各ブラウザが段階的に対応
● Internet Explorer 9移行
● Mozilla Firefox 3.5移行
● Google Chrome 3.0移行
● Safari ...
HTML5 でできること
●

マークアップ編

●

表現編

●

JavaScript API編

●

スマホアプリ編
マークアップ編
シンプルなマークアップ

●

よりシンプルなタグでHTMLが
記述できるように
→ 制作・開発効率アップ↑
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/
TR/html4/loose.dtd">
! ! !
<!DOCTYPE ht...
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
! ! !
<meta charset="UTF-8">
<style type=”text/css”>...</style>
<script type=”text/javascript”>...</script>
! ! !
<style>...</style>
<script>...</scrip...
セマンティックなマークアップ
●

<div> 要素
● コンピュータが意味を解釈するのが難しい

●

<article>, <section> 要素などを
使うことで
● コンピュータが意味を解釈できるように
● スクリーンリーダや検索エン...
<article> 要素
●

記事 をマークアップ
● RSSフィードに含めたときに1つの記事として
成り立つ単位

●

例)
● ブログのエントリ
<article>
<h1>無鉄砲でラーメンを食べてきた</h1>
<p>無性にラーメンが食べたいと思い・・・</p>
<p>大行列ができてたけどめげずに並んで・・・</p>
...
</article>
<section> 要素

●

文章の セクション をマークアップ

●

例)
● 文章における 章
<section>
<h1>1章 はじめに</h1>
<p> ... </p>
</section>
<section>
<h1>2章 背景</h2>
<p> ... </p>
</section>
表現編
CSS3
●

Webページ上でリッチな表現を実現する
ための様々なプロパティが追加された

●

画像やスクリプトが必要だった表現
→ スタイルシートだけで実現可能に
装飾系プロパティ
●

border-radius
● 角丸

●

box-shadow, text-shadow
● ドロップシャドウ
.box {
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
border-radius: 3px;
}
参考:ズルいデザイン

ズルいデザイン(3):box-shadowで表現する、「セミフラット」なズルいデザインテクニック (1/2) - @IT
http://www.atmarkit.co.jp/ait/articles/1308/21/ne...
アニメーション系プロパティ
●

transition
● CSSプロパティによる状態の変化を
アニメーション

●

animation
● キーフレームアニメーション
.box {
background-color: red;
transition: background-color 1s;
}
.box:hover {
background-color: blue;
}
.box {
animation: an-animation 2s infinite;
}
@keyframes an-animation {
0%, 100% { left: 0px; }
50% { left: 100px; }
}
参考:5分でわかるCSS3のグラフィックス機能

「5分でわかるCSS3のグラフィックス機能」サンプル
http://www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics01/sample.html
Web Fonts
●

フォントをWebからダウンロードし
ブラウザで表示する技術

●

インストールされていないフォントが
利用可能

●

画像文字が必要だった表現
→ CSSのみで実現可能に
@font-face {
font-family: kadoppeFont;
src: url(kadoppe.woff)
}
.box {
font-family: kadoppeFont;
}
便利:Google Fonts

Google Fonts http://www.google.com/fonts
便利:FONTPLUS

FONTPLUS|フォントプラス http://webfont.fontplus.jp/
グラフィック描画機能
●

Canvas
● ビットマップ画像

●

Inline SVG
● ベクター画像

●

WebGL
● 3Dグラフィック
<canvas id="canvas" width="150"
height="150"></canvas>
<script>
! var canvas, ctx;
canvas =
document.getElementById('canva...
<svg width="150" height="150">
! <circle r="50" cx="75" cy="75" />
</svg>
デモ: The Shodo

The Shodo http://www.theshodo.com/
事例: ShareWis

無料学習サイトShareWis http://share-wis.com
事例: Hello Racer

HelloRacer™ WebGL http://helloracer.com/webgl/
JavaScript API編
Geolocation API

●

ユーザの位置情報を扱うためのAPI

●

Webアプリケーションがユーザの場所を
知ることが可能に
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude); // 緯度
console.log(pos...
事例: Google Map
localStorage
●

ブラウザにデータを保存

●

あとで取り出して使用可能

●

オフライン利用可能なWebアプリが
実現可能
window.localStorage.setItem(‘food’, ‘ラーメン’);
console.log( window.localStorage.getItem(‘food’) );
File API
●

コンピュータ上のファイルを読み込むた
めのAPI

●

使用例:ここにファイルをドロップ

JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
http://www.html5rocks...
Web Audio API
●

音声の生成

●

フィルター処理

●

高精度の再生タイミング制御

●

使用例:
● ゲーム
● シンセサイザー
事例: Angry Birds

Angry Birds Chrome http://chrome.angrybirds.com/
スマホアプリ編
PhoneGap
●

スマートフォン用ネイティブアプリ開発フ
レームワーク
● iOS, Android, Windows Phone

●

HTML5 関連技術をつかって開発
● HTML5
● CSS
● JavaScript
事例:My Heart Camer

PhoneGap ¦ My Heart Camera http://phonegap.com/app/my-heart-camera/
第3のモバイルOS
●

iOSやAndroidに次ぐ第3のOS
● Firefox OS
● Tizen

●

プラットフォームがアプリが
HTML5 で実装されている
Firefox OS

ZTE Open Powered by Firefox OS 3G Unlocked Smartphone Orange eBay Exclusive ¦ eBay
http://www.ebay.com/itm/331...
Tizen

Urban Airship Takes the Stage at the Tizen Developer Conference
http://urbanairship.com/blog/2012/05/08/urban-airsh...
HTML5 についていくために
ついていく上での問題点
●

技術が広すぎる・多すぎる

●

新技術がどんどん登場する
● API

●

大量のJavaScriptライブラリ
● Backbone.js, D3.js, Three.js, ⃝⃝.js, ...
どうすれば…(́・ω・`)
1.とにかく興味を持つ
2.とにかくコードを書く
でも、コードを書くの
時間かかるよ…(́・ω・`)
もう手遅れ?間に合わない?
(́・ω・`)
3.高速にコードを書こう
そこで
Yeoman追いつけ!
高速Webアプリ開発
Yeoman
●

Web開発に関わる面倒なことを
自動化してくれるツール
● コードを書く前の準備
● コードを書いている時の作業
● コードを書き終わったあとの作業
Yeomanの構成要素
Yo
●

Yeomanのプロジェクトを生成

●

様々なひな形が公開されている
● webapp: 一般的なウェブアプリ用
● backbone: Backbone.js用
● chromeapp: Chrome Web Store用
Grunt
●

さまざまな作業を自動化
● 開発用サーバの起動
● ファイル更新の監視
● 自動テスト
● リリース作業
Bower
●

JavaScriptライブラリのパッケージ管理
● 検索
● インストール
● アップデート
● 依存関係の自動解決
実際につかってみる
手順
●

必要なツールの準備

●

プロジェクトの作成

●

サーバの起動

●

コードを書く

●

リリース
必要なツールの準備
●

Webブラウザ

●

テキストエディタ
● 普段使っているもの

●

ターミナル(通称:黒い画面)

●

node.js
node.js
●

サーバサイドJavaScript実行環境
● 詳しいことは知らなくてもOK

●

インストール
● pkg ファイルをダウンロードするのが簡単
http://nodejs.jp/nodejs.org_ja/docs/v0...
Yeomanのインストール

$ npm install -g yo grunt-cli bower generator-webapp

$ を除いた部分を
ターミナルで入力してENTER
プロジェクトの作成

$ cd /Users/kadoppe/Source/hello-yeoman
$ yo webapp
ひな形に何を含めるか尋ねられる
とりあえず Enter を入力
色々インストールされる
とりあえず待つ
生成されるプロジェクト
●

app/ ← Webアプリのコードはこの中

●

bower.json

●

Gruntfile.js

●

node_modules/

●

package.json

●

test/
app ディレクトリの中身
● 404.html
● bower_components/
● images/ : 画像ファイルを配置
● index.html
● robots.txt
● scripts/ : JavaScriptファイルを配...
導入されているフレームワーク・ライブラリ

●

HTML5 Boilerplate

●

Modernizr

●

RequireJS

●

Bootstrap
HTML5 Boilerplate
●

HTML5でWeb制作を行うときの
ベストプラクティスを集めたテンプレ
● Normalize.css
● Google Analytics導入用タグ
● IE対応

●

詳しくは公式を見てください
...
HTML5 Boilerplate
●

HTML5でWeb制作を行うときの
ベストプラクティスを集めたテンプレ
● Normalize.css
● Google Analytics導入用タグ
● IE対応
Modernizr
●

ブラウザがサポートしているHTML5・
CSS3の機能を自動検出

●

<html> 要素の class 属性に
サポート状況を出力してくれる

●

CSSやJavaScriptで処理を分岐
するのに便利
<html class=“js canvas canvastext
no-geolocation rgba hsla multiplebgs
borderimage borderradius boxshadow opacity
cssanima...
RequireJS
●

JavaScriptで外部JavaScriptファイル
の読み込みを実現するライブラリ
● C言語でいうimport

●

大規模なJavaScriptプログラムを
書くときに便利
Bootstrap
●

有名なCSSフレームワーク

●

あらかじめ定義された class を要素に
設定するだけで良い感じのデザインに
● デザイン力がないときに便利
サーバの起動

$ grunt server
サーバが起動し
ブラウザにページが
自動的に表示される
コードを書く
●

テキストエディタで自由にコードを編集
● HTML: index.html
● JavaScript
● main.js: 設定関係のコード
● app.js: アプリケーションのコード
● CSS: main.scss
Live Reload
●

ファイルを変更したら自動的にブラウザ
を更新してくれる仕組み

●

「エディタ→保存→ブラウザ→更新→」
の手間が大幅に軽減
JavaScriptライブラリを導入

$ bower install d3.js
main.js におまじない追加
require.config({
paths: {
d3: '../bower_components/d3/d3'
},
shim: {
d3: {
exports: 'd3'
}
}
});
※ Requir...
app.js におまじない追加

define(['d3'], function (d3) {
});

※ RequireJSのD3.js読み込み設定
app.js におまじない追加

define(['d3'], function (d3) {
});

※ RequireJSのD3.js読み込み設定
さらに開発を高速化
●

CoffeeScript を使う
● コンパイルするとJavaScriptになる言語
● 同じことをよりシンプルに実現できる

●

Sass(SCSS)を使う
● コンパイルするとCSSになる言語
● 変数やmixin...
$.click(function () {
console.log(‘clicked’);
});
! ! !
$.click ->
console.log ‘clicked’
.wrapper .inner a {
text-decoration: none;
}
.wrapper .inner a:hover {
text-decoration: underline;
}
! ! !
.wrapper {
.inn...
リリース

$ grunt build
リリース時にやってくれること
●

JavaScriptとCSSの最適化
● 結合と圧縮

●

画像の最適化

●

リリースに必要なファイルのみを
dist/ ディレクトリに移動
まとめ
●

HTML5 はもう使える/使われている

●

技術の範囲・種類が多すぎてついていく
のが大変

●

興味を持ってとにかくコードを書くこと
が重要

●

Yeomanで開発・学習効率アップ
まだ間に合う!
追いつける!
おしまい
まだ間に合うHTML5 - Yeomanで追いつけ!高速webアプリ開発
Upcoming SlideShare
Loading in...5
×

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

6,926

Published on

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

http://eventregist.com/e/InnovationEGG01

Published in: Technology

Transcript of "まだ間に合う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. おしまい
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×