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

【動作環境】

Swift1.2 Xcode6.4 

【対象レベル】

超初心者

【学習内容】

ストーリーボードでの画面の作り方

Viewの作り方

Imageの配置

コードの記述の仕方

【再生時間】

20:01


動画の音声の書き起こし

皆さんこんにちは。

今回はiOSのアプリ、スタンプカメラの方を作っていきたいと思います。

今回作るアプリなんですが、まず写真もしくはフォトライブラリで手に入れた画像の方に

スタンプを乗せていくことができるアプリになります。


スタンプの方ですが、画面上をドラッグ&ドロップすることにより移動することもできますし、

二本指を使うことで拡大・縮小もしくは回転ができるようにもします。

できた写真の方なんですけど、SNSを使ってシェアができるようにもします。

このようなアプリをこれから作っていきたいと思います。


それではまずXcodeの方を立ち上げまして、

「File」の「New」の「Project」を選択します。

一番簡単なテンプレートである「Single View Application」を選択します。

「Next」を押します。

「Product Name」ですけど、これは「StampCamera」にしましょう。

「Organization Name」は、ここは個人名か、もしくは組織名にしましょう。

「Organization Identifier」は、com.Tekuruに今回はします。

これは皆さんのURLや皆さんのお名前などから唯一無二のIdentifierをつけて頂ければいいと思います。

難しい方は今回はここは飛ばしても構いません。

「Languege」は「Swift」、

「Devices」は「iPhone」にしましょう。

「Use Core Data」にはチェックは今回は入れないようにしましょう。

「Next」を選択しまして、デスクトップなどを選択しまして

「Create」を選択しましょう。

これで新たにプロジェクトが立ち上がります。


まず画面の方から作っていきましょう。ストーリーボードを選択してください。

Main.storyboardです。画面右上のインスペクタから、ここを選択してください。

一番左のファイルインスペクタを選択して、ちょっとスクロールしたところに、

Use Auto Layoutというところがありますね。

ここのチェックを外してください。

Auto Layoutは非常に画面構成作る上で便利な機能なんですが、

今回はスタンプを画面上で動かすアプリになります。

動的なコンテンツを作るのにはAuto Layoutは不向きですので、

今回はこの機能をオフにしたいと思います。

チェックを外しましょう。

Disable Size Classesで、このようにAuto Layoutが解除されて、

ここに見えている画面がiPhone5もしくは5sの画面になりました。

この画面上にアプリを作っていきたいと思います。


ではまずこの画面に、いくつかのViewを載せていきたいと思います。

まず画面をちょっとスクロールして、この何も描かれていないViewがありますね。

これが一番基本的なViewになります。これを画面上に1個載せていきましょう。

このViewはどんな役割があるかといいますと、

このViewに乗った画像を丸ごと後で保存してSNSなどに投稿できるようにするという、

そういう役割があります。Defaultでちょっと色をつけておきましょう。

今回はGroup Table  View Tectured Background Colorにしておきましょう。

ちょっと灰色がかっているようにしておきます。


そしてもう一つ、画面下にToolBarを配置しましょう。

このToolBarをドラッグ&ドロップして画面上に配置していきます。

このような感じです。隙間なく埋めてみましょう。

このViewの上に、もう一つImageViewを載せましょう。

このViewの上に更にもう一つImageViewを載せる、ImageViewをサブビューとして載せることになります。

このような感じですね。Viewの上にImageViewが載っている、

そのようなViewの構造になっています。


画面の下にToolBarが一つあります。今回4つのアイテムを用意したいと思います。

ToolBar上のアイテムなんですが、ここですね、Itemと描かれているこのオブジェクトになります。

これをドラッグ&ドロップして、全部で4つになるようにしてください。

そしてこのアイテムは今の段階でちょっと左側に寄っていますので、

この隙間にこのフレキシブルなスペースを入れていきましょう。

Flexible Space Barです。このように入れていきましょう。

これを入れることでこのアイテムが等間隔に配置されます。


ではこの各アイテムを加えていきます。見た目を変えていきます。

まず一番左側のアイテムを選択して、

これはカメラ撮影もしくはライブラリから写真をピックアップする

アクションバーを表示させたいと思いますので、

ここはカメラのアイコンにしてみましょう。

で、次、ここはスタンプを選択にしたいと思います。

とりあえずActionにしてみましょう。

次、このアイテムは追加したスタンプを破棄するときに使いたいと思いますので、

Trashを選択します。一番右側はSNSへのシェアに使います。

標準のアイコンでイメージに近いものがなかなかないんですけど、

このReplyにしてみます。こんな感じで、

写真のピックアップ、スタンプの選択、スタンプの廃棄、SNSでのシェアという

4つのボタンを今回用意しました。ここまでが最初の画面の配置になります。


ではコードの方を書いていきたいと思います。

写真撮影もしくはiPhoneの中から写真をピックアップする機能というのを書いていきたいと思います。

左側からViewController.swiftを選択します。

ではこの辺りにこのような記述をしてください。

@IBOutlet var canbasView…canvasViewは

先ほどの、ベースになるViewです。この上にあるサブビューを全て一つの画像として保存する

ということを行います。UIViewです。


で、次、その上に載っているImageViewですね。

ImageViewもIBOutletで接続しておきます。

これはimageViewという名前にします。型はUIImageViewになります。

この二つをIBOutletをつけて宣言しておきます。

次に先ほどのカメラのアイコンをタップしたときの処理について書いていきたいと思います。

まずactionsheetの方を開いていきます。そのために必要な記述を今からしていきます。

カメラアイコンをタップした時に呼ばれる処理ですので、

cameraTappedという名前のメソッドを書いていきたいと思います。

@IBAction func cameraTappedです。


カッコの中は●sender書いてもいいんですけど


今回は書かないでやっていきます。let sheet = UIActionSheetです。そしてdelegete = selfと書きます。こう書くことでactionsheetが呼ばれた後各ボタンをタップした後にそれぞれのボタンを押した時の処理をメソッドとして呼び出すことが可能になります。ただこのdeligateを設定してもこのままじゃエラーが起きてしまうんです。ここに記述が必要になります。UIViewControllerの後に、UIActionSheetDelegateを追加してやればこのエラーは消えることになります。UIActionSheetDelegateというプロトコルをここに導入することで、UIActionSheetDelegateの中にあるメソッドをこの中に実装して、それをActionSheetのボタンがタップされたタイミングで呼び出すことが可能になります。

そしてsheet.addButtonWithTitle("camera")にします。そしてsheet.addButtonWithTitle("camera")で、ここはCancelにしましょう。Cancelにします。sheet.addButtonWithTitleで次、("Library")にします。そして一番下、sheet.showInView。これが(self.View)ですね。これでActionSheetが表示されることになります。

接続の方を行いましょう。Main.storyboardを選択しまして、ViewControllerを選択します。そしてここのコネクションインスペクタのところで、まずcanvasViewとこのViewを接続します。ベースにあるViewです。次、ImageViewとこのImageViewを接続します。で、CameraTappedとここのカメラのアイコンを接続します。これでOKです。これでこのカメラのボタンがタップされると、先ほどのCameraTappedというメソッドが呼ばれることになります。


それでは実行してみましょう。とりあえずiPhone5sのシミュレーターを選択した上で実行してみます。実行されるまで少々時間がかかります。カメラのボタンをタップすると画面下からこのようにActionSheetがぴょこっと飛び出すようになります。OKです。Cancelを押すとこのActionSheetが引っ込みます。あとCancelボタンは一番下から飛び出るようにしたいと思いますので、CancelButtonIndexをゼロにしておきたいと思います。はい、これでCameraTappedはOKです。


