PaintCode: ベクター描画をコードに変換

PaintCode: ベクター描画をコードに変換
PaintCode: ベクター描画をコードに変換

Apple開発者コミュニティで活動している方なら、PaintCodeをご存知でしょう。これは、ベクターグラフィックデザインを純粋なObjective-Cコードに変換できるユニークなMacアプリです。PaintCodeはプロ仕様のアプリであり、その価格はそれを反映しています。通常価格99.99ドル(MacHeistでは現在19.99ドル)は一般ユーザーにとっては少々敷居が高いかもしれませんが、プロのiOS/OS X開発者にとっては、まさにビジネス投資と言えるでしょう。しかし、このアプリの価値を最大限に引き出すかどうかは、開発者次第です。

PaintCodeは、従来のベクター描画アプリのルック&フィールと、AppleのInterface Builderでよく見られるようなカスタマイズ可能なフィールドを融合させたツールが豊富に搭載されています。多数のオブジェクトシェイプとカスタムベジェパスに加え、線形グラデーションや放射状グラデーションなどの詳細なカラーオプションもサポートしています。このアプリは汎用性が高く、その用途はあなたの想像力次第です。

PaintCodeの概要を説明するには、サンプルプロジェクトを作成して、実際に操作してみるのが一番良いと思いました。そこで、存在しないアプリのメニューバーアイコンを作ることにしました。このアプリでは、ファイルをメニューバーアイコンにドラッグして削除できるので、アイコンは小さなゴミ箱にする必要があります。

このプロジェクトを始めるにあたり、PaintCodeのキャンバスをカスタマイズして、アイコンの最終的な配置をより適切に反映させることにしました。具体的には、実際のメニューバーのスクリーンショットを撮り、そのスクリーンショットをPaintCodeのキャンバス画像に設定し、キャンバスのサイズをスクリーンショットのサイズに合わせて変更しました(下図参照)。

アイコンを囲む小さなコンテナを作成し、ゴミ箱の本体を描き始めました。PaintCodeの最も興味深い点は、ビジュアル設定の操作とコード出力が密接に連携している点です。ゴミ箱本体のようにグループを作成するとコード内にアイコンのその部分を具体的に描画するためのスコープが作成されます。また、PaintCodeのビジュアルエディタで図形に名前を付けると、その名前が結果のコード内でコメントや変数名として使用されます。これは、コードを簡潔で読みやすい状態に保つための非常に便利な方法です。

次に、缶の側面に隆起を作りました。縦に丸い長方形を3つ作成し、すべて選択して「結合」ボタンをクリックして、1つのオブジェクトを作成しました。

コード分​​離をより明確にするために、ゴミ箱の蓋をcanLidlidHandleからなる独自のスコープに分割することにしました。キャメルケースで記述すると、ビジュアルエディタでオブジェクト名が少し奇妙に見えますが、結果として得られるコードはObjective-C標準により適合しています。

ハンドルは見えにくいですが、  Round Rect ではなく、 曲線のBezierパスから作成することにしました。

アイコンが完全に描画されたので、ズームアウトして、毎日使う他のアプリと並べてメニューバーに表示した時の見た目をもっとよく確認してみましょう。コードをスクロールして、すべてが思い通りになっているか確認することもできます。

最後に、このコードをアプリに挿入する前に、キャンバスのサイズをより適切なサイズに変更する必要があります。設定を調整して端に少し余裕を持たせることもできますが、ここではかなりタイトにしています。PaintCodeを使えば、このコードを簡単にファイルにエクスポートしてXcodeプロジェクトにインポートしたり、コードをコピーして描画メソッドに貼り付けたりできます。

これは非常にシンプルなウォークスルーですが、PaintCodeはSVGのコードへのインポートなど、非常に強力な機能を備えています。さらに、PSDファイルのインポートを可能にするIAPも用意されています。PaintCodeは、標準画像とRetina画像、カラー、複雑なグラデーションに対応しています。iOS/OS Xのほぼすべてのプロジェクトに対応できるツールが揃っていると確信しています。

PaintCodeのウェブサイトには、役立つサンプルやチュートリアル動画がいくつか掲載されており、非常におすすめです。さらに、開発者向けチュートリアルサイトNSScreencastにも、10分間のウォークスルー動画が掲載されており、非常に参考になりました。チャンネル登録者の方はぜひこのエピソードをご覧ください。チャンネル登録されていない方は、ぜひ視聴をお勧めします。

PaintCode は、Mac App Store で 99.99 ドルで入手できます。また、期間限定で 19.99 ドルの MacHeist Bundle の一部としても入手できます。これは非常にお得な買い物です。

クラブ・マックストーリーズ

追加コンテンツと特典にアクセスする

Club MacStories は 2015 年に設立され、ほぼ 10 年間にわたって毎週独占コンテンツを提供してきました。

毎週、毎月の電子メール ニュースレターから始まったものが、すべての MacStories ファン向けに設計されたメンバーシップ ファミリーに成長しました。

詳細については、こちらおよびクラブの FAQ をご覧ください。

Club MacStories : アプリ、ヒント、自動化ワークフロー、長​​文執筆、MacStories Unwind ポッドキャストへの早期アクセス、定期的な景品など、盛りだくさんの情報を満載した、電子メールと Web 経由の週刊および月刊ニュースレター。

Club MacStories+ : Club MacStories が提供するすべての機能に加え、アクティブな Discord コミュニティ、クラブの過去のカタログ全体を閲覧するための高度な検索機能とカスタム RSS 機能、ボーナス コラム、多数のアプリ割引などが含まれます。

Club Premier : 上記のすべてに加え、早期に、広告なしで、高ビットレートのオーディオで配信される当社の主力ポッドキャストの拡張バージョンである AppStories+ が含まれます。