Slide 1

Slide 1 text

2015೥Λζββββͬͱ ৼΓฦͬͯΈΔ Pasta-K 2016/02/11 [email protected]

Slide 2

Slide 2 text

͜Μʹͪ͸

Slide 3

Slide 3 text

͜Μʹͪ͸

Slide 4

Slide 4 text

Πϯλʔωοτ׆ಈ twitter.com/pastak id: Pasta-K pastak.hatenablog.com pastak-diary.hatenadiary.com github.com/pastak

Slide 5

Slide 5 text

KMCͰͷ׆ಈ KMC 37୅໨ ޿ใ OSC Kyotoग़ల ɹYAPCεϙϯαʔ࡞ઓ JavaScriptͰੈքฏ࿨2014

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

KMCͰͷ׆ಈ KMC 37୅໨ ޿ใ OSC Kyotoग़ల ɹYAPCεϙϯαʔ࡞ઓ JavaScriptͰੈքฏ࿨2014 KMCτοϓϖʔδ୲౰ (new)

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

͜Ε͕๻

Slide 10

Slide 10 text

͜Ε͸ௗऔٰ࠭

Slide 11

Slide 11 text

8FCαΠτͷ ΦγϟϨԽʹߩݙ

Slide 12

Slide 12 text

ΦγϟϨ౓ൺֱ ͜Ε·Ͱ ࠷৽ ※pastakͷମײʹجͮ͘άϥϑ

Slide 13

Slide 13 text

ΦγϟϨ౓ൺֱ ͜Ε·Ͱ ࠷৽ ※pastakͷମײʹجͮ͘άϥϑ

Slide 14

Slide 14 text

ΦγϟϨ౓ൺֱ ͜Ε·Ͱ ࠷৽ ※pastakͷମײʹجͮ͘άϥϑ ମײൺഒ

Slide 15

Slide 15 text

ΞϧόΠτ d Πϯλʔϯ Ն Πϯλʔϯ Ն Πϯλʔϯ ౙ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

ࣗࡱΓ

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

ࣗݾ঺հͷ ࠷ޙʹ ͍ͭ΋ͷ

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

ΞχϝϑΝϯ

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

ࠓ͔ΒԿΛ࿩͢ͷ͔

Slide 27

Slide 27 text

๻ͷ2015೥ͷ׆ಈ ʹ͍ͭͯ

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: Gamepad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 31

Slide 31 text

4݄ 5݄ 6݄ 7݄ 8݄ 9݄ 10 11 1݄ ɹɹ 2݄ ɹɹ ࠓ͔Β͜ΕΒ શ෦ͷ࿩Λ βοͱ͢Δͧ

Slide 32

Slide 32 text

ਂ͘ฉ͖͍ͨ ৔߹͸2" ͔-5Ͱ

Slide 33

Slide 33 text

Slide 34

Slide 34 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: Gamepad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 35

Slide 35 text

৽קྫձߨ࠲

Slide 36

Slide 36 text

http://www.slideshare.net/pastak/javascript-47327211

Slide 37

Slide 37 text

8FC"VEJP "1*ͷ࿩ͨ͠

Slide 38

Slide 38 text

http://pastak.github.io/audio-data-api-sample/

Slide 39

Slide 39 text

8FC"VEJP "1*

Slide 40

Slide 40 text

Web Audio API • ϒϥ΢βͰԻΛ໐Β͢ํ๏ͷ1ͭ • Ұ൪؆୯ͳͷ͸ • Google Chrome / Firefox ڞʹαϙʔτ • Firefox ʹ͸ Audio Data APIͱ͍͏ͷ͕࣮૷ ͞Ε͍͕ͯͨɺͪ͜Βʹ౷Ұ͢Δํ਑ͬΆ͍ • NodeΛ઀ଓ͢Δ͜ͱͰϑΟϧλʔͨ͠Γ৭ʑ ग़དྷΔ

Slide 41

Slide 41 text

ΦγϨʔλʔ

Slide 42

Slide 42 text

ภͬͨDTM༻ޠࣙయ - ΦγϨʔλʔ:Oscillatorͱ͸ - DTM / MIDI ༻ޠ ͷҙຯɾղઆ | g200kg Music & Software http://www.g200kg.com/jp/docs/dic/oscillator.html ൃৼثͷࣄɻγϯηαΠβʔͰ͸Իͷݩ ͱͳΔ೾ܗΛ࡞Γग़͢෦෼ʹ૬౰͢Δɻ লུͯ͠OSCͱॻ͔ΕΔࣄ΋ଟ͍ɻΧφ දهͷ৔߹͸ʮΦγϨʔλʔʯɺ·ͨ͸ ʮΦογϨʔλʔʯͱॻ͔ΕΔɻ

Slide 43

Slide 43 text

Իͷ೾Λ࡞Δ΍ͭ

Slide 44

Slide 44 text

var audioctx = new AudioContext(); var osc = audioctx.createOscillator(); osc.frequency.value = 440; osc.type = "square"; osc.connect(audioctx.destination); osc.start(1);

Slide 45

Slide 45 text

