20190518-3dcg-meetup-slide.pdf

2019/05/18に開催された 3DCG Meetup #15 で登壇したときの資料
https://3dmu.connpass.com/event/128459/

サンプルコード
https://github.com/macneko-ayu/20190518-3dcg-meetup-sample

Transcript

1. ExtendScriptͷ ࠷৽։ൃ؀ڥͱ CEPʹ͍ͭͯ 3DCG Meetup #15 2019/5/18 @macneko_ayu
2. ࣗݾ঺հ • @macneko_ayuʢ͜͏ͪΌΜࠇೣ·ΈΕʣ • iOSΞϓϦΤϯδχΞ • DTPͷࣗಈॲཧϓϩάϥϜͷडୗ։ൃ • DTPerͷεΫϦϓτ΋͘΋͘ձओ࠵ • https://dtpmkmk.connpass.com/
3. ࠓ೔࿩͢͜ͱ • ExtendScriptͷ࠷৽։ൃ؀ڥ • CEPͷ֓ཁ • CEPͷ։ൃ؀ڥ • CEPΛ࡞ͬͯΈΔ • CEPͰ࣮ݱͰ͖Δ͜ͱ
4. αϯϓϧίʔυ • GitHubͰެ։த • https://github.com/macneko-ayu/ 20190518-3dcg-meetup-sample
5. ExtendScriptͷ ࠷৽։ൃ؀ڥ
6. ExtendScript ToolKitɺ ࢖͍ͬͯ·͔͢ʁ ExtendScriptͷ࠷৽։ൃ؀ڥ
7. ExtendScriptͷ࠷৽։ൃ؀ڥ • ExtendScript ToolKitʢҎ߱ESTKʣ͸ɺ AdobeΞϓϦέʔγϣϯͷεΫϦϓτ։ൃ༻ ͷσόοάπʔϧ • εΫϦϓτͷ࣮ߦɺ
 ม਺ʹ֨ೲ͞Εͨσʔλͷ֬ೝɺ
 ϒϨΠΫϙΠϯτΛར༻ͨ͠σόοά͕Մೳ ExtendScript ToolKitͱ͸
8. Goodbye, 
 ExtendScript ToolKit ExtendScriptͷ࠷৽։ൃ؀ڥ
9. ExtendScriptͷ࠷৽։ൃ؀ڥ • 2018೥11݄ɺESTKͰεΫϦϓτͷ࣮ߦ͕Ͱ͖ͳ͍
 ෆ۩߹͕ൃੜͨ͠ • ࢀߟɿExtendScript Toolkit Debugger Error #1116 • 2018೥12݄ɺࠓޙ͸৽όʔδϣϯͰ͸ͳ͘ɺ
 Visual Studio CodeʢҎ߱VS CodeʣͷϓϥάΠϯͱͯ͠
 ϦϦʔε͞ΕΔ͜ͱ͕ൃද͞Εͨ • ࢀߟɿThe Future of ExtendScript Development: A VSCode Plugin ৽ͨͳσόοάπʔϧ΁ͷҠߦ
10. Hello, 
 ExtendScript Debugger ExtendScriptͷ࠷৽։ൃ؀ڥ
11. ExtendScriptͷ࠷৽։ൃ؀ڥ • Adobe͕։ൃͨ͠VS Code্ͰExtendScript Λ༻͍ͨεΫϦϓτͷ։ൃɺσόοάɺ
 ࣮ߦΛߦ͏ͨΊͷϓϥάΠϯ ExtendScript Debuggerͱ͸
12. ExtendScriptͷ࠷৽։ൃ؀ڥ • VS Codeͷ֦ுػೳ͔ΒΠϯετʔϧ͢Δ 1. αΠυύωϧͷ֦ுػೳΛΫϦοΫ͢Δ 2. ݕࡧϑΟʔϧυʹ ʮextendscriptʯ ͱ
 ೖྗ͢Δ 3. ExtendScript DebuggerΛΫϦοΫ͢Δ 4. InstallϘλϯΛΫϦοΫ͢Δ Πϯετʔϧํ๏
