html5 アプリ開発

Download HTML5 アプリ開発

If you can't read please download the document

Upload: tomomasakura

Post on 16-Apr-2017

1.414 views

Category:

Technology


0 download

TRANSCRIPT

HTML5

HTML5

HTML5 Web HTML5 JavaScript (!)

HTML5 Web Web HTML5

PHP JavaScriptHTML/CSS

PHP JavaScriptHTML/CSS

JavaScript

HTML5 Web (BaaS )HTML5

BaaSJavaScriptHTML/CSS

BaaS ...!

HTML5

JavaScript ...

JavaScript

?

...

HTML5

Single Page Application (SPA) !

!

!

HTML5 API !

Single Page Application (SPA) !

!

!

HTML5 API !

SPA

Single Page Application (SPA) HTML

SPA

/HTML/HTML Web HTML

HTML

HTML

SPA

ID: adi00348: masakura: codeArts

: masakura ID:adi00348 :masakura :codeArts

etc...

...

SPA

/SPA

HTML

HTML
HTML

HTML
HTML

/

: masakura ID:adi00348 :masakura :codeArts

SPA

{ id: adi00348, name: masakura, company: codeArts }/JSON HTML(JavaScript)

ID:adi00348 :masakura :codeArts

JavaScript

etc...

SPA

SPA URL ? History API

HTML5 Conference 2015 in !

https://www.youtube.com/watch?v=ejlb8CX2UgM

5:01:30

SPA

SPA

GitHub SPA SPA

SPA

Single Page Application (SPA) !

!

!

HTML5 API !

JavaScript

!

SPA !

MV*

?

!

Backbone.js

AngularJS

!

!

......

Single Page Application (SPA) !

!

!

HTML5 API !

...

https://developers.google.com/web/tools/chrome-devtools/

JavaScript

Single Page Application (SPA) !

!

!

HTML5 API !

Google JavaScript Style Guidehttp://google.github.io/styleguide/javascriptguide.xml

JavaScript

JSHint + JSCS ESLint ! !

?

var document = 'hoge';

console.log(document);

#document (document )...

Strict

https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode

'use strict;' !

'use strict';

var document = 'hoge';

console.log(document);

!

Strict !

Strict !...

ECMAScript 5

(function () { 'use strict';

// ...})();

?

title B

// B var title = 'hogehoge';

var displayMyTitle = function () { alert(title);};

// A var title = 'html5jk #1'

var displayTitle = function () { alert(title);};

$(document).on('click', '#button1', function () { displayTitle();});

// B (function () { var title = 'hogehoge';

var displayMyTitle = function () { alert(title); };})();

// A (function () { var title = 'html5jk #1'

var displayTitle = function () { alert(title); };

$(document).on('click', '#button1', function () { displayTitle(); });})();

Windows ! UTF-8 (BOM )

LF

Atom Sublime Text

Single Page Application (SPA) !

!

!

HTML5 API !

HTML5 API

()

HTML5 API

!WebRTC !By ()

HTML5 API

!By ()

HTML5 API

()By ()

HTML5 API

...By ()

HTML5 API

By

HTML5 API

...By

HTML5 API

!

HTML5 API

SkyWay PeerJS !HTML5 Conference !

HTML5 API

...By

HTML5 API

HTML5 API !By

HTML5 API

HTML5 API

HTML5 API

HTML5 API

Extensible Web https://extensiblewebmanifesto.org/ja/

HTML5 API

HTML5 API

HTML5 API ()

HTML5 API

=

HTML5 API ()

HTML5 API

WebRTC PeerJS SkyWay

WebGL Three.js

WebComponents Polymer

DOM jQuery

HTML5 API

...

Single Page Application (SPA) !

!

!

HTML5 API !

Can I use? !

HTML5 API ...

Chrome Canary

Firefox Developer Edition

SPA MV* !

!

JavaScript

HTML5 API

(?) !

!