Power Apps と AI Builder で日報、週報作成業務を効率化するアプリを爆速で開発する


# はじめに

日報や週報の作成に時間を割いている方もいると思います。
そのため、今回は、Power Apps と AI Builder を利用して、日報や週報の作成を効率化する方法を紹介します。

Power Apps のテーブル、アプリ自動作成機能を利用して、爆速で開発したいと思います。

まず、出来上がったアプリの紹介をします。機能の特徴は以下のような感じで日報、週報共に作成が効率化されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/928ced58-3513-02fa-7108-b336422fdf58.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/e5a88a35-494f-6610-5175-7c6eb369a18d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b5543be7-a4fc-6a13-2561-8034c490d02a.png)

それでは、こちらのアプリの作成方法について紹介します。

# データソースの作成

テーブルの作成は以下の機能を利用して自然言語ベースで作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/a36ea20f-69b1-a119-aa8c-238380af1fbc.png)

まず、日報を保存するテーブルです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/56b7f41f-bfb9-c57d-b380-4db04e9355aa.png)

次に週報を保存するテーブルを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/5bea830c-9a3f-0e96-4f94-fdb1d54385b3.png)

# 日報機能の作成

以下の機能でデータ (作成したテーブル) からアプリを自動作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/6477a160-4824-7f40-c762-576b46610770.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/4384725f-aede-dfee-4488-670e8a62ddb4.png)

こんな感じのレスポンシブ (サイズが臨機応変に変わる) なアプリが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/6df0a7c6-931b-4758-5f32-ba887364ac7a.png)

Outlook コネクタを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/fc3ded8f-01f6-05ed-7b3b-6082fee2ddac.png)

App の`[OnStart]`プロパティに以下のような処理を入れます。ちょっと長くなっていますが、要は、今日の Outlook の予定を取得して変数に格納しております。

```
Set(
        _myCalender,
        LookUp(
            Office365Outlook.CalendarGetTablesV2().value,
            name = "Calendar" Or name = "予定表"
        ).id
    ),
    Set(
        _startDate,
        DateAdd(
            DateTimeValue(
                Text(
                    Today(),
                    "yyyy/mm/dd hh:mm"
                )
            ),
            TimeZoneOffset(),
            TimeUnit.Minutes
        )
    ),
    Set(
        _endDate,
        DateAdd(
            DateTimeValue(
                Text(
                    DateAdd(
                        Today(),
                        24,
                        TimeUnit.Hours
                    ),
                    "yyyy/mm/dd hh:mm"
                )
            ),
            TimeZoneOffset(),
            TimeUnit.Minutes
        )
    ),
    // ===========================
    // カレンダー情報設定
    // ===========================
    Set(
        _dateSelected,
        Today()
    );
    Set(
        _firstDayOfMonth,
        DateAdd(
            Today(),
            1 - Day(Today()),
            TimeUnit.Days
        )
    );
    Set(
        _firstDayOfWeek,
        DateAdd(
            Today(),
            1 - Weekday(Today()),
            TimeUnit.Days
        )
    );
    
);
ClearCollect(
    colMyCalendarEvents,
    SortByColumns(
        Office365Outlook.GetEventsCalendarViewV3(
            _myCalender,
            Text(_startDate),
            Text(_endDate)
        ).value,
        "start"
    )
);
Set(
    gblCalendarData,
    ForAll(
        colMyCalendarEvents,
        Text(
            ThisRecord.startWithTimeZone,
            "hh:mm"
        ) & "-" & Text(
            ThisRecord.endWithTimeZone,
            "hh:mm"
        ) & "：" & ThisRecord.subject & Char(10)
    )
);
```

少し、フォームコントロールを修正し、日報の詳細を記載するコントロールの`[Default]`プロパティに以下のような処理を入れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c1af1d9e-24b3-84e6-fb1b-0a2b404abad6.png)


```
If(
    Form1.Mode = FormMode.Edit Or Form1.Mode = FormMode.View,
    Parent.Default,
    Coalesce(
        gblModifiedDailyReport,
        "<スケジュール>" & Char(10) & Concat(
            gblCalendarData,
            Value
        )
    )
)
```

これにより、Outlook のスケジュールが上記のような感じで自動で入ります。

