YouTube Musicをデスクトップアプリケーションとして利用する方法

Windows / macOS / Linuxのいずれでも利用できるものが4つあり、Linuxのみ対応のものが2つあります。

---

〈目次〉

---

Windows / macOS / Linuxのいずれでも利用できるアプリケーション

Google Play Music Desktop Player

Google Play Music Desktop Player（GPMDP）は、その名のとおりGoogle Play Music用のデスクトップアプリケーションですが、YouTube Music用のデスクトップアプリケーションとして利用することもできます（GPMDPが備えている機能については後述）。

Google Play Music Desktop PlayerでYouTube Musicを利用する方法

GPMDPをインストールし、起動します。

Windowsの場合は、システムトレイに表示されているGPMDPのアイコンをマウスで右クリックし、そこに表示されたメニューの中の“YouTube Music”を選択すると、このアプリの表示内容がYouTube Musicに切り替わります。

Linuxの場合は、パネルに表示されているGPMDPのトレイアイコン（下記の画像では右から3個目）をマウスで右クリックし、そこに表示されたメニューの中の“YouTube Music”を選択します。

Google Play Music Desktop Playerの機能

GPMDPでYouTube Musicを開くと、GPMDPが備えている機能を、YouTube Musicの利用中にも使えるようになると思われます。GPMDPの設定画面に表示されている機能のうち、主なものはこちらです（YouTube Musicの利用中に、これらの機能の全てが使えるかどうかは、未確認です）。

• ホットキー（キーボードショートカット）
  • 再生・一時停止／停止／前の曲／次の曲／高く評価／低く評価／音量を上げる／音量を下げる／再生中の曲の情報をデスクトップ通知で表示
• ウィンドウを閉じたらシステムトレイに最小化する
• OSの起動時に自動で起動する
• 起動中はコンピュータをスリープさせない
• 音声によるコントロールをする
• JSON APIを有効にする
• Playback APIを有効にする
• 起動時には、前回の起動時に最後に表示していたページを自動で開く
• 再生中に歌詞を表示し、自動でスクロールする
• Discord Rich Presence integration
• メニューを日本語以外で表示する
• ミニプレーヤー
• Last.fmとの接続
• ListenBrainzとの接続
• Experimental support for multiple audio channels such as 5.1 audio
• 低く評価した曲を自動でスキップ

Google Play Music Desktop Playerにダークテーマを適用する方法

上述の画像にもあるように、GPMDPでYouTube Musicを使う場合は、GPMDPにダークテーマを適用せよというアナウンスがされています。それを無視しても、GPMDPでYouTube Musicを問題なく使えますが、ダークテーマを適用する方法も一応紹介しておきます。

GPMDPの左側のサイドバーを開いて、「デスクトップ設定」をクリック。

“Settings”というウィンドウが開くので、中央あたりにある「カスタムテーマを使用する」にチェックを入れ、その下に表示される選択欄で「ダーク」を選択。これでダークテーマになります。

Linuxにおけるトラブルシューティング（1） トレイアイコンが表示されない

LinuxにおいてGPMDPのトレイアイコンが表示されていなかったり存在しない場合に、GPMDPをYouTube Musicに切り替える方法は、開発者からこちらのようにアナウンスされています（下記に抄訳）。

~/.config/Google Play Music Desktop Player/json_store/.settings.jsonの3つのプロパティを下記のように変更してから、GPMDPを起動。

{
    "service : "youtube-music",
    "theme : "true",
    "themeType : "FULL",
}

Linuxにおけるトラブルシューティング（2） Cinnamonでトレイアイコンが表示されない

Linuxのデスクトップ環境がCinnamonであるときに、GPMDPのトレイアイコンが表示されない場合があるようです。

その場合、Cinnamonのアプレットとして「サウンド」（sound@cinnamon.org）をインストールし、

このアプレットの設定画面で“Hide system tray icons for compatible players”のオンとオフを交互に切り替えてみると、それまで表示されていなかったGPMDPのトレイアイコンがパネルに表示されるようです。

