Posts tagged ‘customize Spotify app UI with spicetify-cli’

昔に比べていろいろ改悪された、現行版Spotifyアプリ(Linux版)。かなり嫌なのは、再生中にアイコン(以下、再生中アイコン)が ちらちら動き続けて目障りなことだ(→ 画像: 1曲目の緑の棒グラフのようなアイコン)。たまたま今日 アプリが更新されたので試したが、やっぱり変わっていなかった。それで、以前どこかのページで知った情報を思い出して、無理矢理アイコンを換えられないものかと試したらできた

試したアプリのバージョンは、 1:1.1.68.632.g2b11de83 である。※

※アプリでは出せないので、 aptitude show spotify-client コマンドで表示した。

概要(ポイント)は以下のとおり。

  • SpotifyアプリのUIは /usr/share/spotify/Apps/xpui.spa (以下、UIファイル)の中に入っている。
  • 再生中アイコンはUIファイルの中の images/equaliser-animated-green.gif で、24x24pxのアニメGIF
  • UIファイル(xpui.spa)はZIPファイルなので、問題のアイコンのファイルを交換して作り直せば良い。

再生中アイコンを置換する手順の例は以下のとおり。

  1. UIファイル(/usr/share/spotify/Apps/xpui.spa)を展開する。
    1. cd ~/tmp
    2. mkdir -p sp-xpui-work/xpui
    3. cd sp-xpui-work
    4. ln -s /usr/share/spotify/Apps/xpui.spa xpui.zip
    5. cd xpui
    6. unzip ../xpui.zip
  2. 展開したディレクトリ中の再生中アイコン images/equaliser-animated-green.gif を適当なものに交換する。
    • 条件: ファイル名はequaliser-animated-green.gif, GIF形式, 24x24pxであること。
      • ファイル形式はPNGでもいいかも知れないが、SVGは駄目だった。
    • アプリに合わせて、背景は暗く(黒系)、描画色は白などが良い。
  3. 新しいUIファイルを作る。
    1. zip -r ../xpui-new.zip *
  4. 新しいUIファイルを/usr/share/spotify/Apps/に置く。
    1. cd /usr/share/spotify/Apps
    2. sudo mv -i xpui.spa{,.orig}
    3. sudo cp -i ~/tmp/sp-xpui-work/xpui-new.zip xpui.spa

アイコンは既存のものでも構わないが、GIFで背景が暗い、丁度良いものがすぐには見付からなかったので、gimpで文字"♪"(サイズ: 22pxくらい)でテキトーに作った

面倒なのは、アプリが更新されるたびにアイコン置換作業をしなくてはならないことだが、自動化できそうだ。

この手順(以前のアプリでも同様)でUIをいろいろ改造できそうだが、まだ良く見ていない。 → ちょっと見たら、JSは判読困難なので改造は難しそうだが、CSSなら何とかできるかも知れない。: 例えば、緑で気に入らない再生中の曲の文字の色を変えるのはできるかも。 → 思い付いた。標準の色遣い(テーマ)が暗くて嫌いなので、つい、ライトテーマを作りたくなるが、まあ、それは やり過ぎってものだw (9/23 11:33)

「やり過ぎ」と書きつつも調べたら、(Linux版)SpotifyアプリのUIは(以前の予想どおり)基本的にブラウザ版と同じようで、ブラウザのWeb Developer Toolsを使えば、下のように(難読化を解除して)要素が調べられ、ちょっと変えて試すことができそうだ。 (9/23 11:52)

ブラウザ版で再生中アイコンの元(URL)を調べた。

→ (9/24 15:37) 「ちょっと」試したが、挫けた。UIファイル(xpui.spa)中のCSS(xpui.css, vendor-xpui.css)の色を変えて明るくしてみたら、(テキトーにやった割には)結構うまく行き、これなら(もっとちゃんとやれば)行けそうだと思ったのだが、表示内容(例: Daily Mix)によってはウインドウ(曲リスト)の半分だけ暗くなってしまった

更に調べたら、JS(xpui.js, vendor-xpui.js)の中でも色を設定していた。しかも、(難読化のせいかも知れないが、)同じ色の値が何度何度も書いてあって、なんとも腐っているサイコーなこと・・・ 素人かな? まあ、ツールで作ったりすると良くありそうな感じだが、なかなか付き合い切れない。

ただ、明るいテーマは なかなか爽やかで僕好みで捨て難い。が、苦労して色を変えても、アプリの更新で お釈迦になる可能性が高いので、あるアプリなりウインドウの色を実行時に変えるようなプログラムで色を変えたいが、そういうものはあるのだろうか?

↑ 色をグラデーションにしているので、単純な色の置換(LUT)では無理そうだ。 (9/24 17:33)

→ (9/24 19:17-9/25 12:30) 更に調べていたら、spicetify-cliというプログラムでテーマを変更できることが分かった。想像だが、これは上で僕がやったようにSpotifyのUIを展開して改造し、容易にカスタマイズできるようにているのだろう。デフォルトは(今は なき)GPMに似ていて懐かしい。

それで早速、僕のデスクトップのテーマ(Mint-X-Sand)に近付けてみた(spicetifyの古い版(1.2.1)は以前のSpotifyに対応しているので、そっちに適用した)。調整が不充分で見にくい箇所があるのと、ちょっと素っ気ないが(→ 調整し、テーマ(CSS)にも手を入れて随分改良した)、暗いよりずっといい。このプログラムは使い方のドキュメントが少ないが、いろいろ使えそうだ。

(9/26 7:09) 確かにspicetifyは使えるんだけど、Spotify同様なかなか余計なことをしてくれる。デフォルトはSpotifyのテーマを明るくするだけでいいのに、作者の好みで いろいろ変えてしまって(余程GPMに近くしたかったのか?: 個人的には、細かいところが「これは ないだろう」レベル)、それを戻すのに苦労した。まあ、苦手・嫌いなCSSの勉強(というか 付け焼き)には なったかなw

 

アイコンの交換は成功したものの、現行版には移らない。これはまあ、ちょっと思い付いたからやった、暇つぶしのお遊びだw

というのは、確かに以前は効かなかった、前・後ページのショートカットキー(Alt+←/→)が前の版で直ったが、依然として検索などで日本語が入力できないし(これは古い版でも同様)、左ペインでプレイリスト一覧がごちゃついているのが気に入らないからだ。それらが直ればいいが、まあ無理だろう。他に良くない点(例: 音が悪い)がなければ、百歩譲ってそれらを我慢して移行するのもありかも知れない。が、特にいいことはなさそうなので、古い版が動かなくなってからでも良さそうだからだ。

 

(9/23 5:12 画像を改良, わずかに加筆・修正, 9/23 9:48 わずかに加筆・修正, 9/23 11:33, 11:52 少し加筆, 9/23 16:07 PSに加筆して まとめとした。)

  •  0
  •  0
Keys: ,