kintone のデータに外部サイトから AWS 経由でアクセス
### kintone のデータを AWS 経由で連携する ###
今回、kintoneのREST APIを使って、kintoneアプリ内のデータベースにアクセスして、必要なデータを外部サイトから取り出すのが目的です。
外部サービスのサイトから、JavaScript でコーディングして、直接 REST API にアクセスしようとしたところ、セキュリティーの警告が出てうまくいきませんでした。
よくよく調べてみると kintone の Developer Network 内のガイドによると クロスドメイン制約のため直接 REST API へのアクセスは出来ませんでした。（詳細はこちら）
そこで、何とか解決策はないかと調べてみるとこの記事（外部サイトから直接kintone APIを実行したい）を見つけ、AWS のAPI Gateway経由なら、外部サイトからでも kintone のデータの読み込みが出来ることがわかりました。
記事によると、AWS Lambda で kintone の REST API にアクセスするスクリプトを実行し、AWS API Gateway で CORS を設定して、クロスドメイン制約を回避することが出来るとのことでした。この方法ならば、代理のサーバーを経由しなくてもサーバーレスで目的が達成する出来ることが判明しました。
以下はこの記事（外部サイトから直接kintone APIを実行したい）に参考に実現してみました。
### プロジェクトの概略 ###
- プエルトリコ ボンドの取引価格データを日毎にCSVで kintone にアップロードする。
- その取引価格表をテーブル形式で外部ソーシャルマーケティングサイトサービス(Curata.com)のマイクロサイトをカスタマイズして表示する。
- マイクロサイトは、JavaScript ( JQuery )でのみカスタマイズできる。
（結局、kintone はデータベースとして利用しているだけで、あまりいいテストケースではないですね。）
### 開発の流れ ###
- kintone にて、プエルトリコボンドの取引データをCSVよりアップロードしてアプリを作成する。
- 作成したプエルトリコボンド取引データアプリの詳細設定で外部からデータ呼び出しできるようAPI Tokenを生成する。
- AWSにログインして、AWS Lambda の管理画面に移動し、Lambda Function を Node.js で作成する。
- 次に AWS API Gateway の管理画面に移動し、API を作成する。
- API 管理画面にて、作成された API の CORS 設定をし、API をデプロイする。
- Curata.com のマイクロサイト作成管理画面にて、API呼び出しのJQueryコードを作成する。
以上の手順で開発していきます。
### kintone アプリの作成 ###
プエルトリコボンドの取引データをCSVよりアップロードし、kintone のアプリを作成します。（詳細はブログ「 kintone 使ってみた」を参照ください。）
作成したアプリの詳細設定にて、API トークンを生成し、外部からアクセスできるようにします。（詳細はこちらを参照ください。）
### AWS Lambda の設定 ###
AWS のアカウントを作成し、ログインします。
“Service” menu より、”Compute” カテゴリー内の “Lambda” サービスを選択します、
AWS Service Menu
Lambda function の管理画面において、”Create a Lambda function” ボタンをクリックして、Lambda function の設定をします。
AWS Lambda function
Blueprint から Blank function を選択します。
Select blueprint
“Next” ボタンをクリックして、次に進みます。
“Configura Function” の設定ページにて：
- Name, Description に適当なファンクション名、説明文を入力します。
- Runtime には今回は、”Node.js” を選択します。
- Code entry type に “Edit code inline” を選択します。
ファンクション名の設定
- 下記の Node.js コードを入力します。
- DOMAIN 変数にkintone のサブドメイン名、APP_ID は作成した kintone のアプリ ID, AUTH_VALUE には、作成したAPI トークンの値を入力します。
var https = require(‘https’);// Set kintone
var DOMAIN = ‘yourdomain.kintone.com’;
var APP_ID = 41;/////////////////////////////////////////
var AUTH_VALUE = ‘API トークン’;
var headers = { ‘X-Cybozu-API-Token’: AUTH_VALUE };exports.handler = function (event, context) {
var options = {
hostname: DOMAIN,
port: 443,
path: ‘/k/v1/records.json?app=’ + APP_ID’,
method: ‘GET’,
headers: headers
};var req = https.request(options, function (res) {
var data = “”;
res.setEncoding(‘utf8’);
res.on(‘data’, function (chunk) {
data += chunk;
});
res.on(‘end’, function () {
context.done(null, JSON.parse(data));
})
});req.on(‘error’, function (e) {
console.log(‘problem with request: ‘ + e.message);
});// write data to request body
req.end();};
- “Role” は、Existing Role から選択するか、”Custom Role” を作成します。今回は、Existing Role から選択します。
- あとはデフォルトのまま、”Next” ボタンで次へ進みます。
ロールの設定
- Review 画面より、設定を確認し、”Create function” ボタンをクリックし、Lambda function を作成します。
Lambda Review
- “Test” ボタンを押して、コードがうまく実行されるのを確認します。
Lambda function test
以上でLambda function の設定は終了です。
### AWS API Gateway の設定 ###
- “Serveice” メニューより、”Application Service” カテゴリー下の “API Gateway” を選択します。
- API Gateway 管理画面より、”Create API” ボタンをクリックし、設定画面に移ります。
AWS API Gateway 管理画面
- “New API” を選択し、”API name” に適当な名前を入力し、”Create API” ボタンをクリックし、API を作成します。
Create API 画面
- 次にリソースを設定します。
- “Actions” メニューより、”Create Resource” を選択します。
Actions
- リソース名を適当に入力し、”Enable API Gateway CORS” をチェックして、”Create Resource” ボタンをクリックし、リソースを作成します。
New Resource
- “Integration Type” として、”Lambda function” を選択し、先ほど作成した Lambda function のリジョンと function名を入力し、”Save” ボタンをクリックして、設定を保存します。
GET Method 作成画面
- “Actions” メニューより、”Enable CORS” を選択します。
- “Enable CORS and replace existing CORS headers” ボタンをクリックします。
Enable CORS 設定画面
- 次に “Actions” メニューより、”Deploy API” を選択します。
- “New Stage” を選択し、Stage名を入力します。
- “Deploy” ボタンをクリックして確定します。
Deploy API
- 右側の Stages メニューをクリックし、”Test” リソース下の “GET” メソッドをクリックします。
- Invoke URL が表示されるので、メモしておきます。後でこの URL を外部サイトから、呼び出します。
- 以上で、AWS API Gateway の設定は終了です。
GET method Stage 編集画面
### 外部サイトから、APIを呼び出す ###
- kintone のデータを表示する外部サイトにJavaScript または、（サポータされていれば）JQuery 等でプログラムを作成します。
- 下記コードを参考にコーディングして、AWS API Gateway よりAPIをコールします。
var infoHTML = ”;
infoHTML += ‘<table class=”bondsTable” align=”center” width=”100%”>’;
infoHTML += ‘<caption>Puerto Rico Bond activity</caption><tr/>’;
infoHTML += ‘<thead>’;
infoHTML += ‘<tr>’;
infoHTML += ‘<th>CUSIP</th>’;
infoHTML += ‘<th>ISSUER</th>’;
infoHTML += ‘<th>CPN</th>’;
infoHTML += ‘<th>MATURITY</th>’;
infoHTML += ‘<th>DESCRIPTION</th>’;
infoHTML += ‘<th>CURRENT<br/>PRICE</th>’;
infoHTML += ‘<th>PREVIOUS<br/>PRICE</th>’;
infoHTML += ‘<th>CHANGE</th>’;
infoHTML += ‘</tr>’;
infoHTML += ‘</thead>’ $.each(data, function(i,item){ if (item != null)
{
infoHTML += ‘<tbody>’;
$.each(item, function(header,record){
infoHTML += ‘<tr><td>’ + record.CUSIP.value + ‘</td>’;
infoHTML += ‘<td>’ + record.ISSUER.value + ‘</td>’;
infoHTML += ‘<td>’ + Number(record.COUPON.value).toFixed(2) + ‘</td>’;
infoHTML += ‘<td>’ + record.MATURITY.value + ‘</td>’;
infoHTML += ‘<td>’ + record.DESCRIPTION.value + ‘</td>’;
infoHTML += ‘<td>’ + Number(record.Todays_Price.value).toFixed(3) + ‘</td>’;
infoHTML += ‘<td>’ + Number(record.Yesterdays_Price.value).toFixed(3) + ‘</td>’;
infoHTML += ‘<td>’ + Number(record.change.value).toFixed(3) + ‘</td></tr>’;
});infoHTML += ‘<tr><td> </td></tr></tbody>’;
}
});
infoHTML += ‘</table>’;
$(‘#BondsData’).html(infoHTML); });
});
今回は、Curata.com のマイクロサイトをカスタマイズしました。
Curata Microsite Scripting
kintone から、プエルトリコボンドの取引データの取得に成功し、マイクロサイトにテーブル表示されました。
Curata Microsite