[iOS 8] PhotoKit 10 – Photo Editing Extensionの実装 (前篇)

[iOS 8] PhotoKit 10 – Photo Editing Extensionの実装 (前篇)

Clock Icon2014.11.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

前回の記事ではPhoto Editing Extensionの概要を紹介しましたが、今回はPhoto Editing Extensionの実装を扱います。

以下の画像のような、写真にフィルターをかけるApp Extensionを実装します。

ios8-photokit10-00

実装

プロジェクト作成

新しいプロジェクトを作成します。今回は「Single View Applicasion」テンプレートを選択します。

ios8-photokit10-00

ターゲット追加

プロジェクトの作成できたら、App Extension用のターゲットを追加します。

Xcodeのメニューの「File」→「New」と辿り、「Target」をクリックします。

ios8-photokit10-01
追加するターゲットの種類を選択する画面が表示されますので、 「Applicasion Extension」項目をクリックして、 「Photo Editing Extension」を選択し、「Next」ボタンをクリックします。

ios8-photokit10-02
追加するターゲットのオプションを入力/選択する画面が表示されます。 Product Name項目に「FilterExtension」と入力し、「Finish」ボタンをクリックします。

ios8-photokit10-03
「FilterExtension」用のスキーマを有効にするか聞かれるので「Activate」をクリックします。

ios8-photokit10-04
ターゲットを追加すると、必要最低限のファイルも追加されます。

  • メインViewControllerのクラスファイル
  • storyboardファイル
  • Info.plistファイル

ios8-photokit10-05

storyboardファイルの編集

「MainInterface.storyboard」ファイルを編集していきます。

もともと配置してあった「Hello World」ラベルを削除し、 UIImageViewとUISegmentedControlを配置します。

ios8-photokit10-06
Viewの背景色を黒に変更します。 UISegmentedControlの項目を1つ増やし、 以下の図の通りに「セピア」「クローム」「インスタント」というタイトルを設定します。

ios8-photokit10-07
Autolayoutの制約を追加します。 UIImageViewとUISegmentedControlに関する制約は以下のように設定しました。

ios8-photokit10-08
Storyboard編集画面上のFrameをアップデートすると以下のような配置になります。

ios8-photokit10-09
UIImageViewとUISegmentedControlに関して、Storyboardから実装ファイルへ、アウトレットを接続します。 プロパティ名はそれぞれimageView、segmentedControlとしました。

ios8-photokit10-10

まとめ

今回はターゲットの追加とStoryboardファイルの編集を行いました。Photo Editing Extensionの実装(後編)へ続きます。

本シリーズの記事一覧

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.