合成写真アプリをアップデートする

前にカメラアプリのレッスンで作った合成カメラアプリを、もうちょっと使いやすくしてみましょう。

 

まず、写真を撮る段階で合成するイメージを表示します。

次に、撮影後に画像の保存やSNSへの投稿などを行う確認画面を出します。
これで一応合成カメラアプリの体裁になるでしょう。

 

学習内容
・別のビューを開く方法
・画面にオーバーレイを表示する方法
・SNSやメールなどの画像共有

1.MyCameraアプリに画面を追加する

以前作ったMyCameraアプリのプロジェクトを開いてください。
開いたら、メニューの「File→New→File」を選んでください。

 

「Cocoa Touch Class」を選んでNextを押してください。

 

下記画像のように設定してNextをクリックしてください。「Also create XIB file」にチェック入れるのを忘れないでください。

 

「Create」をクリックして、myCameraの配下に保存してください。

 

2.サポートファイルをコピー

サポートファイルを使います。ダウンロードして解凍し、中のファイルUIUtility.swiftをプロジェクトにコピーしてください。
サポートファイルをダウンロード

 

 

下記画像のようにチェックを入れてFinishボタンを押してください。

 

3.PictureViewController.xibを作りこむ

ファイル一覧のPictureViewController.xib」をクリックしてインターフェイスビルダーを開いてください。
ImageViewを配置して、画面全体を覆うように広げてください。Content Modeは「Aspect Fit」にしてください(いろいろ試してもいいです)。

 

Autoresizingを設定してください。

 

画面下部にボタンを2つ配置してください。

 

各ボタンの制約と整列を設定しましょう。セーフエリア(Safe Area)からの距離で位置指定します。

左下のボタンは左端と下端からの距離、右下のボタンは右端と下端からの距離を指定することで常に下側に配置されます。

ボタンのサイズも指定しておきましょう。

 

ボタンのタイトルとアイコンを入れて、大きさや太さを好みで調整してください。

Xcodeにはあらかじめ多数のアイコン(Appleでは「シンボル」と呼ぶ)画像が準備されているのでこれを使いましょう。

画像を準備すれば、オリジナルデザインのアイコンを設定することもできます。

 

ボタンの背景が透明だと見えにくいので背景色も設定します。ここではライトグレーにします。

透過率(Alpha値)を0.8にして、アイコンの色も文字と同じにしましょう。

 

4.PictureViewController.swiftを変更する

下記のようにメンバ変数、初期画面のイメージセット、アウトレット、アクションを設定してアクションの中身を書いてください。

tapSave:画像をフォトアルバムに保存する命令と、保存したという確認のメッセージを表示します。
tabShare:SNSやメールなどで写真を共有するツールを呼び出す処理を書いています。

 

アプリができ上がってからボタンを押すと、下のような画面が呼び出されます(左:tapSave 右:tapShare)。

 

5.ViewController.swiftを変更する

ViewController.swiftにある「func photoOutput」の画像を保存していた部分を下の赤枠のように書き換えてください。
保存するのではなく、PictureViewControllerにイメージを渡して画面を開く処理にします。

 

6.Main.Storyboardを変更する

ここまでの修正で、撮影後に画像を確認してボタンを押したら動作するという部分まではできました。
ですが撮影時にオーバーレイする画像は、最初から表示されていた方が便利です。

Main.Storyboardを開いてImageViewを貼り、それにオーバーレイの画像を表示するようにしてください。

Content ModeはAspect Fitにします。

ここで雑誌の表紙のような画像にしたい場合はimageで「nora_tate」を選び、プログラムで「bora_tate」となっている部分をすべて「nora_tate」に変更しましょう。

さらに画面いっぱいに広がるようにAutoresizingを設定してください。

 

ViewController.swiftにアウトレットとして接続し、ViewDidLoadにaddSubViewを追加してください。

なお、addSubViewしているオーバーレイとボタンは、インターフェイスビルダー(デザイン画面)で作ったものをアウトレットで接続するのではなく、プログラム中で作ることも可能です。やや煩雑になるので、ここではインターフェイスビルダーを利用しています。

 

7.縦画面に固定する

画面が回転すると横画面用の素材などが必要になり面倒なので、縦画面に固定してください。

 

8.実行してみる

実行すると、カメラの画像にオーバーレイが重なり、完成画像と同じように撮影することができます。

保存や共有を行うサブビュー(PictureView)を閉じる場合は、画面を上から下にスワイプ(指で下げる)してください。

確認画面で保存や投稿などを選べるので、カメラアプリとして使い勝手がいいものになりました。

 

補足:プログラムで部品の見た目を変更する

これまで部品の見た目はすべてインターフェースビルダーで設定してきましたが、コードで見た目を変更することもできます。
今回はボタンの形を上の真ん中の画像のように、角を丸く変更してみましょう。
コードで見た目の指定をするには、部品をアウトレットとして接続する必要があります。
2つのボタンをそれぞれPictureViewController.swiftにドラッグ&ドロップします。
これでボタンのアウトレットが2つできました。
アウトレットができたら、初期画面を設定するviewDidLoadにボタンの角を丸くするコードを書きます。
見た目をコードで指定した場合、Storyboardには反映されません。
Storyboardでは角ボタンのままですが、デバイスにビルドすると角が丸くなって表示されます。
他にもコードによる表示指定の方法はたくさんあるので、検索していろいろ試してみましょう。

今回はボラジノールと雑誌の表紙にしましたが、他の広告やキャラクターを重ねることでPR用のカメラアプリとしてリリースすることもできます。


戻る

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top