【de:code2018 AD46】コーディングレスなアプリ開発～業務アプリを1時間で～

de:code2018で参加したセッションの内容をまとめていこうと思います。

ちらほら一部のセッションの登壇者が資料をアップロードし始めていますが、基調講演も含む動画やセッション資料が後日公開されるようなので、それまでのつなぎだと思ってください。

もともと自社にフィードバックするために書き留めているだけなのですが、何かの参考になれば幸いです。

 OS問わずどのデバイスでも動くPowerAppsとMicrosoft Flowを使った経費精算アプリ作成のデモを含んだセッションです。

PowerAppsというものを私は今回このセッションで初めて知りました。開発者でなくても開発できるようコーディングレスでアプリ開発ができるようです。

今回の経費精算アプリの全体的なアーキテクチャはこのような感じです。

PowerAppsで画面を作っていきます。

データの格納はCommon Data Serviceを使用します。このDBはPowerApps上からエンティティを作成することが可能です。

レシートの読み取り機能(OCR)もあり、それはCognitive Serviceを使用しています。

乗り換え情報から金額情報を取得するために外部サービスも使用します。

FlowはOCRの部分と承認処理の部分で使用しています。

実際に作成する前に、このようにどんな画面が必要かを考えておくとスムーズです。

この辺りは普段アプリを作っている人からすればいつも通りって感じですね。

• スタート画面
• 登録画面
• 完成完了画面
• 一覧画面
• 詳細画面

最低限これだけあればどうにかなりそうですよね。

画面はこんな感じでデータソースとその中の項目を指定して画面上に部品を配置していきます。

この辺のやり方はOffice製品って感じがしますね。昔accessVBAで単票画面作っていたときとかこんな感じだったと思います。バージョンが2007だったと思うので、デザインは少しダサかったですが(笑)

項目に値をセットしたり、ボタンをタップしたときの処理などは、関数として仕込んでいきます。「fx」に関数を入れていく作業はとてもExcelぽい。開発者でも非開発者でもExcelに慣れている人にとっては慣れ親しんだものなので違和感が少なくて済みそうです。

レシート読み取り機能はこのようにMicrosoft FlowとCognitive Serviceを組み合わせてこのように処理してあげることで実現可能なようです。

モジュールの結合だったりモジュール間でのデータのやり取りって、以前なら自分で頑張ってゴリゴリ実装していましたが、今回はほぼブラウザをポチポチしているだけで終わってしまいました。

ちょっと予想外だったのは、このようなポップアップ画面。

これ実は、透過率50％のグレーの平面と透過率0%の白の平面を重ねてポップアップぽく見せているだけです。今までのコーディングをイメージしていると、この作り方に違和感あるのですが、でも動いているものを見るとうまく動いていて違和感ないんですよね。

https://powerapps.microsoft.com/ja-jp/communityplan/

コミュニティプランは無料で使用できるようです。

早速登録してみましたが、どうもgmail.comやoutlook.comなどでは登録できませんでした。

入力には職場のアドレスの入力を求められました。自社のO365アカウントは問題なかったです。O365ではない自社のメールアドレスでもサインアップコードが送られてきたのでそれでOKそうでした

セッション参加者にはサンプルコードや、この経費精算アプリの手順書が特典で配布されました。今度私も何か作ってみたいと思います。

追記：登壇者の吉田さんがウェビナーを開催するそうです。私の会社はお昼休みの時間帯なので受けてみようかと思います。

#PowerApps の無料ウェビナーを開催します。#decode18 のとは違い、ゆっくりと簡単なアプリの作り方を説明します。#o365jp #AzureJP #MSDyn365https://t.co/zCcvmzoclM pic.twitter.com/oAQQAw5sMi

— Taiki Yoshida (@TaikiYoshidaJP) May 25, 2018