<どんなプラグインか?>

まずは簡単なものからということで、「Photoshopのドキュメントにガイドを引くツール」を作ります。

一番需要がありそうなのは「数値を打ち込んでガイドを引くモノ」だと思われますが、それですとわざわざCEPパネルでUIを作り込む動機が弱いので、今回は「選択範囲の周辺にガイドを引く」というものにします。

 

<スクリプトで実現可能かのアタリをつける>

複雑なスクリプトを実行するツールを作る場合は、まず動作単位でスクリプトをチェックし、それぞれ「これならいけそうだ」というアタリをつけることから始めます。

今回は簡単なツールですので、スクリプトの事前確認は以下の2点だけです。

  • 選択範囲をどうやって取得するか
  • ガイドはどうやって引くのか

これらについては当サイトに情報がありますので、そちらを参照してください。

参照:選択範囲の位置と大きさを取得・変更

参照:ガイドの操作

 

<仕様を決めながらUIのモックアップを作る>

このツールは選択範囲の周辺にガイドを引くものですが、それにはどんなUIが必要なのか考えてみます。

  • 選択範囲の周辺に対し、「上下左右のボタン」を使って個別に引けるようにする
  • 「水平のセンター」「垂直のセンター」にも引けるようにする
  • 「上下左右のすべて」「水平垂直のすべて」ボタンもあったほうがいい
  • 周辺にガイドを引く際、外側や内側に位置をずらせるようにする 

……といったことを考えながら、グラフィックソフトでモックアップを作成していきます。

 

使用するグラフィックソフトはなんでもよいのですが、オブジェクトの位置を数値で取得しやすく、ボタン内に表示するアイコンも同時に作れるIllustratorがよいでしょう。

そして出来上がったのが以下のようなものです。

一番下の入力エリアは、周辺ガイドを引く時の移動量(ずらし幅)を入力するためのものです。

 

私の場合は過去にFlush UI用に作ったテンプレートがあったので実際の見栄えに近いもので作りましたが、オブジェクトが数値化できれば単純な四角で構いません。

もっともボタン内のアイコンはこのまま使用しますので、背景色はそれっぽいもので作ったほうが実際のイメージがつかみやすいでしょう。

なお、PhotoshopではUIのカラーテーマによって背景色の明暗が違いますが、とりあえず日頃使っているものに合わせて作ります。ユーザーがカラーテーマを変更した場合への対策は、プロジェクトがひと通り出来上がってからにします。

また、これから作成するBracketsのプロジェクト上では、ボタンや入力エリアの座標と寸法に「まわりのエンボス部分」が含まれますので、その点に留意して作成してください。

 

これで仕様とUIが決まり、使用するアイコングラフィックもできました。

 

これから作成するBracketsのプロジェクトでは、このモックアップの座標と大きさを参照にしていきます。

 

 

Joomla templates by a4joomla