右か左かをランダムに表示するだけのiPadアプリを作ってみた(Swift)

このところプログラムを作っていなかったのですが、GIGAZINEというサイトでこんな記事を見ました。

右か左かをランダムに表示するだけのiPadアプリに合計1億5000万円以上が支払われていた

ビデオで見るとたしかに左右の矢印を出すだけのようですが、タップした後数秒で元の画面に戻るのが特徴でしょうか。ひまだったので作ってみたところ、意外と楽しいです。AppStoreで公開するには微妙すぎるので、この場で作り方を公開します(注:自分で作った時はInterfaceBuilderを使って作りましたが、そこの操作を説明するのは面倒なのでプログラム的に画面を作るようにしました。そのため使用途中で画面を回転すると変になります)

手順1 XCode立ち上げ次の画面で新規プロジェクト作成をえらぶ

手順2 アプリの種類はSingle View Applicationをえらび、Randomizerという名前でSwiftのUniversalアプリ(iPhone/iPad兼用アプリ)を作成。

手順3 矢印を出すViewを作ります。XCodeのメニューのFile > New > File… を選び、Cocoa Touch Classのテンプレートを選択、ArrowViewという名前で親クラスにはUIView、言語はSwiftを選ぶ。

手順4 ArrowView.swiftの中身を以下のようにする

import UIKit

class ArrowView: UIView {
    var left:Bool = true
 
    init(frame:CGRect, directionLeft:Bool){
        // 矢印の向きはView作成時に指定される
        super.init(frame: frame)
        left = directionLeft
        backgroundColor = .black
    }
 
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
 
    override func draw(_ rect: CGRect) {
        // Drawing code
        if let c = UIGraphicsGetCurrentContext(){
            c.translateBy(x: frame.width/2, y: frame.height/2)
            // 座標系の原点をフレームの中心に変更
            if left{
                c.rotate(by: CGFloat(M_PI))
 // 以下のルーチンでは右向きの矢印を描きますが、左向きの時は座標系を180度回転しておく
 // これだと一つのコードで左右どちらも描けます
            }
            let w:CGFloat = max(frame.height,frame.width)/4
 // 矢印の太さは画面の長辺の4分の1
            c.move(to:CGPoint(x:frame.width/2, y:0))
            c.addLine(to: CGPoint(x:frame.width/2-w, y:-w))
            c.addLine(to: CGPoint(x:frame.width/2-w, y:-w/2))
            c.addLine(to: CGPoint(x:-frame.width/2, y:-w/2))
            c.addLine(to: CGPoint(x:-frame.width/2, y:w/2))
            c.addLine(to: CGPoint(x:frame.width/2-w, y:w/2))
            c.addLine(to: CGPoint(x:frame.width/2-w, y:w))
            c.closePath()
            c.setFillColor(UIColor.white.cgColor)
            c.drawPath(using: .eoFill)
        }
    }
}

手順5 初めからできているViewController.swiftの中身を以下のようにする

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        view.backgroundColor = .blue
        let button = UIButton(frame: view.frame)
        button.setTitle("Tap here", for: .normal)
        button.addTarget(nil, action: #selector(tapped), for: .touchUpInside)
        view.addSubview(button)
        // 画面と同じサイズのボタンを作って、現在のviewの上に貼り付ける
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
 
    func tapped() {
        let left:Bool = (arc4random() % 2 == 0)
        // 向きはここで決める。乱数が偶数なら左向き
        let av = ArrowView(frame: view.frame, directionLeft: left)
        view.addSubview(av)
        // ArrowViewを現在のviewの上に乗っけます
        UIView.animate(withDuration:1.0, delay: 1.0, options: .curveEaseIn
        // 1秒後から、1秒間かけてアニメーションを行う
                      ,animations: {av.alpha = 0.0}
        // アニメーションの内容は、ArrowViewが透明になっていく
                      ,completion: {_ in av.removeFromSuperview()})
        // アニメーションが終了したら、ArrowViewを取り除く
    }
}

あとはRunすればシミュレーターや実機で動かせると思います。

2016.9.28追記:Swift 3に合わせて変更しました

広告