Notionに便利なウィジェットを配置する [Apption]

commits4 min read読了の目安(約4400字

はじめに

「Notion」というメモアプリが人気になってきています。先日には来年に公式 API の公開や、UI が日本語に対応することが公式からアナウンスされ、更に盛り上がりを見せることが期待されています。

https://www.notion.so/product

そんな盛り上がりを見せている Notion ですが、Notion にはテキストドキュメントだけでなく、Web ページ・動画を埋め込める機能があります。その埋め込み機能を活用して便利なウィジェットを追加できる方法をご紹介します。最近では、Notion の機能を拡張するサービスも増えてきたため、どんどん活用して便利に活用していきましょう。

ウィジェットの仕組み

Notion にウィジェットを埋め込むために外部サービスを使う必要があります。今回紹介するのはApption.coというサービスです。このサービスを使うことで、自分の作成したページにウィジェットを埋め込むためのコードを生成できます。ウィジェットが動作する仕組みとしては、外部サービスで生成された HTML 埋め込みコードを、 Notion で埋め込める形に変換するものとなります。チュートリアルが丁寧に作られているため簡単にウィジェットを作成できるのが便利です。

ウィジェットを埋め込むと Notion のページから天気予報や時計を表示させることができます。
実際に、現在時刻(JST)と東京の週間天気予報を表示するとこのようになります。
ウィジットを追加したダッシュボードの画像
アニメーションに対応しているため動きます
アニメーションに対応しているウィジェットはウィジェット内でアニメーションさせることができます。上の例では、時刻の秒表記と天気アイコンがアニメーションしています。ページに動きが出ると一気におしゃれになりますね。

Apption へのアカウント登録

ブラウザからApptionへアクセスします。

このページが表示されます。このページには Apption を使って埋め込めるウィジェットが並んでいます。ざっと見ただけでも天気予報や時計など様々なウィジェットがあり、今後増えていくと思われます。まず右上の「✋ Sign in ✋」からアカウントを登録します。

アカウント登録は任意のようです。アカウント登録をしなくても使うことができますが、アカウント登録することウィジェットの管理機能が使えるようになるのでウィジェットをどんどん使いたい方はアカウントを登録するのがおすすめです。

アカウントの登録はメールアドレスとパスワードのみ、簡単に作成できます。アカウント登録後にサインインすることでトップページ右上に自分の作成したアカウント名が表示されていればアカウントの登録が完了となります。

天気予報ウィジェットを埋め込む

ウィジェットの中から登録したいウィジェットを選択して指示に従うだけで簡単に Notion へウィジェットを追加できます。サンプルとして一週間の天気予報が見れるウィジェットを追加してみます。まずトップページから天気ウィジェットを選択します。

天気ウィジェットの画像
こちらが天気ウィジェットになります。

天気ウィジェットを選択すると簡単なチュートリアルが表示されます。
ウィジェットには簡単なサンプルコードが用意されているので / embed を使いリンクをペーストするだけで自分の作成したページに埋め込んで動作を確認できるのが便利です。
使い方説明の画像
Try in your page!の中にあるコードを Notion に埋め込んでみてください。

自動的にウィジェットに変換されてサンプルのウィジェットが埋め込まれます。
ウィジットをNotionに埋め込む様子

コードを埋め込むだけで簡単にニューヨークの天気ウィジェットが埋め込まれました。
この天気ウィジェットは自分の住む地域に合わせてカスタマイズできます。

天気ウィジェットをカスタマイズ

天気ウィジェットをカスタマイズするには、こちらのページにアクセスします。カスタマイズページにはウィジェットチュートリアル画面の visit Website からも遷移できます。

カスタマイズページではプレビューを見ながら自分好みにカスタマイズしていきます。
例として、東京の一週間の天気予報ウィジェットを作成してみます。
select Locationに取得したい天気予報の地域を指定します。アルファベットで取得したい都市名を入力すると候補が表示されるので、候補の中から選ぶことで地点選択ができます。
東京の天気を表した画像
ラベルの表示名やアイコン、温度の単位などはタブから自由にカスタマイズできます。カスタマイズができたら下にある GET CODE から HTML埋め込みコード を取得します。

<a class="weatherwidget-io" href="https://forecast7.com/en/35d71139d73/tokyo/" data-label_1="TOKYO" data-label_2="WEATHER" data-icons="Climacons Animated" data-theme="random_grey" >TOKYO WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>

上でカスタマイズしたウィジェットの埋め込みコードになります。
しかし、このコードは HTML 上に埋め込むためのものなので、この形式では直接 Notion に埋め込んで表示はできません。

Notion へカスタマイズしたウィジェットを埋め込む

埋め込みを行うために HTML のコードを Notion で表示できる形式に変換する必要があります。 Apption が提供するDIY Embed URLで Notion に埋め込み表示できる形式へと変換できます。
埋め込みURlへ変換するページの画像
フォームの中に先程生成した埋め込みコードをペーストし、Generate URL をクリックします。
変換結果の画像
Notion 埋め込み用コードが生成されました。このコードを Notion で作成したページに埋め込むことで Notion 上でウィジェットとして表示されるようになります。Notion の設定に合わせて light dark を切り替えることもできます。

生成されたコードを Notion で作成したページに埋め込んでいきます。
カスタマイズした天気ウィジットを埋め込む様子
埋め込んだあとは、幅や高さを変えることでレスポンシブにスタイルを変えることができるため、Notion 内で自由に配置できます。

上記したアカウントの登録で作成したウィジェットを保存できるため、一度作成したウィジェットは Apption のマイページから埋め込みコードを取得できるようになります。この手順と同じように他のウィジェットも登録して表示できます。他にも使える機能が多くあるため、試してみてください。
個人的に、天気予報と現在時刻表示がおすすめです。

さいごに

ここまで読んでいただきありがとうございます。Apption を使うことで HTML 埋め込みコードを Notion でも表示できる形に変換できるのがとても便利だと感じました。Apption を使うことで、Notion でできる表現が増え、かゆいところに手が届くように Notion の可能性が広がるように感じます。公式からウィジェットは提供されていませんが外部サービスを使うことで簡単に実装できるので、各自、使いやすいページを作るためにどんどん活用してみてください。

Notion はこれからスタンダードになるオールインワンツールだと感じているため、この記事で Notion というサービスを初めて知った方も、ぜひこの機会に Notion を試してみてほしいです。

長くなりましたが最後まで読んでいただきありがとうございました。

参考

Notion ドキュメントに埋め込むだけ!ミニアプリで機能強化できる「Apption」を使ってみた! - paiza 開発日誌