20190518-3dcg-meetup-slide.pdf

by macneko-ayu

Slide 1

Slide 1 text

ExtendScriptͷ ࠷৽։ൃ؀ڥͱ CEPʹ͍ͭͯ 3DCG Meetup #15 2019/5/18 @macneko_ayu

Slide 2

Slide 2 text

ࣗݾ঺հ • @macneko_ayuʢ͜͏ͪΌΜࠇೣ·ΈΕʣ • iOSΞϓϦΤϯδχΞ • DTPͷࣗಈॲཧϓϩάϥϜͷडୗ։ൃ • DTPerͷεΫϦϓτ΋͘΋͘ձओ࠵ • https://dtpmkmk.connpass.com/

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ • ExtendScriptͷ࠷৽։ൃ؀ڥ • CEPͷ֓ཁ • CEPͷ։ൃ؀ڥ • CEPΛ࡞ͬͯΈΔ • CEPͰ࣮ݱͰ͖Δ͜ͱ

Slide 4

Slide 4 text

αϯϓϧίʔυ • GitHubͰެ։த • https://github.com/macneko-ayu/ 20190518-3dcg-meetup-sample

Slide 5

Slide 5 text

ExtendScriptͷ ࠷৽։ൃ؀ڥ

Slide 6

Slide 6 text

ExtendScript ToolKitɺ ࢖͍ͬͯ·͔͢ʁ ExtendScriptͷ࠷৽։ൃ؀ڥ

Slide 7

Slide 7 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • ExtendScript ToolKitʢҎ߱ESTKʣ͸ɺ AdobeΞϓϦέʔγϣϯͷεΫϦϓτ։ൃ༻ ͷσόοάπʔϧ • εΫϦϓτͷ࣮ߦɺ  ม਺ʹ֨ೲ͞Εͨσʔλͷ֬ೝɺ  ϒϨΠΫϙΠϯτΛར༻ͨ͠σόοά͕Մೳ ExtendScript ToolKitͱ͸

Slide 8

Slide 8 text

Goodbye,   ExtendScript ToolKit ExtendScriptͷ࠷৽։ൃ؀ڥ

Slide 9

Slide 9 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • 2018೥11݄ɺESTKͰεΫϦϓτͷ࣮ߦ͕Ͱ͖ͳ͍  ෆ۩߹͕ൃੜͨ͠ • ࢀߟɿExtendScript Toolkit Debugger Error #1116 • 2018೥12݄ɺࠓޙ͸৽όʔδϣϯͰ͸ͳ͘ɺ  Visual Studio CodeʢҎ߱VS CodeʣͷϓϥάΠϯͱͯ͠  ϦϦʔε͞ΕΔ͜ͱ͕ൃද͞Εͨ • ࢀߟɿThe Future of ExtendScript Development: A VSCode Plugin ৽ͨͳσόοάπʔϧ΁ͷҠߦ

Slide 10

Slide 10 text

Hello,   ExtendScript Debugger ExtendScriptͷ࠷৽։ൃ؀ڥ

Slide 11

Slide 11 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • Adobe͕։ൃͨ͠VS Code্ͰExtendScript Λ༻͍ͨεΫϦϓτͷ։ൃɺσόοάɺ  ࣮ߦΛߦ͏ͨΊͷϓϥάΠϯ ExtendScript Debuggerͱ͸

Slide 12

Slide 12 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • VS Codeͷ֦ுػೳ͔ΒΠϯετʔϧ͢Δ 1. αΠυύωϧͷ֦ுػೳΛΫϦοΫ͢Δ 2. ݕࡧϑΟʔϧυʹ ʮextendscriptʯ ͱ  ೖྗ͢Δ 3. ExtendScript DebuggerΛΫϦοΫ͢Δ 4. InstallϘλϯΛΫϦοΫ͢Δ Πϯετʔϧํ๏

Slide 13

Slide 13 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • ઃఆϑΝΠϧʢlaunch.jsonʣΛ༻ҙ͢Δ 1. ࡞ۀ༻ͷσΟϨΫτϦΛ࡞੒͢Δ 2. 1ͷσΟϨΫτϦΛVS CodeͰ։͘ 3. αΠυύωϧͷσόοάΛΫϦοΫ͢Δ 4. ࣃंΛΫϦοΫ͢Δ 5. ExtendScript DebugΛબ୒͢Δ 6. 1ͷσΟϨΫτϦ಺ʹlaunch.json͕Ͱ͖Δ σόοάͷ४උ

