Daftar Isi
Bantu kami menerjemahkan

Dokumen ini diterjemahkan oleh komunitas. Kamu dapat ikut berkontribusi menyempurnakan terjemahan ini melalui Crowdin. Kami sangat mengapresiasi atas kerjasama yang telah kamu berikan dengan ikut berkontribusi dalam proyek ini 🙏.

ウェブサイトへの埋め込み

Misskeyサーバー上のノートやタイムラインをお持ちのウェブサイトに埋め込むことができます。 また、埋め込み先のウェブサイトの見た目に合わせて柔軟にカスタマイズすることもできます。

ここでは、埋め込めるコンテンツと埋め込み方法について説明します。

Peringatan

この機能は、Misskey v2024.9.0以降で利用可能になる機能です。

Tips

MFMやカスタム絵文字などにも対応していますが、埋め込み先ページでの表示方法によってはレイアウトが崩れる可能性があります。

ジェネレーターを使用して埋め込みコードを生成する

以下で紹介する埋め込みコードおよびそのカスタマイズは、すべてMisskey Webに内蔵されている埋め込みコードジェネレーターを使用して簡単に行うことができます。 基本的にはそちらを利用することをおすすめします。

埋め込みコードジェネレーター

単一のノートの埋め込み

埋め込み元サーバー上の、単一のノートを埋め込むことができます（リモートサーバーのノートを他のサーバーを利用して埋め込むことはできません）。コードは以下のようになります：

<iframe
    src="https://<HOST>/embed/notes/<NOTE_ID>"
    data-misskey-embed-id="v1_<RANDOM>"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"
></iframe>
<script defer src="https://<HOST>/embed.js"></script>

それぞれ、以下のように置き換えられます：

  • <HOST>: Misskeyサーバーのホスト名
  • <NOTE_ID>: 埋め込むノートのID
  • <RANDOM>: ランダムな文字列（embed.jsを使用する場合は必須。埋め込みコードが同じページに複数ある場合は被らないようにしてください）

ユーザーのノート一覧の埋め込み

ユーザーの公開ノート（パブリック・ホーム）の一覧を埋め込むことができます。コードは以下のようになります：

<iframe
    src="https://<HOST>/embed/user-timeline/<USER_ID>"
    data-misskey-embed-id="v1_<RANDOM>"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"
></iframe>
<script defer src="https://<HOST>/embed.js"></script>

それぞれ、以下のように置き換えられます：

  • <HOST>: Misskeyサーバーのホスト名
  • <USER_ID>: 埋め込むユーザーのID（@から始まるユーザー名ではありません）
  • <RANDOM>: ランダムな文字列（embed.jsを使用する場合は必須。埋め込みコードが同じページに複数ある場合は被らないようにしてください）

クリップのノート一覧の埋め込み

公開範囲がパブリックなクリップのノート一覧を埋め込むことができます。コードは以下のようになります：

<iframe
    src="https://<HOST>/embed/clips/<CLIP_ID>"
    data-misskey-embed-id="v1_<RANDOM>"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"
></iframe>
<script defer src="https://<HOST>/embed.js"></script>

それぞれ、以下のように置き換えられます：

  • <HOST>: Misskeyサーバーのホスト名
  • <CLIP_ID>: 埋め込むクリップのID
  • <RANDOM>: ランダムな文字列（embed.jsを使用する場合は必須。埋め込みコードが同じページに複数ある場合は被らないようにしてください）

ハッシュタグのノート一覧の埋め込み

特定のハッシュタグが付いたノートの一覧を埋め込むことができます。コードは以下のようになります：

<iframe
    src="https://<HOST>/embed/tags/<TAG>"
    data-misskey-embed-id="v1_<RANDOM>"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"
></iframe>
<script defer src="https://<HOST>/embed.js"></script>

それぞれ、以下のように置き換えられます：

  • <HOST>: Misskeyサーバーのホスト名
  • <TAG>: ハッシュタグ名（#を含まない）
  • <RANDOM>: ランダムな文字列（embed.jsを使用する場合は必須。埋め込みコードが同じページに複数ある場合は被らないようにしてください）

カスタマイズ用のパラメータ

URLパラメータに特定の値を指定することで、埋め込みの見た目をカスタマイズすることができます。

パラメータ名 指定できる値 説明
maxHeight 0以上の数値 埋め込みの最大高さ（px）を指定します。それ以上縦に伸びる場合は内部でスクロールできるようになります。
0 を指定すると、埋め込み要素の高さは内部の高さに合わせて自動で伸びていきます（非推奨）。
未指定の場合は 700 です。
単一のノートの埋め込みでは機能しません。
colorMode
  • light
  • dark
 カラーモードをライトまたはダークに強制。
無指定でデバイスのダークモードと同期します。
border
  • true
  • false
 外枠に枠線をつけるかどうか。無指定で true
rounded
  • true
  • false
 角丸にするかどうか。無指定で true
showHeader
  • true
  • false
 上部のヘッダーを表示するかどうか。無指定で true
単一のノートの埋め込みでは機能しません。
maxHeight=0 の使い道

maxHeight を 0 にするのは基本的におすすめしていませんが、スクロールコンテナをiframe内部ではなく埋め込むサイト側で用意しておきたい場合など、特殊な用途では有用です。以下に例を示します：

<div class="misskey-embed">
    <div class="custom-header">
        Misskeyやってます！
    </div>
    <div class="iframe-container">
        <iframe
            src="https://<HOST>/embed/user-timeline/<USER_ID>?maxHeight=0&showHeader=false&border=false&rounded=false"
            data-misskey-embed-id="v1_<RANDOM>"
            loading="lazy"
            referrerpolicy="strict-origin-when-cross-origin"
            style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"
        ></iframe>
    </div>
</div>

<style>
    .misskey-embed {
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
    }

    .custom-header {
        background-color: #f0f0f0;
        padding: 10px;
    }

    .iframe-container {
        max-height: 500px;
        overflow-y: auto;
    }
</style>
Sebelumnya
Drive
Berikutnya
Favorit