ほぼプログラミング無しでいい感じのアプリを作れるPower Appsというものを使ってみる

# 参加イベント
こちらのイベントに参加しました。Power Appsはどんなものかほとんど知らなかったのですが、概要だけ見て面白そうと思い参加しました。

https://benkyoenkai.connpass.com/event/293243/

## Power Appsとは

PowerAppsとは、Microsoftが提供するノーコード・ローコードの業務アプリ開発ツールです。サブスクリプションサービスであるMicrosoft 365に含まれているアプリで、ドラッグ＆ドロップで簡単に業務アプリを作成することができます。
**※参考**

https://www.rpa-roboffice.jp/column/powerapps%E3%81%A8%E3%81%AF/#:~:text=PowerApps%E3%81%AF%E3%80%81Microsoft%E3%81%8C%E6%8F%90%E4%BE%9B,%E6%A5%AD%E5%8B%99%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%99%E3%80%82

- 後ほど紹介しますが、手書きの画像をアップロードするだけで、その通りにフォームを含むアプリが作れたりします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/6d364a78-2d21-150c-8b80-3a0c5596931e.png)


# PowerFx
イベントで使われた開発言語で、EXCELの関数のようなローコード開発言語とのことです。
公式ドキュメントもありますが、こちらの記事は実装イメージもあって分かりやすかったです。

https://qiita.com/spumoni/items/397ef6d28ae2057ddb5d


# 業務システムの設計ツールについて
イベントでは、Power Appsの紹介の前に別のツールの紹介がありました。
「時間が余ったのでせっかくだし！」という感じで始まりました。

## ツール一覧
- こちらにツールについての紹介があります。時代を感じるサイトになっています。
http://dbc.in.coocan.jp/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/ad1af1d7-aa4a-2e48-f42e-1f0b9071f592.png)

## ツールについて
X-TEA ModelerやX-TEADriverで動くコンセプトウェアを無料で公開されている。
「データモデルの方法論とか世の中にいっぱいあるが、実際に動くシステムを提示できておらず、それだと一部分の方法が分かってもシステム全体になったときに本当に使えるかどうかははっきりは分からずシステムを作っているよね？？」というセリフから紹介が始まった。

- ツールのアピールポイント
> X-TEA Driver向けに、卸売業向け販売管理システムや組立製造業向けの生産管理システムが実装され、無償公開されています。「プログラムコード」よりもはるかに理解しやすい「仕様書」の様式で、業務システムの仕様を維持・管理する――その快適さをそれらのシステムを使って実感してください。


- ツールのアピールポイント2
> 仕様書をいいかげんに書くと、イメージどおりのプログラムを作ってもらえない。かといって、懇切丁寧に書いていたら、自分でいきなりプログラミングしたほうがよほど早いと思えてしまう。とはいえ、仕様書がなければシステムの仕様がブラックボックス化してしまう。
システム開発につきまとうこのジレンマは、ExcelやWordの上で汗水流して書かれる仕様書が、人間にしかわからない（ときには人間にさえわからない）ゆえに生じています。どうせ書かねばいけないのであれば、人間にも機械にもわかるような仕様書、つまり「そのまま実行可能な仕様書」を書けばいいだけの話です。
そんなことが可能になるのはずっと未来の話と思われますか？いいえ、X-TEA Driverによってすでに実現されています。

- 上記引用

http://dbc.in.coocan.jp/xeadDriver.html


# 事例とツールを使い始めるまでの流れ

例えば、例えば病院の看護師のシフトを組む際に、AさんとBさんが一緒に日にしてはいけないみたいな制約事項を入れながらシフト管理を自動で行う仕掛けや、ワクチン接種管理などのサンプルがある。

以下に上記を含めた事例一覧があるが、これらの中から好きなものを選択したら、X-TEA ModelerやX-TEADriverで動くファイルがダウンロードでき、自由に見ることができる。

http://dbc.in.coocan.jp/referenceModel.html



# ツールを開くまでの流れ
### javaを入れる
Java8～11(1.8.*～1.11.*)が必要

### モデラーを入れる
- 以下からzipをダウンロードして、解凍して、中のインストーラーを実行。ショートカットをデスクトップに作成するよう進める

http://dbc.in.coocan.jp/ShiftKanriDownload.html

### ドライバーを入れる
- 以下からzipをダウンロードして、解凍して、中のインストーラーを実行。ショートカットをデスクトップに作成するよう進める

http://dbc.in.coocan.jp/xeadDriverDownload.html

### ローカルにダウンロードされたファイルの確認
「C:\Program Files (x86)\XTEA\Driver」に色々追加された。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/6bb1b129-ec5f-37c2-2fd2-2f718e7d93fc.png)


### 好きなモデルを入れる
- ここから、好きなモデルをダウンロード

http://dbc.in.coocan.jp/referenceModel.html

※本来はここからスケルトンをコピーして新しいシステム定義を作成するが、今回はサンプルを利用
> C:\Program Files (x86)\XTEA\Driver\Skeleton

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/cedd4b64-858d-bdab-120b-bcc72be73393.png)


### DB開始
- デスクトップにこのように追加されたので、DB開始を管理者で実行
※管理者で開かないとDB接続エラーになるので注意

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/54a51680-d216-6ed6-661a-6bab7cddda13.png)


### モデルを開く
- ダウンロードした以下の拡張子が「xeaf」のファイルをダブルクリックで開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/e4ab6b9f-e98b-4484-aea6-2192edf81737.png)

- すると、X-TEA Editorが開かれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/9ab15341-a581-98ab-95ad-26107709ba6c.png)

- X-TEA Edotorを開いている状態でF5を押すと、X-TEA Driverが開かれ、以下のように表示された。「システム変数一覧・保守」を選択してみたら、このように表示された。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/bc83cbc7-b19e-eca1-724d-ad249f4258ab.png)


## ツールを使ってみる
- X-TEA Driverのメインメニューにて、「システムの平準化処理」を選択したら、このような表示になるので、「スタート」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/e369ddfa-49d6-a7e4-af43-ef760a8adc92.png)


- DB内容的に2020/11を指定した。(2023年のデータは無いので)。これで「OK」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/fa6473d6-b751-107d-2ce2-bcf846f14b0f.png)



- 上記の状態から、「Enter」を押すと、処理が始まる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/df9ddcb4-32b9-c8d2-fe2b-a7723592d387.png)


- またメインメニューから、「シフト申請の一覧・保守」を選択すると、名前一覧が表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/b1958542-22ed-0792-938b-23788d12ed78.png)



- 誰かを選択しダブルクリックすると、その人のシフト一覧が表示される。今回は蘇我入鹿を指定。すると、その人のシフトが作成されていた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/057e0925-586f-b3ff-80df-d6b3526b9b1a.png)


- 他にも様々なデータが確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/48f77a58-8d1e-0fe2-e874-51357f5ade74.png)


- さらっと紹介されたものだったので、今回は自分で使ってみるまでをやってみた。

- 今回はサンプルを動かしたが、簡単なデータモデルの作り方はここで紹介されていた。

https://youtu.be/FkV0nSek_3w?si=swFGvbJsXwDFpJic

- 解説ページに大きく紹介されているデータモデリング例とかもある。
https://sites.google.com/benkyoenkai.org/82nd/01-ERD



# Power Appsを使ってみる。
- お待たせしました。上記のツール紹介の後にPoser Appsの紹介をしていただいたので、同じ流れにしています。
- ここにアクセスする。microsoftのアカウントを使ってサインイン
https://make.powerapps.com/

- このような画面になる。
※黒い部分が本名が表示されたため、、、笑

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/c1b2387e-9e89-d3fd-35f7-b806895c2380.png)

- 上記のスクショの左側にメニューがありますが、「ソリューション」は、もし在庫管理アプリを作るとしたら、これから作るアプリの在庫の状態を管理するのに必要で、この中に画面だったりアプリそのもののデータとかあらゆるデータを1つに詰め込むイメージ

- データベースに関しては、スプレッドシートからも追加できるみたい。

https://www.qes.co.jp/media/PowerApps/a117

## プログラミング無しに様々なものが追加可能
- アプリ追加
    - アプリの構築方法が選べる
        - https://www.isi-grp.co.jp/powerplatform/usage/about-canvas-vs-model
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/5ff0c2cd-3077-af47-cef9-eb1bac282d7a.png)

    - 「キャンバスアプリ」「モデル駆動型アプリ」の構築方法の違いはこちらが分かりやすい。
https://www.isi-grp.co.jp/powerplatform/usage/about-canvas-vs-model


- ダッシュボード
    - 「読みやすいチャートとグラフの集まりで構成され、フィルタ―処理されたアプリデータを視覚的に表現します」とのこと。データベース的なテーブルとデータも定義できるので、そのデータを基に綺麗なグラフとか表示できる。
        - https://learn.microsoft.com/ja-jp/power-apps/user/track-your-progress-with-dashboard-and-charts

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/779f7b55-6850-1e1c-2821-49bd7064c71a.png)

- テーブル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/7f17acb5-383c-83e5-693e-2d147a6b739f.png)

- ※その他、チャットボットを埋め込んだりできる。

- ハンズオンでみんなが一緒に作成したものはそのまま載せるとネタバレになってしまうので載せることができませんが、実はクォリティーの高いテンプレートがある。

## 面白いアプリ開発開始機能

- Power Appsのトップ画面から、「作成」をクリックすると、以下のような画面が出てくる。いろいろ気になるものが出てくるが、その中でも面白いのが、「画像」。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/9c63f83b-f5d3-b607-744f-c20d0d6f7b7a.png)

- 手書きのフォームの画像をアップロードするだけで、手書きに書いている仕様・部品のアプリが作成できるらしい。この機能、結構前にTwitterで見たことあるような。。。？という感じだが、powerAppsの機能だったんだなと。これ使ってみたが、精度はちょっと微妙かもしれない。僕が画伯すぎた？？字と絵がうまい人はチャレンジしてみてください(投げやり)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/8c246231-dfa9-de58-54cd-36c5159feff5.png)


## 便利なテンプレート
- 様々なクォリティの高いテンプレートが多く用意されていて、以下のようなものを含めて30個以上用意されている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/fb5b8ddd-3e01-de8b-72e1-797ff0f95b95.png)



- テンプレートの中の1つを見てみる。翻訳かけているので一部変な日本語がありますが、このような休暇申請システムのテンプレートが用意されていて、そこから好きなようにいじって自由にオリジナルのアプリが作れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/3c9b13fb-15cb-c551-ea35-6f0338c486ed.png)

- キャンバスアプリである休暇申請のテンプレートを開いてみたら、画面ごとの全てのUI情報が見れて自由にいじれることが分かった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/87b5399d-71b9-6ecc-ca33-b05148a70929.png)

- 右上のほうの再生ボタンでアプリ起動。実際にすぐ動くアプリがある状態から作れるのは便利。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662049/7198bb8d-a359-6d25-d481-14bb07322212.png)



# 感想
- 名前すら聞いたことがないツールがいっぱい出てきましたが、開発以外のこういう便利なツールもあるんだなぁと知ることができてよかったなと思いました(小並感)
- 本格的な開発を行うとかではなく、ちょっとした社内アプリをコストをあまりかけずにすぐに作りたいときに便利だと思いました。