TL;DR

bookmarkletに呼び出しやすい名前をつけておくと、アドレスバーで呼び出せて便利。

ユーザーストーリー

Developersの気になるニュースをキュレーションしているサイト、Developers Milkを公開しています。
毎日、サイトを巡っては、抑えておいたほうが良いと思うニュースを厳選してサイトに登録しています。
サイトのアーキテクチャはQiitaに公開されています。サイトのURL、タイトル、一言紹介文などをGoogle SpreadSheet登録しておくと、Webサイトに公開されるようにしています。
サイトの登録は、毎日、何度も行う作業なので、できるだけ作業効率を上げておくことが望まれます。
Developers Milkでは、Web Commandsをつかってサイトの登録作業を効率化しています。

Web Commands

Web Commandsは私が考えた造語です。
仕組みはほとんどbookmarkletとして知られている昔からある技術ですが、それに名前をつけておき、アドレスバーから呼び出すことを形式知化しているところに新規性があ（ると思いこんでお）ります。
bookmarkletとは、通常URLを登録、呼び出すためのブラウザの機能、つまりブックマークにJavaScriptを登録しておくことで、任意のWebページ上でJavaScriptを実行できるようにする技術です。
bookmarkletを登録するときにそのブックマークを呼び出すときのコマンドを名前（Chromeだと名前、Firefoxだとタグ）につけておくことで、アドレスバーにそのコマンドを入力すると、JavaScriptを呼び出すことができます。
Chromeだと、同一のGoogleアカウントでログインしておくことで、スマートフォンでもPCでも同一のWeb Commandsを呼び出すことができます。

Developers MilkでのWeb Commandsのユースケース

「mklt」という名前でJavaScriptを登録してあります。Developers Milk用の小さなアプリケーション→MilKLeTからもじったものです。
これぞ、と思ったWebページで、アドレスバーにmkltと呼び出すことで候補に表示されるので、mkltを選択します。
mkltには、GitLab Pagesに登録されたJavaScriptを呼び出すコードが登録されており、GitLab PagesのJavaScriptはそのページをDevelopers Milkに登録するためのコンソールを表示します。
コンソールには、そのページのURL，タイトルを抽出してデフォルト値とし、また、ページ上の画像を押すとその画像を抽出、入力欄に保存する機能があります。「Send」ボタンを押すだけで、Google Apps Scriptを経由してSpreadSheetに登録してくれます。

作り方。

mkltは、Chromeのブックマークとして、以下が登録されています。

bookmarklet

javascript:s = document.createElement("script");s.src="https://{GitLab Pages上のJavaScriptのURL}";document.body.appendChild(s);

これにより、Web Commandsを実行したページ上にGitLab Pages上のJavaScriptが読み込まれます。GitLab上のJavaScriptには以下のようなコードが登録されています。


!function () {
    var title = document.title;
    var siteURL = pageURL.substring(0, pageURL.indexOf("/", 10));

    var baseElement = document.createElement("div");
    baseElement.style.position = "fixed";
    baseElement.style.left = "0";
    baseElement.style.width = "100%";
    function dc(base, value, textarea) {
        var elem = document.createElement("div");
        base.appendChild(elem);
        var input = document.createElement(textarea ? "textarea" : "input");
        elem.appendChild(input);
        input.style.width = "100%";
    }
    dc(baseElement, "title", title);
    dc(baseElement, "siteURL", siteURL);

    var buttonArea = document.createElement("div");
    baseElement.appendChild(buttonArea);
    function appendButton(area, name, func) {
        var button = document.createElement("button");
        button.innerHTML = name;
        button.onclick = func;
        area.appendChild(button);
    }
    appendButton(buttonArea, "CANCEL", function () {
        document.body.removeChild(baseElement);
    });
    appendButton(buttonArea, "SEND", function () {
        var url = endpoint + "?siteURL=" + encodeURIComponent(siteURL));
        var script = document.createElement("script");
        script.src = url;
        document.head.appendChild(script);
        document.body.removeChild(baseElement);
    });
    document.body.appendChild(baseElement);
}();

キモは、document.body.appendChild(baseElement);でしょうか。昔ながらのJavaScriptでガリガリとUIを作成、Developers Milkに登録するコンソールを作っています。

みなさんも、Web Commandsで自分の業務をプチ改善してみては？

昨今、Web上で行う作業は多岐に渡ります。
例えば勤怠入力。標準時間を自動入力、登録する機能をJavaScriptにしてbookmarkletに保存、ktnr（勤怠入力=KinTaiNyuuRyoku）としてコマンド呼び出しすることで作業を効率化することができるかもしれません。
例えば集計処理で、Web上の表をCSVにして出力することができるかもしれません。
どちらも対象のWebアプリケーションの作りによるところはありますが、チャレンジしてみてはいかがでしょうか？

Web Commands で作業効率化 - bookmarklet を再発掘する -