2023/8/2

【Swift UI】SwiftGenの使い方！画像やカラー、文字列などのリソース管理

この記事からわかること

SwiftのSwiftGenとは？
導入方法と使い方
swiftgen.ymlの作成方法と記述すること
実際に使用する流れ
画像やカラーの参照方法
ローカライズした文字列参照方法
AssetやL10nとは？

index

[open]

SwiftGenとは？
導入方法
Homebrewによるインストール
Mintによるインストール
swiftgen.yml
使い方：画像とカラー
プロジェクトの作成
swiftgen.ymlファイルの準備
プロジェクト内にリソースを用意
自動生成コマンドの実行
リソースの参照：列挙型Asset
リソースを追加した場合
使い方：ローカライズ文字列
リソースの参照：列挙型L10n
変数を埋め込む方法

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：16.0
iOS：18.0
Swift：5.9
macOS：Sonoma 14.6.1

公式リファレンス：SwiftGen

SwiftGenとは？

SwiftGenは、プロジェクト内で使用するリソース(画像やローカライズされた文字列など)をタイプセーフに参照、管理するためのSwiftコードを自動的に生成するCLI(Command Line Interface)ツールです。SwiftGenを使用することでタイプミスの回避や存在しないアセットを参照する可能性を無くしたりとアプリを開発する上で間違いやすいリソースの参照を簡潔に記述することができるようになります。

似たようなライブラリにR.Swiftがありますが、これと同じ役割を持っているのがSwiftGenになります。

おすすめ記事：【iOS】R.Swiftの導入と使い方！静的リソースを安全管理

導入方法

SwiftGenはCLI(Command Line Interface)ツールなのでプロジェクトごとにというより、Mac自体に導入する形になります。CocoaPodsを使用した方法もあるようですが、Homebrewやmintを使用してインストールする流れになります。

Homebrewによるインストール

Homebrewでインストールする場合は以下のコマンドを実行します。

$ brew install swiftgen

おすすめ記事：Homebrew(ホームブルー)のインストール方法

Mintによるインストール

Mintでインストールする場合は以下のコマンドを実行します。

$ mint install SwiftGen/SwiftGen

インストールできたか確認してみます。正常にバージョンが返ってくればインストールは成功です。

$ swiftgen --version
SwiftGen v6.6.2 (Stencil v0.15.1, StencilSwiftKit v2.10.1, SwiftGenKit v6.6.2)

swiftgen.yml

SwiftGenでリソースを管理するためには「swiftgen.yml」という名前の構成ファイルを用意する必要があります。これは以下のような役割があります。

ジェネレートするリソースの種類の指定
リソースのファイルパスや識別子
出力されるコードの形式
カスタムジェネレータの追加

このファイルの情報を元にSwiftGenがリソースに対するファイルを自動生成してくれるようになります。「swiftgen.yml」ファイルは以下のコマンドを実行することで自動生成することが可能ですが、手動で作成し設置しても問題ありません。設置場所はプロジェクトのルート階層に設置しておきます。

cd プロジェクト
$ swiftgen config init

生成された「swiftgen.yml」ファイルの中身は全てコメントアウトされているので以下のように書き換えます。

swiftgen.yml
# ローカリゼーション(多言語対応)用Stringファイル
strings:
  inputs: Resources/Base.lproj
  # テンプレート指定と保存先
  outputs:
    - templateName: structured-swift5
      output: プロジェクト名/Generated/Strings.swift
# 画像やカラーコードなどのAssetsリソース
xcassets:
  # 画像やカラーなど
  inputs:
    - プロジェクト名/Resources/Images.xcassets
    - プロジェクト名/Resources/Colors.xcassets
  # テンプレート指定と保存先
  outputs:
    - templateName: swift5
      output: プロジェクト名/Generated/Assets.swift

ここではinputsとoutputsでプロジェクト内のファイルを指定しています。inputs側に指定するものはプロジェクト内の実際のパスと合わせるようにしてください。outputs側は自動生成されるのであらかじめ作っておく必要はありません。詳細な設定方法は公式サイトを参考にしてください。

公式リファレンス：SwiftGen 設定ファイル

使い方：画像とカラー

では実際にSwiftGenを使用して画像とカラーをSwiftファイル内から参照してみたいと思います。

流れ

プロジェクトの作成
swiftgen.ymlファイルの準備
プロジェクト内にリソースを用意
自動生成コマンドの実行
リソースの参照

プロジェクトの作成

まずはXcodeで新規のプロジェクトを作成します。今回は「SwiftGen」というプロジェクトファイル名で作成しておきました。

swiftgen.ymlファイルの準備

続いてswiftgen.ymlファイルを生成し、中に画像とカラーを対象とさせるように記述します。出力先は「Generated/assets.swift」に設定しました。

cd SwiftGen
$ swiftgen config init

swiftgen.yml
# 画像やカラーコードなどのAssetsリソース
xcassets:
  # 画像やカラーなど
  inputs:
    - SwiftGen/Resources/Images.xcassets
    - SwiftGen/Resources/Colors.xcassets
  # テンプレート指定と保存先
  outputs:
    - templateName: swift5
      output: SwiftGen/Generated/Assets.swift

