Photoshop

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

photoshop-custom-panel-design

【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 ; }

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

.topcoat-button--large--cta{
width: 100%;
}
.topcoat-button--large{
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を再起動しないと変更されません。

参考

ABOUT ME
すいみん
名前:すいみん 東京在住のデザイナー DTP・映像・3D・プログラミングまで、 なんでも自分で試して作ることが好きです。 ブログはその備忘録です。