LoginSignup
14
0

More than 1 year has passed since last update.

はじめに

ジャニーズの CD は iTunes に CD を取り込んでも,ジャケ写が読み込まれないらしい(友人談).
ジャニオタの皆さんは,ネットから頑張って形態ごと(初版A,B とか)にジャケ写を探してきて登録しているようです.
今回は,ここをできるだけ自動化したいと考えてやってみました.

めんどくさいことはユーザースクリプトにやらせよう

ジャニーズグループの Web ページは,
https://www.johnnys-net.jp/page?id=discoDetail&artist=41&data=2762
のように「アーティスト > Discography > 各 CD の詳細」 という画面構成になっていて,そこで実行すると全形態のジャケ写をローカルに DL できるユーザースクリプトを書いてみました.

// 画像をダウンロードする関数
const downloadImage = (url, name) => {
    const d = document.createElement("a");
    d.download = name;
    d.href = url;
    d.click();
};

const cdArray = Array.from(document.getElementsByClassName("copyright-slider__item-inner")).map((inner) => ({
    type: inner.children[1].textContent,
    image: inner.childNodes[1].childNodes[0].currentSrc,
}));

const tittle = document.querySelector("#contents > div.container.artist_disco > h3").textContent.trim();

console.log("タイトル: " + tittle);
console.log("ファイルをローカルに DL します");

const uniqueCdArray = Array
    .from(new Map(cdArray.map((cd) => [cd.type, cd])).values()) // unique にする
    .forEach(async (cd) => {
        // 画像をローカルにダウンロード
        downloadImage(cd.image, `${tittle}_${cd.type}.jpeg`);
        console.log(`${cd.type}: ${cd.image}`);
    });
    
console.log("DL 完了!");

学び

そんなに難しいことやってないんですが,コンソールからどうやって画像を DL してこようかなと調べていたところ, <a> タグを一時的に作ってクリックさせるという方法がヒットしてなるほどなと思いました.
フロントエンド界隈だと当たり前の Tips かもしれないんですが,あんまり普段フロントエンド,JavaScript を触らない僕としては発見でした.

使い方

ジャケ写を DL したい CD のページへアクセスします(例: https://www.johnnys-net.jp/page?id=discoDetail&artist=41&data=2762)
ブラウザの「開発者ツール > Console」を開いて,さっきのスクリプトをコピペして実行するだけ!

スクリーンショット 2023-07-20 11.12.14.png

スクリーンショット 2023-07-20 11.16.26.png

画像の権利について

サイトポリシー(https://www.johnnys-net.jp/page?id=sitepolicy) には,

当ウェブサイトに掲載されている全てのコンテンツ(文章、グラフィック、画像、音源等)の著作権は、ジャニーズ事務所または正当な権利を有する権利者に帰属しています。
事前にジャニーズ事務所の承諾がない限り、法律によって認められる私的使用の範囲を超えて、これらの情報を使用(複製、改ざん、頒布などを含む)することを固くお断りします。

とあるので,私的利用の範囲であれば問題なさそうです.
配布などせず,自分の音楽再生アプリでジャケ写に登録すること自体は大丈夫.

おわりに

Chrome 拡張にしてリリースしようかな〜〜〜〜

14
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
0