はてなブログ内だけでApple Musicの埋め込みを完結させるメモ

タイトル通り。

そんなに高度なことはしてないですが、自分用メモとして。

 

Apple Music以外も埋め込みたい! という人はこちら

blanche573.hatenadiary.jp

 

Apple Musicの埋め込みって、はてなブログの編集サイドバーにないんですよね。

でも貼ってる人は貼ってるし、はてなのサイドバーにデフォルトでついてるiTunesのリンクだと一歩遅れてる感じがするし、私はSpotify使ってる方が多いし……
要するに「Apple Musicを立ち上げないまま、Apple Musicの埋め込みコードを貼りたい」なあと思って。矛盾してるけど、iTunesが貼れるんだからできるはず。

 

ということで、ソースコードをのっけます。

 

 

Apple Music 単曲テンプレート

<iframe allow="autoplay *; encrypted-media *; fullscreen *" frameborder="0" height="150" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.

 

Apple Music アルバムテンプレート

 <iframe allow="autoplay *; encrypted-media *;" frameborder="0" height="450" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.

  

使い方

単曲編での解説です。

解説のためにソースコードを表に出していますが、全て「HTML編集」画面でやると作業が楽です。

①上のテンプレートをコピペ登録しておいて、「HTML編集」画面で呼び出す

私はサイドバーの「定型文貼り付け」にそれぞれ入れておいてます。

これを「見たまま」モードでやると、表示が崩れるので注意。

 

②貼りたい曲のリンクを呼び出す

ここではサイドバーの「iTunes商品紹介」から呼び出してます。これをこのまま貼るとこう。

GOOD VIBRATIONS

GOOD VIBRATIONS

  • provided courtesy of iTunes

 実はこれ、コンパクトなように見えて、裏ではものすごいタグが長いんですよ。後で貼ります。

 

 もしくはこう。リンクだけを貼るならスマホが楽。

 

③呼び出した曲のリンクをテンプレに流す

①で呼び出したソースに、②の曲リンクをくっつけます。

・ソース(再掲)

<iframe allow="autoplay *; encrypted-media *; fullscreen *" frameborder="0"  height="150" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.

 

・曲リンク

https://music.apple.com/jp/album/good-vibrations/594108608?i=594108661

 

曲リンクの" https:// "部分を抜いてソースにくっつけると、

<iframe allow="autoplay *; encrypted-media *; fullscreen *" frameborder="0"  height="150" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/jp/album/good-vibrations/594108608?i=594108661

 

となります。赤字が足した部分です。

この時、曲リンクの引っ張り方によっては、割と後半がごちゃっとしてたりすることがあります。例えば上の曲、「iTunes商品紹介」から呼び出してくると、実はこうなってます。

https://music.apple.com/jp/album/good-vibrations/594108608?i=594108661&uo=4&at=10l8JW&ct=hatenablog

&uo=4~以下はあってもなくてもいいです。この部分は、とてもざっくりいうと、「はてなブログからこのリンクに飛んだ人がこのくらいいますよ」という集計コードです。はてなブログを思いやりたい人や、ちっちゃいことは気にしない人はそのままでいいです。

 

ソースコードを完成させる

 <iframe allow="autoplay *; encrypted-media *; fullscreen *" frameborder="0"  height="150" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/jp/album/good-vibrations/594108608?i=594108661"> </iframe>

 

となります。赤字が足した部分です。

実はこれをHTML編集画面でやってると、iframeタグを閉じた時点ではてなブログが勝手に</iframe>タグを追加してくれます。なので、打つのは "> の2文字だけでok。

 

これをHTMLに流すと、こうなります。

比較用に、真下にiTunesリンクとソースコードを貼ってます。

 

 

GOOD VIBRATIONS

GOOD VIBRATIONS

  • provided courtesy of iTunes

 <div class="itunes-embed freezed itunes-kind-song"><a href="https://music.apple.com/jp/album/good-vibrations/594108608?i=594108661&uo=4&at=10l8JW&ct=hatenablog" rel="nofollow" target="_blank"><img src="https://cdn.image.st-hatena.com/image/scale/a0f29cd1d204ee161022921ac3a3178dcffb645d/enlarge=0;height=200;version=1;width=200/https%3A%2F%2Fis2-ssl.mzstatic.com%2Fimage%2Fthumb%2FMusic%2Fv4%2Fb4%2F35%2Fd9%2Fb435d983-4612-61d0-1085-6bb9bbbabad6%2Fsource%2F100x100bb.jpg" alt="GOOD VIBRATIONS" title="GOOD VIBRATIONS" class="itunes-embed-image" /></a>
<div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://music.apple.com/jp/album/good-vibrations/594108608i=594108661&uo=4&at=10l8JW&ct=hatenablog" rel="nofollow" target="_blank">GOOD VIBRATIONS</a></p><ul><li class="itunes-embed-artist">RAG FAIR</li><li class="itunes-embed-genre">J-Pop</li><li class="itunes-embed-price">¥255</li><li class="itunes-embed-badge"><a href="https://music.apple.com/jp/album/good-vibrations/594108608?i=594108661&uo=4&at=10l8JW&ct=hatenablog" rel="nofollow" target="_blank"><img src="https://cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-itunes@2x.png" width="44px" height="15px" /></a></li></ul><ul><li class="itunes-embed-preview"><audio src="https://audio-ssl.itunes.apple.com/itunes-assets/Music/v4/87/56/91/875691b4-30b7-a2f3-9f58-354896b75e7f/mzaf_578222514365279648.plus.aac.p.m4a" controls="controls"> </audio></li><li><small class="provided-courtesy-of-itunes">provided courtesy of iTunes</small></li></ul></div></div>

 

iTunesがdivとliとulを使ってて、こう見るとやっぱり長い。

HTMLで編集してると、たまにこの中にカーソルが迷い込んでおかしなことになることがあるのでね……ソースは短い方がいいですよね……

 

FAQ

iTunesしかない音源はどうなるの?

iTunesだけ配信されていて、Apple Musicでは配信されてない曲。いわゆる「買い切り」限定の曲を、Apple Musicの埋め込みで貼るとどうなるのか。こうなります。

 わかる人は「ああ買い切り限定なんだな」ってわかるけど、サムネに一瞬ヒヤっとする。クリックするとApple Musicに飛んで、そこからiTunesで買えるようになってます。

……と思ったけど、スマホだとだめだった。リンクの「music」を「itunes」に変えてもダメでした。

この記事が参考になりそうなので、ちょっと色々見てみます。

iTunesのリンクがApple Musicに繋がってしまう時の解決法 : iTunes アニソン速報 〜 無形物に愛を込めて 〜

 

・アーティストとプレイリストの埋め込みは?

アーティストは、Apple Musicの埋め込み機能を使ってもうまくいかなかったのでやめました。埋め込みたい人はIframelyを使うといいと思います。(「JUST GET A CODE」なら登録なしでブラウザで利用できます)

プレイリストは、Apple Musicを使ってる人がそのまま埋め込むだろうなーと思ったので省略です。

・ソース統一できないの?

 私にはここまでが精一杯でした。

アルバム貼り付けに単曲テンプレを使うと、スクロールがうまく機能しなくて見づらくなります。できる人はheightとかwidthとかをいじって、汎用的なものにするといいと思います。

 

現時点では以上です。

なにかあればお気軽にご連絡ください。