Swift Playgroundsで学ぶiOSプログラミング

Core Imageフィルターの詳しい説明を日本語で表示するプログラム

文●柴田文彦 編集●吉田ヒロ

2017年11月27日 17時00分

選んだカテゴリーに含まれるすべてのフィルター名を表示

 次に、上のテーブルビューからユーザーが選んだカテゴリーに含まれるフィルターの一覧を表示できるようにプログラムを拡張しましょう。

 そのためには、まず与えられたカテゴリーに含まれるフィルター名の一覧を表示するテーブルビューを含むクラスを作ります。一般的にクラスは、それぞれ別々のファイルに記述するのが普通です。Swift Playgroundsの場合は、自由に編集できる場がプレイグラウンドしかないので、複数のクラスを同じプレイグラウンド内に並べて書いても問題ありません。

 そのクラスは、FiltersTableViewControllerとしておきましょう。外部から、カテゴリー名を与えられるように、catNameというプロパティを用意しています。

一覧の中から選択したカテゴリーに含まれるフィルターの一覧を、別のテーブルビューに表示するクラス、FiltersTableViewControllerを定義します。外部から与えられるカテゴリー名から、CIFilterのクラスメソッドを使って、フィルター名の配列を取得して表示します

 そのカテゴリーに含まれるフィルターの名前のリストは、CIFilterクラスのfilterNamesというメソッドを使って簡単に得られます。このテーブルビューでは、そのメソッドが返したフィルター名の配列を表示することになります。

 そのフィルター名には、すべて先頭に「CI」が付いているので、テーブルのセルのテキストとして代入する際には、その「CI」を削除しています。

フィルター名は、フィルター名の配列、filterNamesから取り出した文字列の先頭の「CI」を外したものをセルのテキストラベルとして表示します

 最初のテーブルビューは、単にそのコントローラーのオブジェクトをプレイグラウンドのライブビューに代入していました。この段階では、最初のテーブルビューを表示してから、ナビゲーション機能によって次のテーブルビューに遷移させるさせるので、ナビゲーションコントローラーを介しています。

 そのために、最初に作ったCatTableViewControllerにも少し手を加えます。最も重要なのは、テーブルビューの行が選択された際に、今作ったFiltersTableViewControllerのオブジェクトを作成し、ナビゲーション機能を使って、そこに表示を切り替える部分です。

前の例で作ったCatTableViewControllerにも手を加えて、行がタップされた際にその行のカテゴリー名をFiltersTableViewControllerのオブジェクトに渡して、そちらに表示を切り替えるようにします

 その際には、切り替える直前に、フィルターの一覧を表示したいカテゴリー名を設定し、さらにナビゲーションバーに表示する名前も設定しています。その名前は、やはりカテゴリー名の先頭に必ず付いいている「CICategory」を除外したものにしています。

 もう1つ、機能には直接関係ありませんが、カテゴリー名の行の右端には、タップすれば、何かが開くことを表す「>」記号を表示するために、セルのアクセサリタイプをdisclosureIndicatorに設定しています。

 ここまでのプログラムを起動すると、まず前のプログラムと同じように、Core Imageフィルターのカテゴリーの一覧が表示されます。ただし、今度は行の右端に「>」マークが付いていることが確認できるでしょう。

最初に表示するカテゴリー名の一覧は、最初のプログラムとほとんど変わらないようにも見えますが、各行の右端に、次があることを示す「>」マークを表示しています

 どれかの行をタップすると、そのカテゴリーに含まれるフィルター名の一覧を表示するテーブルビューに切り替わります。

カテゴリー名を選択すると、そのカテゴリーに含まれるフィルターの一覧を表示するテーブルビューに切り替わります。この段階では、まだフィルターの名前を表示するだけで、この先はありません

 ナビゲーションバーには、選んだカテゴリー名が表示されています。ナビゲーション機能を利用して、簡単に元のカテゴリー一覧表示に戻ることもできます。

