フォトアルバムから画像取得のライブラリ化を試作(全体設計編)

新しいiPadアプリ開発の企画が持ち上がりつつあります。まだ確定ではないのですが、それに使う機能のライブラリ化を試作してみました。手早く作って、とりあえず動かしただけですが、他に面白そうな話題もないので紹介します。

ライブラリ化を試作したのは、iOSのフォトライブラリに含まれる写真を選んで、iPadアプリに取り込む機能です。iOS8から登場した、Photosフレームワークを使って作ってみました。

　

いつものように、まずは全体像を決めます。フォトライブラリに含まれる写真の中から１枚を選ぶわけですから、数が多い場合は意外に大変です。本当に膨大だと、どの方法でも大変でしょうが、ある程度の絞り込みがでできやすいようにと、まずアルバムを選んでから、写真を選ぶ流れに決めました。２段階の選択とするわけです。

この機能の画面表示の形は、次のようにしました。アルバム名の並んだTableViewが、まず左側に表示されます。その中で１つのアルバムを選択すると、その右隣にある別なTableViewに、ファイル名の一覧が表示されます。その中の１枚を選ぶと、右端にある枠内に実際の画像が表示されるという形です。つまり、３つのブロックが横に並んでいて、左から順番に、アルバム名のTableView、ファイル名のTableView、画像表示枠の役割となります。

これらを含む全体Viewも、画面上のサイズを、ある程度まで指定できるように作ります。とりあえず、サイズが可変する部分は、右端の画像表示のブロックに決めました。

　

使い方としては、色々な形に対応できた方がよいでしょう。モーダルダイアログ風に現れて、選択が完了するまで表示し続けるとか。画面の一部として表示したままになり、必要な時だけ操作して使うとか。どちらでも使えるように、作るときにサイズが指定でき、Viewとして貼り付けられる形にしました。UIViewのサブクラスです。

選択した画像のコピーボタンも付けようと考えたのですが、このViewはアプリから呼ばれる側です。呼ばれる側にボタンを付けると、やり取りが美しくなくなりがちです。そこで、このViewにはボタンを付けず、メソッドで画像を渡す形としました。そのメソッドをアプリ側から呼び出すと、画像情報が得られるというわけです。もし画面上でボタンが必要なら、アプリ側でボタンを用意し、ボタンをタップしたときにメソッドを呼び出す形となります。

　

基本的な動作(画面上で見える動作)は、次のようになります。

呼び出されたときに、左側のTableViewに、アルバム名が入っています。その１つをタップすると、選ばれたアルバム内に含まれる写真の一覧が、中央のTableViewに表示されます。とりあえずの試作なので、ファイル名などのテキストを表示します。その中の１つをタップすると、右側の画像表示領域に、選ばれた画像を表示します。続いて、別な画像をタップすると、タップされた名前の画像を、同じく右側の画像表示領域に表示します。

どれかの画像を表示した状態で、左端にアルバム名をタップすることもあるでしょう。その際には、中央のTableViewが更新されて、新たに選択されたアルバムに含まれるファイル名などが表示されます。当然、写真が選択されてない状態に変わり、右側の画像表示領域もクリアーされます。

ここまでは、ライブラリ側を単独で操作している場合の動きです。選択した画像を登録したりコピーする場合は、アプリ側に必要な機能(ボタンなど)を用意して、それを操作してもらいます。

　

画面上の他の要素としては、この機能を短かく伝えるためのラベルを、画面上の左上に入れます。また、使うかどうか分かりませんが、メッセージ欄としてのラベルを、画面上の右上に配置します。試作段階なので、メッセージ欄には画像サイズでも表示すれば、開発中の動作確認に役立つでしょう。

以上の話を、箇条書きで整理すると、次のようになります。

ライブラリ化の試作：フォトアルバムから画像を取得する機能
・UIViewのサプクラスとして作る
・画面上では、以下の３つのブロックに分かれている
　・左側：アルバムを並べたTableView
　・中央：画像ファイルを並べたTableView
　・右側：選択した画像を表示
・画面上の他の要素
　・この機能を伝えるラベル：Viewの左上に配置
　・メッセージ欄：Viewの右上に配置(とりあえず画像サイズなどを表示)
・画面上のサイズは、作るときに指定できる(ある程度の範囲で)
　・上記の画像表示の部分を可変サイズとする
・アプリへ画像情報を渡す方法：アプリがgetメソッドを呼び出す
・細かな動作
　・アルバムを切り替えた場合は、画像選択をクリアー
　・画像が選択されてない状態では、アプリ側へ渡す画像はnilとなる
・実装上の注意点
　・TableViewなどはデフォルト状態のまま使い、凝らないこと(将来の互換性を重視)

大まかな仕様が決まったので、これに沿ってコーディングすることになります。

　

具体的なSwiftコードを示しながら説明すると長くなるので、ソースコードと解説は、次回の投稿で取り上げます。