【Bubble×kintone】Bubbleとkintoneの画像を連携する

今回はのノーコードツールBubbleとクラウド型業務アプリ開発プラットフォームkintoneで画像ファイルのやり取りをする方法を紹介します。

最近インターン先でノーコード開発をしている大学生です。
使用しているツールは「Bubble」です。
ノーコード開発については、「初心者でもできる」「今後のトレンドになる」などの意見と「やりたいことによっては結局コードを書く」「アメリカじゃ流行っていない」などの意見がみられます。
私自身、趣味でプログラミングをしていて実際にノーコード開発をしている感想としては、

・初心者でも簡単に簡単な開発はできる
・webアプリの仕組みは知る必要がある
・自由度は下がる（コード書いたほうが早い）

と感じています。
もちろん私自身の感想なのでノーコード開発が自分自身にあっている方もいると思います。

私のように、コードだけを書いてきて、webアプリの仕組みを知るにはいいツールだと考えています。しかしすべてがノーコード開発になるのは、まだまだ無理かなぁ….

今回はノーコード開発していてつまづいた点、「画像をAPIを使って他のアプリに送信する方法」についてメモとして残します。

Bubbleとは？
kintoneとは？
APIとは
Bubbleからkintoneに画像を送る方法
手順
まとめ

今回はノーコードツール「Bubble」とデータベース的アプリ「kintone」をAPI連携して、Bubbleからkintoneに画像を送ります。

想定される場面としては、プロフィール入力フォームなどです。
①Bubbleで入力フォームをつくる（デザイン簡単、ノーコード）
②kintoneで入力したデータを保存して貯める（データベース的役割、社内におけるデータの共有）

他にも顧客の入力してもらうフォームのデザインを良くしつつ、社内でデータ共有したいシステムに応用できると思うので、参考になれば幸いです。

Bubbleとは？

The best way to build web apps without code | Bubble

Bubble introduces a new way to build software. It’s a no-code tool that lets you build SaaS platforms, marketplaces and CRMs without code. Bubble hosts all web ...

ノーコード開発ツールの１つです。
通常アプリ開発をするには、フロントエンド言語（HTML、CSS,Javascriptなど）、バックエンド言語（PHP、Python、Rubyなど）、データベース設計、アーキテクチャなどの知識が必要となります。

ノーコード開発は上にあげた知識を完全に網羅しなくてもアプリ開発を行えることを目的としたツールです。Bubbleの他にも「Adalo」「Glide」などが挙げられます。

メリットは、１からコードを書いて開発するよりも短い時間で開発することができます。
デメリットとしては、自由自在に扱うにはある程度の知識が必要です。
また、Bubble開発で行き詰まった際に日本語で調べてもただのBubbleを紹介するサイトしかでてこない場合が多いです。

Bubble開発で行き詰まった際は英語で公式フォーラムを調べることをお勧めします。

kintoneとは？

kintone（キントーン）- 404エラーページ

kintoneの「404エラーページ」をご紹介します。kintone（キントーン）は開発の知識がなくても自社の業務に合わせたシステムをかんたんに作成できる、サイボウズのクラウドサービスです。業務アプリを直感的に作成でき、チーム内で共有して使えます。社員間のつながりを活性化する社内SNSとしての機能も備えているため、...

kintoneとは,社内システムを簡単に作成でできるサイボウズのクラウドサービスです。
膨大なデータを管理することができるかつ、社内での共有、データの見える化まで簡単にできます。

メリットとしては、ドキュメントが豊富でかつ日本語のフォーラムの充実などが挙げられます。
初めてでもサンプルアプリを作るデモをみるとある程度理解できます。また、APIを使って様々なアプリと連携ができる点がすごくいいと感じています。

しかしデザインの自由度の点ではBubbleが上だと考えています。なので、今回はkintoneをデータベース的な役割にして使うことにします。

APIとは

今回はkintoneのAPIを使って、Bubbleで入力された画像を送ります。
APIとは簡単にいえば「外部アプリとやりとりするための窓口」です。
メリットは使いたいシステムを自分で１から準備せず、他の人の作っているシステムを使えるということです。
分かりやすい記事はこちらです。

【簡単に】REST APIとは？初心者もわかりやすく解説

REST APIとはどういうものか。イメージが付かないという人に向けてわかりやすく解説します。【本記事でわかる4つ】1. APIとはどういうものかわかる。2. REST APIとはどういうものかわかる。3. どういうAPIがあるのか？どういう点に使われているのかわかる。4. APIの作り方がわかる

Bubbleからkintoneに画像を送る方法

それでは、まずBubbleからkintoneにAPIを使って画像を送る方法について説明します。そして次の手順では画像を使って実際にBubbleとkintoneを連携します。

まず、連携のイメージ図を示します。

詳しく述べると、
①Bubbleから画像をAPIを使って送る
②kintoneから画像のファイルkeyが返ってくる
③返ってくるファイルkeyを使ってkintoneのデータと紐づけ

kintoneでは、APIを使ってファイルをアップロードしたさいに一時的な保管場所にアップロードされたファイルが保存されます。なので、紐づける操作が必要です。詳しくはドキュメントを見て下さい。

ファイルをアップロードする

一時保管領域にファイルをアップロードします。

また、Bubbleから画像をkintoneに送る際にはBubbleの公式プラグイン「API Connector」を使ってFormdata型で送ります。
今回は「API Connector」の説明は省きますが,わかりやすい説明のサイトを紹介します。

BubbleでAPIを使ってみよう! - ノーコードラボ

BubbleでAPIを使ってみよう! 画面を作成しよう APIを使おう APIConnetorをインストールしよう APIConnetorの設定をしよう APIConnetorを実際に呼んでみようまとめおすすめ記事 BubbleでAPIを使ってみよう! 巷では様々なAPIが提供されていますが、Bubbleでも簡単に...

Formdata型とは自分も詳しくは学んでおらず、ファイルを送るときに使うものという理解です。
よくAjaxを使ってJavascriptでファイルを送信する際に使うというイメージです。
参考

JavaScriptのFormDataオブジェクトの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

初心者向けにJavaScriptのFormDataオブジェクトの使い方について解説しています。FormDataオブジェクトは、XMLHttpRequestを使ってデータを送信するためのキーと値のセットを追加することが出来ます。フォームとは分離して使うことが出来ます。

手順

それでは手順を画像を使って説明します。
まずは、Bubbleで簡単に画像とその画像のタイトルを入力するフォームを作ります。
入力フォームの名前はそれぞれimage_name_bubbleとimage_bubbleとしています。

そして、kintone上にも同じようなアプリを作ります。
この時フィールドコードは、
添付ファイル → image
文字列（1行）→ image_name
とします。kintoneのフィールドコードの設定などはkintoneのドキュメントを見てください。

今回は、
①画像タイトルをBubble(image_name_bubble)からkintone(image_name)に送って保存。
②画像をBubble(image_bubble)からkintoneに送る。
③②で返ってくる画像のファイルkeyを①で返ってくるデータのidの(image)と紐づける処理を送信する

という順番で行っていきます。

Bubbleから画像タイトルをAPIを使って送る

まずはBubble上でAPI　Connectorの設定をします。
API Nameが「image」のName「kintone」としています。

ポイントだけを箇条書きで書きます。

・今回はボタンをクリックしたときにこの処理をしたいので、「Use as Action」とする

・POSTのＵＲＬは「https://(kintoneのサブドメイン名).cybozu.com/k/v1/record.json」です。

・X-Cybozu-Authorizationは、データを登録したいアプリから作成できます。

APIトークンを生成する | kintone ヘルプ

kintoneのヘルプです。 kintoneを利用するために必要な設定や操作方法などを説明します。

・appidは、kintoneのアプリ上から確認できます。

cybozu developer community

kintone、Garoonのカスタマイズ開発を行っている技術者同士で、困りごとや悩みを具体的に相談、解決していくことを目的とするコミュニティです。

これでInitialize callしてエラーの出ないことを確認します。エラーの出ないことを確認したらimage_name_bubbleのValueを空にしておきます。

次にBubbleでWorkflowを設定します。

写真のようにボタンをクリックしたときのアクションから「Plugin」→「image-kintone」を選びます。先ほど「Use as Action」としたことで、ここで選択できるようになります。

そしてinputのimage_name_bubble.valueを渡してあげます。

一旦これで次に進みます。

Bubbleから画像をAPIを使って送る

ここでもまず、Bubble上でAPI　Connectorの設定をします。
API Nameが「image」のName「kintone_upload」としています。

上と同じところは説明を省きます。ポイントとしては、

・POSTのURLは「https://(サブドメイン名).cybozu.com/k/v1/file.json」です

・HeadersのContent-typeをmultipart/form-dataとする

・Body typeをForm-dataとする

・ParametersにSend fileをチェックすることで、ファイルを送ることができる

これで適当なファイルをuploadしてInitialize callしてエラーの出ないことを確認します。エラーの出ないことを確認したらfileのValueをclearで空にしておきます。

次にBubbleでWorkflowを設定します。

先ほどと同じようにボタンをクリックしたときのアクションから「Plugin」→「image-kintone_upload」を選びます。そしてDynamic linkに画像を渡します。image_bubble’s valueです。他は何も指定しないで大丈夫です。

これで次に進みます。

画像のタイトルと画像を紐づける

ここでもまず、Bubble上でAPI　Connectorの設定をします。
API Nameが「image」のName「API Call」としています。

上と同じところは説明を省きます。ポイントとしては、

・POSTのＵＲＬは「https://(kintoneのサブドメイン名).cybozu.com/k/v1/record.json」です。

・kintone のAPIのドキュメントに沿ってPUTリクエストとする

Initialize callしてエラーの出ないことを確認しますが、今回は上2つをInitialize callした時に返ってくるidとfilekeyを使ってInitialize callしてあげると楽です。

次にBubbleでWorkflowを設定します。「Plugin」→「image-API Call」を選びます。

上２つと違うところは、record_idには最初に画像タイトルを送った時に返ってくるidを、filekeyには画像を送った時に返ってくるfilekeyを渡すところです。この辺りは直感的にできるBubbleは非常に便利です。
コードを書くとなると、面倒そう….