Slide 14

Slide 14 text

launch.jsonͷॳظઃఆ ※ৄࡉ͸ϓϥάΠϯͷSupported launch.json setteings:ͷ߲Λࢀর ExtendScriptͷ࠷৽։ൃ؀ڥ • σόοά࣮ߦ࣌ʹର৅ϑΝΠϧΛࢦఆ͢Δઃఆʹͳ͍ͬͯΔ

Slide 15

Slide 15 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • VS Code্Ͱݱࡏ։͍͍ͯΔϑΝΠϧΛର৅ʹ͢Δઃఆ Α͘࢖͍ͬͯΔઃఆ

Slide 16

Slide 16 text

ExtendScriptͷ࠷৽։ൃ؀ڥ 1. ίϚϯυύϨοτΛ։͘ 2. ʮλʔήοτΞϓϦέʔγϣϯΛબ୒ʯΛબ ୒͢Δ 3. ࣮ߦର৅ͷΞϓϦέʔγϣϯΛબ୒͢Δ 4. αΠυύωϧͷσόοάΛΫϦοΫ͢Δ 5. ύωϧ্෦ͷ࠶ੜϘλϯΛΫϦοΫ͢Δ 6. σόοά͕࣮ߦ͞ΕΔ σόοάΛ࣮ߦ͢Δ

Slide 17

Slide 17 text

Πϯετʔϧ ʙ σόοά Demo ExtendScriptͷ࠷৽։ൃ؀ڥ

Slide 18

Slide 18 text

৽͍͠σόοά؀ڥͰɺ  շదͳ։ൃΛָ͠Ή… ʹ͸ɺ·ͩͪΐͬͱ଍Γͳ͍ ExtendScriptͷ࠷৽։ൃ؀ڥ

Slide 19

Slide 19 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • ESTKͱൺ΂ͯExtendScript Debuggerͷෆศ ͳͱ͜Ζ͸ɺίʔυͷิ׬͕ޮ͔ͳ͍ͱ͜Ζ • ESTKͷίʔυิ׬΋࢖͍΍͘͢͸ͳ͍͕… • TypeScriptͷܕఆٛϑΝΠϧΛར༻͢Δ͜ͱ Ͱɺίʔυͷิ׬͕ՄೳʹͳΔ ίʔυͷิ׬͕͍ͨ͠

Slide 20

Slide 20 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • ࡞ۀ༻σΟϨΫτϦʹҠಈͯ͠ɺ  λʔϛφϧͰ࣍ͷίϚϯυΛ࣮ߦ͢Δ ύοέʔδྨΛΠϯετʔϧ ※Node.jsͷΠϯετʔϧʹ͍ͭͯ͸ׂѪ

Slide 21

Slide 21 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • λʔϛφϧͰ࣍ͷίϚϯυΛ࣮ߦ͢Δ tsconﬁg.jsonΛ४උ͢Δ • tsconﬁg.jsonͷઃఆΛมߋ͢ΔʢҰ෦ൈਮʣ

Slide 22

Slide 22 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • ֦ுࢠ.tsͷϑΝΠϧΛ࡞੒͢Δ • ϑΝΠϧͷઌ಄ʹTriple-slash directivesΛ௥Ճ • ʮPhotoshop 2015.5ʯͷ෦෼Λλʔήοτ ͷΞϓϦέʔγϣϯʹ͢Δ • εΫϦϓτ࣮૷࣌ʹίʔυͷิ׬͕ޮ͘Α͏ ʹͳͬͨ εΫϦϓτΛ࣮૷͢Δ

Slide 23

Slide 23 text

ExtendScriptͷ࠷৽։ൃ؀ڥ • PhotoshopͳͲͰ࣮ߦ͢ΔͨΊʹ͸TypeScript ΛJavaScriptʹτϥϯεύΠϧ͢Δඞཁ͕͋Δ εΫϦϓτΛτϥϯεύΠϧ͢Δ • ੜ੒͞ΕͨJavaScriptΛPhotoshopͳͲͰ࣮ߦ͢Δ

