Notion AIでQRコードを生成する

概要

多くのNotionページへのリンクをQRコード化したい場合、Web上のサービスを用いて1件ずつQRコードを作成するのは手間がかかります。

そこで、こちらの記事で紹介されている方法を参考に、Notion AIでそのページのQRコードを自動的に生成してみました。

生成ステップ

1. NotionページのIDを関数で抜き出す
2. 関数でページURLを生成する
3. 生成したページURLを使って、Notion AIに
   1. Notionページ上でQRコードを生成させる
   2. ブラウザ上でQRコードを表示するURLへのハイパーリンクを生成させる

手順

例として、紙の書籍をNotionデータベースで管理しており、1冊ごとにQRコードを印刷して書籍に貼り付けている運用を想定して解説していきます。

新しい書籍をデータベースに登録したら、以下のステップで自動的にQRコードが生成されます。

Step1：NotionページのIDを関数で抜き出す

関数プロパティを作成し、 id プロパティを呼び出します。関数編集画面の左側に並ぶ項目の、一番下にあります。他に何も入力する必要はないので、この状態で 完了 ボタンを押します。

これで、32桁のページIDが抜き出されました。これはStep2のURL生成で使われます。

Step2：関数でページURLを生成する

ページURL作成の関数を組む前に、まずはURLの共通の部分を確認します。QRコードからアクセスさせたいページの種別によって、いずれかのURLをベースに関数を作成します。

ページ右上の 共有 ボタンから、以下の方法でURLをコピーし、任意の場所に一時的に貼り付けましょう。

コピーしたURLは、それぞれ以下のような構成になっています。

このうち、URLを生成する関数で使用するのは、それぞれ以下の部分のみです。これらの末尾にStep1で取得したページIDをつなげて、URLにします。

たとえば、弊社の社内ページ(非公開)へのURLを生成するとしたら、このようになります。

まずは関数に使用するURLの部分を二重引用符で囲んで記載し、プラスマークでそこにページIDを連結します。この例では prop("ID") が、Step1で関数プロパティで生成したIDです。

これで、このページへのURLが生成できました。

Step3-a：AIにNotionページ上でQRコードを生成させる

それでは、先ほどの記事を参考にQRコードを作成してみます。ページの任意の場所に /custom でカスタムAIブロックを生成し、以下のプロンプトを入力します。

このプロンプトの #文字列 という箇所には、Step2で作成したURLを生成するための関数プロパティの名前を使って指示を書きます。

以下の#文字列のQRコード画像を表示してください。
#制約条件に必ず従うこと
#制約条件
*#サイズ通りに出力すること
*Markdown形式を組み立てること。Google Chart APIを使用してください。
https://chart.apis.google.com/chart?cht=qr&chs={サイズ}x{サイズ}&chl={文字列}
*コードではなくMarkdown形式で出力すること
*必ずプレビュー表示をすること
#文字列
URL文字列プロパティの内容
#サイズ
300ピクセル×300ピクセル

するとこのように、Notionページ上でQRコードが表示されます。

Step3-b：AIにブラウザ上でQRコードを表示するURLへのハイパーリンクを生成させる

ページ上でQRコードが必要なく、むしろ邪魔になる場合は、任意の文字列に対するハイパーリンクとしても生成できます。

ページ内でこのように作成することもできますし…

AI自動生成でプロパティとして持たせることも可能です。

プロンプトはこのような記述になります。

まず、以下の条件に従って、QRコードを生成するURLを作成してください。
URLができたら、それを「QRコード」というプレーンテキストにハイパーリンクとして設定してください。
#制約条件に必ず従うこと
#制約条件
Google Chart APIを使用してください。
https://chart.apis.google.com/chart?cht=qr&chs={サイズ}x{サイズ}&chl={文字列}
#文字列
URL文字列プロパティの内容

Notion AIが気を利かせて不要な文字列まで出力する場合、制約条件のセクションにこのような注意書きを追記するのがお勧めです。

*アウトプットとして生成するのは、「QRコード」というプレーンテキストにハイパーリンクとして設定したものだけにしてください。それ以外の情報は一切要りません。ハイパーリンクの前に項目名なども書く必要はありません。

生成されたハイパーリンクをクリックすると、Step3-aでNotionページ上に出力させたのと同じサイズのQRコードがブラウザ上で表示されます。

QRコードを印刷して使う場合などは、Notionページ上に生成するよりもブラウザで開くハイパーリンクにした方が、印刷までのステップが短くて済むのでお勧めです。

画像としてダウンロードして使う場合であれば、Notionページ上に生成した方が便利です。