Retool とは？
はじめまして白米テックと申します。
最近 Retool を使う機会があり、あまりにも便利だったので紹介したいと思います。
Retool とは？ 🤖
ローコードツールです。
ドラック&ドロップでWEBサービスを簡単に作れるサービスになります。
既に他のサービスで提供されていそうですが、その凄さはプログラムによるによる拡張性の高さと扱えるデータベース数、外部サービスとの接続の容易さにあると思います。
私は PostgreSQL + javascript でプログラムを書くことが多いですが、
Googleスプレッドシートとも接続ができるので、エクセル関数や GoogleApp Script で業務効率化測っていたけど他のシステムに乗り換えたいという時、 Retool だと容易に移行できそうですね。
補助的に使うというのもありかと思います ◎
WEB開発で一般的に使う機能はほぼほぼ備わっており、
2024年1月時点でも日々アップデートされているのでどんどん便利になるかと思います。
プログラマが管理画面のHTML書いて... という業務は無くなるんじゃないかと思います。
サービスの提供はクラウドとオンプレ両方に対応しています。
料金プラン 💰
個人利用でしたら無料
1~5 人でしたら 月額1000円からで、ユーザー追加毎に重量課金
エンタープライズでしたら月額5000円ほどで、このプランではサービスを外部公開可能です。
詳しくはこちら → https://retool.com/pricing
サンプル実装 👨💻
試しに簡単な受注管理システムを作ってみたいと思います。
下記のページよりアカウントを作成します
次にApp 一覧ページにアクセスし、プロジェクトを新規作成します。
プロジェクト作成方法は色々ありますが今回は「App」を選択します。
既にサンプルが何個か用意されており、今回は受注管理システムを作りたいので、使えそうなUIを選択します。
もうほぼほぼ出来てますね...笑
UI実装
そのままだと使いづらいので日本語に翻訳します。
要素を選択して inspector で入力すると変更可能です。
今回は Retool 雰囲気をお伝えするのが目的なので細かい作業は省略しますが、
5分ほどの調整するだけでそれっぽいUIが出来上がります。
日時が若干見ずらいので調整します。
Vue のように {{ }} に Javascript を代入して整形可能です。
moment.js など便利ライブラリは予め用意されており、独自フォーマッターなども定義可能です。
データ更新
次はテーブルのセルを選択して編集可能にしたいと思います。
テーブルをクリックすると Inspector が表示されるので、「•••」をクリックして「Make editable」を選択します。
これでUI部分の作業は完了です。
テーブルセルが編集可能になっていますね。
次はクエリ部分の調整を行います。
table を開くと「Save action」に「updateRow.trigger()」とあります。
これはtable のsave イベントを受け取って updateRow というクエリを実行するようプログラムされています。
実行されているクエリは、画面左サイドメニューの「</>」 マークをクリックすると確認ができます。
デフォルトだと決済完了状況のみ更新可能な設定になっているので、全カラム変更可能に修正します。
下記の設定を適用します。
| フィールド | 入力値 |
|---|---|
| Action Type | 「Bulk update via a primary key」 |
| Primary key column | id |
| Array of records to update | {{ table1.changesetArray }} |
これでテーブルセルを編集して更新できるようになりました。
いかがだったでしょう？
定期的に外部APIを叩くなども Retool 上でできるみたいなのでまたの機会に試してみたいと思います。
Discussion