読者です 読者をやめる 読者になる 読者になる
記事一覧      日常       音楽       考え       ドラマ       映画       CM       Web

【Web】iTunes音楽紹介でアルバム全曲を紹介したいときには

Web 音楽 はてな つくった

【Web】はてなでイントロドン! - changer de ton
【Web】iTunes視聴プレイヤーを作りました - changer de ton
↑がそもそものはじまり。

エントリ内にて音楽紹介をするときには、はてなのiTunes商品紹介が便利ですよね。
ですが、アルバムを全曲紹介するときなどは、1曲1曲貼っていかなくてはならず面倒!
なので、ある程度まとめてドーンと貼れる*1ようにしました。

【スポンサードリンク】


↓サンプルです~。

≪花澤香菜 アルバム「25」≫


こんなかんじ。よかったらぜひ。
ついでに花澤さんのアルバムもぜひ。

25(通常盤)

25(通常盤)


《使い方》
以下のjsをエントリ内にコピペして読み込ませる。

<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/8ytcu139hwc2iod/iTunespreview.js"></script>


その下に、キーワードと取得件数を指定するjsをコピペ。

<script>
// ★検索キーワード&取得件数
search({
  term: '花澤香菜 25',
  limit: 30
});
</script>

そのとき、term(検索キーワード)とlimit(取得件数)を対象のものに変えてあげてください。
ちなみに、limitの上限は200件です。*2

そのあとは、曲を表示させたい位置に以下のhtmlをコピペ。

<div id ="displayArea" >
</div>
<div>
<p id = "error" style="color:#ff6699;"></p>
<input type="button" id="prevSong" class="css_btn_class" style="color:#8dafb8; display:none;" onclick="prevSong()" value="&#60;&#60; 前の曲" />
<input type="button" id="nextSong" class="css_btn_class" style="color:#8dafb8; display:none;" onclick="nextSong()" value="次の曲 &#62;&#62;" />
</div>

ボタンのCSSはここにあるので、もし必要ならばコピペしてください。なくても問題ないです。
CSSは記事内じゃなくてデザインのところに貼ってね。

さて、これで使えます!っていいたいところですが、
jQueryというjsのプラグインを使ってるので、それを読み込ませてあげないと動きません。

jQueryなんぞしらんわ!って人は下記手順のとおり、設定してみてください。

①はてなブログの『設定』を開く。

②『詳細設定タブ』をクリック。

③『headに要素を追加』に以下のコードをコピペ。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

④保存。

これで大丈夫なはずです(たぶん)。

1エントリに複数個貼れるようにはしてないので、そこはまあ気が向いたらやります。
おしまいヽ(´ー`)ノ

*1:うわあ THE 抽象的

*2:あと、iTunesアフィリエイトIDのとこもいじってね【追記】コレ、今の形だと変えられないね