apphtml018

「楽曲を紹介するiTunesのリンクに試聴できる機能を付ければ、どういった曲か知るためにもう一度曲名で検索する手間も省けるじゃないか」

とはてなブログが公式に提供しているiTunesのリンク生成機能を見て思いつきました。これが実現できれば閲覧者の購買意欲も高まりますね笑。

色々と調べたところ意外と簡単にできそうなのでやってみました。完成イメージは以下のような感じです。

希空~まれぞら~(NHK連続テレビ小説「まれ」)
澤野 弘之
サウンドトラック
¥250

スポンサードリンク

リンクの生成にはAppHtmlWebを使用

apphtml001

一からリンクを生成するツールを作るのはとてつもない時間がかかるので、既にあるツール「AppHtmlWeb」を使用します。AppHtmlWebでリンクを生成するときの書式を変更すると最初に紹介したリンクを作ることができます。

AppHtmlWeb

まずはお世話になるAppHtmlWebの紹介をしたいと思います。

AppHtmlWebはiTunes Store上で販売されているコンテンツ(音楽・アプリ・映画など…)のリンクを生成するためのツール。アルバムのアートワークやアプリのアイコン等を使用してリッチな表示ができるのが特徴です。

ブックマークからいつでもリンク生成できるブックマークレットを作るツール「AppHtmlブックマークレット・メーカー」も提供されています。

下記にAppHtmlWebで作成できるリンクを示しました。初期では以下の5種類のデザインのリンクが生成できます。

AppHtmlWebの使い方は作者の方が説明されているページがあるのでそちらをご確認ください。

connect1ngdots/AppHtml

小さいボタン

大きいボタン

テキストのみ

アロエ – サザンオールスターズ

アイコン付き(小)

アロエ
カテゴリ: J-Pop

アイコン付き(大)

アロエ
カテゴリ: J-Pop

試聴プレーヤー付き楽曲リンクの作成には1番下の”アイコン付き(大)”をベースに作っていきます。

書式テンプレートをカスタマイズ

書式テンプレートをカスタマイズして試聴リンク付きでリンク生成するように設定します。今回は試聴プレーヤーの追加に限定して紹介します。応用を利かせるとアーティスト名や販売価格の表示などができます。

apphtml005

AppHtmlWebのトップページにアクセスし、右上の”設定”をクリックします。

apphtml006

テンプレートから”Song”を選択します。

apphtml007

“アイコン付き(大)のテンプレート”を選択します。

apphtml008

内容のHTMLタグを全選択してコピーします。左上の”×”を押し前画面に戻ります。

apphtml009

“+”を選択してテンプレートを追加します。

apphtml010

テンプレートの名前は任意のものを入力し、内容にはさきほどコピーしたHTMLタグを貼りつけます。

apphtml011

HTMLタグの最後に以下のHTMLタグを追加します。

<audio src="" controls>

apphtml012

audio src=”【ここにカーソル】”のダブルコーテーションの中にカーソルを指定します。その状態で右上のメニューアイコンをクリックすると、メニューがスライドしてくるので”プレビューURL”を選択します。

※ここで価格やアーティスト名等の様々な情報を追加することができます。カスタマイズしてオリジナルのテンプレートを作ってみてください!

apphtml013

<audio src="${preview}" controls>

HTMLタグが上記のように書き換わります。”Save”をクリックします。

ちなみにaudioタグはHTML5から新たに追加された要素で音声を再生するときに使います。src属性には音声ファイルの場所を入力し、今回は${preview}でiTunes Store上の試聴のための楽曲ファイルの場所を指定しています。

apphtml014

“<“をクリックして前画面に戻ります。

apphtml015

自分のアフィリエイトIDをリンクに埋め込みたい場合はPHGのIDを入力しましょう。最後に右上の”保存”を押して、テンプレートカスタマイズは終了です。

apphtml016

1番最初の画面に戻り、書式テンプレートをさきほど作成したテンプレートを指定します。あとはリンク生成の操作を行うと、書式が反映されたリンクが作れるはずです。

にじいろ
カテゴリ: J-Pop

私が使っているテンプレート

にじいろ
絢香
J-Pop
¥250

最後に私が使っているテンプレートを貼っておきたいと思います。アーティスト名と価格を追加し、iTunesのリンクは小さいラベルを使っています。

テンプレートを作成するときに内容の部分に以下のコードを貼り付けると、上に示したようなリンクを作ることができます。

今回作ったテンプレートをAppHtmlブックマークレット・メーカーに貼り付けて、ブックマークレットを作ることができるのであわせて試してみてください。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。