ビューのビジュアルエディターを追加しました！

典型的な管理画面を直感的な操作で作成できるビューの「ビジュアルエディター」を追加しました。

ビジュアルエディターとは

これまでベースマキナ上で複雑な画面を作成するには、「ビュー」や「結果の加工スクリプト」でJavaScriptとReactを使ったコーディングが必要でした。

ビジュアルエディターでは、典型的な管理画面を直感的な操作で作成できるようになり、これまでエンジニアに依頼していた画面の作成や修正を、エンジニア以外の方が自身で素早く対応できるようになります。

例えば以下のような画面を作成できます。

例：ユーザー検索画面を作成する

ビジュアルエディターで、以下のようなシンプルなユーザー検索画面を作ってみましょう。

• ユーザー名でユーザーを検索してテーブルに一覧表示できる

• ユーザー名をクリックすると、ユーザー詳細画面に移動できる

まずビジュアルエディターの作成画面でフォームコンポーネントを追加します。

フォームコンポーネントの設定で実行するアクションを選択するとフォームが表示されます。

次にテーブルコンポーネントを追加します。

テーブルコンポーネントの設定でフォームコンポーネントを選択し、プレビューでフォームを実行するとテーブルが表示されます。

最後にユーザー名の列をビューで作成したユーザー詳細画面へのリンクに変更します。

リンクのクエリパラメーターの値もセレクトボックスで簡単に設定できます。

最後にビューを保存したらユーザー検索画面の完成です。

その他の機能

上記の例で登場した機能以外にも、ビジュアルエディターには管理画面を作成するためのさまざまな機能が用意されており、代表的なものはこちらです。

更新画面を作成できる機能

フォームコンポーネントには更新画面を作るための「初期値用アクション」機能があります。

初期値用アクションではフォームの表示時に実行したアクションの実行結果をフォームの初期値に使用できます。

例えば、ユーザー情報を取得するアクションをフォームの表示時に実行し、その結果をユーザー情報を更新するフォームの初期値に使用することで、ユーザー更新画面を作成できます。

詳細画面を作成できる機能

フォーム、テーブル以外にも詳細画面を作成できるための、詳細テーブルコンポーネントがあります。

詳細テーブルコンポーネントでは、ユーザー詳細画面のように1つのデータを表示する画面を作成できます。

アクションのパラメーターなどに動的な値を設定できる機能

各コンポーネントの設定でアクションのパラメーターなどの値を設定する際に、固定の値の代わりにJavaScriptの式を使って以下のような動的な値を設定できます。

• クエリパラメーターの値

• 別の値を変換した値

• 現在日時などから計算した値

---

詳しい使い方やその他の機能についてはドキュメントの「ビジュアルエディター」をご覧ください。

ビュー機能はビューのコードエディター機能に名称を変更します

ビジュアルエディターの追加により、これまでのビューはビューのコードエディターという名称に変更いたします。

Reactを使った自由度の高い画面開発が必要な場合は、引き続きコードエディターをご利用ください。

変更点

• ビューの作成ボタンがドロップダウンリストになり、作成前に「ビジュアルエディター」か「コードエディター」かの選択が必要になりました。

• ドキュメントが「ビュー>コードエディター」に移動しました

画面を作成する機能の使い分け

ビューのビジュアルエディターの追加により、ベースマキナで画面を作る方法が以下の3つになりました。

• アクション実行画面の結果の加工

• ビューのビジュアルエディター

• ビューのコードエディター

これらの機能の使い分けについては「画面を作成する機能の使い分け」をご覧ください。

今後の展望

この度のビジュアルエディターの追加で、エンジニアに限らずより多くの方が管理画面を簡単に作成できるようになりました。

ベースマキナは「チームの潜在能力を限界まで引き出す基盤をつくる」というミッションのもと、安全なオペレーションに必要な管理画面を数分で誰でも作成できるよう、今後も機能開発を続けてまいります。

直近ではビジュアルエディターに以下の機能を追加予定です。（※リリース予定日は未定です）

• コンポーネントのタイトルと説明を表示する

• コンポーネントの表示をタブを切り替えられるようにする

• テーブルコンポーネントの各行にサブメニューを設定できるようにする

• テーブルコンポーネントの列にバッジを表示する

今後の機能追加にもご期待いただければ幸いです。