iOSのSafari Extensionの構築と導入

こんにちは Jon Davisです Safari and WebKitチームの Web Technologies Evangelistです iOSのSafari Extensionを構築し 導入する方法を紹介します さて iOS向けのExtensionには いくつかのタイプがあります iOSには数年前から コンテンツブロッカーが搭載されており これは強力なルールを設定して リソースの読み込みをブロックできる Extensionの一種です ですが 本日取り上げるのは Safari Web Extensionです 2020年にmacOS Big Surに導入され 2021年の秋にはiOS 15と iPadOS 15にも導入されました Safari Web Extensionは 他のブラウザでも動作する Webテクノロジーを使用した Extensionの一種で ユーザーから非常に好評です App Storeで最も人気のあるカテゴリであり 他のAppと同様に簡単にインストールできます それは Safari Web Extensionが Appと一緒に提供されているからです これはまた デベロッパには App Storeで配信するメリットがある ということでもあります ユーザーはデベロッパが開発した Extensionを見つけることができ デベロッパはExtensionを 簡単に販売できるのです また App内の決済といった パワフルな機能を活用して Extensionの高度な機能を活用したり TestFlightを使ってベータ版のプログラムを 実行することもできます 一方で「それはいいけれど 自分はWebデベロッパであって Appのデベロッパではない」 と思われるかもしれません 私もAppデベロッパではありませんが このセッションを任されました そこで今回は 皆さんがXcodeを学べるよう 新しいプロジェクトを一から 作成してみたいと思います また Safariの プライバシーを保護するための許可モデルや Extensionの提出方法を App Reviewのプロセス通過に役立つ ヒントと共に紹介します それでは早速 Xcodeを使ってみましょう そのためには App Storeから Xcodeをダウンロードして インストールする必要があります App Storeを起動して 検索フィールドに 「Xcode」と入力すると すぐに出てきます あとは「入手」ボタンをクリックして 「インストール」をクリックするだけです ダウンロードにはかなりの時間がかかりますが 起動するとXcodeに コマンドラインツールのインストールを 促すメッセージが表示されます インストールをスキップした場合は 後でターミナルのコマンドラインから 簡単にインストールできます 「xcode-select」と入力し インストールフラグを追加するだけで インストールプロセスが開始されます 私の環境はすでに準備ができているため 今はこのコマンドを実行しませんが コマンドラインツールには Safari Web Extension Converterという 重要なツールが含まれているので 必ずインストールされていることを 確認してください このツールは 他のブラウザ向けのWeb Extensionや macOSのSafari向けに作成したものを iOSのSafariに対応させて アップグレードしたい場合に便利です では 簡単なデモのWeb Extensionを 「書類」フォルダに用意してみます このHello-World Extensionは 別のブラウザ向けに作成されていて ポップアップに「Hello World」と 表示するだけのものです ここで変換ツールを使って iOSに 対応するようアップグレードできます ターミナルに Xcodeの「xc」で 「xcrun」と入力します そして 「safari-web-extension-converter」と プロジェクトへのパスを入力します macOSのSafari向けに作成した Extensionについても 変換ツールを使って アップグレードできます 「xcrun safari-web-extension-converter」 と入力し 「rebuild-project」フラグと その後ろに macOS Extensionへのパスを 追加するだけです では実際に Hello-World Extensionで 変換ツールを実行してみましょう

「return」キーを押すと プロセスが開始されます 具体的な処理内容としては Extensionを iOSやmacOS向けにコンパイルして 実行できるAppプロジェクトに ラップしています ここでターミナルを少し 見ていただきたいのですが このメモに iOSのExtensionには 非永続的なバックグラウンドページが 必要であるという警告が表示されています このようにExtensionが iOSで正常に動作するために 必要な確認事項を知らせてくれるというのは とても素晴らしい機能です Xcodeに戻りましょう このExtensionはほぼ完成しています すでにバックグラウンドスクリプトが 非永続的な形で実行されるよう 設定されています あとはSafariに そのように 実行するよう指示するだけです つまり このExtensionを iOSで動作させるには マニフェストファイルを編集して バックグラウンドセクションに persistentキーは「false」という 指示を追加する必要があります 以上です シミュレータで実行してみましょう 「Build Targets」メニューで 「iPhone 13 Pro」を選択します 私はすでにたくさんのシミュレータを インストールしていますが 本来は「Add Additional Simulators」で テストしたいものを選択し ダウンロードする必要があります それでは「iPhone 13 Pro」を選択し ビルドして実行するボタン この再生ボタンのようなものをクリックします これでAppが構築され シミュレータで起動します ステータスバーの右上部で 実行状況を確認できます ここでシミュレータに切り替えて Appがインストールされて 起動するまで待ちます