次に、以下のような感じでボタンを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/97139a26-511f-3906-5d9e-5678e26b6f5d.png)

`[Visible]`プロパティを以下のようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/6fe880d5-508f-397d-82d9-3c414cdc038f.png)

AI 推敲ボタンを押した際の処理は以下のような感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/87f0c6a3-6184-b1e1-be04-308738404f7a.png)

送信ボタンの方はフォームコントロールに入力した内容を送信するだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c153da04-1356-3595-549d-61965b752a26.png)

Power Automate の方で、以下のように、Power Apps から受け取った日報情報を AI Builder の GPT 機能を使って推敲してもらいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/ca42d814-67db-bf99-b1ff-2c897c25f225.png)

こちらで日報機能の方は完成です。

# 週報機能の作成

週報機能の前に、以下のように、トップ画面を作ります。
それぞれのボタンを押した際に画面遷移しますが、週報機能は、登録されている日報ベースで自動で作成するためもう少し処理を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/5b9d65f7-0e00-cce6-d827-98787c7ac11e.png)

具体的には、以下のような処理を書きます。選択した日付をベースに日報テーブルから情報を取得し、そちらを文字列にして Power Automate に渡して戻り値を変数に格納する感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/00c274f6-21ee-5c1a-bf8c-4c7ca28f166d.png)

```
ClearCollect(
    colTempWeeklyReport,
    Filter(
        'Daily Reports',
        Date >= _firstDayOfWeek And Date <= DateAdd(
            _firstDayOfWeek,
            6
        )
    )
);
Set(
    gblTempWeeklyReportData,
    ForAll(
        colTempWeeklyReport,
        Date & Char(10) & Note & Char(10)
    )
);
Set(
    gblWeeklyReportData,
    AI週報作成フロー.Run(
        Concat(
            gblTempWeeklyReportData,
            Value
        )
    ).result
);
Navigate(WeeklyReportScreen);
NewForm(Form1_1);
Set(gblWeeklyReportNewMode,true);

```

また、DatePicker の`[OnChange]`にも処理を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/1d819c4f-2821-8423-576d-3bc66e7be41c.png)

```
Set(
        _dateSelected,
        Self.SelectedDate
    );
    Set(
        _firstDayOfMonth,
        DateAdd(
            _dateSelected,
            1 - Day(_dateSelected),
            TimeUnit.Days
        )
    );
    Set(
        _firstDayOfWeek,
        DateAdd(
            _dateSelected,
            1 - Weekday(_dateSelected),
            TimeUnit.Days
        )
    );
```

週報作成の画面についても、日報と同様の方法で作成し、コントロールをコピー＆ペーストで張り付け結合します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/46ddf492-ee83-1947-03cd-ef129bb6d326.png)

フォームコントロールを少し変更し、日報詳細部分の`[Default]`プロパティを以下のように変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b53234b0-7ceb-fc6e-8da2-f5988d061fb1.png)

その他に、画面遷移の関係もあり、`newMode` ローカル変数を全て `gblWeeklyReportNewMode` グローバル変数に置換します。

もしくは、スクリーンの`[OnVisible]`プロパティにて、`newMode` ローカル変数を true にするのでもいいかもしれません。
※後から気づきました。思ったより変更箇所あったのでこちらの方がいいかもです

週報を自動作成する Power Automate フローは以下のような感じです。フォーマットはその組織、部署にあった形に自由に変更ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b1e7cc66-fdf0-f15e-e3c2-f22fdbae4c3e.png)

実行してみた感じです。

いい感じに日報から週報を自動で作成してくれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c8407c53-18fc-e1e8-3dbb-738ce9bacf7c.png)

なお、レスポンシブなため、モバイルでも以下のような感じで動作します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/e2fb05e6-2825-28f9-5dbe-d05ff96c1dd2.png)

# まとめ

今回は、Power Apps と AI Builder で日報、週報作成業務を効率化するアプリを爆速で開発する方法を紹介しました。

なお、それぞれ、一旦テーブルに保存するようなアプリにしますが、Teams のチャネルなどに合わせて投稿することも簡単に出来ます。

日報、週報作成業務を効率化したい方は参考にしていただけると幸いです。