おすすめのVRヘッドセット

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

photoshop-custom-panel-include

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

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

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

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.



感想

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

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



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

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


eyecatch-amazon-kindle-unlimited
【Kindle Unlimited】CG・DTP・Webデザイナーにおすすめの読み放題サービス[圧倒的コスパ!]