これはいい！ MusicHTMLを導入して、ちょっとだけカスタマイズしました！

ブックマークレットのスタイルを自分好みにカスタマイズするのって、ちょっと楽しいよね！@jinnaitakumiです！

いままでなんとなくスルーしていたMusicHTMLをついに導入することにしました。
やってみたらかなりカンタンだったｗ

別にデフォルトデザインをそのまま使うなら5分とかからないし、ShareHTMLとかAppHTMLとかをカスタマイズしたことある人なら、自分好みにいじくるのも10分とかでできちゃうと思います。

• AppHTMLの画像リンク切れ対策で、AppHTMLをカスタマイズした | jinnaitakumi.com

MusicHTMLの導入

導入って言うと大げさですけど、ブックマークするだけです。

まずはMusicHTMLにアクセスして、好きなように設定します。
分からないことは作成者@hondamarlboroの「代助のブログ」へ！

• MusicHtmlメーカー
• ブックマークレット『MusicHtml』 〜 iTunesミュージックの楽曲紹介に必要なHTMLコードを自動作成 | 代助のブログ

▼私の場合はこんな感じで設定

最終的に「Bookmarkletを生成」して、出てきたリンクをブックマークバーへドラッグ&ドロップすれば完了です。
使いたいときはブックマークバーにあるリンクをクリックして出てきたポップアップにアルバム名なり、ミュージシャンの名前を入力すればいいわけです。

カスタマイズ

デフォルトのスタイルだと、個人的には必要ない情報だとか、順番を変えたかったりとかあるので、ちょっとだけカスタマイズしました。

▼カスタマイズするときに触るのはここ！

使える予約後はこちら（「代助のブログ」より転載）

${icon170url} : アートワーク画像（大）
${icon100url} : アートワーク画像（中）
${icon60url} : アートワーク画像（小）
${icon30url} : アートワーク画像（極小）
${linkshareurl} : LinkShareIDが組み込まれた楽曲のURL
${artisturl} : アーティストIDが組み込まれたURL
${artist} : アーティスト名
${musicname} : 曲名（シングル）またはアルバム名
${category} : ジャンル
${pubdate} : リリース年
${trackcnt} : アルバムに収録されている楽曲数
${price} : 価格
${copyr} : アルバムはコピーライト
${preview} : 楽曲（シングル）の「試聴する」リンク

これを組み合わせていけばいいわけです。

▼ちなみに私の作ったソースがこちら。

<a href="${linkshareurl}" target="_blank" rel="nofollow">
<img align="left" src="${icon100url}" style="float:left;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: 0px 15px 1px 5px;padding:0px;border:none"></a>
<strong><a href="${linkshareurl}" target="_blank" style="text-decoration:none; rel="nofollow">${musicname}</a></strong>
 by <strong><a href="${artisturl}" target="_blank" rel="nofollow" style="text-decoration:none;">${artist}</a></strong>
<apphtml>
<br>価格：${price}<br>　リリース：${pubdate}
<br><a href="${linkshareurl}" target="_black" rel="nofollow">iTunesで詳しく見る</a>
</apphtml>
<br style="clear: both;">

リンク部分はたいてい

<a href="ここにURLになるやつ" target="_blank" style="text-decoration:none; rel="nofollow">ここにリンクにしたいテキストになるやつとか</a>

ってやればOKです。

例えば

<a href="${linkshareurl}" target="_blank" style="text-decoration:none; rel="nofollow">${musicname}</a>

みたいな感じですね。これだとアルバムタイトルがリンクになってくれます。

注意：ソースをコピペして使う場合は、改行を削除して下さい。改行があるとうまく動作しません。

おわりに

なんとなく先延ばしにしていたMusicHTMLを導入できたので、これからは積極的に音楽を紹介していきますよ！
なかなか格好良くできましたし！

残るはShareHTMLのカスタマイズです。

• MusicHtmlメーカー
• ブックマークレット『MusicHtml』 〜 iTunesミュージックの楽曲紹介に必要なHTMLコードを自動作成 | 代助のブログ