起動したら 「設定」Appで 「Safari」セクションから 「機能拡張」をタップし Hello-World Extensionをオンにします それでは Safariで試してみましょう Safariを起動し 「ぁあ」メニューをタップします Hello-World Extensionがあるので それをタップすると 許可を求めるメッセージが表示されます これについては後で詳しく説明しますが とりあえず「1日だけ許可」を 選択しておきます そうすると出ました ポップアップに「Hello World」 と表示されています このように 他のブラウザ向けに 作成されたWeb Extensionを 簡単に変換できます さて私は Open Graphの メタデータのプレビューを 構築するプロジェクトを思いつきました TwitterなどのSNSサイトで プレビューを表示するのに 使われているのと同じメタデータです このようなWebページの画像とタイトル そして説明ですが このデータをポップアップでプレビューできる Extensionを構築したいと考えました では これから実際に構築してみましょう まず Xcodeで新しいプロジェクトを 作成してみましょう 「Multiplatform」で 「Safari Extension App」を選択し 「Next」をクリックします プロダクト名は 「Open Graph Preview」にします すでにチーム名は入力されていて 逆ドメイン方式で 組織IDが付けられています 言語はSwiftのままにし 「Next」をクリックします プロジェクトの保存場所を聞かれますが デスクトップで問題ありません また バージョン管理機能を付けたいので 「Create Git repository on Mac」 は有効にしておきます 「Create」をクリックすると このようにテンプレートから プロジェクトが生成されます 先に進む前に Xcodeの概要を簡単に 説明しておきたいと思います ウインドウの左側には ナビゲーションサイドバーがあり プロジェクトに必要なすべてのリソースが 整理して表示されています 中央には ナビゲーションサイドバーから選択した ファイルのメインエディタがあり 右側にはインスペクタサイドバーがあります これは編集中のファイルに応じて変わります インスペクタサイドバーは必要ないので 非表示にしておいて 作業スペースを少し広げます では Safari Web Extensionの 新しいプロジェクトを 構成するファイルを見てみましょう ナビゲーションサイドバーの一番上に あるのがプロジェクトファイルです これを選択すると メインエディタが開き プロジェクトの設定オプション画面が 表示されます その下には「Shared (App)」フォルダがあり Appの起動画面のリソースが入っています 「Resources」フォルダの横にある 詳細表示三角形をクリックすると Webリソースだけが表示されます 編集可能なHTMLファイルが 表示されるだけですが テンプレートを使用することで マークアップやスタイル およびスクリプトを 簡単にカスタマイズできます 「Shared (Extensions)」フォルダには Extensionのリソースが すべて入っています その「Resources」フォルダを展開すると Web Extensionでおなじみの ファイルがずらりと並んでいます マニフェストがここにあり バックグラウンドスクリプトと コンテンツスクリプトおよび 各種ポップアップファイルがあります 「iOS (App)」フォルダと 「macOS (App)」フォルダには 各プラットフォームのリソースが入っています その下の「iOS (Extension)」フォルダと 「macOS (Extension)」フォルダには 各Extensionのリソースが入っています 今回のプロジェクトでは 気にする必要はありませんので これらのフォルダは折りたたんでおきます 作業するファイルはすべて「Shared (Extension)」フォルダに入っています まず マニフェストファイルから見てみましょう ご覧のように 名前や説明には プロジェクト情報が入力されていて 開始に必要なものがすべて テンプレートに用意されています その下にはデフォルトのアイコンが いくつか指定されていますが プロジェクト独自のアイコンを用意することを 忘れないでください

