MENU

【Photoshop】拡張機能のカスタムパネルのデザインの調整方法について

f:id:min0124:20160828093050p:plain

【Photoshop】拡張機能でカスタムパネルを作成する方法 - CGメソッド

前回、カスタムパネルを作成してみた訳ですが、見た目を少し調整してみました。

f:id:min0124:20170808211149p:plain

適当にスクリプトを追加して、タブをつけて、中はアコーディオン式に展開できるように変更。

いじり始めると止まらないので、一旦ここまで。

JSX(hostscript.jsx)

hostscript.jsxから使う機能のスクリプトを読み込んでいるのですが、さらに外部参照にしました。

  • 1.同階層にscriptsフォルダを作成して、使う機能(AAA.jsx)のスクリプトを置く

  • 2 hostscript.jsxには#include "/c/Users/ユーザー名/AppData/Roaming/Adobe/CEP/extensions/custompanel/jsx/scripts/AAA.jsx"とだけ記述

※ 相対パスだと上手く行かなかったので、絶対パスにしています。

JavaScript(main.js)

ボタンを押した時に機能が動くような記述を追加するだけ

  $("#AAA").click(function () {
            csInterface.evalScript('AAA()');
        });

HTML(index.html)

アコーディオンを追加

      <!-- 折りたたみ -->
      <div id="AAAAA" class="topcoat-button--large--cta hostFontSize" onclick="obj=document.getElementById('BBBBB').style; obj.display=(obj.display=='none')?'block':'none';">
        便利ツール
      </div>
      <!--// 折りたたみ -->

      <!-- 折りたたまれ -->
      <div id="BBBBB" style="display:none;clear:both;">

        <button id="AAA" class="topcoat-button--large hostFontSize">あいうえお</button>

      </div>
      <!--// 折りたたまれ -->

最初から展開する場合は

    <!-- 折りたたみ -->
      <div id="AAAAA" class="topcoat-button--large--cta hostFontSize" onclick="obj=document.getElementById('BBBBB').style; obj.display=(obj.display=='block')?'none':'block';">
        便利ツール
      </div>
      <!--// 折りたたみ -->

      <!-- 折りたたまれ -->
      <div id="BBBBB" style="display:block;clear:both;">

        <button id="AAA" class="topcoat-button--large hostFontSize">あいうえお</button>

      </div>

タブを追加

ヘッド<head></head>間に下記のコードを追加

<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>

ボディ<body></body>の中の先頭に下記のコードを追加

  <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>

タブの中身

先頭は <div class="tabContent active"></div>

残りは <div class="tabContent"></div> で区切る

※CSSも設定しないと上手くタブが作動しません。

CSS(styles.css)

変更したところ

ボタンのラベルを中央合わせに

div { text-align : center ; }

ボタンのサイズをまとめて記述

#A,#B,#C{
    width: 100%;
}

タブ関係

ul.tab {
      width: 100%;
      list-style: none;
      padding-left: 0;
}
ul.tab li {
    float: left;
    height: 30px;
    font-family:inherit;
    vertical-align: middle;
    color:inherit;
    font-size:inherit;
    text-align: center;
    width: 33.3%;
    padding: 0 10px;
    background-color: #595b5b;
    color: #fff;
    cursor: default;
}
ul.tab li:hover {
    background-color: #539fe1;
    color: #fff;
}
ul.tab li.active {
    background-color: #368bdc;
    color: #fff;
}
div.tabContent {
    clear: both;
    width: 100%;
    display: none;
}
div.active {
    display: block;
}

参照しているスタイルシート

topcoat-desktop-dark.min.cssを使用。今のところ特に変更してません。

XML(manifest.xml)

パネル名、拡張機能名がhelloworldのままだったので、Custom Panelに変更しました。

※ Photoshopを再起動しないと変更されません。

参考