Zenn
📝

Claude Artifactsを Web に公開！Google App Script で始めるお手軽デプロイ|html,Javascipt

2024/06/26に公開
HTML
JavaScript
artifact
Claude
tech

キーポイント

  • 読者対象: Google Apps Script や HTML/JS の基礎知識がある開発者
  • 目的: Anthropic Claude などの AI ツールで生成した HTML/JS コードを、Google App Script を使って簡単にデプロイする方法を解説する

近年、Anthropic 社の Claude Artifacts など、高度なWEBアプリを生成できる AI ツールが続々と登場し、Web 開発のハードルは大きく下がっています。しかし、実際に生成した HTML や JavaScript のコードを公開するには、サーバーの準備やドメインの取得など、いくつかの手順が必要となるのが現状です。

そこでおすすめしたいのが、Google が提供するサーバーレスプラットフォーム「Google Apps Script (GAS)」です。GAS を活用すれば、無料で簡単に Web アプリケーションを公開することができます。本記事では、AI ツールで生成した HTML と JavaScript のコードを、GAS を使ってデプロイする方法を、具体的に解説していきます。

1. 準備

まずは、必要な環境を準備しましょう。

  1. Google アカウント: まだお持ちでない場合は、Google アカウントを作成してください。
  2. Google Drive: GAS は Google Drive 上で動作します。
  3. ブラウザ: Google Chrome などのブラウザを使用します。
  4. Artifacts: これで作ったWEBアプリをホスト（デプロイ）することを目指します。

2. HTML/JS ファイルの作成

3. Google App Script の設定

次に、GAS を使って HTML ファイルを表示する設定を行います。

  1. Google Drive 上で新規ファイルを作成し、「Google Apps Script」を選択します。
  2. スクリプトエディタが開いたら、以下のコードを貼り付けてください。
function doGet() {
  const htmlTemplate = HtmlService.createTemplateFromFile('index.html'); 
  const htmlOutput = htmlTemplate.evaluate();
  return htmlOutput;
}

このコードの解説は以下の通りです。

  • doGet(): Web アプリケーションがアクセスされた際に自動的に実行される関数です。GAS では、HTTP GET リクエストを処理するために doGet() 関数を使用します。
  • HtmlService.createTemplateFromFile('index.html'): 指定したファイル名 ('index.html') の HTML ファイルを読み込み、HTML テンプレートを作成します。
  • htmlTemplate.evaluate(): HTML テンプレートを評価し、HTML 出力に変換します。この際に、HTML 内の JavaScript も実行されます。
  • return htmlOutput: 生成された HTML 出力を Web ブラウザに返します。

4. デプロイ

GAS の設定が完了したら、実際に Web アプリとしてデプロイしてみましょう。

  1. スクリプトエディタのツールバーから「デプロイ」>「新しいデプロイ」を選択します。
  2. デプロイ設定画面で「タイプの選択」を「Web アプリ」に設定します。
  3. 「アクセスできるユーザー」を適宜設定します。ここでは、テストのため「自分のみ」を選択しておきます。
  4. 「デプロイ」ボタンをクリックします。
  5. デプロイが完了すると、URL が発行されます。

5. アクセス確認

発行された URL にアクセスすると、作成した HTML ファイルの内容が表示されます。

6. 応用例

GAS と AI 生成コードを組み合わせることで、以下のような Web アプリを簡単に作成できます。

  • 簡単なフォーム: お問い合わせフォームやアンケートフォームを手軽に作成できます。
  • シンプルなゲーム: JavaScript で簡単なゲームを作成し、公開できます。
  • Web ツール: ちょっと頑張れば、バックエンド？にDifyを繋げられそう。
  • 認証: Googleアカウントに基づく認証ができるっぽい？

7. 注意点と制限事項

GAS は無料で利用できますが、もしかしたら公開するうえで注意点があるかもしれません。

8. まとめ

本記事では、GAS を使って AI 生成コードを Web にデプロイする方法を紹介しました。GAS は、Web 開発の経験がない方でも簡単に Web アプリを公開できる便利なサービスです。AI ツールと組み合わせることで、さらに可能性が広がりますので、ぜひ活用してみてください。

Discussion