html5 開発環境の紹介

Download HTML5 開発環境の紹介

If you can't read please download the document

Upload: tomomasakura

Post on 08-Apr-2017

2.306 views

Category:

Technology


1 download

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 ! !

!