Web5-iwate

  • 790 views
Uploaded on

HTML5とか勉強会 in IWATE 2014 で使用したスライド …

HTML5とか勉強会 in IWATE 2014 で使用したスライド
http://www.html5j-tohoku.org/

More in: Internet
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
790
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
8
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 8FC ٦8FC׾㢌ִ׷אך䪮遭٦ CZ5PNPZB"TBJ EZOBNJT
  • 2. BCPVUNF 5PNPZB"TBJ EZOBNJT  .P[JMMB+BQBO .PCJMF&DPTZTUFN.BOBHFS 5FDIOJDBM.BSLFUJOH &WBOHFMJTU  EZOBNJTNP[JMMBKBQBOPSH ! $PNNVOJUZ EZOBNJTKQ !EZOBNJUUFS GBDFCPPLDPNEZOBNJT
  • 3. כׄ׭ח ➙㔐כ㔳װ؝٦سָ㼰ז׭דׅկ ⦐ⴽ䪮遭כ♨㻝ח铡僇׃תׇ׿կ 莆㄂֮׷ֿה⹧䩛ח鑧׃תׅկ 劤勻涸ז)5.-ך眔㔲㢩דׅկ أٓ؎س⡲䧭꟦חさ׏׋
  • 4. 劤傈ךزؾحؙ /FUXPSL $PNQPOFOUT 8PSLPX -BOHVBHFT 8FC"1*T 94VNNBSZ
  • 5. /FUXPSL
  • 6. طحزٙ٦ָؙ㢌׻׷ ؟٦غה׌ֽ鸐⥋ׅ׷儗➿כ穄✪ ؙٗأؔٔآٝ ،فٔ꟦ 鸐⥋װ ؙٓ؎،ٝز꟦ 11 鸐⥋ָ兛鸐ח 欽鷿ח䘔ׄג)551⟃㢩׮鼅䫛肇ח 鋅蕱׃ְعحؙכ如ղה♶銲ח
  • 7. /FUXPSL4QFDT %FOFEJO)5.- 4FSWFS4FOU&WFOUT 8FC4PDLFU  QPTU.FTTBHF PUIFS8$TQFDT 8FC35$ 3"84PDLFU 1VTI 4FSJBM  #MVFUPPUI .FTTBHJOH /FU*OGP BOENPSF $41 )551 41%: 26*$
  • 8. ⿽倯ぢ鸐⥋ 8FC4PDLFU ؟٦غהך⿽倯ぢ鸐⥋ 鯪ꆀر٦ة׾䩛鯪ח鷏「⥋ وٕثًر؍،ر٦ةװؔـآؙؑز ךٔ،ٕة؎ي鸐⥋חכ♶黝 ؟٦غהך鸐⥋儗꟦כنزٕطحؙ OPUF $PNFU穄✪կ 44&כ*&劢㹋鄲ד㨣ת׵זְ IUUQXXXXPSH53XFCTPDLFUT
  • 9. ؙٗأؔٔآٝٔا٦أⰟ剣 $SPTT0SJHJO3FTPVSDF4IBSJOH ➭سً؎ַٝ׵"KBY鸐⥋׾鏩〳 䖞勻ך"KBYכず♧ؔٔآٝ فٗ ز؝ٕծسً؎ٝծه٦ز ꣲ㹀 4BNF0SJHJO1PMJDZ  "DDFTT$POUSPM"MMPX0SJHJO )551 قحتד僇爙ׅ׷ +40/1عحؙכ♶銲ח IUUQXXXXPSH53DPST
  • 10. OPUF+40/1 +40/׾ؙٗأؔٔآٝד DBMMCBDL MFTTFSQBOEB^ ך״ֲח ؝٦ٕغحؙꟼ侧ח+40/ر٦ة׾ 㙵׭鴥׿׌+4׾TDSJQUةؚד铣׫鴥 ׬ TDSJQUTSDIUUQPUIFSKTPOQKT WBSEBUB@GSPN@PUIFS GVODUJPODBMMCBDL KTPO    EBUB@GSPN@PUIFSKTPO ^ إُؗٔذ؍涸חכ鏩ׁ׸זְ
  • 11. ؙٗأؔٔآًٝحإ٦آ QPTU.FTTBHF ؟٦غ׾穗歋׃זְٗ٦ٕؕדך سً؎ٝ꟦鸐⥋ָ〳腉 㛇劤涸ז،فٔ꟦鸐⥋䩛媮 MPDBUJPOIBTIعحؙ♶銲 IUUQXXXXPSH53XFCNFTTBHJOH
  • 12. OPUFMPDBUJPOIBTIعحؙ JGSBNFךTSD㾩䚍׾⟃꣬׌ ֽ⹛涸ח剅ֹ䳔ִ׷ MPDBUJPOIBTI⦼ָ㢌׻׷ֿ הד؎كٝزה׃גⴻ倖ׅ׷ ⿽倯ぢד꬗⦜זⳢ椚ָ䗳銲˘
  • 13. وٕثًر؍،鸐⥋ .FEJB$BQUVSF4USFBN 8FC35$ַ׵HFU6TFSNFEJBָⴓꨄ 갈㡮װؽرؔךٍؗفثٍ 8FC35$ وٕثًر؍،ر٦ةװغ؎شٔ ر٦ةךؙٓ؎،ٝز꟦11鸐⥋ ؽرؔثٍحزװوٕثفٖ؎َ٦ ؜٦يזוח⢪׻׸׷ IUUQXXXXPSH53NFEJBDBQUVSFTUSFBNTIUUQXXXXPSH53XFCSUD
  • 14. ٗ٦ٖكٕ 5$14PDLFU 6%14PDLFU ه٦ز׾䭷㹀׃ג⟣䠐ך鸐⥋ 8FC؟٦غה׃ג⹛⡲ׅ׷،فٔװ 㹺ꨵה鸐⥋ׅ׷،فٔ׮㹋植 8$דכ3BX4PDLFU"1*ָ陽锷ׁ ׸גְ׷ָ'JSFGPY04װ$ISPNF04 ך㹋鄲כ殯ז׷ֿהח岣䠐 #MVFUPPUI 64# 湫䱸ع٦سؐؑ،ה鸐⥋ IUUQXXXXPSH53SBXTPDLFUT
  • 15. فٗز؝ٕ䲿周 41%: 26*$ ⽃♧5$1䱸竲ד醱侧ؿ؋؎ٕךؙٔؒ أز׾〳腉ח 26*$כ6%1  غ؎شٔفٗز؝ٕծ⮚⯓䏝➰ֹ قحت㖇簭כ植㖈搀⸬⻉⚥ ず♧سً؎ٝח㢳侧ؙٔؒأزׅ׷ה ֹ剣⸬׌ָؙٔؒأز侧⟃♴װسً ؎ٝⴓ侔׃ג׷㜥さ剣⸬דזְ $444QSJUFعحؙװ+4穠さזו ؙٔؒأز侧⵴幾ָ♶銲ח IUUQXXXDISPNJVNPSHTQEZTQEZQSPUPDPM
  • 16. )551فٗز؝ٕ何鎍 )551 41%:זוך䲿周׾驎תִג)551 ך姻䒭ז䖓竰➬圫瘻㹀⚥ ؟٦غفحءُ堣腉ؙٔؒأزׁ ׸גזֻה׮؟٦غַ׵鷏׶אֽג ✲⵸חٍؗحءׇׁُ׷ )1"$,הְֲقحت㖇簭 فٗز؝ٕ鼅䫛׃זָ׵؟٦غ ׾甧ג׷儗➿חז׏גֹ׋ IUUQEBUBUSBDLFSJFUGPSHXHIUUQCJT
  • 17. $PNQPOFOUT
  • 18. )5.-8FC$PNQPOFOUT )5.-דכ EJWTQBO㖑柰׾鍑嶊ׅ׷TFDUJPO BSUJDMF OBW ًر؍،銲稆BVEJP WJEFPזו倜׃ְ銲稆׾ 剑㼭ꣲח鷄⸇㹀纏׃׋ 6*ؿٖ٦يٙ٦ؙה׃גכ顆䓲ה鎉ֲ״׶㨣 ת׏גׅ׵ְזְկ ֿךل٦أד/BUJWFفٓحزؿؓ٦ي⚛חז ׷תד➬圫⡲׏ג׋׵ꫬ僰ָ穄׻׷կկկ )5.-ך銲稆כ➬圫דזֻٓ؎ـٓٔה ׃ג㟓װׇ׷״ֲח׃״ֲ )5.-➬圫חז׷הְֲ䠐㔳דכ֮׶תׇ׿
  • 19. 8FC$PNQPOFOUT 4IBEPX%0.
  • 20.  %0.הأة؎ٕ׾ؕفإٕ⻉׃ $VTUPN&MFNFOUT
  • 21.  杝荈)5.-銲稆ה׃ג䭁䓸㹀纏׃ )5.-*NQPSUT ػح؛٦آה׃גⱄⵃ欽〳腉ח IUUQTHJUIVCDPNXDXFCDPNQPOFOUT
  • 22. 4IBEPX%0. 銲稆ⰻך%0.خٔ٦׾ꦀ誊 4IBEPX)PTU鋵خٔ٦ח婍׷銲稆 4IBEPX5SFFIPTUך؟ـخٔ٦ 4IBEPX3PPU؟ـخٔ٦ךٕ٦ز ؟ـخٔ٦חכ4IBEPX)PTUַ׵ ך׫،ؙإأ〳腉חז׷ )PTUך㶨銲稆כ*OTFSUJPO 1PJOUח%JTUSJCVUJPOׁ׸׷ IUUQXXXXPSH53TIBEPXEPN
  • 23. EPDVNFOUUSFF5SFFPG5SFFT IUUQXXXXPSH53TIBEPXEPN
  • 24. %JTUSJCVUJPO*OTFSUJPO1PJOU
  • 25. $VTUPN&MFNFOUT YFMFNFOU 杝荈ך)5.-銲稆׾㹀纏 傀㶷銲稆׾䭁䓸׃ג銲稆׾涫ꐮ EPDVNFOUSFHJTUFS IUUQXXXXPSH53DVTUPNFMFNFOUT
  • 26. SFHJTUFSדؕأةي銲稆㹀纏 var proto=HTMLParagraphElement.prototype ! document.register('x-foo', { prototype: Object.create(proto, { firstMember: { get: function() { return "foo"; }, enumerable: true, configurable: true }, // specify more members // ... }) });
  • 27. )5.-*NQPSUT MJOLSFMJNQPSU ISFGDPNQPOFOUTIUNM $VTUPN&MFNFOU؎ٝه٦ز 杝荈銲稆ך㹀纏׾ؿ؋؎ٕחⴓꨄ ٓ؎ـٓٔה׃ג盖椚׾㺁僒ח IUUQXXXXPSH53IUNMJNQPSUT
  • 28. OPUF5FNQMBUF銲稆 ذٝفٖ٦ز欽銲稆 ٗ٦س儗ח䲽歗٥Ⳣ椚ׁ׸זְ TDSJQUזו׮㹋遤ׁ׸זְ +4ַ׵DMPOF JOTFSU׃ג⢪ֲ 粸׶鵤׃⢪ֲ)5.-ػة٦ٝ׾ +4דכזֻ )5.-⚥ח㙵׭鴥׫ ؝ًٝز أؙٔفز ذٝف ٖ٦زعحָؙ♶銲ח IUUQXXXXPSHIUNMXHESBGUTIUNMNBTUFSTDSJQUJOHIUNM
  • 29. UFNQMBUF <script> var data = [ { name: 'Pillar', color: 'Ticked Tabby', legs: 3 }, { name: 'Hedral', color: 'Tuxedo', legs: 4 }, ]; </script> <table> <tr> <th>Name <th>Color <th>Legs <template id="row"> <tr><td><td><td> </template> </table> <script> var template = document.querySelector('#row'); for (var i = 0; i < data.length; i += 1) { var cat = data[i]; var clone = template.content.cloneNode(true); var cells = clone.querySelectorAll('td'); cells[0].textContent = cat.name; cells[1].textContent = cat.color; cells[2].textContent = cat.legs; template.parentNode.appendChild(clone); } </script> IUUQXXXXPSHIUNMXHESBGUTIUNMNBTUFSTDSJQUJOHIUNM
  • 30. <head> <script src="platform.js"></script> <link rel="import" href="paper-tabs.html"> ... </head> <body> ... <paper-tabs selected="0" noink nobar> <paper-tab>ITEM ONE</paper-tab> <paper-tab>ITEM TWO</paper-tab> <paper-tab>ITEM THREE</paper-tab> </paper-tabs> ... </body>
  • 31. 垥彊⻉׾䖉א䗳銲כזְ ! QMBUGPSNKTד1PMZMM 劢㹋鄲ד׮1PMZM֮׶1M 1PMZNFS׮#MJDL׮1PMZGJMMחכⰟ鸐דQMBUGPSNKT׾ⵃ欽ׅ׷
  • 32. 1PMZNFS #MJDL 1PMZNFS (PPHMF䲿⣘ך垥彊涸ז6*إحز 䖓倯✼䳔1PMZM QMBUGPSNKT 䲿⣘ .BUFSJBM%FTJHOח׮ⵃ欽〳腉 #MJDL .P[JMMB䲿⣘ך.JO6*إحز ַ׵כQMBUGPSNKT׾䱰欽 IUUQXXXQPMZNFSQSPKFDUPSHIUUQNP[CSJDLHJUIVCJP
  • 33. .BUFSJBM%FTJHO فٓحزؿؓ٦يװرغ؎أ ؟؎ؤח⣛׵׆窟♧ׁ׸׋⡤ 꿀׾㹋植ׅ׷㛇燉ءأذي ֿך湡涸׾㹋植ׅ׷׋׭ 8FCד׮"OESPJEד׮ו׿ זرغ؎أד׮ず圫ךِ٦ؠ ⡤꿀׾知⽃ח䲿⣘〳腉חׅ׷ IUUQXXXHPPHMFDPNEFTJHOTQFDNBUFSJBMEFTJHOJOUSPEVDUJPOIUNM
  • 34. /BUJWFהずׄ⡤꿀׾8FCד /BUJWFהずׄ6*׾1PMZNFSד "OESPJEזו׮׫׿ז8FCד
  • 35. 8PSLPX
  • 36. .PEFSO8PSLPXX ꧵䕎欰䧭       
  • 37.  ! ؽٕس     PS  
  • 38.  ! ػح؛٦    PS آ盖椚       IUUQZFPNBOJP
  • 39. ZP꧵䕎欰䧭خ٦ٕ OQNJOTUBMMHZP ZPQSPKFDU ֮׵ײ׷꧵䕎ָⰟ剣ׁ׸ג׷ "OHVMBS #BDLCPOF &NCFS KFLZJMM CPPUTUSBQ 1PMZNFS NPCJMF XFCBQQ DPSEPWB ⡦ַ׾ئַٗ׵⡲׷ךכ㣐鋉垷 فٗآؙؑز׌ֽח׃ת׃׳ֲ IUUQZFPNBOJP
  • 40. ZP > yo [?] 'Allo dynamis! What would you like to do? Get me out of here! ! ! _-----_ | | .---------------------------------------. |--(o)--| | Bye from us! Chat soon. | `---------´ | | ( _´U`_ ) | The Yeoman Team | /___A___ | https://github.com/yeoman/yeoman#team | | ~ | '---------------------------------------' __'.___.'__ ´ ` |° ´ Y ` :&0."/ֶׁׄ׿ָ׃׳׏׍ױֲ⳿גֻ׷ֶ蘠湡ז؝وٝسٓ؎ٝخ٦ٕ
  • 41. HVMQؽٕسأؙٔفز OQNJOTUBMMHMPCBMHVMQ HVMQUBTLPUIFSUBTL NBLF BOUך8FC晛 (SVOU׮ず圫׌ָ(VMQؔأأً ⚺銲זٓ؎ـٓٔכ(VMQד׮ 䲧׏גֹ׋׃铣׫剅ֹ׃װְׅ 搀׃דꟚ涪כ罋ִ׵׸זְ
  • 42. HVMQػ؎فדⳢ椚׾籬ּ var gulp = require('gulp'); var coffee = require('gulp-coffee'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var sourcemaps = require('gulp-sourcemaps'); var paths = { scripts: ['client/js/**/*.coffee'] }; ! gulp.task('scripts', function() { return gulp.src(paths.scripts) .pipe(sourcemaps.init()) .pipe(coffee()).pipe(uglify()) .pipe(concat('all.min.js')) .pipe(sourcemaps.write()) .pipe(gulp.dest('build/js')); }); ! gulp.task('watch', function() { gulp.watch(paths.scripts, ['scripts']); }); ! gulp.task('default', ['watch', 'scripts']); IUUQTHJUIVCDPNHVMQKTHVMQ
  • 43. CPXFSػح؛٦آ盖椚 OQNJOTUBMMHCPXFS CPXFSJOTUBMMQBDLBHF CPXFSVQEBUFQBDLBHF ػح؛٦آ盖椚 ٓ؎ـٓٔך⣛㶷䚍盖椚 OQNד׮ְְֽו#PXFSד׃׳ ٓ؎ـٓٔ䩛⹛盖椚כ穄✪ IUUQCPXFSJP
  • 44. ؔآ؟ٝה궪׫אאꅿ둷錁㻊 ⢪׏גזְ ֮׶䖤זְ
  • 45. -BOHVBHFT Draft Ecma/TC39/2013/0xx ECMA-262 6th Edition / Draft November 8, 2013 ECMAScript Language Specification Reference number ECMA-123:2009 © Ecma International 2009 Draft Report Errors and Issues at: https://bugs.ecmascript.org Product: Draft for 6th Edition Component: choose an appropriate one Version: Rev 21, November 8, 2013 Draft
  • 46. -BOHVBHFT&WPMVUJPO &$."4DSJQUUI UI Ꟛ涪׃僒ְٌتٝז圓俑 $MBTT .PEVMF 1SPNJTF׾㼪Ⰵ ꬊず劍Ⳣ椚זו׮剅ֹװֻׅ ꫼涸嗚鏾 㹋遤儗דכזֻ؝ٝػ؎ ٕ儗חדֹ׷׌ֽؒٓ٦嗚⳿  BTNKT 넝鸞㹋遤〳腉ז鎸岀׾㹀纏 Draft Ecma/TC39/2013/0xx ECMA-262 6th Edition / Draft November 8, 2013 Reference number ECMA-123:2009 © Ecma International 2009 http://wiki.ecmascript.org/doku.php?id=harmony:harmony ECMAScript Language Specification Draft Report Errors and Issues at: https://bugs.ecmascript.org Product: Draft for 6th Edition Component: choose an appropriate one Version: Rev 21, November 8, 2013 Draft
  • 47. 実装・対応状況 SpiderMonkey がリード V8 がそれに続く JavaScriptCore や IE は限定的 先行するところも一応ある Traceur は結構対応してる TypeScript は限定的な対応だが JavaScript に変換したコードが 綺麗なのがステキ
  • 48. ECMAScript 5th にコンパイル Traceur Compiler ES Harmony からのコンパイル用 https://github.com/google/traceur-compiler TypeScript ES Harmony の一部+独自拡張 http://typescriptlang.org/ たまに紹介されてる Harmonizr や Six は開発終了したっぽい
  • 49. default & rest parameter モダンな言語では当然の機能 だが Firefox 以外は未サポート default parameter 引数のデフォルト値を設定 rest parameter 残りの引数を配列で受け取る
  • 50. default parameter e = document.body; // 何か適当な要素 function setBackgroundColor(element, color='orange') { element.style.backgroundColor = color; } setBackgroundColor(e); // オレンジに setBackgroundColor(e, 'blue'); // 青に setBackgroundColor(e, undefined); // オレンジに ! // デフォルト値は呼び出し毎に生成される // 同一オブジェクトが渡される Python などとは違う function getObject(o={}) { return o; } getObject() == getObject() // -> false http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values
  • 51. rest parameter function f(a, b, ...args) { return args; } f("IE", "Chrome"); // -> [] f("IE", "Chrome", "Firefox"); // -> ["Firefox"] ! // rest arguments は Array のメソッドが使える // [].slice.call(arguments) ハックとか不要に function sortRestArgs(...args) { var sortedArgs = args.sort(); return sortedArgs; } http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters
  • 52. ブロックスコープ (let, const) ブロックスコープ変数と定数 IE11 でもサポート! Safari は const でも変数になる const は仕様では let 同様ブロッ クスコープの定数だが現在の実装 は var 同様のブロックスコープ
  • 53. let { // let 定義: ブロックスコープ let a = 1, b = 10; // let 式・文: let (...) に続く式・文中だけで有効 let (a = 100, c = 300) console.log(a); // -> 100 // for 文などでの let for (let a=0; a<3; a++) { console.log(a+b); // -> 10, 11, 12 } console.log(a); // -> 1 } console.log(a); // × ReferenceError: a is not // defined
  • 54. Class 待望の Class です プロトタイプベース OOP の記法に 馴染めない貴方もこれで安心
  • 55. Class の利用例 // クラスベース OOP でよく見る感じ class Animal { constructor(name) { this.name = name; this.hungry = true; } eat() { this.hungry = false; } run() { this.hungry = trye; } }
  • 56. Class - extends // 派生クラスの定義がシンプル class LesserPanda extends Animal { constructor(name, tail) { super(name); this.tail = tail; } }
  • 57. Arrow Function コールバックに便利な関数 シンプルに書ける 矢印なんか格好いい 内外で this が固定される Firefox 22~ 実装 http://d.hatena.ne.jp/teramako/20130321/p1
  • 58. Arrow Function // return するだけのコールバックがシンプルに [1,2,3].map(x => x * x); // ES5 ではこう書く必要があった: // [1,2,3].map(function (x) { return x * x; }); ! // 引数が 1 つ以外の場合は引数を () で括る setInterval(() => { alert("HEY! 提督ぅー!alertしてもイイけどサー、時間 と場所をわきまえなヨー!"); }, Math.random()*10*1000); ! // n! (nの階乗) を求める関数もシンプルに var factorial=((f=n=>n>1 ?n*f(n-1):1)=>(f))(); factorial(10); // 3628800 http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax
  • 59. Arrow Function における this // this は矢印関数を囲むスコープのものにバインド // コールバック利用時に self=this とか不要になる function Person(){ this.age = 0; setInterval(() => { this.age++; // this は Person オブジェクト }, 1000); } var p = new Person(); ! // 注: strict mode でも this はレキシカルに bind // 済みとして振る舞うので undefined にならない https://developer.mozilla.org/docs/Web/JavaScript/Reference/arrow_functions
  • 60. BTNKTהכ +BWB4DSJQUך؟ـإحز➬圫 傀㶷+BWB4DSJQUؒٝآٝד⹛⡲ 넝䏝ח剑黝⻉〳腉זչػة٦ٝպ ✲⵸؝ٝػ؎ٕ〳腉 㢌侧װ鎘皾穠卓ך㘗כⰋג㔿㹀 㹋遤儗ך㘗然钠װ؝ٝػ؎ٕ♶銲 ؿ؋؎ٕװꟼ侧⽃⡘ד剣⸬⻉ ⱍ걧דVTFBTN㹑鎉 'BTU1BSUT ך刿ח♧鿇 ׾僇俑⻉٥㹀纏׃׋׮ךIUUQBTNKTPSH
  • 61. BTNKTך鏣鎘䙼䟝 怴皾穠卓׾㔿㹀㘗ח 㘗ך僇爙 "OOPUBUJPO ׮傀㶷 +BWB4DSJQUך眔㔲ⰻד遤ֲ 5ZQFE"SSBZדًٌٔ盖椚 ؖ٦كآ؝ؙٖءّٝ׾㔐鼘 堣唒欰䧭ָ⵸䲿ך鏣鎘 $鎉铂זוַ׵㢌䳔ׅ׷㼎韋 $鎉铂ח鷄ְאֻ׋׭ך鏣鎘IUUQBTNKTPSH
  • 62. BTNKTָ׮׋׵ׅ׮ך 8FC׾/BUJWFך鸞䏝ח $SBOL4IBGUװ*PO.POLFZך44"剑黝 ⻉+*5דך剑黝⻉⸬卓׾然㹋ַאؔ٦ غ٦قحسזֻ⢪ִ׷ ✮庠〳腉זػؿؓ٦وٝأ 农럀濼 ت٦ذ؍عحؙ חֶⴽ׸ 㢳媮+*5ך剑黝⻉ٖكָٕ✮庠♶腉ד 鸞䏝ָ✮庠דֹזְ㉏겗ָזֻז׷ ($ח״׷⨡姺儗꟦ָ涪欰׃זֻז׷ 'BTU1BSUTד֮׷BNTKTז׵然㹋ח鸞ֻIUUQBTNKTPSH
  • 63. $鎉铂׾--7.ד؝ٝػ؎ٕ $ַ׵*3 ⚥꟦鎉铂 ח㢌䳔 *3$16ꬊ⣛㶷ך،إٝـٔ 㣐⼱ך剑黝⻉Ⳣ椚כֿֿד遤ֲ DMBOHָ遤ֲךכֿךⳢ椚 --7.*3ַ׵/BUJWFח㢌䳔 Y"3.זוך堣唒铂׾欰䧭 $鎉铂ا٦أ --7.*3 /BUJWF$PEF
  • 64. $鎉铂׾+BWB4DSJQUח؝ٝػ؎ٕ $ַ׵*3 ⚥꟦鎉铂 ח㢌䳔 --7.*3ַ׵+4ח㢌䳔 &NTDSJQUFOד+4 BTNKT ח 㘗㔿㹀ד"05Ⳣ椚〳腉ז؝٦س +4׾/BUJWFח㢌䳔 㘗㔿㹀؝٦س׾넝鸞ח㢌䳔㹋遤 ؎ٝأز٦ٕ儗ח✲⵸㢌䳔׮〳腉 $鎉铂ا٦أ --7.*3 +BWB4DSJQU /BUJWF$PEF
  • 65. $鎉铂ח鷄ְאְגֹ׋ ! ! ! ! ! ! ! C 言語 (clang) 基準の実行時間 婁וךⳢ椚ד$鎉铂 DMBOH ך⦓⟃ⰻך儗꟦ $鎉铂؝ٝػ؎ٓ꟦ך鸞䏝畸✯חⰅ׶㨣׭׋ IUUQTIBDLTNP[JMMBPSHHBQCFUXFFOBTNKTBOEOBUJWFQFSGPSNBODFHFUTFWFOOBSSPXFS XJUIGMPBUPQUJNJ[BUJPOT 高速
  • 66. BTNKTVQEBUFT 事前コンパイル (AOT) 余ってる CPU スレッドで AOT アプリではインストール時に AOT してコンパイル済みネイティブコー ドをキャッシュ 単精度演算など専用関数定義 Math.fround, Math.imul など ES6 SIMD 命令などは取組中 4 データ同時処理で 300% 高速化 6QEBUFE
  • 67. 8FC"1*T
  • 68. 䚈䭁㣐ׅ׷8FC"1* 8FC04ך鹌⻉הⰟח䚈䭁㣐 'JSFGPY04 $ISPNF04 8FC04 8FCط؎ذ؍ـז1MBUGPSN 垥彊⻉ה✼䳔䚍חכ铬겗 'JSFGPY04כ㛇劤涸ח垥彊⻉ 8JOEPXTכקר垥彊⻉׃זְ ⯓畭8FC"1*Ꟛ涪ך䌢דׅי
  • 69. 鸐濼 1VTI  ! ًؕٓ ! .BSLFUQMBDF ! '.ٓآؔ 04橆㞮鏣㹀 م٦ي㠖秵 ꨵ鑧ծ4.4
  • 70. 鸐濼 1VTI  ! ًؕٓ ! .BSLFUQMBDF ! '.ٓآؔ 04橆㞮鏣㹀 م٦ي㠖秵 ꨵ鑧ծ4.4 طحزծꨵ寑 ! 鸬窃䌘 ! ⹛歗갈嚂 ! 鸐⥋ꆀ盖椚 ! ،فٔך盖椚 ،فٔ꟦鸬䵿 ـٓؐؠ
  • 71. 鸐濼 1VTI  ! ًؕٓ ! .BSLFUQMBDF ! '.ٓآؔ 04橆㞮鏣㹀 م٦ي㠖秵 ꨵ鑧ծ4.4 طحزծꨵ寑 ! 鸬窃䌘 ! ⹛歗갈嚂 ! 鸐⥋ꆀ盖椚 ! ،فٔך盖椚 ،فٔ꟦鸬䵿 ـٓؐؠ ׅץג8FC䪮遭ד
  • 72. 8FC"1* 'JSFGPY04 鸐⥋הطحزٙ٦ؙ /FUXPSL*OGPSNBUJPO ..4 .PCJMF$POOFDUJPO /FUXPSL 4UBUT Serial 4JNQMF1VTI 4.4 4ZTUFN9)3 5$14PDLFU  5FMFQIPOZ UDB Diagram Socket 7PJDFNBJM 8J'J *OGPSNBUJPO رغ؎أװإٝ؟٦ⵖ䖴 "NCJFOU-JHIU4FOTPS #BUUFSZ4UBUVT #MVFUPPUI $BNFSB  %FWJDF0SJFOUBUJPO '.3BEJP (FPMPDBUJPO /'$ 1PJOUFS -PDL 1PXFS.BOBHFNFOU Print 1SPYJNJUZ4FOTPS 4DSFFO 0SJFOUBUJPO USB 7JCSBUJPO WebCL 8FC(- WebGL2 ♴简岣湡ծ؎ةٔحؙ劢㹋鄲PS䲿周ծIUUQTXJLJNP[JMMBPSH8FC"1*
  • 73. 8FC"1* 'JSFGPY04 ر٦ةך盖椚הⰟ剣 "SDIJWF DeviceIndexedDB 'JMF)BOEMF *OEFYFE%#  $POUBDUT %BUB4UPSF %FWJDF4UPSBHF USB File Reading ،فٔ盖椚ה،فٔ꟦鸐⥋ "QQT *OUFS"QQ$PNNVOJDBUJPO 1FSNJTTJPOT 8FC "DUJWJUJFT WebSocket Over Apps ءأذي "MBSN #BDLHSPVOE4FSWJDFT #SPXTFS *EMF ,FZCPBSE *.& -PH /PUJDBUJPOT 1BZNFOU 3FTPVSDF-PDL  4FUUJOHT 5JNF$MPDL ♴简岣湡ծ؎ةٔحؙ劢㹋鄲PS䲿周ծIUUQTXJLJNP[JMMBPSH8FC"1*
  • 74. 8FC"1* $ISPNF04 ر٦ة 'JMF4ZTUFN .FEJB(BMMFSJFT 4UPSBHF 4ZOD'JMF4ZTUFN ءأذي "MBSNT "QQ "VEJP &WFOUT 'JMF4ZTUFN *O *EMF /PUJDBUJPOT  1FSNJTTJPOT 1PXFS 3VOUJNF 4ZTUFN 8BMMQBQFS رغ؎أװإٝ؟٦ #MVFUPPUI $P1SFTFODF -PDBUJPO )*% 4FSJBM 4PDLFU 64# ِ٦ؠ؎ٝة٦ؿؑ؎أ "DDFTTJCJMJUZ'FBUVSFT $PNNBOET $POUFYU.FOVT 5FYU5P4QFFDI (PPHMF (PPHMF$MPVE.FTTBHJOH *EFOUJUZ 1VTI.FTTBHJOH ♴简#FUB"1*IUUQTEFWFMPQFSDISPNFDPNBQQTBQJ@JOEFY
  • 75. 4VNNBSZ
  • 76. אך㢌⻉ /FUXPSL $PNQPOFOUT 8PSLPX -BOHVBHFT 8FC"1*T
  • 77. אך㢌⻉ /FUXPSL ؟٦غה׌ֽ鸐⥋ׅ׷儗➿כ穄✪ $PNQPOFOUT 8PSLPX -BOHVBHFT 8FC"1*T
  • 78. אך㢌⻉ /FUXPSL $PNQPOFOUT 6*銲稆׾荈㖈ח䭁䓸٥ⱄⵃ欽 8PSLPX -BOHVBHFT 8FC"1*T
  • 79. אך㢌⻉ /FUXPSL $PNQPOFOUT 8PSLPX ػح؛٦آٖكٕד׮ⱄⵃ欽 -BOHVBHFT 8FC"1*T
  • 80. אך㢌⻉ /FUXPSL $PNQPOFOUT 8PSLPX -BOHVBHFT 㣐鋉垷Ꟛ涪ח罣ִ׷鎉铂ח涪㾜 8FC"1*T
  • 81. אך㢌⻉ /FUXPSL $PNQPOFOUT 8PSLPX -BOHVBHFT 8FC"1*T 8FC䪮遭ד⡦ד׮乼⡲〳腉ח
  • 82. 8FCJTUIF/BUJWF1MBUGPSN 8FCָط؎ذ؍ـ ءٝفٕח⡦ד׮⳿勻׷״ֲח غحسظؐعؐכו׿ו׿䐖姺 ط؎ذ؍ـず圫ך鸞䏝׮〳腉ח 8FCָفٓحزؿؓ٦ي ⱄⵃ欽䚍כ䚈鸞ח넝ת׏גֹ׋ 㛙暕זفؚٗٓىؚٝ׮〳腉ח 04ٖكٕך㣐鋉垷Ꟛ涪ָ〳腉
  • 83. ׉ֿד㤴ׁ׿ծֶ㵄ׁ׿ծ ؔآ؟ٝ׋׍ծ،ٖדׅ״
  • 84. 'JSFGPY04TU:FBS 8FCJTUIF1MBUGPSN  珏ךرغ؎أ׾  אٍؗٔ،ָ  ٠㕂ח㉀欽㾜Ꟛ 䎃剢儗挿 䎃剢ךٔٔ٦أ䖓䎃
  • 85. 'JSFGPY04ך،٦ؗذؙثٍ 8FCָط؎ذ؍ـ ׅץג8FC䪮遭ד㹋植 8FCח剑黝⻉ 8FCח暴⻉׃׋ءٝفٕ鏣鎘 (BJB(FDLP(POLך㾴 8FCؒٝآٝ(FDLPָ⚥䗰
  • 86. 'JSFGPY04̒"OESPJE 8FCח剑黝⻉ ءٝفٕأو٦ز Internet Packaged App (Local File) Hosted App (Web Site) Web Platform Device API System API Gecko Java App Native Library Internet WebView Contents Chrome (Browser App) App Framework Dalvik VM Android Runtime Native Interface Blink SGL etc... Libraries ⱄⵃ欽 Kernel & HAL Kernel & HAL
  • 87. ػح؛٦آ،فٔח׮㼎䘔 )PTUFE 8FC铣׫鴥׫㘗  وصؿؑأز׾欽䠐ׅ׷׌ֽד،فٔח 鸐䌢8FC؟؎زה㛇劤涸חכずׄ ؎ٝأز٦ׇٕ׆ח⢪ֲֿה׮〳腉 1BDLBHFE تؐٝٗ٦س㘗  ؟؎زⰋ⡤׾;*1׃גػح؛٦آ⻉ و٦؛حز㻢叨ד鷄⸇埄ꣲ׾《䖤〳腉 䖞勻ךأوم،فٔח鵚ְ䕎䒭 サーバ 端末 IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"QQT1BDLBHFE@BQQT )PTUFE "QQT Internet 1BDLBHFE "QQT local
  • 88. ،فٔ䞔㜠ؿ؋؎ٕ剅ֻ׌ֽ )PTUFE 8FC铣׫鴥׫㘗  ؟؎ز
  • 89. NBOJGFTUXFCBQQ NBOJGFTUXFCBQQ⡲䧭 ،فٔ䞔㜠剅ֻ׌ֽד،فٔח 8FC؟؎زכ׉ךתת 䨱׷نةٝ搀׃דⴽ؟؎زחآٍٝفׅ׷ה䨱׏ג勻׵׸זְךד岣䠐
  • 90. ،فٔ䞔㜠 NBOJGFTUXFCBQQ { "name": "フォクすけアプリ", "description": "あのフォクすけが遂にアプリに!", "launch_path": "/index.html", "icons": { "128": "/icons/foxkeh-128.png" }, "developer": { "name": "dynamis", "url": "http://dynamis.jp/" } } // 注意: ローカルで / -> /index.html 変換はない IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT"QQT.BOJGFTU
  • 91. ;*1ׅ׸לػح؛٦آח 1BDLBHFE تؐٝٗ٦س㘗  ;*1
  • 92. QBDLBHFNBOJGFTU NBOJGFTUXFCBQQ⡲䧭 )PTUFE"QQTך儗הずׄ ؟؎زⰋ⡤׾;*1ׅ׷ QBDLBHFNBOJGFTU׾⡲䧭
  • 93. ⚅歲ぐ㕂ד竲ղٔٔ٦أ 䎃ך倜醡ㅷה׃ג涪邌ׁ׸׋畭劣ך♧鿇
  • 94. 倜莆㕂䋐㜥ח׮㼎䘔 4QSFBEUSVN醡⡚⣣呓أوم ؎ٝسדכ爡ַ׵顋㡰 *OUFY$MPVE'93T _ⰼ  4QJDF'JSF0OF3T _ⰼ  ⚅歲⚥ך➂ח*OUFOFU畭劣׾ ⭙➂ָأو٦زؿؓٝ劢䨽剣 顋㡰Ꟛ㨣
  • 95. أوم⟃㢩ח׮갫如㾜Ꟛ ػ٦زش٦ָ実׭׷رغ؎أח갫如㾜Ꟛ .P[JMMB荈魦כ畭劣顋㡰׃זְ
  • 96. ׀劍䖉ֻ׌ְׁկ ٥٥ 
  • 97. 5IBOLT "OZ2VFTUJPO CZEZOBNJT !EZOBNJUUFS GBDFCPPLDPNEZOBNJT