初心者から始めるスタンプカメラの作り方（6/6）

それでは前回の続きを開始します。

前回画面上に線を描画できるところまで行いましたけど、

今回は、画面上に追加した線やスタンプなどを削除する機能及び

作成した写真の上につけたスタンプや線などが入った作品を保存して

iPhone上のライブラリに保存して

いつでも見られるようにするという機能を実装していきたいと思います。

それではViewController.swiftを開いてください。

そしてViewControllerクラスの一番下に次のような記述を追加していきます。

deleteTappedメソッドを追加していきます。

その中にこのような記述をしていきます。

まずdeleteTapped、これは画面の下部にこのようなゴミ箱の形をしたアイコンを配置しましたけど、

それをタップした時に呼ばれるメソッドになります。

ViewControllerの方で、コネクションインスペクタでdeleteTappedと

このゴミ箱のアイコンを紐づけておきましょう。

こうですね。

ViewController.swiftに戻ります。

この中のdeleteTappedをもう一回見てみましょう。

if文があります。

もしcanvasviewのsubviewsのcountが1より大きければ、

真ん中の処理を行うということを行っていきます。

このsubviewsっていうものですけど、

canvasviewの持っているsubviewsのリストを取得することができます。

配列として取得できますので、countプロパティにより、

いくつのsubviewを持っているかっていうのを取得することができるんです。

canvasviewや一番奥にあるsubviewとしてimageview、背景のviewがあります。

ですのでそれを除いて、subviewの数がいくつかあれば、

この中の処理を行ってくださいという、そういう意味になります。

で、let lastSubViewです。

canvasviewのsubviewsのlast、つまり手前・奥で言うと、

一番手前側にあるsubviewsというのを取得します。

とりあえずUIViewにキャストしておきますね。

そしてこのlastSubViewを画面から取り除いてしまいます。

線の描画の場合は以上で終了になるんですけど、

スタンプの場合は配列からそのスタンプを削除しないといけません。

ですのでスタンプの場合はこのような処理を行います。

lastSubViewがスタンプの型を持っている場合は、

このような処理を行うという、そういう意味になります。

stamp、lastSubViewの中から、lastSubViewをStampにキャストします。

そしてstampArrayの中からこのstampを見つけてやります。

そしてindex番号を取り出します。

index番号が無事取り出せた場合は、

このstampArrayの中からindex番目の要素を削除してあげるということを行います。

これにより、スタンプの場合であっても画面から削除されてスタンプから削除される、

これにより完全にこのスタンプが削除されることになります。

それでは実行して動作を確認してみましょう。

実行ボタンをタップします。

まずライブラリから適当な写真を選択します。

そしてスタンプの追加を行います。

描画します。

削除ボタンをタップします。

このように、線であってもスタンプであっても削除することができました。

それでは次、

この作ったスタンプと線入りの写真を保存する機能を実装していきたいと思います。

それではViewControllerに次のメソッドを記述してみましょう。

まずsaveTappedメソッドを書いてみましょう。

これが画像を保存するための命令になります。

まずUIGraphicsBeginImageContextWithOptionsで

どこの領域の画像を保存するか指定してあげます。

領域はcanvasViewのbounds.sizeによって

どれくらいの大きさの画像を保存するか指定してやります。

そしてcanvasViewのopaqueで不透明であることを指定してやります。

透明度は、あ、透明度ではないですね、失礼しました。

そしてcanvasViewのlayerのrenderInContextで、

layerというのは描画領域なんですけど、

描画領域をContextを使って処理可能な状態にしてあります。

UIGraphicsGetCurrentContextですね、

現在の描画処理を行うためのコンテキストを取得してあります。

そしてimage。

imageをここから取得します。

UIGraphicsGetImageFromCurrentImageContextで

今のコンテキストから画像データを取得してあります。

そしてUIGraphicsEndImageContextをここで閉じてやります。

BeginImageContextとEndImageContextが対になりますね。

この中で必要な画像を取り出してimageに格納してやるという処理が行われているわけです。

そしてsaveの処理です。

viewから取り出した画像をフォトアルバムに保存するという処理を

この一行で行っています。

まずこのimageを指定します。

このselfの中にあるこのメソッドが画像の保存完了後に呼ばれるということになります。

次、imageのdidFinishSavingWithErrorです。

この中でまずalertを表示しています。

このメソッド自体、保存が完了した時に呼ばれるメソッドですので、

その中でalertで「保存完了です」というメッセージで表示して、

「OK」というボタンを表示します。

「OK」というボタンをタップしたらこの表示が消えることになります。

では、この記述ができましたので実際に実行して様子を確認してみましょう。

ライブラリから写真を選択しまして、スタンプを追加します。

描画もしていきます。

はい、それではこの画像を保存してみます。

このボタンをタップします。

あ、失礼、一つ忘れていました。

saveTappedメソッドとストーリーボード上のボタンを紐づけるのを忘れていました。

このsaveTappedメソッドをこの保存ボタンと紐づけます。

で、再び実行してみます。

ライブラリから写真を選択しまして、スタンプを配置していきます。

そして描画もできますね。

そして右下の保存ボタンをタップすると、

このように保存完了と表示されました。

以上により、この写真がiPhoneの持っているフォトライブラリに保存されることになります。

後からいつでもその写真を見ることができるわけです。

以上で何回かに渡りましたスタンプカメラの制作は終了になります。

ぜひ皆さん、このアプリをカスタマイズして皆さんのオリジナルアプリを作ってみてください。

それでは皆さん、以上になります。

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。