Hexabaseで商品マスタの作成と編集を行う（その1：データベース作成と項目の設定）

[Hexabase](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。[ヒーローズ・リーグ 2022](https://heroes-league.net/)に協賛していることもあり、初めて触る方が少しでも早く使い慣れてくれるように、使い方を解説していきます。

今回はHexabaseで商品マスタを作成、編集するWebアプリケーションを開発します。まずは新しくデータベースを作成し、項目を作成するまでの流れを解説します。

## Hexabaseにログインする

[Hexabase](https://www.hexabase.com/)にてユーザー登録&ログインします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/89949282-b6e5-b07a-3cec-2c83612d2344.png)

最初はメニューだけで真っ白な画面が出るかと思いますので、右上にあるプラスアイコンをクリックします。

![FireShot_Capture_097_-__-_app_hexabase_com_-_097.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/31d2a0e3-f0c3-bdbe-a975-deb5c21db604.jpeg)

新規アプリケーションを作成する画面が表示されますので、アプリケーション名（英語と日本語）を入力します。今回は以下のように入力しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/fd3bdd3c-f842-abdc-221a-5bfcffdc0cd4.png)

| 項目 | 値 |
|--------|--------|
| アプリケーション名（en） | ProductManager |
| アプリケーション名（ja） | 商品マネージャー |

**新しいプロジェクトの作成を開始しました。** というダイアログが出るのでOKを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/a571ee0d-251a-9cc8-3243-4e7a24643c20.png)


再読み込み（必要ないかも？）すると `商品マネージャー` という作成したアプリケーション名が表示されるので、クリックします。

![FireShot_Capture_097_-__-_app_hexabase_com_-_097.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/c01ede9f-e80f-9061-029b-da5711648f9f.jpeg)


## データベースを作る

アプリケーションに入ると、以下のような画像の画面が出るはずです。

![FireShot Capture 097 -  - app.hexabase.com - 097.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/fc4656bd-5420-07ad-dbc5-00068462e852.jpeg)

続いてデータベースを作成します。左側のメニューから **データベース** の右にある三点リーダーをクリックし、 **新しいデータベースを作成する** をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/326d2448-9e28-b4d0-ed9a-f5a1e081b558.png)


出てきた画面で **サンプル雛形から作成** をクリックします。

![FireShot_Capture_098_-__-_app_hexabase_com_-_098.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/7cc59b75-5a5b-c52e-23d8-e606b43d5ae9.jpeg)


次に最小限のテンプレートを選んで **データベースを追加** をクリックします。

![FireShot_Capture_099_-__-_app_hexabase_com_-_099.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/86c8bb3f-85f3-72c7-70d1-8be0ec7609f2.jpeg)


作成しています、というメッセージが流れて少し待ちます（または再読み込み？）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/bb9986e2-ca9b-95d2-f524-1da9bff37ebe.png)

作成が完了すると、左側のメニューに **新しいデータベース** というのが追加されています。

![FireShot_Capture_099_-__-_app_hexabase_com_-_099.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/26f2ed72-992a-ff79-f18d-99d28c6e7395.jpeg)

その **新しいデータベース** をクリックして、左上にあるギアアイコン（設定）をクリックします。

![FireShot_Capture_099_-__-_app_hexabase_com_-_099.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/64858a21-a339-158e-303c-f3668d32fa60.jpeg)


ここではデータベース（いわゆるテーブル）に関する設定を行います。まずは名前を変えておきましょう。今回は以下のように入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/b9405f29-f5e6-38b8-7603-42d85b9508c3.png)

| 項目 | 値 |
|--------|--------|
| データベース名（en） | Product |
| データベース名（ja） | 商品 |
| データベースID | pm-prdocut |

後は、以下をチェックしておきます。

- 左メニューに表示する
- リストの項目と詳細画面に画面ID(display_id)を表示する
- リストの項目にアイテム情報(item_id, rev_no, updated_at, created_at)を表示する
- グリッド入力機能を利用する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/d192b9a8-df72-56cf-8fa5-0de77e611a43.png)


入力&選択したら、一番下にある更新ボタンをクリックします。

![FireShot_Capture_100_-__-_app_hexabase_com_-_100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/76a3116c-4f93-8301-f637-8237c7c04478.jpeg)

以下のような表示になったらデータベース作成は完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/341e4a54-e3cd-8755-054c-1d24e9513216.png)

