無料WordPressテーマLuxeritasのAMP機能にSoundcloudを対応させてみた

WordPressテーマ Luxeritas ルクセリタス 画像

実は私、当サイト以外にお気に入りの楽曲を紹介する音楽系サイトもひっそり運営してたりしますが、現在テーマをSTINGER PLUS+からLuxeritasに変更してサイトのリニューアルを企んでいるところです。

そのサイトでは楽曲の紹介にいわゆる埋め込み式のプレイヤーを利用しているので、今後の事を考えるとそのプレイヤーもAMP対応しなければいけないなと思ってますが、このAMPというのがなかなかの曲者でして。

とりあえず今回のエントリーは Soundcloud のプレイヤーもAMPの専用タグに変換してくれるよう Luxeritas をカスタマイズしてみました、という内容になります。

スポンサーリンク

LuxeritasのAMP機能はすばら!

Luxeritas の作者さん曰く

オリジナルのページとほぼ同じ見た目で AMP 化できます。

という事で、いくつかのテーマにAMPプラグインを放り込んで比較してみました。

プラグインだけでもAMP化そのものは思っていた以上に簡単に出来る事はわかりましたが、凝ったサイトほど見た目の落差が激しく「やだ、なにこれ」な状態になってしまうのが悩みどころですね…それに対して Luxeritas は確かにほぼオリジナルに近い状態(ただし、独自にカスタマイズした部分を除く)でAMP化する事が出来ました。

さすが Luxeritas だ、なんともないぜ!

AMPめんどくっさ、やっぱやめようかな…と思い始めていた私にとってこんなすばらな事はありません。当サイトのAMP化の際は Simplicity に頼らせてもらう事になりそうですが、副サイトは即決で Luxeritas のお世話になる事にしました。

Luxeritasで対応していないメディアを確認

私のサイトで取り扱う楽曲は海外のインディーズバンドもそれなりに多いので、YouTube 以外に ReverbNation、Soundcloud、Bandcamp 辺りのプレイヤーを埋め込む事も少なくありません。そこでまずそれらのプレイヤーを埋め込んだ場合に表示がどうなるかを確認しておく必要があります。

Luxeritasで対応済みのメディア

詳細は作者さんのサイトで確認出来ます。

そのページから引用させていただくと、現在の対応状況はこんな感じです。

  • Google Adsense
  • Google Analytics
  • アニメ GIF
  • WordPress 標準の埋め込みプレイヤー動画
  • WordPress 標準のメディアギャラリー
  • Youtube 動画
  • vine の 6秒動画
  • Twitter のツイート貼り付け
  • Facebook の貼り付け
  • Instagram の貼り付け
  • その他の iframe(Google Map 等)

一般的によく使われるものがセレクトされてますね、仕様的にはAMPプラグイン+αといったところでしょうか。と随分簡単に言っちゃってますが、その+αの部分がかなり多いように思います。

とりあえず、私が利用しているプレイヤーも iframe で対応出来ているかもしれないので、まずはひと通り確認してみる事にします。

埋め込み用のコードは YouTube のみ短縮URLで、それ以外は全て通常の embed 用のコードを使用してます。WordPress 用~みたいなのは Jetpack 用のコードなので使用していません。

YouTube

通常表示(左側)とAMP表示(右側)を並べてみました。

YouTube 通常表示YouTube AMP表示

さすがに YouTube はしっかり対応されてますね、バリデーションチェックもエラー無しです。見出しの色が違うのはAMP用のCSSにまだ手を加えていないからで、そのおかげで今はどちらの画面かわかりやすいからいいやという事にしています。

当サイトでは基本的に音楽ネタは取り扱わないようにしていますが、今回はまぁせっかくなので良かったら聴いてみて下さいという事でひとつ。

Art Of Dying - All Or Nothing

ReverbNation

正直それほど使用頻度は高くない ReverbNation ですが、希少なバンドの音源を公開しているサイトなので必要になる事もあります。

ReverbNation 通常表示ReverbNation AMP表示

ぐぬぬ、残念…表示されず。

ちなみにこの曲はフリーダウンロード可能です。プレイヤー右上のダウンロードアイコンから直接ポチっといけますので、気に入ったら遠慮は無用でゲットしちゃって下さい。もちろん公式の音源ですのでそこはご安心を。
MindSet Ultra - Feel Alive

