tubone

tubone

Boyaki makes a new world


 Recent posts  6 / 79

JulAugSepOctNovGitHub ProfileにREADMEをつけよう!Arctic Code Vault Contributorになったらしい4連休を使ってGASとLINE BOTとFirebaseを使ってラーメン食べたいBOTを作ってみたGitHub JavaScript Action で GitHub ReleaseのUpdate Releaseを作ってみた。Nim用のTwitterSDK作るついでに仕事中TwitterができるCLIを作った面倒なSSH Configと鍵管理はssh-config-jsonに任せようMonWedFri
面倒なSSH Configと鍵管理はssh-config-jsonに任せようNim用のTwitterSDK作るついでに仕事中TwitterができるCLIを作ったGitHub JavaScript Action で GitHub ReleaseのUpdate Releaseを作ってみた。4連休を使ってGASとLINE BOTとFirebaseを使ってラーメン食べたいBOTを作ってみたArctic Code Vault ContributorになったらしいGitHub ProfileにREADMEをつけよう!


 WordCloud

wordCloud

 SearchBox

Search your interesting by Algolia in this blog.


この記事は42文字約2分で読めます

PortfolioサイトにSoundCloudのメディアプレーヤーを載っけたくなったので、調べてみました。

Table of Contents

Portfolioサイト

拙作のPortfolioサイトはGatsuby.jsを使って作っており、Netlifyにてホスティングしてます。

https://portfolio.tubone-project24.xyz/

img

趣味の写真を基軸に、作ったゴミプロダクトや技術範囲を書いたりしてます。

綺麗な写真やこのBlogの紹介をしてますが、SoundCloudに掲載している音楽もPortfolioサイトに載せようと思います。

React Iframe

SoundCloudはShareボタンからiframeで動くメディアプレーヤを作ることができます。

img

しかしながら、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"/>

img

できあがりです。iframeタグをReact Iframeに置き換えるだけで作れてしまうのでチョー簡単です。

結論

ものすごく簡単にできて特に突っ込みどころのない記事になってしまいました。すみません。

Portfolioサイトはもう少し改造したいですね。

˚