アクセシビリティ
デベロッパーリソース
西田 善彦氏

西田 善彦氏

storage.goodmix

本記事で紹介している「Flash Helper Scripts」は、Flash/ActionScript開発のためのオープンソースコミュニティ「Spark project」にて共有・提供されています。Spark projectでは、その他にもさまざまな用途のライブラリやソースコードが公開されています。ぜひ、チェックしてみてください。

作成日:
2009年7月17日
ユーザレベル:
すべて
製品:
Flash

Flash Helper Scripts：JavaScriptで「Flash＋Photoshop」連携をパワーアップ！

Flashサイトを構築する際に、サイトデザインやデザインパーツをPhotoshopで作成し、それをFlashに読み込んでオーサリングしている人も多いでしょう。バージョンアップとともに、FlashとPhotoshopの連携は強化されてはいるものの、現状の機能だと物足りなさを感じている人はいませんか？　本記事では、FlashとPhotoshopの連携をもっとスムーズに、もっと便利にするスクリプト集を紹介します。

PSDデータではなく、結局PNGやJPEGに切り出しているという現状

Flashでは、Photoshopで作成したPSDデータを読み込むことができます。その際、PSDのレイヤー構造のまま読み込んだり、キーフレームに配置したり、画像の圧縮形式を選択したりすることが可能です。

デザインとFlashオーサリングを1人で行う場合であれば、Flashでの使用方法を考えながらPhotoshopでデザインできるため、デザイン作業も自由にでき、PSDデータのままであってもFlashへの取り込みは比較的スムーズに行えます。

しかし、デザイナーとデベロッパーが異なる場合、あらかじめPSDデータのレイヤー構成の取り決めを厳密に決めておく必要があり、その結果、デザイン作業に制限が生まれたり、レイヤー構造のすり合わせなどの余計な作業が増えてしまうという可能性があります。

また、両方のケースに当てはまりますが、デザインに修正が発生して画像を差し替えることになった場合、PSDデータのままでは個別の画像の更新がしにくかったり、画像が分解されることによる容量が増加するなど、いくつかデメリットもあります。

そのため、直接PSDデータによる連携ではなく、結局、必要なデザインパーツを『Web およびデバイス用に保存』機能を用いてPNG24やJPEGで切り出し、Flashに一括して取り込むようにしている人も多いでしょう。

ただ、こうした切り出し作業を手作業で行うのは面倒です。場合によっては、単調な切り出し作業に数時間も取られてしまうことがあります。どうすれば、効率よく切り出し作業を行えるようになるのか？　あまり注目されていませんが、実はJavaScriptを使ってPhotoshopの作業を自動化することができるのです。そこで、FlashユーザーがPhotoshopからデータを読み込む際に行うであろう作業を自動化するスクリプト集「Flash Helper Scripts」を作成しました。

MEMO：
PhotoshopからFlashへ画像を書き出す際のフォーマットや設定については、以下のサイトが参考になります。

「Flash Helper Scripts」の紹介

「Flash Helper Scripts」には、現時点では8つのスクリプトが入っています。それぞれの機能について説明しましょう。

単機能スクリプト

【選択したレイヤーのみ表示.jsx】

選択したレイヤー／レイヤーセットのみを表示するスクリプトです。Photoshopでは、レイヤーの表示／非表示アイコンを右クリックすると、メニューに「ほかのレイヤーをすべて表示/非表示」機能があります。この機能の場合、レイヤーセットの中身も非表示となります。しかし、このスクリプトを使用すると、レイヤーセット内にサブレイヤーがある場合はすべて表示します。

【選択したレイヤー以外を非表示.jsx】

選択したレイヤー／レイヤーセット以外を非表示にするスクリプトです。上記の「選択したレイヤーのみ表示.jsx」と異なり、レイヤーセット内のサブレイヤーの表示状態を保持します。

【選択したレイヤーを切り出し.jsx】

選択したレイヤー／レイヤーセットの内容を切り出して、新規ファイルを作成するスクリプトです。レイヤーセット内のサブレイヤーの表示状態を保持します。

【選択範囲を切り出し.jsx】

選択範囲の内容を結合した後に切り出して、新規ファイルを作成するスクリプトです。Photoshopの「切り抜きツール」機能と異なり、このスクリプトの場合はドキュメントを新規に作成します。また、切り出す範囲の上下左右が透明だった場合は、透明範囲を消去して作成されます。

