初心者から始める写真加工アプリの作り方（2/3）

はい、それでは、今回はさまざまなデバイスに対応する

AutoLayoutの適用、およびさまざまなフィルターの導入を行っていきたいと思います。

 

それでは、まずmain.storyboardのほうを選択しましてFilterのためのボタンの追加を行っていきたいと思います。

 

今回、全部で6つのボタンを導入したいと思います。

このボタンをコピー&ペーストして並べていきますね。このように並べていきます。

そして、各ボタンにタグを振っていきたいと思います。

 

このボタンのタグは3番ですね。で、ここが4番になります。5番、6番ですね。

で、次にAutoLayoutの設定を行っていきたいと思います。

では、まずこのImageViewからおこないますね。このピンを選択しまして、チェックを外して、上と左と右からの距離を0に設定します。

 

で、次にカメラのボタンを選択しまして、HorizentaryInContainerを選択します。

そして、ここですね、WidthとHeightを一定にしまして、ここのチェックを外しまして、

上のView,下のViewの距離をそれぞれ5に設定します。

3つの制約を追加しますね。では、ここの6つのボタンについて制約を追加していきます。

 

まずここですね、ピンを選択しまして、AspectRatioのチェックを入れます。そして、左の壁、右のボタン下のボタンからの距離を一定にします。

 

それぞれ、5にしていきますね。で、Add4Concentrainingですね。

一応確認してみましょうここで確認できます。大丈夫ですね。

では、ここをチェックします。すでに、カメラからの距離は入ってますね。

左側からの距離も入ってますね。

 

なので足りないのを追加してみましょう。

まずAspectRatioと右と左のConstraintですね、それぞれ5に設定します。

AspectRatioは1対1ですね。ここは、1対1になっていなかったのでなおしておきましょう。

これでOKですね。はい、

 

では次ここですね。

右側と左側と下ですね。それぞれConcentraintを5に設定していきます。

AspectRatioも設定します。

 

ボトムスペースも設定しないとですね、ここも5に設定します。サリリングスペースが2つありましたね。どちらかがおかしいですので、片方を消してしまいましょう。トレーディングとレーディングとボトムがあってこれでOKですね。で、

真ん中のこのViewに高さをあわせたいと思いますので、Controlを押しながらドラッグ&ドロップして離して、

CenterVerticallyを選択します。失礼、CenterVerticallyではなく、幅を揃えます。Controlしながら引っ張っていって、イコールWidthに設定します。

右と真ん中も同様ですね、イコールWidthに設定します。で、次に左下ですね、すでにトップスペースはありますので、残りを入れていきます。

 

AspectRatioと左としたですね、それぞれ5に設定します。リーディングとボトムとトップが設定できましたね。

 

次、真ん中ですね。すでにトップはあります。なので残りですね、Aspect比と、左と右と下ですね、それぞれ5に設定していきます。

 

では、右下ですね、左と上はありますね、なので残りを入れていきますね。Aspect比と、右と下ですね、チェックを入れてそれぞれ5を入れていきます。では幅を揃えていきたいと思います。

 

Controlを押しながら引っ張ってイコールWidthですね、これでエラーは消えました。あとはフレームをアップデートしましょう。Constraintsにあわせて、フレームのほうをアップデートします。このようになりましたね。

 

それでは、様々なデバイスでどのように見せるか確認してみましょう。このAssistantEditorをクリックしてみます。

 

このように見えますね。5.5インチ、3.5インチでも問題なく見えていることがわかります。それでは、StandardEditorに戻しまして、コードのほうを書いていきたいと思います。

 

ViewControllerに戻りますね。そして、前回書いたImagePickerControlerdidfinishimagepickingの中に6つ行を足していきましょう。3,4,5,6のタグに対応して、それぞれ違ったFilterをかける行を追加していきます。

 

それぞれのFilterなんですが、モノトーンフィルター、インバースフィルター、クロームフィルター、フェードフィルターというフィルターを追加していきます。でそれぞれの、ちょっと変数名がおかしいんですけど、Filterをつくっていきます。

NameでFilterを指定していきます。モノトーンフィルターの場合は、CIPhotoEffectMonoというフィルター名を追加します。

そしてそのFilterで出力したイメージを戻してあげるというFilterになっていますね。

 

インバースフィルター、これもクロームフィルター、フェードフィルターも同様です。そして、書くFilterのボタンをタップした時の処理内容はこのようになりますね。3,4,5,6でMainImageのImageを書くボタンに表示されているImageに設定いたします。

 

それでは、結果がどのようになるか、実際にシミュレーターを起動して動作をチェックしてみましょう。

 

左上の実行ボタンをタップして、シミュレーターのほうを起動します。シミュレーターが起動するまで少々時間がかかります。

 

はい、起動しましたね。それでは、カメラボタンをタップしまして、写真の選択を行います。

 

適当な写真を選択します。選択後、表示されるまで少々時間かかりますけど、実機のほうでは問題なく素早く、選択することができます。

 

このように書各種のFilterがかかっている様子が確認できますね。で、書くFilterをタップすると、そのFilterが上のほうに反映されます。

シミュレーターでは少々時間がかかってしまいますが、実機のほうでは反映されます。このように反映されます。

 

はい。このように問題なく動作することが確認できました。

今回は、AutoLayoutにより様々なデバイスサイズに対応することおよびフィルターの種類を増やしてみることを行いました。

 

次回以降さらに様々なフィルターを追加するためにスクロールViewの機能を追加していきたいと考えています。

 

それでは今回は以上になります。

 

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

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

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

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

 

どこよりも楽しく学べるアプリ開発スクールを運営しています。

フォローしてしてくれると、とてもうれしいです☆

Facebook

https://www.facebook.com/techool

 

Twitter

https://twitter.com/TekuruSchool

 

YouTubeチャンネル

https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow

 

毎週土曜日の夜に動画のアップロードをしています。

よければ、チャンネル登録お願いします！

ソースコードや、操作の仕方、などなど、

なんでも気軽にコメントください。