【Web】はてなでイントロドン! - changer de ton
【Web】iTunes視聴プレイヤーを作りました - changer de ton
↑がそもそものはじまり。
エントリ内にて音楽紹介をするときには、はてなのiTunes商品紹介が便利ですよね。
ですが、アルバムを全曲紹介するときなどは、1曲1曲貼っていかなくてはならず面倒!
なので、ある程度まとめてドーンと貼れる*1ようにしました。
【スポンサードリンク】
↓サンプルです~。
こんなかんじ。よかったらぜひ。
ついでに花澤さんのアルバムもぜひ。
- アーティスト: 花澤香菜
- 出版社/メーカー: アニプレックス
- 発売日: 2014/02/26
- メディア: CD
- この商品を含むブログ (15件) を見る
《使い方》
以下の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="<< 前の曲" /> <input type="button" id="nextSong" class="css_btn_class" style="color:#8dafb8; display:none;" onclick="nextSong()" value="次の曲 >>" /> </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エントリに複数個貼れるようにはしてないので、そこはまあ気が向いたらやります。
おしまいヽ(´ー`)ノ