html5 開発環境の紹介
TRANSCRIPT
HTML5
HTML5 ?
file://
HTML5
http-server Bower
Yeoman
Plunker
http-server Bower
Yeoman
Plunker
!
Apache
!
Node.js http-server HTML5 Node.js
!npm install -g http-server
Mac sudo
mkdir webapp1 webapp1
cd webapp1 webapp1
echo test > index.html test
http-server
http://localhost:8080 !
$ http-server Starting up http-server, serving ./ on: http://0.0.0.0:8080Hit CTRL-C to stop the server
test OK!
index.html !
!
http-server -a 127.0.0.1 -p 9001
9001
Ruby PHP Python
http-server Bower
Yeoman
Plunker
Bower
Bower HTML5
Backbone.js Underscore.js
Bower
Bower
Bower Git Git git --version OK!
$ git --versiongit version 2.1.4
Bower
Windows Git for Windows https://git-for-windows.github.io/
Bower
Mac Xcode git --version
Bower
git --version OK
!npm install -g bower
Bower
bower init
$ bower init? name: project1? version: 0.0.0? description: ? main file: ? what types of modules does this package expose? ? keywords:
...
Bower
jQuery bower install --save jquery
bower_components !
$ bower install --save jquerybower cached git://github.com/jquery/jquery.git#2.1.4bower validate 2.1.4 against git://github.com/jquery/jquery.git#*bower install jquery#2.1.4
jquery#2.1.4 bower_components/jquery
Bower
index.html script
Document Bower alert($('h1').text());
Bower
Bower
bower.json jquery !
{ "name": "project1", "version": "0.0.0",
"dependencies": { "jquery": "~2.1.4" }}
Bower
bower_coomponents !
bower install
bower.json
$ bower installbower cached git://github.com/jquery/jquery.git#2.1.4bower validate 2.1.4 against git://github.com/jquery/jquery.git#~2.1.4bower install jquery#2.1.4
jquery#2.1.4 bower_components/jquery
Bower
? ...
bower.json bower_components !
Bower
Bower
index.html Yeoman
bower list
bower search underscore
bower cache clean !
http-server Bower
Yeoman
Plunker
Yeoman
!
?
Plunker ()
Plunker
Plunker
Plunker
!
Plunker
http://plnkr.co/ Sign with Github !
Plunker
GitHub
Plunker
OK!
Plunker
Launch the Editor !
Plunker
Plunker
private plunk Private URL
Plunker
Run
Plunker
(?)
Plunker
jquery ...!
Plunker
Plunker
Add
Plunker
!
Plunker
scripts.js JavaScript !
(function () {
'use strict';
alert('Hello!');})();
Plunker
Run !
Plunker
!
Plunker
!
Plunker
Plunker
!
Plunker
Browse Plunks !
Plunker
!
Plunker
...
Plunker
Fork
Plunker
Plunker
?
!
?
!
!
!
JSFiddle
CodePen
jsdo.it
JSFiddle
https://jsfiddle.net/...
CodePen
http://codepen.io/HTML/CSS/JavaScript
jsdoit
http://jsdo.it/...
!
!
!
(...)
Plunker ! !
!