ノーコード ラボ

No Code のツールやアプリについて紹介します

Bubbleで作成したアプリをネイティブ化する方法

今回は、Bubbleで作成したアプリを Jasonelle を使用してネイティブ化する手順について、ご紹介します。

Jasonelle では、JSONを利用してアプリ化を行います。JSONは、サーバにファイルとして直接配置するか、もしくは Bubbleの API Workflows を利用する2種類の方法がありますが、今回はサーバ不要の後者である API Workflows でアプリ化を行いたいと思います。

また、今回のアプリ化では、Bubbleで API Workflows を利用する際に、GETメソッドをPOSTメソッドに変換する必要があるため、integromat もツールとして利用しています。

blog.nocodelab.jp

尚、アプリ化はAndroid環境を対象にご紹介していますが、 Jasonelle には、iPhone対応版もあります。手順はほぼ同様となりますので、XCODEを利用されている場合も、ぜひご参考くださいね。

1. 前提条件

  • Bubble で アプリ化したいアプリが作成済みであること
  • Android Studioがインストール済みであること
  • integromat にサインアップしていること

Android Studioとは、Google が提供する Android プラットフォーム向けのアプリ開発用の統合開発環境です。まだインストールしていない場合は、以下のURLからダウンロードすることが可能です。

developer.android.com

2. Bubbleで API Workflows の作成

では早速、API Workflows を設定していきましょう!今回使用するBubbleのアプリは、以前の記事で作成した 従業員リストアプリを利用したいと思います。

ではまず、Bubble で API が利用できるようにしていきます。Settings タブの API で「This app exposes a Workflow API」にチェックを入れて、APIを公開できるように設定します。

f:id:yksmt:20191001142732p:plain

左上にあるページ選択で、「API Workflows」を選択します。

f:id:yksmt:20191001143047p:plain

「Click here to add an endpoint...」の General から「New API endpoint...」を選択します。

f:id:yksmt:20191001143259p:plain

「Endpoint name」に任意の名前を設定し(ここでは「test」としています)、「Expose as a public endpoint」と「This endpoint can be run without authentication」にチェックを入れてAPIを公開します。

f:id:yksmt:20191001143801p:plain

「Click here to add an action...」で「Data(Things)」の「Return data from API」を選択してアクションを追加します。「Return a plain text」にチェックをいれて、JSONを登録します。

f:id:yksmt:20191001151803p:plain

登録するJSONは以下の通りです。「https://your-app.bubbleapps.io/version-test/」をご自身のBubbleURLに変更してください。

{
   "$jason": {
            "head": {
            "actions": {
                "$load": {
                    "type": "$render"
                }
            }
         },
        "body": {
            "background": {
                "type": "html",
                "url": "https://your-app.bubbleapps.io/version-test/",
                    "action": {
                        "type": "$default"
                              }
                          }
                }
              }
}

これで、Bubbleの設定が完了です。 APIが公開されているURLは、「https://your-app.bubbleapps.io/version-test/api/1.1/wf/設定したエンドポイント名」となります。ブラウザで接続してみましょう。URLは後ほど、integromat の設定時に利用しますので、メモ帳などに退避しておいてください。

f:id:yksmt:20191001151445p:plain

このままでは 405エラーが表示されてしまいますが、次項の integromat で解消していきます。

3. integromat で 405エラーの対応

integromat を利用して、GETメソッドをPOSTメソッドに変換していきます。

f:id:yksmt:20191001161320p:plain
作成するシナリオ

integromat でシナリオを新規作成し、Custom webhook で Add から任意の名前のWebhookを作成します。ここでは「Employee」としました。

f:id:yksmt:20191001154231p:plain

作成されたURLを「Copy address to clipboard」でコピーし、ブラウザで開きます。

f:id:yksmt:20191001154400p:plain

「Accepted」と表示されることを確認し、integromat で「Successfuly determined.」となっていればOKです。「Copy address to clipboard」でコピーしたURLは、後ほどAndroid Studioにて使用しますので、メモ帳などに退避しておきましょう。

f:id:yksmt:20191001154605p:plain

次に integromat で HTTP の「Make a request」を追加します。

f:id:yksmt:20191001155400p:plain

URLに先ほどBubbleで退避しておいたAPIのURLを登録します。Method は「POST」を選択しましょう。

f:id:yksmt:20191001155621p:plain

Webhook response を追加して、Body に「2.Data」を登録します。

f:id:yksmt:20191001155812p:plain

f:id:yksmt:20191001160044p:plain

あとは、シナリオを保存して、スケジュールを「ON」に設定すればOKです。

f:id:yksmt:20191001160249p:plain

以上の設定で、先ほど「Copy address to clipboard」で退避しておいたURLが「Accepted」から、Bubbleで設定したAPIを通じて JSONを取得することが出来ました。

f:id:yksmt:20191001160701p:plain

4. Jasonelle のダウンロードと設定

Bubble をアプリ化する準備が整いました。早速、Jasonelle をダウンロードして設定してきましょう。Jasonelle は以下からダウンロードできます。

github.com

プロジェクトを任意のフォルダに展開し、Android Studio の Import project で読み込みます。

f:id:yksmt:20191001161754p:plain

f:id:yksmt:20191001161808p:plain

Android Studio で app > res > values > strings.xml を開き、URLを先ほど退避しておいた、URLに変更します。

f:id:yksmt:20191001162123p:plain

5. エミュレータでアプリを実行してみよう!

では、エミュレータを起動してみましょう。

f:id:yksmt:20191001163647p:plain

うまくいきましたか?

アプリをGooglePlayなどで公開する場合は、Application ID を固有のIDに変更する必要がありますので、注意してくださいね。アイコンは「app > res > mipmap > ic_launcher」から更新しましょう。

f:id:yksmt:20191001163957p:plain

6. まとめ

いかがでしたか?今回は、Jasonelle と integromat を利用して Bubble のアプリ化を行いました。Bubble を始め、便利なサービスを利用すれば、ノーコードでもアプリ作成が可能です。是非参考にしてみてくださいね。