GAS x HtmlでWebアプリを作ってみよう① はじめの一歩

はじめに

上の記事では、YouTube Data APIを使って、動画検索アプリをスプレッドシート上に作りました。
今回は、これと同じ機能をGASのHTMLサービスと組み合わせて、Webアプリとして公開してみましょう。

完成イメージとしてはこんな感じです。

HtmlサービスでGUIを作る

まずは、検索ワードの入力ページを作っていきます。
Apps Scriptは上の記事で作ったスプレッドシートにバインドされた「YouTube Data API」を使います。

index.htmlを用意する

ファイルの➕マークからHTMLファイルを新規で作成します。
ファイル名を「index」とします。

デフォルトで記載されている<body>タグの中に、オレンジ枠の内容を追記して保存します。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>YouTube 検索</h1>
    <p>検索ワードを入力して、検索ボタンを押してください。</p>
    <p>関連動画25件のタイトル、リンク、再生数、いいね数が取得できます。</p>
    <form>
      <input type="text">
      <button type="submit">検索</button>
    </form>
  </body>
</html>

doGet関数を記述してデプロイする

コード.gsファイルにdoGet関数を図のように記述します。
保存したら、「デプロイ」から「新しいデプロイ」を選択します。

function doGet() {
  const template = HtmlService.createTemplateFromFile('index');
  const htmlOutput = template.evaluate();
  return htmlOutput;
}

左上の歯車マークから「ウェブアプリ」を選択します。

「説明」は書いても書かなくても大丈夫です。
実行ユーザーを「自分」、アクセスできるユーザーを「全員」として「デプロイ」します。

URLをクリックします。

検索ワード入力ページをデプロイできました！
第一ステップのブラウザ表示は達成です！
まだ何も機能はしませんが。

公式ドキュメントはこちらです↓

doGet( )ウェブアプリHTMLサービス 
次回につづく

次回、シリーズ②では、CSSで見た目を整えていきます！

シリーズ目次：GAS x HtmlでWebアプリを作ってみよう

  1. GAS x HtmlでWebアプリを作ってみよう① はじめの一歩
  2. GAS x HtmlでWebアプリを作ってみよう② CSSでスタイリング
  3. GAS x HtmlでWebアプリを作ってみよう③ 検索結果ページの作成
  4. GAS x HtmlでWebアプリを作ってみよう④ 検索機能の実装

GASAPI,html,Webアプリ,YouTube Data API

Posted by botw