MacoTasu/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
     <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
     <style type="text/css">
       <!--
         button {margin: 5px 5px;}
         td {padding: 11px 5px;}
         table {width: 100%;}
        -->
      </style>
  </head>
  <body>
    <button class="action" id="postIine">いいね</button>
      <div id="iine">
       <p>Loading...</p>
      </div>
  </body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script>
    $(function() {
      google.script.run.withSuccessHandler(drawIine)
          .getIine();
    });

    function drawIine(iine) {
      var list = $('#iine');
      list.empty();
      if (iine[0][0] == "") {
        list.append("<p>まだいいねがありません。</p>");
        return false;
      }

      head = '<table><thead><tr><th>ユーザ</th><th>いいね！</th></tr></thead>'
      body = '<tbody>'
      for (var i = 0; i < iine.length; i++) {
        body += '<tr><td>' + iine[i][0] + '</td><td>' + omitIine(iine[i][2]) + '</td><tr>'
      }
      body += '</tbody></table>'
      list.append(head + body);
    }

    function omitIine(size) {
      var threshold = 3;
      if (size > threshold) {
        return '👍'.repeat(threshold) + "+" + (size - threshold);
      } else {
        return '👍'.repeat(size);
      }
    }

    $('#postIine').click(function(e) {
      google.script.run.withSuccessHandler(drawIine)
        .doIine(false);
      return false;
    });
   </script>
</html>


## main.gs
// Replace me
var sheetID = 'xxx';

// ファイルを開いたときに実行
function onOpen(e) {
  var ui = DocumentApp.getUi()
  ui.createMenu('いいね')
  .addItem('いいね する', 'doIine')
  .addItem('いいね 一覧', 'showIine')
  .addToUi();
}

// インストール時に実行
function OnInstall(e) {
  onOpen(e);
}

// いいねみる関数
function showIine() {
  var html = HtmlService.createHtmlOutputFromFile('index.html')
  .setTitle('いいね一覧')
  .setWidth(500);
  DocumentApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
  .showSidebar(html);
}

// すべてのイイネを取得
function getIine() {
  // TODO: URL毎にsheetをわける対応を入れる
  var ss = SpreadsheetApp.openById(sheetID);
  var sheet = ss.getSheets()[0];
  return sheet.getDataRange().getValues();
}

// いいねする関数
function doIine(drawIineView) {
  var doc = DocumentApp.getActiveDocument();
  var url = doc.getUrl();
  var iineUserMail = getSessionUserEmail();

  var ss = SpreadsheetApp.openById(sheetID);
  var sheet = ss.getSheets()[0];
  var values = getIine();

  // TODO: URL毎にsheetをわける対応を入れる
  // 既にイイネ済みだったらインクリメント
  var found = false;
  for (var row in values) {
    if (values[row][0] == iineUserMail && values[row][1] == url) {
      sheet.getRange(row + 1, row + 1, 1, 3).setValues([[values[row][0] , values[row][1], values[row][2] + 1]]);
      found = true;
      break;
    }
  }

  // 見つからない場合はレコードを追加
  if (!found) {
    sheet.appendRow([iineUserMail, url, 1]);
  }

  if (drawIineView !== false) {
    showIine();
  }

  return getIine();
}

// ユーザ情報取得
function getSessionUserEmail() {
  return Session.getEffectiveUser().getEmail();
}
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
	<style type="text/css">
	<!--
	button {margin: 5px 5px;}
	td {padding: 11px 5px;}
	table {width: 100%;}
	-->
	</style>
	</head>
	<body>
	<button class="action" id="postIine">いいね</button>
	<div id="iine">
	<p>Loading...</p>
	</div>
	</body>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
	</script>
	<script>
	$(function() {
	google.script.run.withSuccessHandler(drawIine)
	.getIine();
	});

	function drawIine(iine) {
	var list = $('#iine');
	list.empty();
	if (iine[0][0] == "") {
	list.append("<p>まだいいねがありません。</p>");
	return false;
	}

	head = '<table><thead><tr><th>ユーザ</th><th>いいね！</th></tr></thead>'
	body = '<tbody>'
	for (var i = 0; i < iine.length; i++) {
	body += '<tr><td>' + iine[i][0] + '</td><td>' + omitIine(iine[i][2]) + '</td><tr>'
	}
	body += '</tbody></table>'
	list.append(head + body);
	}

	function omitIine(size) {
	var threshold = 3;
	if (size > threshold) {
	return '👍'.repeat(threshold) + "+" + (size - threshold);
	} else {
	return '👍'.repeat(size);
	}
	}

	$('#postIine').click(function(e) {
	google.script.run.withSuccessHandler(drawIine)
	.doIine(false);
	return false;
	});
	</script>
	</html>
	// Replace me
	var sheetID = 'xxx';

	// ファイルを開いたときに実行
	function onOpen(e) {
	var ui = DocumentApp.getUi()
	ui.createMenu('いいね')
	.addItem('いいねする', 'doIine')
	.addItem('いいね一覧', 'showIine')
	.addToUi();
	}

	// インストール時に実行
	function OnInstall(e) {
	onOpen(e);
	}

	// いいねみる関数
	function showIine() {
	var html = HtmlService.createHtmlOutputFromFile('index.html')
	.setTitle('いいね一覧')
	.setWidth(500);
	DocumentApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
	.showSidebar(html);
	}

	// すべてのイイネを取得
	function getIine() {
	// TODO: URL毎にsheetをわける対応を入れる
	var ss = SpreadsheetApp.openById(sheetID);
	var sheet = ss.getSheets()[0];
	return sheet.getDataRange().getValues();
	}

	// いいねする関数
	function doIine(drawIineView) {
	var doc = DocumentApp.getActiveDocument();
	var url = doc.getUrl();
	var iineUserMail = getSessionUserEmail();

	var ss = SpreadsheetApp.openById(sheetID);
	var sheet = ss.getSheets()[0];
	var values = getIine();

	// TODO: URL毎にsheetをわける対応を入れる
	// 既にイイネ済みだったらインクリメント
	var found = false;
	for (var row in values) {
	if (values[row][0] == iineUserMail && values[row][1] == url) {
	sheet.getRange(row + 1, row + 1, 1, 3).setValues([[values[row][0] , values[row][1], values[row][2] + 1]]);
	found = true;
	break;
	}
	}

	// 見つからない場合はレコードを追加
	if (!found) {
	sheet.appendRow([iineUserMail, url, 1]);
	}

	if (drawIineView !== false) {
	showIine();
	}

	return getIine();
	}

	// ユーザ情報取得
	function getSessionUserEmail() {
	return Session.getEffectiveUser().getEmail();
	}