WEBページからkintoneのレコードを参照したい

kintone カスタマイズ
1

WEBページからkintoneのアプリのレコードを参照し、入手したレコードをそのWEBページに表示したいと考えております。
インターネットを検索したりして、下記記載のソースを作成し、実施しておりますが、エラーが発生し成就できておりません。

ブラウザー環境 or Node.js環境の何れかが環境として必要らしいのですが、現状ではブラウザー環境にて実行できればと思っております。

エラーの原因と対応方法をご指導願えませんでしょうか？

又、スキルが無く申し訳ありませんが、そもそもWEBページからkintoneのレコードを参照することは可能でしょうか？

console.log ("1000000");
document.getElementById('submit').onclick = async function() {
    var e = document.getElementById("pets");
    var text = e.options[e.selectedIndex].text;
    document.getElementById("container").innerHTML = 'The selected text is ' + text;
 
    try {
        // クライアントの作成
         const client = new KintoneRestAPIClient({
            baseUrl: 'https://mydomain.cybozu.com',
            auth: { apiToken: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"  }
          });

         // リクエストパラメータの設定
            const APP_ID = 59;
            const RECORD_ID = 97;
            const params = {
               app: APP_ID,
               id: RECORD_ID
             };

         // レコードの取得
         const resp = await client.record.getRecord(params);
         console.log(resp.record);
       } catch (err) {
         console.log(err);
       }
}

image
image1579×438 34.2 KB

2

外部のWebサイトから直接kintone（kintone REST API）にアクセスしようとしてるっていう認識です（kintone REST API Clientを利用されてるようですが内部的には直接REST APIにアクセスしている）

結論から言うと
直接の取得は無理です。外部のサーバーを経由する必要があります。

以下詳細です。

  • 問題点
    • ブラウザにはCORSというセキュリティ上の制限があり、簡単に言えば「同じドメインに所属している情報へしかアクセスできない」というものです。
    • つまり、kintoneへは別ドメインなのでそれはさせないようにブラウザ自体が制限していることになります
  • 解決策
    • 調べると色々でてくると思いますが、CORSはサーバー側の設定でアクセスを許可することができます（ブラウザに対して、そのドメインからアクセスすることはわかってるから、データを取得していいよ、ということを教えるような感じです）
      • ただし、サーバー側の設定、つまり今回はkintone側の設定ですので、それをユーザーからは設定できないようになっています。よって、サーバー側の設定を変更することで許可する、ということができません。
    • これを回避する他の方法として自前で用意した外部のサーバーを用意する方法があります。自前で用意すればCORSの設定も任意にできるためです。
      ブラウザ <-> 自前のサーバー <-(REST API)-> kintone

      • 自前のサーバーを用意する方法はいくつかあります。一から構築してもいいですし、最近であればAWSなどを利用するとすぐ作れますのでそれを利用するのがベーシックかなと思います。

      • サーバーといっても色々ありますが、AWSでいうならばAPI Gatewayという、フロントからAPIを利用するために特化したサーバーを立てれる仕組みがあって、そのようなサービスを利用するのがいいとおもいます。(厳密にはlambdaというサービスも必要)
        ブラウザ <-> API Gateway + lambda <-(REST API)-> kintone

        • 調べると参考になりそうな記事がいくつかありましたのでみてみてください。一例

すぐアクセスできそうにみえて、繋ぎこむには上記サービス利用したことがないのであれば案外距離が遠く見えて大変かとおもいますが…。調べるとヒントはおちてるので色々試してみてはとおもいます。

※ kintone REST API Clientを使ってブラウザ環境からkintoneのデータにアクセスできるのはあくまでkintoneをブラウザから開いている場合のみ（≒kintone JSカスタマイズの場合のみ）です。

1 Like
3

mura様
ご丁寧なコメントありがとうございます。

教えて頂いた情報等拝見させて頂きました、現状、別サーバーを立てることが難しいので、現実的にはブラウザー環境での接続は困難と理解して正しいでしょうか？
只、実際の運用は難しいけれど、パソコン単体等を利用してJavacriptのロジックが正しい動きをするなど何とかテストする方法はないでしょうか？

アドバイス頂ければ幸甚です。

4

別サーバーを立てることが難しいので、現実的にはブラウザー環境での接続は困難と理解して正しいでしょうか？

そうですね、会社の都合等で自前のサーバーを立てるのが難しいのであれば外部サイトを開いたブラウザーからkintoneにアクセスするのは困難ですね
（このように無理くりブラウザ側の設定をいじることはできますが）

パソコン単体等を利用してJavacriptのロジックが正しい動きをするなど何とかテストする方法はないでしょうか？

ロジックだけの話であれば、
kintoneのJavaScriptカスタマイズで動作確認するのがいいとおもいます。
すこし書き換えないといけませんが、たとえば一覧画面や詳細画面にボタンをおいて、それを押下したタイミングで動作させる、などです
（kintoneを開いているブラウザーからはドメインが一致しますのでCORSの制限はうけません）

5

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