【簡単にできる】ブックマークレットのすゝめ【初心者向け】

こんにちは、@len_crow です。

DMM WEBCAMP Advent Calendar 2020 9日目の記事になります。

初めてアドベントカレンダーに参加してから3年目になりました。月日が経つのは早いですね。

さてこの記事では、**ブラウザのブックマークバーから簡単に実行できるブックマークレット**について紹介をします。

## ブックマークレットって？

ブックマークレットとは、ブラウザのブックマークから起動できるプログラムのことです。
普段みなさんが使われているブックマークはページなどを保存しておき、クリック1つですぐにページを開くことができるもの。
そこにプログラムを入れることができるというわけです。

どんなことに使われているのかというと、

- [【Bookmarklet】ブラウザ上で黒丸非表示になっているパスワードの中身をワンクリックで表示させる](https://qiita.com/aqril_1132/items/10d6934da27b171a1e2e)
- [現在日時を取得して、クリップボードにコピーするブックマークレット](https://qiita.com/QDM/items/f2bd23565909b6a102bf)

などWeb上のちょっとした機能や効率化ができる機能を作ることができます。

また、スマホでも問題なく使えます。

自分が作ったブックマークレットもあります。

- [WACCAスコアソート](https://github.com/saezurucrow/wacca-score-csv/blob/master/README/wacca-score-sort-readme.md)

これは、自分がよくプレイしているWACCAという音楽ゲームの公式サイトのマイページ上で使用できるものになります。(詳しくはリンク先をご覧ください。)

ではどのように作成していくのか、順を追って説明していきましょう。

## 作成方法

今回は簡単に「**現在時刻をアラートする**」ブックマークレットを作成していきましょう。

### 使うもの

- GoogleChromeなどのウェブブラウザ
- GitHub


### ブックマークにプログラムを登録する

(ブラウザはGoogleChromeを使用しています。Safari,FirefoxやMicrosoft Edgeでも動きます。)

ブックマークバーで右クリックをし、赤枠の「**ページを追加(G)**」をクリックします。
![スクリーンショット_2020-11-30_15_52_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/9683e15e-dcf9-f72d-9dc0-d566b34fd0c4.png)

するとページの追加画面が出てきます。

![スクリーンショット 2020-11-30 15.54.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/5cc36aaf-56b8-be3e-5953-e975e860ed64.png)

名前は特に決まりはないので、「**現在時刻アラート**」としましょう。

次にURL欄に以下のコードを記入します。

```:bookmarklet
javascript:(function(){const date=new Date();alert(date);})();
```

上記のコードは何をしているのかというと、
URL内で`javascript:`と記入するとそれ以下はjsのコードとして認識されます。

その後、`function()`の命令が実行されてアラートが表示されるといったものになります。

完成形はこちらになります。
![スクリーンショット 2020-11-30 16.13.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/4d2a103a-3303-c3aa-8b8e-76cf5b52fae5.png)

### 実行する

ブックマークバーにある「**現在時刻アラート**」をクリックしたら現在時刻をアラートしてくれます。
![スクリーンショット 2020-11-30 16.21.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/2602ffd4-3b95-5340-4ef5-d19f9da1b3cd.png)
![スクリーンショット 2020-12-03 23.11.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/52483e1d-5f8a-121b-bba9-f5a33f24bc49.png)
(Google Chromeの新しいタブ画面ではうまく実行されません。どこか新しいページに移動してから実行しましょう。)


整形したコードを入れた方が楽なんじゃないかという意見があると思います。
実際にはどちらとも動くので問題はないのですが、以下みたいに「LF」という改行コードが現れてしまい見た目的に綺麗ではないので1行にしています。

![スクリーンショット 2020-11-30 16.13.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/abaa203a-2306-a310-f918-996158de1f8e.png)

これだけでも完成なのですが、このままだとコードを間違えた時に修正するのが大変面倒ですので、コードを別の場所で管理するようにしましょう。

### JSのコードをデプロイする

今回はデプロイ先として「**GitHub Pages**」を用いてコードを別の場所に保管しましょう。

まずは上記のコードをGitHubにあげましょう。
(Git、GitHubについて知らない方は[Gitを触り始めてからGitHubにpushするまでの流れを誰よりも丁寧に説明する](https://qiita.com/gakisan8273/items/6ebaf9217d140ff1f031)をご覧になるといいかもしれません。)

```js:alert.js
const date = new Date();
alert(date);
```

こんな状態になっていたらOKです。
![スクリーンショット 2020-11-30 17.14.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/589ea35c-3db5-7bd2-02b2-ebfe08c708f2.png)

そしたら「**Settings**」から「GitHub Pages」を探します。

![スクリーンショット 2020-11-30 17.28.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/99687641-1676-84c2-98c5-0150c85c2b18.png)

Source欄にある「None」を「main」(ブランチ名)に設定し「Save」をクリックします。
以下の状態になっていたらデプロイ完了です。

![スクリーンショット 2020-11-30 17.29.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258797/f1664cd4-3fc3-c057-7f06-1ab55282b10d.png)

あとは実際にURLに飛んでみて、JSのコードが表示されていれば正常にデプロイができています。

https://saezurucrow.github.io/CurrentTimeAlertBookmarklet/alert.js
 (後ろにファイル名をつけるのを忘れずに！)

### ブックマークレットからJSを呼び出す

最後にブックマークレットのURL欄からデプロイしたJSを呼び出すようコードを修正しましょう。

以下のコードをURL欄に上書きしてください。

```:bookmarklet
javascript:(function(url){s=document.createElement('script');s.src=url;document.body.appendChild(s);})('デプロイしたURL');
```

整形するとこんなかんじです。

```js
javascript:(
function(url) {
  s = document.createElement('script');
  s.src = url;
  document.body.appendChild(s);
}
)('デプロイしたURL');
```

上記のコードでは、まず`javascript:`でJSを使えるようにし、`function(url)`を起動させます。
`s = document.createElement('script');`でHTML内に`<script>`タグを生成させて、src内の属性値をurlに設定します。
次に`document.body.appendChild(s);`で生成した`<script>`タグを今開いているページの`<body>`内にに追加します。
そうすることにより、デプロイしたJSのコードがすぐに実行されます。

保存をして、同じ実行結果が得られるか確認をしてみましょう。

一度URLを設定してしまえばあとはGitHubを更新をすれば処理が変わるのでとても便利です。

<br>

以上がブックマークレットの作成方法になります。

みなさんのちょっとしたアイデアを、このブックマークレットで活かしてみませんか？