PR

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

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

はじめに

XcodeでSwiftによるプログラミングを進めていく段階で、「コードの一部だけを試したい」といった場合などにいろいろと便利なのが、入力したコードの結果がリアルタイムに反映されるPlaygroundです。

今回は、Playgroundを使用してUIをテストする方法について説明しましょう。またクラスを、Playgroundファイルとは別のソースファイルにする方法についても説明します。

PlaygroundSupportモジュールの基本的な使い方

Xcode 7.x以前のPlaygroundでは、UIのテストなどにXcode付属のユーティリティフレームワークである「XCPlaygroundモジュール」を使用していました。それに対してXcode 8以降は、XCPlaygroundは非推奨(Deprecated)となり、その代替として「PlaygroundSupportモジュール」を使用します。

以下に、PlaygroundSupportモジュールを使用して、アシスタントエディタにビューを表示するためのプログラムの基本的な流れを示します。

1. PlaygroundSupportモジュールをインポートする
import PlaygroundSupport

2. PlaygroundページのliveViewプロパティに表示するビューのインスタンスを代入する
PlaygroundPageクラスのcurrentタイププロパティを使用すると、現在のPlaygroundページが取得できます。そのliveViewプロパティに、目的のビュー(以下の例ではmyView)を設定します。
PlaygroundPage.current.liveView = myView

イメージをliveViewに表示する

実際の例を示しましょう。リソースとして登録したPNG形式のイメージ「cat1.png」からUIImageオブジェクトを生成し、それをイメージ表示用のViewであるUIImageViewオブジェクトに登録して、PlaygroundのliveViewプロパティに設定してみましょう。

1.「File」メニューから「New」→「Playground」を選択すると表示されるテンプレート選択画面では、「Blank」を選択します。
テンプレートに「Single View」を選択するとUIViewControllerのサブクラスとしてMyViewControllerが作成されますが、ここではゼロからコードを入力することにします。

Blankを選択し、ゼロからコードを入力する

Blankを選択し、ゼロからコードを入力する

2.表示するイメージファイルを「Resources」フォルダに登録します。
「Project Navigator」を表示し、Finderからイメージファイルをドラッグ&ドロップで「Resource」フォルダに保存します。

イメージファイルを登録

イメージファイルを登録

3.Playgroundのエディタを開きコードを記述します。
次にリストを示します。

リスト1:MyPlayground1.playground

import UIKit
import PlaygroundSupport

// イメージオブジェクトを生成
var myImg = UIImage(named: "cat1")

// UIImageViewを生成
var imgView = UIImageView(image: myImg)

// liveViewにimgViewを登録
PlaygroundPage.current.liveView =  imgView

4.アシスタントエディタの「LiveView」→「Playgroundファイル名(LiveView)」を表示します。
以上で、アシスタントエディタにイメージが表示されます。

指定したイメージが表示される

指定したイメージが表示される

複数のイメージをランダムな位置に表示する

続いて、適当なサイズのコンテナとして使用するUIViewを用意し、その中に10個のUIImageViewオブジェクトをランダムな位置に配置してみましょう。

複数のイメージを表示する

複数のイメージを表示する

次にリストを示します。

リスト2:MyPlayground2.playground

import UIKit
import PlaygroundSupport

let viewHeight = 500
let viewWidth = 400
// コンテントビューを生成
let contentView = UIView(frame: CGRect(x:0, y:0, width: viewWidth, height: viewHeight))   // <=(1)

// 背景色を黄色に
contentView.backgroundColor = UIColor.yellow // <=(2)

// イメージビューを生成
var myImg = UIImage(named: "myCat")
var imgView:UIImageView

// 10個のイメージビューをコンテントビューにランダムに配置
for _ in 1...10 {  // <=(3)
    let x = arc4random_uniform(UInt32(viewWidth))
    let y = arc4random_uniform(UInt32(viewHeight))
    imgView = UIImageView(image: myImg)
    imgView.center = CGPoint(x: Int(x), y: Int(y))
    contentView.addSubview(imgView)
}

// コンテントビューをPlaygroundのliveViewにセット
PlaygroundPage.current.liveView = contentView

上記リストのポイントとなる箇所を説明していきます。(1)でコンテンツビューとして使用する400×500ピクセルのUIViewを生成しています。(2)でその背景色(backgroundColor)を黄色(yellow)に設定しています(Swift 3以降では、UIColorの色の設定/取得はメソッドではなくプロパティとなりました)。

contentView.backgroundColor = UIColor.yellow ←yellowプロパティに設定

(3)のforループで10個のUIImageViewを生成し、コンテンツビュー内のランダムな位置に配置しています。

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

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

連載バックナンバー

開発言語技術解説
第3回

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

2017/11/2
連載3回目となる今回は、Swiftでの開発を効率化させるPlaygroundを利用したUIのテストについて説明する。
開発言語技術解説
第2回

PlaygroundとSwift Playgrounds

2017/9/7
Swift言語の特徴的な機能であるPlaygroundと、iPadアプリのSwift Playgroundsを紹介する。
開発言語技術解説
第1回

SwiftとObjective-Cとの違い

2017/6/27
この連載では、Objective-Cの経験者がスムーズにSwiftへ移行できるよう解説する。第1回目は、SwiftとObjective-Cの違いを見てみよう。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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