iphoneアプリ勉強

はじめに

こんばんは。

連続投稿です。

前回の記事でも書きましたが、こちらの「先月号」のWeb+DB Press.104号で紹介されているものをやってみようと思います。

WEB+DB PRESS Vol.104

今回はiphoneアプリ開発です。

ちなみに自分のiphoneアプリ開発の経験値は

• Objective-C時代に3ヶ月くらい
• Swift2時代に1ヶ月くらい

という感じで、アプリ開発に関しては完全ペーペーです。

そしてだいぶ昔にやったことなので、完全に忘れています。

React-NativeとかIonicとかにも興味あるんですが、ネイティブな開発も、知識としては入れておきたいので、少し触っとこうと思います。

今回は、iphoneアプリ開発特集で紹介されている部分を抜粋して、写真撮影とtwitter投稿までをやってみようと思います。

やってみた

はじめのはじめ

とりあえずXcodeを立ち上げて、Create a new Xcode Projectを選択します。

Xcodeが開いたら、Single View Appが選択されていると思いますので、そのままそれを選択します。

Single View Appは一番シンプルなテンプレートという感じです。

Choose option for your new projectの画面では、ProjectName Organization Identifier を入力してNextを押します。

• Use Core Data
• Include Unit Tests
• Include UI Tests

は今回使いません。

こんな感じでXcodeプロジェクトが立ち上がります。

少しづつ思い出してきた・・・!

写真撮影機能

ImageView設置

storyboardを使って、UIを配置していきます。

カメラで撮影した写真をアプリ上で表示するための場所を作るため、ImageViewを配置します。

contentModeを設定します。

本では Aspect Fitを設定してますが、コレはなんだろうとちょっと調べると、こちらのサイトで紹介されていました。

Aspect Fit = 縦横の比率はそのままで長い辺を基準に全体を表示する

なるほどなるほど。早速合わせます。

UIToolbar設置

次はアプリ内で、カメラを起動するボタンと、シェア用のボタンを配置するためUIToolbarを設置します。

こんな感じで画面の下部に設置します。

デフォルトでボタンが一個付いてるんですが、つけたいのはカメラ起動ボタンとシェアボタンの2つなので、もうひとつツールバーにボタンを設置します。

Button ではなく Bar Button Item なので注意。

Bar Button Item をドラッグアンドドロップすると、↑の画像のようにデフォルトのボタンの横にくっついてしまいます。

左右にボタンを配置したいので、ボタンとボタンの間に Flexible Spece Bar Button Item を使用します。

次に配置したボタンをカメラ起動ボタンの方はカメラアイコン、シェアボタンの方はシェア用のアイコンに変更します。

こんな感じです。

おーー！アプリっぽいですね。

AutoLayoutで配置を整える

いろんなiphone端末の画面サイズをよしなに対応してもらうためのAutoLayoutを設定します。

本で紹介されている通り、高さの固定が必要なツールバーのAutoLayoutを設定していきます。

画像のように設定します。

高さを44に固定して、左右と下の余白を0に指定します。

ImageViewは上下左右の余白を0固定にします。

シミュレーター立ち上げてみます。

いい感じ！！

カメラ起動

アプリがカメラにアクセスするための許諾設定を行います。

本で紹介されている通り

• Privacy - Photo Library Additions Usage Description
• Privacy - Camera Usage Description

を追加します。

次はカメラ起動用のコードです。 ViewController.swiftに以下のようなコードを記述します。

    @IBAction func didTouchCameraButton(_ sender: Any) {
        let pickerController = UIImagePickerController()
        pickerController.sourceType = .camera
        self.present(pickerController, animated: true)
    }

次にコードとUIを繋ぎ合わせます。

各IBAction、IBOutletの行ラインに丸いアイコンが表示されていると思うので、それをクリックしてドラッグアンドドラックしつつ、各UIに紐づけます。

そうすると以下のような感じになります。

実機を接続してアプリを立ち上げると、カメラを使用できるかどうかの確認が出ます。

許可すると撮影ができます。

やったー！

プレビューを表示

delegateを設置します。

以下のようなコードにviewController.swiftを変更します。

import UIKit

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate { ← 追加
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func didTouchCameraButton(_ sender: Any) {
        let pickerController = UIImagePickerController()
        pickerController.sourceType = .camera
        pickerController.delegate   = self                 ← 追加
        self.present(pickerController, animated: true)
    }
    
    @IBAction func didTouchShareButton(_ sender: Any) {
    }

    // ↓ 追加
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
        if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {
            imageView.image = image
            UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
        }
        picker.dismiss(animated: true, completion: nil)
    }
}

でました！！

Twitter投稿

次は、シェアボタンの機能を作成します。

UIActivityという機能を使うようです。

こんな感じで追加します。

    @IBAction func didTouchShareButton(_ sender: Any) {
        guard let imageData = UIImageJPEGRepresentation(imageView.image!, 1.0) else {
            return
        }

        let activityController = UIActivityViewController(activityItems: [imageData], applicationActivities: nil)
        self.present(activityController, animated: true, completion: nil)
    }

起動させてみます。

できたー！！！！

終わりに

写真撮ってTwitter投稿するだけのアプリでしたけど、本に沿ってやれば簡単にできました。

本では更に写真加工をしたりもするので、さらにいろいろとできそうです。

やっぱアプリ面白いなぁー。

お疲れ様でした。