Power Apps スマホ用の簡単アプリをノンプログラミンで作成

はじめに

Office365 の中には、スマホやタブレット用に簡単にアプリを作成する Power Apps というサービスがあります。
これを使って、スマホ用のアプリ作成をしてみたいと思います。

マイクロソフトのクラウドには Office365 と違って、もう一つ Azure というものがあります。この中に SQL Server があり、その中にサイバーBBの社内システムがあります。その中の得意先マスタ(TM_TOK)と接続して、Power Apps から新規登録やデータの修正、問合せができるようにしたいと思います。

ここのページでは、プログラミンが一切無い状態でのアプリ開発です。
データは、Azure 以外でも他社製品のクラウドなども使えますので是非、挑戦されてみて下さい。

Power Apps のアプリ作成画面を開く

WEBブラウザの URL 欄で、web.powerapps.com をコピペして貼り付け Enter キーを押すと、アカウントの選択画面がでてきます。そこで契約しているアカウントを選択すると Power Apps の web.powerapps.com 画面が開きます。

Power Apps と Azure SQL Server 内の得意先マスタとを接続する。 

今度は、左側の「アプリ」をクリックして、「+新しいアプリ」からスマホ用のアプリ作成なので「キャンバス」をクリックして下さい。再度、アカウントを聞いてきたら指定のアカウントを選択して下さい。

下図が表示されましたら、「SQL Server 携帯電話レイアウト」をクリックして下さい。

左側のリストから「SQLServer 」を探し出してからクリックして下さい。
下図の右側の画面が表示されます。

  • クラウド Azure の場合は、「直接接続(クラウドサービス)」を選択して下さい。 
  • SQL サーバー名:****.database.windows.net
  • SQL データベース名:SKYDAT
  • ユーザー名:hiroyuki
  • パスワード:********

Azure の 設定状況を確認して入力して下さい。

テーブルの選択欄で、得意先マスタのテーブルを検索して選択して下記の「接続」をクリックします。

Power apps が、しばらく処理を行い下図のような PowerApps Studio の画面を開きます。

中央の画面で、得意先の一覧の一部が表示されています。会社名は表示されていません。住所のみが表示されている状態です。これからここのリスト画面が正常に表示されるようにカスタマイズを行います。

これまで分を保存します。

上部に表示されている「ファイル」をクリックします。

「設定」状態になり、アイコンや背景色、さらに画面のサイズなど色々とあります。
ここでは、「名前をつけて保存」を選択します。

「クラウド」のまま、名前を付けて、「保存」で終わります。又、このサイトを「お気に入り」に保存しておくと次に作業をする時に便利です。

「お気に入り」から開発の続きを行います。

「アプリ」から、社内システム得意先マスタ (Azure SQL ) を、そのままクリックするとアプリが起動します。
アプリを選択してから「編集」をクリックして下さい。

PowerApps Studio 画面の説明

上部から「ツールバー」、その下が、「プロパティのドロップダウンリスト」と「数式入力エリア」
その下が、左から「ナビケーション」画面、「作業」画面、「プロパティ設定」画面となっています。

「ナビケーション」画面で BrowsScreen1 から BrowseGallery1 、Rectangle11、SearchIcon1、TextSearchBox1 とクリックしてゆくと「作業」画面でそれぞれに該当する部分のコントロールが確認できます。これはこれからアプリを完成して行く上で必要な事です。
又、同じく「プロパティ設定」画面や、「数式入力エリア」の値も変わって表示されるのが確認できます。

ツールバー

「ファイル」の「ホーム」「挿入」「ビュー」「アクション」をクリックする事により下図のように内容が変わります。
新しい画面の作成やデータベースの接続などに利用します。

プロパティのドロップダウンリスト

 ▽をクリックすると下図のようにプロパティが表示されます。又、数式入力エリアの内容も連動し変わります。
これは、ナビケーション画面でコントロールを選択している内容によってドロップダウンリストの内容は変わってきます。

主に default、Items、OnSelect、Fill などが表示されます。

数式入力エリア

「作業画面」でスマホの + をクリックすると「ナビケート画面」では IconNewItem1 が選択され「数式入力エリア」には

NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None) が表示されます。これについては後で説明致します。

ナビケーション画面

3 つの画面として BrowsScreen1、DetailScreen1、EditScreen1 があります。
▷ をクリックすると中に含まれる詳細が表示され ▽ になります。これを更にクリックすると縮小され現在のようになります。

アプリを実行した場合

  • BrowsScreen1 (閲覧画面)
    既定で表示されます。データの並べ替え、フィルター、更新ができます。
    + を選択して、データの追加が行えます。
  • DetailScreen1  (詳細画面)
    閲覧画面から > をクリックして表示される画面です。一つの項目に関して登録されているすべての項目と情報が表示されます。
    鉛筆アイコンで編集画面へ、ゴミ箱アイコンでデータの削除が行えます。
  • EditScreen1    (編集/作成画面)
    表示されている項目の編集が行えます。
    ×アイコンで編集画面を閉じ、レアイコンで保存を行います。

 となるように必要な項目名がキチンと表示されて入力が出来、アイコンもキチンと動作するようにこれからカスタマイズをして行きます。

閲覧画面のコントロールをカスタマイズします。

閲覧画面には目的として、会社名、担当者、電話番号 がリストとして表示されて欲しいとします。

  • Title1:現在空白で、「数式入力エリア」に TOKAD1 と表示されています。これはサイバーBBの得意先マスタでは住所になっています。ここに会社名に変更をします。
  • Subtitle1:現在、空白です。ここに担当者名を表示するようにします。
  • Body1:現在、空白です。ここに電話番号を表示するようにします。

サイバーBBでは会社名のフィールド名を TOKKSM と言う名前にしていますので、TOKK まで入力すると下に候補分がリストとして表示されます。ここで TOKKSM を選択して頂けば、閲覧画面の Title1 の空白欄に全て会社名が表示されるようになります。

同じように Subtitle1、Body1 にも担当者名、電話番号のフィールドを設定して下さい。

会社名、担当者、電話番号の表示ができるようになりました。
下図の … から Title、Subtitle1、Body1 の名前を、会社名、担当者、電話番号などの名前に変更する事もできます。ただ、複雑なアプリを作ろうと思った時、漢字表示の名前が良いかどうか?又、変更するかしない方がいいかは沢山のアプリを作って行かないと分からないです。

詳細画面のカスタマイズをします。

「詳細画面」とは、上図の「閲覧画面」の > をクリックした時に表示される画面です。
画面右側に、ゴミ箱と鉛筆のアイコンが表示されています。選択されたデータの削除や編集を行う画面です。

DetailScreen1(詳細画面)
 DetaukForm1(詳細画面の上の青い部分の下のデータエリア)
  TKCCHK_DataCard1(サイバーBBの項目名(フィールド)ここは変更します。)
   DatacardValue1(項目名に対する入力されたデータ部分を表示するエリア)
   DataCardKey1(項目名を表示するエリア)

現時点では、表示したい項目名が表示されてなく一般的で無いフィールドが表示されています。
よって、大幅に変更したいと思います。

不要な項目をクリックして [Delete] キーですべて削除します。
ここでは全ての項目名を削除になります。

右側にある。「フィールドの編集」をクリックします。

「フィールド」ウインドウが開きます。その中にある。「+フィールドの追加」をクリックすると更に「フィールドの選択」画面が表示されます。

「フィールドの選択」から必要なフィールドを選択し「追加」ボタンをクリックします。

フィールド名の前にある △ 印を全て ▽ にして全てのフィールド名がわかるようにします。
各フィールド名の右側にある … をクリックして矢印の↑↓を使って、コード番号、会社名、担当名前、など上から順に並べ替えなどが行われるようになっています。又、ドラッグでも移動できます。

△ にして、コントロールの種類の設定ができます。
テキスト表示、電話の表示、メールの表示、リッチテキストの表示から選択出来ます。

「詳細画面」から TOKYKS を選択し、「プロパティ画面」の 鍵 をクリックしてロックを解除します。すると、DisplayName 欄が編集できるようになりますので ”TOKYKS” を “役職” に変更します。
このようにして全ての項目名を漢字名に変更します。

下図のように項目名が順番に表示されます。又、データが入力されている欄ではデータも表示されます。

編集/作成画面をカスタマイズします。

ここでは、新規登録や既に登録されている得意先データの編集を行う画面です。

ナビケーション画面の「編集/作成画面」の EditScreen1 の EditForm1 をクリックします。
開いてみると DetailScreen1(詳細画面)で設定した必要な項目名は表示されません。ここでも新たに設定が必要なようです。よってここでも一旦全ての項目を削除してから設定を行います。

削除は、EditForm1 の中のコントロールを 1個づつ選択してキーボードの Delete キーで削除します。

全て消したら、DetailScreen1 をクリックして自分が必要な項目をクリップボードにコピーしてペイントに貼り付けておいて下さい。

プロパティ設定画面にある「フィールドの編集」をクリックして、フィールドウインドウを表示し「+フィールドの追加」をクリックして下さい。必要なフィールドの左側の□をクリックするとチェックが付きます。必要なフィードを全て選択して下さい。選択したら × で閉じます。

選択したフィールド表示されます。
▽ の状態から △ の状態にして、フィールド全体が見やすいようにし上から下まで項目名をドラッグして必要に応じて並べ替えて下さい。

フィールドによって項目の設定が下記のように出来ます。▽ の状態にして設定して下さい。 

  • テキストの表示と編集
  • 電話の表示
  • メール
  • 複数行のテキスト
  • 許可値
  • リッチテキストの表示と編集

下図の手順でフィールドの項目名を漢字表現に変更します。

  • TOKCOD_DataCard2 をクリックする。
  • プロパティ設定画面で「詳細設定」をクリックする
  • 「鍵」をクリックしてロックを解除する。
  • DisplayName 欄で TOKCOD となっている部分を 得意先コード と漢字名に変更する。

フィールド名を漢字にするとこんな感じになります。

その他のカスタマイズを行います。

アプリのタイトル名を変更します。

EditScreen1 の LblAppName3 をクリックしてプロパティ設定画面の「テキスト」欄を「得意先(社内システム)」のように名前付を行います。

それぞれの画面でアプリ名の変更が必要です。

「得意先(閲覧)」画面
「得意先(詳細)」画面
「得意先(編集/作成)」画面 の方がわかりやすいかも知れませんね。

アプリの実行です。

アプリ開発中でも、いつでも実行して確認する事が出来ます。
矢印の ▷ をクリックする事により出来ます。それぞれのアイコンも自由に動作を確認出来ます。

実際にスマホで使えるようにするには

上記の画面から上段の「ファイル」「名前を付けて保存」で下記の画面が表示されます。

マイアプリ欄に表示される「社内システム得意先マスタ(Azure SQL)」とクリックして「保存」をクリックして下さい。

「保存」をクリックします。

「発行」をクリックする。

「このバージョンの発行」をクリックする。その後「共有」をクリックする。

このアプリを共有する人のメールアドレスを入力して追加を行います。追加が完了したら画面下の「キャンセル」でこの画面を終わります。

スマホでアプリを起動する。

  • iPhone を使っていますので「App Store」を開きます。
  • 虫メガネで Power apps と入力して、アプリを検索し、ダウンロードして下さい。
  • 「アプリを開き、勤務先か学校の電子メール アカウントでサインインする」欄でアカウントを入力してください。次にパスワードを入力してます。
  • 「社内システム得意先マスタ(Azure SQL)」が表示されます。クリックして起動して下さい。

    以上でこのページを終わります。

次のページで若干のプログラミングをしたりした解説ページにしたいと思います。