ちょっとそこのあなた! 自分だけのオリジナルLGTMをチームで使ってみませんか?

Pocket
LINEで送る

こんにちは、高木です。

GitHubなどでPullRequestでコードレビューした後、LGTMとコメントする文化があります。
おもしろい画像なんかが貼ってあるとほっこりしますね!

スクリーンショット 2019-05-16 17.15.20.png

LGTMとは?

「Looks good to me」の略で、「良いと思う」「問題ないと思う」という意味。

自分だけのLGTM

LGTM関連のツールやサービスは世の中に結構あります

どれもすごく良いのですが私が求めているものとなんか違う……。
アニメのgif画像をLGTMに使いたいんだ!!

Google画像検索で検索するのはめんどくさい……ということで自分だけのオリジナルのLGTMが作成できるツールを開発しました。

sample_create_LGTM.gif

ブックマークレットを実行することで、LGTM用の文言をクリップボードにコピーしてくれます。

仕組み

LGTM用の文言をブックマークレットとGASを使用し自動生成してくれるツールになります。
Googleスプレッドシートに設定した画像からランダムでLGTM用の文言を自動生成しクリップボードにコピーします。 実行すると右下にクリップボードにコピーされた画像を表示してくれます。
他のツールとの違いは自分のお気に入りの画像を使用してLGTMが作成できるようになることです!!

画像自体はGoogleスプレッドシートで管理

スクリーンショット 2019-05-16 17.30.30.png

クリップボードにコピーされる文言は下記のような感じになります。

# LGTM

