SORACOMひげボタンで錬kin術！

# はじめに

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

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

・
・
・

ん？錬成？？

・
・

**「(両手で) パンッッ！！」** か！！

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

# 構成・仕組み

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

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日 <a href="https://twitter.com/hashtag/%E3%81%B2%E3%81%92%E3%83%9C%E3%82%BF%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#ひげボタン</a> ことSORACOM LTE-M Button Plusの発送を開始しました📦🚛既にご注文いただいていた皆さま、お待たせいたしました☺️ GWに是非お試しください！<a href="https://twitter.com/hashtag/soracom?src=hash&amp;ref_src=twsrc%5Etfw">#soracom</a> <a href="https://twitter.com/hashtag/soracomug?src=hash&amp;ref_src=twsrc%5Etfw">#soracomug</a> <a href="https://twitter.com/hashtag/iot?src=hash&amp;ref_src=twsrc%5Etfw">#iot</a> <a href="https://twitter.com/hashtag/%E3%81%82%E3%81%AE%E3%83%9C%E3%82%BF%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#あのボタン</a></p>&mdash; ソラコム公式 (@SORACOM_PR) <a href="https://twitter.com/SORACOM_PR/status/1121672885121114112?ref_src=twsrc%5Etfw">April 26, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

これでいけそう！！ってことで仕組みはこんな感じに
<img width="891" alt="スクリーンショット 2019-07-20 21.04.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/23a111bd-c675-3c09-e883-28180bc3aaa0.png">
※ 最初は、
`SORACOM LTE-M Button Plus -> SORACOM Beam -> API Gateway -> Lambda -> kintone`
という流れで作っていましたが、2019年7月のSORACOM Discovery にて新サービス **SORACOM Funk** が登場したのでそちらに乗り換えてみました！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">《新サービス発表》IoTデバイスからAWS Lambda / Azure Functions / Google Cloud Functions等のFaaSに直接連携する「SORACOM Funk」の提供を開始 <a href="https://twitter.com/hashtag/soracom?src=hash&amp;ref_src=twsrc%5Etfw">#soracom</a> <a href="https://twitter.com/hashtag/discovery2019?src=hash&amp;ref_src=twsrc%5Etfw">#discovery2019</a> <a href="https://t.co/eBUyqp1kpI">https://t.co/eBUyqp1kpI</a> <a href="https://t.co/jsEc55vZxU">pic.twitter.com/jsEc55vZxU</a></p>&mdash; ソラコム公式 (@SORACOM_PR) <a href="https://twitter.com/SORACOM_PR/status/1145875146625781760?ref_src=twsrc%5Etfw">July 2, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# SORACOMの設定

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

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

* [SORACOM LTE-M Button for Enterprise のボタンクリックを SORACOM Beamでサーバーに転送する](https://dev.soracom.io/jp/start/enterprise_button_beam/)
* [SORACOM Funk とは](https://dev.soracom.io/jp/funk/what-is-funk/)
 
# Lambdaの設定

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

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

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

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

設定を反映させる deploy.json をちょいちょいはさまないといけないのですが、この流れでできます！ プログラムは [コード部分](https://qiita.com/RyBB/private/b0b615decaa26f201cf6#%E3%82%B3%E3%83%BC%E3%83%89) に載せています。

# kintoneの設定

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

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

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

# コード

肝心のコードについてです。[GitHub](https://github.com/RyBB/kintone-alchemist) にあげています！
詳しくはGitHubのコードを見てもらえばわかるのですが、ポイントだけ。

## deploy.json 実行後の wait

deploy.json のレスポンスは 「反映したよ！」 ではなく 「反映する命令出したよ！」 なので、wait や **[アプリの設定の運用環境への反映状況確認API](https://developer.cybozu.io/hc/ja/articles/210100886)** をする必要があります。
今回は ~~確認めんどくさかったので~~ waitで対応しています。



```javascript: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を利用します。

```javascript: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/461708ad-4012-8690-c6ab-5b95068d183e.png)
このガムテがなんとも言えないですねｗ

# 完成イメージ

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

<img width="1434" alt="スクリーンショット 2019-07-20 22.04.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/7aa08f61-66a5-44cd-b300-5056481ba57a.png">
<img width="1434" alt="スクリーンショット 2019-07-20 22.04.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/ec3708b8-7a5d-5245-d971-cec650cf2e6b.png">

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

# おわりに 

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

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

それでは！≧(+･` ཀ･´)≦


## おまけ

実は・・・絶賛手袋強化中です！！
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/49b3e731-38f5-90ba-7d9d-6582f3487906.png)
手袋いろいろ買ってどれが合いそうか、とか布買ってきて裁縫したり・・・
今どきのWebエンジニアは裁縫もできないと！！(違う)