13. ExtendScriptͷ࠷৽։ൃ؀ڥ • ઃఆϑΝΠϧʢlaunch.jsonʣΛ༻ҙ͢Δ 1. ࡞ۀ༻ͷσΟϨΫτϦΛ࡞੒͢Δ 2. 1ͷσΟϨΫτϦΛVS CodeͰ։͘ 3. αΠυύωϧͷσόοάΛΫϦοΫ͢Δ 4. ࣃंΛΫϦοΫ͢Δ 5. ExtendScript DebugΛબ୒͢Δ 6. 1ͷσΟϨΫτϦ಺ʹlaunch.json͕Ͱ͖Δ σόοάͷ४උ
14. launch.jsonͷॳظઃఆ ※ৄࡉ͸ϓϥάΠϯͷSupported launch.json setteings:ͷ߲Λࢀর ExtendScriptͷ࠷৽։ൃ؀ڥ • σόοά࣮ߦ࣌ʹର৅ϑΝΠϧΛࢦఆ͢Δઃఆʹͳ͍ͬͯΔ
15. ExtendScriptͷ࠷৽։ൃ؀ڥ • VS Code্Ͱݱࡏ։͍͍ͯΔϑΝΠϧΛର৅ʹ͢Δઃఆ Α͘࢖͍ͬͯΔઃఆ
16. ExtendScriptͷ࠷৽։ൃ؀ڥ 1. ίϚϯυύϨοτΛ։͘ 2. ʮλʔήοτΞϓϦέʔγϣϯΛબ୒ʯΛબ ୒͢Δ 3. ࣮ߦର৅ͷΞϓϦέʔγϣϯΛબ୒͢Δ 4. αΠυύωϧͷσόοάΛΫϦοΫ͢Δ 5. ύωϧ্෦ͷ࠶ੜϘλϯΛΫϦοΫ͢Δ 6. σόοά͕࣮ߦ͞ΕΔ σόοάΛ࣮ߦ͢Δ
17. Πϯετʔϧ ʙ σόοά Demo ExtendScriptͷ࠷৽։ൃ؀ڥ
18. ৽͍͠σόοά؀ڥͰɺ
 շదͳ։ൃΛָ͠Ή… ʹ͸ɺ·ͩͪΐͬͱ଍Γͳ͍ ExtendScriptͷ࠷৽։ൃ؀ڥ
19. ExtendScriptͷ࠷৽։ൃ؀ڥ • ESTKͱൺ΂ͯExtendScript Debuggerͷෆศ ͳͱ͜Ζ͸ɺίʔυͷิ׬͕ޮ͔ͳ͍ͱ͜Ζ • ESTKͷίʔυิ׬΋࢖͍΍͘͢͸ͳ͍͕… • TypeScriptͷܕఆٛϑΝΠϧΛར༻͢Δ͜ͱ Ͱɺίʔυͷิ׬͕ՄೳʹͳΔ ίʔυͷิ׬͕͍ͨ͠
20. ExtendScriptͷ࠷৽։ൃ؀ڥ • ࡞ۀ༻σΟϨΫτϦʹҠಈͯ͠ɺ
 λʔϛφϧͰ࣍ͷίϚϯυΛ࣮ߦ͢Δ ύοέʔδྨΛΠϯετʔϧ ※Node.jsͷΠϯετʔϧʹ͍ͭͯ͸ׂѪ
