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

#やりたいこと#
マスタ（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行）
　　➤フィールド名：テキスト
　　➤フィールドコード：text　
![kintone1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/ee62981b-ce81-9739-9a01-0cbc7426f32d.png)

####1-2．APIトークンの生成####
アプリの設定＞設定＞APIトークンからレコード閲覧アクセス権有りのAPIトークンを生成し保存（APIトークンを控える）
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/a09ad4a8-4612-051d-842e-585ddeb587c9.png)

#2．AWS Lambda関数の作成#

※node.jsのインストールは[こちら](https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b)を参考にしました。

####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);
        }
    })
};
```
※テストは全件取得のためレコード指定のリファレンスは[こちら](https://developer.cybozu.io/hc/ja/articles/202331474)

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

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

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

関数名のみ入力し、後はデフォルトのまま関数を作成
![kintone4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/ab73989a-b639-7db6-4dc8-60d06256f03f.png)
![kintone5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/5e7a2ead-9be8-e987-abb6-8aad5c4be758.png)

####3-2．zipファイルをアップロード####
![kintone6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/4a45de58-d192-4e3d-4192-868bd65b6e4a.png)
![kintone7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/4d3c6edc-8ce9-27ec-20b2-671d8b299500.png)

####3-3．デプロイの実行####
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/c09061a5-ee5b-8909-2a26-217883842922.png)

####3-4．関数の動作確認####
テストを実行し、エラーのレスポンスがないことを確認
エラーが出た場合は、index.jsの内容やLambda関数の設定のタイムアウト値などを見直してみる…
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/5e3de0b2-6f38-0ac8-5575-dffe85e71fe2.png)

#4．AWS API Gateway環境構築#
####4-1．APIの作成①####
APIを作成からREST APIの構築を選択
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/5958be21-276e-1110-f3ac-d9678ab7c191.png)

####4-2．APIの作成➁####
API名を入力し、APIを作成
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/f99d8b16-a2d0-ff5f-44dc-f5dfbda50e73.png)

####4-3．APIの作成③####
APIにメソッドを追加
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/f8aa6ed5-c886-5876-1675-aa0fa6c3e652.png)

####4-4．APIの作成④####
GETを選択し、Lambda関数を入力し保存
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/c74ad64f-7d94-54c6-2357-ad7617b751ec.png)

####4-5．APIの作成⑤####
APIの動作確認を行い、レスポンス本文にエラーメッセージがなければ成功です。
エラーが発生するようでしたらLambda関数のタイムアウトやAPIのLambdaプロキシ統合の使用にチェックが入っていないかなどを疑ってみてください。
※終わったら消すのでAPIキーは割愛…
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/205abab2-4bb1-1b93-d96e-aee744876f9f.png)

####4-6．APIの作成⑥####
アクションからAPIのデプロイを実行
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/70e04f2d-6db0-e115-c669-c72e5eab75f4.png)

####4-7．APIの作成⑦####
APIのURIを控えて、APIの構築が完了です。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225708/6d10da62-0710-f66a-5639-57a8d93354bd.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/

https://qiita.com/ha_ru_ma_ki/items/ccb7c535d8ef1b255365

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