ピクセル精度は、ユーザーがOS XとiOSに期待するソフトウェア体験の重要な要素です。これはある種の正確さを必要とし、通常は画像やアイコンの細部まで操作して最良の結果を得る方法を熟知した経験豊富なデザイナーに任せるのが最善です。しかし、この目標達成には時間と費用がかかり、インターフェースが完全に形になった後に初めて真に意味を持ちます。
同様に、ファイルサイズ全体、任意の解像度のサポートの必要性、あるいは複雑なアニメーションの要件など、様々な制約により、ピクセルレベルの完璧さを実現することが困難、あるいは不可能な場合もあります。このような場合、開発者は従来、ベクター画像を使用するという代替手段を用いてきました。ベクター画像は任意の曲線群の数学的表現に基づいており、リアルタイムでレンダリングされ、解像度を損なうことなく任意のサイズに拡大縮小できます。
OS X と iOS はどちらもベクター ラスタライズ用の優れたプログラミング インターフェイスを内蔵していますが、SVG などの一般的なベクター ファイル形式のサポートは限定されており、多くの場合、外部ライブラリの使用が必要となり、結果の画像を細部まで操作することが困難になります (決して不可能ではありませんが)。
PixelCutのPaintCode（Mac App Storeへのリンク）は、ベクターイラストを一連のコード命令に変換する機能によってこれらの問題を解決することを目指しています。生成されたコードは、Xamarinを使用してObjective-CまたはC#で記述されたアプリに直接埋め込むことができ、開発者に非常に柔軟な利用方法を提供します。
私たちのベクトルは何ですか、ビクター？
PaintCode には、既存のベクター ドキュメントのインポート (および新規ドキュメントのゼロからの作成)、それらの編集、開発プロジェクトで使用できる一連のソース ファイルへのエクスポートという 3 つの主な機能があります。
最初の方法はおそらく最も簡単です。このアプリは、標準のSVGファイルまたはAdobe PhotoshopのPSD形式で保存されたドキュメントをインポートできます。ただし、後者はアプリ内課金（20ドル）が必要です。私のテストでは、幅広いベクターベースのグラフィックを正常に読み込むことができました。これには、私がこれまで携わってきたアプリのUI要素だけでなく、アプリ開発を想定して設計されていないファイルも含まれています。
PaintCode は、ほぼ間違いなく、見事なパフォーマンスを発揮しました。あるケースでは (Adobe Illustrator から SVG にエクスポートされ、奇妙なフォントが含まれていた古いファイル)、インポート操作を成功させるためにいくつかの調整を余儀なくされましたが、それ以外では、このアプリは、私が投げ込んだ最も複雑なドキュメントでも、まったく問題なく読み込むことができました。
編集者の編集者
正直に言うと、アプリにエディタを組み込むという決定には、最初は少し戸惑いました。デザイナーが既に使い慣れたツールから離れるなんて考えられませんでしたし、開発者がグラフィックドキュメントを操作できる基本的な機能を得るためだけに、ツールチェーンに新たなソフトウェアを追加したいと考えるとは考えられませんでした。
しかし、PaintCodeのドキュメントを読み進めていくと、PixelCutの目的は、既存のツールを置き換えるのではなく、機能を拡張することで強化できる「エディターのエディター」を作ることだと気づきました。（このアプリの優れた機能のいくつかは、ドキュメントを読めば分かります。ドキュメントは分かりやすく、要点を押さえており、便利なチュートリアルやサンプルも多数含まれています。）
PaintCodeのエディタを使えば、描画の各部分を分離し、コード内で操作しやすいように操作することができます。最もシンプルなレベルでは、ドキュメントの各要素を再現するために使用される変数の名前を変更することで、個別にアニメーション化したり、必要に応じてグループ化したりすることができます。しかし最も重要なのは、画像の様々な側面をパラメータ化できるため、画像の有用性が大幅に向上することです。
例えば、初期の制約セットに基づいて色を動的に定義できるため、画像全体の色合いを変更するには、最初の開始点を指定するだけで済みます。これは、ボタンやアイコンなどのユーザーインターフェース要素に最適な機能です。また、図形を初期寸法から予測可能な方法で拡大縮小するように設定することもできます。これは、NSImageや などのCocoaクラスが提供するエッジインセットのサイズ変更機能を再現していますUIImage。これは、例えばボタンの中央部分を水平方向に引き伸ばし、側面のサイズは固定したい場合などに非常に便利です。
グラフィックからコードへ
PaintCodeのエクスポート機能は、作成したコードをアプリで使用できるコードに変換します。いくつかのオプションがあり、エクスポート先のオペレーティングシステムを選択できるほか、Objective-CまたはMicrosoftのC#を選択できます。また、AppleのARCメモリ管理技術のサポート、特定のiOSバージョンをターゲットにするかどうか、さらにはコードが通常の座標系を使用するか反転座標系を使用するかを指定することもできます。
以前、自動コード生成ツールで散々な目に遭った経験があるので、PaintCodeの出力品質を実際に確認したかったのです。そこで、2秒ごとに図形を次々と変形させる、複数の図形をアニメーションさせる非常にシンプルなアプリを作成しました。この非常に基本的なテストでデザイン賞を取れるようなものではありませんが、ビットマップでは実現が非常に難しいことを示す良い例です。アニメーションと、画像を拡大縮小してもピクセル化されないようにする必要があるという要件の両方のためです。PaintCodeでは、最初から最後まで約15分かかりました。
ソースを覗いてみればわかるように、アプリが出力するコードの品質は非常に高く、各行は適切にインデントされ、適切な場所には十分なコメントが付けられています。ドキュメント内のパラメータ化された各要素は、値を簡単に操作できるようにレンダリングされるため、手動で変更を加えることなく、コードの異なるバージョンを簡単に反復処理できます。
唯一の不満は、パラメータの処理方法をもう少し細かく制御できれば良かったということです。例えば、PaintCode をローカル変数ではなくクラスプロパティを使用するように設定できれば、既存のクラスにコードを組み込むのが簡単になります。ただし、これは比較的些細な点であり、開発者が将来のリリースで修正できるはずです。
結論
100ドル、さらにPSDファイルのインポート機能が必要な場合は20ドル追加となるPaintCodeは、かなり高価なツールです。しかし、プロトタイプ作成やアプリ開発の方法を根本から変える力があり、その機能を使い始めるとすぐに元が取れます。
アプリにふさわしい輝きと仕上がりを与えるために、手作りのビットマップ画像のみを使用する予定であっても、PaintCodeを使えばインターフェースのプロトタイプを迅速に作成できます。すべてのUI要素をベクターとして設定し、満足するまで変更を加えるだけで、満足のいく結果が得られたら、デザイナーの同僚にすべてを戻して仕上げを任せることができます。従来のビットマップを使用する場合との違いは、すべての変更をコードでパラメータ化できることです。これにより、従来の反復的なプロトタイピングプロセスを短縮し、開発サイクルを短縮できます。
もちろん、コード内でベクターグラフィックを扱う能力が本当に必要な場合、このアプリはまさに救世主となるでしょう。PDFやSVGファイルを単純にレンダリングするだけの場合と比べて、PaintCodeははるかに高い柔軟性とパワーを提供し、しかもそのコストは十分に正当化できる、一度限りの料金で利用可能です。
