Bubbleでアプリ開発をしている皆さん、こんにちは！今回は、BubbleのPlugin Toolboxを使ったServer Scriptに使い方を簡単な事例を使って説明します。
なぜServer Scriptを使うの？
Server Scriptを使うと、Bubbleの標準機能だけでは実現できない複雑な処理や、外部サービスとの連携などが可能になります。画面上で実行できるJavascriptでは対応できないようなケースであってもServer Scriptを実装することで複雑な処理も実装が可能となります。
例えば、今回のUnix時間から日本時間への変換も、Server Scriptを使うことで簡単に実現できます。（これはJavascriptでもよりですが、、）
Plugin Toolboxとは？
Toolboxプラグインは、リストやスクリプトを簡単に使えるようになる便利なエレメントをまとめて追加できるプラグインです。
JavascriptやServer ScriptなどをBubble上で実行する際に利用するPluginになっています。
Server Scriptとは？
Server Scriptは、Bubbleのサーバーサイドで実行されるJavaScriptコードです。データベース操作やAPI連携など、クライアントサイド（ブラウザ上）では実行できない処理を担います。
複雑なロジックなどを組む際に重宝します。現在はChatGPTをはじめとするAIを活用することでコードも簡単に生成できるのでちょっとしたコードの作成であれば高度な知識が無くても簡単に実装できるようになってきています。
具体例：Unix時間と日本時間の変換方法
ゴールイメージ
シンプルにUnix時間を入力してボタンを押すと日本時間が表示されるだけの機能です。バックエンドで日本時間に変更するスクリプトを動かします。
めちゃくちゃシンプルです！
実装手順
具体例としてUnix時間を日本時間に変換する方法を見ていきましょう。Plugin Toolboxのプラグインを使って実装しています。
1. Plugin Toolboxのインストール
まず、Bubbleのプラグインエディタを開き、Plugin Toolboxをインストールします。
2.Elementの配置
たったこれだけです。
Unixタイムを入力するInput box、ボタン、一番下に変換後の時間を表示するText。
Custom statesに変換後の時間を格納するようにしています。
3. Workflowの作成
次に、BubbleのWorkflowエディタで新しいWorkflowを作成し、以下のアクションを追加します。
- Click here to add an actionのPluginsからServer scriptを選択
- アクションは以下を設定するだけです。
- スクリプトは以下。少ないっ！
let unix_timestamp = properties.thing1;
// Unixタイムスタンプをミリ秒に変換してDateオブジェクトを作成
let jpn_date = new Date(unix_timestamp * 1000);
return jpn_date;
- Server Scriptを実行した結果を今回はSet statesに格納しています。
4. Workflowの実行
Workflowを実行すると、指定したUnix時間が日本時間に変換され、結果が返されます。
まとめ
今回は、Plugin Toolboxを使ってServer ScriptでUnix時間を日本時間に変換する方法をご紹介しました。Server Scriptを活用することで、Bubbleの表現力をさらに広げることができます。ぜひ、今回の記事を参考に、Server Scriptを使いこなして、より高度なアプリ開発に挑戦してみてください！
株式会社Spovisorでは、ノーコード開発やDX推進に関するご相談を承っております。お気軽にお問い合わせください。
株式会社Spovisorへのお問い合わせはこちら: https://future.spovisor.com