見出し画像

ブックマークレットで始める業務改善⑬ 作ったものの配り方

シド・ブックマーカー

前回はこちら。

今回で初級編は終わりです。ここまでたどり着いた方は何名いらっしゃるのか🐶 ぜひスキやコメントで存在をお知らせください。

作成したブックマークレットは、それを必要とする人へ配って、チーム全体の生産性を高めていきましょう。

ファイルで配る（非推奨）

ブックマークレットを保存している .js ファイルそのものを配って、各自ブックマークレットを登録してもらうのもひとつの手です。しかしこれは煩雑ですので、できるだけ下のWebページを使った方法で配ることをお勧めします。

なお、.js ファイルを送るなら良いのですが、プログラムをメール本文やWordやPowerpointなどに直接貼りつけて配るのは避けてください。メールソフトやOfficeソフトが気を利かせて、" "を“ ”（違い分かります？）に置き換えたりするので、動かなくなってしまいます。

Webページに公開する

こちらがお勧めです。Webページを公開するといっても、社内限定で、OneDriveやBoxなどのオンラインストレージを使って手軽に公開できます。

サンプルのWebページを作成しましたのでご確認ください。

リンクをブックマークバーへドラッグするだけで、ブックマークレットを登録できます。

ここにあるリンクは、<a>タグのhref属性にブックマークレットのプログラムが埋め込まれています。手で埋め込むのはかなり大変ですので、自動的に埋め込むためのツールを作成しました。
※ 簡易的に作ってあるので、上手く変換できないプログラムもあるかもしれません。その場合はお知らせください。

上の箱に作成したブックマークレットをコピペして、ボタンを押すと、下の箱にブックマークレットが埋め込まれた<a>タグが出てきます。これを.htmlファイルにコピペしてください。ただのテキストファイルに貼り付けてから拡張子を .txt から .html に変えてもOKです。

「<html><head><body>を含む」を選んでからボタンを押すと、<a>タグ以外のタグもくっつけて、シンプルなWebページのHTMLを作ります。

このツールでできたものを.htmlファイルに保存して、オンラインストレージにアップロードし、そこへのリンクを配布先に教えてあげればOKです。.htmlファイルをメールなどで直接配っても良いです。

ユーザーごとにプログラムを変える

ユーザーIDなど、人によって違う文字列を使わなければならないこともあります。その場合はプログラムを一部書き換える必要がありますが、できるだけそれを簡単に行う工夫をお知らせします。

せっかくの機会なので、JavaScriptの仕組みの勉強もしましょう。下のプログラムはいつものブックマークレットの基本形です。

javascript:(function(){
    処理の内容
})();

先頭の javascript: は、「JavaScriptのプログラムを実行してください」という印です。これは良いですね。

その次にあるのは、
(function(){ 処理の内容 })();
というプログラムです。これは、「function(){ 処理の内容 }」という関数を作り、「(作った関数) ();」という形でそれを即時実行する、ことを示しています。これまで querySelector( ) などの関数を使ってきましたが、自分でも関数を作って活用できるわけです。

関数は、外から変数を受け取ることができます。引数（ひきすう）といいます。以下は、messageという引数を持つ関数を定義して、それを使って「こんにちは！」と表示させています。

const showMessage = function(message){
    alert(message);
};
showMessage("こんにちは！");

以上を踏まえた上で、以下のブックマークレットを実行してみましょう。これまでは常に空だった最後の( )に、ユーザーID（"syd0391"）が入り、それが最終的に alert( ) で表示されています。

javascript:(function(user_id){
    alert(user_id);
})("syd0391");

情報の流れは以下のようになっています。

この仕組みを使えば、配布先のユーザーには、ブックマークレットを登録した後で、末尾の方に自分のユーザーIDを書いてもらえば良いだけになります。プログラムの中途半端なところを書き換えさせるよりもはるかに簡単で間違えにくいです。

実用的には、配布時は以下のようにしておいて、プログラム末尾の●●●●のところを書き換えるように指示すると良いでしょう。前後の" "を消さないように。

javascript:(function(user_id){
    if (user_id === "●●●●") {
        alert("ユーザーIDを書き換えてください。");
        return; /* 処理を終えるときはreturn; */
    }
    ここにuser_idを使った処理を書く
})("●●●●");

冒頭のif文で、user_idが未更新のときはエラーメッセージを出して処理を止めています。プログラムの冒頭にこういったチェックを入れておけば、思わぬ誤動作の防止になるでしょう。

今回のまとめ

  • ブックマークレットの配布は、webページのaタグに埋め込むのが簡単です。そのためのツールを用意しましたので活用ください。

  • ユーザーごとにプログラムをカスタマイズすることもできます。

  • ブックマークレットの冒頭に、何か変なことが起きていないかチェックするプログラムを入れておくと誤動作の防止になります。

  • せっかく作ったブックマークレットですから、ユーザーフレンドリーに配布して、積極的に使ってもらって、効果を上げていきましょう。

ここまでで初級編は終わりです。次回から中級編に入ります。以下のようなトピックを扱う予定です。

  • 要素を追加する

  • 画面遷移した先へ情報を持っていく

  • iframe（インラインフレーム）の中を操作する

次回はこちらです。

このシリーズのすべての記事は、こちらのマガジンにまとめています。

🐶スキしていただけると励みになります！


この記事が気に入ったらサポートをしてみませんか？