MOSA Multi-OS Software Artists

MOSAはソフトウェア開発者を支援します

MOSA「iOS基礎技術入門シリーズ」トップへ戻る

Core Image 入門

 

  
 

「Core Image 入門」概要

Core Image 入門」には、iOSのCore Graphicsフレームワークに関するサンプルアプリのXcode 5プロジェクトと、それを解説した入門書籍(iBooks対応 108ページのePubファイル)が含まれています。これにより、サンプルアプリ、iBooks用の入門書籍、ソースコードの3点を活用しながらCore Image の使用方法を習得できます。書籍やサンプルの解説内容はiOS 6までの機能となっていますのでご注意ください。サンプルアプリの開発環境はXcode 5で、起動環境はiOS 6.0以上が搭載されたiPadiPad AiriPad miniとなります。

「Core Image 入門」目的

OS X 10.4から採用されたCore ImageフレームワークはQuartz Coreに属しています。このフレームワークはObjective-Cのクラスとメソッドで構成されているのでCocoaプログラミングモデルとも相性が良く、GPUのシェーダプログラムを活用することでリアルタイムイメージプロセッシング(画像や映像のフィルタ処理、合成処理、変形処理)を実現することが可能です。具体的には、読み込んだ画像データに対してカラー調整やシャープネスなどのフィルタ処理を超高速で実行することができます。

このフレームワークは、Apple社が提供している多くのMacアプリで使われていますが、ようやくiOSにも実装されて(iOS 5以上で利用可能)画像編集アプリなどでも数多くの組み込みフィルタが使えるようになりました。iOS 6からは利用できるフィルタ数も100近くに増えています(OS Xでは130以上)。本アプリと書籍では、Core Imageを利用するサンプルソースコードを幾つか紹介することで、iOSに実装されたばかりの本フレームワークの活用方法の習得を目指します。
 
著者:有限会社オッティモ 小池邦人

「Core Image 入門」書籍の章立て

(1) はじめに
(2) アプリ連携やサンプルソースコードについて
(3) Core Image関連の技術資料を入手する
(4) Core Imageの仕組みと役割
(5) iOSで利用可能なフィルタを調べる
(6) iOSアプリでフィルタ処理を試す
(7) フィルタ処理における画像の入出力
(8) CIFilterのサブクラスを用意する
(9)カラーエフェクト、カラー調整、合成フィルタ
(10)幾何学調整、タイルエフェクト、歪みエフェクト
(11)ブラー&シャープ、スタイルエフェクト、ハーフトーン
(12)グラデーション、 ジェネレータ、 トランジション
(13)目的に合わせて複数フィルタを活用する
(14)Core Imageの顔認識機能を利用する
(15)Core Imageの画質改善機能を利用する
(16)AV Foundationとリアルタイム処理
(17)Movie再生とリアルタイム処理

サンプルアプリの利用方法

XcodeプロジェクトをビルドしてサンプルアプリをiPadにインストールします。アプリが起動したら、まず最初にポップオーバーに表示されたiBooksアイコンをタップし、iBooks側に「Core Image 入門」書籍をインストールしてください。インストールが完了するとiBooksが起動して書籍がオープンされます。iPadにiBooksがインストールされていない場合には、App Store経由で先んじてiBooksを入手しておく必要があります。サンプルアプリをiOSシミュレータで起動した場合いは、iBooksが起動できないなど幾つかの機能が制限されますので、ご注意ください。

書籍はePubドキュメントです。本文については、iPad版 iBooksのテーマが「フルスクリーン」、フォント種類が「ヒラギノ明朝」、フォントサイズが「下から3番目」に合わせてレイアウトされています。その設定に変更してからiPadを縦向きにしてお読みください。Mac版 iBooksで読まれる場合には、表示を「単一ページ」に設定してください。

一度登録してしまえば、本文中に設定されているハイパーリンク経由でアプリの指定したデモを起動することが可能です。アプリを起動するハイパーリンクは先頭に「★」が付いています。その箇所のタップでアプリが起動され、リンク先に記載されているデモ内容が実行されます。アプリからはツールバーの「ビューアへ」ボタンをタップすることでiBooksへ戻ることが出来ます。

