ScriptAutoRunnerが使える！ 自分が書いたJavascriptで作業時間を半分にした新米ディレクターの話

社内システムが改修される前に、業務を効率化したい

はじめまして。WEBディレクターの大島です。

みなさんは普段、「このシステムが、あともう少しこうだったらいいのに」という気持ちに駆られることはありますか？

幸いにして、エン・ジャパンは開発者の皆さんがいつでも要望を聞いてくれて改修をリリースしてくれる、とてもありがたい環境です。

が！　しかし、改修を待つのでなくいますぐ効率化したい……のが本音ですよね。今日はそんなせっかちな気持ちに応えてくれる使える素晴らしいツールを発見しましたので、共有させてください。

「ScriptAutoRunner」

ScriptAutoRunner

ScriptAutoRunnerは、自分が書いたJavascriptを、好きなサイトで自動的に実行してくれるGoogle Chromeの拡張機能です。

サイトのUI改善に携わっている人は、担当プロダクトと同様に社内システムに外部のサイト改善ツールを入れたい、と思うタイミングがきっとある（ありますよね？）と思うのですが、それはこれです。

「ScriptAutoRunner」の使い方

ScriptAutoRunnerの使い方を説明しようと思ったのですが、非常にわかりやすいものがすでにQiitaで公開されてました。書いてくださった方に感謝！

任意のサイトで任意のJavaScriptを自動実行させるChrome拡張 - Qiita

操作も非常に簡単です！　JSを書いて、流し込むだけです。

「ScriptAutoRunner」の便利さを伝えるために、Amazonのサイト改善をする

私はメルマガ作成時に苦慮していた「コピペ」や「数字の丸め込み」「住所の整形」などの作業をScriptAutoRunnerに任せることによって、作業時間を半分以下に短縮させることに成功しました！

……と書いてみましたが、実施した内容が社外秘なので具体的なことは書けません。ピンときませんよね。なので、このツールの便利さを伝えるために、いまからAmazonのサイト改善をしてみたいと思います。

サンプル：「Amazonで今見ている本が、自分の住所に近い図書館で借りられるかどうか、わかるようにする」

世の中には面白い本で溢れているので、気軽に本を買っているとお金が不足します。なので、たとえばAmazonの商品ページで、近くの図書館でその本が借りられるかどうかわかったら、家計も読書生活も豊かになるのではないでしょうか？

ということで、実際に作ってみました。

①ScriptAutoRunnerをインストールしてください。

②下記のスクリプトをScriptAutoRunnerにコピーしてください。
（※素人が書いたスクリプトなので、非常に汚いことをご容赦下さい）

for (var i = 0; i < document.querySelectorAll("#detail_bullets_id .content li").length; i++) undefined != document.querySelectorAll("#detail_bullets_id .content li")[i].textContent.match("ISBN-10:") && (isbn = document.querySelectorAll("#detail_bullets_id .content li")[i].textContent);
if (0 !== document.getElementById("glow-ingress-line2").textContent.match(/\d{3}-\d{4}/).index && undefined != isbn) {
 function jsonp(e) {
   var t = document.createElement("script");
   t.type = "text/javascript", t.src = e, document.head.appendChild(t);
   var i = document.getElementsByTagName("script")[0];
   i.parentNode.insertBefore(t, i)
 }
 var styleHtml = document.createElement("style");
 styleHtml.textContent = "#libraryStatusLoarding{display:inline-block;width:60px;height:60px;border:10px solid #ccc ;border-top-color:#999;border-radius:50%;animation:1s loading infinite linear}@keyframes loading{from{transform:rotateZ(0)}to{transform:rotateZ(360deg)}}", document.head.appendChild(styleHtml);
 var parent = document.getElementsByTagName("script")[0];

 function jDilla(e) {
   setTimeout(function () {
     if (1 == e.continue) jsonp("https://api.calil.jp/check?appkey=39fc8363eebe14fb4859f0cdf2bbf4c8&session=" + e.session + "&callback=jDilla");
     else if (0 == e.continue) {
       var t = e.books,
         i = [];
       for (let e in t)
         for (let l in t[e]) {
           const n = t[e][l].reserveurl;
           for (let a in t[e][l].libkey) {
             var r;
             r = "貸出可" == t[e][l].libkey[a] ? "#009A00" : "#B12704", i.push('<div style="display:table;font-weight:bold;margin:5px 0 10px;"><div style="display:table-cell;font-size:15px;width:160px;line-height:16px;vertical-align:middle;text-align:left;">' + a + '：</div><div style="display:table-cell;font-size:17px;font-weight:bold;vertical-align:middle;"><a href="' + n + '" target="_blank" style="color:' + r + ';text-decoration:underline">' + t[e][l].libkey[a] + "</a></div></div>")
           }
         }
       0 != (i = i.join("")).length ? document.getElementById("libraryList").innerHTML = i : document.getElementById("libraryList").innerHTML = "<div>近くの図書館では借りられない本です</div>"
     }
   }, 2e3)
 }
 parent.parentNode.insertBefore(styleHtml, parent), document.querySelector("#buybox .a-box:last-child").setAttribute("style", "border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;"), document.getElementById("buybox").innerHTML = document.getElementById("buybox").innerHTML + '<div id="libraryStatus" style="margin:0;padding:15px 20px;border:#ddd solid;border-width:0 1px 1px 1px;border-radius:0 0 4px 4px;"><h3 style="color:#232F3E;margin-bottom:10px;text-align:center">近くの図書館で借りる</h3><div id="libraryList" style="text-align:center;"><div id="libraryStatusLoarding"></div></div></div>';
 var libraryList = [];
 window.checkLibrary = function (e) {
   for (var t = 0; t < e.length; t++) libraryList.push(e[t].systemid);
   var i;
   libraryListArray = (i = libraryList).filter(function (e, t) {
     return t === i.indexOf(e)
   }), libraryList = libraryListArray.join(","), jsonp("https://api.calil.jp/check?appkey=39fc8363eebe14fb4859f0cdf2bbf4c8&isbn=" + isbn + "&systemid=" + libraryList + "&callback=jDilla")
 };
 var pref, city, postalcode = document.getElementById("glow-ingress-line2").textContent.replace(/([^0-9-])/g, "").replace("-", "/"),
   isbn = isbn.replace("ISBN-10: ", "");
 postalAPI = "https://madefor.github.io/postal-code-api/api/v1/" + postalcode + ".json";
 var request = new XMLHttpRequest;
 request.open("GET", postalAPI, !0), request.responseType = "json", request.onload = function () {
   var e = this.response;
   pref = e.data[0].ja.prefecture, city = e.data[0].ja.address1, jsonp("https://api.calil.jp/library?appkey=39fc8363eebe14fb4859f0cdf2bbf4c8&pref=" + pref + "&city=" + city + "&format=json&callback=checkLibrary")
 }, request.send()
}
/*
    Copyright (c) 2016 Madefor Team
    Released under the MIT license
    https://github.com/madefor/postal-code-api/blob/master/LICENSE.txt
*/

