Swiftの開発を捗らせるPlaygroundを使用する

2017年11月2日(木)
大津 真
連載3回目となる今回は、Swiftでの開発を効率化させるPlaygroundを利用したUIのテストについて説明する。

クラスを別のソースファイルにする

Playgroundでは、メインのPlaygroundファイルとは別に、SourcesフォルダにSwiftファイルを用意することで、それを読み込んで使用することもできます。この場合もコンパイルを手動で行う必要はありません。Playgroundファイルの拡張子は「.playground」ですが、Swiftファイルの拡張子は通常通り「.swift」となります。ここでは、以下の手順でカスタムビューとしてMyViewクラスを作成して、別ファイル「MyView.swift」に保存し、それをPlaygroundファイルから使用してみましょう。

1.「Project Navigator」の「Sources」を右クリックし、表示されるメニューから「New File」を選択します。

2.「Sources」フォルダに「New File.swift」という空のファイルが作成されるので、名前を変更します。
次の例では「MyView.swift」に変更しています。

クラスを別のソースファイルにする

クラスを別のソースファイルにする

MyViewクラスを作成する

MyViewクラスでは、イニシャライザの第一引数としてUIImageオブジェクトを受け取り、ビュー内のランダムな位置にUIImageViewとして配置しています。次に、MyView.swiftのリストを示します。

リスト3:MyView.swift

import UIKit

open class MyView: UIView{

    var imgView: UIImageView

    public init(img: UIImage?, frame: CGRect, color: UIColor) {    // <=(1)

        imgView = UIImageView(image: img)

        super.init(frame: frame)
        backgroundColor = color

        let x = arc4random_uniform(UInt32(frame.width))
        let y = arc4random_uniform(UInt32(frame.height))
        imgView = UIImageView(image: img)
        imgView.center = CGPoint(x: Int(x), y: Int(y))
        self.addSubview(imgView)

    }

    required public init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override open func draw(_ rect: CGRect) {    // <=(2)
        // 円を描く
        UIColor.blue.setStroke()
        let circle = UIBezierPath(ovalIn: CGRect(x: 10, y: 10, width: Int(self.frame.width) - 20 , height: Int(self.frame.height) - 20))

        circle.lineWidth = 4
        circle.stroke()
    }
}

(1)のイニシャライザでは引数として渡されたUIImageオブジェクトからUIImageViewを生成し、ランダムな位置に配置しています。アクセス修飾子に「public」を指定している点に注意してください。(2)ではUIViewのdraw(_:)メソッドをオーバーライドして円を描いています。

MyPlayground2と同様に、イメージファイル「cat1.png」をResourceフォルダに保存しておきます。

Playgroundファイルにコードを記述する

MyView.swiftを読み込むPlaygroundファイルのリストを示します。

リスト4:MyPlayground3.playground

//: Playground - noun: a place where people can play

import UIKit
import PlaygroundSupport

// イメージを生成
var myImg = UIImage(named: "cat1")

// MyViewクラスからコンテントビューを生成
let contentView = MyView(img: myImg, frame: CGRect(x:0, y:0, width:400, height:500), color: UIColor.yellow)

PlaygroundPage.current.liveView = contentView

次に実行結果を示します。アシスタントエディタを2つ表示し、一つはSwiftファイルのエディタに、もう一つは実行結果の表示に使用すると作業がやりやすくなります

実行結果の確認

実行結果の確認

liveViewでタッチイベントを受け取る

PlaygroundSupportモジュールを使用すると、liveViewでタッチイベントなどのイベントを受け取ることもできます。次に、MyPlayground3を変更し、クリックした位置にイメージを移動する例を示します(MyPlayground4)。

クリックする前、猫は左上に

クリックする前、猫は左上に

クリックした地点に猫が移動する

クリックした地点に猫が移動する

変更点はMyView.swiftのMyViewクラスに、touchesEnded(_:with:)メソッドをオーバーライドして追加し、タッチ位置にimyViewを移動している点です(Swift 2.0以降ではtouchesBeganメソッドの最初の引数が、NSObjectではなく、UITouchのSetオブジェクトとなりました)

リスト5:MyView.swift(追加部分)

    override open func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let touch = touches.first {
            let pos = touch.location(in: self)

            imgView.center = pos
        }
    }

東京都生まれ。早稲田大学理工学部卒業後、外資系コンピューターメーカーにSEとして8年間勤務。現在はフリーランスのテクニカルライター、プログラマー。

<主な著書>
きちんとわかる! JavaScript とことん入門(技術評論社)
基礎Python(インプレス)
他多数

連載バックナンバー

開発言語技術解説
第9回

Swiftでの文字列操作の基礎(その1)

2019/9/27
連載9回目となる今回は、Swfitによる文字列操作の基本を学びます。あわせてSwift 5で導入された新機能にもついても紹介します。
開発言語
第8回

Swiftでクロージャを理解する

2018/12/21
連載8回目となる今回は、モダンな言語に欠かせないクロージャについて解説します。
開発言語技術解説
第7回

Swiftのユーザ定義関数の活用

2018/9/13
連載7回目となる今回は、Swiftのユーザ定義関数のさまざまな活用方法を紹介していく。

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています