小技チョコレート

ちょっとした小技を紹介するだけのブログです。

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

YouTube Musicで「高く評価」した曲は、それと同じアカウントでYouTubeを開いた際に、〈YouTubeにおける「高く評価」した動画〉の一覧の中に含まれています。
したがって、後者をエクスポートすれば、その中に含まれた形でエクスポートされることになります。

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

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

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

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

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

ブラウザの拡張機能“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}

関連記事

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

Evernoteのブラウザ版で外部リンクを開くときの「Evernoteの外に移動します」ページをスキップする方法

Evernoteのブラウザ版(Evernote Web)で外部リンクを開こうとすると、このような転送ページが表示されます。

この転送ページをスキップして(=とばして)、外部リンクをすぐに開くようにする方法を紹介します。

必要なもの

ブラウザの拡張機能“Tampermonkey”(Chrome拡張機能Firefoxアドオン)を使います。Chrome拡張機能Firefoxアドオンのどちらかが利用できるブラウザが必要です。

設定の手順

ブラウザに、上述のTampermonkeyをインストールします(※以降はChromeの場合で説明しますが、Firefoxアドオンを使っている場合も、操作は同じだと思われます)。

ブラウザのツールバーに表示されたTampermonkeyのアイコンをクリックして開くウィンドウの中の「新規スクリプトを追加」をクリック。

この画面が開きます。

その画面で、中央の入力欄に表示されている文字を全て消します。そのうえで、下記のスクリプト(出典はこちら)を、その入力欄にペーストします。

// ==UserScript==
// @name         Evernote Outbound Clicker
// @namespace   http://harristribe.co.uk/
// @version      1.0
// @description  Avoids the evernote outbound page 
// @author       Rob Harris
// @include     https://www.evernote.com/OutboundRedirect.action*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    var urlParams = new URLSearchParams(window.location.search);
    window.location.href = urlParams.get('dest');
})();

ペーストしたら、左上にある「ファイル」メニューを開き、「保存」をクリック。

すると、この画面になります。Tampermonkeyの画面は閉じてもかまいません。

以降は、Evernoteのブラウザ版で外部リンクをクリックすると、「Evernoteの外部へ移動します」という転送ページは見えなくなり、すぐにリンク先のページが開かれるようになります。

SpotifyをIFTTTで自動化するとできる52のこと

IFTTTを使うと、Spotifyに関する様々なことが自動化できます。
IFTTTサイト内に列挙されている自動化のサンプルや、筆者が作成した自動化のなかから、52個を紹介します。

IFTTTの使い方については当ブログのIFTTT / Zapier カテゴリーの記事などをご参照ください。


〈目次〉


「お気に入りの曲」に追加した曲の記録をとる

※「お気に入りの曲」に追加するというのは、Spotifyで曲名の横などにある「丸の中に十字」の形のアイコンを押すことです)。

再生した曲の記録をとる

曲の発見

ポッドキャストの発見

他の音楽サービス/動画サービスなどとの連携

YouTube / YouTube Music

SoundCloud

その他のサービス

Alexa/Googleアシスタントとの連携

SNSなどへの投稿

その他

Spotifyに関するIFTTTの機能追加のお知らせを受け取る


*1:「“My Library”に保存する」とは、各プレイリストのタイトルの下などにある「丸の中に十字」の形のアイコンを押すことです。

*2:ShazamのiOSアプリならば、IFTTTを使用しなくてもこの機能を実現できます(他のOSのShazamアプリでも同様かもしれませんが未確認です)。

*3:ポッドキャストを「お気に入りのエピソードに追加する」とは、Spotifyポッドキャストの各配信回の右下などにある「丸の中に十字」の形のアイコンを押すことです。