## アイテムの項目を追加する

デフォルトではタイトル（Title）しかありませんので、カラムを追加していきます。適当なデータを右クリックして、 **詳細を表示する** をクリックします。

![FireShot_Capture_100_-__-_app_hexabase_com_-_100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/e12d2e79-3934-ff08-6700-96303de69b99.jpeg)


項目設定モーダルが表示されますので、右下にある **項目を編集・追加する** をクリックします。

![FireShot_Capture_100_-__-_app_hexabase_com_-_100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/4334f9a9-d27a-77e8-bc57-6c8dcfe1fde7.jpeg)


そうすると新しい項目追加のメニューが出てきます（左側）。 **新しい項目を追加** ボタンをクリックします。

![FireShot_Capture_100_-__-_app_hexabase_com_-_100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/7c8defcb-44cd-4282-9658-9f34e3fa58d6.jpeg)

新しい項目に関するモーダルが出ますので、今回は以下のように4つの項目を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/e6b44107-4038-0440-7134-0660f05683f2.png)


| 画面項目名（en） | 画面項目名（ja） | 画面項目の型 |
|--------------|--------------|--------------|
| price | 価格 | 数値 |
| salesDate | 販売開始日 | 日付・時刻 |
| detail | 商品詳細 | 複数行テキスト |

以下のように4つの項目ができあがれば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/188909c8-26e1-1f58-1a7f-b569c991aa60.png)


Titleのところにある鉛筆アイコンをクリックすれば名前が編集できます。以下のように変更しておきましょう。

| 画面項目名（en） | 画面項目名（ja） |
|--------------|--------------|
| name | 商品名 |

なお、このまま保存すると以下のように項目名がよく分からない文字列になります。これは項目IDが表示されているためです。

![FireShot_Capture_0NaN_-__-_app_hexabase_com_-_0NaN.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/82dd9bbc-976a-dec0-155b-e88c7981ea79.jpeg)


そこで、もう一度任意の行を右クリックして、詳細を表示するをクリックします。

![FireShot_Capture_0001_-__-_app_hexabase_com_-_0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/84f36c30-334d-5faa-eb82-75e6b5ee5c21.jpeg)


そうすると `価格 (Fld-8JFgaF8h)` のように表示になっているのが分かるかと思います。

![FireShot_Capture_0001_-__-_app_hexabase_com_-_0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/be935538-f750-8842-4826-a8ce0b902f9a.jpeg)


もう一度 **項目を編集・追加する** をクリックして、編集モードに入ります。

![FireShot_Capture_0001_-__-_app_hexabase_com_-__s_-_0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f482dc4a-c721-d528-811b-a13b585aa6d8.jpeg)

そして、各項目の右上にある鉛筆アイコンをクリックします。

![FireShot_Capture_0001_-__-_app_hexabase_com_-__s_-_0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/582e9909-d475-2368-ae42-fe183416ef02.jpeg)

右側のメニューが出たら、画面項目IDを画面項目名（en）を同じものにしてください。

![0001_app_hexabase_com_-_0819151620.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/e9f7369d-f349-7c80-1596-8caefc248556.jpeg)


そうすると単に `価格` だけの表示になるかと思います。この作業は一覧に戻る前（Titleを編集した時）に行うこともできます。保存して編集を終わると、期待した項目名が表示されているかと思います。

![0001_app_hexabase_com_-_0819151720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/611f467b-3d6e-12bf-31b8-e3784c76ef31.jpeg)

## 既存の項目を編集する

`グリッド入力機能を利用する` を有効にしているので、一覧表示の状態で編集できます。適当に編集してみましょう。ステータス（Status）は編集できませんので注意してください。

![0001 app.hexabase.com - 0819151720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/76c369e8-aa9f-34c0-c4b1-b393cc6fc82c.jpeg)


## データを追加する

新しい行を追加する場合には右上の新規登録ボタンを押して行を追加してください。

![0002_app_hexabase_com_-_0819151836.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/a0f72b9c-eb7c-2ca2-ee52-07af6d5a47e9.jpeg)


## まとめ

ここまでがHexabaseにおけるアプリケーションの作成とデータベース作成までの手順になります。次は業務用アプリとして大事になるステータス管理の使い方を解説します。

[株式会社 Hexabaseー法人向けクラウドシステム『Hexabase』ー](https://www.hexabase.com/)