その他のアプリケーション

• YouTube Music Desktop App
• minimalytm
• playme: Elegant YouTube Music desktop app

いずれも、筆者は実使用をしていませんので詳細は分かりません。

Chromeアプリとして開く

Google Chromeをインストール済みであれば、Chromeの独立のウィンドウとして開くことができます。

Linuxのみで利用できるアプリケーション

• youtube-music-desktop
• YouTube Music Desktop App bundled with custom plugins (and built-in ad blocker)

いずれも、筆者は実使用をしていませんので詳細は分かりません。

YouTube Musicで「高く評価」した曲の情報を自動でエクスポートする方法

YouTube Musicで「高く評価」した曲は、それと同じアカウントでYouTubeを開いた際に、〈YouTubeにおける「高く評価」した動画〉の一覧の中に含まれています。

したがって、後者（YouTubeにおける「高く評価」した動画の情報）をエクスポートすれば、その中に含まれた形でエクスポートされることになります。

IFTTTを使うと、それが実現します。下記の記事で説明しています。

Googleスプレッドシートにエクスポートする

Evernoteの特定のノートにエクスポートする

YouTubeで「高く評価」した動画の情報をEvernoteの1個のノートに保存する - 小技チョコレート

Pocketに保存する

曲（動画でないもの）の場合も、YouTubeの動画と同じようにPocketに保存されます（下記の画像の左側のように）。

はてなブックマークに投稿する

翌日の天気予報が雨のとき、前日のうちにAndroid端末 / iOS端末で通知を受け取る方法

翌日の天気予報が雨のとき、前日のうちに、Android端末 / iOS端末でその通知を受け取る方法を紹介します。

---

〈目次〉

---

機能

• 通知の配信は1日に1回のみです。
  • 〈降雨〉を含む天気予報が発表されてから30分後くらいまでには、通知が届くと思われます。
  • 「晴れのち雨」や「雨時々曇り」のように、天候の一部に〈降雨〉を含むだけの場合も、通知の対象になります。
• 通知で受け取れる情報はこちらの4つです。
  • 【明日は雨が降ります】というメッセージ
  • 翌日の日付
  • 雨の種類：Rain（継続的な雨）、Showers（にわか雨）、Light Rain（小雨）など。
  • 通知をタップすると、翌日の天気予報が載っているウェブページ（Weather Undergroundのサイト内）がブラウザで開きます（例）。
• 雨予報の対象として指定できる地点は1つのみです。
  • 市町村単位、または都道府県単位で指定することができます。
• 天気予報の提供元は、Weather Undergroundという海外のサイトです。
• 利用は無料で、広告もありません。
• 2台以上のAndroid端末 / iOS端末で通知を受け取りたい場合は、1台の端末で下記の設定を終えた後であれば、2台目以降の端末では、後述のIFTTTのアプリをインストールしてIFTTTにログインするだけで、設定どおりに通知を受け取ることができます。

通知のサンプル

上から2個目のもの。Android5.1の場合です。

必要なもの

• IFTTTというサービスを使うので、IFTTTのアカウントが必要です（無料。アカウント登録には、メールアドレス / Facebooアカウント / Googleアカウントのどれか1つが必要）。
• 通知を受け取る端末に、IFTTTのAndroidアプリまたはiOSアプリをインストールしておく必要があります。

設定の手順

設定の作業をAndroid端末 / iOS端末でおこなう場合が多いでしょうから、ここからは、IFTTTのAndroidアプリ / iOSアプリを使って設定をする場合の手順を示します。これと同じことをウェブブラウザ（PC）から実行することもできます。

本記事はAndroidアプリを使った場合のスクリーンショットや操作方法を掲載していますが、iOSアプリでもおそらく同じ手順で実行できると思います。

IFTTTのアプリのインストール

IFTTTのアプリを、Google PlayストアまたはiTunesストアからインストールします。

IFTTTへのログイン / アカウント登録

IFTTTのアプリを起動します。
起動した最初の画面はこのようになっています。右へスクロールしていくと、ログインやアカウント登録をする画面になります。

