Edited at

SORACOMひげボタンで錬kin術!


はじめに

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エンジニアは裁縫もできないと!!(違う)