Adobe Preview 是過去與 Photoshop 配套的一款手機應用程式，這個程式可以讓使用者即時預覽自己設計的圖像在手機裝置上呈現的實際情形，透過 Adobe Preview 可以加速設計流程以及減少在不同大小裝置上測試的所需時間。
XFLAG 是手機遊戲《怪物彈珠》的開發商，對於相當吃重遊戲美術的《怪物彈珠》來說，Adobe Preview 無疑是開發團隊內部在遊戲測試上最重要也是最常使用到的 Photoshop 相關工具。但是 Adobe Preview 卻在 2017 年 10 月之後不再提供更新支援，對於這個狀況，XFLAG 最終決定要自行開發替代用的 Photoshop 元件。
2020 年 9 月 2 日，CEDEC 大會的第一日，在 XFLAG 任職，負責領導技術美術（TA）部門內程式團隊的長舩龍太郎，分享了利用 JavaScript 開發出 Photoshop 相關程式 Smartphone Preview 的過程。要開發的項目大至會分為兩個部分，分別是 Photoshop 端的附加元件（Add-on），以及手機上用來讀取檢視圖片的應用程式。
講者 長舩龍太郎
首先講者稍微介紹了 Smartphone Preview 的使用方式，主要是透過掃描 Photoshop 生成的 QR Code 之後，開啟手機端的應用程式就可以顯示出目前在 Photoshop 上編輯的圖片。除了基本的放大縮小檢視，以及手機的橫置、直立轉向對應以外，還可以透過右上角的 refresh 按鈕來刷新修改過後的圖像，更厲害的是，程式會儲存之前所檢視過的圖像，透過手指的左右滑動就可以跟前面版本的圖像做交叉對比，可以說是已具備相當程度的實用性。
接著針對 TA 程式團隊所採用的 JavaScript 工作環境配置，長舩先生也做了一個大概的簡介，這邊整理重點如下：
- 語言版本採用 ES6（ES2015）
- 安裝 Node.js 作為實行環境
- 用 npm 管理套件
- 用 nvm 切換 Node.js 版本
- 利用 Babel 來將最新版的 JavaScript 降編譯成 ES6
- 編輯器使用 PyCharm，有許多支援 JavaScript 的 plugin
- Code Style 利用 Prettier 作為風格統一工具
- debug 透過 node 指令 --inspect 開啟檢查器後，在 PyCharm 上做 debug 設定
由於團隊內使用頻率最高的語言還是以 python 壓倒性居多，其次才是 JavaScript，這點可能會影響一些工具的抉擇。
接著是 Photoshop 附加元件的開發挑戰，雖然基本上 Photoshop 附加元件都支援 JavaScript，但是在實行環境以及版本可以說是相當的混雜，加上可以查到的相關資訊不多，也沒有相關的討論社群，因此基本上都是從 GitHub 上解讀 source code。
在規格方面，希望能夠維持原本 Adobe Preview 的使用感、要能夠從 Photoshop 端及時傳送圖片資料、要支援 2017 以後版本的 Photoshop，以及必須能在 Windows \ Mac \ iOS \ Android 等平台上使用。
圖片資料的傳送，採用的作法是從 Photoshop 內建立一個可以接收外部 request 的 HTTP server，實現這個做法的是 Photoshop 上一個叫做 Generator 的 plugin，這個 plugin 可以透過 JavaScript 將 Photoshop 內部的 event 給 hook 出來，可以透過這個方式將圖像資料抽取成 PNG 格式，之後再透過 Node.js 的 express 套件建立 HTTP server，如此一來就可以透過外部 request 取得 PNG 檔案。之後再透過 Node.js 的相關套件來產生 QR Code。
Adobe generator 的 github 頁面
https://github.com/adobe-photoshop/generator-core
擴充功能的介面，則是透過 Adobe CEP 來繪製。透過 Adobe CEP 可以在 Photoshop 介面添增使用 HTML 的 GUI 介面，如此就可以將 QR Code 顯示在 Photoshop 中。
Adobe CEP 的 github 頁面
https://github.com/adobe-cep
但隨之而來的問題是，要使用 HTML 來繪製應用程式的 GUI 介面實在是很不直覺，簡單的需求或許還好，但若是功能慢慢增加，在修改與管理上可能會有點問題。因此在這邊引入了 Vue.js，這個 Web 應用框架採用響應式系統，可以將輕易的將表單跟變數綁定在一起並監視其變化。
至此，已經可以透過手機端的瀏覽器直接取得圖像。
除了最常用的 LAN 模式之外，也加入了 Google Drive 的功能
接下來的課題是手機端的應用程式開發。在需求方面有以下幾項重點：
- 圖像的放大縮小
- 將圖像一鍵調整成適合畫面大小的機能
- 易用性的提升
- 同時要能支援 iOS 跟 Android
此外，由於負責的開發人員只有一名，所以希望能盡可能降低開發的負擔，避免使用 Java 或是 Swift 這種原生語言，考慮到開發人員沒有使用 Unity 的經驗，最後決定以網頁應用程式的形式進行開發。
首先開發出來的第一個版本，是在網頁瀏覽器上運行的非常簡單的應用程式，按鈕也是在圖片上再疊一層控制面板，這個做法除了要不斷地由手機端向 Photoshop 傳送 request 才可以取得最新的畫像之外，最大的問題點是不能以全螢幕展現圖像。
接下來的版本二，為了要能以全螢幕顯現，使用了 PWA（Progressive Web Apps）技術，將網頁變成一個應用程式，如此一來既不會有瀏覽器的框框，甚至還可以調用手機的照相機，而且就算是沒有連接網路也還是可以啟動應用程式，一切聽起來都很美好。
但是，實際使用的時候卻發現，針對各個機型、作業系統、版本不同等等因素而衍生出來的錯誤非常非常多，造成開發上非常大的負擔，因此最終這個版本還是不可行。
至此，開發團隊認為若是由非手機原生語言開發出來的東西，在實際使用上會有諸多問題，但專案至此要整個打掉重練也不太可能，因此決定使用 Cordova 來試看看，Cordova 是一個可以讓網頁工程師不會手機原生語言也能進行手機應用程式開發的框架，可以單純使用 HTML+JavaScript 進行開發，而且也有一些相關 plugin 可以使用，像是休眠防止功能之類的。透過 Cordova，總算是讓 Smartphone Preview 的開發得以順利完成。
不過身為支援軟體的開發者，並不是把 app 開發出來後工作就完成了，開發團隊對於這個工具的使用頻率如何？是不是還有可能產生的錯誤？這些相關資訊都需要做追蹤，對此團隊使用了 Bugsnag 來做追蹤，將每個月的使用次數以及使用者資訊以 Google 試算表以及 SHOTGUN 上的可視化圖表來作呈現。
技術美術在遊戲業算是一個相對罕見的職位，希望透過這次的聽講記錄，可以讓讀者一窺這個職位的工作內容。
