見出し画像

JSでお手軽に業務効率化

ALH株式会社

お手軽に効率化しよう

みなさんこんにちは、ALH開発事業部のREIYAです。また会いましたね。

みなさんは普段の作業にかなりブラウザを使っていませんか？
Webページへの勤怠登録、よく使う文字でページ内検索したり
ネットサーフィンではスクロールをたくさんするでしょう。

これらを爆速にできるものがあります。

  • ブックマークレット

  • ユーザスクリプト

  • アドオン

あたりの話をします。
なおブラウザはChromeの前提ですが、Edgeは中身がChroniumなのでJSの動作環境がChromeと同じV8エンジンですから問題なく動くはずです。
Safari、FireFoxはまたちょっと話変わってきますが大体似てます。


まずは説明

  • ブックマークレット：ブックマークバーにURLじゃなくてJSを書いておける。押すとJS動く

  • ユーザスクリプト：ページ開いた時にJS動く。JSの登録にはTampermonkeyが便利

  • アドオン：拡張機能。案外簡単に作れる

準備しよう

大体がJSなので、まずはよく使うJSを書いておきます。
utilityであったり、WebページをJSで操作するということでjQueryもどきみたいなものをこのように持っておくと大変便利です。

const $$ = document;
const $ = v => v.startsWith('#') ? $$.getElementById(v.slice(1)) : $$.querySelector(v);
const _$ = (e = "div") => $$.createElement(e);
const DOM = str => new DOMParser().parseFromString(str, "text/html").body.firstElementChild;
const attr = (e, att) => Object.entries(att).map(([k, v]) => e[k] = v);
const css = (e, sty) => Object.entries(sty).map(([k, v]) => e.style[k] = v);
const event = (e, f, v = 'click') => e.addEventListener(v, f);
const sleep = (ms) => new Promise(r => setTimeout(r, ms));
const now = new Date().toISOString().split("T")[0].replaceAll("-", "");

一応説明すると

  • $$ ... documentって毎回書くと長いので変数名つけとく

  • $ ... ただのquerySelectorですが、idのときはgetElememtByIdのほうが早いので分岐してます

  • _$ ... 要素を作ります。引数なしだとdiv要素

  • DOM ... HTMLの文字列を、HTMLElementにする

  • attr ... HTMLElementに辞書型で属性をつける

  • css ... HTMLElementに辞書型でstyleをつける

  • event ... HTMLElementに関数でイベント付与、指定なしでclickイベント

  • sleep ... awaitで指定ミリ秒数待機

  • now ... 現在時間をyyyyMMddで取得

使用例も載せておきますね

const e = $('body'); // CSSセレクタで要素取得
const div = _$(); // 新規HTML要素を作る
const span = _$('span');
const myelem = DOM('<span>test!</span>'); // 文字から要素
e.appendChild(div);
e.appendChild(myelem);

// 属性をつける
attr(div, {
  id: 'newid',
  name: 'newname'
});
// スタイルつける
css(div, {
  display: 'flex',
  justifyContent: 'center'
});
// イベントつける
async function onclick() {
  await sleep(1000) // 1秒待機
  console.debug("clicked!!")
  console.debug(now) // yyyyMMddで現在日付
}
event(div, onclick);

ブックマークレット

ちょっとその前に、ブラウザで適当なページを開いてからURLに以下を打ち込んでみましょう。新規ページじゃだめです。
コピペすると先頭の「javascript:」が抜けるので手打ちしてください。

javascript:alert("info")

alertでましたね？
dataURLのように、ブラウザは何もhttpsだけでなくいろんなタイプのURLを表現できます。chromeの設定画面だったりローカルのファイルをブラウザで開く時なんかも「chrome://」や「file://」となりますね。
余談ですがブラウザ上で簡易メモ帳作ることもできます。

つまりJavaScriptをURLとして記述し動かせるということなので、例えば以下のようにブックマークバーに登録します。
適当なページをブックマークして、編集時のURLの以下コードコピペでOK。

