ONLYメール Gmail アプリにメールアカウントを追 …...ONLYメール 設定方法①～⑯ Gmail アプリにメールアカウントを追加する 【Android 版 Gmail
まだ間に合うHTML5 - Yeomanで追いつけ！高速webアプリ開発
112
まだ間に合う“HTML5” Yeomanで追いつけ！高速Webアプリ開発 2013/10/26 Innovation EGG @kadoppe
-
Upload
kohei-kadowaki -
Category
Technology
-
view
6.999 -
download
4
Transcript of まだ間に合うHTML5 - Yeomanで追いつけ！高速webアプリ開発
まだ間に合う“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など勉強会● HTML５関連技術の発表をとおして技術向上・情報交換を行う場所
●不定期開催● 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 3.1移行
“HTML5” でできること
●マークアップ編●表現編● JavaScript API編●スマホアプリ編
マークアップ編
シンプルなマークアップ
●よりシンプルなタグでHTMLが記述できるように→ 制作・開発効率アップ↑
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
! ! !
<!DOCTYPE html>
<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>...</script>
セマンティックなマークアップ● <div> 要素
● コンピュータが意味を解釈するのが難しい
● <article>, <section> 要素などを使うことで● コンピュータが意味を解釈できるように
● スクリーンリーダや検索エンジンが高機能に
<article> 要素
● “記事” をマークアップ● RSSフィードに含めたときに１つの記事として成り立つ単位
●例）● ブログのエントリ
<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/news008.html
アニメーション系プロパティ
● 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; }}
参考：５分でわかる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('canvas');! ctx = canvas.getContext('2d');! ! ctx.strokeStyle = "#FF0000";! ctx.strokeRect(25, 25, 100, 100);! ! ctx.fillStyle = "#FFCC00";! ctx.fillRect(25, 25, 100, 100);</script>
<svg width="150" height="150">! <circle r="50" cx="75" cy="75" /></svg>
事例: 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(position.coords.longitude); // 経度});
事例: Google Map
localStorage
●ブラウザにデータを保存●あとで取り出して使用可能●オフライン利用可能なWebアプリが実現可能
window.localStorage.setItem(‘food’, ‘ラーメン’);
console.log( window.localStorage.getItem(‘food’) );
File API●コンピュータ上のファイルを読み込むためのAPI
●使用例：ここにファイルをドロップ
JavaScript でのローカル ファイルの読み込み - HTML5 Rockshttp://www.html5rocks.com/ja/tutorials/file/dndfiles/
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/
第３のモバイル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/331031989534
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-tizen-developer-conference/
“HTML5” についていくために
ついていく上での問題点
●技術が広すぎる・多すぎる●新技術がどんどん登場する
● API
●大量のJavaScriptライブラリ● Backbone.js, D3.js, Three.js, ◯◯.js, ...
どうすれば…(́・ω・｀)
１．とにかく興味を持つ
２．とにかくコードを書く
でも、コードを書くの時間かかるよ…(́・ω・｀)
もう手遅れ？間に合わない？(́・ω・｀)
３．高速にコードを書こう
そこで
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.10/
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ファイルを配置● styles/ : CSSファイル
導入されているフレームワーク・ライブラリ
● HTML5 Boilerplate●Modernizr● RequireJS● Bootstrap
HTML5 Boilerplate● HTML5でWeb制作を行うときのベストプラクティスを集めたテンプレ● Normalize.css
● Google Analytics導入用タグ
● IE対応
●詳しくは公式を見てくださいhttp://html5boilerplate.com/
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 cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>
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
require.config({ paths: { d3: '../bower_components/d3/d3' }, shim: { d3: { exports: 'd3' } }});
main.js におまじない追加
※ RequireJSのD3.js読み込み設定
define(['d3'], function (d3) {
});
app.js におまじない追加
※ RequireJSのD3.js読み込み設定
define(['d3'], function (d3) {
});
app.js におまじない追加
※ 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 { .inner { a { text-decoration: none; &:hover { text-decoration: underline; } } }}
リリース
$ grunt build
リリース時にやってくれること
● JavaScriptとCSSの最適化● 結合と圧縮
●画像の最適化●リリースに必要なファイルのみをdist/ ディレクトリに移動
まとめ● “HTML5” はもう使える／使われている●技術の範囲・種類が多すぎてついていくのが大変
●興味を持ってとにかくコードを書くことが重要
● Yeomanで開発・学習効率アップ
まだ間に合う！追いつける！
おしまい