GoogleまたはFacebookのアカウントでログイン / アカウント登録をする場合はそれぞれのボタンをタップ。
メールアドレスでログインする場合は右下のsign inを、メールアドレスでアカウント登録をする場合はsign upタップ。

アプレット適用する

IFTTTのアプリを起動し、右上にある虫眼鏡のアイコンをタップ。

画面が変わり、上部に検索フォームが表示されます。
この検索フォームに、半角のローマ字でkiftjpと入力してEnterキーを押します。
すると、検索結果としてこの画像のように青色の四角が表示されるはずです（もし検索結果が正しく出なければ、https://ifttt.com/applets/NnkQqpjJ-android-iosをIFTTTのアプリで開いてください）。

この青い四角をタップします。すると、次の画面に変わります。

この画面になります。これを下にスクロールしていきます。

画面の一番下に、白字で“Turn on”と書いてあるところがあります。

この白い字をタップします。すると、字の左にあった丸が右に動き、“On”という表示に変わります。

次に、この画面が表示されます。

これを下にスクロールしていきます。

“Receive notifications when this Applet runs”と書いてあるところの右側にスライド式のスイッチがあります。このスイッチはオフにしておきます（この画像はオフの状態。スイッチが右端にあるとオンです）。

“Weather Underground”の欄にて、雨予報の対象とする地点を指定します。

”Set to your current location”をタップすると、GPSなどの位置情報をもとに、その端末がある地点の地名・市町村名が入力されます。

位置情報による指定がうまくいかない場合や、現在地以外の場所を指定したいときは、次のようにして手動で地点を指定します。

上の画像で“Search for your location”と書いてある入力欄に、雨予報の対象として指定したい地名を、半角のローマ字で入力します。ある程度の人口がある都市名や市町村名を入力するとよいでしょう。

ここでは、例として名古屋市を指定するつもりでnagoyaと入力しています。
地名を入力すると、黒いポップアップの中に候補が出てきます。1行目の“Nagoya, 愛知県 日本”が名古屋市を意味しています。3行目のものも名古屋市内です。
この黒いポップアップは下にスクロールできるので、画面上では隠れている候補にもすべて目を通したほうがよいと思います。

候補のなかから1つをタップすると、このように入力されます。

画面の一番下にある“Save”のボタンをタップ。すると、次の画面に変わります。

このように“Your Applet is turned on!”というメッセージが表示された画面になれば、設定は完了です。IFTTTのアプリは閉じてもかまいません。

以降は、翌日の天気予報に〈降雨〉が含まれているときには、その前日に通知が届きます。

配信された通知の履歴を見る方法

IFTTTのアプリを起動すると、画面の一番下に3つのアイコンが並んでいます。その中の中央のもの（Activity）をタップし、画面が変わったら、画面上部の鈴の形のアイコンをタップ。そこに通知の履歴が表示されています。

履歴の画面では、通知の内容は英語で表示されるようです。

地点を確認 / 変更する方法

IFTTTのアプリを起動し、画面の一番下に並んでいる3つのアイコンのうちの右端のもの（My Applets）をタップします。

画面が変わったら、画面上部の“Services”をタップ。そして下の方にスクロールしていくと、こちらの画像のように“Weather Underground”のロゴがあるはずです。

中央下部に“Weather Underground”。これをタップします。すると、次の画面に変わります。

このような画面が表示されるので、右上の歯車の形のアイコンをタップ。

すると、次の画面に変わります。雨予報の対象として指定されている地点をここで確認できます。

地点を変更する場合は、左下にある“Edit”のボタンをタップします。すると、次の画面に変わります。

以降の手順は、上述の手順と同じです。

新しい地点が入力されたら、“Save”のボタンを押して完了です。

通知の配信を停止 / 再開する方法

IFTTTのアプリを起動し、画面の一番下に並んでいる3つのアイコンのうちの右端のもの（My Applets）をタップします。

画面が変わったら、この画像のように、雨予報の設定が青い四角形で表示されているので、この四角形をタップします。