プロジェクト内にリソースを用意

プロジェクト内にリソースを用意していきます。まずはResourcesディレクトリを作成し、その中に「Images.xcassets」と「Colors.xcassets」を作成します。各々に画像やカラーを追加し準備は完了です。この時点での階層構造は以下のとおりです。一応Generatedディレクトリも準備しておきました。

自動生成コマンドの実行

これで準備が整ったのでSwiftGenの自動生成コマンドであるswiftgenまたはswiftgen config runを実行します。

$ swiftgen config run

これでプロジェクト内にGenerated/Assets.swiftファイルが自動生成されました。ですがXcode側からGeneratedディレクトリの中を確認しても見当たりませんでした。プロジェクトをMacのファインダーから見てみるとちゃんと生成されていたのでドラッグ&ドロップでXcode内のGeneratedディレクトリに落とし、「Create groups」にチェックを入れて「Finish」をクリックすることで反映させるようにしました。

これで画像とカラーのリソースに簡単に参照するための準備が完了しました。

リソースの参照：列挙型Asset

画像やカラーのリソースを参照するには列挙型Assetを使用します。この列挙型が自動生成されたデータ型で今回でいう「Assets.swift」に定義されています。例えばロゴ画像(app_logo_name)を指定するString型を参照するにはAsset.Images.appLogoName.swiftUIImage、テーマカラー(thema_color)を指定する場合はAsset.Colors.themaColor.swiftUIColorとなります。

VStack {
    Asset.Images.appLogoName.swiftUIImage
        .imageScale(.large)
    Text("Hello, world!")
        .foregroundColor(Asset.Colors.themaColor.swiftUIColor)
}

Asset.リソースファイル名.リソース名で対象のリソースを参照することができ、そのプロパティからリソースファイル名やリソース型を参照することが可能なっています。

Asset.Images.appLogoName.name // String型
Asset.Images.appLogoName.swiftUIImage // Swift UI Image型
Asset.Colors.themaColor.swiftUIColor // Swift UI Color型

リソースを追加した場合

SwiftGenでリソース管理用のファイルが自動生成された後に画像やカラーなどのリソースを追加した場合は再度ジェネレートする以下のコマンドを実行しないと使用できないので注意してください。

$ swiftgen config run

使い方：ローカライズ文字列

続いてローカライズした文字列をSwiftGenを使用して参照する方法をまとめていきます。「ローカライズって何？」って方は先に以下の記事を参考にしてください。

今回は以下のようにResourcesディレクトリ内にEnglishとJapaneseのLocalizable.stringsファイルがあるとしてやっていきます。この場合Finder上ではResources/en.lproj/Localizable.stringsとResources/ja.lproj/Localizable.stringsになっています。

【Swift UI】アプリのLocalization(多言語対応)方法！Localizable.stringsとは？

まずはswiftgen.ymlファイルを以下のように書き換えます。ローカライズされた文字列は端末の言語/地域によって自動で切り替えられて適応されるのでSwiftGenで読み込むのはどれか1つで大丈夫です。今回はja.lproj側にしておきました。

swiftgen.yml
# ローカリゼーション(多言語対応)用Stringファイル
strings:
  inputs:
      - SwiftGen/Resources/ja.lproj/Localizable.strings
  # テンプレート指定と保存先
  outputs:
    - templateName: structured-swift5
      output: SwiftGen/Generated/Strings.swift
# 画像やカラーコードなどのAssetsリソース
xcassets:
  # 画像やカラーなど
  inputs:
    - SwiftGen/Resources/Images.xcassets
    - SwiftGen/Resources/Colors.xcassets
  # テンプレート指定と保存先
  outputs:
    - templateName: swift5
      output: SwiftGen/Generated/assets.swift

ちなみに中には以下のように記述しています。

Localizable.strings(Japanese)
"language" = "日本語";
"greeting" = "挨拶";
"greeting.morning" = "こんにちは";
"greeting.night" = "こんばんは";

リソースの参照：列挙型L10n

ローカライズされたリソース参照するには列挙型L10nを使用します。そのプロパティとしてLocalizable.stringsファイルのキーとして指定した名前が用意されているので参照できるようになります。

Text(L10n.language)

今回はローカライズする文字列のキーをgreeting.nightのように記述しました。こうすることでSwiftGenで自動生成した列挙型も階層構造にすることが可能です。

Strings.swift
internal enum L10n {
  /// 挨拶
  internal static let greeting = L10n.tr("Localizable", "greeting", fallback: "挨拶")
  /// Localizable.strings
  ///   SwiftGen
  /// 
  ///   Created by t&a on 2023/08/03.
  internal static let language = L10n.tr("Localizable", "language", fallback: "日本語")
  internal enum Greeting {
    /// こんにちは
    internal static let morning = L10n.tr("Localizable", "greeting.morning", fallback: "こんにちは")
    /// こんばんは
    internal static let night = L10n.tr("Localizable", "greeting.night", fallback: "こんばんは")
  }
}