前回の記事でSpotifyプレイヤーを使用していたと思います

その埋め込み方について手順をまとめていきます

現状としてはReactを使ってブログ記事のコンテンツを表示しているのですが、それにカスタムコンポーネントを埋め込む形ですね

条件分岐を入れてあげてカスタムコンポーネントがCMSから渡ってきている場合には表示する感じです

Spotifyプレイヤーを表示するためのReactカスタムコンポーネントを作成し、Wisp CMSに登録する手順を以下にまとめました。

1. Spotifyプレイヤーコンポーネントの作成

まず、Spotifyプレイヤーを表示するReactコンポーネントを作成します。

コード例：

"use client";

import React from 'react';

interface SpotifyPlayerProps {
  playlistId: string;
  width?: string | number;
  height?: string | number;
}

const SpotifyPlayer: React.FC<SpotifyPlayerProps> = ({ 
  playlistId, 
  width = "100%", 
  height = "352" 
}) => {
  // プレイリストIDを使用してSpotify埋め込みURLを生成
  const embedUrl = `https://open.spotify.com/embed/playlist/${playlistId}?utm_source=generator`;
  
  return (
    <div className="spotify-player-wrapper my-8" style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}>
      <iframe
        style={{ borderRadius: "12px", width: '100%' }}
        src={embedUrl}
        width={width}
        height={height}
        frameBorder="0"
        allowFullScreen={true}
        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
        loading="lazy"
        title="Spotify Player"
      />
    </div>
  );
};

export default SpotifyPlayer;

このコンポーネントは、playlistId（プレイリストのID）を受け取って、Spotifyの埋め込みURLを生成し、それをiframeで表示します。

2. Wisp CMSにカスタムコンポーネントを登録

次に、Wisp CMSでカスタムコンポーネントを登録し、Spotifyプレイヤーを表示できるようにします。

ステップ1: Wisp CMSで「React Custom Component」を選択

Wisp CMSのエディターで、カスタムコンポーネントを追加する場所を開きます。
コンポーネントの設定画面で、「React Custom Component」を選択します。

ステップ2: コンポーネント名とプロパティを設定

コンポーネント名をSpotifyPlayerに設定します。
Component Propsに以下のようなJSONを入力します：

{
  "playlistId": "5AcUNxO33NcwJinpV2Udvm",
  "width": "100%",
  "height": "352"
}

ここで、playlistIdには表示したいSpotifyプレイリストのIDを指定します。widthやheightを設定して、プレイヤーの表示サイズを調整します。

これでSpotifyPlayerの大枠は完成しています

あとはこれを既存のコンテンツ内で条件分岐をして表示させるようにしてあげるだけです

3. コンテンツにSpotifyプレイヤーを追加

Wisp CMSエディターで、次のようにしてSpotifyプレイヤーを投稿に追加できます：

エディター内でプレイヤーを挿入したい場所に、先ほど作成したカスタムコンポーネント（SpotifyPlayer）を追加します。
ここでコンポーネントがエディター内に表示されるようになります。

ですがその前にサニタイズの設定が必要です。

4. サニタイズとは

HTMLコンテンツを外部から受け取る場合、XSS（クロスサイトスクリプティング）攻撃のリスクを防ぐために、コンテンツをサニタイズ（無害化）することが重要です。

sanitize-htmlライブラリを使って、信頼できるHTMLタグと属性のみを許可することで、悪意のあるコードが実行されるのを防ぎます。

サンプルコード

import sanitize, { defaults } from "sanitize-html";

// サニタイズ設定
const sanitizedContent = sanitize(content, {
  allowedTags: [
    "b", "br", "i", "em", "strong", "a", "img", "h1", "h2", "h3", "code",
    "pre", "p", "li", "ul", "ol", "blockquote", // 基本的なタグ
    // テーブル関連
    "td", "th", "table", "tr", "tbody", "thead", "tfoot", "small", "div", "iframe",
  ],
  allowedAttributes: {
    ...defaults.allowedAttributes,
    "*": ["style"], // すべてのタグに対してstyle属性を許可
    iframe: ["src", "allowfullscreen", "style"], // iframeタグの属性を制限
    div: [
      "data-name", "data-wisp-react-component", "data-version", "data-props", // カスタム属性
    ],
    // Spotifyプレイヤー用カスタム属性
    SpotifyPlayer: ["playlistId", "width", "height"], // Spotifyコンポーネントの属性
  },
  allowedIframeHostnames: [
    "www.youtube.com", 
    "www.youtube-nocookie.com", 
    "open.spotify.com" // Spotifyの埋め込みプレイヤーを許可
  ],
});

5. CMSでプレイヤーを表示

エディターで設定したコンポーネントが公開されると、指定したプレイリストIDに基づいてSpotifyプレイヤーが表示されます。このとき、HTMLはサニタイズされず、直接埋め込まれるため、カスタムコンポーネントとして安全に使用できます。

6.おわりに

いかがでしょうか？

これぐらい職場の環境もモダンだといいだけどな～と思ったり

微調整やコードの方針を決めたりはするのですが、大枠はAI君がよしなにしてくれてます

いい時代だなー

Powered by Synscribe