С чего начать своё расширение для Photoshop, Illustrator и др. на HTML5

    Hello Habrahabr Panel

    В этой статье я расскажу как при помощи HTML и JavaScript сделать своё собственное расширение для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign.



    С июня 2013-го года Adobe добавила поддержку HTML5 для расширений, тем самым упростив их создание.

    Сразу замечу, что сам я дизайнер и к программированию имею очень посредственное отношение, так что прошу прощения за возможные ошибки в терминологии.

    Инструменты


    Для работы нам понадобятся любимый текстовый редактор и базовые знания HTML, CSS и JavaScript.
    Да-да, теперь никаких Adobe Configurator и Flash.

    Автоматизировать создание базового набора нужных файлов помогут Eclipse и Brackets/Edge Code CC.

    Из чего состоит


    Создадим простейшее расширение для Photoshop.

    Минимальный набор файлов и их структура такие:
    ExtensionName/
      CSXS/
        manifest.xml
      index.html
    

    где manifest.xml — файл с описанием всех его параметров,
    а index.html — само расширение.

    Manifest.xml содержить примерно следуюшее
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <ExtensionManifest ExtensionBundleId="com.extensionname" ExtensionBundleName="Extension Name" ExtensionBundleVersion="1.0" Version="4.0">
      <ExtensionList>
        <Extension Id="com.extensionname" Version="1.0"/>
      </ExtensionList>
      <ExecutionEnvironment>
        <HostList>
          <Host Name="PHXS" Version="[14.0,14.9]"/>
        </HostList>
        <LocaleList>
          <Locale Code="All"/>
        </LocaleList>
        <RequiredRuntimeList>
          <RequiredRuntime Name="CSXS" Version="4.0"/>
        </RequiredRuntimeList>
      </ExecutionEnvironment>
      <DispatchInfoList>
        <Extension Id="com.extensionname">
          <DispatchInfo>
            <Resources>
              <MainPath>./index.html</MainPath>
            </Resources>
            <UI>
              <Type>Panel</Type>
              <Menu>ExtensionName</Menu>
              <Geometry>
                <Size>
                  <Height>400</Height>
                  <Width>400</Width>
                </Size>
              </Geometry>
            </UI>
          </DispatchInfo>
        </Extension>
      </DispatchInfoList>
    </ExtensionManifest>
    

    Подробное описание всех параметров

    а в index.html, всё что душе угодно. Например:
    <!doctype html>
    <html>
      <body>
        Hello Habrahabr!
      </body>
    </html>
    

    Вот и всё.
    Наше первое расширение готово.

    Запуск



    Для запуска неподписанных приложений нужно включить PlayerDebugMode.
    Для этого нужно добавить ключ PlayerDebugMod со значением String равным 1
    OS X: ~/Library/Preferences/com.adobe.CSXS.4.plist
    Windows: HKEY_CURRENT_USER/Software/Adobe/CSXS.4
    


    Далее папку с созданным расширением нужно положить сюда
    OS X: ~/Library/Application Support/Adobe/CEPServiceManager4/extensions/
    Windows: %APPDATA%\Adobe\CEPServiceManager4\extensions
    

    Запустить Фотошоп и выбрать в меню Window > Extensions > наше расширение

    First Panel

    Все дальнейшие изменения можно вносить прямо в папке CEPServiceManager4\extensions.
    О том как вносить изменения без перезапуска Фотошопа ниже


    Debugging


    Для того, чтобы включить этот режим нужно создать в корневой папке расширения файл .debug,
    ExtensionName/
      .debug
      CSXS/
        manifest.xml
      index.html
    

    содержание которого примерно следующее
    <?xml version="1.0" encoding="UTF-8"?> 
    <ExtensionList>
        <Extension Id="com.extensionname">
            <HostList>
               <Host Name="PHXS" Port="8088"/> 
            </HostList>
        </Extension>
    </ExtensionList>
    


    где Extension Id=«com.extensionname» — ID нашего расширения,
    а Port=«8088» — порт для подключения.

    В браузере откроем ссылку http://localhost:8088,
    localhost:8088

    выберем наш index.html.
    И вот они Developer Tools
    Developer Tools

    Проверено в Safari и Chrome

    Инструменты упрощающие жизнь


    Adobe Edge Code CC/Brackets

    David Deraedt сделал замечательное расширение для этих редакторов Creative Cloud Extension Builder for Brackets

    Оно автоматически создаёт:
    • все нужные файлы в нужном месте для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign на выбор
    • библиотеки jQuery и CSInterface
    • шаблон для иконки
    • свою библиотеку оформления всех элементов интерфейса в стиле Adobe
    • скрипт автоматического перекрашивания панели в цвет интерфейса приложения
    • кнопочку «Refresh»
    • .debug со всеми прописанными данными

    Главными плюсами являются набор всего нужного и возможность редактирования расширения без необходимости перезапускать программу

    После установки расширения в Edge Code CC выбираем File > New Creative Cloud Extension
    Creative Cloud Extension Builder for Brackets

    Вносим нужные правки в index.html
    Edge Code CC

    Сохраняем. Запускаем фотошоп и открываем то, что получилось.
    HelloHabr Extension

    Обратите внимание на маленькую кнопочку «Rf» в правом верхнем углу — она позволяет перезагружать расширение без перезагрузки фотошопа.

    Кстати, все скрипты работающие непосредственно с функциональностью фотошопа хранятся в папке jsx папки расширения.

    Eclipse

    Для этого редактора скачиваем это дополнениеAdobe Extension Builder 3 и устанавливаем его.

    Оно создаёт:
    • шаблоны для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign
    • библиотеки jQuery и CSInterface
    • свою библиотеку оформления всех элементов интерфейса в стиле Adobe
    • скрипт автоматического перекрашивания расширения в цвет интерфейса приложения


    Суть примерно такая же как и в первом случае.
    Только вот очень неудобно, что для просмотра внесённых изменений нужно каждый раз перезапускать фотшоп.
    Также нет иконки и .debug-файла.
    Да и сам Eclipse тяжелее на подъём.

    Eclipse1
    Eclipse2
    Eclipse3

    Сборка в ZXP


    Последний этап — собрать результат в ZXP-файл и подписать его.
    За неимением под рукой Windows, расскажу как это делается в OS X.
    Для этого скачиваем CC Extensions Signing Toolkit

    Открываем терминал и получаем сертификат командой
    ZXPSignCmd -selfSignedCert <countryCode> <stateOrProvince> <organization> <commonName> <password> <outputPath.p12>
    

    пример
    ZXPSignCmd -selfSignedCert RU RU Saint-Petersburg "My Company" "Igor Volkov" myPassword myCertificate.p12
    

    Полсле того, как сертификат получен пакуем наше расширение в ZXP с использованием этого сертификата.
    ZXPSignCmd -sign <inputDirectory> <outputZxp> <p12> <p12Password>

    пример
    ./ZXPSignCmd -sign HelloHabrahabr/ HelloHabrahabr.zxp myCertificate.p12 myPassword


    На этом всё.
    Надеюсь, статья поможет многим сделать первый шаг в сторону разработки своих улучшений всеми известных программ.

    Полезные ссылки


    HTML Panel Tips by Davide Barranca — несколько полезных статей на тему
    Introduction To Photoshop Scripting By Kamil Khadeyev — с чего начать свой первый скрипт для Фотошопа.
    USING The Adobe Eextension SDK — подробная инструкция от Adobe
    Adobe Photoshop Scripting — документация по написанию скриптов от Adobe

    A Short Guide to HTML5 Extensibility — примерно тоже, что я описал в первой части своей статьи
    Introducing HTML5 Extensions — пара вводных видео для работы с Eclipse
    Adobe Extension Builder 3 — расширение для Eclipse и паковщик в ZXP-файлы
    Creative Cloud Extension Builder for Brackets — расширение для Adobe Edge Code CC/Brackets
    Метки:
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 13
    • +1
      Хммм.
      И будет доступ ко всему функционалу фотошопа?
      Если нет, то вижу пару вариантов использования:
      1. Алёрты (Twitter, Facebook, VK и т.д).
      2. Рандомные сиськи/котики/цитатки.
      3. Таймер, может быть даже тайм-трекер.
      4. Заметки.
      5. Что-то вроде Steremood.
      • +2
        Да, ко всей функциональности через jsx + сиськи-твиттер, навыбор или вместе
      • 0
        Интересный материал, но сразу вопрос: Можно ли с помощью данного api загрузить файл в специфичном (не поддерживаемым нативно в фотошопе) формате? Ну и соответственно в нём же и выгрузить?
        • 0
          Думаю, можно в панельке сделать загрузчик который будет отправлять файл на сервер(или в другое приложение), где он будет конвертироваться в поддерживаемый формат и отправляться обратно для открытия.
        • +3
          Это только для СС?
          • +7
            Статья была бы намного ценнее если бы в ней был не только Hello World, а еще хотя бы пример работы с цветом, с каналами или гайдами, то есть какой-то реальный функционал, а так общее впечатление конечно получили, но вот в бой бросаться писать пока рано, не понятно как к основному функционалу шопа обращаться.
            • +2
              Поддерживаю, однако мне кажется доступ такой же как и в стандартных скриптах: www.adobe.com/devnet/photoshop/scripting.html API там очень своеобразный. Я бы рекомендовал установить Scripting Listener plug-in — он записывает действия пользователя в скриптовом виде и так получается удобнее писать скрипты — выполнил действие, скопировал кусок кода, подправил параметры.
              • 0
                Вот за это реально большое спасибо, не знал что так можно!
              • 0
                Обязательно, в ближайшее время, выложу статью по написанию простой панельки.
                Для управления функциональностью фотшопа используется javascript. Ссылка на описание есть внизу статьи и в комментариях.
                HTML5 же используется для создания интерфейса к этим скриптам и дополнительной функциональности.
                • 0
                  Уважаемый enotus, скоро уже год минет, где же обещанная статья по написанию простой панельки? ;)
                  • 0
                    А что хотелось бы узнать? Я тут по случае погрузился в тему, может наберется на первую статью, а то мне вечно кажется что тут все все знают и писать не о чем.
              • +1
                Наконец-то! Добавлю кнопку «Сделать 3,14здато! красиво!»

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.