Photoshopのドキュメントを Flinto for Mac (以下、Flintoと記述)のドキュメントとして書き出しすることができる PSD2Flinto というスクリプトを作った。

こんな感じでレイヤーカンプの画面をそのままFlintoのドキュメントとして書き出せる。（ただし残念ながら処理はそんなに早くない)

現在はFlintoのv1.2系に対応していて（v.1.3系でも動きはする）、v1.3系の目玉機能であるsketchからの再読み込みへの対応がスクリプト単体だと難しいことがわかったので一旦の区切りにとした。再読み込み機能は難しいが、他の対応出来る機能はこれからも対応しようと思っている。(再読み込み機能対策については後述)

対応機能

必要な機能は割りと入れられたかなと思っていて、

• テキストレイヤー
• スマートオブジェクト
• クリッピングマスク
• レイヤーマスク
• レイヤースタイル
• 調整レイヤー
• レイヤーカンプの複数書き出し

辺りはサポートしていて、

• 書き出しパネルのサポート
• ドキュメントの状態に応じたエラー処理
• 書き出しの高速化

などもしている。

きっかけ

このスクリプトを作ることになったきっかけは、去年開催された Flinto×Cookpad〜プロトタイピング開発のいま〜 というFlintoのミートアップに参加させていただいたことだった。 Rebuild.fm でも宣伝されていたので知っている人も多いかな？と思う。

参加出来ることがわかった時に、せっかく参加するなら質問したいなと思って、一通り機能を使ったり チュートリアル を見たり、他のプロトタイピングツール（ InVision や Pixate など）との違いを考えてみたりしてから行った。

で、参加したところ質問タイムが予想通りあったので、3つも質問させていただいた（3つ目は最後少し強引に訊いてしまった感がありすみません…）。その3つ目の質問が、

「Sketch用のプラグインはあるけど、Photoshop用のものは用意される予定はありますか？もしくは、画像とjsonからインポートできる機能でもいいのですが…!」

という内容で、そこで、

「実はSketch用のプラグインはそうなっているので、リバースエンジニアリングすれば出来ます!」

という回答を頂けた。なので、じゃあ作れるかも?ということで、その日のうちに帰ってからSketchプラグインのスクリプトを読んで作り始め、次の日には動くものが出来た。

一箇所だけCocoascript力が足りずによくわからないところがあり悩んでいたら、その箇所は@naanさんに直接リプライでアドバイスをいただき、無事に動くところまでもっていけた。ありがとうございます!

（最初、Flintoで開くとディレクトリがバイナリになってしまう仕様がわかってなくて???ってなってた）

Photoshopスクリプトの問題

ひとつ目は、現状できちんと動いてはいるが、やはりベクターが主になっているSketchと比べると、Photoshopスクリプトは書き出しなどの処理が遅い！。これはおそらくPhotoshopのスクリプトであるExtendScriptのVMが遅いのも原因だと思うので、多分どうにもできない…。

ふたつ目は、冒頭で書いたように、Flinto v1.3系の再読み込み機能に対応するために必要なパラメータが、Photoshopのレイヤーには用意されていないということ。具体的にはUUID的に使えるプロパティが存在しないので、同じ機能を作るには別の方法を考えないといけない。

Generatorプラグインにする

なので、今はGeneratorというPhotoshopのプラグイン版のPSD2Flintoを作っている。Generatorは処理が早いし、非同期で動かせる。割りと形にはなってきているが、リリースに必要な作業がまだ漠然としていたり、再読み込み機能に対応するためのid処理の検証などに時間がかかりそうなので、ちょっとまとまった時間がとれるまで置いている。

ということでちまちま作っていこうかなと思っている。それまでは普通のPSD2Flintoを使っていただくということで…。

まとめ

作ってみて、スクリプトやプラグインの勉強が捗っているので個人的な勉強としても良かった。続けていきたい。

Flinto for Macはアプリの詳細なモックを作るのに非常に強力なツールだと思うのでぜひ使ってみてください。もしPhotoshopを使っている方は PSD2Flinto も使ってみて感想くれると嬉しいです (_ _)