21. ExtendScriptͷ࠷৽։ൃ؀ڥ • λʔϛφϧͰ࣍ͷίϚϯυΛ࣮ߦ͢Δ tsconfig.jsonΛ४උ͢Δ • tsconfig.jsonͷઃఆΛมߋ͢ΔʢҰ෦ൈਮʣ
22. ExtendScriptͷ࠷৽։ൃ؀ڥ • ֦ுࢠ.tsͷϑΝΠϧΛ࡞੒͢Δ • ϑΝΠϧͷઌ಄ʹTriple-slash directivesΛ௥Ճ • ʮPhotoshop 2015.5ʯͷ෦෼Λλʔήοτ ͷΞϓϦέʔγϣϯʹ͢Δ • εΫϦϓτ࣮૷࣌ʹίʔυͷิ׬͕ޮ͘Α͏ ʹͳͬͨ εΫϦϓτΛ࣮૷͢Δ
23. ExtendScriptͷ࠷৽։ൃ؀ڥ • PhotoshopͳͲͰ࣮ߦ͢ΔͨΊʹ͸TypeScript ΛJavaScriptʹτϥϯεύΠϧ͢Δඞཁ͕͋Δ εΫϦϓτΛτϥϯεύΠϧ͢Δ • ੜ੒͞ΕͨJavaScriptΛPhotoshopͳͲͰ࣮ߦ͢Δ
24. TypeScriptؔ࿈ Demo ExtendScriptͷ࠷৽։ൃ؀ڥ
25. CEPͷ֓ཁ
26. CEPͷ֓ཁ • Adobe Common Extensibility PlatformʢCEPʣͷ ͜ͱ • HTML5ɺCSS3ɺJavaScriptͱ͍͏Webͷ։ൃٕज़ Λ࢖ͬͯɺAdobe CCΞϓϦέʔγϣϯͷΤΫες ϯγϣϯΛ࡞੒Ͱ͖Δ • CC 2014Ҏ߱͸Node.js͕૊Έࠐ·Ε͍ͯΔͷͰɺ NPM͔ΒύοέʔδΛΠϯετʔϧͯ͠
 ར༻Ͱ͖Δ CEPͱ͸