サンプルソースコードプロジェクトの開発環境はXcode 5です。ビルドして実機にインストールする場合には、Xcodeのプロジェクトターゲット(TARGETS)のGeneralで表示される「Build Identifier」と、Build Settingsの「Code Signing Identity」を正しく再設定してください。アプリの起動対象はiOS 6.0以上であり、iOS 7.0でも問題なく動作させることができます。

サンプルアプリにおけるデモの種類

(A)CI01 利用可能フィルタ
(B)CI02 複数フィルタ利用
(C)CI03 表示先を設定する
(D)CI04 CIFilterサブクラス
(E)CI05 カラーエフェクト
(F)CI06 カラー調整
(G)CI07 合成フィルタ
(H)CI08 幾何学調整
(I)CI09 タイルエフェクト
(J)CI10 歪みエフェクト
(K)CI11 ブラー&シャープ
(L)CI12 スタイルエフェクト
(M)CI13 ハーフトーン
(N)CI14 グラデーション
(O)CI15 ジェネレータ”
(P)CI16 トランジション
(Q)CI17 オールドフィルム
(R)CI18 クロマキー合成
(S)CI19 顔の回りをマスク
(T)CI20 顔の回りをぼかす
(U)CI21 顔をモザイク処理
(V)CI22 自動で画質を改善
(W)CI23 ビデオ映像の顔認識
(X)CI24 ビデオフィルタ処理
(Y)CI25 Movieフィルタ処理

サンプルアプリのソースコードについて

サンプルソースコードの実行環境は、ビューコントローラのクラス定義(.h)とクラス実装(.m)とnibファイル(.xib)の3つにまとめられています。デモ内容とソースファイルの対応については次の一覧表を参照してください。 ソースファイル名の先頭英文字はデモアプリの一覧にも記載されていますので、そちらで参照することも可能です。開発環境はXcode 5以上(ARC使用)アプリ動作環境はiOS 6以上となります。

 CI01ViewController ….(A)CI01 利用可能フィルタ
 CI02ViewController ….(B)CI02 複数フィルタ利用
 CI03ViewController ….(C)CI03 表示先を設定する
 CI04ViewController ….(D)CI04 CIFilterサブクラス
 CI05ViewController ….(E)CI05 カラーエフェクト
 CI06ViewController ….(F)CI06 カラー調整
 CI07ViewController ….(G)CI07 合成フィルタ
 CI08ViewController ….(H)CI08 幾何学調整
 CI09ViewController ….(I)CI09 タイルエフェクト
 CI10ViewController ….(J)CI10 歪みエフェクト
 CI11ViewController ….(K)CI11 ブラー&シャープ
 CI12ViewController ….(L)CI12 スタイルエフェクト
 CI13ViewController ….(M)CI13 ハーフトーン
 CI14ViewController ….(N)CI14 グラデーション
 CI15ViewController ….(O)CI15 ジェネレータ
 CI16ViewController ….(P)CI16 トランジション
 CI17ViewController ….(Q)CI17 オールドフィルム
 CI18ViewController ….(R)CI18 クロマキー合成
 CI19ViewController ….(S)CI19 顔の回りをマスク
 CI20ViewController ….(T)CI20 顔の回りをぼかす
 CI21ViewController ….(U)CI21 顔をモザイク処理
 CI22ViewController ….(V)CI22 自動で画質を改善
 CI23ViewController ….(W)CI23 ビデオ映像の顔認識(シミュレータ不可)
 CI24ViewController ….(X)CI24 ビデオフィルタ処理(シミュレータ不可)
 CI25ViewController ….(Y)CI25 Movieフィルタ処理(シミュレータ不可)

CategoryViewController」フィルタカテゴリー表示用のビューコントローラクラス
TypeViewController」コンポジットフィルタタイプ表示用のビューコントローラクラス
MyCIFilter」画像のカラー反転(インバート)を行うCIFilterのサブクラス
ChromaKeyFilter」クロマキーを使い画像をマスキングするCIFilterのサブクラス
EAGLView」フィルタ処理した結果の画像を表示するためのOpenGL ESのビュークラス
FilteredView」フィルタ処理した結果の画像を表示するためのUIViewのサブクラス

【ご注意】サンプルソースコードの使用権利はフリーです。使えるようであれば、ご自身のソースファイルへコピー&ペースしてご利用ください。ただし、その結果として発生した事象に対しては責任は負いかねますのでご了承ください。