Zapier で、JSON のリスト文字列を変換して、kintone のチェックボックス項目にインポートする

# ０．はじめに

最近、[WordPress](https://wordpress.com) を [Shifter](https://www.getshifter.io/) への移行をするにあたって、[Kwes Forms](https://kwes.io) というフォームサービスを使い始めたんですが…、

そこで、

[Kwes Forms](https://kwes.io) に登録された問い合わせを、[kintone](https://kintone.cybozu.co.jp/) へ自動的に Post したいなぁ、と思いまして…、

ちょっと調べてみたところ、

[Zapier](https://zapier.com/) という連携サービスで、[Kwes Forms](https://kwes.io) と [kintone](https://kintone.cybozu.co.jp/) とを連携出来るみたいなので、やってみたんですが…、

* [Zapier を介して、Kwes Forms の問い合わせを、kintone アプリへ Post してみる \- Qiita](https://qiita.com/kusokamayarou/items/dc9da3f8ba7d8df03e0b)

[Kwes Forms](https://kwes.io) のチェックボックスに設定され、[Zapier](https://zapier.com/) に出力された JSON 形式のリスト文字列を、kintone のチェックボックス項目に、そのままインポート出来なかったので、色々試行錯誤してみたら、一応インポート出来たので、シェアさせて頂こうかなと ♪♪♪

# １．[Kwes Forms](https://kwes.io) のチェックボックス

まぁ、普通に HTML のチェックボックスですね。詳しいことは、「[How to Add Checkboxes and Radio Buttons to your Kwes form](https://kwes.io/docs/checkbox-radio-fields)」をご参照を。

![FireShot Capture 352 - How to Add Checkboxes and Radio Buttons to your Kwes form - kwes.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/5cb006fb-474e-d78d-8a3c-a13cd501f81d.png)

# ２．[kintone](https://kintone.cybozu.co.jp/) のチェックボックス

詳しいことは、「[チェックボックス \- kintone ヘルプ](https://jp.cybozu.help/k/ja/user/app_settings/form/form_parts/check_box.html)」をご参照を。

![FireShot Capture 353 - チェックボックス - kintone ヘルプ - jp.cybozu.help.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/2b7ecbcb-336f-b648-b324-bd702924ac9f.png)

# ３．[Zapier](https://zapier.com/) に出力された [Kwes Forms](https://kwes.io) のチェックボックスの JSON 形式のリスト文字列

[Zapier](https://zapier.com/) には、以下の形式で出力されます。

`["サービスの概要を知りたい","導入事例を知りたい","お見積りがほしい","その他"]`

# ４．[Zapier](https://zapier.com/) での [kintone](https://kintone.cybozu.co.jp/) へのインポートの設定について

## ４-１．デフォルト設定

デフォルトでは、[kintone](https://kintone.cybozu.co.jp/) のチェックボックスに設定された項目を一つだけ選択する形式みたいで…、[Kwes Forms](https://kwes.io) のチェックボックスで複数選択しても、設定された項目しかインポートされないみたいです…。

<img width="840" alt="スクリーンショット 2020-06-05 16.00.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/0b7e753f-de3f-6256-6059-614d67d4a50e.png">

## ４-２．カスタム設定

カスタム設定で、JSON 形式の生のリスト文字列 `["サービスの概要を知りたい","導入事例を知りたい","お見積りがほしい","その他"]` を登録してみましたが…、

<img width="840" alt="スクリーンショット 2020-06-05 16.10.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/dc9b494e-c5a6-1067-9b8f-3cfde44cef18.png">

エラーになってしまいます…。

<img width="808" alt="スクリーンショット 2020-06-05 16.55.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/1ef95bf1-ba2d-c836-4e75-0ba1732fd663.png">

# ５．[Zapier](https://zapier.com/) に出力された [Kwes Forms](https://kwes.io) のチェックボックスの JSON 形式のリスト文字列の変換

色々試したところ、

`["サービスの概要を知りたい","導入事例を知りたい","お見積りがほしい","その他"]`
は、登録出来ませんが、

`サービスの概要を知りたい,導入事例を知りたい,お見積りがほしい,その他`
だと、正常に登録されることがわかりました。

ということで、

[Kwes Forms](https://kwes.io) と [kintone](https://kintone.cybozu.co.jp/) の処理の間に、上記の変換処理を追加します。

変換処理は、「[Formatter by Zapier](https://zapier.com/apps/formatter/help)」を使います。

1. フローの「＋」ボタンを押下して、「[Formatter by Zapier](https://zapier.com/apps/formatter/help)」の処理を追加します。
<br><br>
1. 「Choose App & Event」において、以下の項目を設定して、「CONTINUE」ボタンを押下します。
    * Choose App : 「Formatter by Zapier」
    * Choose Action Event : 「Text」
    * ![FireShot Capture 356 - TEST - Zapier - zapier.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/78052cf9-7073-30e5-8d01-9ee036db89ab.png)
1. 「Customize Text」において、以下の項目を設定して、「CONTINUE」ボタンを押下します。
    * Transform : 「Replace」
    * Values - Input : ※ 変換するリスト文字列
        * 例 : `["サービスの概要を知りたい","導入事例を知りたい","お見積りがほしい","その他"]`
    * Find : 「[」
    * Replace : ※ 入力しない。
    * ![FireShot Capture 358 - TEST - Zapier - zapier.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/5258b8f5-33dc-a178-a916-0804bffc8bd9.png)
1. 設定内容の確認画面が表示されるので、確認し、「TEST & CONTINUE」ボタンを押下します。
    * ![FireShot Capture 361 - Edit Step - Zapier - zapier.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/808fe669-1db7-edd0-3b7b-af6b59967cc0.png)
1. 処理の結果画面が表示されるので、正常に変換されていることを確認し、「RETEST & CONTINUE」ボタンを押下します。
    * ![FireShot Capture 363 - Edit Step - Zapier - zapier.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/6e2da8f2-cf1b-4f5d-ac88-329b16ba3638.png)
1. 処理の結果画面が表示されるので、正常に変換されていることを確認し、「Done Editing」ボタンを押下します。
<br><br>
1. これまでの 1 〜 6 を、「]」「"」においても行います。
<br><br>
1. [kintone](https://kintone.cybozu.co.jp/) の処理の「Customize Record」において、最終的に変換された値を設定します。
    * ![FireShot Capture 366 - POST - Kwes (https___test0001.genbasupport.com_document-form-test_) -_ - zapier.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/4de3cb65-caba-5074-0535-258d416fbaca.png)

# ９９．ハマりポイント

* とりあえず、全然登録出来なくて、本当に困りました…。

* あまりにもわからなくて、[cybozu developer network](https://developer.cybozu.io/hc/ja) に質問もしちゃいました…。
    * [zapier \-> kitone 連携において、チェックボックスへの post のやり方を教えてもらいたい。 – cybozu developer network](https://developer.cybozu.io/hc/ja/community/posts/900001065966-zapier-kitone-%E9%80%A3%E6%90%BA%E3%81%AB%E3%81%8A%E3%81%84%E3%81%A6-%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%B8%E3%81%AE-post-%E3%81%AE%E3%82%84%E3%82%8A%E6%96%B9%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%84%E3%81%9F%E3%81%84-)
    * コメント下さった [サクラエビ](https://developer.cybozu.io/hc/ja/profiles/537172410-%E3%82%B5%E3%82%AF%E3%83%A9%E3%82%A8%E3%83%93) さん、どうもありがとうございました！ 🙇‍♂️🙇‍♂️🙇‍♂️

* 他にも、理由はわからないんですが、[Zapier](https://zapier.com/) での [kintone](https://kintone.cybozu.co.jp/) への接続が出来なくなったりして…。

# ＸＸ．まとめ

とりあえず、まとめさせて頂きましたが…。

今回のやり方は、チェックボックスの項目に「[」「]」「"」が入ってると、正常に処理されないと思いますので、ご注意を！

あと、日付についても同じ様なやり方で変換出来ると思いますので、是非お試し下さい。

* Choose App & Event
    * Choose App : 「Formatter by Zapier」
    * Choose Action Event : 「Date / Time」
* Customize Date / Time
    * Transform : Format
    * Values - Input : ※ 変換する日付文字列
    * To Format : `YYYY-MM-DDTHH:mm:ssZ (2006-01-22T23:04:05-0000)`
    * To Timezone : 「Asia/Tokyo」
    * From Format: `YYYY-MM-DD HH:mm:ss Z (2006-01-22 23:04:05 -0000)`
    * From Timezone : 「Asia/Tokyo」

[Zapier](https://zapier.com/) のフローの設定については、もっと良いやり方もあるかもしれませんので、是非コメント頂けると非常に嬉しいです！



以上、ご参考になれば ♪♪♪

👋👋👋