LoginSignup
0
2

More than 3 years have passed since last update.

@QA_nakamura(Takahiro Nakamura)

【GCP + kintone】kintone外部からkintone のデータを読み込む

Posted at

大まかな手順として

大前提として、kintone と Google Cloud Platform（以下、GCP）のアカウントは取得しているものとします。

kintone 側

  1. アプリを用意する
  2. 上記アプリの API TOKEN を発行する
  3. 上記アプリが所属するドメインとアプリIDをメモっておく

Google Cloud Functions 側

  1. GCP内でプロジェクトを用意する
  2. GCPのプロジェクト内で、Google Cloud Functions を有効化
  3. GCP側に require と @kintone/rest-api-client をインストール
  4. ローカル環境に gcloud cli をインストール
  5. GCP のデフォルトリージョンを変更
  6. gcloud init でローカル環境の初期化
  7. ローカル環境に Google Cloud Functions 用のプロジェクトフォルダを作成
  8. ローカル環境にも require と @kintone/rest-api-client をインストール
  9. 上記フォルダ内に、index.js作成
  10. gcloud functions deploy
  11. Google Cloud Functions でテスト

kintone 側の作業

アプリを用意する

kintone のアカウントについては、kintone環境の取得方法 (開発者ライセンス)を、

kintone のアプリについては、kintoneの使い方 (データベース編)をご参照ください。

@RyBBさんの記事にはものすごく助けられました。
ありがとうございます！

では、kintone のアプリを用意しましょう。

kintone にログインしてアプリを制作しましょう。
001.png
002.png
フィールドを並べて、アプリを作っていきます。

003.png
右上にある【新しいアプリ】と言う欄にアプリ名をつけられますが、ここで入力したものは人類側のためのもので、日本語よろしくないんじゃないだろうか？と言った気遣いは無用のようです。

とは言え、人類に対する気配りもそれなりにはしておきましょう。

で、ここで知見なのですが、kintoneの使い方 (データベース編)にもある通り

  • kintone のアプリ ≒ データベース
  • kintone のアプリで言うところのフィールド ≒ カラム

と考えても大きく差し支えはないので、ガシガシやっていきたいところなのですが、フィールド設置の際にちょっと注意を
004.png
フィールドはそれぞれに細かく設定ができるのですが、kintone REST API などを使用してこのアプリのレコードをJSONで吐き出させた場合、key は人類用のフィールド名ではなく、プログラム用のフィールドコードのほうが使用されます。

フィールドを設置したそのままだと、フィールドコードはフィールドタイプがそのまま残ってしまいます。

なので、フィールドコードもきちんと変えておく。

この際、フィールドコードをアルファベット、数字、アンダースコア（もちろん全部半角）で設定しておくと、後々VSCodeで入力補完が効くようになります。

なので、極力半角英数で設定しておくと幸せになれます。
005.png
今日の10円より明後日以降の500円を。

アプリの API TOKEN を発行する

作業は下図の通り
006.png
007.png
008.png
そうすることでAPI TOKENが発行されます。
009.png

API TOKENは一つのアプリに対して複数発行ができます。
また、TOKENごとにアクセス権が設定でき

  • レコード閲覧 : GET
  • レコード追加 : POST
  • レコード編集 : PUT
  • レコード削除 : DELETE

に対応しています。

一つのTOKENに複数権限を与えてもよし、それぞれ別に発行してもよし…

上記アプリが所属するドメインとアプリIDをメモっておく

kintone内部（いわゆるkintone JavaScript カスタマイズ）でも、外部からであっても、kintone REST APIを叩く場合に必須になるのが、対象となるアプリが所属しているサブドメインとアプリIDです。

確認方法は色々あるのですが、一番確実なのは下図。
010.png
図の通りkintoneで作成したアプリを起動すると、URLは下記のようになっています。

https://サブドメイン.cybozu.com/k/アプリID/

それぞれ該当する項目をメモっておいてください。

あと、この後GCPからこのアプリのレコードを引っ張ってくるので、レコードの追加も忘れずに。
011.png

Google Cloud Functions 側の作業

GCP内でプロジェクトを用意する

さて、GCPでの作業です。
まずはプロジェクトを作ります。

