YouTubeで動画の周りを暗くして見やすくするブックマークレット

YouTubeで動画の周りを暗くして見やすくするブックマークレットを作りました。Google Chromeの拡張機能「Turn Off the Lights」のブックマークレット版だと思っていただれければいいと思います。

ブラウザの拡張機能に対し、ブックマークレットは必要なときのみ動作し重くならないので快適です。

使い方

まず適当なページでブックマークを作成した後、ブックマークを右クリックして編集画面を開き、名前欄には任意のタイトルを、URL欄には下のコードをコピペし保存してください。

1
javascript:(function(){var filter=document.getElementById('filter');var player_container=document.getElementById('player-container');if(!filter){var filter=document.createElement('div');filter.setAttribute('id','filter');filter.setAttribute('style','position:fixed;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:9998;');document.body.appendChild(filter);player_container.style.zIndex='9999';}else{document.body.removeChild(filter);player_container.style.zIndex='';}})()

YouTubeの再生画面を開いている状態で登録したブックマークを押すと、動画の周りが暗くなります。

解除するときはもう一度ブックマークをクリックしてください。

ソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
javascript:
(function(){
var filter = document.getElementById('filter');
var player_container = document.getElementById('player-container');
if(!filter) {
  var filter = document.createElement('div');
	filter.setAttribute('id','filter');
	filter.setAttribute('style','position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:9998;');
	document.body.appendChild(filter);
	player_container.style.zIndex='9999';
}
else {
	document.body.removeChild(filter);
  player_container.style.zIndex='';
}
})()

8行目のbackgroundのところをイジると、周りのフィルターを好きな色に変えられます。今回はフィルター部分を半透明にしたいのでrgba表記にしてあります。0.85の数値をイジれば透明度を変更できます。（1で真っ暗）

z-index戦争が勃発しているようにも見えますが、それは気のせいです。

JavaScript

HTMLだけでコンテンツを開閉できる<details>を試してみる

<details>タグはHTML5.1で追加されたタグで、コンテンツを開閉できるウィジェットを生成します。

概要

1
2
3
4
<details>
    <summary>日程</summary>
    2019年4月1日（月）開場：13:00
</details>
日程 2019年4月1日（月）開場：13:00

<details>の中には1つの<summary>タグ、そしてフローコンテンツに分類されるbody内で使われるほとんどの要素を置くことができます。

参考：フロー・コンテンツについて

装飾をしてみる

detailsを開くとopenという属性が付されるので、それを利用してCSSでカスタマイズしてみます。

装飾をしてみたテスト
CSSでアニメーションを付けてみました。



…




何も書くことがない！！ 
1
2
3
4
5
6
<details id="designed">
    <summary>タイトル（サマリー）</summary>
    <div class="details_content">
      ここに中身
    </div>
</details>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
summary {
  outline: none;
  cursor: pointer;
}

/*デフォルトの三角を消す */
summary::-webkit-details-marker {
  display:none;
}

/* 疑似要素で三角を付ける */
summary::before {
  display: inline-block;
  content: "▶";
  margin: 0 .3em 0 0;
  transform: rotate(0deg);
  transition: .2s transform ease;
}

details[open] summary::before {
  transform: rotate(90deg);
}

.details_content {
    background: #f5f5f5;
    padding: 16px;
    border-radius: 2px;
}

details[open] .details_content{
  animation: .8s details_content ease;
}

@keyframes details_content {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

今のところ、detailsタグ自体にはアニメーションを掛けられないので、中にdivを配置してそこにアニメーションを掛けることになります。

summaryをクリックしてコンテンツを閉じると、高さがすぐ0になってしまうので、閉じるときのアニメーションを付けることはできません。閉じるアニメーションがなくても不自然にならないよう、アニメーションの装飾は最低限に留めたほうがいいかもしれません。

まとめ

detailsタグはHTMLのみでコンテンツの開閉という動きを、WEBサイトにつけることができるので魅力的ですね。

HTMLでマークアップをする以上意味を考えなければならないので、単にコンテンツを開閉させたいのであれば、JavaScriptで実装する方が手っ取り早いと思います。

Webサイトのパーマリンクに使われる言葉の表記揺れと頻度

WordPressなどのCMSや静的サイトジェネレーターでサイトを作成すると、パーマリンクの設定が必要です。

このページではパーマリンクを決定する上でよく使われる言葉と、表記の揺れについてまとめました。

記事ページ

パーマリンクの構造

記事ページのパーマリンクは、

https://example.com/カテゴリー名/記事名
の形となるのが理想です。カテゴリーと記事の関係が階層構造によって表現されているからです。 しかし、記事のカテゴリーの変更と同時にURLも変わってしまうため、記事数が多くなったときにカテゴリーの整理をすることが難しい、というデメリットがあります。 固定ページと記事ベージの区別をつける必要があるなら、下のような構造にすることでデメリットを回避できます。
https://example.com/記事を表す英単語/記事名

記事を表す英単語

記事を表す英単語には種類があり、表記の揺れが存在します。一般的によくみられる単語と、それぞれの単語がルートの次のディレクトリで使われている件数をGoogle検索で調べてまとめました。

単語 件数
article 1,040,000,000
posts 666,000,000
post 359,000,000
articles 308,000,000
entry 110,000,000
entries 5,060,000

意味の違い

参考 Post, Entry or Article?

articleは新聞など、フォーマルな文体で特定の記事について言及しており、集合の一部分という印象があるようです。一方、postは短文でカジュアルな記事に向いていると言えそうです。

単数・複数形は表の件数を参考に決めてください。

カテゴリー・タグページ

単語 件数
category 8,510,000,000
categories 104,000,000
tag 2,490,000,000
tags 598,000,000

複数形は文字数が増え冗長になるのでURLでは避けられるようです。カテゴリー・タグとも単数形を使えば間違いないです。

アーカイブページ

単語 件数
archive 419,000,000
archives 291,000,000

アーカイブページについても単数形を採用しているページが多い結果となりました。

まとめ

パーマリンクの変更は、検索インデックスの影響やリダイレクトの問題を考慮しなければならないので、途中で変えることは困難です。パーマリンクはサイトを開設したらなるべく早めに設定しましょう。