2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

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

Hexabaseにログインする

Hexabaseにてユーザー登録&ログインします。

image.png

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

FireShot_Capture_097_-__-app_hexabase_com-_097.jpg

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

image.png

項目
アプリケーション名(en) ProductManager
アプリケーション名(ja) 商品マネージャー

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

image.png

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

FireShot_Capture_097_-__-app_hexabase_com-_097.jpg

データベースを作る

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

FireShot Capture 097 -  - app.hexabase.com - 097.jpg

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

image.png

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

FireShot_Capture_098_-__-app_hexabase_com-_098.jpg

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

FireShot_Capture_099_-__-app_hexabase_com-_099.jpg

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

image.png

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

FireShot_Capture_099_-__-app_hexabase_com-_099.jpg

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

FireShot_Capture_099_-__-app_hexabase_com-_099.jpg

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

image.png

項目
データベース名(en) Product
データベース名(ja) 商品
データベースID pm-prdocut

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

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

image.png

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

FireShot_Capture_100_-__-app_hexabase_com-_100.jpg

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

image.png

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

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

FireShot_Capture_100_-__-app_hexabase_com-_100.jpg

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

FireShot_Capture_100_-__-app_hexabase_com-_100.jpg

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

FireShot_Capture_100_-__-app_hexabase_com-_100.jpg

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

image.png

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

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

image.png

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

画面項目名(en) 画面項目名(ja)
name 商品名

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

FireShot_Capture_0NaN_-__-app_hexabase_com-_0NaN.jpg

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

FireShot_Capture_0001_-__-app_hexabase_com-_0001.jpg

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

FireShot_Capture_0001_-__-app_hexabase_com-_0001.jpg

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

FireShot_Capture_0001_-__-app_hexabase_com-_s-_0001.jpg

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

FireShot_Capture_0001_-__-app_hexabase_com-_s-_0001.jpg

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

0001_app_hexabase_com_-_0819151620.jpg

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

0001_app_hexabase_com_-_0819151720.jpg

既存の項目を編集する

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

0001 app.hexabase.com - 0819151720.jpg

データを追加する

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

0002_app_hexabase_com_-_0819151836.jpg

まとめ

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

株式会社 Hexabaseー法人向けクラウドシステム『Hexabase』ー

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?