GCPのダッシュボードに入り、自分の所属組織に移動した後、プロジェクトを作ります。

012.png
ふむ〜

013.png
プロジェクトの作成には1分弱お時間がかかります。

GCPのプロジェクト内で、Google Cloud Functions を有効化

プロジェクトができたら、Google Cloud Functions（以下、Functions） を有効化します。
014.png
これまたお時間ちょっとかかる
015.png
一応この画面になるまで待ちましょう
016.png

GCP側に require と @kintone/rest-api-client をインストール

おそらく高確率で【require】はいらないと思うのですが、AWS Lambdaで怒られた経験があるので、一応入れておきます。

どう入れるかというと。
017.png
Cloudシェルを立ち上げて

018.png
上図のように出現したターミナルに下記コマンドを打ちます。

npm install require

と

npm install @kintone/rest-api-client

これでGCPに require と @kintone/rest-api-client がインストールできました。

GCPの方は一旦ここまで。

ローカル環境に gcloud cli をインストール

GCPもちゃんと（というか当然）cli が用意されています。
未導入の方は下記からどうぞ。

GCP のデフォルトリージョンを変更

GCPは何もしないとリージョンが us-central になってしまうので、このタイミングで変えておきましょう。

お手元のパソコンのターミナルを起動して

gcloud config set compute/region {REGION}

{REGION}には、お好きなリージョンを入力してください。

  • 東京 : asia-northeast1
  • 大阪 : asia-northeast2

gcloud init でローカル環境の初期化

gcloud cli にて、ローカル環境を初期化します。

お手元のパソコンのターミナルを起動して

gcloud init

と打つと、会話形式で色々聞かれます

Welcome! This command will take you through the configuration of gcloud.

Settings from your current configuration [default] are:
accessibility:
  screen_reader: 'True'
compute:
  region: asia-northeast1
  zone: asia-northeast1-b
core:
  account: あなたのGCPログインメアド
  disable_usage_reporting: 'True'
  project: プロジェクト名
functions:
  region: asia-northeast2

Pick configuration to use:
 [1] Re-initialize this configuration [default] with new settings 
 [2] Create a new configuration
Please enter your numeric choice:  ← 1でOK


Your current configuration has been set to: [default]

You can skip diagnostics next time by using the following flag:
  gcloud init --skip-diagnostics

Network diagnostic detects and fixes local network connection issues.
Checking network connection...done.                                                                                                                 
Reachability Check passed.
Network diagnostic passed (1/1 checks passed).

Choose the account you would like to use to perform operations for 
this configuration:
 [1] あなたのGCPログイン用メアド
 [2] Log in with a new account
Please enter your numeric choice:  ← 1でOK

You are logged in as: [あなたのGCPログイン用メアド].

Pick cloud project to use: 
 〜 中略　〜
 [4] yobuze-kintone
 [5] Create a new project
Please enter numeric choice or text value (must exactly match list 
item):  ← 今回作ったプロジェクト名を選択


Your current project has been set to: [yobuze-kintone].

Not setting default zone/region (this feature makes it easier to use
[gcloud compute] by setting an appropriate default value for the
--zone and --region flag).
See https://cloud.google.com/compute/docs/gcloud-compute section on how to set
default compute region and zone manually. If you would like [gcloud init] to be
able to do this for you the next time you run it, make sure the
Compute Engine API is enabled for your project on the
https://console.developers.google.com/apis page.

Your Google Cloud SDK is configured and ready to use!

* Commands that require authentication will use あなたのGCPログインメアド by default
* Commands will reference project `yobuze-kintone` by default
Run `gcloud help config` to learn how to change individual settings

This gcloud configuration is called [default]. You can create additional configurations if you work with multiple accounts and/or projects.
Run `gcloud topic configurations` to learn more.

Some things to try next:

* Run `gcloud --help` to see the Cloud Platform services you can interact with. And run `gcloud help COMMAND` to get help on any gcloud command.
* Run `gcloud topic --help` to learn about advanced features of the SDK like arg files and output formatting

ここまで出たらOKです。

ローカル環境に Google Cloud Functions 用のプロジェクトフォルダを作成

