埋め込み機能

Camille Ricketts
Aug 8 '19 · 1 min read · 671 views
Notionには、Figmaや、Invisionを例に取るようなモックアップであったり、Googleドキュメントやスプレッドシート、グーグルマップ、PDF、フォーム、動画、音声など様々な埋め込み機能があります。

サンプルとユースケース

Sportifyを埋め込むと再生可能な状態で下記のように表示されます。
グーグルマップの例:
それ以外のWebページやPDFの埋め込みは、インラインでスクロール可能なコンテンツとして表示されます。
https://s3.us-west-2.amazonaws.com/secure.notion-static.com/1288fa7f-5aca-4b01-9f83-be0db99f5a86/The-Growth-Handbook-by-Intercom.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45NZIDBECO%2F20190707%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20190707T203441Z&X-Amz-Expires=86400&X-Amz-Security-Token=AgoJb3JpZ2luX2VjEPT%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJGMEQCIGHJSdUGKZw1JNVchbBR6lO9v29jyOXmst4cjH5yJ%2F4AAiAzHEcT9h3K0SMfHa%2FTmOT%2FvAOVddUAqylU%2BFH%2Bu80xaSraAwhNEAAaDDI3NDU2NzE0OTM3MCIMxTET1VB21pyuIOxfKrcDTFXutxzuOrfs5E%2FiZBeKsvlZHRihnV8Of%2BFBYLKtQ%2Fyc7BKnT3v%2FSSt8gHjvo03cgEbm9glKpsg%2FMyqh4p%2BPSX%2FI9zqPC6XKGHyrI%2Fu%2BTKyqC0ipvWT%2B%2FdPGGFi6C1pp5bNcBm6sNk7ZGzbYFls9AOVTgWECq8Gs2abphUXwyLBqxl5t7YCr6nbtyJpEaZta7NAeFB2KIvXFiprLtyCHhRU%2BaMTHvlVugWCUZAU96YZRgZbdydGog7f6nJZjHDLjdq7xqlYCqCYanwntiH7ByniPunQJZLs47Zr1eXR0dFJwb3yFqtipaY%2F%2FaiFW8Q30oP89h%2FLIck3%2BqraQC%2FnOPZBt0nocG68l0qAa0zBL5t5hA7VcnkghyeZan3BRJoM3LUertw9qjolO1S5aeLoDvNYnM7biw9CijlnSSM%2F3NoM8%2BKzb1hZ5j9Rv0iLScejl7b%2FB4lE8ldT9MpWxKsk3wOL%2FvRsItUZVmFZp1URw1OKm7a7JF%2FugZLs6I6VI9Drw50odPIi%2BpnOt%2Fe%2FLb5VbLCN0ZdZfrGkBy6kOj%2B6S4Ss%2FXdFvZmGicE%2FXPnb5KGhV9ZfDG5NtWjCjj4npBTq1AaH2KLcZ5ZMlyBEoEbmmAkFUW3xicUSu6VgBxamxO2Q9RlSDexb%2BZhzZVlGtQ4tZuE9k3q%2BZ%2BJm9wYM7K2Dq72MVhB2Wzcyex8lB0UKwUWKWOjbIN340De0UP20IYSUx4dvkL7Lyt%2BDEAtRkrJ44ViiV2tE20nBzQVtbAWHH8mWdu9bL2RczyAZIm0zmKtV5rJPH6BQHxUTGHujnnWv32ZMDfCNwz0PfQajQ1e6Y%2Bs7G2ZyD5wM%3D&X-Amz-Signature=cf5118f7e11c099f8275a17be2c45edf00fe5918925d183431868ebd417a67d5&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22The-Growth-Handbook-by-Intercom.pdf%22
Figma や InVision などのプロトタイピングツールを利用するとNotion上でチームやクライアントからのフィードバックを得ることが出来ます。 以下に Figma の埋め込みイメージを示します。

埋め込みのタイプ

埋め込みコンテンツであればほぼすべて対応していますが、下記に示すコンテンツはNotion用にカスタマイズされています。
  • Audio
  • CodePen
  • Figma
  • File
  • Framer
  • GitHub
  • Google Drive
  • Google Maps
  • Images
  • InVision
  • Loom
  • PDF
  • Tweet
  • Typeform
  • Video
いずれのコンテンツも / メニューから呼び出すか、新しい行にカーソルを合わせたときに表示される左の +から呼び出すことが可能です。例えば、 /tweet と入力し、ツイートを埋め込んだり、 /figmaと入力してFigmaからデザインを埋め込むことが出来ます。

埋め込みの追加

  • 新しい行にカーソルを合わせた時に表示される左の + をクリックし、 Embedを選択します。
  • /embed/から対象の埋め込みのタイプ(/figma/maps)を選択し、 Enterを押下します。
  • 表示されたメニューにURLを貼り付けるか、リンクを埋め込むことで対応可能です。
  • /embedを利用して、画像や、音声動画、PDFなどをアップロードして表示することが可能です。 Uploadを選択して、対象のファイルを選択することでアップロード可能です。 /pdfでも呼び出し可能です。
👉
備考: いくつかのWebサイトは埋め込み表示を禁止している場合があります。 禁止しているサイトでは Failed to Load というエラーが表示されます。

Google Driveの埋め込み

Notion内からGoogleドライブを検索し、アプリから移動すること無く埋め込みが実施可能です。
  • 新しい行にカーソルを合わせた時に表示される左の + をクリックし、 Google Driveを選択します。
  • /drive と入力して Enterを実施しても同様です。
  • ポップアップメニューが表示されるので、埋め込みを実施したいコンテンツのURLを貼り付けるか、 Browse Google Drive をクリックして、ファイルの検索が実施可能です。
  • Google アカウント連携は複数接続させることができ、それぞれのアカウントから埋め込みが実施可能です。
