おすすめアプリや音楽をブログに表示する方法|Widget Builderの代替

iTunes(アイチューンズ)

「お気に入りのアプリをブログで紹介したいけど、ただURLを貼るだけだとなんだか味気ない」。そう感じたことはありませんか。せっかくおすすめするなら、アイコン付きの見栄えのいい形で載せたいですよね。

かつて私もそう思って飛びついたのが、Appleが提供していた「iTunes Widget Builder」というツールでした。アプリや音楽の情報を自動で読み込んで、おしゃれなウィジェットをブログに埋め込めるという代物で、当時このブログでも実際に試して記事にしていました。アイコンや価格まで自動で表示され、自分のおすすめアプリやプレイリストをサイドバーに並べられる手軽さに、すっかり感心したのを覚えています。

ところが時は流れ、iTunesというアプリ自体がもう存在しません。当時貼ったウィジェットも、今では多くが表示されなくなっています。この記事では、終了してしまった「iTunes Widget Builder」の代わりに、現在ブログでアプリや音楽を見栄えよく・安全に紹介するための公式ツールと作法を、Web制作歴25年の私の視点でまとめて解説します。

具体的には、App Storeの公式バッジの使い方、Apple Musicの埋め込みプレーヤー、そしてアフィリエイトの今の事情まで順番に取り上げます。「昔の記事を見て真似しようとしたら動かなかった」という人にも、ここを読めば今やるべきことがハッキリとわかるはずです。

「iTunes Widget Builder」は今どうなった?

まず結論からお伝えします。かつてアプリや音楽のウィジェットを作れた「iTunes Widget Builder」は、現在は当時の形では使えなくなっています。

理由はシンプルで、土台になっていた「iTunes」というアプリそのものが終わったからです。AppleはmacOS Catalina(2019年)でiTunesを廃止し、音楽・映画・ポッドキャストはそれぞれ別アプリに分割されました。Windows版iTunesも順次「Appleミュージック」などのアプリへ置き換えが進んでいます。

その流れの中で、ブログにiframeで貼り付けるタイプの古いウィジェットは役目を終えました。私が昔この記事で埋め込んでいた「おっさんソングス」プレイリストのウィジェットも、今では正しく表示されません。当時を知る身としては少し寂しいですが、これも時代の流れですね。

とはいえ、がっかりするのはまだ早いです。Appleは古いウィジェットを廃止した代わりに、もっと今っぽくて安全な公式ツールをきちんと用意してくれています。次の章から、その新しい方法を順番に見ていきましょう。

出典:Apple サポート – macOS Catalina で iTunes が新しいAppとApple Musicに

アプリを紹介するなら「App Store Marketing Tools」一択

では本題です。今、ブログでアプリを紹介したいときの正解は、Appleが無料で公開している「App Store Marketing Tools」というツールを使って、公式バッジ付きのリンクコードを作る方法です。

使い方はとても簡単で、特別なアカウント登録もいりません。ツールのページで紹介したいアプリ名を検索し、ストアの国(日本ならJapan)と対象端末を選ぶだけ。あとは「Download on the App Store」というおなじみの黒いバッジや、アプリアイコン、QRコードといった素材と、それを埋め込むHTMLコードが自動で生成されます。

生成したコードを貼るだけ

生成されるのは、こんなイメージのリンクコードです(実際のコードはツールが吐き出すものをそのまま使ってください)。

<a href="https://apps.apple.com/jp/app/アプリ名/idアプリID">
  <img src="バッジ画像のURL" alt="Download on the App Store">
</a>

WordPressなら、投稿画面のブロックエディタで「カスタムHTML」ブロックを追加し、そこへコピーしたコードを貼り付ければOKです。クラシックエディタの場合は「テキスト」モードに切り替えてから貼り付けてください。これで、リンク切れの心配が少ない公式の遷移先(App Storeの製品ページ)に、きれいなバッジでつなげられます。

バッジは「いじらない」のがルール

ひとつだけ注意点があります。Appleの公式バッジは、サイズ比率を変えたり、色を塗り替えたり、傾けたり、影を付けたりといった改変が禁止されています。

「自分のサイトの色に合わせて青くしたい」と思っても、それはNG。基本は黒バッジをそのまま、まわりに余白を確保して使うのがルールです。最小サイズ(画面表示で40px以上)の指定もあります。このあたりは制作の現場でもうるさく言われる部分で、ブランドガイドラインを守ることが結果的に信頼にもつながります。細かいルールは公式ガイドラインに一通り載っているので、本格的に使う前に一度目を通しておくと安心です。

出典:Apple Developer – App Store Marketing Guidelines

関連記事:Firefoxから乗り換え!Vivaldi(Google Chrome)おすすめアドオン&アプリ

音楽を紹介するなら「Apple Music Marketing Tools」

