App Clip 対応した NFC カードを自作した - 『入る学科間違えた高専生』の日記

はじめ
デモ
材料
App Clip とは
App Clip の実装
apple-app-site-association 対応
ローカル体験について
NFC カードへの書き込み
App Clip Code の作成
貼り付け用のデザインを用意
ソースコード
最後に

はじめ

私「 App Clip 使っているか〜？」
みんな「うおーー！(歓声が上がる)」
私「 NFC 使ってるか〜？」
みんな「うおーー！(歓声が上がる)」

某ウイルスの感染拡大から数年ぶりにフル規模で開催されつつある技術カンファレンス。
私自身も参加しているのですが、懇親会などで NFC タグを使って自分のプロフィールやサービスを紹介している方をちらほら見かけました。
iOSDC Japan ではネームカードに NFC タグを貼り付けていてその中に fortee.jp の自分のプロフィールへの URL が書き込まれていますね。

あれを見ると「いいなぁ〜自分もやりたい！！」という気持ちになり iOS エンジニアなんだから NFC での App Clip の起動ができるじゃないか！ということでやってみました。

デモ

謎に無駄に 4K 動画

材料

Apple Developer Program 12,800円
NFC カード 10枚セット約1,000円
ラベルシール20枚約930円
ラミネートフィルム10枚約340円

合計、約 15,000円ほどあればできます！！
Apple Developer Program は税金なので義務だと思うので納税済みの国民の皆様はたった約 2,300円でできちゃいます。安い！！

NFCカード NTAG215カード白無地ホワイトカード 10枚セット

as known

Amazon

【Amazon.co.jp限定】エーワンラベルシール 1面ノーカット 20シート 88001

エーワン(A-one)

Amazon

ナカバヤシ手貼りラミフィルム定期券サイズ対応 TLF-001 [オフィス用品]

ナカバヤシ(Nakabayashi)

Amazon

Apple Developer Program については多分 App Store にリリースしないのであれば設定アプリの「デベロッパ」→「ローカルの体験」メニューから登録して実験ができます。

NFC カードは 𝕏 にて乞食をしたところ前職の同僚から面白そうだからという理由で送っていただきました。ありがとうございます。

雑に欲しい物リストリンクポストしたら @_m_coder 先生から NFC カードもらった！あざます！！！
AppClip とか作って自分のアプリを NFC で紹介できるようにしようとか思ってます。(すぐにできるとは言っていない)

現在ガチの無職なので応援よろしくお願いします！！！ https://t.co/5M05p2w7yL pic.twitter.com/pH4TR2q3tj
— 小泉ひやかし🌻無職 (@nnsnodnb) 2023年11月20日

App Clip とは

developer.apple.com

簡単に書くとミニアプリですね。
iOS 14, 15 では最大 10MB 、 iOS 16 以上では最大 15MB の非圧縮バイナリサイズにする必要があります。
iOS 17 以上では、以下の条件をクリアすると非圧縮バイナリサイズを最大 50MB まで拡張することができます。

Spotlight やウェブサイトなどのデジタル呼び出しのみを対応
人々が自宅などの信頼できるネットワーク接続によって App Clip を使用する
App Clip が iOS 17 未満をサポートしない

developer.apple.com

今回作ったアプリは、ユニバーサル向けの非圧縮バイナリサイズが 13.2MB となっていて iOS 16 以上からのサポートにしているのでもうちょっと容量を大きくしたりするとだめになってしまいます。
また、とりあえずやっちゃえっていう感じで実装したのでフルアプリバージョンと何も機能に違いがありません。実際に審査に通っている事例を知っているのでこれでやってみました。

App Clip の実装

zenn.dev

私が下手に書くよりも、日本で1番初めに App Clip を実装されたのではないかという @d_date さんの記事を貼っておきます。

あとは、 WWDC 2020 のセッション動画を見るとかですね。私は発表時に見たのでいけるだろ！ってやってみたら App Store Connect 送信後に躓きました。
なおそのあとも見てないのでダメです。

`apple-app-site-association` 対応

Universal Links でおなじみの通称 AASA です。
私はドメインを nnsnodnb.moe を GitHub Pages の .github.io で CNAME で管理しているので .well-known 配下に設置しています。
以前は GitHub Pages による AASA の配布はできなかったと思うのですが、どうやら iOS 14 から CDN 経由でアクセスがされるようになってから自動的に Apple 様のサーバが Content-Type を application/json に変更して配信してくれるようになったのではないかと想定しています。
また、 GitHub Pages では . が最初に来るフォルダやファイル等は無視されるようになっているので何も書かずに .nojekyll ファイルを生成して配置することになります。

AASA は .well-known/apple-app-site-association が見つからなければ apple-app-site-association を探しにいくようになっていると公式ドキュメントで大昔に見た覚えがあるのでトップディレクトリに直接おいても問題ないと思います。ただ、その分だけ若干なりともオーバーヘッドが発生すると思うので気になるのであれば .well-known に置いて置くべきですね。