javascript: (async () => {
  const $$ = document;
  const $ = v => v.startsWith('#') ? $$.getElementById(v.slice(1)) : $$.querySelector(v);
  const css = (e, sty) => Object.entries(sty).map(([k, v]) => e.style[k] = v);

  /** 背景色変える */
  css($('body'), {backgroundColor: 'red'})
})();

ようは即時関数。
注意なのが、コメントを以下のように書くと動かなくなります。

console.log("1");
// コメント
console.log("2")

あくまでURLなので、1行にまとめた状態のJSになります。

console.log("1");// コメントconsole.log("2");

となっちゃうんですね。同様の理由でセミコロンもできるだけ省略せずに書きましょう。コードゴルフとは相性悪いです。

仕組みが大体わかったところで、お好きなページ操作を書いてみましょう。
基本的にスクレイピングするような感じが多いと思います。

みなさんの作成したブックマークレットがどんなものかネットで探してみると楽しいです。

私は後述の理由から即席でなにかしたいときくらいしか使ってません

ユーザスクリプト

ブックマークレットのほぼ完全上位互換がユーザスクリプトです。（言い過ぎかも。）

一応インストールするものがあったりするので、許可なく現場で使うのはやめましょう。そういう時はブックマークレットで我慢してください。

さて、まずはお使いのChromeにTampermonkeyをいれましょう。嫌だったら後で消せば良いです。すべて無料です。

拡張機能をpin留めしクリック→ダッシュボードでスクリプト一覧が出てきます。
新規追加してJS書いていきましょう。
以下のようになっており、大事なのはmatchのURLです。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      yyyy-MM-dd
// @description  try to take over the world!
// @author       You
// @match        https://適用したいURL/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(async () => {
    'use strict';

    // Your code here...
})();

このURLに該当するページが開かれた時に、JSが動きます。例えば

// @match        https://qiita.com/*

とすれば、https://qiita.com/ から始まる全てのURLに反応します。
で、書くJSの内容を

(async () => {
    'use strict';
    // 1. ボタン要素を作る
    // 2. やりたい機能を作る
    // 3. 画面にボタンつける
})();

としてやるとあら不思議、ブックマークレットのようにブックマークを登録しなくても「画面内にブックマークレットボタン」があるようなものになります。

  • ブックマークバー汚染しない

  • そのページ用の機能はそのページ内に収められる

  • 「どのブックマークレットだっけ」とならない

  • 変なページで変なブックマークレット起動してヤバいことにならない

  • 任意発火でなく画面ひらいたら発火

  • 作るとき楽、ブックマークURLにコピペもいらない

などの利点があるので大変おすすめです。
もちろんブックマークバーのようにGoogleアカウントに登録されるので、別端末からも動きます。

さらに「ユーティリティ」タブからバックアップをGoogleDriveへエクスポートもできます。

こちらはなんと、ユーザスクリプト（みんなが投稿したJS）を検索し入れることもできます。公開もできます。
例えば「qiita」とかでこちらから検索するとみんなが投稿したqiita用のスクリプトが一覧で出てきます。

バンバンいれてバンバン試して使いやすいものをガンガン入れていきましょう。
入れたもの・作ったものはダッシュボードからいつでも確認・編集できます。

アドオン

さて、それでも満足できない場合もあります。
というかさっき入れたTampermonkeyもアドオンですね。
みなさんご存知こちらから探して入れることができますが、もちろんご自身で作ることだってできます。

実際の手順はこちらの記事が大変わかりやすく、これを超えるものがなさそうなのでリンク貼って満足しておきます。

最後に

Slackと連携してどうの、Redmineでうんたら、ページ内の〇〇を集計してグラフを描画...

などなど無限に使い道があり、JSでブラウザを好きに操作できる楽しさを味わえるうえ

なんといってもブラウザだけでコード作成が終わる手軽さが魅力なのではないでしょうか！

ぜひいっぱい遊んでみてください

ALHについて知る


↓ ↓ ↓　採用サイトはこちら　↓ ↓ ↓ 


↓ ↓ ↓　コーポレートサイトはこちら　↓ ↓ ↓


↓ ↓ ↓　もっとALHについて知りたい？　↓ ↓ ↓