iOS アプリ開発に関連するトピックを提供しています。

storyboard2code で Storyboard ファイルを Swift コードに変換する

Storyboardで定義されている画面デザインを、Swift コードに変換する storyboard2code というコマンドラインツールを作成しました。

github.com

Storyboard と Swift コード

iOS アプリの UI を実装する際に、Storyboard を使用するか、それとも Swift コードで実装するのかという選択肢は、しばしばデベロッパーを悩ませる問題です。どちらの方法にもメリットとデメリットがあるため、画面の特性やチームの構成を考慮しつつ適切に使い分けることが重要です。

Xcode では Storyboard ファイルと Swift コードを相互に変換するような機能は提供されていないため、既存の画面定義を別の実装に移行する場合には地道な変換作業が必要でした。特に、Autolayout で複雑な制約が設けられた画面などは、どちらに移行するにしても非常に手間のかかる作業になります。

Storyboard から Swift コードへの変換

Storyboard ファイルと Swift コードを相互に変換することができれば、そのような移行の手間を軽減することができます。 今回作成した storyboard2code では Storyboard から Swift コードへの一方向の変換のみのサポートとなりますが、以下のような用途での使用を想定しています。

  • デモや POC 時に Storyboard で実装した初期 UI を変換して、本開発では Swift コードで画面定義を管理する
  • 画面定義が Storyboard 主体のプロジェクトを Swift コード主体のプロジェクトに移行する
  • Storyboard で作成した画面定義を Swift コードに変換して Swift Playgrounds で表示する

インストール

Github の リリースページ から最新バージョンの storyboard2code.zip ファイルをダウンロードします。ダウンロードした zip ファイルを展開して、実行できるようにファイルのパーミッションを変更します。

# Unzip file
unzip storyboard2code.zip
  
cd storyboard2code
  
# Change permission
chmod +x storyboard2code

使い方

ターミナルを起動して storyboard2code に対して Storyboard ファイルを渡すと変換が実行されます。

./storyboard2code Main.storyboard

変換が完了すると、Storyboard ファイルのあるディレクトリに変換された Swift コードが storyboard2code.swift というファイル名で出力されます。コード内には ViewController が定義されているので、このファイルをプロジェクトに組み込んで ViewController を呼び出すと画面を表示できます。

さらに詳しい使い方については README を参照してください。

変換例

変換前 (Storyboard)

https://raw.githubusercontent.com/watanabetoshinori/storyboard2code/master/Preview/Example2_Original.png

変換後 (Swiftコード)

https://github.com/watanabetoshinori/storyboard2code/raw/master/Preview/Example2_Converted.png

(使用プロジェクト: Auto Layout Tutorial)