![ポプテピピック(俺だ俺だ俺だ)](https://media2.giphy.com/media/EtFNtaj8sQKuA/giphy.gif?cid=e1bb72ff5c9057fd6276716c552fafa2)

使用方法

GoogleスプレッドシートにLGTMで使用する画像の設定

新規でGoogleスプレッドシートを作成します。
シート名はLGTMにしてください。
GoogleスプレッドシートにLGTMで使用したい画像のURLを設定します。

下記のような感じで設定します。
image列は別に設定しなくても良いです。必要なのはID〜description列までです。

ID URL description image
1 LGTM画像1のURL LGTM画像1の説明 =IMAGE(B2)
2 LGTM画像2のURL LGTM画像2の説明 =IMAGE(B3)
3 LGTM画像3のURL LGTM画像3の説明 =IMAGE(B4)
4 LGTM画像4のURL LGTM画像4の説明 =IMAGE(B5)

Googleスプレッドシートの内容をJSONで取得できるようにする

Googleスプレッドシートからスクリプトエディタを開きます。

sample_script_editor.png

スクリプトエディタに下記のソースをコピーし貼り付け保存します。

https://github.com/dodonki1223/CreateLGTM/blob/master/LGTM.gs

スクリーンショット 2019-05-16 17.41.10.png

Webアプリケーションとして公開する

sample_release.png

現在のウェブアプリケーションのURLに表示されているURLをコピーして下さい。
更新ボタンを押すことでWebアプリケーションとして公開されます。

sample_release_setting.png

現在のウェブアプリケーションのURLをブラウザで叩くと下記のようにJSONを取得できていれば大丈夫です。

sample_get_json.png

自動生成用のブックマークレットを作成する

https://github.com/dodonki1223/CreateLGTM/blob/master/bookmarklet.jsのソースをコピーし2行目のURLの部分を先程コピーした現在のウェブアプリケーションのURLに書き換えたのちブックマークレットとして保存すれば設定完了です。

javascript:(function(){
  const GAS_API_URL = 'https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/exec';

  let script = document.createElement('script');
  script.src = GAS_API_URL + '?callback=copyLgtm';
  document.body.appendChild(script);
  document.body.removeChild(script);

  window.copyLgtm = function(data) {
    let json = JSON.stringify(data);
    let jsonParse = JSON.parse(json);

    execCopy(jsonParse.data.lgtm);
    displayCopyImg(jsonParse.data.lgtm_url, jsonParse.data.description);
  };

  window.execCopy = string => {
    let copyElement = document.createElement('div');
    copyElement.style.cssText = 'position: fixed; right: 200%;';

    let pre = document.createElement('pre');
    pre.style.cssText = '-webkit-user-select: auto; user-select: auto;';

    copyElement.appendChild(pre).textContent = string;

    document.body.appendChild(copyElement);
    document.getSelection().selectAllChildren(copyElement);
    document.execCommand('copy');

    document.body.removeChild(copyElement);
  };

  window.displayCopyImg = (lgtmImgUrl, description) => {
    let displayElement = document.createElement('div');
    displayElement.style.cssText = 'position: fixed; bottom: 1%; right: 1%; z-index: 9999;';

    let p = document.createElement('p');
    p.textContent = description;
    p.style.cssText = 'position: absolute; top: 0; left: 0.5em; margin: 0; color :white; font-weight: bold;';
    displayElement.appendChild(p);

    let img = document.createElement('img');
    img.src = lgtmImgUrl;
    img.style.width = (window.parent.screen.width * 0.2) + 'px';
    displayElement.appendChild(img);

    document.body.appendChild(displayElement);
    setTimeout(() => document.body.removeChild(displayElement), 3000);
  };
})();

特定の画像を指定する

URLパラメータにシート名やIDを指定することで特定の画像を指定してLGTMの文言を作成することができます。

https://github.com/dodonki1223/CreateLGTM/blob/bc64d09d7997d17117878362dfea4409336432d8/bookmarklet.js#L5の箇所にURLパラメータを追加することで特定の画像を指定することができます。

修正前

script.src = GAS_API_URL + '?callback=copyLgtm';

修正後

script.src = GAS_API_URL + '?callback=copyLgtm&sheet=interesting&id=2';

この場合ですと、interestingシートのidが2の画像でLGTMの文言を作成してくれます。
sheetの指定が無いとLGTMのシートが選択されます。またidの指定が無いとランダムに選択される仕様になっています。

GASについて

URLパラメータの取得

GASではURLパラメータはものすごく簡単に取得できます。

Web Apps | Apps Script | Google Developers こちらのドキュメントに書かれています。

下記のURLパラメータの場合は

https://script.google.com/macros/s/xxxxxxxxxx/exec?callback=copyLgtm&sheet=gorira&id=kirin

callbackを取得

e.parameter.callback
=>copyLgtm

sheetを取得

e.parameter.sheet
=>gorira

idを取得

e.parameter.id
=>kirin

本当に簡単ですね!

ランダム値の取得

ランダム値はMath.random()を使用し取得しています。
Googleスプレッドシートのヘッダー行を除く(2行目〜最終行まで)の間のランダム値を取得するようにしています。
最終行はSheetクラスを使用することで簡単に取得できます。

Class Sheet | Apps Script | Google Developers より

var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];

// This logs the value in the very last cell of this sheet
var lastRow = sheet.getLastRow();
var lastColumn = sheet.getLastColumn();
var lastCell = sheet.getRange(lastRow, lastColumn);
Logger.log(lastCell.getValue());

Math.random() – JavaScript | MDN を参考にメソッドを作成しました。最終行はメソッドの呼び出し側で取得するようにしています。

/**
 * ランダム値を作成する
 * 1行目はヘッダーのため、2行目から最終行までのランダムの値を作成し返す
 * @param {Integer} [lastRow] - 最終行
 * @return {Integer} 2行目から最終行までのランダム値
 */
function createRandomValue(lastRow) {
  // 1行目はヘッダー行のため2行目から開始する
  var min = 2,
      max = lastRow;

  // randomの値を作成
  var randomValue = Math.floor(Math.random() * (max + 1 - min)) + min;
  Logger.log(randomValue);

  return randomValue;
}

JSONP

ブックマークレットからJSONで取得しようとするとCross-Origin Read Blocking (CORB) blocked cross-origin responseのエラーがconsoleに吐かれてデータを取得できないのでJSONPを使用しています。

エラーの内容についてはこちらの記事がすごく参考になりました。

