SoundCloudの曲をSimplicity 2のAMP用ページに埋め込む方法

サウンドクラウドのロゴが浮かんだスマホと女の子のイラスト

SoundCloud の曲を AMP ページで表示するための手順です。
あくまで私が行っているやり方ですので、参考までに…

スポンサーリンク

はじめに

私の使用している無料テーマ Simplicity では、 SoundCloud のトラックは AMP ページでの表示に対応しておりませんので、自分で機能を換装する必要がありました。

Simplicity2.3.1からAMPに対応しました。 以下では、簡単にSimplicityでのAMP機能の使い方を説明します。 とは言っても、そこまで難しいことをする必要はないかと思います。 AMP機能を有効にする まずSimplic

SoundCloud の曲をサイトに埋め込み、AMP ページで表示させるためには、<amp-soundcloud>タグを使用します。

まずはこの <amp-soundcloud> タグ をサイトに読み込ませるためのスクリプトを追加していきます。

amp-soundcloud 用のスクリプトを読み込む

FTP ソフトなどを使って、Simplicity 2 親テーマから、amp-header.phpをコピペして子テーマにアップロードします。

子テーマにアップロードした amp-header.php 内に以下のコードを挿入します。

'amp-soundcloud' => 'amp-soundcloud-0.1.js',

場所は元から記述されてある amp-iframe-0.1.js の下あたりに。

amp-soundcloudスクリプトの貼り付け場所

この貼り付けによって、自身のサイトで <amp-soundcloud> タグを使用することが出来るようになります。

ショートコードの作成

SoundCloud の曲を、通常ページ表示用と AMP ページ表示用に切り替えるためのショートコードを作成します。

コードはこちらのサイトのものをまるっと利用させていただきました(´ω`)アリガトゴザマス

通常ページとAMPページで表示する内容を切り替えるためのショートコードの実装方法です。AMP対応広告の出し分けをするために作成しました。Wordpressのfunctions.phpに記載して使用します。AMPページの判別方法はSimpli

記述場所は子テーマにアップしたテーマのための関数(functions.php) です。
記述後は、投稿本文内の SoundCloud 埋めこみ用コードを以下のショートコードで囲んで使用します。

[add_nml] SoundCloud トラック通常ページ用コード [/add_nml]

[add_amp] SoundCloud トラック AMP 用コード [/add_amp]

トラック ID の取得と曲を埋め込む方法

SoundCloud のシェアボタンから Embedに移動、埋め込み用コードを取得します。

SoundCloud 埋め込み用コード取得画面

通常ページへの表示はこの取得した iframe をそのまま投稿に貼り付けて使用します。

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/222339123&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>

api.soundcloud.com/tracks/ に続く番号がトラック ID になります。
amp-soundcloud を使用するときは、 data-trackid プロパティの数字部分に取得したトラック ID を置き換えます。

完成したコードを先ほど作成したショートコードで囲み、 iframe は通常ページでの再生用amp-soundcloud は AMP ページでの再生用と、切り替えて使用します。


例として、この曲を埋め込むために下の2種類のコードを投稿本文に書き込んでいます。

[add_nml]<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/222339123&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>[/add_nml]
[add_amp]<amp-soundcloud height="166"
  layout="fixed-height"
  data-trackid="222339123"></amp-soundcloud>[/add_amp]

amp-soundcloud のスタイル

amp-soundcloud の埋め込みスタイルは主に3つ。
表現したいレイアウトモードによってコードの内容を書き直す必要があります。

クラシックモード

クラシックモードでは、 data-color プロパティにカラーコードを指定すると再生ボタンなどの色が変わります。

[add_nml]<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123456789&color=%23527699&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>[/add_nml]
[add_amp]<amp-soundcloud height="166"
  layout="fixed-height"
  data-trackid="123456789"
  data-color="527699"></amp-soundcloud>[/add_amp]

ビジュアルモード

data-visual プロパティの値に true を指定してあげることでビジュアルモードが使用できます。ビジュアルモードでは色の変更はできません。
height 属性の値は 300px 、 450px 、 600px が推奨されています。

[add_nml]<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123456789&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>[/add_nml]
[add_amp]<amp-soundcloud height="300"
  layout="fixed-height"
  data-trackid="123456789"
  data-visual="true"></amp-soundcloud>[/add_amp]

プレイリストモード

プレイリストモードでは data-playlistid プロパティを使用、ID 部分は api.soundcloud.com/playlists/ に続く数字を差し替えます。

[add_nml]<iframe width="100%" height="450" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/123456789&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>[/add_nml]
[add_amp]<amp-soundcloud height="450"
  layout="fixed-height"
  data-playlistid="123456789"
  data-visual="true"></amp-soundcloud>[/add_amp]

とりあえずこのやり方で AMP のエラーを回避しつつ、トラックを表示することができました。

良かったら試してみてください。
ご覧いただき、ありがとうございました m(_ _)m

スポンサーリンク
レクタングル大
レクタングル大