20190518-3dcg-meetup-slide.pdf

 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

5d9485ad12417c2eb50c1c3d810a25b9?s=128

macneko-ayu

May 18, 2019
Tweet

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