音楽も考え方はまったく同じです。古いウィジェットの代わりに、Appleの「Apple Music Marketing Tools(Toolbox)」を使えば、アルバム・楽曲・プレイリストを試聴できる埋め込みプレーヤーを作れます。

こちらもアプリ紹介と流れは共通で、ツール上で曲名やアルバム名を検索し、目的のものを選んでコードをコピーするだけ。用意されているのは主に次の3タイプです。

埋め込みプレーヤー・バッジ・QRコード

ひとつめが「プレビュープレーヤー」。ブログ上に小さなプレーヤーを埋め込めて、読者はそこで楽曲の一部を試聴できます。Apple Musicにログインしていない人でも30秒のプレビューが聴けて、ログイン済みの会員ならフル再生もできるという作りです。昔のウィジェットで「視聴できるのが実用的」と書いていた機能は、形を変えてしっかり生き残っているわけですね。

ふたつめが「リンク付きバッジ」。Apple Musicへ誘導する公式バッジで、シンプルにテキストやアイコンでリンクしたいときに向いています。みっつめが「QRコード」で、スマホからの読み取りに便利です。記事の内容に合わせて、試聴させたいなら埋め込みプレーヤー、軽く触れるだけならバッジ、と使い分けるのがおすすめです。

埋め込みコードの貼り方は、先ほどのアプリと同じで「カスタムHTML」ブロックに貼るだけ。なお、Apple側は「ウィジェットや素材の利用について責任は負わず、ウィジェットを停止する権利を留保する」と明記しているので、未来永劫表示され続ける保証はない点だけ頭の片隅に置いておきましょう。とはいえ自前でiframeをゴリゴリ書いていた昔に比べれば、はるかに手軽で安全になりました。

出典:Apple – Apple Music Marketing Tools

関連記事:iTunesのサイドバーが消えた?表示方法と今の音楽アプリの使い方を解説

気になる「アフィリエイト」の今の事情

昔のApple公式ページには、ウィジェットやリンク作成ツールと並んでアフィリエイトプログラムの案内もありました。「紹介したアプリや曲が売れたら報酬が入る」あの仕組みです。これが今どうなっているのか、気になる人もいると思います。

正直に言うと、ここは状況が大きく変わっています。かつて誰でも申し込めたAppleのアフィリエイト(現在の名称はApple Services Performance Partners)は、現在は新規の受け入れを大きく絞っており、誰でも気軽に参加できるものではなくなっています。

Apple公式の説明でも「一定の量と質の成果を出せる、限られた数のパートナーのみを受け付けている」とされています。運用元も以前のPHG(Performance Horizon)からPartnerizeへと移り変わってきました。つまり、個人ブログがサクッと登録して報酬を得る、という時代ではなくなったということです。

とはいえ、ここで紹介してきた公式バッジや埋め込みプレーヤー自体は、アフィリエイトに参加していなくても無料で使えます。「報酬は得られなくても、まずは読者に分かりやすく紹介したい」という目的なら、これまでの方法で十分。収益化はあくまで別軸の話と割り切って、まずは見やすい紹介を優先するのが現実的だと私は考えています。

出典:Apple Services Performance Partners

まとめ:終わったツールに固執せず、今の正解で紹介しよう

かつての「iTunes Widget Builder」は、iTunesの終了とともに役目を終えました。当時このブログで貼ったウィジェットも今は表示されず、時代の移り変わりを実感します。けれど落ち込む必要はなくて、Appleはちゃんと新しい正解を用意してくれています。

今のおさらいです。アプリを紹介するなら「App Store Marketing Tools」で公式バッジ付きのリンクコードを作る。音楽を紹介するなら「Apple Music Marketing Tools」で試聴できる埋め込みプレーヤーやバッジを作る。どちらもアプリ名・曲名を検索してコードをコピーし、WordPressの「カスタムHTML」ブロックに貼るだけ、という流れでした。

注意点は、公式バッジは色や形をいじらずそのまま使うこと。そしてアフィリエイトでの収益化は、今や新規参入のハードルがかなり高くなっているので、まずは「読者に伝わる紹介」を目的に据えること。この2つを押さえておけば大きく外しません。

古いツールが消えると面倒に感じますが、新しいツールはたいてい昔より手軽で安全にできています。実際、今回の公式ツールは、当時せっせとiframeを書いていた私からすると拍子抜けするほど簡単でした。動かなくなった昔の貼り方にこだわらず、ぜひ今の正解で、あなたの一押しのアプリや曲を読者に届けてみてください。私もこの機会に、古い記事のウィジェットを公式バッジへ差し替えていこうと思います。

出典:Apple Developer – App Store Marketing Resources

関連記事:気分やジャンルで音楽を流せる定番サービス3選!作業BGMにも