PhotoshopのJSXでレイヤーを任意の順番に並び替える

たまにPhotoshopの自動処理を書いていると必要になってくるのでメモ書き。

使用方法

引数には並び替えたい順番でレイヤー名が格納されている配列を渡してあげると動作します。
例)['レイヤー名1','レイヤー名2','レイヤー名3']
例の配列を渡してあげるとレイヤー名1が最前面に、レイヤー名3が再背面に来る感じです。
処理の動きとしては、もらった配列の後ろのレイヤーからどんどん最前面に押し上げていってソートを実現している感じ。

ソース

PhotoshopのJSXで特定のレイヤーを天地左右中央揃えに

特にJSでやる必要もないんだけど、メモ書き程度に。

使用方法

引数には移動させたいレイヤーのレイヤー名を渡してあげると動作します。
おなじレイヤー名がある場合のエラーハンドリングとかはしていないのでよきようにしてもらえると。

ソース

PhotoshopのJSXでレイヤーの絶対座標への移動

Photoshopnのtranstaleメソッドだと、レイヤーが現在いる場所からの相対座標の移動の指定しかできないためキャンバスを基準とした絶対位置への移動をしていできる関数を作成しました。

使用方法

第一引数には移動させたいレイヤーのレイヤー名を、第二引数・第三引数にはXとYそれぞれの座標を渡してあげると動作します。
おなじレイヤー名がある場合のエラーハンドリングとかはしていないのでよきようにしてもらえると。

ソース

デザイナーが開発中のモバイル用webサービスにスタイルを追加して、あれこれスマホで確認したい時にやってる方法

はじめに

大規模なモバイルwebサービスをチームで開発している時に、なるべくデザイナーとしても開発効率をあげるため、精度の高い状態で次の工程(主にフロントエンジニア)に修正依頼や、追加要素の実装のお願いをしたいと考えているのですが、Photoshopなどのアプリケーションを用いて画像でいくら精度をつめても、結局実装してみるとイマイチで再度修正してもらうなんとことはよくあると思います。

また、追加要素としてwebページのパーツにCSSでアニメーションを加えて華やかにしたいとか、現場入ってるアニメーションの速度を微調整したいといった時になかなか感覚的なものなので口頭だと伝えづらいなんとこともあったりと。

デザイナーでも多少のCSSの知識がある人は多いと思うのですが、大規模なwebサービスになるとおいそれと実際に使用されているCSSをデザイナーがいじくるわけにはいきません。

自分の書いたCSSファイルを一つだけでも開発中のサービスに突っ込めれば・・・、CSSアニメーションなどもいい感じに調整後数値でエンジニアに伝えることができるのに・・・

一応これが今回の経緯になります。

必要なスキル

  • CSSの知識

自身のスタイルシートを開発中のwebサービスに突っ込むまでの流れ

  1. 自身のPCにXAMPPを用いてローカルにwebサーバーをたてる
  2. Fiddlerを用いて自身のPCを通信するとき経由させ、立てたwebサーバーにおいてあるJSファイルをつっこむようにする
  3. つっこまれたJSファイルから立てたwebサーバーにおいてあるCSSをつっこむ
  4. 実機で確認するためにスマホでプロキシを経由するようにする

それでは順を追って説明していこうと思います。

1.自身のPCにXAMPPを用いてローカルにwebサーバーをたてる

これはもう溢れんばかりの記事があるので以下記事がわかりやすいので参考にしてもらえればと思います。
http://techacademy.jp/magazine/1722

そしてさらにLAN内で公開できるようにhttpd.confの設定を変更して下さい。以下の記事がわかりやすいので参考に。
http://weble.org/2009/11/28/xampp-intranet

そしてxamppのhtdocsフォルダ内にprotoというフォルダを作って、その中にテキストエディタでproto.jsとproto.cssという名前の空のからのテキストファイルを保存し、apacheを起動しておいて下さい。

2.Fiddlerを用いて自身のPCを通信するとき経由させ、立てたwebサーバーにおいてあるJSファイルをつっこむようにする

まずはFiddlerをインストール

以下のリンクからFiddlerをダウンロードして下さい。
https://www.telerik.com/download/fiddler/fiddler4

Fiddlerの起動

Fiddlerを起動して、開いてるブラウザのページのどれかをリロードしてみると勝手に通信内容がつらつらと表示されていくと思います。
fiddler_1

CustomizeRulesの修正をしてbodyダグの一番下にscriptタグを突っ込むように修正

まずFiddler上部のメニューリストから
Rules > Customize Rulesと選択して下さい
そうすると何かしらのテキストエディタが起動してスクリプトを表示してくれます。