マクロスクリプト

【指定したレイヤーセットを切り出し.jsx】

特定の名前がついたレイヤーセットの内容を切り出すことができるスクリプトです。接頭語、接尾語、中間キーワードを指定し、条件にマッチしたレイヤーセットを切り出して、新規ファイルを作成します。

レイヤーセットの中にサブレイヤーがある場合はすべて表示します。条件のAND／ORを指定することができます。背景レイヤーは有効になるので、特定背景のPNG、JPEGの作成も可能です。ファイルに書き出す場合はレイヤーセット名がファイル名になります。ただし、重複した場合は連番が付加されます。

便利な使い方として、レイヤーセット名に特定のキーワード（例：btn_、preview_、_up、_overなど）を追加しておくと、効率的に切り出すことができます。

【指定したレイヤーを切り出し.jsx】

上記のスクリプトのレイヤー版です。

※Photoshopには標準で「レイヤーをファイルに書き出し」というスクリプトが用意されていますが、PNGでの書き出しができないのと、レイヤーセット単位での書き出しができません。

　　

補助スクリプト

【全てのドキュメントを保存せずに閉じる.jsx】

大量に開いたドキュメントを、保存せずに一気に閉じるスクリプトです。上記の切り出し系スクリプトを使った際に大量に作成されたドキュメントを閉じる際などに、使用すると便利です。

【他のツリーのレイヤーを削除.jsx】

上記の切り出し系スクリプトなどでレイヤー数が多すぎて処理が重くなる場合に、トップレベルで関係の無いレイヤーを削除してしまうスクリプトです。PSDの切り分けなどにも使用することができます。

ダウンロードと導入方法

「Flash Helper Scripts」は、Spark projectにてZIP形式で配布しています。
http://www.libspark.org/svn/jsx/developersjsx/

ダウンロード後は、下記のPhotoshopのスクリプトフォルダに入れます。

  • Windows
    C:¥Program Files¥Adobe¥Adobe Photoshop CS3¥プリセット¥スクリプト¥
  • Mac OS X 　/Applications/Adobe Photoshop CS3/プリセット/スクリプト/

スクリプトを実行するには、メニューから「ファイル → スクリプト」を選びます。スクリプトフォルダに格納していないスクリプトでも、メニューから「ファイル → スクリプト → 参照」で開いて実行することができます。
また、以下のようにキーボードショートカットを割り当てると、素早く実行できます。

  • [選択範囲を切り出し]のショートカット例
    Windows　[CTRL + SHIFT + X]
    Mac OS X　[COMMAND + SHIFT + X]
  • 選択したレイヤーを切り出し]のショートカット例
    Windows　[CTRL + SHIFT + /]
    Mac OS X　[OCMMAND + SHIFT + /]

使用する上での注意事項

  • 自己責任にてご利用ください。データのバックアップをとった上でのご利用をおすすめします。
  • JavaScriptやアクションを組み合わせることで、できるだけ高速化していますが、レイヤー数300以上のファイルに対して実行すると、Photoshopの動作が重くなりますのでご注意ください。
  • レイヤー数600以上のファイルに対して実行すると、Photoshop以外のアプリケーションにも影響を及ぼす恐れがありますので、くれぐれもご注意ください。
  • 3ヶ月ほど使用した経験上、レイヤー階層が浅ければ、レイヤー数が多くても大丈夫のようです。逆にレイヤー階層が深いと、当然ですがループが増えて重くなるようです。
  • 不具合などあった場合は、Spark projectのチケットなどに書き込んでいただけるとありがたいです。

MEMO：
Mk-10さんが、ブログcellfusion blogの記事で高速化するための手法を考えてくださいましたので、それを実装しました。切り出し系のスクリプトが、20%ほど高速化されています。
http://blog.cellfusion.jp/archives/692/

「Flash Helper Scripts」の使い方

それでは、3つのケースを例に「Flash Helper Scripts」の使い方を説明しましょう。

Case01 Flashコンテンツで大量の画像パーツが必要！

Flashコンテンツで大量の画像パーツを使用する場合、「コピー → 新規→ 貼り付け → Webおよびデバイス用に保存」の手順で一つひとつ書き出していたら、いくら時間があっても足りません。そんな時は「指定したレイヤーセットを切り出し.jsx」です！

