Zenn
🔗

スプレッドシートにAmazonのURL短縮機能を付けた

2023/08/10に公開
GAS
url
Amazon
bulma
tech

はじめに

スプレッドシートで Amazon の URL を並べるときに、URL が長くなり、読みにくくなってしまうので、すぐにサイドバーで URL を短縮できる機能を付けました。

完成したもの


AmazonのURLを入力に短縮させたい Amazon の URL を代入して、SUBMITボタンを押すと短縮された URL が返ってきます。Amazon の URL でない場合、Errorが返ってきます。

使ったもの

  • Google Apps Script
  • Bulma

Google Apps Script とは？

Google が開発している Google のサービスを自動化できる言語です。基本的な構文は、JavaScript と同じです。
https://workspace.google.co.jp/intl/ja/products/apps-script/

Bulma とは？

フロントエンドのデザインを簡単に作成するための CSS フレームワークです。
https://bulma.io/

Amazon の URL の短縮方法

Amazon の URL は、https://www.amazon.co.jp/dp/<ASIN(数字)>だけで機能するので、短縮が可能です。
例えば、
https://www.amazon.co.jp/HHKB-Professional-HYBRID-%E6%97%A5%E6%9C%AC%E8%AA%9E%E9%85%8D%E5%88%97%EF%BC%8F%E5%A2%A8-PD-KB820BS/dp/B082TSZ27D?ref_=ast_sto_dpは、
https://www.amazon.co.jp/dp/B082TSZ27Dまで短縮が可能です。
ちなみに、私は HHKB を持ってません。

開発

ディレクトリ構造

 /
　├ main.gs
　└ sidebar.html

サイドバーを作る

CDN の読み込み

Bulma の CDN を読み込みます。サイドバーにしたときに、なぜかスクロールバーが出てしまうので、CSS でスクロールバーを消しています。Bulma を使っているので、CSS は少ないです。

sidebar.html
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ::-webkit-scrollbar{
      display: none;
    }
  </style>
</head>

:::

HTML を書く

Bulma を使用しているのでクラスが多いです。

sidebar.html
<body>
  <div class="px-2">
    <div class="box mt-6">
      <div>
        <h1 class="title">URLを入力</h1>
        <p class="subtitle">長いAmazonのURKを入力してください。</p>
      </div>
      <div>
        <input
            class="input mt-3 url-input-form"
            type="text"
            placeholder="AmazonのURLを入力..."
          />
        <button class="button mt-2 url-submit-button">SUBMIT</button>
      </div>
    </div>
    <div class="box mt-4">
      <div>
        <h1 class="title">出力</h1>
        <p class="subtitle">短縮されたAmazonのURL</p>
      </div>
      <div>
        <input
            class="input mt-3 output-text"
            type="text"
            value="URLが入力されていません"
            readonly
          />
        <button class="button mt-2 cpy-button">COPY</button>
      </div>
    </div>
  </div>
  <!-- 省略 -->
</body>

スクリプトを書く

入力された URL が、エラーの場合と Amazon の URL でないときは、出力の URL にErrorを表示させるようにしています。また、使いやすいように、出力された URL をコピーできるようにしています。

sidebar.html
<body>
  <!-- 省略 -->
  <script>
      const formatURL = (target) => {
        let return_data = "";
        if (target.startsWith("https://www.amazon.co.jp/")) {
          const split_url = target
            .replace("https://www.amazon.co.jp/", "")
            .split("?")[0]
            .split("/");
          if (split_url.indexOf("dp") != -1) {
            return_data = `https://www.amazon.co.jp/dp/${
              split_url[split_url.indexOf("dp") + 1]
            }`;
          } else {
            return_data = "Error: Invalid URL";
          }
        } else {
          return_data = "Error: Not Amazon URL";
        }

        return return_data;
      };

      const submit_button = document.querySelector(".url-submit-button");
      const target_url = document.querySelector(".url-input-form");
      const copy_button = document.querySelector(".cpy-button");
      const output_url = document.querySelector(".output-text");

      function conversionURL() {
        const output_text = formatURL(target_url.value);
        output_url.value = output_text;
      }

      function copyURL() {
        navigator.clipboard.writeText(output_url.value);
      }

      submit_button.onclick = conversionURL;
      copy_button.onclick = copyURL;
  </script>
