APIキーを使用してiOSのショートカット経由からwebページを登録できるようにする

概要

前回の記事で必要な API を用意したので、今回は実際の機能を実装。ショートカット経由でワンタップ保存を実現する。
www.wheatandcat.me

PR

github.com

自作した Chrome 拡張

chromewebstore.google.com

モチベーション

前回の記事を参照。
www.wheatandcat.me

設計

前回作成した API を前提に、以下を実装。

• API Key 登録 UI の追加
• iOS のショートカットから API Key 経由でアイテム登録
  詳細なショートカット解説はこちら。
  www.wheatandcat.me

実装

UI を作成

Chrome 拡張のオプション画面に API Key の登録 と 一覧表示 を追加（コードは PR を参照）。

■ API Key 登録

■ API Key 一覧表示

アイテム登録 API は既にデプロイ済み。token に登録済みの API Key を指定すれば登録可能。

curl --location 'https://axctfbvzkacuxfhfsjic.supabase.co/functions/v1/create-item?url=https%3A%2F%2Fgithub.com%2Fwheatandcat%2FMarkyLinky&token=***********************************'

iOS のショートカットを作成

前回の記事で作成したショートカットを流用し、名称を MarkyLinkyにアイテム追加 に変更。
www.wheatandcat.me

アクションの URL の内容を取得 / URL エンコード に、上記 アイテム登録 API を設定。共有シートから受け取った URL を url パラメータに、拡張の API Key を token に差し込む。

実演

例として iPhone の TechFeed で記事閲覧中に保存したいケース。

記事を開く。

共有ボタン → MarkyLinkyにアイテム追加 をタッチ。

Chrome 拡張側にもアイテムが追加される。

まとめ

• 共有シート → ショートカット → API Key経由で登録 という流れで、iPhone からもワンタップ保存を実現
• iOS の共有シートを直接扱うには通常アプリ拡張が必要だが、コストが高いケースではショートカット連携が有効