ノーコードで申請承認システムを構築｜Platio Canvasで作る休暇申請アプリ（開発編）

本記事でわかること

• 申請・承認フローをアプリで再現するための設計ポイント
• データベース（テーブル・リレーション）の構成方法
• 画面作成からアクション設定までの実装ステップ
• メール通知やカレンダー表示の設定方法

休暇申請アプリとは、申請・承認フローをデジタル化し、社内の申請業務を効率化するワークフローアプリです。

はじめに

みなさん、こんにちは。マーケティング担当のタクミンです。

社内での休暇申請は、紙やメール、Excelなど、会社ごとにさまざまな方法で運用されていることが多いのではないでしょうか。一見シンプルな業務ですが、実際には申請・承認のやり取りに手間がかかり、管理もしづらいという声をよく聞きます。

例えば、こんな課題はありませんか？

• 申請方法が統一されておらず、やり取りが煩雑
• 承認状況が分からず、申請者が確認しづらい
• 承認者側も申請を見落としてしまうことがある
• 過去の申請履歴を後から確認しにくい

こうした課題を解決できないかと考え、今回Platio Canvas（プラティオ キャンバス）で「休暇申請アプリ」を作ってみました。申請・承認といった業務フローも、すべてノーコードで実装できるため、プログラミング経験がなくても作成可能です。目指したのは、社員がスマートフォンから簡単に休暇を申請でき、承認者も同じくスマートフォンなどのアプリ上で内容を確認・承認ができる仕組みです。
本記事では、Platio Canvasで休暇申請アプリを作成した流れやポイントを紹介します。

※Platio Canvas（プラティオ キャンバス）とは、エンタープライズ向けノーコードアプリ開発プラットフォームです。システム開発におけるスピード、柔軟性、セキュリティ、デザイン性を高次元で両立し、社内業務からBtoC向けのアプリ開発まで幅広く対応できるのが特長です。
Platio Canvasの製品詳細はこちら

休暇申請アプリの概要

今回作ってみたのは、業種業界問わず汎用的に活用できる「休暇申請アプリ」です。社員が休暇を申請し、承認者（上長など）がその内容を確認・承認するまでを、アプリ上で完結できることを目的としています。紙やメールでのやり取りをなくし、申請状況を分かりやすく管理できる仕組みを目指しました。

この休暇申請アプリでできること

• 社員がスマートフォンから休暇を申請
• 承認者が申請内容を一覧で確認
• アプリ上で承認・却下の操作が可能
• 承認された申請を後から確認できる

申請者と承認者でアプリ上での役割を分けることで、操作画面をシンプルにすることを意識しています。申請者は「申請する」「状況を確認する」、承認者は「確認して承認する」ことに専念できる構成です。汎用的な休暇申請フローをベースにしているため、業種を問わず導入イメージを持ちやすい点も、このアプリの特長です。

アプリ構成を考えたポイント

休暇申請アプリの構成を考えるうえで、最初に行ったのはアプリ上の役割を整理することでした。申請者と承認者では、行う操作も必要な情報も異なるため、「誰が・いつ・何をするのか」を先に明確にすることで、画面構成や項目設計がぐっと考えやすくなります。

まず整理したポイント

• 申請者が入力する必要がある情報は何か
  （休暇種別、日付、理由など）
• 承認者が判断するために必要な情報は何か
  （申請内容、申請者、申請日時など）
• 申請状況（申請中／承認済み／却下）が一目で分かるか

画面構成は、役割ごとに目的を明確に分けています。

基本的な画面構成

• 休暇申請の入力画面（申請者向け）
  – 申請内容の確認
• 申請内容の一覧・詳細画面（承認者向け）
• 承認済み申請の確認画面

Platio Canvasは後から項目や画面を追加・変更しやすいため、最初から細かく作り込みすぎず、まずは基本の申請・承認フローを作ることを優先しました。運用しながら改善していく前提で設計することで、実務に合ったアプリに育てやすくなります。

実際の開発手順（Platio Canvasでの作り方）

ここから実際に、Platio Canvasを使って休暇申請アプリを作っていきます。

今回は、以下の3stepでアプリ開発を行いました。

• 1.データベースの準備
• 2.アプリ画面の準備
• 3.画面遷移などのアクション設定

