0

独学でGASをいじっている者です。
Webページ(会社の勤務スケジュール)のソースをGASに渡してGoogle Calendarにイベントを作成するスクリプトを使っています。
GASへの受け渡し方法としてiOSのショートカットアプリを使用しています。内容は画像の通りです。
画像の説明をここに入力
同じ作業をブックマークレットで実現しようと下記を参考に試してみました。
https://q.hatena.ne.jp/1213176191

javascript:(
function() {
var code = document.body.innerHTML;
var act = document.createElement('form');
act.action = 'https://script.google.com/macros/s/******/exec';
act.method = 'post';
act.name = 'myform';
act.id = 'myform';
var hid = document.createElement('input');
hid.type = 'hidden';
hid.name = 'body';
hid.value = code;
act.appendChild(hid);
document.body.appendChild(act);
document.getElementById('myform').submit();
}
)();

実際に使ってみた結果、POSTはできるのですが文字化けしてしまいます。
doPostで受け取ったデータを以下のように処理したもの(html)も示します(長いので冒頭のみ。一部編集しています)。

function doPost(e) {
  html = e.postData.getDataAsString(); // POSTされたデータを取得

まずiOSショートカットによるPOST

<html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="https://********" type="text/css"> <title>******</title>  </head>

<body bgcolor="silver" onload="funcFirst()"> <form method="POST" action="JavaScript:btnInquire(document.forms[0])"> <center><table>
<tbody><tr><td> <center> <tt>

次にブックマークレットによるPOST。文字化けしていますが上記の<body>以降のように思われます。

body=%0D%0A%3Cform+method%3D%22POST%22+action%3D%22JavaScript%3AbtnInquire%28document.forms%5B0%5D%29%22%

iOSショートカットで"ファイル"としているため、POSTの方法に何か指定する必要があると思うのですが、具体的にどのような通信が行われているか分からないため悩んでいます。accept-charsetやenctypeを付け加えたりもしましたが、ブックマークレット自体が作動しなかったりうまくいきませんでした。
具体的な改善方法や、ヒントとなるキーワードでもよいのでご教示いただければと思います。
よろしくお願いいたします。

[2020.5.21追記]
一応の解決を見たので報告します。
まず、上記の通りURLエンコードなしでShift-JISで送信できていることから、文字コードの変換を目指すことにしました。GAS側をいじりたくなかったので、Bookmarklet側で文字コードを変換する方法を模索しましたが、POST送信の時にoptionをつけるとCORSに引っかかるのと、Bookmarkletに変換用のライブラリを読み込んでも良いものか判断ができなかったところ、下記の方法を発見したため試してみました。
JavaScript だけで Shift_JIS/EUC-JP のページから UTF-8 に変換して POST する方法
これは

iframe を新規で作成すると、その文字コードがデフォルトで UTF-8 として処理される事を利用しています。

とのことで、そのとおりUTF-8での送信に成功し、目的は達せられました。
ところが、同じBookmarkletをiOSのChromeで使用するとShift-JISで送信されてしまいます。

次に、GAS側で
getDataAsString('Shift_JIS')
が使えるとの記事を見つけたため、書き換えたところ、無事動きました。以下が最終形になります。htmlの内容は必要なタグを入れるため少し変えました。

javascript:(
function() {
var code = document.documentElement.outerHTML;
var act = document.createElement('form');
act.action = 'https://script.google.com/macros/s/****/exec';
act.method = 'post';
act.name = 'myform';
act.id = 'myform';
act.enctype='text/plain';
var hid = document.createElement('input');
hid.type = 'hidden';
hid.name = 'body';
hid.value = code;
act.appendChild(hid);
document.body.appendChild(act);
document.getElementById('myform').submit();
}
)();
1
  • 回答ありがとうございます。URLエンコードのことは全く考えておりませんでした。仕様によるとenctypeを指定しない場合の標準はURLエンコードになるとのこと。text/plainを指定したところURLエンコードはなくなりましたが、文字化け(Shift-JISからUTF-8への変換と思われる)が発生しました。fetchの件についても研究します。
    – AKK
    Commented 2020年5月4日 6:34

1 件の回答 1

1

文字化けしていますが上記の以降のように思われます。

こちら、確認したところ文字化けではなくURLエンコーディングされているようです。
ツールでデコードしてみたところ、<>などがエンコーディングされていることがわかります。

body=
<form method="POST" action="JavaScript:btnInquire(document.forms[0])"%

これの原因自体は

var code = document.body.innerHTML;

の部分で取得している値が原因だと思われますので、送信する値を見直してみましょう。

また、これは助言ですが、ブックマークレット中でPOSTなどを行いたい場合、fetch apiを利用してみるのはいかがでしょうか?コード中でHTMLを生成せずに直接APIを叩く事が可能です。これは該当のブラウザでも対応しているAPIです(Can i use

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。