Watch Face Sharingとの出会い

Watch Face Sharingとの出会い

自慢できるようなwatchOS Appのコンプリケーションや、シェアしたくなるようなウォッチフェイスを作りましょう。watchOSやiOS App内でウォッチフェイスをシェアする方法、誰でも見つけることができ、ダウンロードできるようにウェヴでホストする方法もお伝えします。ウォッチフェイスプレビューイメージの使い方の成功事例と、インストール体験をスムーズにするための方法もお伝えします。

リソース
関連ビデオ

WWDC20
ダウンロード

こんにちは WWDCへようこそ “Watch Face Sharingとの出会い” watchOSのエンジニアマネージャージャレド･マギャンです今日はApple Watchの文字盤の共有についてお話しします watchOS 7とiOS 14の新機能です文字盤の共有はまさに期待どおりのものです誰とでも文字盤を共有できる機能を好きなように設定できます文字盤はWatchから画面を長押しして新しい“共有”ボタンをタップすると直接共有されます受信者を選びメッセージを作成するだけですメッセージはWatch上にインラインプレビューを表示できます受信者も同様ですプレビューをタップすると Watchに文字盤を追加するよう求められます
iPhoneからも文字盤を共有できます iOS Watchアプリケーションを開き文字盤を選択するだけですそれから右上の角でおなじみの“共有”アイコンをタップします
共有シートが表示され文字盤の共有方法を選択できますデベロッパの皆様に文字盤共有はどんなメリットをもたらすのでしょう？文字盤はアプリケーションから直接共有でき― ウェブサイトでホストされていますわずか数タップで構成した文字盤が Apple Watchに表示されます文字盤にコンプリケーションを含む場合文字盤を追加するとアプリケーションをダウンロードするよう促されます
受信者の地域で利用できないアプリケーションの場合コンプリケーションも文字盤で利用できませんいくつかの新しい文字盤は以前のWatchで利用できないことも言及しておきますそしてナイキとエルメスの文字盤はそれぞれのハードウェアでのみ生成と追加ができます文字盤ファイルはすべての文字盤の設定を含みますカラーやスタイル写真とコンプリケーションなど Watchでどれでも設定できます文字盤にコンプリケーションがある場合ファイルはサンプルエントリを含みますそれによりアプリケーションがインストールされていなくても受信者のデバイスでプレビューできます今年新しいコンプリケーションAPIを ClockKitに導入しました現在文字盤は同じアプリケーションから複数のコンプリケーションをサポートしますコンプリケーションがユーザー情報辞書やユーザーアクティビティを使用する場合それらの嗜好を共有した文字盤に含むことができますたとえば共有した文字盤が Dawn Patrolのコンプリケーションを含むとユーザー情報辞書を使用しサーフィン条件を表示する都市を指定できます詳細は“Create Complications for Apple Watch”をご確認ください
今年 ClockKitに新しいAPIを導入したことでユーザーにアプリケーション内で文字盤の追加を促せるようになりました事前設定した文字盤ファイルへのローカルURLで addWatchFaceを呼び出しますするとユーザーはApple Watchに文字盤を追加するよう促されますこのAPIはwatchOSとiOS両方の ClockKitで利用可能です文字盤がコンプリケーションとともに Watchに追加されたらアプリケーションが実行され ClockKitからのタイムライン要求に応えますこの時点で先ほど述べたユーザー情報辞書を参照できますジョーに交代して既存のアプリケーションへの機能の追加プロセスを説明してもらいましょうありがとうジャレド wacthOSでソフトウェアエンジニアをしているジョー･ディオンです今日はiOSとwatchOSのアプリケーションへ新しい文字盤共有APIを取り入れる簡単な方法をご紹介します “Coffee Tracker”というアプリケーションがありますあなたの日常的なカフェイン摂取量を記録できますこれはメインビューですその日のカフェイン摂取量を確認できます下にあるコーヒーカップボタンをタップするとドリンクリストビューが開きますドリンクリストビューではカフェイン飲料のリストを見ることができますそのうち１つをタップするとその日の私のカフェイン摂取量に追加されます
watchアプリケーションもあります現在のカフェイン摂取量を表示するコンプリケーション付きですこのコンプリケーションはかなり役立ちますのでアプリケーションのコンテキスト内でカスタマーと共有したいです iOSアプリケーションで文字盤共有を実装することがその達成のためのすばらしい手段だと思います実装する方法をみていきましょうアプリケーションに文字盤共有を実装する手順はこうです初めにアプリケーションのコンプリケーション付きの文字盤を生成します次にアプリケーションのバンドルに文字盤と文字盤プレビューをインポートしますそれから文字盤を表示して追加するためのUIを作成しますそして最後に古いWatchへのサポートを追加しますそれではやり方を見ていきましょう
わたしのiPhoneです初めに共有する文字盤を作成するために Watchを開きます
文字盤ギャラリーを開きます
それではアプリケーションを補完する文字盤を探しましょう
クラシックでアナログな見た目のモジュラーコンパクトの文字盤が好きなのでこれにします素晴らしいグラフィックの長方形のコンプリケーションが見栄え良く文字盤の下部にあります
Coffee Trackerのコンプリケーションを選択しますいいですねでも私は独自の文字盤を作りたいのでカラーを選んでいきます文字盤をもっとコーヒーらしく見せるものがいいですね
ウォルナット色がコーヒーに似ています中央のコンプリケーションも選びます
Breatheコンプリケーションはカフェイン中毒のユーザーをすこし落ち着かせるのに役立ちます
いい感じ共有できるカフェイン摂取量の文字盤ができましたただし共有する前に App Storeにそのアプリケーションが公開されている― 必要があることに注意してくださいこれで文字盤を共有する準備ができました右上の角の“共有”ボタンをタップするだけです
共有ビューで “オプション”ボタンが表示されています共有した文字盤からコンプリケーションやそれらのデータを除外できますこのコンプリケーションはタップするとエスプレッソを記録するよう設定されています先ほどジャレドがお話ししたユーザー情報辞書を使用していますでも文字盤をカスタマーに共有する際にはそれをデフォルトにしたくないので “データなしで含める”をコンプリケーションに選択します
すべて良さそうなのでそのままにしていきましょうＥメールで共有する場合文字盤のプレビューイメージとともに文字盤ファイルを受け取りますプレビューイメージは後でとても役に立ちますすでに文字盤をＥメールで送りダウンロードにコンテンツを抽出したので見てみましょう Macで“ダウンロード”フォルダを開きましたＥメールからの文字盤ファイルとそのプレビューがあります Xcodeプロジェクトにこの文字盤ファイルを追加します
アプリケーションで文字盤を共有するもう一つの重要な側面は文字盤のプレビューを表示することですフォルダの中にプレビューイメージがあるのが分かります UI作成時にこのプレビューイメージを使用するのでこれをXcodeアセットフォルダに追加しますイメージを入手したのでついにコーディングの準備ができました DeviceModelクラスを開くところから始めます
このクラスはiPhoneとWatchがペアリングしているか検出するために作りましたこれを Watchを持っているユーザーのみに文字盤を表示するためにビューで使用しますまた WatchConnectivityフレームワークをインポートしますこれによりこのクラスで WCSessionDelegateプロトコルを実装できますこれを実装することで WCSessionを使用してペアリングされたWatchをユーザーが持っているか確認できます WCSessionを使用してこのクラスにisPaired computed変数を作成し Watchがペアリングされているか示します
これでisPaired変数ができたので DrinkListViewにいきましょう
ドリンクリストの下部にユーザーが文字盤を追加するためのナビゲーションリンクが欲しいですしかしナビゲーションリンクをペアリングされたApple Watchを持つ人にのみ表示したいので DeviceModelクラスを使用し DeviceModelのisPaired変数に等しい定数を作成します次に新しく作成した定数を使用しビューに“文字盤の追加”ビューへのナビゲーションリンクを表示するか決定しますここではそのチェックとUIを追加します
これが新しく作成したナビゲーションリンクですただ AddFaceViewがコンテンツを何も持っていません AddFaceViewを詳しく見てみましょう
AddFaceViewに文字盤のプレビューと文字盤を追加するためのボタンを表示する必要がありますこのためのUIを追加します
インポートした文字盤のプレビューが表示され文字盤を追加するためのボタンが作成されますボタンがアクションブロックを実行する間アクティビティインジケータも表示されます
このボタンはApple Design Resources ウェブサイトのアセットを使用して作成しました今のところボタンでは何も実行されないので新しいaddWatchFace関数を使用して修正します初めに ClockKitをインポートします
そしてaddWatchFaceを呼び出すためのラップ関数を作成します
新しいaddFace関数の使用方法を理解するためこのコードを詳しく見ていきましょう
初めにアプリケーションのバンドルの文字盤ファイルを指すURLを作成します
次に新しいaddFace関数を CLKWatchFaceLibraryのインスタンスを作成して使用しますラップされていないwatchfaceURLを使用し addWatchFace関数を呼び出します
完了ブロックで文字盤を追加するときに発生するすべてのエラーを考慮する必要がありますここではエラーを出力しますではボタンのアクションブロックでこのメソッドを呼び出してみましょう
addFaceを呼び出しているのが分かります先ほど作成してプロジェクトに追加した文字盤を使用しています Add Watch Face APIの動作を確認しアプリケーションを実行してみましょう
ドリンクビューを開くと―
下部にナビゲーションリンクボタンが表示されていますタップして “文字盤の追加”ビューを表示します “文字盤の追加”ビューが文字盤のプレビューとともに表示されますこの文字盤はかなり使えそうに見えるので “文字盤の追加”ボタンをタップします
Watchアプリケーションです “マイ文字盤に追加”をタップすると
Watchに文字盤が追加されましたすばらしいユーザーはこの文字盤がとても役立つと感じるはずです
しかしこのモジュラーコンパクトの文字盤は Series 3のWatchに互換性がありませんユーザーが古いデバイスを持っている場合に備えフォールバックの文字盤を提供できます Xcodeに戻り方法を見てみます
今 addWatchFaceWrapperは予期されるエラーを処理することができません最初の文字盤に互換性がない場合フォールバックの文字盤を追加することでこれを変更しましょう
それではSeries 3に互換のあるフォールバックの文字盤とともに addWatchFaceWrapper関数を呼び出します
モジュラーの文字盤をフォールバックとして使用しています Series 3のWatchと互換性のある文字盤リストからこの文字盤を選びました Human Interface Guidelinesで概説されていますこのファイルはすでに Xcodeプロジェクトにも入れているので Apple Watchを持っている人なら誰でもアプリケーションの文字盤を使用できます次に進む前にデモでいくつかベストプラクティスを確認しましょう初めに文字盤共有の際ユーザーデータが含まれる可能性があることを覚えておきましょうこれはコンプリケーションに表示されるコンテンツの指定に役立ちますが意図せず個人的なデータが含まれないよう注意してください
文字盤のプレビューが空白にならないようコンプリケーションにサンプルデータがあるか確認することも重要です
WatchConnectivity APIを使用して iOS アプリケーションから文字盤を提供する前にペアリングされたWatchがあるか検出してもよいでしょうまた文字盤のプレビューイメージを取得する最善の方法はＥメールです Series 3のWatchに互換性のない文字盤ならそのユーザー向けの文字盤を準備することも覚えておいてください最も大事なことですが文字盤共有にアプリケーションを含める前に公開する必要があることを忘れないでください App Store Connect IDを文字盤ファイルに含める必要があるためですそれではジャレドに返しますありがとうジョー文字盤はウェブサイトでも共有できます iOSでユーザーが文字盤をダウンロードすると SafariがApple Watchにその文字盤を追加するよう促しますここに表示する文字盤のMIMEタイプを使用してファイルを提供する場合 Safariはファイルを文字盤として認識する可能性が高いです
例を表示していますウェブサイトで共有されている文字盤です文字盤のプレビューは公式の“Add Apple Watch Face” ボタンの上に表示する必要がありますジョーがご紹介したように iOSのWatchアプリケーションでＥメールを介して文字盤を共有することでプレビューイメージを取得できますボタンはApple Design Resourcesウェブサイトで見つけることができ watchOSで使用できるコンパクトなバージョンもありますこのようにグラフィックをつけてハードウェアで表示したいならデザインリソースからイメージを見つけることもできます
共有する文字盤に Apple WatchのSeries 3との互換性がなければ代替の文字盤を提供することが重要です２つの文字盤を共有する場合別のプレビューとボタンをウェブページに含める必要があります文字盤の互換性を含む詳細については “watchOS Human Interface Guidelines”をご参照ください QRコードとNFCタグで文字盤共有の機会を増やせます Apple Watchでコンプリケーションとアプリケーションを簡単に入手するために文字盤ファイルをホストするウェブリンクを埋め込むだけです皆さんが独自の文字盤を構成しアプリケーションで文字盤共有APIを採用するかウェブサイトで文字盤をホストしてくれるのを楽しみにしていますユーザーのApple Watchで皆さんのアプリケーションを入手するためのすばらしい方法ですありがとうございました

