0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

AWSを使ってkintoneから取得したデータを外部サイトに表示

Last updated at Posted at 2021-11-22

#やりたいこと#
マスタ(kintone)からデータを取得し、外部サイトに表示したい

#はじめに#
GAS(Google Apps Script)感覚で外部サイトから直接JavaScriptやPHPでkintoneからデータを取得しようとしましたが、クロスドメイン制約によりできなさそうだったので断念しました…
AWS経由だとうまくいきそうな記事があったため、そちらを参考にさせていただきました。

#動作確認環境#
作業端末:windows10
マスタデータ:kintone

#テストの流れ#

  1. kintoneアプリ作成
  2. AWS Lambda関数の作成
  3. AWS Lambda環境構築
  4. AWS API Gateway環境構築
  5. 外部ページの作成

#1.kintoneアプリ作成#
####1-1.テスト用のアプリを作成####
○アプリ名:テストアプリ
○項目1:レコード番号
○項目2:文字列(1行)
  ➤フィールド名:テキスト
  ➤フィールドコード:text 
kintone1.png

####1-2.APIトークンの生成####
アプリの設定>設定>APIトークンからレコード閲覧アクセス権有りのAPIトークンを生成し保存(APIトークンを控える)
13.png

#2.AWS Lambda関数の作成#

※node.jsのインストールはこちらを参考にしました。

####2-1.作業フォルダ作成####
コマンドプロンプトからnpmを実行し作業フォルダを作成

$mkdir <作業フォルダを作成> (例:c:\temp\kintone_getなど)

$cd <作業フォルダのパスを指定>

$npm init --yes

$npm config set strict-ssl false

$npm install express ejs request

※「npm config set strict-ssl false」は証明書エラー回避のため

####2-2.index.jsを編集####
2-1で作成した作業フォルダにindex.jsを作成し編集

index.js
var aws = require('aws-sdk');
var request = require('request');

/* kintone用のパラメータ(<>は要変更) */
var DOMAIN = '<サブドメイン名>.cybozu.com'; //kintone環境のドメイン
var APP_ID = <kintoneアプリのID>;   //アプリID
var BASE_URL = "https://" + DOMAIN + '/k/v1/';
var headers = {'X-Cybozu-API-Token': '<kintoneのAPIトークン>'};

exports.handler = function(event, context) {
    var body_getrecords = {
        app: APP_ID
    }
    //kintoneからデータを取得するためのヘッダー情報
    var options_getrecords = {
        url: BASE_URL + 'records.json',
        method: 'GET',
        headers: headers,
        'Content-Type': 'application/json',
        json: body_getrecords
    }
    //kintoneのレコードを取得
    request(options_getrecords, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            var records = body.records;
            console.log(records);
            context.done(null, records);
        }
    })
};

※テストは全件取得のためレコード指定のリファレンスはこちら

####2-3.ZIPファイルに圧縮####

$zip -r kintoneget.zip index.js node_modules/

#3.AWS Lambda環境構築#
####3-1.関数の作成####

関数名のみ入力し、後はデフォルトのまま関数を作成
kintone4.png
kintone5.png

####3-2.zipファイルをアップロード####
kintone6.png
kintone7.png

####3-3.デプロイの実行####
3.png

####3-4.関数の動作確認####
テストを実行し、エラーのレスポンスがないことを確認
エラーが出た場合は、index.jsの内容やLambda関数の設定のタイムアウト値などを見直してみる…
4.png

#4.AWS API Gateway環境構築#
####4-1.APIの作成①####
APIを作成からREST APIの構築を選択
5.png

####4-2.APIの作成➁####
API名を入力し、APIを作成
6.png

####4-3.APIの作成③####
APIにメソッドを追加
7.png

####4-4.APIの作成④####
GETを選択し、Lambda関数を入力し保存
8.png

####4-5.APIの作成⑤####
APIの動作確認を行い、レスポンス本文にエラーメッセージがなければ成功です。
エラーが発生するようでしたらLambda関数のタイムアウトやAPIのLambdaプロキシ統合の使用にチェックが入っていないかなどを疑ってみてください。
※終わったら消すのでAPIキーは割愛…
9.png

####4-6.APIの作成⑥####
アクションからAPIのデプロイを実行
10.png

####4-7.APIの作成⑦####
APIのURIを控えて、APIの構築が完了です。
11.png

#5.外部サイト側の設定#
####5-1.APIの送信####
PHPの場合…

index.php

    // APIのURI
    $url = '<APIのURI>';

    // リクエストヘッダ: パラメータを json で渡す
    $context = array(
      'http' => array(
        'method' => 'GET',
        'header' => "Content-Type: application/json\r\n"
                  // APIキーの設定がある場合はコメント外す
                  // . "x-api-key:<APIキー>\r\n"
                  . "Content-Length: " . strlen($content) . "\r\n" 
      )
    );
    
    // APIの送信
    $resultJson = file_get_contents($url, false, stream_context_create($context));
    $json = mb_convert_encoding($resultJson, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    $arr = json_decode($json,true);

#参考サイト#
https://fujibiz.com/jp/aws/kintone-%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AB%E5%A4%96%E9%83%A8%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89-aws-%E7%B5%8C%E7%94%B1%E3%81%A7%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9/

参考にさせていただき、ありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?