👉
備考: 上記の機能のリリース前に埋め込んだGoogle ドライブのファイルは、以前と同じ形式のまま表示されます。 Google Drive のファイルを以前のよな iframe形式で埋め込みたい場合は /embedから呼び出してください。

URLを埋め込みに変更する

Notionは貼り付けたURLから自動で埋め込みのタイプを認識します。コピーした画像を貼り付けることも可能です。
  • 貼り付けたい埋め込みURLをNotionへ貼り付けます。
  • 表示されたポップアップから、 Embedを選択します。

埋め込みのサイズ変更

埋め込みコンテンツはサイズを自由に変更可能です。
  • 埋め込みコンテンツ上にマウスをホバーし、側面に表示される黒いバーをドラッグすることでサイズ変更が可能です。

埋め込みの配置

  • 埋め込みはドラッグアンドドロップでページ内の好きな位置に配置する事が可能です。ブロックにカーソルを合わせ、左側に表示される ⋮⋮を使用してドラッグを実施します。
  • 埋め込みは横並びに配置するとサイズや形状は自動で調整されます。

埋め込み元へ遷移

埋め込み元への遷移も可能です。
  • 埋め込みにマウスをホバーさせ、 Originalをクリックします。ブラウザで埋め込み元のリンクが開かれます。
  • 埋め込みにカーソルを合わせ、左側の ⋮⋮をクリックするか、右上の ••• でも利用可能です。
  • View Originalをクリックしても同様にブラウザで開かれます。

説明分(キャプション)の追加

キャプションを使用して、埋め込みに説明を追加することも可能です。
  • 埋め込みにマウスをホバーさせ、 Captionをクリックします。
  • 埋め込みにカーソルを合わせ、左側の ⋮⋮をクリックするか、右上の ••• でも利用可能です。
  • Caption を選択し、必要なテキストを入力します。
  • キャプションでは、太字車体の拡張フォーマットを利用可能です。

コメントを追加する

他のコンテンツブロックと同様に、埋め込みコンテンツにコメントすることができます。
  • 埋め込みコンテンツにカーソルを合わせ、 コメントアイコンをクリックします
  • もしくは左部の⋮⋮ 、または右上の ••• をクリックします
  • Commentを選択し、コメントを残します
  • コメントは埋め込みコンテンツを選択したのちに cmd/ctrl + m.のショートカットキーを押すことでも呼び出せます
🎒
Tip: コメント内で @ 付きのメンションをすることでワークスペースのコラボレータにコメントを通知することもできます。

埋め込みコンテンツの置き換え

埋め込みコンテンツを置き換えることができます。

オンラインコンテンツの置き換え

  • 埋め込みコンテンツにカーソルを合わせ、左部の ⋮⋮ 、または右上の••• をクリックします
  • Replace を選択します
  • プロンプトが表示されたらEmbed Link を選択します
  • 新しいURLを貼り付けます
👉
Note: もし参照先のコンテンツが更新された場合はNotionでも同様に更新されます。例えばプレイリストに曲が新しく追加された場合にプレイリストが更新されるように。

アップロードされたファイルの置き換え

  • 埋め込みコンテンツにカーソルを合わせ、ブロックの左の ⋮⋮ または右上の••• をクリックします
  • Replace を選択します
  • プロンプトが表示されたら Upload を選択します
  • 新しいファイルを選択してアップロードします

埋め込みの削除

  • 埋め込みブロック上にマウスをホバーさせ、左部の⋮⋮ 、または右上部の••• をクリックします。
  • Deleteをクリック。

よくある質問

  • Googleドキュメント/シートを埋め込もうとしましたが、エラーメッセージが表示されます
    デバイスにログインしているすべてのGoogleアカウントをログアウトしてから、 Continue with Googleを使用してNotionアカウントに関連づけられているメールアドレスを使用してNotionに再度ログインします。その後ファイル埋め込みを実施します。
    まだ、解決しない場合は、こちらからメッセージをお送りください。
  • Googleドキュメント/シートを埋め込もうとしましたが、空のグレーボックスしか表示されません
    Mac app:
    • Notionのトップバーのメニューから、 Clear Cacheを選択
    • Continue with Googleを実施して再度ログインします。
    Windows app:
    • すべてのGoogleアカウントからログアウトします。
    • Notion上部のタブの Viewを選択し、 Toggle Developper Toolsをクリックします。
    • 画面上部のApplicationタブから、左側の Clear storageをクリックし、 Clear site dataを実行します。
    • 再度Googleアカウントでログインし、埋め込みを再実行します。
    まだ、解決しない場合は、こちらからメッセージをお送りください。
  • 目的地までの道順をGoogleマップに埋め込むにはどうすればいいですか?
    1. Googleマップで目的の旅行ルートを検索し、次にウィンドウの左上にある メニューをクリックします。Share or embed map を選択し、Link to shareをコピーします。
    2. Notionへもどり、 /mapsを利用して埋め込みブロックを追加し、コピーしたURLをフィールドに貼り付けて、 Enterを押下すると、下記のものが表示されます。
  • Notionで埋め込み可能なサービスの一覧はありますか?
    500以上のサービスが埋め込み可能で、一覧はここにあります。

関連するページ

👉
原文はこちら
解決しなかったら? 右下の ? をクリックして、メッセージを送ってください! Eメールでも受け付けています。 team@makenotion.com ✌️

💡
Notionを導入/更に活用したい企業様向けにサポートサービスを開始しました。 詳細は こちら よりご確認ください。
本コンテンツは Northsand, Inc.の監修のもと翻訳しております。 note | Twitter | Facebook 記載事項の追記/修正の依頼は こちら より
Updating...

Share on