CG・映像デザイナー技術ブログ
BOOTHにて自作データ販売中!

【Photoshop】拡張機能のカスタムパネルのデータを外部参照する方法

0

拡張機能のカスタムパネルの内容を更新するときに

  • hostscript.jsx
  • main.js
  • index.html

を変更して、それぞれの環境でデータを差し替えしていたのですが、手間なので外部参照してみました。

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

jsxの外部参照方法

#include "/C/Users/Namae/AppData/Roaming/Adobe/CEP/extensions/custompanel/jsx/hostscript.jsx"

というふうに参照先のパスを書くだけ。

参照先がさらにインクルードされていても、参照されます。

jsの外部参照方法

index.htmlに<script src="js/main.js"></script>と書かれている部分を

<script src="C:/Users/Namae/AppData/Roaming/Adobe/CEP/extensions/custompanel/js/main.js"></script>

というふうに参照先のパスを書くだけ。

htmlの外部参照方法

ここは手間取りました。

まずはinclude.js作成。

function include(filename, afterfunc) {
    include.seq = (include.seq) ? include.seq + 1 : 1;
    var id = new Date().getTime() + "-" + include.seq;
    var inc = document.createElement("iframe");
    inc.id = "inc-" + id;
    inc.src = filename;
    inc.style.display = "none";
    document.write("<span id=\"" + id + "\"></span>");
    var incfunc = function() {
        var s = (function() {
            var suffix = (n = filename.lastIndexOf(".")) >= 0 ? filename.substring(n) : "default";
            if (suffix == ".html") return inc.contentWindow.document.body.innerHTML;
            if (suffix == ".txt") return inc.contentWindow.document.body.firstChild.innerHTML;
            if (suffix == "default") return inc.contentWindow.document.body.innerHTML;
        })();
        var span = document.getElementById(id);
        var insertBeforeHTML = function(htmlStr, refNode) {
            if (document.createRange) {
                var range = document.createRange();
                range.setStartBefore(refNode);
                refNode.parentNode.insertBefore(range.createContextualFragment(htmlStr), refNode);
            } else {
                refNode.insertAdjacentHTML('BeforeBegin', htmlStr);
            }
        };
        insertBeforeHTML(s.split(">").join(">").split("<").join("<"), span);
        document.body.removeChild(inc);
        span.parentNode.removeChild(span);
        if (afterfunc) afterfunc();
    };
    if (window.attachEvent) {
        window.attachEvent('onload',
            function() {
                document.body.appendChild(inc);
                inc.onreadystatechange = function() {
                    if (this.readyState == "complete") incfunc();
                };
            });
    } else {
        document.body.appendChild(inc);
        inc.onload = incfunc;
    }
}

あとはindex.htmlの中にインクルードするだけです。

< !doctype html >
    < html >
    < head >
    < meta charset = "utf-8" >
    < link rel = "stylesheet"
href = "css/topcoat-desktop-dark.min.css" / >
    < link id = "hostStyle"
rel = "stylesheet"
href = "css/styles.css" / >
    < script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" > < /script> < script >
    $(function() {
        $(".tab li").click(function() {
            var num = $(".tab li").index(this);
            $(".tabContent").removeClass('active');
            $(".tabContent").eq(num).addClass('active');
            $(".tab li").removeClass('active');
            $(this).addClass('active')
        });
    }); < /script> < title > < /title> < /head> < body class = "hostElt" >
    < ul class = "tab" >
    < li class = "topcoat-button--large hostFontSize active" > メニューA < /li> < li class = "topcoat-button--large hostFontSize" > メニューB < /li> < li class = "topcoat-button--large hostFontSize" > メニューC < /li> < /ul> < script type = "text/javascript"
src = "js/include.js" > < /script> < script type = "text/javascript" >
    include("C:/Users/Namae/AppData/Roaming/Adobe/CEP/extensions/custompanel/contents.html"); < /script>

※中身の参照先contents.htmlの内容はindex.hemlの後半部分

静的HTMLで、インクルードを実現するためのJavaScript – on the center line.

拡張機能のカスタムパネルのデータを外部参照する方法まとめ

ちょっとでも間違うと、何も動かなくなってしまうので、バックアップは必須です。

いつも思うのですが、もう少し簡単に拡張や参照できたらなぁとは思います。

Photoshopに関する参考記事・ツール・書籍のまとめ

Photoshopに関する記事を下記にまとめました。



photoshop-summary-article


便利な機能紹介!Photoshopに関する作り方まとめ



photoshop-summary-article


作業効率化!Phoshopスクリプトに関する作り方まとめ

フォトショップのソフトウェア購入


eyecatch-buy-adobe-creative-cloud
【Adobe Creative Cloud】最安!アドビ認定スクールから購入する方法(+講座付き)

フォトショップの参考書籍

すいみん
独学で勉強できてしまうPhotoshopですが、他の人の手法を見ると全然使いこなせてなかったことに気がつくこともあります

おすすめの参考書籍紹介

CG制作に役立つ書籍の紹介です。

すいみん
専門誌の定期購読をするなら月額980円の「Kindle Unlimited」がおすすめです!


eyecatch-amazon-kindle-unlimited
【Kindle Unlimited】CGデザイナーにおすすめ!専門書読み放題の電子書籍サービス

すいみん
「この筋肉を伸ばすと、なぜ疲れがとれるのか」を丁寧に図解している本です!

以上、すいみん(@cg_method)でした!

0