すると、この画面に変わります。これを下にスクロールしていきます。

黒字で”On”と書いてあるところをタップします。

すると、その右側にある緑色の丸が左に動き、画面全体が灰色に変わります。

これで、通知の配信は止まります。

通知の配信を再開したいときは、この画像で白字で“Off”と書いてあるところをタップします。すると表示が”On”に変わり、配信が再開します。

関連記事

翌日の雨予報をメールで受け取る方法もあります。

Pushbulletというアプリケーションで通知を受け取る方法もあります。

• 翌日の天気予報が雨のとき、前日のうちにPushbulletで通知する

ブラウザの拡張機能“Stylus”の使用例

ウェブブラウザの拡張機能（アドオン）である“Stylus”（Chrome版 / Firefox版）を使って、ウェブサイトの見た目を変えることができます。この記事では、そのサンプルを紹介します。

Stylus自体の使い方の解説は、下記の記事をご覧ください。

---

〈目次〉

---

Twitter

PCブラウザ版で左側のサイドバーをスクロールするためのスクロールバーを消す

ただし、これを適用すると、サイドバーにおいて画面外にはみ出している部分は見えなくなります。

header[role=banner] div{overflow-y:hidden}

適用前

適用後

タイムラインに表示されているツイートのフォントサイズを変える

.TweetTextSize{font-size: 15px !important}   /* 15pxにする場合 */

Web版のTwitterで「＃ 話題を検索」・「トレンド」・「おすすめユーザー」・「フッター」を非表示にする

下記の各タイトルにて「新UI」とあるものは、2019年1月頃から使えるようになった、Web版のTwitterの新しいUI（これまたはこれ）において適用するCSSであることを示しています。
「旧UI」は、それ以前からあるUI（これ）を指しています。

「話題を検索」を非表示にする（新UI）
画面の左上のほうにある「＃ 話題を検索」を非表示にします。

a[aria-label="調べたいものを検索"]{display:none}

「トレンド」を非表示にする（新UI）
タイムラインの右側に表示される「トレンド」を消します（スクリーンショット）。

div[aria-label="タイムライン: トレンド"]{display:none}

「トレンド」を非表示にする（旧UI）

div.Trends{display:none !important}

おすすめユーザー」を非表示にする（新UI）

aside[aria-label="おすすめユーザー"]{display:none}

「おすすめユーザー」を非表示にする（旧UI）

div.wtf-module{display:none !important}

「フッター」を非表示にする（新UI）
フッターとは、これのことです。

nav[aria-label="フッター"]{display:none}

「フッター」を非表示にする（旧UI）

div.Footer{display:none !important}

「トレンド」欄内の広告を消す（旧UI）

「トレンド」欄の中の、このような広告部分が消えます。

li.promoted-trend{display:none}

左下のアカウント表示を消す

Web版のTwitterで左下にある、アカウント名の表示部分（クリックするとアカウント切り替えのメニューになる部分）を非表示にします。

div[data-testid=SideNav_AccountSwitcher_Button]{display:none}

「○○さんがフォローしています」をPCのブラウザにおいて非表示にする

別の記事で解説しています。

サイドバー内の“Twitter Blue”を非表示にする

（この“Twitter Blue”を非表示にします）

a[href="/i/twitter_blue_sign_up"] {
    display: none;
}

DuckDuckGoの検索結果の横幅を変える

DuckDuckGoの検索結果が表示される部分の横幅は、設定画面の「外見」のタブの「ページ幅」のところで3段階に変えられますが、3つのどれを選んでも、幅が狭すぎたり広すぎたりしているかもしれません。

（DuckDuckGoの設定画面）

Stylusで次のようにCSSを適用すれば、望み通りの横幅を指定できます。この例は750pxにする場合です。

.c-info, .c-base, .c-icon, .c-list, .c-product, .c-detail, .zci__main.has-aux, .zci__main--answer, .results--main, .zcm-wrap--header{max-width:750px}

（適用前：設定画面で「普通」を選択した状態）

（適用後）