では、お手元のパソコンで Functions 用のフォルダを作り、作業準備をしましょう。

お好きな名前でフォルダを作ったら、ターミナルでそのフォルダまで移動して、下記コマンドを。

npm init

色々と質問が来ますが、全部 enter でOK。


〜 前略 〜

package name: (yobuze-kintone) yobuze-kintone
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC)

〜 中略 〜

Is this OK? (yes) yes

ローカル環境にも require と @kintone/rest-api-client をインストール

続いて、ローカル環境にも require と @kintone/rest-api-client をインストール。
だから require はいらないきが…

あ、package.jsonにも反映したいので、GCPのときとちょっとコマンドを変えましょう。

npm install --save require

と

npm install --save @kintone/rest-api-client

です。

このタイミングで node_modules フォルダに色々入ります。

.
├── node_modules
│   ├── @kintone
　〜 中略　〜
├── package-lock.json
└── package.json

上記フォルダ内に、index.js作成

ここからはVSCodeなんかのエディタで index.js を書きます。

const { KintoneRestAPIClient } = require('@kintone/rest-api-client');

/**
 * exports の後の getRecordsKintone の部分がエントリポイントになります
 * 実際に呼び出す場合には下記のような URL を叩きます
 * https://asia-northeast2-GCPのプロジェクト名.cloudfunctions.net/getRecordsKintone
 * 
 * req は、この Functions を呼び出す際に色々引き渡すために使用
 * 
 * res は、この Functions を実行した結果が出力されます 
 */

exports.getRecordsKintone = (req, res) => {

  // kintone の呼び出し設定です
  const client = new KintoneRestAPIClient({
    // サブドメインは、kintoneの作業中にメモりましたよね？
    baseUrl: 'https://サブドメイン.cybozu.com',
    auth: {
      // APIトークンもメモりましたよね
      apiToken: 'APIトークン'
    }
  });

  // アプリIDもメモ（略）
  const APP_ID = アプリID;
  const params = {
    app: APP_ID
  };

  // ここで kintone を呼び出しつつ、アプリ内のレコードをすべて取得
  client.record.getAllRecords(params).then((resp) => {
    // 間違っても resp を console.log しない
    // タイムアウトで怒られる場合があります
    res.send(resp);
  }).catch((err) => {
    // エラーの場合はこっち
    res.send(err);
  });

};

フォルダ内のファイル構成はこんな感じ

.
├── node_modules
│   ├── @kintone
　〜 中略　〜
├── index.js
├── package-lock.json
└── package.json

gcloud functions deploy

index.js の編集が終わったら、デプロイします。

VSCodeのターミナルでも良いので、下記のコマンドを打ちます。

gcloud functions deploy エントリポイント --runtime nodejs12 --trigger-http --allow-unauthenticated

下記のようなメッセージがターミナルに出たら、デプロイ完了（2分くらいかかります）。

status: ACTIVE
timeout: 60s
updateTime: '2021-02-04T13:31:42.989Z'
versionId: '1'

もし、下記のようなエラーが出たら

ERROR: (gcloud.functions.deploy) OperationError: code=7, message=Build failed: Cloud Build API has not been used in project 914641982874 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/cloudbuild.googleapis.com/overview?project=プロジェクトコード then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

https://console.developers.google.com/apis/api/cloudbuild.googleapis.com/overview?project=プロジェクトコード

のURLを開いてみてください。

Google Build API とか言う画面が出てきますので、こちらを有効化してください。

019.png

Google Cloud Functions でテスト

デプロイが完了したら、いよいよテストです。

ブラウザで再度GCPに入り、Google Cloud Functions を開くと...

020.png
こんな画面になってます。

そしたら、
021.png
としてみましょう。

022.png
上記画面になったら、迷わず青いボタンをクリックしてみてください。

すると…

023.png
出力結果をコピーして、VSCodeなんかで新しくJSONファイルを作り、ペーストします。

おそらくこんな感じになっているはず。

