皆さんこんにちは、ブレイブソフトの“めがね”です。
Xcode6にはいくつかの新機能が加わりましたが、今回はベクターを使用した開発方法について書いていきたいと思います。
今までは端末に対応したビットマップ画像をそれぞれ用意する必要がありましたが、ベクター画像を使用することで用意する画像を１つにまとめる事ができます。
果たして本当にベクター画像にすることにメリットがあるのか、検証していきたいと思います。
- ベクターってなに？
- デザインデータの作成方法
- 素材の準備
- 開発の手順
- 感想
- 最後に
ベクターってなに？
コンピューター上で画像を表示する形式には大きくラスターとベクターの2種類があります。
ラスターが解像度に依存する一方でベクター形式は解像度には依存せず、拡大・縮小などの変形を加えても画像自体が荒れることはありません。
このベクター画像を使用してアプリを開発できれば様々な端末の解像度に合わせなければならない状況下で画像の荒れを気にしなくてもよくなります。
デザインデータの作成方法
UIデザインに関してはPhotoshopを使って制作していきますが、今回はアイコンなど開発時に必要なベクターデータはIllstratorで作成していきます。
注意としてはIllstratorのアートボードを@1xのサイズで作成すること。 これは開発時に指定するサイズとなるので重要なポイントです。
また作成したaiデータは、Photoshopにリンク配置することができるので、大元のIllstratorを編集すればPhotoshopにすぐ反映されるので非常に便利です。
※この機能はPhotoshop CC 14.2以降のみ
素材の準備方法
これに関しては至ってシンプルです。
作成した各aiデータをPDFに変換するだけ。
複数データがある場合は、バッジを作成して一括処理してしまう方法がオススメです。
開発の手順
ここからは実際にベクター画像を使用して実際に開発を行なう方法を解説していきます。
-
- Xcodeを起動し、プロジェクトを作成します。
- Images.xcassetsを選択しImage Setを作成します。
-
- Image SetのTypeを「Vectors」に設定します。
-
- Image Setにベクター画像を設定します。
- ここまででベクター画像の設定は完了です。
ここからは実際に実装を行い、アプリ上での見え方の検証をしてみましょう。
Story Board上にUIImageViewを用意し先ほどのImage Setを設定してみます。
ここで設定する際、UIImageViewのサイズはベクター画像のサイズに合わせます。
ベクター画像のサイズより大きいサイズにしてしまうと粗く表示されてしまうため注意が必要です。
それでは実際に端末上で見え方を確認して見ましょう。
ちなみに、この画像をUIImageViewで作成する際に拡大してしまうと、アプリとして表示する際に次の様に粗くなります。
ベクター画像とはいえXcode上で拡大しても綺麗に表示されないようです。
これはコンパイル時に元のベクター画像が＠１サイズのpngデータで書き出され、拡大表示されているためです。
※実際にアプリの中を覗いてみるとPDFファイルは格納されていませんでした。
感想
デザイン制作ではPhotoshopとIllustratorを行き来したり、開発に必要な@1xのサイズを意識したりする必要ありますが、iPhone 6やiPhone 6 Plus、iPadなどへの対応を考えると効率のよい開発を行なう事ができます。
開発時の作業は１ファイルを取り込むだけで設定が完了するため、今までに比べて手間が省け、今後より大きいサイズ対応が求められた際もベクター画像なら１ファイルで対応可能です。
デメリットとしては既存プロジェクトのラスター画像を置き換えるには手間がかかるため、新規プロジェクト向きという事でしょうか。
■最後に
現在はPDFしか使用できませんが、今後svg等に対応していけばより使いやすくなるのではないでしょうか。
ここまで記事上で説明してきましたが、実際にアプリで確認してみないと判断が難しいと思います。
実際にbravesoftで開発をさせていただいた案件でベクターを採用したプロジェクトがあります！！
是非、仕上がり具合を確認してみてください。
仕事も人生ももっと楽しくする
キュレーションマガジンアプリ「U-NOTE」