Evernote Web

Evernote Webで外部リンクにマウスカーソルを合わせたときのポップアップを非表示にする

div#gwt-debug-FloatingLinkBar-root{display:none !important}

Wikipediaのダークテーマ

不完全なところはありますが、おおむね使えるかなと思います（※最終更新：2019/01/23）。

li.selected, li.new, li.collapsible,li#ca-nstab-user,li#ca-talk, div.boilerplate, div.afd, div.vfd, div.xfd-closed, .toccolours, table.infobox td{background-image:none !important;background-color:#333 !important;border:none !important}
div#template-documentation, div.template-documentation{background-color:#333 !important}
.toccolours{border:solid 1px #ddd !important}
div.boilerplate, div.afd, div.vfd, div.xfd-closed{border:solid 1px #ddd}
.VectorTabs ul{background-image:none !important;border:none !important}
/*div#content{border-top-width:1px !important}*/
body, div#content, div#mw-page-base,div#toc,table.infobox,h1,h2,h3,h4,h5,h6,h7{background:#333;color:#ddd}
a:link{color:#3E93C3 !important}
a:visited{color:#9760C3/*#883EC3*/ !important}
a.new{color:#ba0000 !important}
table.ambox, .referencetooltip li,div.catlinks,table.nowraplinks tbody,div.navbox,div.thumbinner,table.tmbox,tabletmbox-content,table.plainlinks,table.wpb-outside{background-color:#333}
.referencetooltip li{border:solid 1px #ddd}
cite:target, li:target{background-color:#333 !important;border:solid 2px #def}

Dynalist

フォントを変える

特にDynalistをFirefoxで開いたときに、Dynalistの設定画面でフォントをsans-serif系（メイリオなど）に変えても、表示はserif系（明朝体系）のままであることがあります。その際は下記のようにするとフォントを変えられます。

*{font-family:sans-serif}  /*sans-serifにする場合*/

背景色を変える

ヘッダーとサイドバーの背景色は変わりません。

div.main-container{background-color:#ddd}  /* #dddにする場合 */

適用例

ヘッダーとサイドバーの背景色を変える

設定画面でテーマとして“Dark”を選択したときの本文部分の背景色（#181818）をヘッダーとサイドバーにも当てはめる場合の例で示します。

/*ヘッダー*/
.AppHeader {
    box-shadow: none;   /* 影を消す */
    background: #181818;   /* #181818 にする場合*/
}

/*サイドバー*/
.is-desktop .LeftPaneSlidebarContainer {
    box-shadow: none;   /* 影を消す */
}
.is-desktop .LeftPaneContainer-nav {
    background: #181818;   /* #181818 にする場合*/
}
.is-desktop .LeftPaneContainer-navItem {
    background: #181818;
}

適用前

適用後

マウスでクリックした行／マウスカーソルがある行の背景色を変える

div.is-hovering{background-color:#ccc}  /*#cccにする場合*/

選択した文字列の背景色を変える

::selection{background-color:#0000ff !important}  /* #0000ffにする場合 */

ドキュメントペイン（サイドバー内）で各ドキュメントの行頭にあるアイコンを隠す

.DocumentItem-icon.pane-item-icon{display:none}

.DocumentItem-header.pane-item-header{padding-left:0}   /* アイコンが消えた部分の余白を切り詰め、ドキュメントタイトルを左端に寄せたい場合は、この行も加える */

ブックマークペイン（サイドバー内）で各ブックマークの行頭にあるアイコンを隠す

.BookmarkItem-icon.pane-item-icon{display: none}

行頭の縦線を消す

下記の画像のb, cの行のように、ある項目の下位項目である行の行頭に縦線が表示されますが、これを消します。

div.Node-children{border-left:none}

Gmail

フォントサイズを変える

body *{font-size:14px !important}  /* 14pxにする場合 */

note（note.mu）

Serif（明朝体系）のテキストもSans-serif（ゴシック系）で表示する

.body-wrapper p{font-family:sans-serif !important}

関連記事

同様の記事として、こちらもあります。