STEP01　レイヤーセットにあらかじめ名前をつけておきます。例えば、メニューなら以下のような感じです。日本語も使用できますが、ファイルに書き出す場合はアルファベットの方がよいでしょう。

　　-menu_top_up
　　-menu_top_over
　　-menu_profile_up
　　-menu_profile_over

STEP02　スクリプトから「指定したレイヤーセットを切り出し」を選びます。

STEP03　ダイアログで指定キーワードを入力します。

STEP04　ファイルに保存したい場合は「ファイルに保存する」にチェックを入れ、保存フォルダを選択します。保存可能なファイルタイプは、PNG24、PNG8、JPEGの3種類です。

STEP05　[OK]を押して実行します（しばらく待ちます）。

STEP06　書き出しが成功すると、書き出し結果が表示されます。

Case02 このレイヤーセットの画像だけ切り出したい！

Photoshopでの作業中、大量のレイヤーの中から特定のレイヤーセットのみ表示するのは意外と手間がかかります。標準で搭載されている「ほかのレイヤーをすべて表示/非表示」機能を使うと、中身も非表示にされてしまい、全部表示し直すはめに…。そんな時は「選択したレイヤーを切り出し.jsx」です！

STEP01　切り出したいレイヤーセットもしくはレイヤーを選択します。

STEP02　スクリプトから「選択したレイヤーを切り出し」を選びます。

STEP03　選択したレイヤーの画像が統合されて、新しいドキュメントとして表示されます。

Case03 「変更を保存しますか？」ダイアログにサヨウナラ

作業も終わってPhotoshopを終了しようすると、作業中のドキュメントすべてに 「変更を保存しますか？」というダイアログが表示されます。大事なファイルは保存したけど、それ以外はいちいち「いいえ」をクリックするのが面倒。そんな時は「全てのドキュメントを保存せずに閉じる.jsx」です！

STEP01　大事なファイルを保存したことを確認して、スクリプトから「全てのドキュメントを保存せずに閉じる」を選びます。

STEP02　「全てのドキュメントを保存せずに閉じます。このまま操作を続けますか？」というダイアログが出ます。

STEP03　すべてのドキュメントが閉じます。

「psdを開く」→「パーツを切り出し」→「閉じる」の流れのビデオも用意しましたので、こちらも参考にしてみてください。

まとめ

みなさん、いかがでしたでしょうか。使い方はとても簡単です。ぜひ、使って下さい。また、みなさん自身でもスクリプトを作成して、それを公開・共有し、みんなでもっと便利な開発環境を作り上げましょう！

関連情報

多くの人が、Photoshopでの作業を自動化するスクリプトや、スクリプトを作成するノウハウを公開しています。参考にしてみて下さい。

以下、開発者向けの作成Tipsです。

JavaScriptで制御できるアドビ製品

Photoshop以外にも、Adobe Creative Suiteのアプリケーションの多くは、JavaScriptでの制御が可能です。Photoshop、Illustrator、AfterEffects、InDesignは、同じような作法でJavaScriptを記述することができます。また、スクリプトを使用するには、メニューの「ファイル → スクリプト」から使用したいスクリプトを選択するだけです（一部、異なるアプリケーションがあります）。

Flash、Fireworks、Dreamweaverは上記のアプリケーションとは用意されているAPIがやや異なりますが、こちらも似た作法で記述することができます。また、これらの製品では「Extension Manager」を使って簡単にスクリプトを導入できるため、多くのプラグインが公開されています。

また、Flashでは「JSFL」という機能を用いることで、JavaScriptとActionScriptを連携することができるため便利な拡張機能が多数公開されています。参考：http://www.libspark.org/#flash-extension

著者について

西田 善彦氏

株式会社 アイ・エム・ジェイ WI第1事業本部 所属

1981年、大阪生まれ。2007年、和歌山大学大学院修了後、株式会社アイ・エム・ジェイに入社。大手ECサイトのインターフェース設計、開発進行管理、Flashコンテンツの開発等を担当。その後、Flashデベロッパー専任となり、大手企業のブランドサイト、プロモーションサイト、CGMコンテンツなどの開発に携わっている。