Soundcloud

それではSoundcloudはどうでしょう。こちらも YouTube で音源が見つからなかった場合のサブ的な用途で使っているので、そこまで頻繁に利用するわけではありませんが一応。

Soundcloud 通常表示Soundcloud AMP表示

これも残念な結果に。この曲は別に YouTube にあるんでいいんですけどね?

Silver End - Thousand Miles

Bandcamp

日本では何それな人も多いかもしれない Bandcamp ですが、一応 Font Awesome にもアイコンがあるところをみると(4.7で追加されたらしい)海外ではそれなりに利用されているサービスではないかと思います。

Bandcamp 通常表示Bandcamp AMP表示

表示はされました何だかちょっとおかしな感じになってますね。と言うかURL中のパラメータも気になってましたし、バリデーションでもちゃっかりエラーになるようです。

Vanisher - Blank Horizon

参考までにAMPプラグインでの結果

実はAMPプラグインを使用した場合、ここまで試した埋め込みプレイヤーは全てそれなりに表示されて、バリデーションチェックもエラー無しという結果が出てたりします。

しかし、レスポンシブ対応が完全にされてるとは言い難い為、デバイスによってはプレイヤーのインターフェース部分が隠れてしまったり、スクロールしないと全体が見えなかったりして、とりあえず表示出来てるというだけで私としては納得のいくレベルでは無かったので「これでは意味が無い」と判断しました。

結局のところ、専用のAMPタグがあっても YouTube 以外は全て iframe にしているのが問題なのかなと…プラグインをダウンロードしてファイルをひと通り見てみましたが、YouTube、Facebook、Twitter、Instagram、Vine くらいしか個別には対応していなかったような。

これはWordPressが悪いわけでもテーマが悪いわけでも無く、AMPの仕様がそれだけ足かせになっているという事なんですが、スクリプトに頼り過ぎな現代のWEBデザインに対するアンチテーゼ的なものなんでしょうかね?

何れにしても、テキストと画像しか無いようなシンプルなサイトならこのプラグインで十分AMP化は可能なように思えますが、そうでない場合はよく検証する必要があると感じました。

LuxeritasのAMPタグ変換にSoundcloudを追加

AMPで公式にサポートされているプラットフォームはこのページで確認出来ます。

参考 Supported Platforms, Vendors and Partners - Accelerated Mobile Pages Project

Audio/Video の部分を開いてみると Soundcloud もその中にありますが、Luxeritas では需要が少ないのであえて対応しなかったのだろうと思いますので、ここはひとつ自分で…と言うか正確には Luxeritas のAMPタグ変換機能に Soundcloud も巧く乗っけてもらえるようカスタマイズしてみたいと思います。

Soundcloud のAMP用タグはリファレンスに書いてあるので難しい事は何もありません。

参考 soundcloud - Accelerated Mobile Pages Project

あとは Luxeritas のファイルの中からAMP用のタグに変換している部分をコピってきてちょちょいと修正してやればいいだろう、くらいに考えていましたが…甘かったです、さすがにそれはスイーツ過ぎました。

とりあえず YouTube の該当部分を探してみると

// Youtube
if( stripos( $contents, 'youtube.com' ) !== false ) {
	$contents = preg_replace(
		'/<amp-' . $i_frame . '[^>]+?src="https?:\/\/www.youtube.com\/embed\/([^\?"]+).*?".*?><\/amp-' . $i_frame . '>/ism',
		'<amp-youtube layout="responsive" data-videoid="$1" width="800" height="450"></amp-youtube>',
		$contents
	);
}

正規表現きたわぁ… orz

正規化なんて郵便番号か電話番号のフォーマットチェックくらいでしかやった事が無いので、そのURLバージョンとか見ただけで軽く目眩が…もういっそ今回の話は諦めて最初から無かった事にしようかとも思いましたが

「男なら、やってやれ!!」

という事で、私なりにこちらのサイトでひたすらチェックしながら頑張ってみました。

ちなみに先ほどのコードは YouTube の embed 用URLから動画IDを取得して、あらかじめ用意しておいた YouTube のAMP用タグのID部分にセットするという事をしています。全体の流れとしては一旦 iframe をAMP用に変換した後、個別対応が可能なものだけ更に専用のタグに置き換えるといった感じでしょうか。

