群馬県地域経済発展のためのプロジェクト | iPhoneアプリ開発講座 | コワーキングスペース | エンジニアの就業支援 | 企業誘致 | 地域活性化

ぐんまちゃんのサンタカメラ on Swift

はじめに

4回目のアプリ開発となります。このアプリでは主に「カメラ機能」「フォトアルバムの読み込み・書き込み」「画像処理」について学びます。

2016.01.04 Xcode7.1 & iOS9.1 対応版サンプルコード追加

ダウンロード

サンプルプログラム

完成したアプリのサンプルコードです。ZIPで圧縮したファイルです。解凍してご利用ください。

素材データ

新規プロジェクトの作成

Xcodeを起動した後「新規プロジェクト」を作成します。

File > New > Project

timer_01

「Single View Application」を選択して「Next」をクリック

timer_02

次の通り入力してを選択して「Next」をクリック

  • Product Name:「プロジェクト名」を指定(これがフォルダ名になります)
    今回のアプリは「camera」とします
  • Organization Name:「組織名」を指定(個人の場合は氏名)
  • Company Identifier:「会社識別名」を指定(ドメイン名を逆にしたものが推奨されます)
  • Language:「Swift」を選択
  • Devices:「iPhone」を選択
  • Use Core Data:チェックなし

camera_01

ソースコードなどの変更履歴を残しておく場合は「Git」にチェックを入れる

本講座では、特に必要ないので「チェックなし」で「Create」をクリック

oto_03

プロジェクトの設定

利用するiPhone画面の「向き」を設定します

今回のアプリは「縦向き」とします。「Portrait」のみにチェックを入れて下さい。

  • Portrait:縦
  • Upside Down:上下反転の縦
  • Landscape Left:左回転の横
  • Landscape Right:右回転の横

camera_02

使用するイメージの設定

使用するベクター画像のインポート

画像はこちらからダウンロードしてください
サンタクロースぐんまちゃんの画像:santaclaus.pdf

メニューのFile > Add Files to “camera”を選択する

camera_03

取り込む画像を選択して「Copy items if needed」をチェックして「Add」をクリックする
※チェックを入れると「コピーした画像」を使用することになります。忘れずに!

camera_04

画像がプロジェクトに取り込まれました。

ベクター画像を使用できるように設定する

ベクター画像を使用するには「Images.xcassets」の設定が必要です。

Images.xcassetsを選択する。「+」をクリックして「New Image Set」を選択する。名前を「santaclaus」に変更する。「Attributes Inspector」タブをクリックする。「Types」は「Vectors」を選択する。

camera_05

「santaclaus.pdf」を「点線の四角」にドラッグ&ドロップする。※クリックすると画面が変わってしまうので注意!

画面のデザイン&レイアウト

Toolbarを配置する

「Main.storybord」を選択する。「Object Library」をクリックして「Toolbar」をドラッグ&ドロップ。

camera_06

Bar Button Item を配置する

「Bar Button Item」を「Toolbar」の中に、ドラッグ&ドロップ。はじめから「1つ」は配置されているので、残り「2つ」配置します。

camera_07

Flexible Space Bar Button Item を配置する

「Flexible Space Bar Button Item」を「Bar Button Item」の間に、ドラッグ&ドロップ。「2つ」配置する。

camera_08

Bar Button Item の「Title」を変更する

「Bar Button Item」をダブルクリックして「Title」を変更します。それぞれ以下の名前とします。

  • 左:カメラ
  • 中央:フォトアルバム
  • 右:保存

camera_09

Image View(撮影画像用)を配置する

「Image View」をドラッグ&ドロップ。「Mode」を「Aspect Fit」に設定します。

camera_10

Image View(サンタ画像用)を配置する

「Image View」をドラッグ&ドロップ。先に配置した「Image View」の前面に配置します。「image」を「santaclaus」に設定。「Mode」を「Aspect Fit」に設定します。

camera_11

Toolbar のレイアウトの制約を設定する

「Toolbar」を選択した状態で、「Pin」をクリックする。

「左」「右」「下」の「赤い点線」をクリックして「赤い線」にする。「Height」にチェックを入れる。

  • 左:-16
  • 右:-16
  • 下:(Viewから)0
  • Height(高さ):(チェックして)44

※Xcode7.1以降では、以下の値となります。

  • 左:-20
  • 右:-20
  • 下:(Viewから)0
  • Height(高さ):(チェックして)44

camera_20

「add 4 Constraints」をクリックする。

Image View(撮影画像用) のレイアウトの制約を設定する

「Image View(撮影画像用)」を選択した状態で、「Pin」をクリックする。

「上」「下」「左」「右」の「赤い点線」をクリックして「赤い線」にする。「下」の「▼」をクリックして「Toolbar(current distance = 0)」を選択する。

  • 上:0
  • 下:(Toolbarから)0
  • 左:-16
  • 右:-16

※Xcode7.1以降では、以下の値となります。

  • 上:0
  • 下:(Toolbarから)0
  • 左:-20
  • 右:-20

camera_21

「add 4 Constraints」をクリックする。

Image View(サンタ画像用)のレイアウトの制約を設定する

「Image View(撮影画像用)」と全く同様に設定する。

関連付け

関連付け「IBOutlet接続」

それぞれ、以下の名前で「IBOutlet接続」します。

  • Bar Button Item(カメラ):btnCamera
  • Bar Button Item(フォトアルバム):btnRead
  • Bar Button Item(保存):btnWrite
  • Image View(撮影画像用):gazoImageView
  • Image View(サンタ画像用):santaImageView

camera_22

関連付け「IBAction接続」

それぞれ、以下の名前で「IBAction接続」します。

camera_23

デリゲートの定義

カメラ機能が使えるように「デリゲートの定義」をします。次の行に「, UINavigationControllerDelegate, UIImagePickerControllerDelegate」を追加します。

camera_24

Delegate(デリゲート)とは、日本語で「委譲」という意味です。簡単にいうと「ある部品の機能の一部を、他の部品にやってもらう」ことです。

プログラムを書きます

関数の定義(イメージピッカーのオープン)

カメラ機能を使用する為の「関数を定義」します。

デリゲート

「イメージピッカーのイメージ取得時に呼ばれる」「イメージピッカーのキャンセル時に呼ばれる」デリゲート部分の処理を記述します。

関数の定義(アラート)

アラート機能を使用する箇所が複数あるため、アラート機能の「共通部分」を関数として定義します。

カメラボタンを押したときの処理

カメラボタンを押した時の処理を記述します。

フォトアルバムボタンを押したときの処理

フォトアルバムボタンを押した時の処理を記述します。上記とは「引数(ひきすう)」の値が違います。

保存ボタンを押したときの処理

保存ボタンを押した時の処理を記述します。

UIImageWriteToSavedPhotosAlbum の「結果受け取り」時

上記、コードの一番下の「UIImageWriteToSavedPhotosAlbum(保存処理)」の「結果受け取り」時の処理を記述します。

プログラム完成

プログラムが完成しました。以下プログラムの全文です。

「ぐんまちゃんのサンタカメラ」アプリの完成です。お疲れ様でした。

  • Facebook
  • Hatena
  • twitter
  • Google+
PAGETOP
Copyright © 2013 - 2018 Cross-i Project BrainFarm Inc. All Rights Reserved.