azure app service で kintone アプリデータ公開その１

kintone のアプリデータをazure app service で公開してみます。

# 概要

プラグインを購入いただいたお客様のサポートやプラグインのバージョンアップなどで、kintone アプリを使ってどうにか出来ないかと調べています。
kintone アプリデータを外部に公開する外部サービスがありますが、簡単にできる反面、いろいろ制約があったりします。
azure app service で、kintone アプリデータを外部に公開する試作をしてみます。

- azure app service で kintone アプリデータ公開その１
- [azure app service で kintone アプリデータ公開その２（環境変数利用）](https://qiita.com/rex0220/items/38df7a061d267ffd495b)
- [azure app service で kintone アプリデータ公開その３（REST API）](https://qiita.com/rex0220/items/881a54d78ed9f6cfcb3c)
- [azure app service で kintone アプリデータ公開その４（JS API）](https://qiita.com/rex0220/items/c9604249361510444d1a)
- [azure app service で kintone アプリデータ公開その５（グリッド表示）](https://qiita.com/rex0220/items/b16689ccd1ea1b0da000)


こんな感じで、しくみを試作します。

![kbrowserのAPI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/f188dac7-1aed-3967-21d3-1ac4eee89f80.png)


# 環境
いつも使っている PC 環境で開発・テストして、azure へデプロイ。

- 開発環境
    - Windows 10
    - Visual source code
    - node.js, Express, pug
    - [kintone JS SDK](https://developer.cybozu.io/hc/ja/articles/360025484571)

- azure環境
    - east asia (東京)


# 開発準備

vscode, node, npm あたりがそろっていれば OK。

## Express ジェネレーター
アプリ名を指定すれば、基本的な一式をそろえてくれる優れもの。

アプリ名 kintone-view-test1　で作ってみます。

```.log
$ mkdir webapp
$ cd webapp
$ npx express-generator kintone-view-test1 --view pug --git
$ cd kintone-view-test1
$ npm install
...

```

# アプリケーションの実行

npm start すると、http://localhost:3000 で参照できます。
CTL+C で、終了。

```.log
$ npm start
```

表示されるページ
<img width="277" alt="2020-02-29_22h31_28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/8f5b4416-ef29-8fad-6c93-60d651541b9e.png">

# アプリケーションのデバッグ

vscode で、デバッグが出来るのがうれしい。
下記で、 wwww ファイルを起点とした設定が出来ます。

- vscode で、kintone-view-test1\bin\www を開きます。
- vscode の「デバッグと実行」をクリック
- 「lunch.json ファイルを作成します。」をクリック
- 「Node.js の実行とデバッグ（F5）」をクリック

<img width="752" alt="2020-02-29_22h41_31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/be0cd46c-5a61-7004-25c9-0b0d1e31b4e1.png">

- ブレークポイント
    - index.js にブレークポイントを設定
- ブラウザから、http://localhost:3000 で参照
<img width="641" alt="2020-02-29_22h47_46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/c9d87133-d385-0b00-ff05-ff2a85a6a6b5.png">

- ブレークポイントで停止中は、変数にカーソルを当てると内容が表示されます
- デバッグコンソール上で、変数を入力すると内容が確認できます。
<img width="1128" alt="2020-02-29_22h50_59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/175bc511-93ee-2324-bf56-b922be81a0e7.png">


# アプリケーションのデプロイ

azure 環境へ、デプロイしてみます。

- azure のアカウントを持っていて、以前からvscode で開発していれば、「Deploy to web app」をクリックするとデプロイが始まります。
<img width="908" alt="2020-02-29_23h03_05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/e1187f62-23a3-e7d2-d02c-0e31e962d8d5.png">

- kintone-view-test1　のフォルダーを指定
<img width="881" alt="2020-02-29_23h03_25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/79ac9da4-01d0-7af1-b5d4-9ab39d22c8d4.png">
<img width="883" alt="2020-02-29_23h04_59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/00a6b4c5-65a5-c794-f9b9-9ddab968ac88.png">


- あとは、順番に node.js のバージョン等を指定します。
- デプロイされた app をazure 上で確認
<img width="1126" alt="2020-02-29_23h21_37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/51275bb5-3772-a5a5-b56e-3b710d6a7bc1.png">

- アプリの URL をクリックすると、実行結果が確認できます。
<img width="860" alt="2020-02-29_23h25_23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/7877b8a3-b743-92fe-47c8-7c7945de33a3.png">


# kintone アプリのレコード取得を組み込み
ここまでの作業で、azure 上でアプリを動作することが出来ました。
いよいよ kintone アプリのレコードを取得して、公開してみます。

## kintone JS SDK のインストール

```.log
$ cd kintone-view-test1
$ npm install --save @kintone/kintone-js-sdk@v0.6.1
```

## app.js の変更

とりあえず、kintone アプリレコードの照会画面用に、app.js 等を変更していきます。
「/customer」の URL でアクセスされたら、kintone の顧客アプリを表示するイメージです。
既存の「/users」と同じように処理を追加します。

```app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var customerRouter = require('./routes/customer');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/customer', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;
```

## index.pug

index から、顧客一覧へのリンクを追加しておきます。

```index.pub
extends layout

block content
  h1= title
  p Welcome to #{title}
  br
  a(href="./customer", title="顧客一覧") 顧客一覧
```

## customer.js

アプリIDやURLなどは、開発用・本番用で切り替えが必要のので
kintone 接続用の情報は、モジュール化してまとめたほうがよさそうです。

```customer.js
var express = require('express');
var router = express.Router();
const kintone = require('@kintone/kintone-js-sdk');

/* GET customers listing. */
router.get('/', function (req, res, next) {

    const kintoneAuth = new kintone.Auth();
    const username = 'xxxxxxxxx';
    const password = 'xxxxxxxxx';
    kintoneAuth.setPasswordAuth({ username: username, password: password });

    const domainName = 'xxxxxxxxx.cybozu.com';
    const kintoneConnection = new kintone.Connection({ domain: domainName, auth: kintoneAuth });
    const kintoneRecord = new kintone.Record({ connection: kintoneConnection });

    const finfos = [ 
        { label: '会社名', fcode: '会社名'},
        { label: '担当者名', fcode: '担当者名' },
        { label: 'メールアドレス', fcode: 'メールアドレス' }
    ];
    const fields = finfos.map((finfo) => {
        return finfo.fcode;
    });

    const appId = 549; // target appID
    const parm = {
        app: appId,
        query: 'order by $id',
        fields: fields
    };

    kintoneRecord.getRecords(parm).then((rsp) => {
        console.log('rsp', rsp);
        res.render('customer', {
            title: '顧客一覧',
            finfos: finfos,
            records: rsp.records
        });

    }).catch((err) => {
        // The promise function always reject with KintoneAPIExeption
        console.log(err.get());
        // res.render('forum', { title: 'rex0220 forum', user: 'error' });
    });

});

module.exports = router;
```

## customer.pug
顧客一覧用のテンプレートです。
単純なテーブル構造だと簡単ですが、データ量が多くページ制御等があると少し面倒なので、グリッドライブラリを使ったほうがいいかもしれません。

```customer.pug
extends layout

block content
  h1= title

  table(class="xp-customer-list")
    thead
      each finfo in finfos
        th #{finfo.label}
    tbody
      each rec in records
        tr
          each finfo in finfos
            td #{rec[finfo.fcode].value}

```

## style sheet

顧客一覧用に少し手直し
見映えをよくする場合は、地道に手直し。

```style.css
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

.xp-customer-list {
  background-color: aqua;
  width: 700px;
  font-size: 14px;
}

.xp-customer-list thead {
  background-color: azure;
}
```

## 取得結果

素のテーブルだけだと、いまいち。

<img width="602" alt="2020-03-01_02h31_48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/229225ba-259d-aca9-1881-39252deb9c8b.png">

## azure へデプロイ

初回と同様に「Deploy to web app」をクリックすると、デプロイされます。
２回目以降は、入力なしにそのまま続行します。

## azure app service のログ

vscode から azure app service のログを確認できます。
console.log で、kintone レコードを出力したのが、表示されています。
保守・運用のことも考慮して、必要な情報を見やすくログに残したいですね。

<img width="1128" alt="2020-03-01_11h10_12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/e26f4db5-356b-487c-525f-2fc0ce91a7d6.png">

# カスタムドメインでの公開

azure app service 内で、カスタムドメインの購入・割り当てが可能です。
[チュートリアル](https://docs.microsoft.com/ja-jp/azure/app-service/manage-custom-dns-buy-domain)に従って、手順を進めるだけなので簡単です。
お手軽に kintone アプリデータを一般に公開できますね。

<img width="890" alt="2020-03-01_11h24_05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/5a051cc9-0c09-19de-87df-b6bb88ccdfc7.png">


# 参考サイト

- [Express](https://expressjs.com/ja/)
- [Azure で Node.js Web アプリを作成する](https://docs.microsoft.com/ja-jp/azure/app-service/app-service-web-get-started-nodejs)

# あとがき

vscode でデバッグ出来るのが、一番うれしい。
azure へのデプロイも vscode から簡単に実行できる。
Express の構成に慣れれば、開発が楽かもしれません。