次にこのスクリプトのOnBeforeResponseメソッドを修正します。
(だいたい277行目くらいから)

を以下のようにまるっと書き換えて下さい。

[開発中のサービスのドメイン]と[自身のPCのIP]はそれぞれに適した値を入力して下さい。

JSファイルの用意

次にFiddlerでつっこむJSファイルの準備を行います。
先ほど作った空のproto.jsに以下のスクリプトをコピーして下さい。

このスクリプトによってwebサーバーに用意してあるproto.cssファイルを開発しているwebサービスのheadタグ内に追加することができます。
実際ここで少しproto.cssに何かスタイルを記載してみて見た目がが変更されているかをPCのブラウザで確認して下さい。

4.実機で確認するためにスマホでプロキシを経由するようにする

最後にスマホで確認する方法です。以下の記事はiPhoneの例です。
わかりやすいので参考にして下さい。
http://qiita.com/hikoma/items/2c983a521ba2dae5972b

まとめ

以上の流れで自身の任意のスタイルシートを追加した開発中のwebサービスの表示が、スマホでも確認できるようになると思います。

Photoshopで外部画像をリンク配置するJSX

使用できるのはリンク配置機能が追加されたCC意向だと思う。
検証はしていない。
引数で渡すリンク配置画像のパスは絶対パスで渡し、バックスラッシュの表記は不可。
必ずスラッシュに置き換えてから使用する。

非表示レイヤーを削除

PhotoshopのJSXでヒストリーの一番初期に戻す関数

ヒストリーの最初の段階に戻すメソッドがドキュメントを見ても見つからなかったので、
Scripting Listenerで吐き出されたソースを少し改変して作成。

使用方法

基本的には以下の関数を実行すればヒストリーの一番上に戻ります。
(※ヒストリーパネルのファイル名をクリックした時と同じ挙動)

ソース

Illustrator(イラレ)でアプリのプロトタイピングを手軽に行えるスクリプト

Illustrator(イラレ)でアプリのプロトタイピングを手軽に行えるスクリプト

作った背景

1~2年前から様々なペーパープロトタイピングツールが出ている中、いくつかの不満点があったため作成。
まだまだ出来のよくないところもありますが一応動くので一度公開してみようかと思います。

既存のプロトタイピングツールの不満点

既存のプロトタイピングツールはよくできており、直感出来で使いやすいのですがいくつかの不満点を感じていました。

自分が感じていた不満点は以下になります。
※今はいろいろ改善されているかもしれません。最近全然触ってなくてわからない

・誰でも使える事に焦点を当てているため、グラフィックソフト(イラレとかね)との連携がイマイチ

・上記の理由からレイアウトに修正が入るたび、リンクの貼り直しなどがメンドクサイ

・新しいツールまた覚えるのメンドクサイ

主に上記のような理由+スクリプトの勉強がてらプロトタイピングようのスクリプトを作ろうと思いました。
ただ現在のプロトタイピングツールはほんとに高機能なため、そういった部分では全く太刀打ちができません。
あくまでサッと確認するときに便利なスクリプトかなと思います。

このスクリプトでできること

あくまで簡易確認ツールになるので、主にできることといえばイラレのオブジェクトにリンクを貼って、他のページに遷移するといった感じです。

実際に出力されるファイルはhtmlで、それをローカルのwebサーバーに上げて確認する形になります。

自分のプログラミング能力だとこれが限界。
とりあえず以下から使い方の説明を順をおってしていこうと思います。
実際のスクリプト実行例は以下になります。

イラレで画面を作成

以下の様な感じでアートボードを分割して各ページを作成していきます。
ai_desc1

そして今回作成しているスクリプトを利用すると、以下の様な形でページが生成されます。
↓↓↓↓↓↓↓↓↓↓
生成されたページ

上記を実行するスクリプトファイルのzip
↓↓↓↓↓↓↓↓↓↓
page_export.zip
※使用は自己責任でお願いします

使い方

1.新規ドキュメントを作成する

まずイラレの新規ドキュメントを作成して下さい。
このスクリプトはイラレのアートボード1つを1ページとみなします。

ai_desc2

新規作成でこれから作るアプリやウェブサイトのサイズを入力し、だいたい必要になりそうなページ数分アートボード数を入力して下さい。

完了後任意のディレクトリに保存して下さい。

※ちょっと多めに作っておくほうがオススメ
※イラレの仕様上アートボードは100までしか作成できません

2.設定ファイルを入力する

