SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

iOSエンジニアたちと振り返るWWDC

【WWDC2022直前!】いくつ知っている? WWDC2021でのiOS/iPadOSの進化を振り返る


「Safari Web Extension」で自分専用のSafariに

 次は「Safari Web Extension」の紹介です。

 今まではmacOSでしか利用できなかったブラウザの拡張機能が、Safariをサポートする全てのデバイスで利用可能になりました。

 ブラウザをまたいで活用できるWebExtensions APIという技術基盤に基づいており、HTML、CSS、JavaScriptを活用した独自の体験が提供可能になります。

使い方

 Safari Web Extensionは、通常のアプリと同様にAppStoreからダウンロードできます。ダウンロード後はアプリアイコンがホーム画面やAppLibraryに表示されるようになるので、通常のアプリと同様に起動することができます。ただし、Extensionの機能をONにすることは本体アプリ内ではできないため、以下のいずれかの方法で行う形になります。

  1. Safariのツールバーから有効化する
  2. 設定アプリから有効化する

 上記の方法で機能をアクティブ化すれば、あとは本体アプリを起動していなくてもSafari上でExtensionが提供している体験を享受できるようになります。

作り方

 Safari Web Extensionの作成は通常のiOS / iPadアプリと同様にXcodeから行うことができます。また、作成方法としては大きく以下の3パターンが存在します。

最初から作る場合

 Xcode Templateで「Safari Web Extension」を選択すると、拡張機能自体とそれを内包するAppを簡単に作成できる。

他のブラウザ用ExtensionをSafariに移植する場合

 「Safari Web Extension Converter」を利用して、既存のExtensionからXcode Projectを作成できる。

macOS用のSafari Web ExtensionをiOS / iPadOS用に移植する場合

 こちらも同様に、「Safari Web Extension Converter」を利用して既存のExtensionにiOS用の対応を追加することができる。

 すでに実装済みの拡張機能がある場合は2か3の方法を採り、完全新規で作成する場合は1の方法を利用すると良いでしょう。

実装時に取り扱うファイル

 主に以下のようなものがあります。

manifest.json

  • Extensionの構造を表すJSONファイル
  • コンテンツスクリプト、バックグラウンドスクリプト、パーミッションの指定などを行う

コンテンツスクリプト

  • ユーザーが対象のWebサイトに訪れると実行される
  • 有効化するURLはmanifest.jsonで指定し、URLごとに別々のスクリプトを指定することもできる
  • ページを直接操作してカスタマイズすることができ、バックグラウンドスクリプトにメッセージを送ることも可能

バックグラウンドスクリプト

  • Extensionが有効な時、ブラウザがバックグラウンドで動作させる
  • ブラウザイベントなどをフックにして任意の処理を実行させることができる
  • iOS, iPadOSではパフォーマンス面での懸念から、non-persistent(非永続)指定をすることが必須となっており、必要なタイミングでのみ動作する

その他

  • 拡張機能選択時のポップアップ表示用ファイル
  • 新規のタブページを開いた時に表示(上書き)するHTML
  • ローカライズされた文字列定義
  • 画像ファイル

 拡張機能のコアとなる実装は各HTML、CSS、JavaScriptファイルに記述され、それらをどのサイトで有効化するのかをmanifest.jsonでマッピングするといったイメージになります。

バックグラウンドスクリプトに関するiPhone/iPadでの注意点

 iOSとiPadOSで動作するSafari Web Extensionは、macOSで可能だったバックグラウンドスクリプトの永続実行が許可されていません。これはパフォーマンス上の問題を回避するのが目的ですが、これにより常にバックグラウンドスクリプトが生きている前提で実装を行うとバグが入り込む恐れがあります。

 バックグラウンドスクリプトをnon-persistent(非永続)指定した場合、このスクリプトは必要に応じてロードされるようになります。ライフタイムはブラウザのイベントをベースに構成され、タブのクローズや各種メッセージの受信などをトリガーとしてページがロードされるべきかが判断されます。

 これらの挙動から、スクリプト内で保持する一時変数に依存したコードを書くと、アンロードされるタイミングで状態が初期化されてしまいます。そういった実装を行う場合はstorageなどの機能を利用して、データ自体は永続化するという方法を採る必要があるでしょう。

プライバシー

 Safari Web Extensionは大量のデータを閲覧行動から得ることができるため、それを許可するかどうかはユーザーが決めることができるように設計されてます。そのため、プライバシーに関わるAPIを利用する場合、拡張機能はオプトインモデルとしてユーザーが同意したサイトにのみアクセスできるようになっています。具体的には、実行タイミングで以下のようなダイアログが表示される形になります。

 プライバシーに関わるAPIとして、具体的には以下のようなものが挙げられています。

  • URLやタブのタイトルを取得する
  • Cookieの読み取りをする
  • JavaScriptやCSSのインジェクションを行う

 また、「activeTab」パーミッションというものも用意されています。これを利用するとユーザーが明示的に拡張機能を利用している場合に、システムが自動でパーミッションを付与するので、ダイアログの表示をスキップすることができます。適用範囲は現在アクティブなタブの現在開いているWebページのみに限定されるので、別のWebページに遷移などをするとパーミッションは取り消されます。

次のページ
iPadでiPhone/iPadアプリが作れる「Swift Playgrounds」

この記事は参考になりましたか?

iOSエンジニアたちと振り返るWWDC連載記事一覧

もっと読む

この記事の著者

横山 拓也(STORES 株式会社)(ヨコヤマ タクヤ)

 STORES 株式会社テクノロジー部門モバイル本部にて、STORES レジ のiOSアプリ開発に従事。 水産学部出身でエンジニアになり、主にモバイルアプリ開発を主軸として経験を積み、現在ではAndroidやFlutterなども書く。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/15891 2022/06/10 21:23

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー