UXP новая универсальная платфрма расширений
Adobe в версии Photoshop 2020 представила новую UXP архитектуру плагинов 3 поколения, так было заявленио на конференции MAX2020
UXP (Unified Extensibility Platform) платформа уже внедряется в течении 2 лет, на этой платформе сделаны многие элементы интерфейса Adobe программ — стартовые страницы, диалог создания нового документа? галерея нейронных фильтров в PS2021 и т.п. Предполагается развитие платформы на базе Adobe XD, как приложения для разработки интерфейсов плагинов, программная часть разрабатывается как и раньше в любых удобных редакторах кода. На момент написания статьи в доступе около 300 плагинов на базе платформы UXP.
В концепции UXP теперь все расширения и панели называются плагинами и ни как по другому.
Схема взаимодействия UXP и Adobe приложений:
На схеме мы видим, UXP представляет собой общий высоко технологический стек, обеспечивающий современную высокоскоростную среду выполнения JavaScript движка, этот стек включает в себя общий набор API для доступа к сети, файловой системе, Dom модели HTML, системе визуализации, модели ML для обработки данных и вывода данных, а также API для доступа к службам Creative Cloud от имени пользователя, таким как библиотеки и облачные документы. Он также включает в себя слой пользовательского интерфейса, напоминающий React Native, для размещения собственных элементов управления совместимые c HTML и CSS. UXP имеет связи с конкретными API хостов, для взаимодействия с приложением и самим документом.
Унифицированная Среда Выполнения JavaScript
При создании панелей с помощью CEP мы не могли напрямую взаимодействовать с Photoshop — вместо этого мы использовали evalScript для передачи управления коду, работающему в среде ExtendScript, которая содержит API для связи с хост-приложением.
Для такого взаимодействия требоваться поддерживать два Java движка и две среды выполнения кода. Передача кода и данных по этому способу происходит медленно и невероятно трудно отлаживается. Единая среда выполнения позволяет UXP UI и бизнес-логике совместно использовать один и тот же высокоскоростной нативный Java движок, а это означает, что больше нет необходимости использовать evalScript!
Современная Среда Выполнения JavaScript
При использовании ExtendScript код выполнялся в среде JavaScript, основанной на стандарте ECMAScript 3 1999 года. Старый стандарт ограничивал возможности ExtendScript. Современные движки JavaScript значительно продвинулись в производительности и экономичном использовании оперативной памяти. UXP платформа, использует качестве виртуальной машины JavaScript версии V8.
Общие API
Cуществует общий набор API, к которым плагинам нужен доступ, независимо от хост-приложения. К ним относятся, файловая система ввода-вывода и сеть. Там, где это возможно, UXP следует существующим стандартам, например, сетевой ввод-вывод осуществляется с помощью API XMLHttpRequest, fetch и websocket.
API Хосты
Каждый хост-продукт имеет свою схему для взаимодействия с приложением и открытым документом, и UXP позволяет хост-продукту предоставлять эти API непосредственно разработчику. То, как выглядят эти хост-API, будет зависеть от конкретного приложения.
Пользовательский интерфейс
UXP использует HTML и CSS в дополнение к собственным виджетам для создания быстрого и адаптивного пользовательского интерфейса, который используется хост-приложением как собственный интерфейс. То есть мы продолжим использовать HTML и CSS для создания интерфейса, а UXP будет транслировать этот интерфейс как родную среду хост-приложения.
Теперь в UXP будут доступны элементы управления интерфейса от Spectrum UI, это позволит пользоваться общими элементами управления, шаблонами дизайна и поддержкой без необходимости тратить часы на воссоздание внешнего вида каждого приложения в пользовательском интерфейсе вашего плагина.
И так из плюсов новой платформы плагины будут работать быстрее, а создавать их будет проще, интерфейсы станут намного интереснее. Однозначно установка плагинов упростилась, после их загрузки они сразу доступны без перезапуска программы.
Теперь о минусах, панели уже вынесены в меню, как устаревшие расширения, не исключено, что на какой-то версии они будут исключены, также как когда то были исключены панели на Flash. Абсолютно изменится структура кода скрипта, все придется переписывать, и это не только вопрос синтаксиса, а в большей степени это изменение DOM модели в среде UXP, а это меняет все, будем надеяться к лучшему.
Создаем первый UXP плагин для Photoshop
Итак платформа UXP в строю, учимся с ней работать.
Платформа еще сырая, некоторые ссылки внутри разделов документации ведут на пустые срамницы, они еще в разработке, но основа уже есть.
Качаем программу для создания и управления плагинами Adobe UXP Developer Tool, устанавливаем и запускаем.
Для работы потребуется Photoshop верией не ниже 22.00.00, запускаем его.
В программе Adobe UXP Developer Tool нажимаем кнопку Create Plugin:
Заполняем поля, для первого примера из шаблонов выбираем ps-starter — простой плагин основанный на JavaScript без дополнительных библиотек.
Далее нажимаем кнопку Select Folder — выбираем папку, где будет располагаться наш плагин.
В программе UXP Developer Tool появится запись об установленном плагине, заходим в меню и выбираем load:
После этого в Photoshop откроется панель тестового плагина:
в этом плагине при нажатии на кнопу на панель выводится список слоев в документе. Можно изучать содержимое папки с плагином:
основные файлы manifest.json — описание плагина, основная информация, размеры панели плагина, аналогично манифесту из CEP, но синтаксис уже другой. Index.html — как обычно это интерфейс плагина на html. Index.js — JavaScript код плагина:
Как можно заметить, что из единого JavaScript плагин может обращаться как к элементам HTML, так, и к API Photoshop и это очень здорово!
Рассмотрим создание плагина с библиотекой React. Создание плагина отличается выбором шаблона — вместо ps-starter выбираем ps-react-starter. При попытке загрузить в программе UXP Developer Tool — получаем ошибку:
Открываем папку созданного проект в VS Code и действуем по инструкции:
Открываем терминал из меню VS Code — Терминал — Создать терминал.
Выполняем команды из инструкции:
результат должен выглядеть примерно так:
если при выполнении команды появится ошибка:
запускаем PowerShell с правами администратора из строки поиска (Win 10):
в PowerShell запускаем команду:
подтверждаем a + Enter:
В терминале VS Code повторяем команду:
Теперь в программе UXP Developer Tool загружаем наш плагин:
В Photoshop откроются 2 панели тестовых плагинов:
Можно изучать структуру файлов и содержимое плагина.
DevTools для «чайников»
Недавно на базе Владимирского Института информационных технологий и радиоэлектроники прошла очередная встреча VLADIMIR TECH TALKS. Технологический митап, организованный международным IT-разработчиком Altenar в формате открытого и доверительного разговора про насущные проблемы в области разработки ПО, собрал немало участников из числа начинающих и продвинутых программистов. Делимся содержанием наиболее интересных докладов.
Наиболее заметным стало выступление независимого WEB-разработчика Антона Грибанова. Он поделился своим опытом использования DevTools. На самом деле, обзорных статей по заявленной тематике для профессионалов немало. С ними легко можно ознакомиться на профильных ресурсах (тык, тык, тык, тык).
Данная статья, прежде всего, обращена к тем, кто еще находится в самом начале своего пути к программистскому Олимпу. Поэтому, если вы матерый разработчик, вас вряд ли заинтересует дальнейшее повествование. Хотя, вы можете поделиться своим богатым жизненным опытом в комментариях к публикации.
Говорим по понятиям
Инструменты разработчика (от англ. «development tools» или сокращённо «DevTools») ─ это программы, позволяющие создавать, тестировать и отлаживать (debug) программное обеспечение.
Современные браузеры, Safari, Firefox, Microsoft Edge, Chrome, Яндекс и другие, имеют встроенные инструменты разработчика, позволяющие просмотреть исходный код сайта. Отдельно устанавливать их не требуется. С их помощью можно просматривать и отлаживать HTML сайта, его CSS и Javascript. Также можно проверить сетевой трафик, потребляемый сайтом, его быстродействие и много других параметров.
В правом углу размещенной выше иллюстрации можно увидеть структуру web-страницы и стили, примененные к текущему элементу.
Типичная веб-страница представляет собой текстовый файл в формате HTML, который определяет структуру и контент страницы, а также может содержать ссылки на файлы в других форматах (текст, графические изображения, видео, аудио, базы данных и др.), а также гиперссылки для быстрого перехода на другие веб-страницы или доступа к ссылочным файлам.
Несколько веб-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками, образуют — веб-сайт. При этом образующие веб-сайт страницы могут находиться на одном или нескольких веб-серверах, которые могут располагаться в одном дата-центре или удаленно друг от друга, зачастую в разных странах.
HTML (англ. HyperText Markup Language) ─ это скелет веб-страницы. Для того, чтобы вся эта история начала двигаться и нужен Javascript (календарики, выпадающее меню, всплывающие окна, анимация и прочее, делается с помощью JS). Для придания странице божеского вида вам понадобится CSS (каскадные таблицы стилей).
Представим HTML-документ в простейшей форме:
Фактически HTML-документ состоит из элементов (строка с открывающим и закрывающим тегом и, собственно, само содержимое).
Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров применяются атрибуты тегов, они содержат информацию, которую вы не хотите показывать в фактическом контенте.
Атрибут — используется для определения характеристик html-элемента и помещается внутри открывающего тега элемента. Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения. Смотрите на пример ниже, в нем используется атрибут disabled, у которого явно не задано значение.
Если внутри какого-либо тега используется еще один или даже несколько других — это называется вложенность тегов html.
Вот тут еще можно подсмотреть описание HTML. Там доступно и наглядно все показано.
Используем DevTools на практике
Потрогать изначально скрытые браузером DevTools можно весьма просто, использовав сочетание клавиш или перейдя в раздел «Дополнительные инструменты / Инструменты Разработчика». Также можно ткнуть курсором в любое место страницы, нажать на правую клавишу мыши и выбрать «Просмотреть код».
Рассмотрим несколько вкладок из DevTools. И первый — режим эмуляции из мобильных устройств. Несмотря на десктопный браузер, страница у вас будет отображаться так, если бы вы на нее зашли с мобильного устройства. Вторая вкладка — Elements. Она демонстрирует структуру html страницы. С ее помощью браузер видит web-страницу после всего того, что с ней сделал Javascript. И Network — это сетевые запросы страницы (список web-ресурсов, загружаемых страницей для отображения демонстрируемого контента).
В панели Elements располагается дерево элементов. Здесь можно открывать теги, смотреть их содержимое, при этом в документе будет подсвечиваться текущий выбранный тег. Также можно посмотреть различные атрибуты, например, «Класс» или «Размер».
Загружаем картинки в Instagram с компьютера
С десктопа вы абсолютно спокойно можете посмотреть свою ленту в Instagram, полайкать посты, написать комментарии. Но вот загрузить фото или видео браузер вам не даст. Вот тут-то на помощь к вам и приходит режим эмуляции мобильных устройств.
Выбираем во вкладке наиболее понравившуюся вам модель телефона и вуаля (только не забудьте обновить страницу). Заблудиться в аскетичном интерфейсе Instagram сложно. Что делать тоже интуитивно понятно.
Скачиваем видео из Instagram Stories
С помощью DevTools задача скачать видео из сторис Instagram утрачивает свою сакральность. Все до безобразия элементарно. Переходим на вкладку Network. Для удобства выбираем фильтр Media. Он покажет аудио- и видеофайлы, которые запрашивает страница. А дальше запускаем понравившееся нам видеоизображение, с прямой ссылкой на место его хранения. Ну, а далее открываем его в новом табе и выбираем место его нового хранения (например, на вашем диске).
Скачиваем аудио с музыкальных сайтов
С помощью DevTools можно также прикоснуться и к музыкальным файлам. Механика аналогичная той, что описана выше.
Скачиваем фото из Instagram
В принципе ничего не мешает в случае понравившегося изображения сделать скриншот или попытаться «Сохранить изображение как», но качество и результативность этих упражнений устроит далеко не всех. Для пытливых умов опять-таки на помощь приходит инструментарий DevTools. Выбираем «Просмотреть код», находим ссылку на изображение в атрибуте src.
Второй способ через вкладку Network. Переходим по вкладке, ставим фильтр Img и обновляем страницу. Кстати, изображения можно отсортировать по размеру, контентные картинки, как правило, на странице самые большие по размеру. Точно также, правой клавишей кликаем на файл и «Сохранить как» в наиболее удобном для вас месте.
Удаление блокираторов контента
Бывает так, что хочется посмотреть какой-либо контент, но без регистрации сайт этого сделать не дает. И снова, здравствуйте DevTools. Обычно контент закрывается плашкой или прозрачным слоем. Открываем инструменты разработчика, определяем в коде блок-элемент закрывающий нужный нам участок контента и нажимаем Delete element.
Разблокировка форм ввода
Нередко всевозможные государственные структуры, разрабатывая на Javascript различные свои электронные формы для заполнения, препятствуют нашему любимому Copy/Paste (вставка и выделение текста). В этом случае снова приходится прибегать к помощи DevTools.
В инструментах разработчика идем в Настройки. Прокручиваем до поля Debugger и нажимаем галочку Disable JavaScript. Теперь можно вставлять текст.
Второй путь ─ открываем инструменты разработчика, нажимаем заветное сочетание клавиш и выбираем поиск по командам. Там выбираем JavaScript и одним из пунктов будет выключить JavaScript. Выключаем и радуемся жизни. Кстати, после вашего Copy/Paste JavaScript не помешало бы включить обратно, поскольку некоторые формы без него могут и не работать.
Версия для печати web-страниц
Надо признать, что сайтов, требующих использования описываемых дальше костылей, становится все меньше и меньше, но они по-прежнему периодически встречаются. Тем не менее, выбираем нужный нам сайт, удаляем во вкладке Elements через инструмент разработчика с помощью Delete elements ненужные элементы и части кода (реклама, контакты, ссылки и прочее). Далее отправляем все на печать и радуемся жизни.
Узнаем сохраненный пароль
Как узнать сохраненный пароль, если браузер автоматически его подставил в закрытом режиме? Можно через настройки залезть в пароли и отыскать все концы. Но мы не ищем легких путем. Снова на связи DevTools. Выделяем правой клавишей поле с вводом пароля, далее просмотреть код, после чего появляется достаточно типичная картина.
После этого находим атрибут type, кликаем дважды на значение Password и просто удаляем его. Далее поле ввода становится по умолчанию текстовым, и мы видим сохраненным пароль.
Скачиваем видео из вКонтакте
Предлагаемый ниже рецепт несколько хитрее, чем был в случае с Instagram stories ранее, но тоже вполне земной. Заходим на мобильную версию ресурса (по сути это два разных в сравнении с десктопной версией сайта). Открываем инструмент разработчика, заходим во вкладку Сеть, в фильтрах выбираем Прочее и включаем воспроизведение видео. Далее в списке появится ссылка на проигрываемое видео, ну а дальше по накатанной: правая клавиша мыши, открываем в новой вкладке и сохраняем в любимое место на компьютере.
Давайте чаще встречаться!
Следующий митап уже 23 апреля, можно прийти лично, если вы во Владимире, или посмотреть прямую трансляцию (все минувшие видео собраны тут). Кстати, в гостях у нас будет замечательный Никита Соболев.
Все актуальные события доступны в календаре мероприятий.
8 Steps to Your First Photoshop UXP Plugin
The “Adobe UXP: Things you Need to Know!” YouTube playlist.
— Erin Finnegan, Community Engineer, Creative Cloud.
The UXP announcement
During the MAX 2020 conference Adobe officially unveiled UXP plugins (Unified eXtensibility Platform) availability for third-party developers in Photoshop 2021. It was great news, and the first stage of a transition process that in the long run aims to replace the old extensibility technology (CEP — Common Extensibility Platform) with the new UXP (Unified eXtensibility Platform).
Before anyone gets nervous: CEP isn’t going anywhere in the short-term. It’s been recently updated to v10, and will coexist alongside with UXP “for a long time” (quote from Adobe). On one hand, the extended CEP/UXP overlap period allows Adobe to better integrate the new tech with their Creative Cloud applications; on the other hand, it gives developers time to get accustomed to UXP and eventually port their products.
Sharing a learning journey
When the shiny new thing was CEP, around early 2014, I documented my own learning process with a series of blog posts titled HTML Panels Tips, mostly as a reminder to my older self — I tend to forget stuff at an annoyingly fast pace. Over time the collection grew considerably and—I’m told—it’s been of great help to other developers as well. Eventually my blog posts became the starting point of the larger Photoshop HTML Panels Development course.
With UXP I find myself in a similar situation now: I have to learn it from scratch, and I want to share my findings as I go. Truth to be told, I’m lucky enough to have been part of the limited group of developers involved with Adobe during the prerelease stages of the UXP launch, so I’ve had plenty of time to ask questions, note answers, and get lost down a number of rabbit holes.
The UXP playlist
I started recording a series of videos on UXP that are part of a freely available YouTube playlist titled Adobe UXP: Things you Need to Know! that I’m happy to present you here.
The videos are time-coded with named sections, around twenty minutes long each, for a total of
3 hours of free UXP training so far. The agenda for each episode is to pick a couple of subjects and discuss them, mostly with the help of sample code that I write from scratch so that you can follow along — because learning by doing is the best. The level varies from beginner to intermediate depending on the topic, but I get into advanced subjects as well (when needed and especially if it’s fun).
They are available directly from YouTube (English spoken with curated English subtitles), and on my blog, where I’ve been asked to publish the transcripts as well to help those who need to translate them (or for anyone who wants to do a text-based search).
There are eight of videos at the moment, but the list is growing and the project is alive. Think about them as your “eight steps to your first Photoshop UXP plugin”.
#1: Rundown of the UXP Announcement at Adobe MAX 2020
This is the longest video of the series: I cover all the highlights of the MAX 2020 announcement. Start here if you’re not sure why UXP is going to be a big deal. ( Editor’s Note: It’s also a great place to start if you have prior development experience with Creative Cloud.)
#2: Documentation
In the second video, I guide you through the new Adobe.io portal for developers and point out the relevant sections in the Doc pages — we are all going to spend a lot of time there!
#3: UXP Developer Tool
In this video, we’re going to use the UXP Developer Tool to load, reload, watch, debug, package and scaffold new UXP plugins from templates.
#4: Panels vs. Commands and the manifest.json
This time I cover the difference between Panels vs. Command-based UXP plugins, and how the manifest.json—the main entry-point—is structured.
#5: Sync vs. Async code in the UXP Photoshop DOM
In this episode I discuss the very important topic of Synchronous vs. Asynchronous code in the Photoshop Scripting DOM, and how UXP differs compared to ExtendScript in that regard.
#6: BatchPlay (part 1): the ActionManager roots
Here, I approach BatchPlay, the super-powerful Photoshop-only Scripting technique that can overcome the DOM’s limits. BatchPlay is so important (and kinda unfriendly) that it is the subject of a three part mini-series.
#7: BatchPlay (part 2): the Alchemist listener
In this second part of the mini-series, I explore BatchPlay with the help of the Alchemist plugin as a UXP Script Listener.
#8: BatchPlay (part 3): the Alchemist inspector
In the third and final part of the BatchPlay mini-series, I use the Alchemist plugin as a UXP Script Inspector.
An ongoing project
I produced the first eight videos in a burst of enthusiasm right after the MAX announcement, in the spur of the moment, and and at a very fast pace. I plan to keep going, so if you have specific requests please let me know on Twitter or in my YouTube channel. The playlist is freely available, yet your support with a donation is most welcome — because it’s been 2020 for everyone on planet Earth, my friends.
