大学の欠席届提出システムを電子化してみた

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

---

## はじめに
こんにちは！スパイラル株式会社インターン生です。
今回はローコード開発ツール「SPIRALver.1」を使って大学の欠席届提出システムを作ってみたのでご紹介します。
## こんな方に向けて書いてます
- ローコード開発ツール「SPIRALver.1」でどんなシステムが作れるのか知りたい方
## 背景
そもそもなぜこのシステムを作ろうと思ったかについて話したいと思います。先日とある理由で授業を欠席しなくてはならなくなって、HPで欠席の届け方について探してみたんです。すると、私の大学では欠席するとき大学のHPから欠席届をダウンロードして印刷し、それに必要事項を記入して、教員に提出しなければならないことが分かりました。
そのとき思ったんです。 **めんどくさい！！！** って。
ペーパーレス化やDXが叫ばれている時代に逆行していると思いませんか？？
そういった背景から、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/1faf173216741e6d5406&utm_content=link-middle&f000099824=https://qiita.com/SPIRAL_internship/items/1faf173216741e6d5406

---

## フロー図
今回のシステムのフロー図はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/4fb84712-7385-4694-b0f7-2353fc2fbfc2.png)

## 作り方
- アプリの作成
まずアプリを作成します。右上の＋ボタンをクリックし、新規作成をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/bc57a8ab-d910-4bab-8807-a00418fb7334.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/2d0f1aa0-c7a1-4903-9a0a-9483ed409808.png)

基本設定を行います。今回は名前を「欠席届提出フォーム」、タイトルを「spiral_test01」としました。設定が完了したら「新規作成」をクリックし、アプリの設定に移ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/15ecb19f-0163-4b6d-8e87-9c2c08c01457.png)

- DB
DBの設定を行います。
DB欄の＋ボタンをクリックし、「通常ＤＢ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/db247d0b-0c59-4442-a0de-558d7214e976.png)

基本設定を行い、「構成設定」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/aef8eb1e-84fb-4aa7-b030-3813d80abff3.png)

「>」ボタンをクリックすることで、フィールドを追加することができます。フィールド設定が完了したら、「新規作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/b686800f-b2d4-4bad-81e2-30bdd054709a.png)

今回のフィールド構成はこんな感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/381e6632-fd85-4b5f-83d7-766782ff090b.png)

「欠席理由」はマルチセレクトになっています。ラベル設定はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/05c90dec-2e9d-4206-86e1-a54162f9994e.png)

- フォーム設定
次にフォームを作成します。
欠席届DB欄の＋ボタンをクリックし、「フォーム」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/497981e5-737f-4b83-945a-6cb26720168c.png)

フォームの基本設定を行います。設定が完了したら「新規作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/82e01b0f-722b-4e01-b24f-177c757a03f4.png)

使用フィールドの設定を行います。今回は登録日時と問い合わせIDを自動取得するようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/d62863a9-da1c-4dc0-a67a-20925b9b6082.png)

次に入力ページの設定をします。デフォルトの設定ページはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/9dcc4ef3-fb0c-4df0-bd00-7dc8931cc615.png)

このままだと味気ないし、入力項目の順番も入力側にとって使いづらいものになっているため、ちょっと変えてみます。「ソースデザイン」を選択し、設置ソースを変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/bdb8d23b-78d1-4b12-8898-51b7fb8598dc.png)

変更後のページはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/39c81800-fb9b-4eec-86a9-4fd922b3f67c.png)

- 一覧表
最後に一覧表の設定を行います。
フォームと同様に欠席届DB欄の＋ボタンをクリックし、「一覧表」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/0cadd6a9-ca4d-4cf0-ab53-faddf385f026.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/83dadc83-07f2-4e0a-9896-c483356116bf.png)

「編集モードで作成する」にチェックをし、「新規作成」をクリックします。
作成された一覧表をクリックすると、一覧表・単票ページに遷移します。
一覧表・単票の詳しい設定方法は[こちらのページ]( https://support.smp.ne.jp/manuals/table_page/#2%e4%b8%80%e8%a6%a7%e8%a1%a8%e3%81%ae%e8%a8%ad%e5%ae%9a)をご覧ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/0d3200a1-8a33-49a2-bdb1-b5b7d83ace94.png)

「新しい一覧表」の「設定」をクリックしてください。
基本情報タブをクリックし、タイトルを変更しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/0b8c09f8-b031-4019-81b1-e3fe7f850921.png)

一覧表・単票ページの「ページ表示」をクリックするとプレビューが表示されます。
プレビューはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/c47b7fc7-6757-4891-8c19-1e2f839f0dc0.png)

これで欠席届提出フォームの作成は完了です。
では実際に使ってみたいと思います！
## 使ってみる
アプリ設定画面に戻り、「欠席届提出フォーム」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/2396603a-c804-4782-ab17-deb35df8f514.png)

トップページのURLをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/fc09d041-580b-479e-b4e0-f78f2bb9729a.png)

そうすると入力ページに遷移するので、入力していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/0cb0fa85-5731-4c5c-8e66-71dce4a2096f.png)

登録完了です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/6fc7f707-73e2-4fdb-8827-5ec95ea63753.png)

一覧表にもきちんと反映されています！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/e17dbcd0-86df-41c7-b83c-0ca46179cd76.png)

## 感想
プログラミングに関する知識が全くない私でも、簡単にシステムを作成することができました。大学にはぜひこのシステムを採用していただきたいです(笑)
## まとめ
今回は欠席届提出システムを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/1faf173216741e6d5406&utm_content=link-bottom&f000099824=https://qiita.com/SPIRAL_internship/items/1faf173216741e6d5406
 
そして、今チームでトライアル登録者向けに、オンボーディングコンテンツを作成しています。**SPIRAL ver.1**にご興味のある方、ぜひこちらもご覧ください

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