短編カフェ日記帳機能開発編4　埋め込み機能追加（お試し版）

こんにちは。今回は埋め込み機能を作りたいと思います。

埋め込み機能

noteやQitta, ZennなどのブログサービスではyoutubeやTwitterなどのSNSを記事内に埋め込むことができます。

短編カフェでは内部的に画像を投稿する機能は付けないので、外部サービスを利用した画像の表示をできるようにしたいと思うので、こういった埋め込み機能を実装したいと思います。

仕様

• 今はYoutubeだけ（のちのち拡張）

• 全部は埋め込みしない、とりあえず最初の2つだけ埋め込みできるようにする。

• テキストの中のリンクは埋め込みしない。単体でリンク化されているものだけを対象

実装

youtubeのiFrame仕様

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ  |  YouTube IFrame Player API  |  Google for Developers

IDが必要なので抜き出しのための正規表現を作ります。

const youtubeURL =  /https:\/\/(www\.youtube\.com\/watch\?v=|youtu\.be\/)(\w+)/g

function urlToYoutube(id){
    return `<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>`;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

youtube動画はレスポンシブ対応させるためCSSを追加しておきます。

    //埋め込みの部分の設定
    let embedCount = 0;
    document.querySelectorAll('.novel-p a').forEach(a=>{
        const youtubeURL =  /https:\/\/(www\.youtube\.com\/watch\?v=|youtu\.be\/)(\w+)/g
        const url = a.href;
        const found =url.match(youtubeURL);

        if(found && embedCount<1 && a.parentElement.textContent === url){
            embedCount++;
            let array = [...url.matchAll(youtubeURL)];
            a.parentElement.innerHTML += urlToYoutube(array[0][2]);
        }
    });

リンクが変換された後に該当するURLを探してきて、見つかったら変換してリンク末尾に追加するような感じです。

おためしなので、簡単な実装で済ませてます。将来的には他のSNSも埋め込めるようにしていきたいと思います。

ひとまずこれで日記機能は完了となります。