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

はい、それでは今回は、画像にインスタグラム風のフィルターをかけるアプリを作っていきたいと思います。

 

それでは、XcodeのProjectのほうを開いていきたいと思います。

 

FileのNewのProjectですね、でSingleViewApplicationのほうを選択します。

ProductNameはImageFilterとしますけど、皆さんお好きな名前をつけてくださいね。

OrganizationIdentifierは個人を識別できる識別子にしておきましょう。

で、LanguageはSwiftですね、DevicesはIOSを選択してNextをクリックします。Desktopなどを選択して、Createを選びます。新しいProjectが立ち上がりました。

 

それではまず、画面のほうを作っていきますね。Main.StoryBoardのほうを選択します

。そして、現在正方形の画面になっていますが、これをわかりやすくするために、iPhone5の画面にしていきます。iPhone4Inchにします。

こうするとiPhoneサイズの画面になりましたね。

 

今回は、上部に表示すべき画像を表示して、下のほうにFilterの効果が表示されるサムネイルが表示される仕組みにしていきたいと思います。

ですので、画面上半分にImageViewのほうを配置していきます。このようにしますね。そしてその下にButtonを1つ配置します。

 

そして、左下にButtonを1つ配置します。このButtonは見た目を変えましょう。Customにして、このようにしましょうね。カメラのアイコンが表示されました。このButtonをタップすると写真のライブラリーから写真を選択できるようにしていきます。

 

このButtonをCustomにしまして、ちょっと広くとっておきましょう。わかりやすくするために、背景色をつけましょう。

 

Backgroundをこんな感じの色にしておきます。Buttonの表示はなくしておきます。

 

こんな感じにします。そしてこれをコピペして隣に並べておきます。

 

コピー&ペーストして隣に並べておきます。コピー&ペーストはCommand ＋CとCommand＋Vでできます。

 

 

それでは、コードのほうを書いていきたいと思います。

ViewController.Swiftのの中にコードを書いていきます。このようなコードを書いていきますね。で、UIViewControllerを継承したViewControllerというClassなんですけど、プロトコルをその後に書いていきます。

 

UINavigationControllerDelegeteとUIImPickercontrollerDelegeteという名前のプロトコルを書いていきます。

 

そして、@IBOutletを書いて、mainImageView というStoryBoard上のImageViewと対応した変数を宣言しておきます。

 

そして、写真をPickするためのMethodですね。PickImageFromLibrary Methodを書いておきます。

 

もしUIImagePicupcontrollerのPhotoLibraryが利用可能であればこのような処理を行っていきます。

 

まず、UIImagePicupcontrollerを作ります。

 

このコントローラーにDelegeteを設定します。こうすることで、このImagePickerControllerを閉じたタイミングで下のImagePickercontrollerdidfinishpickingIというMethodが呼ばれることになります。

 

ControllerのSourceTypeをPhotoLibraryに設定します。

なお、このUIImagePickrtcontrollrsourcetype、ここはなくても大丈夫です。

そして、self presentViewControllerでこのコントローラを画面に表示してやります。

Animated trueですので、アニメーションをともなって表示されることになります。

 

completion nilですので、表示されたタイミングで何か実行されることはありません。

この下のImagePickerControllerDidfinishPickingImageなんですけど、この中では、このmainImageViewにこのImageを表示させます。そして、タグをつかってますね、1番と2番のついたタグの追加Viewをとってきて、UIButtonにCastして、SetImageで表示すべき画像を指定しています 。

 

で、この1番と2番のタグなんですけど、SDtoryBoardのほうでこの下のButtonにつけておきます。

このタグを左側は1番にして、右側は2番にしておきます。

 

ついでに、Outletも設定しておきましょうか。

ViewControllerのほうで、MainViewControllerのこれですね、

FilterTappedMethodがTouchUpinsideで下の2つのButtonとひも付けておきます。

 

そして、PickImageFromLibrary Methodはこのカメラのアイコンとひも付けておきます。TouchUpInsideですね。これでOutletとActionの接続が完了しました。

 

で、このImagepickerControllerdidfinishpickingimage Methodのなかで

このタグを使ってSetting Imageをしているわけなんですけど、最初のこの1番のタグがついたButtonに関しては、とってきた画像をそのまま表示していますね。この下の設定したImageに関しては、SepiaFilterをかけたあとにその画像を指定しています。

 

そのあとPickerdidmissViewControllerAnimatedでこのPickerを閉じています。

で、このSepiaFilterの中身なんですけど、引数として渡してきた画像に対して、まずCIIMageを使ってCIImage型に変換します。

 

SepiaFilterはCISepiaToneを選択しておきます。

このSepiaFilterにこのCIImageのほうを指定します。

その時のKeyはKCIInputImageKeyになります。そのSepiaFilterにsetValueで1.0を指定しておきます。

そしてこのSepiaFilterOutputImageを取得しまして、それを返り値としてかえしてやります。

返り値として返す際に、UIImage型に変換しています。その際にScaleとOrientationの指定を行います。

 

 そして、画面のしたのほうに2つあったFilterを行うためのButtonなんですけど、押された時にそれぞれこのMethodが呼ばれます。SenderのこのTagですね、TagによってSenderというのは押されたButtonですね、押されたButtonのことなんですけど、

 

そのTagの値によって、別々の処理が行われます。

Tagが1番の場合は、MainImageViewのImageがこのImageに指定されます。

このImageはButtonに表示されているImageですね。ケース2の場合も同様です。

Buttonに表示されてるImageがTopのMainImageViewに表示されることになります。

 

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

5Sを選択して実行を押してみます。

シミュレーターの起動まで少々時間がかかります。

 

 はい、アプリの方が起動しました。このカメラのアイコンをタップしますと、Photoへのアクセス許可を求められますので、OKをクリックします。そして写真を選択しますと、その写真が画面に表示されます。場合によっては、シミュレーターの動作が少々遅いこともありますので、選択して表示まで時間がかかることがあります。

 

このようにちゃんと表示されましたね。

そして画面の下のほうに、2つ写真がサムネイルが並んでいますけど、左のほうはとくFilterを行いなっていないそのままの写真。右側のほうは、SepiaFilterを行ったあとの写真になっています。

そして、右下のこのSepiaの色のFilterを選択しますと、少々時間かかりますけど、この上のほうのImageにFilterがかかります。

 

なお、今回シミュレーターのほうでは、Filterの調整が時間かかっていますけど、実機のほうでは、即Filterが反映されます。

 

Filterが反映されるまで少々待ちましょう。

もし、実機のほうでもFilterに時間がとる場合は、それは内部処理に時間がかかっていることですので、なんらかの処理を行っていることを示すために、インジケーターなどの表示を行ったほうが良いかもしれません。

 

では、この左下の画像をタップします。右の画像をタップします。

繰り返しになりますが、シミュレーターの場合は、このImageFilterが反映されるまで少々時間がかかります。

 

このように、Filterがしっかり反映されていることが確認できますね。

 

 

今回はCIImageを使って、CoreImageを使って、Filterを画像につくるという効果を行いました。

 

次回以降、さらにさまざまなFilterを実装していきたいと思います。

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

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

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

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

 

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

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

Facebook

https://www.facebook.com/techool

 

Twitter

https://twitter.com/TekuruSchool

 

YouTubeチャンネル

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

 

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

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

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

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