ここはバックグラウンドスクリプトです すでにバックグラウンドスクリプトが 永続的に実行されないよう設定されています 今回のプロジェクトでは バックグラウンドスクリプトは必要ないので マニフェストファイルから このエントリを削除し バックグラウンドスクリプト自体も削除して ゴミ箱に移動します 次は コンテンツスクリプトの設定です ここでは JavaScriptファイルと 注入するWebサイトの ドメイン名を指定します 今回のツールは ユーザーが使用するサイトで 必ず使えるようにしたいので 「example.com」をアスタリスクに変更して どのドメインにも対応できるようにします その下は ブラウザのアクション セクションが宣言されています 「popup」ファイルとデフォルトの ツールバーアイコンのセットを ここで定義しますが こちらもプロジェクト独自の アイコンを用意することを 忘れないでください 最後はpermissionsキーです 使用する許可として 今回は 「activeTab」を追加します なぜ 「activeTab」なのでしょうか 良い質問です

ここで Extensionで使用できる 様々な許可について簡単に説明します SafariのExtensionモデルは ユーザーが管理できるように 設定されています ユーザー側の操作がないと動作しないので ユーザーがわかるように 最初の使用時には バッジが付いています 許可はWebサイトごとに付与されるため Webサイトの許可はSafariの 設定画面や環境設定に表示され ユーザーが管理できます さて 許可には4つのタイプがあります 1つずつ説明していきます 1つ目はスクリプト インジェクションの許可です この許可により matchesキーに記載されている Webサイトのドメインに基づいて ユーザーが閲覧しているページに JavaScriptやスタイルシートを注入できます ユーザーが閲覧しているWebサイトが matchesキーのドメイン名と一致すると ツールバーで スクリプトを 注入するExtensionに バッジが表示されます ユーザーはExtensionをクリックして 有効にする必要があります ユーザーが有効にするまで バッジは表示されたままで Extensionは動作しません 2つ目は暗黙的な許可です マニフェストファイルで宣言される 暗黙的な許可には いくつかのタイプがあります まずハイライト表示しているのは 追加の権限を必要としない 機密性を持たないタイプです 2つ目は Webサイトを特定する データが含まれる 機密性を持つ許可で これはユーザーのプライバシーを 保護する手段の1つです APIを呼び出すと APIは要求されたデータを含む コールバックを待ちます ユーザーがExtensionを操作すると 許可を求めるメッセージが表示され 約1分以内で答える必要があります ユーザーが承認すると コールバックが実行され データが返されます すでに承認済みのものは ほぼ即時に実行されます 3つ目は明示的な許可です これはExtension自体が 許可をリクエストするので 明示的です プロンプトは常にモーダルに表示され ユーザーではなくExtension自体が リクエストする許可のため バッジは付きません 4つ目は アクティブなタブの許可です これは アラートを回避したいという 特殊な場合に使用します ユーザーはツールバーでExtensionを 操作する必要がありますが Macの場合はキーボードショートカットや コンテキストメニューを 使うことができます この許可では 現在のタブの現在のドメインに タブの権限を付与します 本日はこれを使用します それでは コンテンツスクリプトの コーディングに進みましょう コンテンツスクリプトのテンプレートは メッセージの送信とリッスンに関する設定です コンテンツスクリプトからメッセージを 送信する必要はありませんが メッセージをリッスンする必要はあります コンテンツスクリプトでまず行うことは ユーザーが閲覧しているページから Open Graphのメタデータを 取得することです 簡単なDOM APIを使って OGのタイトルや説明 画像に適したmetaタグを 見つけることができます Extensionが どのように動作するかというと ユーザーがExtensionをタップして ポップアップを開くと ポップアップスクリプトが コンテンツスクリプトに 現在のページから Open Graphデータを取得するよう リクエストします ですので このリスナーコールバックでは マジックワードを含むメッセージを リッスンする必要があります マジックワードを含まない メッセージについては 何も行う必要がありません 実際 voidを返すだけです しかし マジックワードを含む メッセージを受け取ったならば metaタグのデータを送り返します コンテンツスクリプトで行うことは以上です それでは ポップアップの設定に進みましょう ポップアップのHTMLファイルから説明します ご覧のように スタイルシートと ポップアップ用のJavaScriptが 含まれています きっとWebデベロッパにとっては なじみ深いはずです このファイルのマークアップでは タイトルと説明 および画像プレビュー用の プレースホルダ要素を設定する必要があります これでタイトルと説明 および画像用の プレースホルダ要素が準備できました