スクリプトの都合上いろいろな情報を記載する必要があります。
zipファイルを開封後、その中にconfig.jsxというファイルがあるのでテキストエディタで開きます。

以下のようなスクリプトが記載されているので、指定通りに入力していって上書き保存して下さい。

リンクカラーはrgbaで設定できます。アルファの部分を0にすると色無しで表示されます。
※ここの数値が性格に入力されていないとアウトプットされたページのリンク位置などがずれてしまうので正確に入力して下さい。

3.アートボードに名前をつける

次にスクリプト上でアートボードを判別するためにアートボードに名前を付ける必要があります。

アートボード名の確認は上部メニューの

ウィンドウ>アートボード

からアートボードのパレットを出すことで確認できます。
デフォルトの名前はアートボード 1とかになっているかと。

アートボードの名前はzipファイルの中に格納してあるadd_page_numbering.jsxを実行することで自動的に変更できます。

ai_desc3

スクリプトの実行の仕方は、先ほど作成したイラレのドキュメントを開き、その開いたドキュメントがアクティブな状態で上部メニューの

ファイル>スクリプト>その他のスクリプト

からadd_page_numbering.jsxを選択して実行して下さい。

アートボード名がa-1、a-2のような表記になりアートボードの左上に小さくa-1などテキストで表記されれば成功です。

4.ページのデザインを作る

ここはもう自由に、いつもどおり作成して下さい。
特に制限はありません。
画像のリンクや、効果などもどんどん使ってもらって構いません。

5.リンクを貼る

あらかたページのデザインが固まってきたらリンクを貼っていきます。
リンクの貼り方はまずリンクを張りたいオブジェクトを選択します。(テキストでも画像でもシェイプでもなんでもいいです)

ai_desc4

選択後、レイヤーウィンドウから選択しているオブジェクトの名前を変更します。

オブジェクト数が多く選択しているオブジェクトが見つけにくい場合は虫眼鏡のアイコンをクリックすると一気に移動することができます。

名前を以下のように変更するとリンクを貼ることができます。

$link=a-2

ai_desc5

$link=はリンクを張るときの決まり文句のようなものなのであまり気にせず書いて下さい。
その後に続くa-2は移動したいページ名になります。a-2とかけばa-2ページに移動します。
そのような感じでリンクを貼っていって下さい。

6.ページを書き出す

あらかたリンクを貼り終えたらhtmlページを出力します。

ai_desc6

出力用のpage_export.jsxというファイルがあるのでそれを

ファイル>スクリプト>その他のスクリプト

から実行して下さい。

実行したイラレのドキュメントと同じ階層にページのhtmlが出力されます。
※すべてのオブジェクトのロックを解除してください
※一つでもオブジェクトが乗っているアートボードのみページとして出力されます

7.確認する

後は任意のhtmlファイルを開いて遷移を確認します。スマホで確認したい場合などはローカルにXamppなどを用いてサーバーを立てて確認すると便利です。

Xamppの設定の仕方は調べればいくらでも出てくると思うのでそちらを参考に。
※簡単です
これで大まかな説明は終わりです。

まとめ

設定ファイルの入力やアートボードに名前をつける作業は一度してしまえば再度する必要がないので、
デザイン修正をしページを書き出して確認と高速に行うことが可能です。

一度リンクを張ったオブジェクトは移動してもその位置にリンクを貼り直す必要はありません。
そこらへんは既存のプロトタイピングツールよりは便利なポイントかなと思ってます。

まだまだ使い勝手もよいとはいえませんが、改善要望などあれば対応しようかなと思います。
とりあえずGUIでいろいろ入力できるようにはしたいと思ってます。

またプログラムへの指摘などあればどんどんいただけるとありがたいです。

PhotoshopのJSXで指定したレイヤーの複製を作成する関数

任意のレイヤーを指定した名前で複製する関数を作成してみました。

使用方法

第一引数には複製したいレイヤーの名前を文字列で渡し、第二引数には複製したレイヤーの名前を文字列で渡します。

ソース

PhotoshopのJSXで指定したCSVファイルをparseする関数

Photoshopで大量の自動処理を行う場合、どこからかデータを取得する必要が多く発生します。
PhotoshopではCSVファイルを読み込むことが可能なので、CSVを読み込みparseする関数をつくってみました。

使用方法

引数にはCSVファイルを配置しているディレクトリのパスを文字列で渡します。
CSVは一行目はそのカラムのタイトルを記載しておき、それ以下はそのカラムのタイトルに応じた値を追記していきます。
parseされたCSVは二次元配列で返され、data[カラム名][行番号]で呼び出すことができます。

ソース

デザイン雑記