誰にでも作れる超簡単なiPhoneアプリ、今日は加速度センサーを使った「揺さぶると変身するアプリ」の作り方を紹介します。Xcode初心者の練習用です。

XcodeでiPhoneを揺さぶった時に何かの動作をさせたい時、次のコードを使います。

override func motionEnded(_ motion: UIEvent.EventSubtype, with event: UIEvent?) {
       if event?.subtype == UIEvent.EventSubtype.motionShake{
        //ここにiPhoneを揺さぶった時の動作を書き加える
       }

1.画像を用意する

最初に画像を3つ枚用意します。今回は地味顔と盛り顔の2点と、ボタン画像1点。どれもKeynoteでテキトーに自作しています。

今回はこんな感じで。

ご自身で試しにアプリを作ってみたい方は、下から画像をダウンロードして使っていただいて結構です。

2. 画像をAssets.xcassetsに入れる

上の画像をダウンロードしたら、3つの画像をxcodeの青いフォルダAssets.xcassetsに入れ込みます。画像を挿入する方法や、ビューとコントローラーの接続方法については下の記事を参考にしてください。

3.デザイン画面を編集する

XcodeのMain.storyboardを開くと、iPhoneのデザイン画面が出てきます。下の図のように、ボタンとImageViewを画面の左右中央に配置します。

次にボタンの画像を入れます。まず部品のボタンをクリックして、下図の手順で画像を入れていきます。タイトルの「button」というテキストは忘れず削除しましょう。

imageViewにも同じような手順で「smile」の画像を入れておきます。

これで初期画面の設定ができました。

4.コードを書く

ではデザイン画面のMain.Storyboardと、画面を制御するViewController.swiftを接続していきます。接続する時は２つの画面を同時に表示します。画面右上の円が重なるようなアイコンをクリックすると、２画面表示になります。

各部品を接続したら、下記のようにコードを書いてください。参考に図の下にコードも添付しています。

import UIKit

class ViewController: UIViewController {
   
   @IBOutlet weak var imageView: UIImageView!
   
   override func viewDidLoad() {
       super.viewDidLoad()
       
       imageView.image = UIImage(named: "smile")
   }
   
   
   //ボタンを押した時の動作
   @IBAction func tapButton(_ sender: Any) {
       
       if(imageView.image == UIImage(named: "smile")){
           imageView.image = UIImage(named: "make")
       }
   }
   
   //iPhoneを振った時の動作
   override func motionEnded(_ motion: UIEvent.EventSubtype, with event: UIEvent?) {
       
       if event?.subtype == UIEvent.EventSubtype.motionShake{
           imageView.image = UIImage(named: "smile")
           
       }
   }
}

初期画面……imageViewに画像「smile」が表示される

ボタンを押した時の動作……imageViewに画像「make」が表示される

iPhoneを振った時の動作……imageViewに画像「smile」が表示される

という動きになります。これで「素顔の時にルージュのボタンを押したら派手メイク顔に変身。iPhoneを振ったら元の素顔に戻る」というアプリができました。

とても簡単なので、作って遊んでみてください。