{
  "applinks": {
    "apps": [],
    "details": [
        ・・・
    ]
  },
  "appclips": {
    "apps": [
      "<TEAM_ID>.<APPCLIP_BUNDLE_ID>"
    ]
  }
}

ドキュメントを見たらわかるんですが、 AASA ファイルに appclips を辞書の形で追加してその中に記述をします。
applinks はなくていいです。後で自分でも見てわかるようにしているだけです。 App Clip だけを対応した AASA ファイルの場合は appclips の要素だけで問題ないです。

アプリ側の実装に戻ります。
公式ドキュメントも動画も見てないダメ野郎なのでどこかに書いてあるかもしれませんが、 App Clip 側の entitlements ファイルに Associated Domains を追加して AASA が配置されているドメイン情報を追加します。 appclips:<fully qualified domain> の形で1つの要素だけをもつ Associated Domains にします。

ローカル体験について

材料の章で書いたローカル体験についてですが、公式に日本語のドキュメントがあります。

developer.apple.com

基本的に App Store に公開・承認されていないと App Clip は使用することができません。
しかし、開発中の場合は公開・承認されているわけはないのでちゃんと逃げ道が用意されています。こちらで対応すると良いでしょう。

診断結果は1回キャッシュされると結構強いキャッシュで上手く動かないとかあると思うので削除することもできます。

NFC カードへの書き込み

NFC Tools

wakdev
ユーティリティ
無料

上記のアプリを使用させていただきました。
NFC 初心者の私でもわかったので多分ちょっと技術が分かる人であれば誰でも書き込みができます。

設定アプリから「デベロッパ」→「ローカル体験」から App Clip 情報を登録してちゃんと NFC タグから App Clip が実行されるか確認はしましょう！

とても簡単に作られています。

App Clip Code の作成

審査する前に知ったんですが、 App Store Connect にアップロードに App Clip の体験を追加したタイミングで App Clip Code をブラウザ上で生成できます。

今回は、 App Clip Code Generator を使用しました。
NFC のプロがめっちゃ丁寧に記事を書いているのでそちらを参考にするといいでしょう。

URL の文字数制限は 34文字以内になっているので長すぎると App Clip Code が生成されません🥺
何回これで泣かされたでしょうか...？

SVG で出力されるのがとても嬉しいですね。

こちらも同じですが、設定アプリから「デベロッパ」→「ローカル体験」から App Clip 情報を登録してちゃんとカメラから App Clip が実行されるか確認はしましょう！

貼り付け用のデザインを用意

Figma でもなんでもお好きなデザインツールを用意しましょう。

Figma の場合は、 px 単位らしいので今回使用した NFC カードは横 54mm 縦 86mm なので、 px 単位に直して横 153px 縦 243.7px にしました。
私はデザイナーじゃないのでこれが確実なのかはわからないですが、以下のプラグインを使用してこの値を導きました。

www.figma.com

枠線はなくてもいいですが、あると後でカッターで切るときにわかりやすいので #D1D1D1 ぐらいにして Outside 0.25px ぐらいにしておくと切り損じても目立たなくていい感じでした。
あとは切って貼ってラミネートフィルム貼って終わりなんですが、その前にちゃんとラベルシール以外に印刷して App Clip Code が読み取れるかは確認しましょう！
確認できたら印刷して切って貼ってラミネートフィルム！！！

貼ってラミネートした後に気がついたんですがこれちょっと画質が荒くてあれなので PDF とかで Figma から書き出して印刷したほうがよかったです。

完成！！

あとは App Store Connect にアップロードして App Clip セクションから高度な App Clip 体験とかをポチポチやったりヘッダー画像作って審査提出して終わり！！
お疲れ様でした！

ソースコード

ソースコードは公開しています。

github.com

このアプリの紹介記事は以下です。

nnsnodnb.hatenablog.jp

最後に

今回初めて App Clip の実装自体にも触れてみました。
App Clip の実装自体はメインアプリと何も変わらない実装をしている(SwiftPM でフレームワーク化しているので読み込ませるだけ)ので何もしてないのですが Associated Domains とかの Swift 以外の実装項目もちゃんと学べてよかったです。

App Clip Code Generator をこれがリリースされてからすぐに知っていました。
しかしながら、使ってみたりしたんですが実際に iPhone で読み取ると対応するアプリがないよとか出てｲﾐﾜｶﾝﾈになっていました。
それからちゃんと調べたら App Clip に対応したアプリがないとダメということがわかった上、 NFC カードも手に入れたので今回のようなことをやってみました。

印刷とかラミネートとか初めてやったのでなんか不格好ですが、手作り感があっていい感じです。(言い訳)

それではメリークリスマス。