</body>

sidebar.html コード全体

sidebar.htmlの全体です。

コード全体 sidebar.html
sidebar.html
<!DOCTYPE html>
<html>
<head>
  <base target="_top" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
  <meta charset="UTF-8" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ::-webkit-scrollbar{
      display: none;
    }
  </style>
</head>

<body>
  <div class="px-2">
    <div class="box mt-6">
      <div>
        <h1 class="title">URLを入力</h1>
        <p class="subtitle">長いAmazonのURKを入力してください。</p>
      </div>
      <div>
        <input
            class="input mt-3 url-input-form"
            type="text"
            placeholder="AmazonのURLを入力..."
          />
        <button class="button mt-2 url-submit-button">SUBMIT</button>
      </div>
    </div>
    <div class="box mt-4">
      <div>
        <h1 class="title">出力</h1>
        <p class="subtitle">短縮されたAmazonのURL</p>
      </div>
      <div>
        <input
            class="input mt-3 output-text"
            type="text"
            value="URLが入力されていません"
            readonly
          />
        <button class="button mt-2 cpy-button">COPY</button>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    const formatURL = (target) => {
        let return_data = "";
        if (target.startsWith("https://www.amazon.co.jp/")) {
          const split_url = target
            .replace("https://www.amazon.co.jp/", "")
            .split("?")[0]
            .split("/");
          if (split_url.indexOf("dp") != -1) {
            return_data = `https://www.amazon.co.jp/dp/${
              split_url[split_url.indexOf("dp") + 1]
            }`;
          } else {
            return_data = "Error: Invalid URL";
          }
        } else {
          return_data = "Error: Not Amazon URL";
        }

        return return_data;
      };

      const submit_button = document.querySelector(".url-submit-button");
      const target_url = document.querySelector(".url-input-form");
      const copy_button = document.querySelector(".cpy-button");
      const output_url = document.querySelector(".output-text");

      function conversionURL() {
        const output_text = formatURL(target_url.value);
        output_url.value = output_text;
      }

      function copyURL() {
        navigator.clipboard.writeText(output_url.value);
      }

      submit_button.onclick = conversionURL;
      copy_button.onclick = copyURL;
  </script>
</body>

</html>

表示できるようにする

sidebar.htmlの表示

GAS からsidebar.htmlを表示させるようにします。

main.gs
function openSideBar() {
  const html = HtmlService.createHtmlOutputFromFile('sidebar').setTitle('Amazon URL 短縮');
  SpreadsheetApp.getUi().showSidebar(html);
}

メニュバーに表示


上の画像のように、メニューバーからsidebar.htmlを表示できるようにします。

main.gs
function openAmazonMenuBar() {
  const ui = SpreadsheetApp.getUi()
  const menu_amazon = ui.createMenu("Amazon");
  menu_amazon.addItem("AmazonURLの短縮","openSideBar");
  menu_amazon.addToUi();
}

トリガーの設定

main.gsで書いたopenAmazonMenuBarをスプレッドシートにアクセスしたら実行されるようにします。

  1. GAS の左側からトリガー
  2. トリガーを追加
  3. 実行する関数を選択にopenAmazonMenuBarを設定
  4. イベントの種類をスプレッドシートの起動時に設定

これで、スプレッドシートにアクセスをすると実行されるようになりました。

まとめ

この URL 短縮機能を利用することで、スプレッドシート内の Amazon のリンクが整理され、長い URL に悩むことがなくなりました。ぜひ、この URL 短縮サイドバーを開発してみてください。

Discussion