27. CEPͷ֓ཁ • CEP 4͸CC 2013?͔ΒରԠ͍ͯ͠Δ • 2019/05/18ݱࡏͷ࠷৽όʔδϣϯ͸CEP 9 ͰɺCC 2019ʹ֘౰͢Δ • ಉ͡೥ʹϦϦʔε͞ΕͨΞϓϦέʔγϣϯͰ ΋CEPͷόʔδϣϯ͕ҟͳΔ͜ͱ͕͋ΔͷͰ ஫ҙ͢Δ CEPͷରԠόʔδϣϯ 1
28. 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
29. 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 υΩϡϝϯτͳͲ
30. CEPͷ։ൃ؀ڥ
31. • CC Extension Builder͸ɺCEPͷςϯϓϨʔτ Λ࡞੒Ͱ͖ΔVS CodeͷϓϥάΠϯ CEPͷ։ൃ؀ڥ ϓϥάΠϯΛར༻͢Δ
32. CEPͷ։ൃ؀ڥ • VS Codeͷ֦ுػೳ͔ΒΠϯετʔϧ͢Δ 1. αΠυύωϧͷ֦ுػೳΛΫϦοΫ͢Δ 2. ݕࡧϑΟʔϧυʹ ʮcepʯ ͱೖྗ͢Δ 3. CC Extension BuilderΛΫϦοΫ͢Δ 4. InstallϘλϯΛΫϦοΫ͢Δ Πϯετʔϧํ๏
33. CEPͷ։ൃ؀ڥ • CEPΛΞϓϦέʔγϣϯ͔Βར༻͢ΔͨΊʹ ͸ɺύοέʔδͨ͠ZXPΛΠϯετʔϧ͢Δ ඞཁ͕͋Δ • ύοέʔδ͢Δʹ͸ূ໌ॻ΍ઐ༻ͷπʔϧ͕ ඞཁ • σόοάϞʔυΛ༗ޮʹ͢Δ͜ͱͰɺύο έʔδ͢Δ͜ͱͳ͘CEPΛ࣮ߦͰ͖Δ σόοάϞʔυʹ͍ͭͯ
34. CEPͷ։ൃ؀ڥ 1. VS CodeͷίϚϯυύϨοτΛදࣔ͢Δ 2. ݕࡧϑΟʔϧυʹ ʮcep debugʯ ͱೖྗ͢Δ 3. બ୒ࢶͷத͔ΒʮExtension Creator: Enable CEP Debug ModeʯΛબ୒͢Δ 4. ॴఆͷσΟϨΫτϦʹCEPΛઃஔ͢Δ͜ͱͰ σόοά࣮ߦͰ͖Δ Player Debug ModeΛઃఆ͢Δ
35. CEPͷ։ൃ؀ڥ ※ެࣜυΩϡϝϯτΑΓൈਮ CEPͷઃஔσΟϨΫτϦ
36. CEPΛ࡞ͬͯΈΔ
37. CEPΛ࡞ͬͯΈΔ 1. VS CodeͷίϚϯυύϨοτΛදࣔ͢Δ 2. ݕࡧϑΟʔϧυʹ ʮcreate ccʯ ͱೖྗ͢Δ 3. બ୒ࢶͷத͔ΒʮExtension Creator: Create a New CC ExtensionʯΛબ୒͢Δ ςϯϓϨʔτΛ࡞੒͢Δ 1
38. CEPΛ࡞ͬͯΈΔ 4. Extension IDΛೖྗ͢ΔύϨοτ͕දࣔ͞ΕΔɻ σϑΥϧτͰ͸ com.example.helloworld ͱೖྗ ͞Ε͍ͯΔͷͰɺ೚ҙͷIDΛೖྗͯ͠EnterΛԡ͢ 5. Extensitonͷ໊લΛೖྗ͢ΔύϨοτ͕දࣔ͞Ε Δɻ೚ҙͷ໊લΛೖྗͯ͠EnterΛԡ͢ 6. ࡞੒͢ΔςϯϓϨʔτͷܗࣜΛબ୒͢Δɻbasicɺ topcoatɺspectrumɺthemeͷ4छྨ͔Βબ୒͢Δ ςϯϓϨʔτΛ࡞੒͢Δ 2
39. CEPΛ࡞ͬͯΈΔ 7. ΤΫεςϯγϣϯ͕࣍ͷσΟϨΫτϦʹ࡞੒ ͞ΕΔ ~/Library/Application Support/Adobe/CEP/ extensions/com.example.helloworld ςϯϓϨʔτΛ࡞੒͢Δ 3
40. CEPΛ࡞ͬͯΈΔ • manifest.xml͸CEP֦ுػೳΛߏ੒͢ΔͨΊ ʹඞཁͳ৘ใ͕هࡌ͞Ε͍ͯΔ • CEP಺ͷCSXSσΟϨΫτϦʹ֨ೲ͞Ε͍ͯΔ • Α͘มߋ͢ΔՕॴ͸࣍ͷೋՕॴ • HostListλά • CEFCommandLineλά manifest.xmlͷઃఆΛ֬ೝ
41. CEPΛ࡞ͬͯΈΔ • HostListλάͰCEPΛར༻͢ΔΞϓϦέʔγϣϯΛઃఆ͢ ΔʢςϯϓϨʔτͰ͸PhotoshopͷΈ༗ޮʹͳ͍ͬͯΔʣ 1. <Host … />ͷίϝϯτΞ΢τΛ֎͢ 2. Version="[18.0,99.9]" ͷόʔδϣϯNo.ʢ਺ࣈͷ෦ ෼ʣΛมߋ͢Δ • [࠷খόʔδϣϯNo., ࠷େόʔδϣϯNo.]ͱ͍͏ҙຯ manifest.xmlͷઃఆΛมߋ 1
42. CEPΛ࡞ͬͯΈΔ • CEFCommandLineλάͰNode.jsΛ༗ޮʹ͢Δ • <Parameter>--enable-nodejs</Parameter>Λ௥Ճ͢Δ manifest.xmlͷઃఆΛมߋ
43. CEPΛ࡞ͬͯΈΔ 1. Photoshop CC 2019Λىಈ͢Δ 2. ϝχϡʔ͔Βʮ΢Οϯυ΢ʼΤΫεςϯγϣϯ ʼHello World ʯΛબ୒͢Δ 3. CEPͷύωϧ͕දࣔ͞ΕΔͷͰɺ
 Call ExtendScriptϘλϯΛΫϦοΫ 4. Ξϥʔτ͕දࣔ͞Εɺ ʮhello from ExtendScriptʯͱ͍͏ϝοηʔδ͕දࣔ͞ΕΔ CEPΛར༻͢Δ