var audioctx = new AudioContext(); var osc = audioctx.createOscillator(); osc.frequency.value = 440; osc.type = "square"; osc.connect(audioctx.destination); osc.start(1); प೾਺

Slide 46

Slide 46 text

var audioctx = new AudioContext(); var osc = audioctx.createOscillator(); osc.frequency.value = 440; osc.type = "square"; osc.connect(audioctx.destination); osc.start(1); ೾ܗͷछྨ ɾ"sine" : αΠϯ೾ ɾ"square" : ۣܗ೾ ɾ"sawtooth":ڒࣃঢ়೾ ɾ"triangle":ࡾ֯೾

Slide 47

Slide 47 text

var audioctx = new AudioContext(); var osc = audioctx.createOscillator(); osc.frequency.value = 440; osc.type = "square"; osc.connect(audioctx.destination); osc.start(1); ࠶ੜʂʂʂʂʂʂ

Slide 48

Slide 48 text

σΟετʔγϣϯΤϑΣΫτ

Slide 49

Slide 49 text

σΟετʔγϣϯ (Իڹػث) - Wikipedia http://ja.wikipedia.org/wiki/ %E3%83%87%E3%82%A3%E3%82%B9%E3%83%88%E3%83%BC %E3%82%B7%E3%83%A7%E3%83%B3_%28%E9%9F%B3%E9%9F%BF %E6%A9%9F%E5%99%A8%29 σΟετʔγϣϯ (Distortion)͸ɺҙਤత ʹ࿪ΜͩʢͻͣΜͩʣԻ৭ΛಘΔΤϑΣ ΫλʔͰ͋Δɻ

Slide 50

Slide 50 text

ԻΛ࿪·ͤΔ΍ͭ

Slide 51

Slide 51 text

var shaper = audioctx.createWaveShaper(); osc.connect(shaper); shaper.connect(audioctx.destination); var curve = new Float32Array(4096); // ディストーションカーブを表す配列を なんとかして作る shaper.curve = curve;

Slide 52

Slide 52 text

var shaper = audioctx.createWaveShaper(); osc.connect(shaper); shaper.connect(audioctx.destination); var curve = new Float32Array(4096); // ディストーションカーブを表す配列を なんとかして作る shaper.curve = curve; ΦγϨʔλʔͱ઀ଓ͢Δ

Slide 53

Slide 53 text

Web Audio APIͰଞʹग़དྷΔࣄ • ԻྔΛௐ੔͢Δ • ԻݯΛಡΈࠐΉ • ϑΟϧλʔΛ͔͚Δ • ೾ܗΛऔಘ͢Δ • ίϯϓϨοαʔΛ͔͚Δ • ΫϩεϑΣʔυͤ͞Δ ͳͲͳͲ

Slide 54

Slide 54 text

ɍ

Slide 55

Slide 55 text

Slide 56

Slide 56 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: Gamepad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 57

Slide 57 text

&MFDUSPO͸ ޙड़

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

What’s “Scratch” • Scratch (εΫϥον) ͱ͸ॳ৺ऀ͕࠷ॳʹਖ਼͠ ͍ߏจͷॻ͖ํΛ֮͑Δ͜ͱແ݁͘ՌΛಘΒ ΕΔϓϩάϥϛϯάݴޠֶश؀ڥͰ͋ΔɻMIT ϝσΟΞϥϘ͕։ൃ͠ɺ༡ͼ৺ͷ͋Δ࣮ݧ΍ ΠϯλϥΫςΟϒΞχϝʔγϣϯɺήʔϜͳ Ͳͷ੡࡞Λ௨ͯ͠͞ΒͳΔֶशͷ΍ΔؾΛى ͤ͜͞Δ͜ͱΛҙਤ͍ͯ͠Δɻ https://ja.wikipedia.org/wiki/Scratch_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F %E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E) ΑΓ

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

What’s “ScratchX” • ͦͷScratchΛJSͰ֦ுՄೳʹͨ͠΋ͷ • ϒϥ΢βͷίϯςΩετͰར༻Ͱ͖ΔAPIΛ ͢΂ͯར༻Մೳ (XHR, DOM API etc ) http://mactkg.hateblo.jp/entry/2015/05/12/020537 ͱ͔͕ৄ͍͠

Slide 62

Slide 62 text

scratchx-websensor https://github.com/pastak/scratchx-websensor • Scratch্ͰWeb Sensor APIsΛར༻Ͱ͖ΔΑ͏ʹͨ͠΋ͷ • Light sensor • Battery Level • Acceleration • Geolocation

Slide 63

Slide 63 text

$(window).on('devicelight', function(event) { ext.getLightSensor = function(){ return event.originalEvent.value; } }) return event.originalEvent.accelerationIncludingGravity[direction] } }) ext.getLightSensor = function() {}; ext.getBatteryLevel = function() { return navigator.battery; }; var descriptor = { blocks: [ ['r', 'Light sensor', 'getLightSensor',null], ['r', 'Battery', 'getBatteryLevel',null] ] };

Slide 64

Slide 64 text

ɍ

Slide 65

Slide 65 text

Slide 66

Slide 66 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: Gamepad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 67

Slide 67 text

uiureo/ssslack uiureo/ssslack-chrome-extension • SlackͷlogΛऔΓग़ͯ͠อଘͰ͖ΔαʔϏε

Slide 68

Slide 68 text

pastak/ssslack-firefox-addon • uiureo/sslack-chrome-extensionͱಉ౳ͷৼΔ෣͍Λ ͢ΔFirefoxΞυΦϯ • jpmͰ࡞ͬͨ • jpmʹ͍ͭͯ͸ࡢ೥ͷय़߹॓εϥΠυΛࢀর • http://www.slideshare.net/pastak/firefox-addon- sdk

Slide 69

Slide 69 text

໰୊ൃੜ

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

͜ͷ෦෼ʹରԠ͢Δ Ϟδϡʔϧ͕jpmʹ͸ͳ͍

Slide 73

Slide 73 text

KQNͷલ਎ͷ DGYʹ͸͋ΔͷͰ ͦΕΛ࢖͑͹͍͍ ͷͰ͸ʁ

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

ࣦഊ

Slide 76

Slide 76 text

Ϟδϡʔϧͱ͔͕ ݁ߏมΘͬͯΔ

Slide 77

Slide 77 text

͔֬ʹ

Slide 78

Slide 78 text

ఘΊΑ͏

Slide 79

Slide 79 text

"1*͋ΔͬΆ͍

Slide 80

Slide 80 text

ؾ߹͍Ͱ΍ͬͯ ͍͜͏

Slide 81

Slide 81 text

ؾ࣋ͪ

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

ؾ߹͍Ͱ ॻ͖௚ͨ͠

Slide 84

Slide 84 text

ग़དྷͨ

Slide 85

Slide 85 text

https://github.com/pastak/moz-urlbarbutton/

Slide 86

Slide 86 text

஌ݟ

Slide 87

Slide 87 text

var doc = require('sdk/window/utils') .getMostRecentBrowserWindow().document; var urlBarIcons = doc.getElementById('urlbar-icons'); var btn = doc.createElement('toolbarbutton'); btn.setAttribute('id', option.id); btn.setAttribute('image', option.image); btn.addEventListener('command', option.onClick, false); urlBarIcons.appendChild(btn);

Slide 88

Slide 88 text

var doc = require('sdk/window/utils') .getMostRecentBrowserWindow().document; var urlBarIcons = doc.getElementById('urlbar-icons'); var btn = doc.createElement('toolbarbutton'); btn.setAttribute('id', option.id); btn.setAttribute('image', option.image); btn.addEventListener('command', option.onClick, false); urlBarIcons.appendChild(btn); ͜ΕͰwindowࣗମͷDOM(ҙ༁)͕औΕΔ

Slide 89

Slide 89 text

var doc = require('sdk/window/utils') .getMostRecentBrowserWindow().document; var urlBarIcons = doc.getElementById('urlbar-icons'); var btn = doc.createElement('toolbarbutton'); btn.setAttribute('id', option.id); btn.setAttribute('image', option.image); btn.addEventListener('command', option.onClick, false); urlBarIcons.appendChild(btn); ͋ͱ͸ҰൠతͳDOMૢ࡞ͰΛ௥Ճ

Slide 90

Slide 90 text

ޙ೔ஊ

Slide 91

Slide 91 text

KQN޲͚Ϟδϡʔϧ ͱͯ͠GPSLݩʹ औΓࠐ·Εͯ OQNʹެ։͞Εͯͨ

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

ɍ

Slide 95

Slide 95 text

Slide 96

Slide 96 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: Gamepad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 97

Slide 97 text