Cross-Origin Read Blocking (CORB) とは – ASnoKaze blog

JSONP (JSON with padding) とは、scriptタグを使用してクロスドメインな(異なるドメインに存在する)データを取得する仕組みのことである。

Wikipediaより

使用するには注意が必要です。

JSONPでは、クロスサイトリクエストフォージェリ(英: cross-site request forgery、CSRF)に対する脆弱性に注意が必要である。 このscriptタグを使う方法では同一生成元ポリシーが適用されず、またサーバのエンドポイントは外部に公開されているため、悪意のあるサイトがJSONデータを取得するといったことが可能であることから、機密情報や個人情報などのデータを取り扱うには不向きである。 また、scriptタグを埋め込む側においても、リモートサイトから任意の内容のデータをページに差し込むことが可能であるため、そのリモートサイトが悪意のあるサイトである場合やJavaScriptインジェクションに対する脆弱性がある場合は、その脆弱性を突かれることで、アカウント情報を盗まれたり、元のサイトも影響を受けたりする可能性がある。

Wikipediaより

今回はブックマークレットで使用するだけで取得するデータも機密情報では無いので気にしないことにします。

ブックマークレットについて

JSONデータを取得する

下記の記事を參考にJSONを取得する仕組みを作成しました。

面倒な手続き不要!「Web API」の超お手軽活用術をJavaScriptコード付きで一挙大公開! – paiza開発日誌

const GAS_API_URL = 'https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/exec';

  let script = document.createElement('script');
  script.src = GAS_API_URL + '?callback=copyLgtm';
  document.body.appendChild(script);
  document.body.removeChild(script);

  window.copyLgtm = function(data) {
    let json = JSON.stringify(data);
    let jsonParse = JSON.parse(json);

    execCopy(jsonParse.data.lgtm);
    displayCopyImg(jsonParse.data.lgtm_url, jsonParse.data.description);
  };

クリップボードにコピーする

下記の記事を参考にクリップボードにコピーする仕組みを作成しました。

JavaScriptでクリップボードに文字をコピーする(ブラウザ) – Qiita

下記の手順でクリップボードに文字をコピーしています

  • 画面外にpreタグを作成しコピーする文字列をセットする
  • 選択してexecCommand(‘copy’)を実行してクリップボードにコピーする
  • 作成したpreタグを削除
window.execCopy = string => {
    let copyElement = document.createElement('div');
    copyElement.style.cssText = 'position: fixed; right: 200%;';

    let pre = document.createElement('pre');
    pre.style.cssText = '-webkit-user-select: auto; user-select: auto;';

    copyElement.appendChild(pre).textContent = string;

    document.body.appendChild(copyElement);
    document.getSelection().selectAllChildren(copyElement);
    document.execCommand('copy');

    document.body.removeChild(copyElement);
  };

コピーされたLGTM用の画像を画面に表示する

下記の手順で画面にLGTM用の画像を表示しています

  • imgタグを作成する
  • imgタグにGoogleスプレッドシートから取得したimgのURLをセット
  • imgタグを画面に表示し3秒後に削除する
window.displayCopyImg = (lgtmImgUrl, description) => {
    let displayElement = document.createElement('div');
    displayElement.style.cssText = 'position: fixed; bottom: 1%; right: 1%; z-index: 9999;';

    let p = document.createElement('p');
    p.textContent = description;
    p.style.cssText = 'position: absolute; top: 0; left: 0.5em; margin: 0; color :white; font-weight: bold;';
    displayElement.appendChild(p);

    let img = document.createElement('img');
    img.src = lgtmImgUrl;
    img.style.width = (window.parent.screen.width * 0.2) + 'px';
    displayElement.appendChild(img);

    document.body.appendChild(displayElement);
    setTimeout(() => document.body.removeChild(displayElement), 3000);
  };

最後に

これで自分の好きな画像でLGTMができるようになりました。
素敵なLGTMライフを!!

GitHubではブックマークレットを実行できないので、別のサイトでブックマークレットを実行して下さい

Pocket
LINEで送る