質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
GET

GETとはHTTPが対応するリクエストメソッドの一つです。クライアントからサーバーへ送られたURLパラメータのデータを取得する時必要がある時に使われます。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

541閲覧

フォームに落とす方法を知りたい

kaak

総合スコア8

GET

GETとはHTTPが対応するリクエストメソッドの一つです。クライアントからサーバーへ送られたURLパラメータのデータを取得する時必要がある時に使われます。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/08/09 00:58

編集2018/08/31 08:49

###フォームに落とす方法

質問内容

GASを使わずにextension上でページ情報取得→コメント入力→送信は可能でしょうか?
また不可能な場合どのような流れでこのシステムは作成できるでしょうか?

ベースしかない為ソース等もありませんが、アドバイス、また参考になりそうな記事ありましたらご教授お願いいいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_lemon2003_

2018/08/22 04:10

Google フォームを extension 内で内部的に埋め込んで、Google フォーム経由でデータを送信するということですよね?
kaak

2018/08/22 04:41

はい、おっしゃる通りです。nameを各項目に埋め込んで回答先をGoogleフォームにしています。extension内だとなぜか同じソースコードでもSubmitが押せないと言う現象ですね。
_lemon2003_

2018/08/22 04:43

Google フォーム にデータを埋め込むことまではできているのに、送信ができないということですね。
kaak

2018/08/22 04:50

そうですね。ただブラウザでhtmlファイルを開くと普通に送信できるので、extensionの何かで送信ができないと言うことだと思います。
guest

回答2

0

できるだけ修正が簡単になるようにしてみました。
cssを書くのがめんどくさかったのでスタイルはえげつなく雑で申し訳ないですorz
インラインになっているところもありますので、
うまく書き換えて使っていただければ幸いです

フォルダ構造

rootmanifest.json
popuppopup.html
popup_common.js
sendersender.html
sender_common.js

イメージ説明

※アルファベット順のため、順番が異なります。

manifest.json

json

1{ 2 "manifest_version": 2, 3 "name": "XXXXXXXXXX", 4 "version": "0.0.0", 5 "description": "XXXXXXXXXX", 6 "browser_action": { 7 "default_title": "XXXXXXXXXX", 8 "default_popup": "popup/popup.html" 9 }, 10 "permissions": [ 11 "tabs", 12 "http://*.google.com/*", 13 "https://*.google.com/*" 14 ] 15}

popup/popup.html

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>XXXXXXXXXX</title> 6 <script src="./popup_common.js" async defer></script> 7</head> 8<body> 9 <form name="form" action="../sender/sender.html" method="get"> 10 <input type="text" name="entry.0000000000" id="js_title" value="" placeholder="タイトル"><br> 11 <input type="text" name="entry.0000000000" id="js_url" value="" placeholder="URL"><br> 12 <textarea name="entry.0000000000" cols="30" rows="10" placeholder="コメント"></textarea> 13 14 <input type="submit" value="Submit"> 15 </form> 16</body> 17</html>

popup/popup_common.js

javascript

1chrome.tabs.getSelected(null, function(tab){ 2 document.getElementById("js_title").value = tab.title; 3 document.getElementById("js_url") .value = tab.url; 4});

sender/sender.html

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>XXXXXXXXXX</title> 6 <script src="./sender_common.js" async defer></script> 7</head> 8<body> 9 <iframe id="js_sendData" width="0" height="0" style="display: none;"></iframe> 10 <p id="status">送信しています...</p> 11</body> 12</html>

sender/sender_common.js

javascript

1(function(){ 2 let query = location.search; 3 let url = "https://docs.google.com/forms/d/e/XXXXXXXXXXXXXXXXXXXX/formResponse"; 4 5 let targetURL = url + query; 6 7 document.getElementById("js_sendData").src = targetURL; 8 9 document.getElementById("status").innerText = "送信が完了しました"; 10})();

意味の分からないところがあればコメントください。

投稿2018/08/22 07:20

_lemon2003_

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaak

2018/08/24 02:15

ありがとうございます! ログインが必須の場合動作しないのですがどうすれば良いでしょうか?
_lemon2003_

2018/08/24 03:07

ログインしている状態だとできました。 ログインしていなければ、iframe内が https://accounts.google.com/ServiceLigin?service= に飛ばされ、ログインを求められますが、X-Frame-Option:deny でブロックされますので、 ログインをユーザーに求めるのは不可能かと。
kaak

2018/08/24 03:20

フォームを送信するとメールアドレスが記録されるのですが、ログインしている状態でいけたでしょうか?
_lemon2003_

2018/08/24 03:30

さっきいけたんですけどね、、、できなくなりました、、、
kaak

2018/08/24 04:41

送信した後にどこかでエラってるんですかね...
_lemon2003_

2018/08/24 04:45

拡張機能のアイコンを右クリック->ポップアップを検証で原因を調べています。 一時的にiframeのstyleを削除して、widthとheightを適当な数値にしてデバッグしてます。
kaak

2018/08/24 07:53

ありがとうございます!
_lemon2003_

2018/08/24 23:21

google アカウントでログインする理由はありますか? 拡張機能なら(完全な二重投稿は防げませんが)ほとんどの場合を防げますし。 またgasが使えない理由はありますか?二重送信しても、gasでのぞけると思いますので。
_lemon2003_

2018/08/24 23:24

どうしてもgoogleアカウントでログインする必要があるなら、 iframeを内部的に使うのではなく、フォームを埋め込んで使うようにすればよいです。 または、googleアカウントのapiを使うという方法もありますし。 (フォームのデザインは、マテリアルデザイン(例: https://materializecss.com/ )を使いますし、たぶん結局gasも使います。)
kaak

2018/08/27 00:23

GASを使った場合どうなるでしょうか?
kaak

2018/08/27 00:24

Extensionにフォーム自体を埋め込む場合、ページ情報を自動で入力できるでしょうか?
_lemon2003_

2018/08/27 00:29

> GASを使った場合どうなるでしょうか? google formが勝手にやってくれてるところを、spreadsheetとかを使ってこちら側が全力でgasを書いてやるだけです。 ログインしないのであれば、頑張ればできます。 ただログインしないのであれば、google formがspreadsheetに勝手に入れてくれますので。 > Extensionにフォーム自体を埋め込む場合、ページ情報を自動で入力できるでしょうか? この前作成したextensionはchrome拡張のapiである、chrome.tabsを使って取得しています。 取得と自動入力に関しては、google formを使おうが使わまいが、勝手は変わりません。
kaak

2018/08/27 00:34

ログインというのは「このフォームを送信すると、メールアドレスOOO@XXXXXX.co.jp)が記録されます。自分のアカウントでない場合は、アカウントを切り替えてください」とういう文言が出るタイプのフォームなのですがあ、これはやはりGASでなければ厳しいですか?
_lemon2003_

2018/08/27 00:35

いや、入力するだけなら、この前作ったextensionを少しいじるだけです。
_lemon2003_

2018/08/27 00:36

少し手を加えるだけで済みます。
kaak

2018/08/27 00:37

現状、そのタイプのフォームを適応させると、回答が落ちてこないのですがなぜでしょうか?
_lemon2003_

2018/08/27 00:40

google form(https://docs.google.com/forms/d/何たらかんたら/edit)の設定の > ログインが必要: > 回答を 1 回に制限する > 回答者による Google へのログインが必要になります。 のチェックボックスのことですか? それとも > メールアドレスを収集する のチェックボックスのことですか?
kaak
_lemon2003_

2018/08/27 00:48

どのような設定にするとそうなりますか? 今、アカウントを切り替えて確認していますが。
kaak

2018/08/27 00:51

特定のドメインのメールアドレスのみの回答しかできないフォームで、さらにメールアドレスを収集しているような仕組みになってます
kaak

2018/08/27 00:51

GASを使うのであればおそらく、GASにページ情報を受け渡し、GAS側で受け取り、Googleフォームへ入力、ができればベストですよね。
kaak

2018/08/27 01:57

どっちでもないようですが、 メールアドレスを収集+ログイン必須 の機能はついています
_lemon2003_

2018/08/27 01:58

画像を見る限り、googleアカウントでのログインを必須としているようにみえます。 その際に、「メールアドレスを記録しますよ」ということですよね。
kaak

2018/08/27 02:02

Gsuit専用の機能で回答者を限定できるだけかと思います.
_lemon2003_

2018/08/27 02:09

荒技(というか手抜きに近い)ですが、 内部的に使うのではなく、直接埋め込んだところに入力してもらうということはできますよ。 (ポップアップとか、小さい別ウィンドウとか。) それなら、ログインが必要なら、別ページに飛ばされるだけですし。
kaak

2018/08/27 02:15

ポップアップ内でログイン画面に飛ばされる分には問題ありません!
_lemon2003_

2018/08/27 02:17

では、そのソースを新しい回答に書いておきます。 (ほとんど変わらないと思いますが。)
kaak

2018/08/27 02:22

ありがとうございます
_lemon2003_

2018/08/27 04:16

ちょっとしばらく返信と回答ができない可能性があります(最大で一週間弱)
kaak

2018/08/28 03:25

かしこまりました。
_lemon2003_

2018/08/30 06:05

とりあえずコード書きました。 回答に記載します。
guest

0

ベストアンサー

フォルダ構造

rootmanifest.json
background.js
popupWindowindex.html
common.js
style.css

イメージ説明

※アルファベット順のため、順番が異なります。

manifest.json

json

1{ 2 "manifest_version": 2, 3 "name": "AAAAAAAAAA", 4 "version": "0.0.0", 5 "description": "AAAAAAAAAA", 6 "background": { 7 "scripts": ["background.js"], 8 "persistent": false 9 }, 10 "browser_action": { 11 "default_title": "AAAAAAAAAA" 12 }, 13 "permissions": [ 14 "tabs", 15 "http://*.google.com/*", 16 "https://*.google.com/*" 17 ] 18}

background.js

javascript

1chrome.browserAction.onClicked.addListener((tab) => { 2 chrome.runtime.sendMessage({ 3 message: "popupWindow_closeWindow" 4 }); 5 6 const w = 520; 7 const h = 700; 8 const s_w = window.parent.screen.width; 9 const s_h = window.parent.screen.height; 10 11 window.open("./popupWindow/index.html", "_blank", `width=${w},height=${h},left=${(s_w - w) / 2},top=${(s_h - h) / 2}`); 12});

popupWindow/index.html

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Google Form</title> 6 <link rel="stylesheet" href="style.css"> 7 <script src="common.js" async defer></script> 8</head> 9<body> 10 <iframe frameborder="0" id="js__iframeForm"></iframe> 11</body> 12</html>

popupWindow/common.js

javascript

1const getQueryString = function getQueryString(obj){ 2 let result = ""; 3 4 for(let key in obj){ 5 result += `&${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`; 6 } 7 8 return `?${result.slice(1)}`; 9} 10 11chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => { 12 if(request.message === "popupWindow_closeWindow"){ 13 window.close(); 14 } 15}); 16 17chrome.tabs.query({ 18 active: true 19}, (arr_tab) => { 20 console.log(arr_tab); 21 22 let title = arr_tab[0].title; 23 let url = arr_tab[0].url; 24 25 const iframe = document.getElementById("js__iframeForm"); 26 27 iframe.src = `https://docs.google.com/forms/d/e/0123456789abcdef/viewform${getQueryString({ 28 "entry.000000000": title, 29 "entry.000000000": url 30 })}`; 31});

popupWindow/style.css

css

1html, 2body{ 3 border: 0; 4 height: 100%; 5 margin: 0; 6 padding: 0; 7 width: 100%; 8} 9 10iframe{ 11 border: 0; 12 height: calc(100% - 3px); 13 margin: 0; 14 width: 100%; 15}

投稿2018/08/30 06:18

_lemon2003_

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_lemon2003_

2018/08/30 06:20

urlやkeyをstorageに保存するほうがいいかもしれませんね。 (そちらのソースのほうが都合がよいなら、少し書き加えます。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問