当ブログは２０１７年７月、はてなブログからWordPressに移転しました。そのさい、記事に貼り付けていたiTunesアフィリエイトコードを全削除。これは、２０１７年時点でまだiTunesアフィリエイトリンクがSSL化に対応していなかったためです。
SSL非対応のiTunesアフィリエイトリンクを貼った記事はすべて「混在コンテンツ」とみなされる。これではサイト全体をSSL化できないので、iTunesアフィリエイトリンクは全てカエレバリンクに変更しました。
で、iTunesアフィリエイトリンクが随分前にSSL化対応したというので、先日当ブログに再度導入し、操作性・スマホデザインなどを確認してみました。今回はこの「iTunesアフィリエイトリンクをWordPress記事に貼り付ける方法」をご紹介。
１、iTunesアフィリエイトリンクを作る
まず最初に、iTunesアフィリエイトのリンクコードを生成します。iTunesアフィリエイト公式サイトを開き、アカウント名とパスワードでログイン。
▼iTunesアフィリエイトプログラム
https://itunes.phgconsole.performancehorizon.com/login/itunes/jp
「オーバービュー」画面が表示されたら、上部メニューバーにある「ツール」を選択。
ページ切り替わったら、「Apple Music Toolbox」をクリック。
すると、Apple Musicマーケティングツールのページに移ります。
検索窓の下にあるボタンを「米国」から「日本」に変え、アフィリエイトコードを生成したい楽曲名を入れてEnter。今回はCrystal Kayの「lead me to the end」という曲のコードを作ってみたいと思います。
曲名を入れて検索すると「ソング」の項に楽曲が表示されるので、その中の１つを選択すれば楽曲ストリーミングプレイヤーのプレビュー画面に切り替わります。
楽曲ストリーミングプレイヤー、デフォルトではサイズが高さ150px、横幅660pxになっていますが、これは可変なので特に変更する必要なし。レスポンシブデザイン対応のテンプレートを使用していれば、ユーザーのデバイスに合わせたサイズに自動調整されます。CSSでのスタイリングなども特に必要ありません。
もし「楽曲プレビュープレイヤーの背景色が薄くて見にくいな～」という場合は、CSSに以下id名を追加し、好きなカラーコードを指定してください。
div#app{
background-color: #fdfdfd;
}
このプレビュー画面下にある「埋め込みコード」のコードをコピー。そのままWordPressの記事に貼り付ければ、iTunes Storeの楽曲プレビュープレイヤーの埋め込みが完了です。
デバイスごとの見え方
iTunesアフィリエイトリンク（楽曲プレビュープレイヤー）を貼った記事を、パソコンとスマホで見比べてみましょう。
まずパソコン。
そしてスマホ（使用機種はXperia Z1 SO-01）。
スマホでの注意点
楽曲プレビュープレイヤーを埋め込んでいる記事をスマホのGoogle Chromeで開くと、「プレミアムコンテンツを再生するにはhttps://embed.music.apple.comでデバイスを一意に識別する必要があります」というウインドウが表示されることがあります（下図）。
これは「著作権で保護されているコンテンツ（iTunesアフィリエイトの場合は楽曲）を再生することを許可してください」という画面ですね。ちなみに、「詳しくはこちら」のリンクをクリックすると、以下ヘルプページに飛びます。
■端末の認証情報と保護されたコンテンツを管理する（GoogleChromeヘルプ）
https://support.google.com/chrome/answer/4410268?co=GENIE.Platform%3DAndroid&hl=ja
「プレミアムコンテンツを再生するには～」画面が出たら「ブロック」を押せばOK。もちろん「許可」でも大丈夫です。どちらをクリックしても楽曲は問題なくストリーミングできます。
ただ、インターネットに慣れていない人は「何この画面！怖い！情報を抜き取られるんじゃないの？フィッシング詐欺！？もしかして、ウイルスに感染したんじゃ！？」と不安になってしまう可能性があります。念の為、タイトル下に以下のような文章と画像で注意書きしてあげたほうが親切かも。
▼注意書きの例
