この記事は715文字で約2分で読めます
PortfolioサイトにSoundCloudのメディアプレーヤーを載っけたくなったので、調べてみました。
Table of Contents
Portfolioサイト
拙作のPortfolioサイトはGatsuby.jsを使って作っており、Netlifyにてホスティングしてます。
https://portfolio.tubone-project24.xyz/
趣味の写真を基軸に、作ったゴミプロダクトや技術範囲を書いたりしてます。
綺麗な写真やこのBlogの紹介をしてますが、SoundCloudに掲載している音楽もPortfolioサイトに載せようと思います。
React Iframe
SoundCloudはShareボタンからiframeで動くメディアプレーヤを作ることができます。
しかしながら、iframeをReact(Gatsby.js)で使うには少し工夫が必要で、その工夫がReact Iframeを使うというものです。
まず、npmやyarnでReact Iframeをインストールします。
npm install --save react-iframe次にSoundCloudのShareボタンからiframeタグを出力します。例えば私の場合こんな感じのiframeタグができます。
<iframe width="100%" height="450" scrolling="no" frameborder="no" allow="autoplay" 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>そうしたら、iframeタグをReact Iframeに置き換える形でReact IframeのPropsとして宣言する形です。
import Iframe from 'react-iframe'
<p>Listen to my musics!</p>
<Iframe width="100%" height="450" scrolling="no" frameBorder="no" allow="autoplay"
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タグをReact Iframeに置き換えるだけで作れてしまうのでチョー簡単です。
結論
ものすごく簡単にできて特に突っ込みどころのない記事になってしまいました。すみません。
Portfolioサイトはもう少し改造したいですね。
tubone24にラーメンを食べさせよう！
ぽちっとな↓
Related Posts
2019-10-23JavaScript TypeScript Google Apps Script API FLASH SlackAPI Clasp GitHub Action Jest 自動テスト Unit Test
Google Apps Script(GAS)とAPI FLASHとSlackAPIをClaspとJestとGitHub Actionで調理して定期的にWebページのスクリーンショットを撮る