フォームブリッジのカスタマイズ(kintoneからのGET, kintoneへのPUT)

質問させてください。

 

フォームブリッジのJSカスタマイズで、kintoneからレコードをGETするために下記のようなXMLHttpRequestを記載したのですが、エラーとなってしまいます。

回避策をご教授頂ければ幸いです。よろしくお願いします。

 

==以下JS==

var params = ‘?app=1001&id=1’;

varurl=‘https://{ourdomain}.cybozu.com/k/v1/record.json’+params;

 

varxhr=newXMLHttpRequest();

xhr.open(‘GET’, url);

xhr.setRequestHeader(‘X-Requested-With’, ‘XMLHttpRequest’);

xhr.setRequestHeader(‘Authorization’,‘Basic {encoded basicid:basicpw}’);

xhr.setRequestHeader(‘X-Cybozu-API-Token’,‘{our app’s Token}’);

xhr.onload=function() {

if (xhr.status===200) {

// success

console.log(JSON.parse(xhr.responseText));

} else {

// error

console.log(JSON.parse(xhr.responseText));

}

};

xhr.send();

==========

 

==以下エラーメッセージ==

OPTIONS https://{ourdomain}.cybozu.com/k/v1/record.json?app=1001&id=1 401 (Unauthorized)

(anonymous) @ VM69:1

dd5e8d1cea3d88552d6e77e03c2b900bcfd72622369a1aa5850b4acae88595d6#/:1 Failed to load https://{ourdomain}.cybozu.com/k/v1/record.json?app=1001&id=1: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://form.kintoneapp.com’ is therefore not allowed access.

VM69:1 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://{ourdomain}.cybozu.com/k/v1/record.json?app=1001&id=1 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

=====

 

お聞きしたいのは上記エラーの回避方法ですが、万が一他の方法で解決できることもあるかもしれないで、私の実現したいことも下記に記載させてください。

フォームブリッジを使用して、開催するセミナーと受講申し込みを管理したいと思っています。

フォームブリッジでは、回答数に制御を加える機能がありますが、開催するセミナー数が多いため、セミナー毎にアプリの立ち上げるのは難しく、セミナーは1つのアプリで管理し、それをkviewerルックアップしようと思っています。

下記のような二つのアプリを作成し、フォームブリッジを経由して受講申し込みが来たら、セミナー一覧の申請者数に+1を加え、申請者数が定員になったら受付終了にしたいです。

A)セミナー一覧

B) 受講申込一覧

何卒よろしくお願いします。

こんにちは。

エラー文に「Access-Control-Allow-Origin」とありますので、クロスドメイン制約に引っかかりGETできないのだと思います。

私も過去にkintoneから取得した値をフォームブリッジの初期値として設定する方法を探していたのですが、その時はフォームブリッジから直接GETすることは無理だと聞いて、親ページからpostmassageを実行することで解決しました。

(直接GETすることは無理だと書いておりますが、もし方法があったらすみません。調べが足りてなかったです。)

 

また、フォームブリッジを単体で使用せずにWebサイト内に表示する場合に限定されますが、

kintoneへのGET文は親ページのphpに組み込んではいかがでしょうか?

 

私の場合は、Wordpressで作成したページに、フォームブリッジで作成したフォームをiframeとして表示しております。

その時に使用しているコードを今回の要件に合わせてみました。

===================================================================================

<?php

$str = “<セミナー名>”;

//セミナー受講申し込み一覧アプリ
$search = ‘セミナー名 =’ . $str’;
$query = ‘query=’. utf8_uri_encode($search);
$url = ‘https://<サブドメイン>.cybozu.com/k/v1/records.json?app=1001’;
$url = “{$url}&{$query}”;

$headers = array( ‘X-Cybozu-API-Token’ => ‘<APIトークン>’ );
$res = wp_remote_get(
$url,
array(
‘headers’ => $headers
)
);

$return_value = json_decode( $res[‘body’], true );

//申し込みレコードの件数を確認(20件以下でフォームを表示、それ以上で非表示(受付終了))
if (count( $return_value[‘records’]) < 20) {
echo ‘<p><iframe frameborder=“0” scrolling=“auto” src=“<フォームブリッジのiframeURL>” width=“100%”></iframe></p>’;

} else {
echo ‘<p>受付は終了しました</p>’;
}

?>

===================================================================================

 

アプリを「セミナー申し込み受付アプリ」として1つにまとめ、セミナー名がリストアップされたドロップリストを作成します。

フォームブリッジはセミナー数の分だけ作成し、適切なセミナー名を初期値として設定します。

 

各セミナーのページが開かれたタイミングで上記のphpが設定したセミナー名でkintoneにGETし

レコード数が(=定員:仮に20名)以上であれば受付終了の文言を表示し、それ以下であればフォームを表示するといったコードです。

 

上記について、全く的外れなことを言っておりましたら申し訳ありません。

参考になれば幸いです。

 

y-kishi様

やっぱりその方法しか無いのですね・・・。

ご回答下さりありがとうございます! 頂いたコードでトライしてみます。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。