次、カメラ機能を実際に呼び出しましょう。このActionSheetの各ボタンが押された時に呼ばれるメソッドを記述していきたいと思います。func actionSheetで、clickedButtonAtIndexですね。これで真ん中に次のような記述をしていきたいと思います。まずImagePickerControllerというのを作っていきます。= UIImagePickerControllerですね、これでImagePickerControllerという変数が初期化されます。そしてdelegate = selfと書きます。この段階でエラーが起きてしまうはずです。出ましたね。これは先ほどと同じく、プロトコルが記述されていなかったからです。ここにUIImagePickerControllerDelegateと、あとカメラを遷移するためにもう一つ、UINavigationControllerDelegateも必要になります。二つのプロトコルを記述するようにしましょう。



そしてActionSheetの中で●●を行います。


pickerController.delegate = selfの下に、

●●記述をしていきます。


その前にこのpickerController、Cancelボタンを押された時に必要ありませんので、Cancelボタンが押された時、すなわちbuttonIndexの値がゼロの場合はメソッドの実行をここで止めるようにしましょう。if buttonIndex == 0の時は、returnにしましょう。これでbuttonIndexがゼロの時、Cancelボタンがタップされた時は自ずと中の処理が実行されることはありません。

次、pickerControllerのdelegateを設定した後に、if buttonIndexが1の時はpickerControllerのsourceTypeをカメラに設定します。UIImagePickerControllerSourceTypeをカメラにします。

else、他の場合は、buttonIndexが2の場合です。この場合はsourceTypeをPhotoLibraryに設定します。これでiPhoneの中にある写真のPickerが作動するはずです。

そしてこのPickerControllerを画面に表示させてやりたいと思います。presentViewControllerで、pickerController、animatedはtrue、completionはnilにしましょう。これでOKですね。ソースコードはこのようになりました。

次に、カメラを閉じた後に写真を先ほどのImageViewに表示させる処理が必要になります。実はカメラもしくは写真のPickerが閉じた後に呼ばれるメソッドがあるんです。それの記述をしていきたいと思います。func ImagePickerControllerです。これになります。この中で、次のように書いてあります。このinfoという変数の中に写真の情報が入っています。それを今から画面上に表示させてやります。imageView.image = info["UIImagePickerControllerOriginalImage"]です。そしてdismissViewControllerAnimatedでこのPicker自体を閉じてやります。completionもnilで構いません。


ここまで書けたのなら実行してみて、カメラが起動すること・Pickerが起動することを確認してみましょう。ただし実機で動作を確認しないとカメラの動作を検証することはできません。シミュレーターの方ではカメラは起動しませんので注意してください。今回皆さんにデモをする意味でも


シミュレーターの方で●●を

使って動作を検証してみたいと思います。


では、実行してみると、どこかでエラーが起きました。あ、これ、キャストが必要でした。as! UIImageです。はい、これでエラーが消えました。まだちょっとcautionが起きてますね。すみません、ここ?じゃなきゃだめでした。


取ってきたイメージが●●の

可能性もありますのでここは?じゃないといけません。じゃあここで、再び実行してみます。


フォトライブラリを選択しまして、OK。適当な写真を選択します。そしてこの先ほどのImageViewに、選択した画像が無事表示されたことが確認されました。できれば皆さん実機の方で今のアプリを動かしてみて、カメラで撮った写真がこのImageViewにちゃんと反映されていることを確認してください。ちょっとこの写真が縦長になっています。縦横の比率がおかしくなっています。これを修正するためにはstoryboardの先ほどのImageViewを選択しまして、ここのモードのところのAspect Fullにしてみてください。これはちょっと写真の方がImageViewからはみ出してしまうんですけど、縦横のアスペクト比は常にオリジナルの画像と一緒に保たれます。


ここまででカメラもしくはフォトライブラリから写真を取ってきて画面上に表示する機能までは実装しました。次回以降スタンプの機能、スタンプを一覧表示してそれを画面に追加する機能などを追加していきたいと思います。


1 2 3 4 5 6

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

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

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

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