[
  {
    "like_code": {
      "type": "CHECK_BOX",
      "value": [
        "その他"
      ]
    },
    "レコード番号": {
      "type": "RECORD_NUMBER",
      "value": "1"
    },
    "更新者": {
      "type": "MODIFIER",
      "value": {
        "code": "レコードを追加した人のkintoneログインユーザー名",
        "name": "kintoneでレコードを追加した人の名前"
      }
    },
    "作成者": {
      "type": "CREATOR",
      "value": {
        "code": "レコードを追加した人のkintoneアカウント用",
        "name": "kintoneで"
      }
    },
    "name": {
      "type": "SINGLE_LINE_TEXT",
      "value": "最先 太郎"
    },
    "$revision": {
      "type": "__REVISION__",
      "value": "1"
    },
    "更新日時": {
      "type": "UPDATED_TIME",
      "value": "2021-02-04T12:04:00Z"
    },
    "作成日時": {
      "type": "CREATED_TIME",
      "value": "2021-02-04T12:04:00Z"
    },
    "email": {
      "type": "LINK",
      "value": "hogehatsukauna@exsample.com"
    },
    "$id": {
      "type": "__ID__",
      "value": "1"
    }
  },
  {
    "like_code": {
      "type": "CHECK_BOX",
      "value": [
        "FORTRAN",
        "COBOL"
      ]
    },
    "レコード番号": {
      "type": "RECORD_NUMBER",
      "value": "2"
    },
    "更新者": {
      "type": "MODIFIER",
      "value": {
        "code": "レコードを追加した人のkintoneアカウント用メールアドレス",
        "name": "kintoneでレコードを追加した人の名前"
      }
    },
    "作成者": {
      "type": "CREATOR",
      "value": {
        "code": "レコードを追加した人のkintoneアカウント用メールアドレス",
        "name": "kintoneでレコードを追加した人の名前"
      }
    },
    "name": {
      "type": "SINGLE_LINE_TEXT",
      "value": "kosan de waruika"
    },
    "$revision": {
      "type": "__REVISION__",
      "value": "1"
    },
    "更新日時": {
      "type": "UPDATED_TIME",
      "value": "2021-02-04T12:04:00Z"
    },
    "作成日時": {
      "type": "CREATED_TIME",
      "value": "2021-02-04T12:04:00Z"
    },
    "email": {
      "type": "LINK",
      "value": "exsample@hoge.com"
    },
    "$id": {
      "type": "__ID__",
      "value": "2"
    }
  },
  {
    "like_code": {
      "type": "CHECK_BOX",
      "value": []
    },
    "レコード番号": {
      "type": "RECORD_NUMBER",
      "value": "3"
    },
    "更新者": {
      "type": "MODIFIER",
      "value": {
        "code": "レコードを追加した人のkintoneアカウント用メールアドレス",
        "name": "kintoneでレコードを追加した人の名前"
      }
    },
    "作成者": {
      "type": "CREATOR",
      "value": {
        "code": "レコードを追加した人の",
        "name": "kintoneでレコードを追加した人の名前"
      }
    },
    "name": {
      "type": "SINGLE_LINE_TEXT",
      "value": " 遠山 景元"
    },
    "$revision": {
      "type": "__REVISION__",
      "value": "1"
    },
    "更新日時": {
      "type": "UPDATED_TIME",
      "value": "2021-02-04T12:07:00Z"
    },
    "作成日時": {
      "type": "CREATED_TIME",
      "value": "2021-02-04T12:07:00Z"
    },
    "email": {
      "type": "LINK",
      "value": "sakura_fubuki@minamimachibugyou.go.jp"
    },
    "$id": {
      "type": "__ID__",
      "value": "3"
    }
  }
]

と言った感じで、無事 GCP から kintone を叩いて、kintone からレコードを引っ張り出せました。

最後に注意

と、ここまでやってきましたが、このまま本番で使うとエントリポイント叩けば誰でもデータが見えてしまうので、Google Cloud Functions の方に認証をかけるなりして本番対応させないと大変なことになります。

参考リンク

ここまでの作業はまだまだほんの触りで、アプリやサービスサイトを作るにはまだまだ不足なことがたくさんあります。

特に、kintone関係は…

そのあたりはおいおい書いていこうと思いますが、下記サイトを参考にガリガリ進めていくと人類が進化します。

0
2
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
Sign upLogin
0
2