SYSTEM NOTICE

Auto translation by AI. Be sure, accuracy, nuances and authorial intent may not be fully reflected.

[For Beginners] For those who gave up on setting up GAS tools. Practice with just copy-paste and clicks! The shortest steps to run your own "Personal Timer"

2026年6月8日 10:30

Have you ever opened an article about setting up a convenient "GAS (Google Apps Script) tool" found online, only to give up because of the technical jargon and complex screens, thinking, "This is too much for me..."?

Actually, you don't need any programming knowledge at all. This article is a practice guide designed to help you gain a sense of success by "running it with your own hands, without needing to understand what the code means."

Many GAS tools are made of two files: ".gs (backend processing)" and ".html (the interface)." Let's practice this structure and build the confidence to set up any tool without fear!

Step 0: Preparing Google Drive

First, we will create a "storage location" for all your tools.

Access Google Drive and log in.
Click the "+ New" button in the top left.
Select "New folder," give it a name like "GAS Practice," and save it.
Double-click the folder you created to enter it.

Step 1: Opening the GAS editor screen

Inside the folder you just created, we will create a "dedicated file" to write the program in.

Right-click in an empty space inside the folder (or click "+ New" in the top left).
Hover your cursor over "More" in the menu.
Click "Google Apps Script" from the list that appears.
An editor screen will open in a new tab. This is your "magic notepad."

Step 2: Preparing the two files

When you open the GAS editor screen, one file named Code.gs is provided from the start. We will add one more "screen (HTML)" here to divide the two roles.

Preparing Code.gs Click on Code.gs in the "Files" list on the left side of the screen. Please delete everything that is already written, such as function myFunction() {...}, and leave it completely blank.
Adding index.html Click the "+ button" next to the word "Files" at the top left of the screen and select "HTML". A field to enter the file name will appear; type index there and press the Enter key. This will add the file for creating the screen.

Step 3: Copy and paste the code

Paste the following two boxes into their corresponding locations.

① Code.gs (handles backend processing)

Click "Code.gs" on the left of the screen to open it, delete all the text already written, and then paste the following.

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

② index.html (handles screen appearance)

Click "index.html" on the left of the screen to open it, delete all the text already written, and then paste the following.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: #fdf6f7; /* ふんわりした背景色 */
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      font-family: 'Helvetica Neue', sans-serif;
    }
    .card {
      background: white;
      padding: 40px;
      border-radius: 30px;
      box-shadow: 0 10px 25px rgba(255, 180, 200, 0.2);
      text-align: center;
      width: 300px;
    }
    h1 { color: #ff9aa2; font-size: 24px; margin-bottom: 20px; }
    
    .time-inputs { margin-bottom: 20px; }
    input {
      width: 60px;
      padding: 10px;
      border: 2px solid #ffdac1;
      border-radius: 15px;
      text-align: center;
      font-size: 18px;
      color: #777;
    }
    
    #timer {
      font-size: 60px;
      font-weight: bold;
      color: #ffb7b2;
      margin: 20px 0;
    }
    
    button {
      background: #ffb7b2;
      color: white;
      border: none;
      padding: 15px 40px;
      border-radius: 50px;
      font-size: 18px;
      cursor: pointer;
      transition: 0.3s;
    }
    button:hover { background: #ff9aa2; transform: scale(1.05); }
  </style>
</head>
<body>

<div class="card">
  <h1>Cute Timer</h1>
  <div class="time-inputs">
    <input type="number" id="minutes" value="0"> 分
    <input type="number" id="seconds" value="10"> 秒
  </div>

  <div id="timer">00:10</div>
  <button onclick="startTimer()">スタート</button>
</div>

<script>
  let timer;
  function startTimer() {
    clearInterval(timer);
    let timeLeft = parseInt(document.getElementById('minutes').value) * 60 + 
                  parseInt(document.getElementById('seconds').value);
    
    timer = setInterval(() => {
      timeLeft--;
      document.getElementById('timer').innerText = 
        Math.floor(timeLeft/60) + ":" + (timeLeft%60).toString().padStart(2, '0');
      
      if(timeLeft <= 0) {
        clearInterval(timer);
        alert('時間だよ！☕'); // ちょっと可愛く
      }
    }, 1000);
  }
</script>

</body>
</html>

Step 4: Publish to the internet (Deploy)

Finally, we will publish this file as an "app" on the internet.

Click the blue "Deploy" button at the top right of the screen > "New deployment".
Select "Web app" from the gear icon at the top left.
Change the "Who has access" item to "Anyone" (*This is the most important part!).
Press the "Deploy" button at the bottom right, and when the completion screen appears, copy the "Web app URL".

Done! Let's run your personal timer

Try pasting the copied URL into a new browser tab and opening it. If the "Kitchen Timer" is displayed and the countdown starts when you press the "Start" button, it's a great success!

Great job. You have now become someone who can correctly set up a 2-file GAS tool. From now on, even if you find wonderful tools online, you can set up any tool in the same way by following these steps (create file -> copy/paste -> deploy).

Feel confident and try challenging yourself with other tools too!