16
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

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ではブックマークレットを実行できないので、別のサイトでブックマークレットを実行して下さい:disappointed_relieved:

我が社のブログでも同じ内容の記事を投稿しております。
もしよかったらブログも見に来て下さい。
フクロウラボテックブログ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
16
Help us understand the problem. What are the problem?