́)b今回は仕事で作った物を少しコンパクトにして、備忘録的な感じで紹介してみたいと思います。サンプルまず初めにサンプルを紹介しますねー。スプレッドシートと連携したAjaxフォーム※ちょっと見てみたらSlimが上手く変換出来ないバグが発生しているみたいだったので、HTMLバージョン作りましたー。↑のリンク先が正しく表示されない場合は下記のリンク先をお試し下さい。SlimじゃないバージョンCODEPENページのフォームを送信すると、上記リンクのGASが動き、同じくリンク先のスプレッドシートにデータが入っていくと言う仕組みになってます。それでは上記の物について簡単にですが解説していきたいと思いまーす。何でGASを使うの?この投稿のタイトルを見て、「フォームとスプレッドシートを連携したいなら、Googleフォームの機能使えば良くない?」と思った方、その通りです!Googleフォームの機能で満足しているのならば、Googleフォームを使ってスプレッドシートと連携させるのが、一番手っ取り早く、簡単です。今回はそれを使わないのか?それを簡単に説明していきたいと思います。Googleフォームを使うデメリットデザインの自由が効かない一番にして最大の理由はこれです。Google本サービスを不正に利用しないでください。提供するインターフェースおよび手順以外の方法による本サービスへのアクセスを試みてはなりません。ユーザーは、法律(輸出、再輸出に関して適用される法規制を含みます)で認められている場合に限り、本サービスを利用することができます。ユーザーに対する本サービスの提供を一時停止または停止することができます。iframeを使っている所ページ内の埋め込みにはiframeが使われるのですが、それの所為でページ内データとの連携が難しくなっています。簡単な見積計算みたいな機能を作って、計算が終わったらそれをフォームに挿入する等の処理が出来ません...Googleフォームを使うメリットしかし逆にGoogleフォームを使うメリットも勿論あります!更新が簡単Googleフォームを使う最大のメリットはこれです!フォームを作成する為のUIはとても分かり易く、Web関連の知識が無い人でも簡単に更新が出来、かなり凝ったフォームも簡単に作る事も出来るでしょう。統計を表示する機能があるGoogleフォームには統計を見易く表示する機能がデフォルトであります。スプレッドシートと連携出来れば、統計を出すのは結構簡単なのですが、Googleフォームを使うメリットの一つかなーって思います。ウェブページの更新をする人があまりWebの知識を持っていない場合は、Googleフォームを使うのが適当かなと思います。逆に、その辺の知識がある人からするとGoogleフォームを使うデメリットはかなり大きいかなーと感じます...まぁその辺はトレードオフな感じですね、状況によってより良いと思われる物を選択しましょう。今回は、Googleフォームを使わずに、GASを使ったスプレッドシートとの連携方法について説明していきたいと思います。今回のサンプルは「Googleフォームのスプレッドシート連携機能と、なるべく同じような仕様にしたい」って言うのと「自動返信メール機能」を目標に作りました。具体的には以下の機能が欲しいなーと思って制作しました。・送信データ確認付き自動返信メール機能(テキストメール&HTMLメール)それでは、早速作っていきましょう!最初に下記リンクをクリックして自分のマイドライブに移動します。https://drive.google.com/drive/my-drive↓そして今回は2つのファイルを使うので、分かり易い様にフォルダを作るのが良いでしょう、左上の「新規」をクリック>「フォルダ」をクリックして適当な名前でフォルダを作りましょう。今回は「サンプル」と言う名前にしました。↓ファイル一覧に「サンプル」と言うフォルダが有ると思うので、ダブルクリックしてフォルダ内に移動します。↓もう一度「新規」をクリックして、新しいGoogleスプレッドシートを作成します。これも適当な名前を付けておきましょう、今回は「Ajaxフォーム」と言う名前にしました。次にスプレッドシートのシート名を変更します。左下の所から「名前を変更」でOKです。今回は「フォームデータ」と言う名前にします。「サンプル」フォルダに戻り、「Ajaxフォーム」を右クリック>「リンクを取得」をクリックします。そのリンクの最後「?id=」以降の文字列がこのスプレッドシートのIDになります。後で使用するのでメモ帳等を起動して、コピペしておきましょう。次はGASのファイルを作って行きます。Script」を選択しましょう。Script」が出て来るので、それを追加して下さい。↓GASにも適当に名前を付けましょう。今回はスプレッドシートと同じ「Ajaxフォーム」と言う名前にしました。↓それが出来たら↓のサンプルを参考にファイルを作成、コピペして行きます。ファイル」を選択し、「html_mail」と「text_mail」を作り、それぞれサンプルからコピペします。↓それぞれの作成とコピペが終わったら、最後にGASの「公開」を行います。上のメニューから「公開」>「ウェブアプリケーションとして導入」をクリックします。すると下画像のポップアップが出るので、「アプリケーションにアクセスできるユーザー」を「全員(匿名ユーザーを含む)」に変更して「導入」をクリックしましょう。※初回公開時や、コードの変更後の公開時に、コード内で使用されるサービスに関する承認を求められた場合は「続行」をクリックして承認して下さい。「ウェブアプリケーションとして導入」が終わると下画像のポップアップが出ます。アプリケーションのURL」を後で使うので、これもメモ帳等にコピペしておきましょう。(これがフォームの送り先になる訳です)※このURLは「公開」>「ウェブアプリケーションとして導入」をクリックすれば、いつでも確認出来ます。↓これでGoogleドライブ側で必要な事は終了です。次にフォームページ側の解説をしていくのですが、その前にサンプルの「main.gs」について軽く解説していきたいと思います。」部分を削除してください。必要なデータだけを「form_data」に入れていきます。A1に「タイムスタンプ」を挿入します。スプレッドシートの1行目をヘッダーとして取得します。in」を使ってループ処理を行います。フォームの値を挿入します。そのヘッダーの列の新しい行にフォームの値を挿入します。セルの最後に「進捗状態」を入れる等用の処理です。「タイムスタンプ」の場所に日時のデータを挿入。今回は単純なデータしか返していませんが、頑張れば色々出来そうですねー。HTMLメールとテキストメールのテンプレートを準備します。メール送る際のオプションを設定します。「evaluate()」を行う事でテンプレート内のスクリプトを実行する事が出来ます。テキストメールとオプションを設定してメールを送信。options)}↓では次にフォームページ側について解説していきます!CODEPENを使ったサンプルを元に説明していきたいと思います。スプレッドシートと連携したAjaxフォームリンクを開いたらページ上部にある「Fork」をクリックしましょう。する事で独自のCODEPENページを作る事が出来ます。便利ですねーwCODEPENは編集も楽だし、slim等の色々なフォーマットに対応しているので、これ系のサービスの中ではかなりお勧めだと思います。ここでようやく出てきました、申し訳程度の「Slim」「Sass」「CoffeeScript」要素です...wValidateはjquery.validateを使ってサクッとやってます。type='hidden'」の要素に「SPREADSHEET_ID」と「SHEET_NAME」を指定している所です。GAS側はこのデータを使って、フォームデータを入れるスプレッドシート、シート名を判別しています。これによって同じGASを使ってもフォームデータを、違うスプレッドシートや、シートに挿入出来る様な作りになっています。メールアドレスを入力すると、そのアドレス宛に自動返信メールを送信します。メールアドレスはスプレッドシートに登録されないので、安心してお試し下さい。placeholder='適当でOK。́・ω・`)「必須」ラベルの見た目を良くしてるだけです。0px最後にJS部分です。ポイントは「.validate()」と「$.ajax()」のオプション部分です。true」を付けましょう。これにより勝手にsubmitされなくなります。'jsonp'」になっている事を確認して下さい。́)bまとめどうでしょうか?GASのコメント部分を除いた行数は60行くらいです。その割には結構便利な物になっていませんか?Google側も色々な機能強化(アドオン機能等)したり、ドキュメントを充実させたりして、もっとGASを使って欲しいのかなーと言う印象です。́)b※lab.snowsunny@gmail.comのアカウントは普段ほとんど使わないので、何か聞きたい事等が有る人は、この投稿のコメントにお願いしまーす。参考リンクhttps://developers.google.com/apps-script/guides/contenthttps://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-apphttps://developers.google.com/apps-script/reference/spreadsheet/spreadsheethttps://developers.google.com/apps-script/guides/html/templateshttps://developers.google.com/apps-script/reference/html/html-servicehttps://developers.google.com/apps-script/reference/gmail/gmail-appあとがきあとがきでーす、興味がある人はどぞー。実はこの投稿ですが、最初は週一くらいの連載形式でやってみようかなーと思っていたのですが、連載が止まるのが目に見えていたので一つの投稿にまとめましたーwその所為で、全体が長くなっていたり、説明が雑になっていたりしています...すみませんでした...GASも行数を圧縮するために、関数分けとかをほとんどしていないので、必要があれば適宜行って下さーい。疲れたのでまた後で書きます...本当はやりたかった事、良く分からなかった事サンプルを作っていて良く分からなかったを書いてみようと思います。GASに詳しい方がいれば、知恵を貸して頂ければ幸いです。requestStockLike274@snowsunnyWeb系色々やってまーす。凄い遅筆なのですが、よろしくお願いします。upLoginユーザーは見つかりませんでした。