iOSDC2018でPlayground駆動開発について話してきました

受付すぐ上にあるオシャレな弾幕

『家族アルバムみてね』アプリ開発グループの岩名@_rocknameです。

iOSDCという、iOS関連技術をコアのテーマとした技術者のためのカンファレンスに登壇してきました。

CfPを採択していただいた運営の方々、また実際に足を運んで聴いてくださった方々本当にありがとうございます。


何を話したの?

Playground駆動開発のすすめ という表題でお話させていただきました。

iOSDC Japan 2018で登壇した際のスライド

Viewのみを短時間でビルドして対象のシーンをPlaygroundで表示することでデザイン調整のフローを早くする開発手法です。

PlaygroundでインタラクティブにUIを確認

Kickstarterのossを見たことがある人は知っているかもしれませんね。

導入手順

1. 表示したいViewを詰め込むFrameworkを追加

以下のようにプロジェクトに対して Cocoa Touch Framework を追加していきます。

File > New > Target… を選択
Cocoa Touch Framework を選択

2. 切り出したFrameworkに表示したいViewを突っ込む

先程のFrameworkに対して表示したいViewを追加していきます。

`UI` Frameworkに表示したいViewを追加

※ このStep1, 2はQ&Aにてご指摘いただいたのですが、結局Viewが依存している先まで含んであげる必要があります。1, 2のステップはあくまで「責務に応じたレイヤごとにFrameworkを切る」という工程と解釈していただき、Playground側では依存しているFrameworkを全て import することになります。

3. (Carthageを使用した場合のみ) Viewの表示に必要なライブラリを追加

PlaygroundでViewを表示する際に、依存しているライブラリのプロジェクトファイルを同梱する必要があります。
(Cocoapodsの場合は勝手にworkspaceが生成されるのでその必要はありません)

Carthage/Checkouts/…からProjectファイルを追加

4. Playgroundをプロジェクトに追加

Playgroundを作成してプロジェクトに追加します。

File > New > Playground… を選択して、プロジェクトにPlaygroundを追加

5. PlaygroundでViewを表示

liveView に表示したいViewControllerを代入することでPlayground上に表示されます。

Playgroundで表示されたView

条件に応じたViewの表示方法

準備はできたのでここからは表示の仕方です。

まずは下記のようなメソッドをPlaygroundで定義してあげます。

次にその display メソッドに対して網羅的に引数を渡して呼び出しを列挙していきます。

あとは表示したい条件の display メソッドをアンコメントしてPlaygroundを走らせると、その条件に対応するViewがPlayground上で確認できるというわけです。
(Xcode 10 ではPlaygroundの逐次実行が可能になったためいちいちアンコメントするというダサいこともしなくて済むようになります)

playgroundControllersメソッドの中身

display メソッドの中で呼び出している playgroundControllers メソッド、もちろんこちらも実装してあげる必要があります。

何をしているかというと、指定した Device, Orientationなどの条件に応じて frame のサイズを指定してViewを返しています。

これにより Playgroundでインタラクティブに表示するデバイスの大きさや向きを変更可能になるというわけです。

(詳しくは本家kickstarterの実装をご参照ください)


最後に

オープニングパーティも含めると5日間にも渡る大きなカンファレンスを常に盛り上げてくださった運営の方々、改めてありがとうございました(来年も行きたいです)。