Help us understand the problem. What is going on with this article?

SORACOMひげボタンで錬kin術!

More than 1 year has passed since last update.

はじめに

kintoneのアプリを作成することを 「アプリの デプロイ」 といいます。
kintone REST API でも /k/v1/preview/app/deploy.json で指定したりします。
(※ 正確には app.json -> deloy.json です)

つまり、
APIで kintoneアプリを錬成することができます!! (唐突)



ん?錬成??


「(両手で) パンッッ!!」 か!!

ってことで、PC操作ではなく物理的に
両手でパンッ!でkintoneアプリを デプロイ 錬成 してみました。

構成・仕組み

「両手でパンッ!!」をトリガーにできれば、あとは kintone REST API を実行すれば良いので比較的簡単です。ただ、この 「両手でパンッ!!」 をどうプログラムから判断するのか・・

うーん・・・と悩んでいたころ、Twitterにて、

こんな内容が流れてきました。

どうやら SORACOM から 「接点入力を備えたデバイス」 が出たらしい。
(通称:ひげボタン)

これでいけそう!!ってことで仕組みはこんな感じに
スクリーンショット 2019-07-20 21.04.29.png
※ 最初は、
SORACOM LTE-M Button Plus -> SORACOM Beam -> API Gateway -> Lambda -> kintone
という流れで作っていましたが、2019年7月のSORACOM Discovery にて新サービス SORACOM Funk が登場したのでそちらに乗り換えてみました!

SORACOMの設定

めちゃくちゃ簡単でした !! ブラウザからぽちぽちすれば完了です!

下記記事を読めば誰でもすんなりできると思います!
(Funk も Beam の置き換えとしてささっとできます)

Lambdaの設定

Lambda上に、ひげボタンからイベントが来たらkintoneアプリをデプロイする処理を書きます。
単純にアプリをデプロイするだけだとつまらないので

  • kintoneアプリの錬成
  • フィールド配置
  • レコード登録
  • JavaScriptカスタマイズ適用

とちょっと増やしてみました。
kintone REST API 的に書くと

  • /k/v1/preview/app.json POST kintoneアプリの錬成
  • /k/v1/preview/app/deploy.json POST
  • /k/v1/preview/app/form/fields.json POST フィールド配置
  • /k/v1/preview/app/customize.json PUT JavaScriptカスタマイズ適用
  • /k/v1/preview/app/deploy.json POST
  • /k/v1/records.json POST レコード登録

設定を反映させる deploy.json をちょいちょいはさまないといけないのですが、この流れでできます! プログラムは コード部分 に載せています。

kintoneの設定

お掃除のことも考えて、スペース内にアプリを錬成することにします。
スペースIDとスレッドIDを入手してください。

スレッドを開くとURLが https://{subdomain}.cybozu.com/k/#/space/100/thread/1000 みたいになります。
(↑の場合はスペースIDは100、スレッドIDは1000ということになります。)

他はすべてAPI経由で操作するので、特に準備はありません。

コード

肝心のコードについてです。GitHub にあげています!
詳しくはGitHubのコードを見てもらえばわかるのですが、ポイントだけ。

deploy.json 実行後の wait

deploy.json のレスポンスは 「反映したよ!」 ではなく 「反映する命令出したよ!」 なので、wait や アプリの設定の運用環境への反映状況確認API をする必要があります。
今回は 確認めんどくさかったので waitで対応しています。

handler.js
~~
const appID = await kin.main.createApp();
await kin.main.deployApp(appID);
await wait(5);
await kin.main.setFields(appID);
await kin.main.setJSFile(appID);
await kin.main.deployApp(appID);
await wait(5);
await kin.main.postRecords(appID);
~~

カスタマイズJavaScriptファイルの適用

通常kintoneアプリへのカスタマイズはJavaScriptファイルを直接アップロードする方法ですが、API経由の場合別途ファイルのアップロードAPIを実行する必要があります。

ファイルのアップロードAPIはちょっと扱いにくいので
ファイルのアップロード以外に URLによるファイルの指定 も可能なため、こちらを採用しました。カスタマイズ用JavaScriptファイルは S3にアップロード してそのURLを利用します。

kintoneHandler.js
  ~~
  const S3Url = 'https://~~~~~~~'; // JavaScript file uploaded to S3

  ~~
  ~~
  setJSFile: APPID => {
    let url = `https://${process.env.CYBOZU_DOMAIN}/k/v1/preview/app/customize.json`;
    let method = 'PUT';
    let body = JSON.stringify({
      app: APPID,
      scope: 'ALL',
      desktop: {
        js: [{
          type: 'URL',
          url: S3Url
        }],
        css: []
      },
      mobile: {
        js: [],
        css: []
      },
    });
    let params = {...params_origin, url, method, body};
    return req(params).then(resp => console.log(resp)).catch(err => console.log(err));
  },

手袋の設定?

と、ここまではプログラミングの話でした。が、両手を「パンッ!!」 で動かすためにはそもそも両手にセンサーとひげボタンをつけなければいけません・・・

ということで手袋も作っちゃいました!!
image.png
このガムテがなんとも言えないですねw

完成イメージ

手袋をはめて、心をこめて 「パンッ!!」 とすると、以下のようなアプリが錬成されます。

スクリーンショット 2019-07-20 22.04.00.png
スクリーンショット 2019-07-20 22.04.08.png

※ レコードデータはこちらからお借りしました m(_ _)m
https://www.ebookjapan.jp/ebj/content/ranking/sakuhin/154706/chara.asp

おわりに

完全にネタ系ですね。使い道とか知りません。そういうカスタマイズではないので m9(`Д´)(一蹴)

ただ、ブースなどのイベントでは客引きとしてはかなり有用です!!
(そりゃそうですよね・・・)

それでは!≧(+・` ཀ・´)≦

おまけ

実は・・・絶賛手袋強化中です!!
image2.png
手袋いろいろ買ってどれが合いそうか、とか布買ってきて裁縫したり・・・
今どきのWebエンジニアは裁縫もできないと!!(違う)

RyBB
サイボウズ テクニカルエバンジェリスト / kintone認定 カスタマイズスペシャリスト、アプリデザインスペシャリスト
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away