③ScriptAutoRunnerのオプションを開き、下の画像のように設定を行って下さい。

④Amazonの書籍ページを開いて下さい。
　※ログインした状態で見て下さい

はらぺこあおむし

プレビュー

下記のように数秒かかって表示されるはずです。

○動き
閲覧している書籍の貸し出し状況を表示します。貸し出し状況が表示される図書館は、その本が蔵書として登録されていて、かつAmazonに登録している自分の「お届け先」の市区町村に存在する図書館です。

「貸出可」や「貸出中」、「予約中」をクリックすると、別タブでその書籍の図書館の詳細ページに飛べます。予約可能であれば予約ができるはずです。

□仕組み

①ログイン時に表示される届け先の「郵便番号」と、書籍の「ISBN」を取得
②郵便番号API（ 　https://github.com/madefor/postal-code-api　）で、届け先の郵便番号を入れて、市区町村名を取得する
③カーリルAPI（ 　https://calil.jp/doc/api.html　）で、取得した市区町村に存在する図書館を取得する
④カーリルAPI（　https://calil.jp/doc/api.html　）で、リストアップした図書館に、今見ている本があるか取得する
⑤結果を表示

いかがでしょうか。

Amazonが商品ページを改修して図書館情報を併記する可能性は、かなり少ないと思うのですが、このツールを活用して表示させることができました。

このような具合でどんなWEBサイトでも、JSで可能な範囲で自在にUIを変更できるのです。このツールすごくないですか？　きっと、開発の優先順位的にどうしても低くなりがちな社内システムに、改修が完了するまでの「つなぎ」として、うまく使えると思うんです。

偉大な先駆者

ScriptAutoRunnerから話がそれるのですが、上記のスクリプトについて。

カーリルAPIの存在を知ってから、図書館の貸し出し情報をAmazonで出したら便利では？　と考えて着手しはじめてすぐ、先駆者がいることを知りました。

その本、図書館にあります

その本、図書館にあります。

今から7年以上前に公開されています。

UIも非常に使いやすく、今日に至るまでこまめにアップデートを重ね続けていらっしゃいます。上記のスクリプトは、この偉大な先駆者に尊敬の念を込めて書きました。

また、スクリプトで利用させていただいた、
カーリルAPI

図書館 API | カーリル

郵便番号API

madefor/postal-code-api

に、感謝申し上げます。

おわりに

話がそれてしまいましたが、いかがでしたでしょうか。便利さがすこしでも伝われば幸いですし、日々の業務改善に少しでも役立てば嬉しいです。

ところで！　デジタルプロダクト開発本部／プロダクト企画開発部では、一緒に成長できる仲間を募集しています。

気になる方はこちらからエントリーください。