まずは、アプリの裏側となるデータの仕組み（データベース）を準備していきます。

1.データベースの準備

はじめに、Platio Canvasにおけるデータベース内の用語の確認をします。

休暇申請アプリでは、4つのテーブルを準備しました。

---

Users（デフォルトで用意されているテーブル）

デフォルトで設定されている「メールアドレス」「パスワード」「ユーザーネーム」「フルネーム」の他に「承認者」のリレーションを追加しました。ユーザーの休暇申請を誰が承認するのか、各ユーザーに対して承認者のレコードを紐づけています。

---

休暇申請

休暇申請をする際に必要となる情報を整理しました。テキストの項目は「申請者氏名」「メールアドレス」「申請理由」、日付の項目「申請日」を追加し、「申請種類」と「承認者」はリレーションで他テーブルと紐づけています。さらに、申請が承認済み／未承認かを判断するための「スイッチ」項目を追加しました。

---

休暇申請種類

休暇申請種類のテーブルには、休暇申請時に必要な選択肢として、「休暇種類」のテキスト項目を追加しています。また、休暇申請のテーブルにリレーションされているため、それぞれの休暇の種類に対して何件の申請（レコード）があるかが表示されます。

---

承認者

承認者のテーブルには、「所属部署」「メールアドレス」「承認者氏名」のテキストを追加しました。また「休暇申請」と「Users」テーブルにリレーションされているため、それぞれ承認者となっている休暇申請が何件あるか、承認の操作は必要な対象メンバーが何人いるかがカウントされます。

2. アプリ画面の準備

ここから、アプリ画面に機能を実装していきます。

---

2.1 ホーム画面

Platio Canvasで新規アプリを作成すると、「ホーム」というアプリ画面が用意されます。この画面を起点にアプリを作成します。左側のエレメントパネルから配置したいエレメントをドラッグ＆ドロップで、ホーム画面内に配置します。

今回は、「休暇申請」をするページへの「ボタン」、「申請承認」をするページへの「ボタン」、現在承認済みの休暇が確認できる「カレンダー」のエレメントをそれぞれ配置しました。また、適宜「テキスト」エレメントを配置し、右パネルからテキスト内容などを編集します。

---

2.2 休暇申請画面

続いて、新規ページを追加し、「休暇申請」用の画面を作成します。上部に「カレンダー」エレメント、下部にインプット＞「フォーム」エレメントを配置しました。

「フォーム」エレメントには休暇申請の情報を入力します。右パネルのフォーム＞「データを選択してください」のプルダウンから、「休暇申請」のテーブルを選択します。すると下部にテーブルの「項目」が表示されます。休暇申請をする際、アプリ利用者に直接入力させる項目として、今回は「申請日（日付）」「申請理由」「休暇種類（プルダウンから選択式）」の3つに絞りました。その他の「申請者氏名」や「メールアドレス」などは、Usersテーブルで登録されている情報と基本的に同じなため、「自動入力項目」からそれぞれ追加します。

---

2.3 申請内容の確認/申請完了画面

次に、申請する内容を確認する画面を作成します。新規ページを追加し、「テキスト」や「シェイプ」エレメントを組み合わせて、申請する内容が表示されるように画面を構成します。

「テキスト」エレメントには、申請する内容が表示されるようにそれぞれ変数を設定します。
続いて、「この内容で申請する」ボタンをクリックすると表示される「申請完了」のモーダルを新規で作成します。

「ページを追加する」からモーダルを選択し、追加します。既に設定されている「テキスト」エレメント等を編集します。

これで、申請者側の一連の流れをアプリ画面に構築できました。

---

2.4 申請承認画面

続いて、承認者が申請を承認する画面を作成します。

左パネルからアウトプット＞「カスタム」エレメントを配置し、「テキスト」「シェイプ」などを活用し、リスト内に承認時に必要な情報が表示されるように構成します。また、「スイッチ」をオンにしたらそれぞれの休暇申請が承認される仕組みにするため、リスト内に「スイッチ」エレメントも配置しました。
これで休暇申請アプリの全ての画面の準備が完了しました。

3. アクション設定と最終調整

最後に、画面遷移などのアクションの設定を行います。今回は以下のアクションや設定について紹介します。

• 3.1 メール送信
• 3.2 データベース「休暇申請テーブル」のレコード更新
• 3.3 カレンダーの表示設定

