HMDT - Special Issue / Sketch BP

Mac OS X の Developer Kit には Sketch っていうアプリケーションがついてくるんだ。簡単な機能を備えたドローツールだ。すごくシンプルで、ツールバーには四角、丸、線、テキストぐらいしか用意されていない。ちょっとドローツールとしては、使い物にならないよな。というのは、これはサンプルとして提供されているアプリだからだ。ソースコードもついてくるよ。だから、勉強には最適だね。

ふーん、ということでコードを眺めていると、いくつか面白いことに気付く。ツールバーのアイコンとしてカーブや、ポリゴンや、曲線が入ってるじゃん？さらに、ToDo.txt っていうファイルが含まれている。これを見ると、さらなるグラフィック・サブクラスのサポートや、クループ化、線の結合とかがあげられてるよ。なるほど。もうちょっと余裕があれば、これらの機能も付け加えたんだけど、とりあえずおいてあるわけね。でも、あったら便利だよな。、、、やったるかい？

と、いうわけで、いつものように、欲しいものは自分で作るの精神に乗っ取り、Project Sketch BP がスタートしました。BP は Best Performance の略、ではなくて、Bezier Path のことです。Sketch にベジェ曲線編集機能を追加するという意味ね。

さて、ドローツールを作るとすると、本格的にしようと思えばいくらでもやることが出てきてきりがないので、ゴールを決めます。この Project の第一目的は、Cocoa の勉強なので、構造の把握が第一です。で、あとはいくつか機能を追加してみて、、、ソースコードを眺めると、いくつかのクラスの追加ぐらいは簡単にできそうだな。ということで、目標は、

「円弧、ポリゴン、ベジェツールの追加」

で、いきます。

この記事は、たぶん、3 部構造になるよ。まず、Sketch の概観を把握するための Overview パート。次に、各機能をコードレベルで調べるための、Case Study パート。そして、機能を追加する Modification パートだ。じゃ、まずは Overview からどうぞ〜。

- Overview -

Sketch ってどんなアプリ？

Sketch のクラス構造

ツールパレット

グリッドパネル

インスペクタパネル

- Case Study -

• Sketch に見る MVC アーキテクチャ

Sketch に見るドキュメントベースアプリケーションの作り方

• Sketch に見るドキュメントベースアプリケーション
• Sketch に見る書類の保存
• Sektch に見る書類の読み込み
• Sketch に見る印刷
• Sketch に見るアンドゥ

Sketch に見るドローアプリケーションの作り方

• Sketch に見るドローオブジェクトの選択
• Sketch に見るドローオブジェクトの作成
• Sketch に見るドローオブジェクトの移動、変形
• Sketch に見るドローオブジェクトの編集

- Modification -

ツールパレットの変更

• ツールパレットにツールを追加

ドローオブジェクトの変更

• ドローオブジェクトに状態調査を追加
• ドローオブジェクトに編集モードを追加

円弧ツールの追加

• 円弧ツールの仕様
• 円弧ツールの基本部分の実装
• 円弧ツールのドローオブジェクトの作成の実装
• 円弧ツールのドローオブジェクトの保存と読み込み

ポリゴンツールの追加

• ポリゴンツールの仕様
• ポリゴンツールのドローオブジェクトの作成の実装
• ポリゴンツールのドローオブジェクトの移動の実装
• ポリゴンツールのドローオブジェクトの編集の実装
• ポリゴンツールのドローオブジェクトの保存と読み込み

ベジエ曲線ツールの追加

• ベジエ曲線ツールの仕様
• ベジエ曲線ツールのドローオブジェクトの作成の実装
• ベジエ曲線ツールのドローオブジェクトの編集の実装

- To do -

• 今後必要なもの

- ソースコードのダウンロード -

HMDT - Download / Sketch BP