例によって間違ってたらすいませんね…

結果から言うと Soundcloud の場合もほとんど YouTube からのコピペでいけた事になりますが、URLから不要と思われる部分を削るのに手探りでちまちま確認しながらやっていたので私としてはそれなりに苦労しました…慣れている人ならマッハで出来るレベルなんでしょうけど、とりあえず勉強になったので良しという事で。

amp-func.php の編集

親テーマのファイルを直接編集するので更新の度に修正が必要になりますが、とりあえず仕方が無いという事で進めてみたいと思います。

amp-func.php のファイルは以下の場所にあります。

luxeritas
├ inc
│ └ amp-func.php

「テーマの編集」から作業を行う場合は、まず親テーマを開いてそのままファイル名で検索すれば見つかるでしょう。

ファイルを開いたらまず「AMP Extension の配列 」というコメントを探します。と言うか開いてすぐのところにあります。

最後尾に以下のコードを追加します。

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

こんな感じになっていればOKです。

		'amp-lightbox'		=> '/v0/amp-lightbox-0.1.js',
		'amp-image-lightbox'	=> '/v0/amp-image-lightbox-0.1.js',
		'amp-soundcloud'	=> '/v0/amp-soundcloud-0.1.js',
	);
}
endif;

/*---------------------------------------------------------------------------
 * AMP で禁止されてる要素の置換もしくは削除
 *---------------------------------------------------------------------------*/

次に「AMP 特有のタグへの置換」というコメントを探します。見つかったらスルスルとスクロールしてこれも一番最後に追加する事にしましょう。同じような段落がいくつかあるので何となくわかるかと思いますが、位置的には vine の次になります。

挿入する場所がわかったら return $contents; の前に以下のコードをコピペします。

// Soundcloud
if( stripos( $contents, 'soundcloud.com' ) !== false ) {
	$contents = preg_replace(
		'/<amp-' . $i_frame . '[^>]+?src="https?:\/\/w.soundcloud.com.*?\/tracks\/([^\&"]+).*?".*?><\/amp-' . $i_frame . '>/ism',
		'<amp-soundcloud layout="fixed-height" data-trackid="$1" data-visual="true" height="166"></amp-soundcloud>',
		$contents
	);
}

場所が間違っていなければこんな感じになります。

	// vine
	if( stripos( $contents, 'vine.co' ) !== false ) {
		$contents = preg_replace(
			'/<amp-' . $i_frame . '[^>]+?src="https:\/\/vine.co\/v\/(.+?)\/embed\/simple".+?><\/amp-' . $i_frame . '>/ism',
			'<amp-vine layout="responsive width="400" height="400" data-vineid="$1""></amp-vine>',
			$contents
		);
	}
	// Soundcloud
	if( stripos( $contents, 'soundcloud.com' ) !== false ) {
		$contents = preg_replace(
			'/<amp-' . $i_frame . '[^>]+?src="https?:\/\/w.soundcloud.com.*?\/tracks\/([^\&"]+).*?".*?><\/amp-' . $i_frame . '>/ism',
			'<amp-soundcloud layout="fixed-height" data-trackid="$1" data-visual="true" height="166"></amp-soundcloud>',
			$contents
		);
	}

	return $contents;
}
endif;

/*---------------------------------------------------------------------------
 * AMP 用 Google Adsense 置換
 *---------------------------------------------------------------------------*/

このコードでは Soundcloud のプレイヤーを Visual Mode に設定していますが、Classic Mode というのもあるので、その辺りの設定は先ほどのリファレンスを参照して好きなようにイジってみて下さい。

対応後のAMP表示を確認

Soundcloud AMP表示 対応後

いい感じですね!バリデーションチェックもOKでした。

Dailymotion や Vimeo にも対応させたいという方は、今回のエントリーの手順が応用出来ますので参考にしていただければ幸いです。

AMP側の正式な対応に期待

Bandcamp や ReverbNation のAMP専用タグも用意して貰える事を期待したいですが、当面はYouTubeとSoundcloudの音源を中心に紹介していく事になりそうです。

と言っても、その前に独自ドメインとレンタルサーバーもまだだし、コンテンツも一から作成し直す事にしたので当分は先の話になりそうなんですけどね…

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク

シェアする

フォローする

スポンサーリンク
トップへ戻る