次に ポップアップの スタイルシートを調整します ここは すべてのプラットフォームで 見栄えがするように 微調整を加えるだけで済みます なお スペースを埋めて アスペクト比を維持するために レスポンシブデザインのレイアウトを 画像に設定する必要があります 最後に Extensionの核心である ポップアップスクリプトの編集です まずは ポップアップの HTMLファイルで定義した プレースホルダ要素への参照を 取得する必要があります 次に コンテンツスクリプトに メッセージを送信する必要がありますが そのためにはアクティブなタブを 照会する必要があります 現在のウインドウで アクティブなタブを照会するには tabs.query APIを使用します tabs.query APIでは 現在のウインドウを アクティブなタブでフィルタリングします 該当するタブを特定したら メッセージを送信できます メッセージを送信する際は 現在のタブIDと マジックワードも当然渡します レスポンスを受け取ったら プレースホルダ要素を そのデータで更新するだけです できました それでは シミュレータで Extensionを実行してみましょう 再度ターゲットメニューで 「iPhone 13 Pro」の シミュレータを選択します ビルドして実行するボタンを クリックしてプロセスを開始し シミュレータに切り替えて Appが起動するのを待ちます 起動したら 「設定」Appで 新しいExtensionを 有効にできるので 「設定」に切り替えて スクロールして「Safari」をタップし 「機能拡張」をタップしましょう 「Open Graph Preview」を オンに切り替えます 次に Safariを起動し 「ぁあ」メニューをタップします 「ぁあ」メニューに 「Open Graph Preview」があります これをタップすると コンテンツスクリプトの 許可リクエストが表示されます 「1日だけ許可」を選択しておきます バッチリです このページのOpen Graph データのプレビューができました 別のページで試してみましょう 「ぁあ」メニューで 「Open Graph Preview」をタップし 「1日だけ許可」を選択します できましたが 問題があります 画像が表示されません 状況を確認するために SafariのWebインスペクタを使用します Webインスペクタを有効にしていない場合は Safariの環境設定を開き 「詳細」タブで 「メニューバーに"開発"メニューを 表示」にチェックを入れます そして「開発」メニューで シミュレータコンテンツに対する Webインスペクタを選択します そうすると 画像が読み込まれなかったことが よくわかります URLがうまくいかないのは おそらくコンテンツの問題でしょう webkit.orgのWebインスペクタも 開いてみましょう

OGのmetaタグデータを検索します タイトルと説明がありますが 画像がありません これが原因です 処理していない 未定義のケースがあったわけです ですので Xcodeに戻って その未定義のケースを 処理する必要があります では もう一度実行してみましょう ビルドして実行するボタンをクリックし 「Replace」をクリックして シミュレータ上で置き換えます シミュレータ上で起動したら Safariに戻って もう一度試します

「ぁあ」メニューで 「Open Graph Preview」を選択すると できました タイトルと説明が表示されています ただし 画像があるページでは どうでしょうか はい 動作しています 問題ありません シミュレータ上で動作させることで 複数のデバイスでのテストが可能ですが 実際のデバイスでテストすべきなのは 言うまでもありません それでここにiPhoneを用意しています Xcodeに戻って ターゲットメニューで このiPhoneを選択します そしてビルドして実行し このiPhoneで起動してみましょう

