プログラミング初心者でもできた！三日で業務フォームを作成した話

https://www.pi-pe.co.jp/regist/is?SMPFORM=man-lanerf-2473a633d82734eb22aa64cad426ae23&utm_source=pup-qiita&utm_medium=contentlink&utm_campaign=/SPIRAL_internship/items/268b57b86bd8053df239&utm_content=link-top&f000099824=https://qiita.com/SPIRAL_internship/items/268b57b86bd8053df239

---
## 背景

業界未経験の機械専攻学生である私が、SPIRAL株式会社のインターン業務でいばらのフォーム作成に挑戦しました！ 
講義で習った程度のプログラミング知識しかなく、開発経験もほぼゼロ。「本当にできるのか？」という不安を抱えながらも、SPIRALというプラットフォームを使って挑戦することになりました。

SPIRALはノーコード・ローコードで業務システムを構築できるプラットフォームですが、実際に使ったことがない初心者にとってはハードルが高く感じました。そんな状態から、試行錯誤しながら3日で業務用のフォームを作成した体験を共有します。

## こんな方に向けて書いています

- 業界未経験で、開発業務を突然任された方
- SPIRALを使ってみたいが、難しそうと感じている方
- フォーム作成の流れを知りたい方
- 限られた時間で業務用システムを構築する必要がある方

## 何をして，どうなったのか

作成したフォームは、メールマガジンを購読したい利用者に向けた新規登録フォームです。新規利用者の個人情報をデータベースに登録するためのフォームにあたります。

### **1日目：SPIRALの基本を学ぶ**

まずはSPIRALの公式サイトやチュートリアル動画を見て、 **SPIRALの基本機能** や **フォームとは何か** を学びました。

**SPIRAL** には、

- データベースの作成
- フォームのデザイン
- 入力データの保存・管理
- 確認画面・完了画面の設定

といった機能が備わっていることを理解しました。

**フォーム** は、データを入力するための画面で、入力するデータに応じたフィールドを配置して作成します。使用するフィールドには、

- テキスト欄
- ドロップダウン
- ラジオボタン
- 日付
- メールアドレス

などが用意されてあり、要件に合わせて柔軟にフォームが作成できそうでした。

私が使用したSPIRAL® ver.1では、データを登録、更新、削除するマルチデバイス対応のフォームを作成できます。


---
▼開発に使用しているローコード開発プラットフォーム「SPIRAL」はここから体験できます！

https://www.pi-pe.co.jp/regist/is?SMPFORM=man-lanerf-2473a633d82734eb22aa64cad426ae23&utm_source=pup-qiita&utm_medium=contentlink&utm_campaign=/SPIRAL_internship/items/268b57b86bd8053df239&utm_content=link-middle&f000099824=https://qiita.com/SPIRAL_internship/items/268b57b86bd8053df239

---

### **2日目：業務仕様に合わせたフォームの作成**

実際の業務で必要とされるフォームの要件を理解し、SPIRAL上で設計を始めました。具体的には、

- 入力データを保存するデータベースの設計
- ユーザーが入力する項目の定義（氏名、メールアドレス、住所 など）
- フォーム送信後の確認画面・完了画面の作成
- 登録完了のメール配信の設定

を行いました。CGIなどのプログラムの知識は必要なく、画面操作だけで設定を行うことができて簡単でした！画面操作の様子を一部以下にて紹介します！

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/bfce9384-c553-4b8e-b519-081744e44f05.png)

図１．アプリ画面

上図の赤枠で囲まれた「＋」をクリックすると...

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/21fe1dec-fefd-4615-b880-6721b0873c04.png)
図２．オブジェクト選択

作成するオブジェクトの種類を選ぶことができます。今回はフォームを作成するので、赤枠の「フォーム」をクリックです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/8325ce74-58af-4ef7-9823-5e990b0bb363.png) 

図３．基本情報の登録
このページでフォームの名前や使用するデバイスの種類、タイプなどを決定して、「新規作成」をクリックします。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/e8140772-cebc-4d15-982b-a46067dfa8dc.png)

図４．使用フィールドの選択

どのフィールドを使用するか選択したり（右の赤枠）、確認ページや通知メールの設定（左の赤枠）を行ったりすると...

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/c76c8e67-d8e7-469e-80e5-4c36e62f2802.png)
図５．フォーム作成後のアプリ画面

**フォームができました！** 作成したフォームはブラウザ上で次のように表示されます！

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/d198ab4f-82f7-4dfd-ab3e-007b502c21fb.png)
図６．フォームのプレビュー画面

ここまで一切プログラミングの知識を使わずに辿り着きましたね！
簡単なフォームであれば、今回紹介したような操作だけで作成することができます。

実際に私が作成したフォームでは、カスタム設定やエラーチェックの部分で少し手こずりました。ですが、SPIRALのナレッジサイトやサポートサイトが非常に便利で、助けられながら進めることができました。

[SPAIRALのナレッジサイト(つまづきをキーワードで検索出来て超便利)](https://knowledge.spirers.jp/)
[SPIRAL® ver.1のサポートサイト](https://support.smp.ne.jp/)

### **3日目：動作確認と微調整**

フォームの基本機能が完成したので、実際に入力・送信テストを繰り返しながら、不具合やUIの調整を行いました。具体的には、

- 必須項目のチェックが正しく動作するか
- フォームのデザインが意図した通りになっているか
- データが正しく保存され、管理画面で閲覧できるか

といった点を確認しました。当時一緒に構築業務に取り組んでいた仲間や先輩の確認も交えて修正を繰り返し、無事に完成させることができました！

## まとめ

プログラミング経験がほぼない状態でも、SPIRALを活用すれば業務で使えるフォームを作成できることが分かりました。

最初は不安でしたが、

- SPIRALの基本を理解する
- まずはシンプルなフォームを作ってみる
- 試行錯誤しながら調整していく

という流れで進めることで、短期間で形にすることができました。

業界未経験の方や、SPIRALに興味がある方にとって、少しでも参考になれば幸いです！

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
私がインターンしているスパイラル株式会社は、ローコードプラットフォーム、SPIRAL ver.1の**トライアルアカウント**を**無償提供**しています。このアカウントの記事でも紹介するように、たくさんの機能ございます。
▶︎ フォーム
 ▶︎ 認証エリア
 ▶︎ ログイン
 ▶︎ メール送信
 ▶︎ カスタムプログラム
などの作成できますので、ぜひ試してみてください!!

https://www.pi-pe.co.jp/regist/is?SMPFORM=man-lanerf-2473a633d82734eb22aa64cad426ae23&utm_source=pup-qiita&utm_medium=contentlink&utm_campaign=/SPIRAL_internship/items/268b57b86bd8053df239&utm_content=link-bottom&f000099824=https://qiita.com/SPIRAL_internship/items/268b57b86bd8053df239

そして、今チームでトライアル登録者向けに、オンボーディングコンテンツを作成しています。**SPIRAL ver.1**にご興味のある方、ぜひこちらもご覧ください👇

https://knowledge.spirers.jp/special/detail/11680