はじめに
自分は普段、Exact Audio Copyを使用して音楽を楽しんでいる。
iTunesなどのようなアルバムアートワーク画像を自動で埋め込むソフトウェアを使用していないため、
インターネットのどこかから画像を探してきて手動でファイルに埋め込んでいる。
その際の画像の取得元として優れていると感じるサイトがApple Musicである。
取り扱っているアルバムの枚数が豊富で、またアートワークの画質が平均的に良いためである。
課題
ブラウザでApple Musicのアルバムのページを単に開くだけでは画像を保存することはできない。
画像に対するコンテキストメニュー内に「名前を付けて画像を保存」が表示されないためである。
画像を保存するためにはHTMLソースから該当の画像のURLを探し出し、画像を直接開くか保存する必要がある。
この作業を都度行うのは非常に面倒であり、簡潔な操作で画像を保存したい。
解決手段
次のブックマークレットを作成した。
javascript:window.open(Array.prototype.filter.call(document.getElementsByClassName('product-artwork we-artwork--fullwidth we-artwork ember-view')[0].children,e=>e.tagName=='IMG')[0].getAttributeNode('src').value.replace(/\d+x\d+w.jpg$/,'65535x0w.jpg'),'_self');
このコードをまるまるコピーし、Google Chromeのブックマークとして適当な名前で保存する。
画像を取得したいアルバムのApple Musicのページ(例)を開いた後、このブックマークを開くことで、画像が直接ブラウザで開かれる。
この画像は「名前を付けて画像を保存」が可能である。
なお、Internet ExplorerおよびFireFoxでは、Apple Musicのページ上でブックマークレットを実行することができないため、上記のコードはGoogle Chrome(またはChromiumベースのブラウザ)専用である。
(その他のブラウザでは試していない)
解説
上記のコードはブックマークレット用にワンライナーにしてあるが、元となるコードは次の通り。
elements = document.getElementsByClassName('product-artwork we-artwork--fullwidth we-artwork ember-view');
img = Array.prototype.filter.call(elements[0].children, e => e.tagName == 'IMG')[0];
src = img.getAttributeNode('src').value;
url = src.replace(/\d+x\d+w.jpg$/, '65535x0w.jpg');
window.open(url, '_self');
要約すると、対象となる画像のURLを取得した上でそのURLのファイル名を置換し、window.open()している。
ファイル名の末尾を '65535x0w.jpg' にしているのは、これ以上の画像サイズはサーバにないだろうとの想定の元、
最大のサイズの画像を取得するためである。
ここの値を変更し '600x0w.jpg' にすれば、600x600程度のサイズの画像が取得できる。
当然ながら、Apple Musicのページの仕様が変われば、上記ブックマークレットは使用できなくなる可能性が高い。
#おわりに
どれだけいるかは分からないが、アルバムアートワークを自ら探す人のために本記事を書いた。
自分のように音楽ライブラリ構築を趣味にする人に役立つとうれしい。