📚

iOS のショートカットから Safari で開いているページの情報を Notion に登録する

4 min read

やりたいこと

iOS の Safari で Amazon.co.jp の本のページを開いている時に、その本のタイトル、著者名、出版社などの書誌情報を取得して、Notion のデータベースに新しいページとして登録したい。

作戦

  • iOS の ショートカット アプリで「共有シート」タイプのショートカットを作成する
  • Notion への登録は Notion API を使用する

環境

  • iOS 14.6
  • Notion API Version: 2021-05-13

Notion API の準備

ショートカットの作成

  • iOS に「ショートカット」アプリをインストールする
  • 新規ショートカットを作成して、ショートカットの詳細より「共有シートに表示」を有効に設定する

利用するアクションの概要

ショートカットはあらかじめ用意された「アクション」を組み合わせて作成する。
今回利用するアクションは以下の6つ。

  • WebページでJavaScriptを実行
    • Safari の共有シートからトリガーされるアクション。開いているページのコンテクストで JavaScript を実行できる。 次のアクションに結果を渡すための関数 completion が暗黙的に宣言されている。この関数に渡した引数の値は別のアクションから参照できる
  • 変数に追加
    • 名前をつけて変数を宣言する
    • 今回は直前のアクションのテキストに名前をつけて可読性を良くするために利用する (テキストの値を参照したいだけなら「スマート変数」という仕組でも可能なので、名前をつけるのは必須ではない)
  • テキスト
    • 文字列を宣言する。リテラルな文字列で、名前をつけて参照したい場合は「変数に追加」を利用する
  • URL
    • URLを宣言する
  • URLの内容を取得
    • 「URL」からパイプして、リクエストを送信する。「取得」とあるけれど HTTP メソッドの選択ができるので GET/POST/PUT/DELETE のリクエストが可能
  • 結果を表示
    • ダイアログにテキストを表示する
    • 今回は登録結果を表示するのに利用する

作成したショートカットの内容

WebページでJavaScriptを実行 アクションで実行するコードは以下。Amazon.co.jp の本のページで実行するショートカットなので、本の情報を HTML から抜き出して、オブジェクトとして返却するコードを実装する。

const getMetaDataFromAmazon = () => {
  const titleSelector = "#title, #ebooksTitle";
  const titleElm = document.querySelectorAll(titleSelector);
  const title = titleElm.length > 0 ? titleElm[0].textContent.trim() : "";
  const authorsSelector = "#contributorLink";
  const authorsElm = document.querySelector(authorsSelector);
  const authors = authorsElm !== null ? authorsElm.textContent.trim() : "";
  const publisherElm = document
    .querySelector(".book_details-publisher")
    .parentNode.parentNode.querySelector(".rpi-attribute-value span");
  const publisher =
    publisherElm !== null ? publisherElm.textContent.trim() : "";
  return { title, authors, publisher };
};

completion(getMetaDataFromAmazon())

completion 関数に渡したデータを metaData 変数に設定している。ちなみにオブジェクトのことを日本語のショートカットアプリでは 辞書 と呼んでいる。

  • 変数 authorization databaseId を宣言
  • URL アクションで Notion API のエンドポイントを指定して、 URLの内容を取得 アクションで POST する

  • ヘッダ は上記の通り指定
  • 本文を要求 (リクエストボディのこと) は以下のような形式で組み立てる (実際には JSON を記述するのではなく GUI で項目を編集する。Notion API のリクエストボディは階層が深いので結構大変...)
    • オブジェクト (辞書) の属性を参照する方法は、変数の種類として「辞書」を指定してから、「キーの値を取得」のダイアログで属性名を入力すればよい
{
  parent: { database_id: databaseId }, // 変数 databaseId を指定する
  properties: {
    Name: {
      title: [
        {
          text: {
	    // 変数として metaData を指定。変数の種類は「辞書」を選び、
	    // 「キーの値を取得」を選択して "title" を入力する
            content: title,
            link: { url }
          }
        }
      ]
    }
  } // ...以下省略
}

最後に登録した情報を 結果を表示 アクションで表示して完了。

実行してみる

Amazon.co.jp で目当ての本のページを開き、共有シートから「Amazon to Notion」をタップ。

登録完了のダイアログが表示される。

Notion のデータベースに登録されていることを確認!

Discussion

ログインするとコメントできます