var isPaired: Bool {
    if (WCSession.isSupported()) {
        let session = WCSession.default
        session.delegate = self
        session.activate()
        return session.isPaired
    } else {
        return false
    }
}

9:01 - Add Face Wrapper

private func addFaceWrapper(withName: String) {
    if let watchfaceURL = Bundle.main.url(forResource: withName, withExtension: "watchface") {
        CLKWatchFaceLibrary().addWatchFace(at: watchfaceURL, completionHandler: {
            (error: Error?) in
            if let nsError = error as NSError?, nsError.code == CLKWatchFaceLibrary.ErrorCode.faceNotAvailable.rawValue {
                print(nsError)
            }
            isLoading = false
        })
    }
}

11:04 - Add Face Wrapper with Fallback Face

private func addFaceWrapper(withName: String, fallbackName: String?) {
    if let watchfaceURL = Bundle.main.url(forResource: withName, withExtension: "watchface") {
        CLKWatchFaceLibrary().addWatchFace(at: watchfaceURL, completionHandler: {
            (error: Error?) in
            if let nsError = error as NSError?, nsError.code == CLKWatchFaceLibrary.ErrorCode.faceNotAvailable.rawValue {
                if let name = fallbackName {
                    // We failed, trying with fallbackName.
                    addFaceWrapper(withName: name, fallbackName: nil)
                }
            }
            isLoading = false
        })
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC20