Eyes, JAPAN Blog > スプレッドシートのブックマークをNotionに移行し、サムネイルを半自動で取得する方法

スプレッドシートのブックマークをNotionに移行し、サムネイルを半自動で取得する方法

ishii

これまで、ブックマークにメモを追加したい場合はスプレッドシートで管理していたのですが、最近はChrome拡張機能「Save to Notion」を使ってNotionに直接ブックマークを保存しています。

  • OGP画像(サムネイル)が自動で取得される
  • メモやタグを自由に追加できる
  • 一覧表示が見やすく、後から検索・整理しやすい

これらの利点により管理が非常に楽になったので、これまでスプレッドシートで管理していたブックマークリストをNotionに移行しOGP画像を自動で取得するようにしました。 本記事では、その具体的な手順をご紹介します。

スプレッドシート → Notion へブックマークを移行する

Step 1:スプレッドシートをCSV形式で書き出す

まず、スプレッドシートの内容をNotionがインポートしやすい形式に整形しCSVファイルとして保存します。

  1. Notionに合わせてカラム(例:タイトル、URL、メモ)を整形
  2. 「ファイル」>「ダウンロード」>「CSV」で保存

Step 2:NotionにCSVをインポートする

  1. Notionを開き、左サイドバーの「インポート」からCSVファイルを読み込む
  2. インポートされた内容は新しいデータベースとして表示される
  3. 新規ビューに「ギャラリー」を追加してカード形式で表示する

※この段階ではまだOGP画像(サムネイル)は設定されていません。

Notionに自動でサムネイル(OGP画像)を設定する

「Save to Notion」を使った場合、保存されたURLのページ内にあるOGP画像が自動でImageブロックとして挿入され、サムネイルとして使われます。

つまり、サムネイルは(プロパティではなく)「アイテムのページのImageブロック」として追加する必要があるため、Notion API + Pythonスクリプトを用いて、以下のような形式で本文にOGP画像を追加する処理を自動化します。

タイトル URL 本文(画像付き)
サンプル記事1 https://example.com ✅ OGP画像が表示される
サンプル記事2 https://example2.com ✅ OGP画像が表示される

 

💡 環境:M1 Mac OS 13 ターミナルを使います。

1. ローカルに必要なツールをインストール

以下のライブラリが必要です。Pythonが未インストールの方は事前に導入してください。

pipを使うので公式サイトの手順に従ってインストールする → pip documentation

抜粋 クイックインストール

# Pythonのインストール(Homebrew経由)
brew install python3

# pipのインストール
curl <https://bootstrap.pypa.io/get-pip.py> -o get-pip.py
python3 get-pip.py

# 必要なライブラリのインストール
pip install requests notion-client beautifulsoup4

エラーでパスが通っていない場合は、.bash_profile に以下のように追記してください。

# エラー文
# WARNING: The scripts pip, pip3 and pip3.8 are installed in '/Library/Frameworks/Python.framework/Versions/XXX’

export PATH="$PATH: [ここにエラー文のパスを書く] "
# 例
# export PATH="$PATH:/Library/Frameworks/Python.framework/Versions/3.13/bin”

pipで以下のライブラリをインストールしてください。

pip install requests notion-client beautifulsoup4

※notion-client … 公式 Notion API の Python クライアント ※Beautiful Soup4 … PythonでWebスクレイピングに使う

2. Notion APIの準備

以下の公式ドキュメントを参考にせってしてください:Internal integration auth flow set-up

抜粋:

Notion APIの統合を作成

  1. Notionの統合ページから、「新しいインテグレーション」を作成
  2. 「シークレットトークン」 をコピー(後で使います)

NotionデータベースとAPIを連携

  1. Notionのデータベースを開く
  2. 右上の「…」ボタン → 「接続」 から先ほど作成したインテグレーションを選んでAPIをデータベースに共有(編集権限を付与)する。

📝 Pythonスクリプトの実行

  • 自分のローカル環境にnotion_ogp.py というファイルを作成し、以下のスクリプトを保存します。
  • Notion APIのトークンとデータベースIDを設定
    • NOTION_API_KEYNotionのシークレットトークン を入れる
    • DATABASE_IDNotionデータベースのID を入れる(URLのhttps://www.notion.so/{DATABASE_ID}?v=... の部分)
  • ターミナルでスクリプトを実行
    cd [notion_ogp.pyを保存したフォルダに移動]
    python3 notion_ogp.py
    
import requests
from notion_client import Client
from bs4 import BeautifulSoup

NOTION_API_KEY = "your_notion_api_key"
DATABASE_ID = "your_database_id"

notion = Client(auth=NOTION_API_KEY)

def get_ogp_image(url):
    try:
        headers = {"User-Agent": "Mozilla/5.0"}
        response = requests.get(url, headers=headers, timeout=10)
        soup = BeautifulSoup(response.text, "html.parser")

        og_image = soup.find("meta", property="og:image")
        if og_image and og_image["content"]:
            image_url = og_image["content"]

            # URLが相対パスの場合はドメインを追加
            if image_url.startswith("/"):
                from urllib.parse import urljoin
                image_url = urljoin(url, image_url)

            # http → https に変更
            if image_url.startswith("http://"):
                image_url = image_url.replace("http://", "https://")

            print(f"取得したOGP画像URL: {image_url}")
            return image_url
    except Exception as e:
        print(f"エラー: {e}")
    return None

def get_notion_urls():
    response = notion.databases.query(database_id=DATABASE_ID)
    return response["results"]

def add_image_to_notion_page(page_id, image_url):
    try:
        notion.blocks.children.append(
            block_id=page_id,
            children=[
                {
                    "object": "block",
                    "type": "image",
                    "image": {
                        "type": "external",
                        "external": {"url": image_url}
                    }
                }
            ]
        )
        print(f"✅ 画像追加成功: {image_url}")
    except Exception as e:
        print(f"❌ Notionエラー: {e}")

def main():
    pages = get_notion_urls()

    for page in pages:
        props = page["properties"]
        url = props["URL"]["url"]
        page_id = page["id"]

        if url:
            print(f"URL取得中: {url}")
            ogp_image = get_ogp_image(url)

            if ogp_image:
                add_image_to_notion_page(page_id, ogp_image)
            else:
                print("❌ OGP画像が見つかりませんでした。")

if __name__ == "__main__":
    main()

補足

  • block_id=page_id は、ページの本文に新しいブロック(画像)を追加するためのID です。ブロックの子を追加:https://developers.notion.com/reference/patch-block-children
  • 同じページに何度も実行すると、画像がどんどん追加されるので注意。
  • ある程度大量に取得すると一旦取得がストップすることがあります。そしたら既存の「Save to Notion」のブックマークリストに取得された分を移動させてください。 後述「3. 既存のnotionスペースに結合」を参照。

 

トラブルシューティング

notion_client.errors.APIResponseError: Could not find database with ID: ~ your integration.

NotionのAPIインテグレーションがデータベースにアクセスできないために発生します。以下のポイントをチェックしてみてください。

1. API統合がデータベースと共有されているか確認

Notionのデータベースの「接続」に作成したAPIインテグレーションが表示されているか確認

2. データベースIDが正しいか確認

データベースIDが間違っている可能性があります。https://www.notion.so/{database_id}?v=...{database_id} の部分がデータベースIDです。DATABASE_ID にそのIDを設定してください。

3. Notion APIトークンが正しいか確認

APIキーが間違っていると、データベースにアクセスできません。

  1. NOTION_API_KEY = "your_notion_api_key" に正しく設定

一部のOGP画像が取得できない場合

  • そもそもサイトにOGP画像が設定されていない場合があります。
  • サイトによってはOGP画像のURLが直接アクセス不可能な場合があります。(スクリプトでは画像URLが直接アクセス可能か確認しています。)
  • 公式サイトによると、Notion APIが受け付けるのはHTTPSの完全なURLだけです。(参考:概要 – (日本語版)Notion API – Public Beta)以下のような場合、エラーになります。
    /images/ogp.jpg ❌ NG(相対パス)
    http://example.com/images/ogp.jpg ❌ NG(HTTP)
    https://example.com/images/ogp.jpg  ✅ OK
    一応スクリプト内で相対パスなら urljoin() で完全なURLにする、http:// → https:// に変換するよう対策しています。

3. 既存のnotionスペースに結合

  1. データの全選択の場合はリスト左上をチェック。一部の場合はドラッグして選択。ポップアップ「…」が出るので「別ページへ移動」を選択し、既存のnotionスペースと結合する。
  2. 全て移行できたらスプレッドシートをインポートしたページは必要ないので削除する。

※スプレッドシートにプルダウン(セレクト)がある場合、後述の移動後にNotionにプロパティが”新規追加”されてしまう。Notionの既存のプロパティと結合するにはセレクトを一度「テキスト」に変換しておく。

  1. 新規追加されてしまった列のHeaderを選択し、プロパティを編集>種類:テキスト(コピペ先の列も同じ様に変更しておく)
  2. テキストの列を選択し、結合したい列にコピペする
  3. プロパティを選択>種類>セレクト に戻す

おわりに

スプレッドシートからNotionへのブックマーク移行は、一見手間のかかる作業に見えますが、仕組み化してしまえば非常に効率的です。自動でサムネイルが取得されることで、視認性もアップし、管理もよりしやすくなります。

もしまだスプレッドシートでブックマークを管理している方がいれば、ぜひこの方法をお試しください。

Comments are closed.