はじめての App Clip【実装編-Part1】

前回の概要編に続き今回は既存のプロジェクトに App Clip を作っていきます。また、サーバの対応や App Store Connect での設定などはまた別の記事で書こうかと思います。

作業開始 👨‍💻

AppClip の開発には Xcode12 以上が必要なので、インストールが完了していない場合はこちらからダウンロードしてください。

今回は以前作った Gyotaku というアプリに AppClip を追加していきたいと思います。まずは File > New > Target で App Clip を選択します。

そして、プロダクト名を GyotakuClip 見たいな感じにしてインターフェース・ライフサイクを決めます。基本的に App Clip の実装では SwiftUI と UIKit の両方をサポートしているので好きな方で問題ないかと思います。現状では、シンプルなアプリ構築には SwiftUI を、複雑なレイアウトが必要な場合などには UIKit を見たいな感じで判断してやっています👀
ただ、次回以降では SwiftUI のキャッチアップも含めて SwiftUI で実装していきたいと思います。

ターゲットが追加されたので、実際に少し触って見ます。今回は Gyotaku App のすでに存在する Class などを使用してみたいので、Button がタップされたら画像に BlurEffect がかかる見たいなアプリ作って見たいと思います。

まずは、GyotakuClip で Class が使用できるようにするため必要なファイルの Target Membership に GyotakuClip を追加します。

すると、上記が画像のように Module が見つからないよ と Error がでています。解決方法として、GyotakuClip にも Rx 関連のライブラリを追加という手もありますが、バイナリサイズが 10MB と制限されているので、不用意にライブラリを追加するのはよくなさそうです。App Clip には Swift Complier で使用できる APPCLIP というフラグがあるので、これを使用して App Clip 以外で使用する場合にのみ必要な Framework 及びコンポーネントをインポートするようにします。

下記のようにして、それぞれのコンパイル環境(ここでは Debug, Release)で APPCLIP フラグが使えるようにします。

追加できたら、下記のように追加して APPCLIP 以外でインポートするように設定すると Error が消えます🎉

では、UIKit でお馴染みのように UI を作成していきます。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var contentBaseView: UIView!
    let effectImageView = BlurEffectImageView.loadFromNib()

    override func viewDidLoad() {
        super.viewDidLoad()
        contentBaseView.addSubview(effectImageView)
        effectImageView.setConstraintsToFill()
    }

    @IBAction func buttonDidTap(_ sender: Any) {
        effectImageView.set(type: .effectBlur, originalImage: UIImage(named: "icon")!)
    }
}