---

3.1 メール送信

今回は、休暇申請アプリ内の2か所にメール送信のアクションを設定しました。1つ目は承認者に対し、承認する必要がある休暇申請がされた時。2つ目は、申請者に対し、休暇申請が承認された時です。
休暇申請を送信するボタンエレメントを選択した状態で、右パネルの「アクション」タブからアクションを追加＞その他＞メール送信を選びます。

追加された「メール送信」のアクションを開き、送信先のメールアドレス、件名、内容などを設定していきます。
メールアドレスには、申請者それぞれの承認者（例：所属部署の上長）のメールアドレスになるように変数を設定します。枠の下にある「変数を追加」を選択し、「Current休暇申請（現在、休暇申請したレコード）」＞「承認者」＞「承認者メールアドレス」を選択します。この設定をすることで、申請したレコードに紐づいている承認者のメールアドレスが宛先に設定されます。

件名や内容についても、変数を活用し文面を作成し、設定します。

これで、「休暇申請を送信する」ボタンを押下すると、承認者に対しメールが送信されます。

メール文 イメージ

さらに、上記の流れと同様に承認者が承認画面でスイッチをオンにしたときにもメール送信のアクションを追加しました。

---

3.2 データベース「休暇申請テーブル」のレコード更新

申請されたレコードの「承認済み」というスイッチ項目をオンにするために「レコードの更新」のアクションを追加します。

承認画面のカスタムリスト内に配置した「スイッチ」エレメントを選択すると、右パネルのアクションタブに「スイッチONのアクション」が表示されるので、そこから詳細を設定していきます。
「スイッチONのアクション」を開き、アクションを追加します。更新＞「Current 休暇申請」を選択します。

「休暇申請更新」というアクションが追加されるので、詳細を開き更新したいレコードの項目を設定します。今回は、「承認済み」の項目を「True」に更新されるように設定しました。

これで、アプリの承認画面上でスイッチをONにすると、レコードが承認済みに更新されるようになりました。

---

3.3 カレンダーの表示設定

アプリ画面に配置したカレンダーに承認された休暇が表示されるように設定をします。

アプリ画面 カレンダー内の表示イメージ

カレンダーエレメントを選択し、右パネルのエレメントタブから設定します。今回は休暇申請テーブルの中で、ログインしているユーザーの承認済みのレコードを表示させます。表示するデータには「休暇申請」を選択し、その下の「フィルター」で条件を設定します。「承認済み」が「はい」、「メールアドレス」と「Logged in User＞メールアドレス」が「等しい」のカスタムフィルターを設定します。さらに下部にあるイベント開始日/終了日に「申請日」の変数を追加します。これで、自身が申請した承認済みの休暇のみがカレンダーに表示されるようになります。

さらに、右パネル＞エレメントの下部にある要素設定の「予定表ビュー」の詳細を設定することで、カレンダーに表示されているイベントをクリックしたときに開かれる予定表の内容を変更することができます。今回はタイトルに休暇の種類、サブタイトルに休暇の理由を設定しました。

これで今回作成した休暇申請アプリの全体的な設定は完了しました。実際の設定内容は会社ごとの運用や要件によって異なるかと思いますが、Platio Canvasはノーコードで修正や調整がしやすいため、まずは動く形を作り、使いながら改善していく進め方がおすすめです。

まとめ：開発して感じたこと

実際に休暇申請アプリを作ってみて感じたのは、業務で使う申請・承認の流れを、思っていた以上にスムーズにアプリとして組み立てられたという点です。複雑そうに見える承認フローも、画面と操作を一つずつ整理していくことで、無理なく形にすることができました。

作ってみた正直な感想

• プログラミングなしでも、申請から承認までの流れを構築できた
• 必要な項目を整理すれば、設計で大きく迷うことはなかった
• 後から項目や表示を調整できるため、試しながら進めやすい

最初から完璧を目指す必要はなく、「まず動くものを作って改善する」という進め方が現実的だと感じました。Platio Canvasの無料トライアルで、ぜひ実際の操作感を試しながら、アプリ作成の第一歩を踏み出してみてください。
Platio Canvasの無料トライアルはこちら

次回（後編）は、今回作成した休暇申請アプリの実際の操作感や運用時のポイントを紹介します。