44. CEPΛ࡞ͬͯΈΔ • ࣍ͷ఺Λ֬ೝ͢Δ • Player Debug Mode ͕༗ޮʹͳ͍ͬͯΔ͔ • ར༻͍ͨ͠ΞϓϦέʔγϣϯ͕ 
 manifest.xml ͰίϝϯτΞ΢τ͞Ε͍ͯͳ͍ ͔ɺ΋͘͠͸هࡌ͕࡟আ͞Ε͍ͯͳ͍͔ • ར༻͍ͨ͠ΞϓϦέʔγϣϯͷόʔδϣϯ ͕ manifest.xml ʹؚ·Ε͍ͯΔ͔ CEP͕ಡΈࠐ·Εͳ͍৔߹
45. CEPͰ࣮ݱͰ͖Δ͜ͱ
46. ྫ͑͹ • ΞϓϦέʔγϣϯ͔Β࣮ߦ݁ՌΛड͚औͬͯ ύωϧʹදࣔ͢Δ • APIΛίʔϧͯ͠ϨεϙϯεΛऔಘ͠ɺΞϓϦ έʔγϣϯʹ౉͢ • ύωϧΛReactͰ࣮૷͢Δ • MySQLͳͲͷDBͱ࿈ܞ͢Δ CEPͰ࣮ݱͰ͖Δ͜ͱ
47. ࢀߟ • ެࣜGitHub • https://github.com/Adobe-CEP/Samples • ReactΛ࢖ͬͨαϯϓϧ • https://github.com/HendrixString/adobe- cep-react-create CEPͰ࣮ݱͰ͖Δ͜ͱ
48. σϞ 1 • GitHubͷϢʔβʔIDʹඥ෇͍͍ͯΔϦϙδτ ϦΛऔಘͯ͠ɺϩάग़ྗ • requestύοέʔδΛ࢖ͬͯɺGitHubͷAPI ʹ઀ଓ͍ͯ͠Δ CEPͰ࣮ݱͰ͖Δ͜ͱ
49. σϞ 2 • GoogleεϓϨουγʔτͱPhotoshopͷ࿈ܞ • σʔλΛऔಘͯ͠ɺυΩϡϝϯτʹ഑ஔ͞Ε ͨεϚʔτΦϒδΣΫτʢPSDʣΛஔ׵ • ࢀߟɿhttps://developers.google.com/ sheets/api/quickstart/nodejs • ্هͷαϯϓϧΛ࣮ߦ͠ͳ͍ͱtoken.json͕ ࡞ΒΕͳ͍ͷͰ஫ҙ CEPͰ࣮ݱͰ͖Δ͜ͱ
50. ·ͱΊ
51. ·ͱΊ • ESTK͔ΒVS CodeʴExtendScript Debugger ʹҠߦ͢Δ • CEP͸Web։ൃٕज़Λ࢖࣮ͬͯݱ͞Ε͍ͯ ͯɺεΫϦϓτ͚ͩͰ͸Ͱ͖ͳ͔ͬͨ͜ͱ͕ Ͱ͖ΔΑ͏ʹͳΔ
52. ྑ͍εΫϦϓτˍCEPϥΠϑΛʂ
53. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