選んだフィルターの属性一覧を日本語で表示

 ここまでで、フィルターのカテゴリー名の一覧と、そこから選んだカテゴリーに含まれるフィルター名の一覧を表示する2段階のテーブルビューができました。次は、さらにフィルター名の一覧から選んだフィルターの属性を表示します。その属性は、配列ではなく辞書として得られます。その構造はフィルターごとに異なるので、内容の表示は、テーブルビューではなく、一般的なテキストビューを使います。内容が多い場合にはスクロールして見られるようにします。

 まずは、名前で与えられたフィルターの属性を表す辞書の内容をテキストビューに表示するクラス、FilterAttributesViewControllerを作ります。

最後にフィルターの一覧から選択したフィルターの属性を表示するためのクラス、FilterAttributesViewControllerを定義します。これはテーブルビューではなく、辞書として与えられるフィルターの説明を、テキストビューにテキストで表示します。外部から与えられるフィルター名から、CIFilterのオブジェクトを作成し、そのattributesプロパティの値を取得します

 フィルターの属性は、2段階の処理で得ることができます。まず、フィルター名を指定してCIFilterオブジェクトを作成します。次に、そのオブジェクトのattributesプロパティの内容を取り出せば、それが求めるフィルターの属性というわけです。

 そうして得られた辞書からは、forループを使って、その内容を洗いざらい取り出しています。取り出した値が、さらに辞書になっている場合もあります。その場合は、さらにその辞書の内容をforループで展開しています。大元の属性を1回の処理で文字列に変換することも可能なのですが、日本語が含まれていると、深い階層の辞書に含まれる日本語の文字列がうまくデコードできないので、このようにしています。取り出した内容は、キーと値に分けて、ごく簡単にフォーマットしながらテキストビューに表示する文字列を作っていきます。

 二重のforループを使ってフィルターの属性を文字列に変換し終わったら、それをテキストビューのtext属性に代入してから、そのテキストビューを、このビューコントローラーのビューに設定します。

FilterAttributesViewControllerのviewDidLoadメソッドの続きです。辞書の内容を展開するforループの部分はダブって表示しています。この図で新しいのは、辞書の内容を展開したテキスト、descをテキストビューのテキストとして設定し、そのテキストビューをこのビューコントローラーのビューとしてセットしている部分です

 あとは、フィルター名の一覧のテーブルビューから選んだフィルターの属性を表示するために、コードを追加します。

この段階では、FiltersTableViewControllerにも手を加えて、フィルターの行が選ばれた際に、FilterAttributesViewControllerのオブジェクトを作成し、その行のフィルター名を渡して表示を切り替えます。またcellForRowAtのメソッドでは行の右端の「>」マークの表示を設定しています

 このコードはFiltersTableViewControllerの中に書きます。テーブルビューの行が選択された際には、FilterAttributesViewControllerクラスのオブジェクトを作成し、そのfilterNameプロパティに選択されたフィルター名を代入します。その後、表示用の名前(「CI」を削除)をtitleプロパティに設定してから、ナビゲーション機能を使って、そのオブジェクトに表示を切り替えます。

 やはり機能には関係ありませんが、テーブルの各行の右端には「>」マークを表示して、続きがあることがわかるように、セルのアクセサリタイプを設定しています。  このプログラムを動かすと、最初のプログラムと同様のカテゴリーの一覧、2番目のプログラムと同様のフィルターの一覧が表示されるので、今度はどれかのフィルター名にタップして選択してみます。すると、そのフィルターの説明が、日本語交じりの文字列で表示されます。

最初に表示されるテーブルビューから初めて、カテゴリー名→フィルター名と選ぶと、選んだフィルターの属性が表示されます。ユーザー向けの名前のほか、iOSとmacOSのどのバージョンからサポートしているか、必要なパラメータの種類、その内容などが可能な部分は日本語で表示されます

 これはスクロール可能なテキストビューなので、説明が多い場合は、上下にスクロールして、すべての内容を表示することができます。

次回の予定

 今回一覧表示できるようになったフィルターの中に、使ってみたいと思えるものはあったでしょうか。私としては、Generatorカテゴリーの中のQRCodeGeneratorが気になりました。これは入力画像を加工して出力画像を得るのではなく、QRコードに変換したい文字列を入力すると、QRコードの画像を出力するという、ちょっと変わったフィルターです。次回は、そのフィルターを使って、任意の情報をQRコード化できるプログラムを作ってみることにしましょう。

mobileASCII.jp TOPページへ

mobile ASCII

Access Rankingアクセスランキング