💰お前らのゴールデンウィークはゴールドじゃない💰


**ゴールデンウィークがゴールドじゃない**のでちゃんとゴールデンウィークにする話です。

ということで、今年もGWアドベントカレンダーが立ち上がっていましたね。[何の役にも立たないプロトタイプ](https://gw-advent.9wick.com/calendars/2022/122)のアドベントカレンダーの参加記事です。

（思ったより伸びてるので番宣: 普段は[プロトタイピング専門スクール](https://note.com/n0bisuke/n/n214f041ee558)の運営をしています。）

## 黄金週間

着手前にゴールデンウィークのゴールデンって僕らの思ってるゴールドなんだよね？と疑問に思いました。

疑心暗鬼。

[ウィキペディア](https://ja.wikipedia.org/wiki/%E3%82%B4%E3%83%BC%E3%83%AB%E3%83%87%E3%83%B3%E3%82%A6%E3%82%A3%E3%83%BC%E3%82%AF)によると

> ゴールデンウィークまたはゴールデンウイーク（和製英語: Golden Week, GW）とは、日本において毎年4月末から5月初めにかけて休日が続く期間のこと。春の大型連休（おおがたれんきゅう）、黄金週間（おうごんしゅうかん）[1]ともいう。

らしいです。ちゃんとゴールデンウィークは黄金（ゴールド）から由来しているらしいです。

## ゴールデンウィークって言ってるけどゴールドじゃない

ということで、ゴールデンウィークは黄金なはずですが

**ぜんぜんゴールドじゃないわけです。**

> 白か灰色ですね。
> ![スクリーンショット 2022-05-02 21.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/e8817f48-9d94-322d-aaaa-ef21aeabca9c.png "スクリーンショット 2022-05-02 21.40.40.png")

なのでこれを **ゴールドにします。** (カレンダー的に)

> あくまでもイメージです。
> ![スクリーンショット 2022-05-02 21.58.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/730563eb-3038-15ba-8bcd-8787e98d0a8b.png "スクリーンショット 2022-05-02 21.58.37.png")

ということで、[このカレンダー](https://gw-advent.9wick.com/calendars/2022/122)をゴールドに近づけてみます。

## ゴールドってそもそも何色だ...問題

さて作っていきますが、ゴールドってWebで表現できるのだろうか......

と、調べるとこんな感じの記事が出てきて近いものを再現してくれてますね。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/9ddbfbe3-5d29-ce21-9525-26ad8b0766d5.png" width="400px" />
> 
> [CMYK・RGBで金色（ゴールド）、銀色（シルバー）を表現する配色パターン10選](https://mt-fc.net/gold_and_silver#C25_M35_Y80_K0)

`#CAA846`は確かにゴールドっぽいです。

ということでJavaScriptで要素変更してみます。

```js
//背景を変える
document.body.style.backgroundColor = '#CAA846';

//カレンダーの部分の要素を変える
const body = document.querySelector('article');
body.style.backgroundColor = '#CAA846';
```

お、それっぽくなったんじゃないですかね?

> ![スクリーンショット 2022-05-02 22.06.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/213f6a08-4b58-9520-3a50-77fe1390a1eb.png "スクリーンショット 2022-05-02 22.06.02.png")

## 「全然ゴールドじゃない」と言われる

[@tkyko13](https://qiita.com/tkyko13)さんに見せてフィードバックもらったところゴールドじゃないと言われました。

**確かにゴールドというか黄土色ですよね......**

ここで **ゴールドって光が当たることでゴールドなんだな**ということに気付きました。

調べると立ち向かってる先人が

> [CSSで色を限りなくゴールドやシルバーに近づける](https://qiita.com/7note/items/6295807a451b6dbf2404)

**グラデーションを入れることでゴールドっぽく見えるんですね。**

CSSだとこう表現できる模様です。

```css
div {
	background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}
```

CSSの関数の[linear-gradient()](https://developer.mozilla.org/ja/docs/Web/CSS/gradient/linear-gradient)を使うことで再現できるみたいですね。

僕の場合はこのゴールデンウェークを黄金にしたいのでJavaScriptから制御できないか調べましたが、こちらも先人が。

> [CSSのGradientをJSで上書きする際のCross Browser対応](https://zenn.dev/012/articles/b6ef35b68e0e1494141e)

ということでこんな感じのコードで実現できました。

```js
const COLOR = `linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%)`;
document.body.style.background = COLOR;

const body = document.querySelector('article');
body.style.background = COLOR;

//ついでにナビゲーション部分も
const nav = document.querySelector('nav');
nav.style.background = COLOR
```

> ![スクリーンショット 2022-05-02 22.35.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/97df35ae-8071-1505-87f1-58e67acb254a.png "スクリーンショット 2022-05-02 22.35.09.png")

**だいぶゴールドになったでしょ。**

## もっと手軽にゴールドにしたい......

**手軽にゴールドにしたいですよね。**

ワンクリックでゴールドにできるようにブックマークレットにしてみます。

> 参考: [Bookmarkletを作ろう(準備編）](https://qiita.com/kanaxx/items/63debe502aacd73c3cb8)


```js
javascript:(
    function(){
    	const COLOR = `linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%)`;
		document.body.style.background = COLOR;
		const body = document.querySelector('article');
		body.style.background = COLOR;

		const nav = document.querySelector('nav');
		nav.style.background = COLOR;
    }
)();
```

これをブックマークに仕込めばOKです。

> ![スクリーンショット 2022-05-02 23.39.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/f2b4b639-8231-046f-322d-0136462f904a.png "スクリーンショット 2022-05-02 23.39.19.png")

ブックマークにコードをそのまま仕込みます。

## ということで完成！

ちゃんと動画作ってみたので見て！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ゴールデンウィークがちゃんとゴールデンになりました。<a href="https://twitter.com/hashtag/GW%E3%82%A2%E3%83%89%E3%83%99%E3%83%B3%E3%83%88%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#GWアドベントカレンダー</a><a href="https://t.co/WsWGNMi6d1">https://t.co/WsWGNMi6d1</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a> <a href="https://t.co/haF6PA3Mk1">pic.twitter.com/haF6PA3Mk1</a></p>&mdash; 菅原のびすけ (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/1521131099228831746?ref_src=twsrc%5Etfw">May 2, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## おまけ。シルバーウィークにも対応してみた

無意味にシルバーにも対応してみました。

```js
javascript:(
    function(){
		const COLOR2 = `linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%)`;
		
		const nav = document.querySelector('nav');
		const body = document.querySelector('article');
		
		nav.style.background = COLOR2;
		body.style.background = COLOR2;
		document.body.style.background = COLOR2;
    }
)();
```

> ![スクリーンショット 2022-05-02 23.19.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/7920c683-14fc-fbcf-6575-115d345996c3.png "スクリーンショット 2022-05-02 23.19.49.png")

二つ並べるとめちゃ便利です。ゴールデンウィークとシルバーウィークをボタン一つで切り替えられます。

> ![](https://i.gyazo.com/73f20aac603afb7adacdf8b4e330fdbf.gif)

## おわりに

何の役にも立たないであろう。