SPIRAL(ver.1)を触ってみた

# はじめに
初めまして。sawaです。
今回ローコード開発プラットフォームであるSPIRAL(ver.1)を触ってみました。
手探りで作り進めるうちにネット上に情報が少なくて不便を感じたため、この度記事を作成しました。
ちなみに私は今までDB周りは触ったことがありません。MySQLを練習で触ったくらいです。このような人でも簡単なアプリを構築することができましたので、ひとつの参考にしていただければ幸いです。

# SPIRAL ver.1とは
公式サイトによると
> SPIRAL ver.1は、柔軟なデータベースを中心として、Webアプリ構築に必要なさまざまな機能が備わったプラットフォームです。システム環境構築は不要で、データ入出力、認証、メール配信、API連携などの部品を組み合わせたWebアプリ開発（ローコード開発）が行えます。
※[SPIRAL ver.1 公式サイト](https://www.pi-pe.co.jp/spiral-series/spiral-suite/)より引用

とのことです。
端的に説明すると、ローコードでDBを使用したアプリが構築できるサービスです。


具体例を挙げると、下記画像のような簡単な入力フォームがほしいときに爆速で作成できるサービスです。
![スクリーンショット (226).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752085/813cb0cc-b734-fb9f-4db6-c4dcf48f4beb.png)


# 使い方
最低限の使い方を体系的にまとめました。
各機能の詳細についてはここでは割愛します。[サポートサイト](https://support.smp.ne.jp/manuals/)をご参照ください。

#### 1.アプリを新規作成/既存アプリを編集
- アプリ一覧画面について
SPIRALにログインすると、アプリ一覧画面に遷移します。

    アプリを新規作成する際は、右上の「+」アイコンを選択してください。
既存のアプリを更新したい際は、画面左側一覧に表示されているアプリ名を選択してください。
![Frame 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752085/46d4b099-bc80-1b69-a81b-d51731976a5b.png)

- DB,関連設計一覧画面について
アプリ一覧でアプリ名を選択すると、DB,関連設計一覧に遷移します。

    この画面では大きく２つのエリアに分かれています。
画面左側（赤枠部分）はDB一覧で、作成したDBが表示されます。このページから設定の変更が可能です。
画面右側（青枠部分）はDBに紐づけられたオブジェクトが表示されます。こちらもこのページから設定の変更が可能です。

    新規作成したい場合は、各カラムの右上の「+」アイコンを選択します。また、画面上のタブからも新規作成が可能です。
![Frame 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752085/134329fd-7cae-44f8-0b02-238abafc6505.png)

:::note info
画面上のタブからオブジェクトを新規作成した場合は、DB,関連設計一覧画面に表示されません。その場合、「+」アイコンから「既存オブジェクトを追加」を選択し、作成したオブジェクトを移動させることで画面上に表示されるようになります。
:::

#### 2.DBの新規作成/編集
DBの基本設定や、フィールドの構成などを順に設定します。
DB作成後はフィールドの順番を並び替えられないので注意してください。（新規追加はできます）
![DB新規作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752085/9d20a50e-a606-9987-b13e-16beebf064c2.png)

:::note info
フィールド追加画面でタブ横の「リファレンス」リンクを選択すると、各種フィールドの詳細説明が記載されたPDFが展開されます。
![リファレンス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752085/5fe69947-7984-205e-b0b2-3f7e0678f194.png)
:::
:::note
「数字・記号・アルファベット(32bytes)」「整数」「簡易パスワード」フィールドでは値の自動生成が可能です。認証キーの自動発行などに使えます。
:::

以上でDBの作成は完了です。
DBの詳細設定やフィールド設定はDB一覧の歯車マークから変更できます。

#### 3.オブジェクトの新規作成/編集
DB,関連設計一覧から、作成した各DBに関連するオブジェクトを新規作成できます。
追加できる機能は下記画像の通りです。
![オブジェクトの種類.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752085/248e88f6-b003-e004-5758-4b77c03304a5.png)

各オブジェクトは新規作成後に詳細設定でさらに細かく機能を追加/編集することができます。

例えば下記の画面は「フォーム」オブジェクトの詳細画面です。
こちらではフォーム入力後の確認ページやサンクスメールなどを設定することができます。
![Frame 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752085/45e8da06-8c75-abed-02b8-28552ace67e7.png)


以上です。
作成したオブジェクトは上記画像内に表示されているURL先で確認することができます。


# ハマった箇所

個人的に詰まった部分を箇条書きで記載します。
どなたかの一助になれば幸いです。

- 「一覧表」オブジェクトの設定画面の表示について
「ページ編集」では、表示されるページ自体のスタイルを編集できます。
一覧表の「設定」では、一覧表自体のスタイルを編集できます。
一覧表を選択している状態だと、下の「検索フォーム・単票」エリアに関連する機能が表示されます。各々の設定で変更可能です。また、複数作成することも可能です。
![Frame 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752085/d73c8ca7-3309-8238-a6aa-d1fc901a9a08.png)
:::note info
抽出ルールを設定してから検索フォームを作成することで、抽出したデータを一覧表として表示することができます。これは複数個設定することができます。
:::

- サンクスメールの設定
「編集」ボタンからそれぞれ設定し、「追加」ボタンで新規追加できます。
 このメールの設定や更新は、アプリ管理画面上部のメールタブからも設定できます。（タブからメールの設定を新規登録した場合は、フォーム側の設定から追加登録する必要がある）
![サンクスメール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752085/4494336b-5609-bd23-526a-56c0878f39f9.png)

- 抽出ルールの抽出条件の設定
フィールド内の一項目を抽出条件に設定する場合は、「フィールド毎の抽出ルール設定」の編集から設定します。
![抽出ルール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752085/d25ddcf8-1490-5f79-4d6a-fac60bf3ad57.png)

# 作業工数の一例
全く仕様を理解していない状態から、アプリ完成までかかった時間です。
SPIRALの導入をお考えの際に、ひとつの目安にしていただければ幸いです。

作成したアプリについて詳しく明かすことはできませんが、DBを3つ使用した申込みフォームを作成しました。

- 仕様理解
　2ｈ
- DB1の作成・フォーム設定・一覧表作成
　5ｈ
- DB2の作成・一覧表作成
　5ｈ（※一覧表に抽出ルールを使用した際に詰まったため工数時間がかかりました）
- DB3の作成、マイエリア（ログイン画面）設定
　1.25ｈ
- 修正・追加の設定等
　4ｈ
- テスト・修正
　5ｈ


# 使用するうえでのメリット・デメリット
### メリット
- 時短になる。
　ゼロから始めるよりも早く作成できる。
- サポートサイトが充実している。
　各機能ごとに詳しく載っている。

### デメリット
- コードを直接触らないといけない箇所（単票機能の編集画面など）もあるので、HTML,CSSの基礎知識が場合により必要。
　ページ内のスタイルにこだわる場合も同様。
- UIがわかりにくい。
　サポートサイトを見れば解決するが、その分時間がかかる。


# おわりに

使用していくなかで、「なるべく早く、シンプルな画面で良いので実装したい」という場合に適切なツールだという印象を受けました。

この記事がどなたかの助けになれば幸いです。
ここまでお読みいただきありがとうございました。