(ZB[PGPS-JOVY $*ϏϧυϦϦʔε ؀ڥߏங

Slide 98

Slide 98 text

ͦΕ·Ͱͷ (ZB[PGPS-JOVY

Slide 99

Slide 99 text

• https://github.com/kambara/Gyazo-for- Linux/downloads ͔Β debϑΝΠϧΛDL • % sudo apt-get install ruby imagemagick • % sudo dpkg -i gyazo_XXX_all.deb

Slide 100

Slide 100 text

ͦΕ͔Βͷ (ZB[PGPS-JOVY

Slide 101

Slide 101 text

• Debian / Ubuntu • % curl -s https://packagecloud.io/install/ repositories/gyazo/gyazo-for-linux/script.deb.sh | sudo bash • % sudo apt-get install gyazo • CentOS • curl -s https://packagecloud.io/install/ repositories/gyazo/gyazo-for-linux/script.rpm.sh | sudo bash • $ sudo yum install gyazo

Slide 102

Slide 102 text

ԿΛͲ͏͔ͨ͠

Slide 103

Slide 103 text

౰࣌ͷঢ়گ • ݩʑNota Incͷ֎෦ͷ༗ࢤ͕࡞ͬͯԼͬͨ͞΋ ͷͩͬͨͷͰɺbuildखॱͳͲΛ஌͍ͬͯΔਓ ͕ࣾ಺ʹډͳ͔ͬͨ • ϦϦʔε΋GitHubͷDownloadػೳΛར༻ͯ͠ ͍͕ͨഇࢭࡁΈͩͬͨ

Slide 104

Slide 104 text

࡞ઓํ਑ • ݩʑNota Incͷ֎෦ͷ༗ࢤ͕࡞ͬͯԼͬͨ͞΋ ͷͩͬͨͷͰɺbuildखॱͳͲΛ஌͍ͬͯΔਓ ͕ࣾ಺ʹډͳ͔ͬͨ • ϦϦʔε΋GitHubͷDownloadػೳΛར༻ͯ͠ ͍͕ͨഇࢭࡁΈͩͬͨ → ҆ఆͯ͠ϏϧυՄೳͳΑ͏ʹCIͰࣗಈԽ → ΠϯετʔϧΛDebian/Ubuntu͸apt-getͰ ɹ Մೳʹ͢Δ

Slide 105

Slide 105 text

ಉ࣌ظʹ 13དྷͯͨ

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

13.ύοέʔδ ΛCVJME͢Δ13

Slide 108

Slide 108 text

྆ํͳΜͱ͔ ͏·͘ѻ͑Δ Α͏ʹ͠Α͏

Slide 109

Slide 109 text

Ϗϧυ༻ͷ$*

Slide 110

Slide 110 text

CI্ͰͷϏϧυʹ͍ͭͯ • ଞͷϓϩμΫτͰ΋ར༻͍ͯ͠ΔCircleCIΛɹ ར༻͢Δ͜ͱʹ • CIrcleCIͷίϯςφʔOS͸Ubuntu • debύοέʔδͷbuild͸Մೳ ⭕ • rpmύοέʔδͷbuild͸ࠔ೉ ❌

Slide 111

Slide 111 text

$JSDMF$*্Ͱ SQNͷϏϧυ ͍ͨ͠ʂʂʂ

Slide 112

Slide 112 text

ٹੈओొ৔ʂ

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

%PDLFS ʹ͍ͭͯ ஌Γ͍ͨਓ

Slide 115

Slide 115 text

͜ͷ͋ͱͷ XBTT͘Μͷ ߨ࠲ΛݟΑ͏

Slide 116

Slide 116 text

from http://techtarget.itmedia.co.jp/tt/news/1408/21/news02.html

Slide 117

Slide 117 text

ղܾҊ

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

Ͱ

Slide 120

Slide 120 text

Ͳ͔ʔΜͱ

Slide 121

Slide 121 text

$JSDMF$*ͷ 6CVOUVʹ

Slide 122

Slide 122 text

$FOU04 ߏங

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

Ϗϧυ੒ޭʂ

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

BQUJUVEFZVN޲͚ʹ SFQPTJUPSZΛެ։͢Δ

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

packagecloud.ioΛར༻ • ެ։༻ͳΒແྉͰ݁ߏ࢖͑Δ • upload༻ͷίϚϯυ͸gem • gem install packagecloud • CircleCIͷυΩϡϝϯτʹ΋ࡌͬͯΔ • https://circleci.com/docs/pushing-packages-to- packagecloud

Slide 130

Slide 130 text

packagecloudͰϦϦʔε • $user/$repo/$os/$versionΛࢦఆ͢Δ • packagecloudͷఏڙ͍ͯ͠Δinstall.sh͸ɺɹ/etc/ debian_versionͳͲΛಡΜͰɺ$osͱ$version͕ݻఆ͞ΕΔ ͷͰɺͦΕͧΕʹରԠͨ͠ϑΝΠϧΛpush͢Δඞཁ͕͋Δ • ͲΜͲΜσΟετϦ૿͑ΔͷͰɺϦϦʔε࣌ʹ https:// packagecloud.io/api/v1/distributions.json ΛಡΜͰλʔ ήοτΛऔಘ͢Δ • ͋ͱ͸ઌ΄ͲͷཁྖͰbuildͨ͠΋ͷΛͲΜͲΜpush͢Δ

Slide 131

Slide 131 text

5SZJU

Slide 132

Slide 132 text

ɍ

Slide 133

Slide 133 text

Slide 134

Slide 134 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: Gamepad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 135

Slide 135 text

ϋοΧιϯத

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

௨஌ۂ໊౳͕ 6OEFpOFEʹ

Slide 138

Slide 138 text

Ͳ͏΍Βಛఆͷ ָۂͰى͖Δ

Slide 139

Slide 139 text

ͦͷָۂ͕ ͪ͜Β

Slide 140

Slide 140 text

No content

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text

ոͦ͠͏ͳ෦෼

Slide 143

Slide 143 text

No content

Slide 144

Slide 144 text

No content

Slide 145

Slide 145 text

νʔϜϋφϠ Ϛλ

Slide 146

Slide 146 text

\OBNFՖϋགྷϨϠ͍Ζ ͸ʹ΄ BSUJTUνʔϜ ϋφϠϚλ BMCVNՖ ϋགྷϨϠ͍Ζ͸ʹ΄&1^

Slide 147

Slide 147 text

KXBMHSBOQMBZCBDL Λؾ߹͍Ͱ ௚ͦ͏ͱ͢Δ

Slide 148

Slide 148 text

J5VOFTΛୟͨ͘Ίʹ "QQMF4DSJQUͰؾ߹͍Ͱ +40/ੜ੒ͯͨ͠

Slide 149

Slide 149 text

ඪ४ͷ "QQMF4DSJQU ͚ͩͰ͸ਖ਼نදݱͳͲ͕ ෆՄೳ

Slide 150

Slide 150 text

ͦ͏͍͑͹ʜ

Slide 151

Slide 151 text

+BWB4DSJQU GPS "VUPNBUJPO

Slide 152

Slide 152 text

JT

Slide 153

Slide 153 text

:FU"OPUIFS "QQMF4DSJQU

Slide 154

Slide 154 text

JavaScript for Automation(JXA) • Mac OSX 10.10 Yosemite ͔Βར༻Մೳʹ • ͦΕ·ͰͷApple Scriptͱಉ౳ͷ͜ͱΛJSͰදݱՄೳʹ • ެࣜυΩϡϝϯτ: https://developer.apple.com/library/ mac/releasenotes/InterapplicationCommunication/RN- JavaScriptForAutomation/Articles/Introduction.html • αϯϓϧ๛෋: https://github.com/dtinth/JXA-Cookbook • Script Editor.app > ΢Οϯυ΢ > ϥΠϒϥϦ

Slide 155

Slide 155 text

#FGPSF

Slide 156

Slide 156 text

on IsPlaying() tell ApplicationLib if ApplicationIsRunning("iTunes") then tell application "iTunes" return player state is playing end tell else return false end if end tell end IsPlaying on GetCurrentTrack() if IsPlaying() then tell application "iTunes" if not (exists current track) then return null set trackName to (get name of current track) set trackArtist to (get artist of current track) set trackAlbum to (get album of current track) return "{\"name\":\"" & trackName & "\",\"artist\":\"" & trackArtist & "\",\"album\":\"" & trackAlbum & "\"}" end tell else return "null" end if end GetCurrentTrack

Slide 157

Slide 157 text

on IsPlaying() tell ApplicationLib if ApplicationIsRunning("iTunes") then tell application "iTunes" return player state is playing end tell else return false end if end tell end IsPlaying on GetCurrentTrack() if IsPlaying() then tell application "iTunes" if not (exists current track) then return null set trackName to (get name of current track) set trackArtist to (get artist of current track) set trackAlbum to (get album of current track) return "{\"name\":\"" & trackName & "\",\"artist\":\"" & trackArtist & "\",\"album\":\"" & trackAlbum & "\"}" end tell else return "null" end if end GetCurrentTrack

Slide 158

Slide 158 text

"GUFS

Slide 159

Slide 159 text

function IsPlaying() { if (IsRunning()) { return Application('iTunes').playerState() === 'playing' } return false } function GetCurrentTrack() { if (!IsPlaying()) { return null } var iTunes = Application('iTunes') var track = iTunes.currentTrack return JSON.stringify({ name: track.name(), artist: track.artist(), album: track.album() }) }

Slide 160

Slide 160 text

ɍ

Slide 161

Slide 161 text

Slide 162

Slide 162 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: Gamepad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 163

Slide 163 text

(BNF1BE "1*

Slide 164

Slide 164 text

GamePad API ֓ཁ • USB GamePad ͳͲͷೖྗΛऔಘͰ͖ΔJS API • https://www.w3.org/TR/gamepad/ • https://developer.mozilla.org/en-US/docs/Web/API/ Gamepad_API/Using_the_Gamepad_API • gamepadconnected Event • event.gamepad • gamepaddisconnected Event • navigator.getGamepads() • Array͕ฦͬͯ͘Δ͕ɺChromeͩͱlength > 3 Ͱ undefinedͰຒ·ͬͨͷ͕ฦͬͯ͘Δʢͩͬͨ͸ͣ)

Slide 165

Slide 165 text

GamePad API ֓ཁ • GamePad.index • GamePad.id • GamePad.buttons • Buttonͷ഑ྻʢϘλϯ͝ͱʹ൪஍͕ݻఆ͞Ε͍ͯΔʣ • GamePad.axes • εςΟοΫͷ܏͖۩߹ʢेࣈϘλϯ΋ؚ·ΕΔ৔߹΋ • Button.pressed • Button.value • Ϙλϯͷԡ͞Ε۩߹

Slide 166

Slide 166 text

.FOVCBS"QQ XJUI&MFDUSPO

Slide 167

Slide 167 text

8IBU`T &MFDUSPO

Slide 168

Slide 168 text

http://qiita.com/pastak/items/108d34d19927f26de0d0

Slide 169

Slide 169 text

ElectronͰMenubarৗறΞϓϦ • maxogden/menubar Λར༻͢Δͱmenubarʹৗற͠ ͯɺ͔ͦ͜Βੜ͑ͯ͘ΔΑ͏ʹ΢Οϯυ΢Λදࣔ͢Δ ΞϓϦέʔγϣϯΛॻ͘͜ͱ͕ग़དྷΔ • ϝχϡʔΛग़͚ͩ͢ͳΒɺˢ͸ෆཁ • https://github.com/atom/electron/blob/master/ docs/api/menu.md • https://github.com/atom/electron/blob/master/ docs/api/menu-item.md

Slide 170

Slide 170 text

https://github.com/pastak/gyazo-menubar https://github.com/pastak/electonic-ninetan

Slide 171

Slide 171 text

menubar ϞδϡʔϧΛར༻ const menubar = require('menubar') const mb = menubar() mb.on('ready', function ready () { const loadPath = 'file://'+ __dirname+'/static/view.html' mb.window.loadUrl(loadPath) })

Slide 172

Slide 172 text

menubar Ϟδϡʔϧඇར༻ const Menu = require('electron').Menu const menu = new Menu(); menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked') } })) menu.append(new MenuItem({type: 'separator'})) menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }))

Slide 173

Slide 173 text

ɍ

Slide 174

Slide 174 text

10݄

Slide 175

Slide 175 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: GamePad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 176

Slide 176 text

QBTTXPSE Έ͍ͨʹ &MFDUSPO"QQͱ $ISPNF&YUΛ ࿈ܞ͍ͤͨ͞ ※1password͸ElectronAppͰ͸ͳ͍

Slide 177

Slide 177 text

QBTTXPSEͷ $ISPNF&YU؍࡯

Slide 178

Slide 178 text

XFCTPDLFUΛ ར༻͍ͯ͠ΔͬΆ͍

Slide 179

Slide 179 text

ͳΔ΄Ͳ

Slide 180

Slide 180 text

΍ͬͯΈΑ͏

Slide 181

Slide 181 text

8FC4PDLFUPO &MFDUSPO"QQ

Slide 182

Slide 182 text

Πϝʔδਤ

Slide 183

Slide 183 text

ᶃ ىಈͯ͘͠Ε! ᶄ ͪ͜ΒͰ͢ ᶅ ྑ͍ײ͡ʹ ɹඈΜͰ͖ͨ৘ใΛ ɹར༻

Slide 184

Slide 184 text

Electron App Side const ws = require("nodejs-websocket") const server = ws.createServer(function (conn) { console.log("New connection") conn.on("text", function (text) { if (text !== 'open') return console.log('called') do_something() // ② }) conn.on("close", function (code, reason) { console.log("Connection closed") }) }).listen(3652)

Slide 185

Slide 185 text

Chrome Extension Side var ws = new WebSocket('ws://localhost:3652/') ws.onmessage = function (event) { //適切にwsで飛んできたdataを渡す res(event.data) // ③ ws.close() } ws.onopen = function () { ws.send('open') // ① }

Slide 186

Slide 186 text

%&.0

Slide 187

Slide 187 text

ɍ

Slide 188

Slide 188 text

11݄

Slide 189

Slide 189 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: Gamepad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 190

Slide 190 text

݄෼Ͱ ·ͱΊͯ ࿩͢

Slide 191

Slide 191 text

ɍ

Slide 192

Slide 192 text

Slide 193

Slide 193 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: Gamepad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 194

Slide 194 text

'JUCJU

Slide 195

Slide 195 text

http://www.slideshare.net/pastak/2016fitbit

Slide 196

Slide 196 text

$ISPNF&YUFOTJPO #VJME3FMFBTF ࣗಈԽେ࡞ઓ

Slide 197

Slide 197 text

·ͣ$-*πʔϧ Λॻ͍ͨ

Slide 198

Slide 198 text

DISPNFXFCTUPSF NBOBHFS

Slide 199

Slide 199 text

chrome-webstore-manager • Google OAuthͷaccess_tokenऔಘ • ೝূʹ͸ϒϥ΢β͕ඞཁ • refresh_tokenऔಘ • Extensionͷొ࿥ / ߋ৽ / ެ։

Slide 200

Slide 200 text

$*ͩͱUPLFOΛ ӬଓԽग़དྷͳ͍

Slide 201

Slide 201 text

ӬଓԽͰ͖Δ Α͏ʹͨ͠Β ྑͦ͞͏

Slide 202

Slide 202 text

Πϝʔδਤ

Slide 203

Slide 203 text

GitHubͰPRΛ merge refresh token Kick! extension.zip ΛPOST upload & publish ݁ՌΛ௨஌ %#ʹ UPLFOΛೖΕΔʂ ։ൃऀ

Slide 204

Slide 204 text

No content

Slide 205

Slide 205 text

DISPNFXFCTUPSF NBOBHFSͷػೳΛ SFRVJSFͰ͖ΔΑ͏ʹ

Slide 206

Slide 206 text

αʔό΋ /PEF+4 Ͱγϡοͱ

Slide 207

Slide 207 text

LPB

Slide 208

Slide 208 text

What’s “koa” • 1.x ͸ generator • 2.x ͸ await / async • CallBack஍ࠈͱexpress͔Βͷ୤٫

Slide 209

Slide 209 text

koa’s middleware pattern • functionΛొ࿥ॱʹݺͿ const koa = require('koa') const app = koa() app.use(function *(next) { this.body = 'Hello' yield next }) app.use(function *(next) { this.body += 'World' yield next }) app.listen(3000)

Slide 210

Slide 210 text

router.get('/callback', function *(next) { const callbackUrl = `${this.request.origin}/callback` const tokenData = yield chromeWebstoreManager.getAccessToken(query['code'], callbackUrl).then((data) => { data = JSON.parse(data) data.expired_at = Date.now() + (Number(data.expires_in) * 1000) return data }) try { yield setToken(JSON.stringify(tokenData)) this.body = 'Success!' } catch (e) { this.status = 500 this.body = 'failed...' } })

Slide 211

Slide 211 text

׬੒඼͕ ͪ͜Β

Slide 212

Slide 212 text

https://github.com/pastak/chrome-extension-release-heroku

Slide 213

Slide 213 text

IFSPLVEFQMPZ ϘλϯҰൃͰ ଈ͝ར։࢝༻Մೳ

Slide 214

Slide 214 text

HZB[PHZB[P DISPNF FYUFOTJPO Ͱӡ༻த

Slide 215

Slide 215 text

ɍ

Slide 216

Slide 216 text

Slide 217

Slide 217 text

4݄: audio API 5݄: Electronࢼ࢝͠ΊΔ / ScratchX 6݄: Firefox Add-on module 7݄: Build deb package on Circle CI 8݄: JavaScript for Automation (JXA) 9݄: Gamepad API / Menubar with Electron 10݄: Connection Electron App with Chrome Extension 11݄: Chrome Extension Build Tool / heroku / koa.js 1݄: Fitbit ɹɹ Auto release Chrome Extension with heroku 2݄: Open CV with NodeJS on heroku by Docker ɹɹ Format manifest.json for Firefox WebExtension

Slide 218

Slide 218 text

QBTUBLOFU υϝΠϯΛ࢖ͬͯ IFSPLV্Ͱ ༡ͿϒʔϜ౸དྷ

Slide 219

Slide 219 text

HBMMFSZ QBTUBLOFU

Slide 220

Slide 220 text

No content

Slide 221

Slide 221 text

ݟͲ͜Ζ

Slide 222

Slide 222 text

XIBUXHGFUDI 3FBDU

Slide 223

Slide 223 text

HPTFJ QBTUBLOFU http://192.168.220.16:3002/

Slide 224

Slide 224 text

XFC্ͷը૾ʹ QBTUBLΛ ߹੒Ͱ͖Δ

Slide 225

Slide 225 text

No content

Slide 226

Slide 226 text

No content

Slide 227

Slide 227 text

No content

Slide 228

Slide 228 text

No content

Slide 229

Slide 229 text

ݟͲ͜Ζ

Slide 230

Slide 230 text

DBOWBTͰ͸ $034ͷΞϨͰ Կ΋ग़དྷͳ͍

Slide 231

Slide 231 text

ཪͰJNBHFNBHJDL ୟ͍ͯ߹੒ͯ͠Δ

Slide 232

Slide 232 text

LBPIBNF HFOFSBUPS IFSPLVBQQDPN

Slide 233

Slide 233 text

إࣸਅΛ Ξοϓϩʔυ͢Δͱ إϋϝ؃൘ͷࣸਅʹ ߹੒ͯ͘͠ΕΔ

Slide 234

Slide 234 text

No content

Slide 235

Slide 235 text

No content

Slide 236

Slide 236 text

Πϝʔδਤ

Slide 237

Slide 237 text

ࣗ෼ͷࣸਅ ΠϯλʔωοτͰऩूͨ͠ إϋϝ؃൘ه೦ࣸਅ

Slide 238

Slide 238 text

ࣗ෼ͷࣸਅ ΠϯλʔωοτͰऩूͨ͠ إϋϝ؃൘ه೦ࣸਅ OpenCVͰإΛݟ͚ͭΔ

Slide 239

Slide 239 text

ࣗ෼ͷࣸਅ ΠϯλʔωοτͰऩूͨ͠ إϋϝ؃൘ه೦ࣸਅ إΛϦαΠζͯ͠إϋϝ؃൘ը૾ʹҠ২

Slide 240

Slide 240 text

ࣗ෼ͷࣸਅ ΠϯλʔωοτͰऩूͨ͠ إϋϝ؃൘ه೦ࣸਅ

Slide 241

Slide 241 text

ݟͲ͜Ζ

Slide 242

Slide 242 text

No content

Slide 243

Slide 243 text

ج൫͸heroku

Slide 244

Slide 244 text

ج൫͸heroku Docker on heroku

Slide 245

Slide 245 text

ج൫͸heroku Docker on heroku Running OpenCV node-opencv

Slide 246

Slide 246 text

8IZ %PDLFS

Slide 247

Slide 247 text

Կނherokuͷ্Ͱdockerͳͷ͔ • σϑΥϧτͷheroku্ͷUbuntuʹ͸OpenCV ͕ͳ͍ • Buildͯ͠ར༻Ͱ͖ΔΑ͏ʹͯ͠΍Δඞཁ͕ ͋Δ

Slide 248

Slide 248 text

Build and Deploy Docker to Heroku % heroku plugins:install heroku-docker % echo “web: npm run start” > Procfile % heroku docker:init % docker-compose build % heroku docker:release heroku-dockerϓϥάΠϯΛΠϯετʔϧ ProcfileΛੜ੒ جຊతͳDockerfileͳͲ͕ੜ੒͞ΕΔ docker imageΛbuild herokuʹdeploy

Slide 249

Slide 249 text

஫ҙ఺ • DockerfileͷFROMʹࢦఆ͢Δͷ͸heroku/ cederΛϕʔεʹͨ͠imageͰ͋Δඞཁ͕͋Δ • heroku/nodejs, heroku/ruby, heroku/python, heroku/go, heroku/java, heroku/gradle, heroku/scala

Slide 250

Slide 250 text

IFSPLV্Ͱ࢖͑Δ Α͏ʹ0QFO$7Λ CVJMEͨ͠JNBHF Λ࡞Δ

Slide 251

Slide 251 text

Docker imageͷ࡞Γํ • ͗͢ΌʔΜ͞Μͷ sugyan/heroku-python- opencv Λࢀߟʹ • ͗͢ΌʔΜ͞Μͷ͸Python༻ͳͷͰɺͦΕΛ ࢀߟʹOpenCVͷBuildΛͯ͠heroku/nodejs ΛࢀߟʹNodeJSΛಋೖ͢Δ

Slide 252

Slide 252 text

׬੒඼

Slide 253

Slide 253 text

No content

Slide 254

Slide 254 text

͝ར༻ ͍ͩ͘͞

Slide 255

Slide 255 text

8FC &YUFOTJPO

Slide 256

Slide 256 text

'JSFGPYͰ ಈ࡞ՄೳʹͳΔ ϒϥ΢β֦ுͷܗࣜ

Slide 257

Slide 257 text

ڈ೥ͷ ߨ࠲

Slide 258

Slide 258 text

http://www.slideshare.net/pastak/firefox-addon-sdk

Slide 259

Slide 259 text

͓͞Β͍

Slide 260

Slide 260 text

Firefoxͷϒϥ΢β֦ுܗࣜ • XUL + XPCOMΛ༻͍ͨ։ൃ • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm)

Slide 261

Slide 261 text

Firefoxͷϒϥ΢β֦ுܗࣜ • XUL + XPCOMΛ༻͍ͨ։ൃ • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm) • ChromeExtensionޓ׵ͷίʔυ (new)

Slide 262

Slide 262 text

ڈ೥ͷ ,.$Ξυϕϯτ ΧϨϯμʔ

Slide 263

Slide 263 text

http://pastak.hatenablog.com/entry/2015/12/05/013527

Slide 264

Slide 264 text

࠷৽ͷݱঢ় • Firefox v46 (ݱࡏDE, Canary) Ͱalphaʹͳͬͨ • 2016-08-02ʹstableೖΓ͢Δ༧ఆͷFirefox v48Ͱ stableʹͳΔ໨ඪ • chrome -> browser • addon.mozilla.org ʹΞοϓϩʔυ͢Δ͜ͱͰॺ໊ Մೳʹ • ະ࣮૷ͷAPI΋͔ͳΓݮ͖ͬͯͨ • https://developer.mozilla.org/en-US/Add-ons/ WebExtensions/Chrome_incompatibilities

Slide 265

Slide 265 text

NBOJGFTUKTPO ඇޓ׵໰୊

Slide 266

Slide 266 text

manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ

Slide 267

Slide 267 text

manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ Firefoxʹ ΠϯετʔϧෆՄ

Slide 268

Slide 268 text

manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ Firefoxʹ ΠϯετʔϧෆՄ Chromeʹ ΠϯετʔϧෆՄ

Slide 269

Slide 269 text

ݱঢ়྆ํͰಈ͘ NBOJGFTUKTPO ͸࡞Εͳ͍

Slide 270

Slide 270 text

No content

Slide 271

Slide 271 text

NBOJGFTUKTPO ͳΜͱ͔ͯ͘͠ΕΔ܅ ࡞ͬͨ

Slide 272

Slide 272 text

8FC&YUFOTJPO .BOJGFTU 'PSNBUUFS

Slide 273

Slide 273 text

https://github.com/pastak/wemf

Slide 274

Slide 274 text

What’s wemf • ඞؚͣ·Ε͍ͯΔ΂͖ΩʔͱରԠ͢Δ஋Λ௥Ճ • ෆ଍͍ͯ͠ΔΩʔ͕͋Δ৔߹͸ package.json ͳͲ͔Βੜ੒ͭ͠ ͭɺର࿩ΠϯλʔϑΣΠεͰੜ੒͠·͢ • ະରԠͷΩʔΛ࡟আ • ݱঢ়ະରԠͷΩʔ͕͋ΔͱΠϯετʔϧʹࣦഊ͢ΔͷͰɺͦͷ Α͏ͳΩʔΛ࡟আ͠·͢ɻ • ະରԠͷΩʔϫʔυͷ࢖༻Λ௨஌ • web_accessible_resourcesͰϫΠϧυΧʔυ͕࢖͑ͳ͍ͳͲ͕ ͋ΔͷͰɺͦͷΑ͏ͳΩʔϫʔυΛؚΜͰ͍Δ৔߹͸࡟আͤͣ ʹ௨஌͠·͢ɻ

Slide 275

Slide 275 text

ɍ

Slide 276

Slide 276 text

࠷ޙʹ

Slide 277

Slide 277 text

ࠓ೥΋ָ͍͠ ̍೥ʹ͠Α͏