この記事はロコガイド Advent Calendar 2020の4日目です。
こんにちは、開発部の根岸(@negipo)です。SF小説の講座に通いはじめて毎回先生にけちょんけちょんにされています。
さて、皆さんは業務でブックマークレットを扱っているでしょうか。ブラウザのブックマークに入れておいてぽちっと押すと動くアレです。ぼくはけっこうよく使っています。プロトタイピング、可視化、項目チェック、情報の検索と取得など、ワークフロー上処理をストレートに挿入するのが難しいとき、ブックマークレットは非常に有益です。
でもちょっと待ってください。ブックマークレットってけっこう運用が大変なんです。
実務上、ブックマークレットを実装することは一年に一回あるかないかというところなんですが、どのように運用を開始し更新してゆくべきかという観点において、これならいけるという型が徐々にぼくの中で固まってきました。皆さんがいい感じにブックマークレットを運用できるように、今回の記事でまとめてみようと思います。
Gitレポジトリをつくり、Githubに置いておく
実装が存在するものにはとにかくGitレポジトリを作りましょう。履歴を残せるし、壊れたら戻せるしでいいことづくめです。
GitHubに置いておくとREADMEが書けます。ユーザ向けの情報を書いてもいいですし、開発者向けの情報も書けますし、issueだって登録できます。「どうせ書き捨てだし数日しか使わないからいらないよ」と思うかもしれませんが、あなたは全知全能でしょうか？ 違います。そんなことを言っていると雷に打たれます。GitHubに置きましょう。
ユーザ向けの情報には必ず「ブックマークレットの登録・使い方」を書いておきましょう。ブックマークレットの登録は、おそらくセキュリティ上の理由で歴史的に少しずつ難しくなってきている印象があります。テクノロジーに詳しくない利用者の登録や利用のためにはガイドが必要です。たとえば登録中の操作を動画でキャプチャして共有したりすると、運用がスムーズに開始できるでしょう。
実装を静的ホスティングサービスに配置して公開する
ぼくが作るブックマークレットの実装は以下のような感じです。
javascript:let s=document.createElement("script");s.type="text/javascript";s.src="https://some_s3_bucket/scripts/some_bookmarklet.js";let es=document.getElementsByTagName("script")[0];es.parentNode.insertBefore(s,es);
静的ホスティングサービスにスクリプトのロジックを配置し、公開して、そのアドレスを用いましょう。ロジックそのものを登録されるブックマークレットの実装から分離することで、更新が可能になります。「Xという機能を足したいんですけど〜」と言われたときに、ブックマークレットをインストールしているひとの席をひとつひとつ回って「ちょっとブックマークレットの更新をしたいんですが、まずブラウザをひらいてもらって〜」みたいなことをやりたいでしょうか？ホスティングをつかえば、実装を更新して再配置すれば自動的にユーザの手元でも更新されます。
ロコガイドの場合では社内公開状態にしてあるS3を用いています。クラウドストレージによるホスティングは、社内に類似のシステムが構築済みであればハンドリングが簡単で、便利です。また要件が許せば、GitHub Pagesなどのレポジトリと密結合なホスティングを用いるのも良いでしょう。
デプロイスクリプトを書く
デプロイスクリプトを書いてMakefileに書いておきましょう。CI化してもいいですが、面倒ですよね。Makefileなら数秒で書けます。作らないCIより、すぐ書けるMakefileです。
deploy:
aws s3 cp bookmarklet.js s3://some_s3_bucket/scripts/some_bookmarklet.js
更新をするときにこのaws cliのコマンドを履歴から叩くのは大変です。デプロイするのはあなたではないかもしれません。未来のあなたは実装の内容を覚えていないかもしれません。そのとき待っているのは地獄のようなリバースエンジニアリングです。運用ワークフローを簡単にしましょう。
おわりに
ブックマークレット、便利ですよね。しかも作るのは簡単です。しかしながら、運用でウワーとなるようなことは意外と多くあります。いい感じのワークフローを最初から組んでおけば安心です。
たとえシンプルなシステムでも、計画的な運用を心がけましょう。
