GASのダイアログで作成するファイルアップローダーの部品を配置する方法


みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。

前回の記事はこちら。

GASで最も簡単なHTMLサービスによるダイアログを作成する方法
Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。今回は、GASで最も簡単なHTMLサービスによるダイアログを作成する方法をお伝えします。

GASで最も簡単なHTMLサービスによるダイアログの作り方を紹介しました。

まあ、のっぺらぼうですけどね。

なので、今回は、ダイアログに要素を乗っけていきたいと思います。

ということで、GASのダイアログで作成するファイルアップローダーの部品を配置する方法です。

では、行ってみましょう!

スポンサーリンク

前回のおさらい

前回作成した、のっぺらぼうのダイアログはこちらですね。

GASのHTMLサービスによる最も簡単なダイアログ

GASで、このダイアログを表示するのは、以下のスクリプトになります。

function showDialog(){
  var html = HtmlService.createHtmlOutputFromFile('dialog');
  SpreadsheetApp.getUi().showModalDialog(html, "CSVアップロード");
}

プロジェクト内のHTMLファイル「dialog.html」をダイアログとして表示するスクリプトになりますね。

それで、そのHTMLファイルは現時点では、新規作成したときの初期状態で、以下のような内容でした。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    
  </body>
</html>

なので、今回はこのHTMLファイル「dialog.html」を、ファイルをアップロードできるように要素を追加していきたいと思います。

こちら、初期状態に挿入されているタグがどういう意味を持つものなのか…それについては、以下の記事で復習をよろしくお願いいたします。

Google Apps Scriptでサイドバーを作るための初めてのHTML基礎知識
Google Apps Scriptでサイドバーを作る方法をお伝えしています。今回は、GASでサイドバーを作るための初めてのHTMLの基礎知識として、HTMLの記述やタグの基本について解説します。

ファイルアップローダーのHTMLファイルを作る

目指すダイアログは以下のようなものです。

GASのダイアログで作るファイルアップローダー

「ファイル選択」というボタンと、「アップロード」というボタンですね。

この2つをファイルアップローダーの部品として追加してきます。

ボタン

ボタンを作るタグはbuttonタグですね。

<button>ボタンの表示内容</button>

ですから、こいつを2つセットすればOK…と思いきやそうはいきません。

「アップロード」のほうは

<button onclick="uploadCsv(this.parentNode)">アップロード</button> 

で、良いのですがファイルアップロードは実は、それとは別の表現が用意されています。

ファイルアップロードボタン

ファイルアップロードボタンを作成するには、実はinputタグを用います。

type属性を「file」にするのです。

<input type=”file” >

ファイルアップローダーの部品配置を確認する

ということで、「dialog.html」を以下のように変更して、コード.gsのshowDialogを実行してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <input type="file">      
    <button>アップロード</button> 
  </body>
</html>

スプレッドシートには、以下のダイアログが表示されます。

GASで作成するファイルアップローダーダイアログ

少ししかコードを追加していないにも関わらず、いい感じですね!

まとめ

以上、GASのダイアログで作成するファイルアップローダーの部品を配置する方法についてお伝えしました。

ファイルアップロードの部品、type属性をちょろっと変えるだけで作れるんですね。

便利ですね。

さて、次回はボタンを押したときの動作を作っていきます。

GASのダイアログでボタンをクリックしてアラート表示を動作させる方法
Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズ。今回は、GASのダイアログでボタンをクリックしてアラート表示を動作させる方法です。

どうぞお楽しみに!

連載目次:GASのダイアログでcsvファイルアップローダーを作ろう

Google Apps Scriptでダイアログを作成する方法はいくつかありますが、HTMLサービスとUiサービスを組み合わせると自由で多機能なダイアログが作れます。このシリーズではそんなダイアログの作り方を易しく紹介していきます。
  1. Google Apps Scriptでダイアログを作るいくつかの方法と基礎知識
  2. GASで最も簡単なHTMLサービスによるダイアログを作成する方法
  3. GASのダイアログで作成するファイルアップローダーの部品を配置する方法
  4. GASのダイアログでボタンをクリックしてアラート表示を動作させる方法
  5. GASのダイアログのボタンクリックでサーバー側の関数を呼び出すgoogle.script.run
  6. GASのダイアログのデータをフォーム要素を渡すことでまとめてサーバー側に渡す方法
  7. GASのダイアログでアップロードしたファイルをBlobオブジェクトとしてサーバー側に渡す方法
  8. Google Apps ScriptでCSVファイルのデータをスプレッドシートに展開する方法
  9. GASのダイアログをファイルをアップロードが成功したら閉じる方法
  10. GASのダイアログでファイルアップロードが失敗したらアラートを表示する方法

タイトルとURLをコピーしました