どうもこんばんわ。
恋にはあまえが必要です ～もっとあまえるだけミニファンディスク、恋にはあまえが必要です ～もっとあまえてもらうだけミニファンディスク 攻略しました。

みじかい！！！もっと見たかった
一番最後が HOOK って感じがしてとてもよかった！！！

おさげだ！！

イベントCGが気になって結局両方買ってしまった。。。

本題

世の中にはブックマークレットと呼ばれてるものがあります。
これは何かというと、ブラウザのブックマークの仲間で、普通はブックマークといえばURLを保存するものですが、任意のJavaScriptコードを保存することが出来ます。
ブックマークを押したらURLが開きますが、ブックマークレットは押したら中にあるJavaScriptのコードが実行できます。

ブラウザ拡張機能のしょぼい版。しかし！スマホのブラウザ（Android Chrome）では拡張機能動かない一方で、ブックマークレットは動くので何かと便利かも。
ぱっと思いついたのでも

• 全画面表示にするブックマークレット（requestFullscreen呼ぶだけ）とか
• 動画をループ再生させるブックマークレット（<video>のloopをtrueにするだけ）
• QRコードを表示するブックマークレット

とかあるので、色々面白いことがスマホのブラウザでもできそう。そうスマホのブラウザでもね！

例

例えばコレが全画面表示にするブックマークレット。
javascript:から始まってて、かつスコープを汚さないよう即時関数の中に入ってますね。

javascript:(function(){ document.documentElement.requestFullscreen() })();

てなわけで、この中に好きなJavaScriptを書けば良さそうですね。

javascript:(function(){ /* ここに好きなのを書けばいい */ })();

モダンな技術を使いたい

さて本題。
本当に全画面表示にするだけなら1行ですが、
今日のJavaScriptでのWeb開発ではnpmからライブラリを入れるだの、TypeScriptで書くのが当たり前で、JavaScriptをつらつらと書いていくのは時代に合わないって？

なんならnpmでライブラリを入れてTypeScriptでブックマークレットが書きたいだって？

というわけで今回は、esbuildでブックマークレットを作る話です。
これでnpm iできるし、TypeScriptで書けます。最終的にはJavaScriptになって、ブックマークレットとして登録できるようにしてみます。

esbuild

バンドラー。
らしいけどよくわからない、今回はnpm iしたライブラリを一つのJavaScriptにまとめて、かつTypeScriptで書けるようにしたいだけ。

つくる

今回はQRコードを表示するブックマークレットでも作ってみますか。
npmからライブラリを入れてQRコードを作ることにします。

環境

Node.js入っててesbuild動けば何でもいいんじゃない？

適当にフォルダを作る

適当にフォルダを作り、ターミナルを開いて、npm initします。

esbuild を入れる

以下を叩く

npm install --save-exact --save-dev esbuild

main.ts を用意する

main.tsファイルを置きます。
中身はとりあえず、全画面表示にするコードでも。TypeScript要素なし！

document.documentElement.requestFullscreen()

ブックマークレットとして登録できるようにビルドコマンドを書く

前述の通り、以下のようにjavascript:を付けたりしないとブックマークレットとして登録できないので、そうなるように調整します。

javascript:(function(){ /* esbuild さん、ここにコード出して！ */ })();

package.jsonを開き、buildコマンドを追加します。以下のように。。
scriptsの中ですね

{
  "name": "qrcode-esbuild-bookmarklet",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "esbuild main.ts --bundle --minify --outfile=bookmarklet.js --banner:js=javascript: --format=iife"
  },

コマンドの解説

• esbuild main.ts
  • main.tsをJavaScriptにしてねって
  • --bundle
    • 必要なライブラリ（node_modulesの中身）も、これから吐き出すJavaScriptに混ぜてねって
    • ブックマークレットは一つのJavaScriptにする必要があり、**node_modules がブラックホールで～**とか言ってる場合ではない

      • esbuild - Getting Started

  • --minify
    • 小さくしてくれる
    • ミニファイに関して面白い話があった：

      esbuild - FAQ

  • --outfile=bookmarklet.js
    • 出力先です
    • 複数のTypeScriptのファイルにまたがってようと一つになるはず
  • --banner:js=javascript:

    • esbuild - API

    • これは、吐き出すJavaScriptの先頭に好きな文字を埋め込めるオプションです
    • これを使い、ブックマークレット先頭のjavascript:を付与するようにしています
  • --format=iife

    • esbuild - API

    • これを使うと、即時関数の中に吐き出したJavaScriptが出てくるようになります
      • (()=>{ /*こ↑こ↓*/ })();

いや、、、なんかね、もっと苦戦するもんだと思ってたんだけど、オプション何個か指定するだけで終わったわ。すごすぎるesbuild

とりあえず吐き出してみる

以下のコマンドを叩いてみます

npm run build

出来ました、とっても速いですね。

追加してみる

Chromeならブックマークとリスト > ブックマーク マネージャ、Firefoxならブックマーク > ブックマークを管理で開く画面で新しいブックマークが登録できるはず。
アドレス欄の☆を押して登録するから新規登録どこだか分かんなかった。

名前は適当に、URLの欄にはさっき出てきたbookmarklet.jsの中身を貼り付けます。改行があると思いますが気にせずコピーして貼り付けてオッケーなはず。

早速使ってみる

押します・・！

おお～

ちなみに同期されれば他のスマホからでも使えるんじゃないでしょうか！？

ライブラリも入れて完璧にしてみる

今回はこちらのライブラリを借りて、QRコードを作ってみます。ありざいす

npm install --save qrcode
npm i --save-dev @types/qrcode

QR コードを画面に出すブックマークレット（TypeScript）

ライブラリのおかげでほとんど何もしてないですね、、

import QRCode from "qrcode"

// QRコードを描画する Canvas を用意
const qrCodeCanvas = document.createElement('canvas')

// 真ん中に出す
// https://stackoverflow.com/questions/2005954/
qrCodeCanvas.style.position = 'fixed'
qrCodeCanvas.style.top = '50%'
qrCodeCanvas.style.left = '50%'
qrCodeCanvas.style.transform = 'translate(-50%, -50%)'
// z-index は一番上に出てきてほしいので、あんまり良くないかもだけど
qrCodeCanvas.style.zIndex = 'calc(infinity)'

// 追加する
document.body.appendChild(qrCodeCanvas)

// クリックで消したい
qrCodeCanvas.onclick = () => {
    document.body.removeChild(qrCodeCanvas)
}

// QRコードを生成する
QRCode.toCanvas(qrCodeCanvas, location.href, (error) => {
    if (error) {
        alert('QRコードの生成に失敗しました')
    }
})

これをnpm run buildして、bookmarklet.jsをブックマークレットとして登録すれば・・・
動きました！やった～

ちゃんとライブラリもbookmarklet.jsの中に同梱されてそうですね。（動いているのを見る限り）
これで今日のフロントエンド開発の経験をブックマークレット開発でも活かせるようになりました。
めでたしめでたし

ソースコード

煮るなり焼くなり

GitHub - takusan23/qrcode-esbuild-bookmarklet

Contribute to takusan23/qrcode-esbuild-bookmarklet development by creating an account on GitHub.

https://github.com/takusan23/qrcode-esbuild-bookmarklet

Q.スマホじゃ動かないんですけど

ブックマーク一覧から選ぼうとすると失敗します。
アドレス欄からブックマークレットの名前を入力して、出てきたブックマークレットを選ぶことで起動できます。

おわりに

もっと苦戦するはずだったんだけどesbuildとライブラリが全部やってくれました。