📖

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

2021/06/17に公開

iOS

JavaScript

Notion

tech

やりたいこと

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

作戦

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

環境

iOS 14.6
Notion API Version: 2021-05-13

Notion API の準備

Notion API で Integration を作成して、自分のワークスペース上のデータベースに招待することで権限を与える
- 詳細: https://developers.notion.com/docs#step-2-share-a-database-with-your-integration

ショートカットの作成

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 }
          }
        }
      ]
    }
  } // ...以下省略
}