(license)みなさん、こんにちは!タカハシ(@ntakahashi0505)です。Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。今回は、GASで最も簡単なHTMLサービスによるダイアログを作成する方法をお伝えします。tonari-it.com2019.11.18GASで最も簡単なHTMLサービスによるダイアログの作り方を紹介しました。のっぺらぼうですけどね。今回は、ダイアログに要素を乗っけていきたいと思います。いうことで、GASのダイアログで作成するファイルアップローダーの部品を配置する方法です。前回のおさらいファイルアップローダーのHTMLファイルを作るボタンファイルアップロードボタンファイルアップローダーの部品配置を確認するまとめ連載目次:GASのダイアログでcsvファイルアップローダーを作ろう前回のおさらい前回作成した、のっぺらぼうのダイアログはこちらですね。GASで、このダイアログを表示するのは、以下のスクリプトになります。"CSVアップロード");}プロジェクト内のHTMLファイル「dialog.html」をダイアログとして表示するスクリプトになりますね。それで、そのHTMLファイルは現時点では、新規作成したときの初期状態で、以下のような内容でした。target="_top"></head><body></body></html>なので、今回はこのHTMLファイル「dialog.html」を、ファイルをアップロードできるように要素を追加していきたいと思います。こちら、初期状態に挿入されているタグがどういう意味を持つものなのか...それについては、以下の記事で復習をよろしくお願いいたします。Scriptでサイドバーを作る方法をお伝えしています。今回は、GASでサイドバーを作るための初めてのHTMLの基礎知識として、HTMLの記述やタグの基本について解説します。tonari-it.com2018.11.14ファイルアップローダーのHTMLファイルを作る目指すダイアログは以下のようなものです。「ファイル選択」というボタンと、「アップロード」というボタンですね。この2つをファイルアップローダーの部品として追加してきます。ボタンボタンを作るタグはbuttonタグですね。<button>ボタンの表示内容</button>ですから、こいつを2つセットすればOK...と思いきやそうはいきません。onclick="uploadCsv(this.parentNode)">アップロード</button>で、良いのですがファイルアップロードは実は、それとは別の表現が用意されています。ファイルアップロードボタンファイルアップロードボタンを作成するには、実はinputタグを用います。type属性を「file」にするのです。>ファイルアップローダーの部品配置を確認するということで、「dialog.html」を以下のように変更して、コード.gsのshowDialogを実行してみましょう。type="file"><button>アップロード</button></body></html>スプレッドシートには、以下のダイアログが表示されます。コードを追加していないにも関わらず、いい感じですね!まとめ以上、GASのダイアログで作成するファイルアップローダーの部品を配置する方法についてお伝えしました。ファイルアップロードの部品、type属性をちょろっと変えるだけで作れるんですね。次回はボタンを押したときの動作を作っていきます。Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズ。今回は、GASのダイアログでボタンをクリックしてアラート表示を動作させる方法です。Scriptでダイアログを作成する方法はいくつかありますが、HTMLサービスとUiサービスを組み合わせると自由で多機能なダイアログが作れます。このシリーズではそんなダイアログの作り方を易しく紹介していきます。プランノーツ代表、コミュニティ「ノンプロ研」主宰。ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ★フォロー頂ければ嬉しいです。「コミュニティ+講座」形式で継続性&教え合える環境も提供。!ノンプログラマーがプログラミングスキルを身に着ける支援ををするコミュニティ。セミナー・もくもく会・Facebookグループのサポートで「自らで学び続ける力をつける」支援、「教え合うことで学びの価値を上げる」場の提供をしています。Script...仕事効率化において、学び活用するメリットをこれでもかとお伝えします。ScriptGASでスプレッドシートの入力からGoogleカレンダーに複数のイベントを追加GASでGoogleカレンダーに複数の予定をまとめて追加するスクリプトを作成する方法をお伝えしています。今回は、スプレッドシートの値を二次元配列で取得して、複数のイベントを追加するスクリプトを作成します。Cloudを利用してWebページをスクレイピング「JavaScriptで動作するWebページ(動的サイト)を色々な言語でスクレイピング」することをシリーズでお伝えしています。ScriptGASでGoogleフォームに追加できる質問の種類とそのメソッドまとめGASでGoogleフォームを作成する方法についてお伝えしています。Googleフォームの質問の種類と、そのオブジェクト名、そしてそれらを作るGASのメソッドをまとめて紹介します。SQLのデータベースにアクセスする方法をシリーズでお伝えしています。今回はGASのJDBCサービスでトランザクション処理を行う方法をお伝えします。2020.01.07Excel・VBA活用術2019年プログラミング言語別に考えていること、やりたいこと明けましておめでとうございます。ノンプログラマー向けのプログラミングという視点で、2019年にプログラミング言語VBA、GAS、Pythonについて考えていること、やりたいことをお伝えします。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント107セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント107セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。ご依頼・お見積などお気軽にどうぞ!お問い合わせフォーム新着記事GASでGoogleスライドのSlideオブジェクトの概要とその取得方法2020.01.162020.01.16【エクセルVBA】ユーザーフォームにコンボボックスを追加する方法2020.01.162020.01.16GASでGoogleスライドを操作するSlidesサービスの基礎の基礎2020.01.152020.01.16GASでGoogleスライドのプレゼンテーションを操作するはじめの一歩2020.01.142020.01.15GASのconsoleクラスのメソッドで実行時間をログ出力する方法2020.01.122020.01.12Facebookページいつも隣にitのお仕事タイトルとURLをコピーしました。