デバイスで実行し起動したら 「設定」で有効にする必要があります ですので 「設定」Appに切り替えて 「Safari」＞「機能拡張」で 「Open Graph Preview」を オンに切り替えます もう一度Safariを起動し 「ぁあ」メニューをタップします Extensionをタップし 「1日だけ許可」を選択します 完璧に動作しました 他のページでも試して すべてのケースが 動作するか確認してみましょう これはdeveloper.apple.comですが 追加の許可を求めるメッセージは 表示されませんでした apple.comドメインの一部だからです webkit.orgで試してみましょう

「ぁあ」メニューをタップし 「Open Graph Preview」を選択すると 許可を求めるメッセージが表示されます 別のWebサイトだからです 完璧です そして 画像がある投稿でも 確認しておきましょう 「ぁあ」メニューをタップし 「Open Graph Preview」を選択します 問題ありません 良いですね シミュレータと実際のデバイスで AppとExtensionが動作すれば App Storeに提出する準備が できたことになります App Storeに提出する際 いくつか注意点があります プロジェクト設定画面で ターゲットのiOS Appを選択し 「App Category」を必ず設定してください 今回は「Developer Tools」を選択します 次に 「Product」メニューで 「Archive」を選択します ビルドプロセスと同様 ステータスバーの右側で 実行状況を確認できます 処理が完了したら 提出するビルドアーカイブを選択し 「Distribute App」ボタンをクリックします アシスタントが表示されるので 配信方法は 「App Store Connect」を選択し 「Next」をクリックします 配信先は「Upload」のままにし 「Next」をクリックします App Store Connectとの通信を開始し Appレコードが準備されます

ここでApp名を確認します また SKUが App Store Connectアカウントの 他のAppのSKUとは異なる 一意なものであることを確認します 「Next」ボタンをクリックすると 審査用のAppレコードの作成が開始されます 作成にあたって 配信オプションの確認が 表示されます どれも非常に役に立つオプションなので 選択したまま 「Next」をクリックします この「Automatically manage signing」も 必ず選択したままにし 「Next」をクリックします ここからは Appと Extensionのコンテンツを 確認していきます 問題なければ 「Upload」をクリックします アップロードが完了するまでの間 App Store Reviewを通過するための ヒントをいくつか紹介します まず プロジェクトで使用する すべてのコードやコンテンツ 画像やその他のアセットの所有権を 有していることを確認してください 呼び出されるAPIや JavaScriptフレームワークについても 所有権を有しているか 使用権を 証明できる必要があります また App Storeで目立つように カスタムアイコンを提供することや 特徴的なApp名を付けることも 忘れないでください Webを絵文字で飾るだけでは不十分です フィーチャーされるような 優れたWeb Extensionは ユーザーにとって有用なものを提供しています 他のブラウザでWeb決済や寄付のコードを 使用している場合は App Store Reviewに向けて コードを無効化する必要があります App Storeでは Extensionの前払い購入は 簡単で人気があります さて アップロード状況を確認してみましょう アップロードが正常に完了しています 良かったです SafariでApp Store Connectにログインし 「マイApp」をクリックすると 作成された新しいAppレコードが 表示されます 「Open Graph Preview」をクリックすると App Store向けの追加情報を提供できます ここに Appのプレビュー画像を提供します 「プロモーション用テキスト」には このリリースの新機能を 説明する情報を入力します 「概要」には このExtensionがユーザーに提供する機能を 詳しく説明します また キーワードを入力する欄もあり 100文字以下で 正確に表現する必要があります また ユーザーがExtensionに関する サポートを受けることができる ページのURLが必要です および任意で マーケティングページの URLも提供できます その後 アップロードツールを使って Appに適したアップロードを選択します すべての項目を入力し 「審査へ提出」ボタンをクリックすると App Reviewのプロセスが開始されます このように簡単に Safari Web Extensionを構築し 提出することができます Appleでは iOSとmacOSの両方について Extensionを提出することを お勧めしています そして このセッションに関連する リソースをぜひご確認ください 皆さんからのフィードバックや ご意見をお待ちしています 「フィードバックアシスタント」で バグの報告や 機能に関する要望を送信できます ご視聴ありがとうございました