Slide 24

Slide 24 text

TypeScriptؔ࿈ Demo ExtendScriptͷ࠷৽։ൃ؀ڥ

Slide 25

Slide 25 text

CEPͷ֓ཁ

Slide 26

Slide 26 text

CEPͷ֓ཁ • Adobe Common Extensibility PlatformʢCEPʣͷ ͜ͱ • HTML5ɺCSS3ɺJavaScriptͱ͍͏Webͷ։ൃٕज़ Λ࢖ͬͯɺAdobe CCΞϓϦέʔγϣϯͷΤΫες ϯγϣϯΛ࡞੒Ͱ͖Δ • CC 2014Ҏ߱͸Node.js͕૊Έࠐ·Ε͍ͯΔͷͰɺ NPM͔ΒύοέʔδΛΠϯετʔϧͯ͠  ར༻Ͱ͖Δ CEPͱ͸

Slide 27

Slide 27 text

CEPͷ֓ཁ • CEP 4͸CC 2013?͔ΒରԠ͍ͯ͠Δ • 2019/05/18ݱࡏͷ࠷৽όʔδϣϯ͸CEP 9 ͰɺCC 2019ʹ֘౰͢Δ • ಉ͡೥ʹϦϦʔε͞ΕͨΞϓϦέʔγϣϯͰ ΋CEPͷόʔδϣϯ͕ҟͳΔ͜ͱ͕͋ΔͷͰ ஫ҙ͢Δ CEPͷରԠόʔδϣϯ 1

Slide 28

Slide 28 text

CEPͷ֓ཁ • ΞϓϦέʔγϣϯ͝ͱͷCEPͷόʔδϣϯ • https://github.com/Adobe-CEP/CEP-Resources/blob/master/ CEP_9.x/Documentation/ CEP%209.0%20HTML%20Extension%20Cookbook.md#applicati ons-integrated-with-cep • Node.jsͷόʔδϣϯ • https://github.com/Adobe-CEP/CEP-Resources/blob/master/ CEP_9.x/Documentation/ CEP%209.0%20HTML%20Extension%20Cookbook.md#chromiu m-embedded-framework-cef CEPͷରԠόʔδϣϯ 2

Slide 29

Slide 29 text

CEPͷ֓ཁ • ެࣜϦϙδτϦ • https://github.com/Adobe-CEP • ެࣜυΩϡϝϯτ • https://github.com/Adobe-CEP/CEP-Resources/blob/ master/CEP_9.x/Documentation/ CEP%209.0%20HTML%20Extension%20Cookbook.md • ΞϓϦέʔγϣϯࣗಈԽ૯߹ίϛϡχςΟϑΥʔϥϜ (Japan) ͷ จॻ • https://forums.adobe.com/docs/DOC-8785 υΩϡϝϯτͳͲ

Slide 30

Slide 30 text

CEPͷ։ൃ؀ڥ

Slide 31

Slide 31 text

• CC Extension Builder͸ɺCEPͷςϯϓϨʔτ Λ࡞੒Ͱ͖ΔVS CodeͷϓϥάΠϯ CEPͷ։ൃ؀ڥ ϓϥάΠϯΛར༻͢Δ

Slide 32

Slide 32 text

CEPͷ։ൃ؀ڥ • VS Codeͷ֦ுػೳ͔ΒΠϯετʔϧ͢Δ 1. αΠυύωϧͷ֦ுػೳΛΫϦοΫ͢Δ 2. ݕࡧϑΟʔϧυʹ ʮcepʯ ͱೖྗ͢Δ 3. CC Extension BuilderΛΫϦοΫ͢Δ 4. InstallϘλϯΛΫϦοΫ͢Δ Πϯετʔϧํ๏

Slide 33

Slide 33 text

CEPͷ։ൃ؀ڥ • CEPΛΞϓϦέʔγϣϯ͔Βར༻͢ΔͨΊʹ ͸ɺύοέʔδͨ͠ZXPΛΠϯετʔϧ͢Δ ඞཁ͕͋Δ • ύοέʔδ͢Δʹ͸ূ໌ॻ΍ઐ༻ͷπʔϧ͕ ඞཁ • σόοάϞʔυΛ༗ޮʹ͢Δ͜ͱͰɺύο έʔδ͢Δ͜ͱͳ͘CEPΛ࣮ߦͰ͖Δ σόοάϞʔυʹ͍ͭͯ

Slide 34

Slide 34 text

CEPͷ։ൃ؀ڥ 1. VS CodeͷίϚϯυύϨοτΛදࣔ͢Δ 2. ݕࡧϑΟʔϧυʹ ʮcep debugʯ ͱೖྗ͢Δ 3. બ୒ࢶͷத͔ΒʮExtension Creator: Enable CEP Debug ModeʯΛબ୒͢Δ 4. ॴఆͷσΟϨΫτϦʹCEPΛઃஔ͢Δ͜ͱͰ σόοά࣮ߦͰ͖Δ Player Debug ModeΛઃఆ͢Δ

Slide 35

Slide 35 text

CEPͷ։ൃ؀ڥ ※ެࣜυΩϡϝϯτΑΓൈਮ CEPͷઃஔσΟϨΫτϦ

Slide 36

Slide 36 text

CEPΛ࡞ͬͯΈΔ

Slide 37

Slide 37 text

CEPΛ࡞ͬͯΈΔ 1. VS CodeͷίϚϯυύϨοτΛදࣔ͢Δ 2. ݕࡧϑΟʔϧυʹ ʮcreate ccʯ ͱೖྗ͢Δ 3. બ୒ࢶͷத͔ΒʮExtension Creator: Create a New CC ExtensionʯΛબ୒͢Δ ςϯϓϨʔτΛ࡞੒͢Δ 1

Slide 38

Slide 38 text

CEPΛ࡞ͬͯΈΔ 4. Extension IDΛೖྗ͢ΔύϨοτ͕දࣔ͞ΕΔɻ σϑΥϧτͰ͸ com.example.helloworld ͱೖྗ ͞Ε͍ͯΔͷͰɺ೚ҙͷIDΛೖྗͯ͠EnterΛԡ͢ 5. Extensitonͷ໊લΛೖྗ͢ΔύϨοτ͕දࣔ͞Ε Δɻ೚ҙͷ໊લΛೖྗͯ͠EnterΛԡ͢ 6. ࡞੒͢ΔςϯϓϨʔτͷܗࣜΛબ୒͢Δɻbasicɺ topcoatɺspectrumɺthemeͷ4छྨ͔Βબ୒͢Δ ςϯϓϨʔτΛ࡞੒͢Δ 2

Slide 39

Slide 39 text

CEPΛ࡞ͬͯΈΔ 7. ΤΫεςϯγϣϯ͕࣍ͷσΟϨΫτϦʹ࡞੒ ͞ΕΔ ~/Library/Application Support/Adobe/CEP/ extensions/com.example.helloworld ςϯϓϨʔτΛ࡞੒͢Δ 3

Slide 40

Slide 40 text

CEPΛ࡞ͬͯΈΔ • manifest.xml͸CEP֦ுػೳΛߏ੒͢ΔͨΊ ʹඞཁͳ৘ใ͕هࡌ͞Ε͍ͯΔ • CEP಺ͷCSXSσΟϨΫτϦʹ֨ೲ͞Ε͍ͯΔ • Α͘มߋ͢ΔՕॴ͸࣍ͷೋՕॴ • HostListλά • CEFCommandLineλά manifest.xmlͷઃఆΛ֬ೝ

Slide 41

Slide 41 text

CEPΛ࡞ͬͯΈΔ • HostListλάͰCEPΛར༻͢ΔΞϓϦέʔγϣϯΛઃఆ͢ ΔʢςϯϓϨʔτͰ͸PhotoshopͷΈ༗ޮʹͳ͍ͬͯΔʣ 1. ͷίϝϯτΞ΢τΛ֎͢ 2. Version="[18.0,99.9]" ͷόʔδϣϯNo.ʢ਺ࣈͷ෦ ෼ʣΛมߋ͢Δ • [࠷খόʔδϣϯNo., ࠷େόʔδϣϯNo.]ͱ͍͏ҙຯ manifest.xmlͷઃఆΛมߋ 1

Slide 42

Slide 42 text

CEPΛ࡞ͬͯΈΔ • CEFCommandLineλάͰNode.jsΛ༗ޮʹ͢Δ • --enable-nodejsΛ௥Ճ͢Δ manifest.xmlͷઃఆΛมߋ

Slide 43

Slide 43 text

CEPΛ࡞ͬͯΈΔ 1. Photoshop CC 2019Λىಈ͢Δ 2. ϝχϡʔ͔Βʮ΢Οϯυ΢ʼΤΫεςϯγϣϯ ʼHello World ʯΛબ୒͢Δ 3. CEPͷύωϧ͕දࣔ͞ΕΔͷͰɺ  Call ExtendScriptϘλϯΛΫϦοΫ 4. Ξϥʔτ͕දࣔ͞Εɺ ʮhello from ExtendScriptʯͱ͍͏ϝοηʔδ͕දࣔ͞ΕΔ CEPΛར༻͢Δ

Slide 44

Slide 44 text

CEPΛ࡞ͬͯΈΔ • ࣍ͷ఺Λ֬ೝ͢Δ • Player Debug Mode ͕༗ޮʹͳ͍ͬͯΔ͔ • ར༻͍ͨ͠ΞϓϦέʔγϣϯ͕   manifest.xml ͰίϝϯτΞ΢τ͞Ε͍ͯͳ͍ ͔ɺ΋͘͠͸هࡌ͕࡟আ͞Ε͍ͯͳ͍͔ • ར༻͍ͨ͠ΞϓϦέʔγϣϯͷόʔδϣϯ ͕ manifest.xml ʹؚ·Ε͍ͯΔ͔ CEP͕ಡΈࠐ·Εͳ͍৔߹

Slide 45

Slide 45 text

CEPͰ࣮ݱͰ͖Δ͜ͱ

Slide 46

Slide 46 text

ྫ͑͹ • ΞϓϦέʔγϣϯ͔Β࣮ߦ݁ՌΛड͚औͬͯ ύωϧʹදࣔ͢Δ • APIΛίʔϧͯ͠ϨεϙϯεΛऔಘ͠ɺΞϓϦ έʔγϣϯʹ౉͢ • ύωϧΛReactͰ࣮૷͢Δ • MySQLͳͲͷDBͱ࿈ܞ͢Δ CEPͰ࣮ݱͰ͖Δ͜ͱ

Slide 47

Slide 47 text

ࢀߟ • ެࣜGitHub • https://github.com/Adobe-CEP/Samples • ReactΛ࢖ͬͨαϯϓϧ • https://github.com/HendrixString/adobe- cep-react-create CEPͰ࣮ݱͰ͖Δ͜ͱ

Slide 48

Slide 48 text

σϞ 1 • GitHubͷϢʔβʔIDʹඥ෇͍͍ͯΔϦϙδτ ϦΛऔಘͯ͠ɺϩάग़ྗ • requestύοέʔδΛ࢖ͬͯɺGitHubͷAPI ʹ઀ଓ͍ͯ͠Δ CEPͰ࣮ݱͰ͖Δ͜ͱ

Slide 49

Slide 49 text

σϞ 2 • GoogleεϓϨουγʔτͱPhotoshopͷ࿈ܞ • σʔλΛऔಘͯ͠ɺυΩϡϝϯτʹ഑ஔ͞Ε ͨεϚʔτΦϒδΣΫτʢPSDʣΛஔ׵ • ࢀߟɿhttps://developers.google.com/ sheets/api/quickstart/nodejs • ্هͷαϯϓϧΛ࣮ߦ͠ͳ͍ͱtoken.json͕ ࡞ΒΕͳ͍ͷͰ஫ҙ CEPͰ࣮ݱͰ͖Δ͜ͱ

Slide 50

Slide 50 text

·ͱΊ

Slide 51

Slide 51 text

·ͱΊ • ESTK͔ΒVS CodeʴExtendScript Debugger ʹҠߦ͢Δ • CEP͸Web։ൃٕज़Λ࢖࣮ͬͯݱ͞Ε͍ͯ ͯɺεΫϦϓτ͚ͩͰ͸Ͱ͖ͳ͔ͬͨ͜ͱ͕ Ͱ͖ΔΑ͏ʹͳΔ