3この記事は715文字で約2分で読めますPortfolioサイトにSoundCloudのメディアプレーヤーを載っけたくなったので、調べてみました。Iframe結論Portfolioサイト拙作のPortfolioサイトはGatsuby.jsを使って作っており、Netlifyにてホスティングしてます。https://portfolio.tubone-project24.xyz/趣味の写真を基軸に、作ったゴミプロダクトや技術範囲を書いたりしてます。綺麗な写真やこのBlogの紹介をしてますが、SoundCloudに掲載している音楽もPortfolioサイトに載せようと思います。IframeSoundCloudはShareボタンからiframeで動くメディアプレーヤを作ることができます。Iframeを使うというものです。Iframeをインストールします。react-iframe次にSoundCloudのShareボタンからiframeタグを出力します。私の場合こんな感じのiframeタグができます。IframeのPropsとして宣言する形です。src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/197229086&color=%23333335&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"/>できあがりです。Iframeに置き換えるだけで作れてしまうのでチョー簡単です。結論ものすごく簡単にできて特に突っ込みどころのない記事になってしまいました。Portfolioサイトはもう少し改造したいですね。