【初心者向け】GASツールの導入で挫折した人へ。コピペとクリックだけで練習！「自分専用タイマー」を動かす最短手順

中の人@gasツール効率化

2026年6月8日 10:30

ネットで配布されている便利な「GAS（Google Apps Script）ツール」。導入記事を開いてみたものの、専門用語や複雑な画面を見て、「私には無理だ…」と諦めてしまったことはありませんか？

実は、プログラミングの知識は一切不要です。この記事は、「コードの意味はわからなくていいから、まずは自分の手で動かす」という成功体験を積むための練習記事です。

多くのGASツールは「.gs（裏側の処理）」と「.html（見た目）」という2つのファイルでできています。この構造を練習して、どんなツールでも怖がらずに導入できる自信をつけましょう！

ステップ0：Google ドライブの準備

まずは、すべてのツールの「保存場所」を作ります。

Google ドライブにアクセスし、ログインします。
左上の「＋新規」ボタンをクリックします。
「新しいフォルダ」を選び、「GAS練習」など好きな名前をつけて保存します。
作成したフォルダをダブルクリックして、その中に入ってください。

ステップ1：GASの編集画面を開く

今作ったフォルダの中に、プログラムを書き込むための「専用ファイル」を作成します。

フォルダの中で、何もないところを右クリック（または左上の「＋新規」をクリック）。
メニューの中から「その他」にカーソルを合わせます。
リストに出てくる「Google Apps Script」をクリックしてください。
新しいタブで編集画面が開きます。これがあなたの「魔法のメモ帳」です。

ステップ2：2つのファイルを用意する

GASの編集画面を開くと、最初からコード.gs というファイルが1つ用意されています。ここにもう1つ「画面（HTML）」を追加して、2つの役割を分担させます。

コード.gs の準備 画面左側の「ファイル」一覧にあるコード.gs をクリックします。元々書いてある function myFunction() {...} という文字をすべて消して、真っ白な状態にしてください。
index.html の追加 画面左上の「ファイル」という文字の横にある 「＋」ボタン をクリックし、「HTML」を選択します。ファイル名を入力する欄が出るので、そこに index と入力してEnterキーを押してください。これで画面作成用のファイルが追加されます。

ステップ3：コードをコピペする

以下の2つの枠を、それぞれ対応する場所に貼り付けます。

① コード.gs（裏側の処理担当）

画面左の「コード.gs」をクリックして開き、元々書いてある文字をすべて消してから、以下を貼り付けてください。

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

② index.html（画面の見た目担当）

画面左の「index.html」をクリックして開き、元々書いてある文字をすべて消してから、以下を貼り付けてください。

<!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>

ステップ4：インターネットに公開する（デプロイ）

最後に、このファイルをインターネット上の「アプリ」として公開します。

画面右上の青い「デプロイ」ボタン＞「新しいデプロイ」をクリック。
左上の歯車アイコンから「ウェブアプリ」を選択。
「アクセスできるユーザー」という項目を、「全員」に変更します（※ここが一番重要です！）。
右下の「デプロイ」ボタンを押し、完了の画面が出たら「ウェブアプリのURL」をコピーしてください。

完成！自分専用タイマーを動かそう

コピーしたURLをブラウザの新しいタブに貼り付けて開いてみてください。「キッチンタイマー」が表示され、「スタート」ボタンを押してカウントダウンが始まれば大成功です！

お疲れ様でした。これであなたは「2ファイル構成のGASツールを正しく導入できる人」になりました。今後、ネットで素晴らしいツールを見つけても、この手順（ファイルの作成→コピペ→デプロイ）さえ踏めば、どんなツールでも同じように導入できますよ。

自信を持って、他のツールにも挑戦してみてくださいね！