Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

macneko-ayu

May 18, 2019
Tweet

More Decks by macneko-ayu

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. ExtendScriptͷ
    ࠷৽։ൃ؀ڥ

    View Slide

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

    View Slide

  7. ExtendScriptͷ࠷৽։ൃ؀ڥ
    • ExtendScript ToolKitʢҎ߱ESTKʣ͸ɺ
    AdobeΞϓϦέʔγϣϯͷεΫϦϓτ։ൃ༻
    ͷσόοάπʔϧ
    • εΫϦϓτͷ࣮ߦɺ

    ม਺ʹ֨ೲ͞Εͨσʔλͷ֬ೝɺ

    ϒϨΠΫϙΠϯτΛར༻ͨ͠σόοά͕Մೳ
    ExtendScript ToolKitͱ͸

    View Slide

  8. Goodbye, 

    ExtendScript ToolKit
    ExtendScriptͷ࠷৽։ൃ؀ڥ

    View Slide

  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
    ৽ͨͳσόοάπʔϧ΁ͷҠߦ

    View Slide

  10. Hello, 

    ExtendScript Debugger
    ExtendScriptͷ࠷৽։ൃ؀ڥ

    View Slide

  11. ExtendScriptͷ࠷৽։ൃ؀ڥ
    • Adobe͕։ൃͨ͠VS Code্ͰExtendScript
    Λ༻͍ͨεΫϦϓτͷ։ൃɺσόοάɺ

    ࣮ߦΛߦ͏ͨΊͷϓϥάΠϯ
    ExtendScript Debuggerͱ͸

    View Slide

  12. ExtendScriptͷ࠷৽։ൃ؀ڥ
    • VS Codeͷ֦ுػೳ͔ΒΠϯετʔϧ͢Δ
    1. αΠυύωϧͷ֦ுػೳΛΫϦοΫ͢Δ
    2. ݕࡧϑΟʔϧυʹ
    ʮextendscriptʯ
    ͱ

    ೖྗ͢Δ
    3. ExtendScript DebuggerΛΫϦοΫ͢Δ
    4. InstallϘλϯΛΫϦοΫ͢Δ
    Πϯετʔϧํ๏

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. ৽͍͠σόοά؀ڥͰɺ

    շదͳ։ൃΛָ͠Ή…
    ʹ͸ɺ·ͩͪΐͬͱ଍Γͳ͍
    ExtendScriptͷ࠷৽։ൃ؀ڥ

    View Slide

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

    View Slide

  20. ExtendScriptͷ࠷৽։ൃ؀ڥ
    • ࡞ۀ༻σΟϨΫτϦʹҠಈͯ͠ɺ

    λʔϛφϧͰ࣍ͷίϚϯυΛ࣮ߦ͢Δ
    ύοέʔδྨΛΠϯετʔϧ
    ※Node.jsͷΠϯετʔϧʹ͍ͭͯ͸ׂѪ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. CEPͷ֓ཁ

    View Slide

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

    ར༻Ͱ͖Δ
    CEPͱ͸

    View Slide

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

    View Slide

  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

    View Slide

  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
    υΩϡϝϯτͳͲ

    View Slide

  30. CEPͷ։ൃ؀ڥ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. CEPΛ࡞ͬͯΈΔ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. CEPΛ࡞ͬͯΈΔ
    1. Photoshop CC 2019Λىಈ͢Δ
    2. ϝχϡʔ͔Βʮ΢Οϯυ΢ʼΤΫεςϯγϣϯ
    ʼHello World ʯΛબ୒͢Δ
    3. CEPͷύωϧ͕දࣔ͞ΕΔͷͰɺ

    Call ExtendScriptϘλϯΛΫϦοΫ
    4. Ξϥʔτ͕දࣔ͞Εɺ
    ʮhello from
    ExtendScriptʯͱ͍͏ϝοηʔδ͕දࣔ͞ΕΔ
    CEPΛར༻͢Δ

    View Slide

  44. CEPΛ࡞ͬͯΈΔ
    • ࣍ͷ఺Λ֬ೝ͢Δ
    • Player Debug Mode ͕༗ޮʹͳ͍ͬͯΔ͔
    • ར༻͍ͨ͠ΞϓϦέʔγϣϯ͕ 

    manifest.xml ͰίϝϯτΞ΢τ͞Ε͍ͯͳ͍
    ͔ɺ΋͘͠͸هࡌ͕࡟আ͞Ε͍ͯͳ͍͔
    • ར༻͍ͨ͠ΞϓϦέʔγϣϯͷόʔδϣϯ
    ͕ manifest.xml ʹؚ·Ε͍ͯΔ͔
    CEP͕ಡΈࠐ·Εͳ͍৔߹

    View Slide

  45. CEPͰ࣮ݱͰ͖Δ͜ͱ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  50. ·ͱΊ

    View Slide

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

    View Slide

  52. ྑ͍εΫϦϓτˍCEPϥΠϑΛʂ

    View Slide

  53. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide