Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PowerApps による
初めてのアプリ開発
- SharePoint と連携させてみた –
※現時点では Preview 版です
@HiroakiOikawa
2016/05/10
目次
 何を作るか
 実際に作ってみる
 作ったアプリを公開する
 公開したアプリを動かしてみる
 まとめ
2
© SharePoint Developer
sharepoint.orivers.jp
何を作るか はじめてのアプリ開発ということで、どんなア
プリを作るか先に説明します。
3
サイトコレクション作成申請アプリ
 作成するアプリ
- 今回作成するアプリは、SharePoint Online のサイトコレクションの作
成申請をイメージしたアプリになります。
 アプリ作成方針
- PowerApps の基本的な機能だけ...
作成するアプリの利用イメージ
SharePoint Online のサイトコレクションを作成するための申請
をし、上長が承認/却下をするためのアプリです。
© SharePoint Developer
sharepoint.orivers.jp...
実際に作ってみる それでは実際にアプリを作ってみましょう。
6
PowerApps Studio を起動
PoweApps Studio を起動し、赤枠のボタンをクリックします。
© SharePoint Developer
sharepoint.orivers.jp 7
アプリで使用するデータの準備が
で...
接続するサイトを選択
接続するサイトを一覧から探すか検索してクリックします。
© SharePoint Developer
sharepoint.orivers.jp 8
接続するリストを選択
接続するリストを一覧から探すか検索して選択し、画面右下の
[Connect] ボタンをクリックします。
© SharePoint Developer
sharepoint.orivers.jp 9
一覧にはお知らせやイベン...
サイトコレクション作成申請リストの中身
「サイトコレクション作成申請」というリストをあらかじめ作っておいた
ので、これを選択し [Connect] ボタンをクリックします。
 サイトコレクション作成申請リストの設定
© SharePoint ...
アプリが自動生成される!
すると・・・リストの列情報に基づき、アプリが自動生成されます!
© SharePoint Developer
sharepoint.orivers.jp 11
自動生成されたアプリは、一覧ペー
ジ、アイテムの参照ページ...
一覧ページに ID 列を追加する
今回は開発方法のお勉強なので、軽くカスタマイズをします。
一覧ページの表示項目に ID 列を追加します。
表示項目を追加するには、リボンから [Insert] – [Text] の順
にクリックします。
選択肢...
一覧ページに ID 列を追加する
デザイン画面上にコントロールが配置されます。
右の一覧には、コントロールとマッピングされた列名が表示されます。
© SharePoint Developer
sharepoint.orivers.jp 13
一覧ページに ID 列を追加する
列のマッピングを変更し、先ほど追加したコントロールと ID 列を
マッピングするように設定します。
ついでに文字色を赤字にしてみます。
設定内容は設定と同時にデザイン画面に反映されます。
© SharePoin...
プレビュー実行で動作確認
ここまでの状態でプレビューし、
追加した ID 列が表示される
ことを確認します。
© SharePoint Developer
sharepoint.orivers.jp 15
Flow の呼び出しを追加する
申請の登録が完了したら、
Flow で作成した承認処理が
起動されるように設定をします。
セレクタで EditForm1 を
選択します。
© SharePoint Developer
sharepoint.or...
Flow の呼び出しを追加する
EditForm1 の内側の白い部分を
クリックし、フォームを選択状態に
します。
選択状態にすると選択範囲の
周りに白丸が付きます。
© SharePoint Developer
sharepoint.oriv...
Flow の呼び出しを追加する
リボンの [Action] タブをクリックし、赤枠内のプルダウンリストにて、
[OnSuccess] をクリックします。
この「OnSuccess」ですが、「保存処理が成功した時」を表して
おり、右側の「Back...
Flow の呼び出しを追加する
「OnSuccess」時に「Back」
ではなく、Flow を動かすよう
にするため、アプリに Flow を
追加します。
「OnSuccess」をクリックする
ことで画面右に左図の Flow
追加の UI が表...
呼び出す Flow を作成する
Flow の追加ページが表示されます。
© SharePoint Developer
sharepoint.orivers.jp 20
呼び出す Flow を作成する
テンプレートの中から [Get approval on email] を探しクリック
します。
© SharePoint Developer
sharepoint.orivers.jp 21
呼び出す Flow を作成する
Flow の作成ページが表示されます。
この Flow ではメール送信を伴うので、O365 へのログインアカウ
ントと、メール送信先のアカウントを指定し、[Continute] をクリッ
クします。
© Shar...
呼び出す Flow を作成する
Flow が作成され、エディタ上に Flow の内容が表示されます。
もちろんカスタマイズ可能ですが、今回は何もカスタマイズせず、
[Flow Name] を入力して、[Done] をクリックします。
© Sha...
Flow の呼び出しを追加する
EditForm1 の編集ページに戻ると、Flow の一覧の中に、いま
作成した Flow が表示されているので、Flow 名をクリックします。
© SharePoint Developer
sharepoint...
Flow の呼び出しを追加する
Flow 名をクリックすると、Flow が EditForm1 の選択中のコン
トロールと紐付けされ、式を入れるエリアに、Flow の呼び出しを
行う関数が追加されます。
今回の Flow はパラメータとしてメー...
Flow の呼び出し式を入力する
今回は下図の通り式を入力します。
左辺は「OnSuccess」になっていることを確認してください。
画像が小さいので、テキストでも一応書いておきます。
サイトコレクション作成申請_1.Run("サイトURL:"...
作ったアプリを
公開する
前の手順まででアプリの作成は完了した
ので、完成したアプリを公開します。
27
アプリの名前、アイコンを指定する
デプロイする前に、アプリの名前とアイコンを指定します。
PowerApps Studio のホームページの左メニューから [App
settings] – [App name + icon] をクリックします。...
アプリの名前、アイコンを指定する
今回は下図の通り設定します。
© SharePoint Developer
sharepoint.orivers.jp 29
スクリーンサイズ、向きを指定する
今回は設定しませんが、[Screen size + orientation] のメ
ニューから、スクリーンサイズと向きを指定可能です。
© SharePoint Developer
sharepoint.ori...
アプリを保存、公開する
もろもろ設定が完了したので、最後にアプリを保存して、O365 の
テナント内のユーザーにアプリを公開します。
[Save as] – [The cloud]
の順にクリックして、
[Allow access …] に
チ...
公開したアプリを
動かしてみる
いよいよ公開したアプリを動かしてみます。
32
公開したアプリへのアクセス方法
公開したアプリは、PowerApps サイトのホームページと、
[My apps] に表示されます。
アプリを実行するには、アプリ名が書いてあるタイルをクリックします。
© SharePoint Develope...
ブラウザからだとなぜかエラー・・・
アプリのタイルをクリックすると、アプリが起動するわけですが、ブラウ
ザから行こうとするとなぜかエラーになりアプリを起動できず・・・
とにかく動かしたいので深追いせず、PowerApps Studio から
動...
公開したアプリへのアクセス方法 その2
ブラウザから起動できなかったので、PowerApps Studio から起
動してみます。
PowerApps Studio の [Open] メニューをクリックすると、登録
済みのアプリが一覧表示される...
おまけ:アプリのアップデート
なお、アプリがアップデートされている場合は、アプリアイコンの右上
に更新マーク(下矢印のマーク)が表示されます。
このマークが出ている場合、[…] メニューをクリックすると、アプリを
更新するための [Update...
公開したアプリの起動
アプリを起動すると、すぐさま開いてますよのダイアログが表示され
ます。
© SharePoint Developer
sharepoint.orivers.jp 37
接続アカウントの指定
アプリが SharePoint に接続するためのアカウントと、
Exchange に接続するためのアカウント、メール送信先のアカウ
ントを指定します。
デフォルトで、アプリおよび Flow 作成
時に指定したアカウントが指...
スプラッシュウィンドウ
アプリのスプラッシュウィンドウ?が表示されます。
まもなくアプリが起動します。
© SharePoint Developer
sharepoint.orivers.jp 39
アプリの画面 一覧ページ
アプリが起動すると、無事 SharePoint のサイトコレクション作成
申請リストからアイテムを表示できました。
追加した ID 列もきちんと表示
されています。
© SharePoint Developer
sha...
アプリの画面 編集ページと承認依頼メール
編集ページの保存ボタン [✓] をクリックすると、アイテムが保存さ
れ、Flow が動いて承認依頼メールが送信されます。
© SharePoint Developer
sharepoint.oriver...
アプリの画面 承認
承認依頼メールにある [Approve] ボタンをクリックすると、承認
完了のページが表示され、申請者に承認完了メールが送信され
ます。
© SharePoint Developer
sharepoint.orivers.j...
アプリの画面 却下
承認依頼メールにある [Reject] ボタンをクリックすると、却下の
ページが表示され、申請者に却下メールが送信されます。
© SharePoint Developer
sharepoint.orivers.jp 43
却...
承認、却下されているのにもう一度クリック
承認、却下が済んでいる承認依頼メールに対して、もう一度
Accept、Reject のボタンをクリックしたら、きちんとエラーになりま
した。
ちょっと意地悪だけど、大事な確認。
© SharePoint...
まとめ 本資料のまとめ
45
まとめ
 今回は慣れ親しんだ SharePoint と連携をする PowerApps アプリを、
チュートリアルを見ながら見よう見まねで作ってみました。
 一通りの画面ショットを資料に貼り付けたので分かっていただけたと思います
が、特に難し...
今回の方針の下では実現できなかったこと
 実現できなかったところ
- ほぼイメージ通りに作ることができましたが、作成するアプリの利用イメー
ジのスライドには書いていない部分でできなかったところが一つ。
• 標準機能と標準テンプレートだけでは、...
Upcoming SlideShare
Loading in …5
×

PowerApps による初めてのアプリ開発

6,912 views

Published on

SharePoint と連携する PowerApps アプリを試しに作ってみました。
PowerApps でのアプリ開発の手順を一通り画面ショット付きで説明しています。

Published in: Technology
  • Be the first to comment

PowerApps による初めてのアプリ開発

  1. 1. PowerApps による 初めてのアプリ開発 - SharePoint と連携させてみた – ※現時点では Preview 版です @HiroakiOikawa 2016/05/10
  2. 2. 目次  何を作るか  実際に作ってみる  作ったアプリを公開する  公開したアプリを動かしてみる  まとめ 2 © SharePoint Developer sharepoint.orivers.jp
  3. 3. 何を作るか はじめてのアプリ開発ということで、どんなア プリを作るか先に説明します。 3
  4. 4. サイトコレクション作成申請アプリ  作成するアプリ - 今回作成するアプリは、SharePoint Online のサイトコレクションの作 成申請をイメージしたアプリになります。  アプリ作成方針 - PowerApps の基本的な機能だけを使って、基本的なアプリの作り方 を理解できる程度に作成します。 - Flow は作りこみせず、テンプレートにあるものをそのまま利用します。 Flow の作り方よりも PowerApps と Flow の連携の仕方を理解す ることに重点を置くためです。 © SharePoint Developer sharepoint.orivers.jp 4
  5. 5. 作成するアプリの利用イメージ SharePoint Online のサイトコレクションを作成するための申請 をし、上長が承認/却下をするためのアプリです。 © SharePoint Developer sharepoint.orivers.jp 5 サイトコレクション 作成申請リスト (SharePoint) ①申請 サイトコレクション 作成申請アプリ (PowerApps) 承認処理 (Flows) ②登録 ③起動 ④承認依頼メール送信 ⑤承認/却下 ⑥承認/却下結果送信 手動操作 自動処理 申請者 承認者
  6. 6. 実際に作ってみる それでは実際にアプリを作ってみましょう。 6
  7. 7. PowerApps Studio を起動 PoweApps Studio を起動し、赤枠のボタンをクリックします。 © SharePoint Developer sharepoint.orivers.jp 7 アプリで使用するデータの準備が できている場合は、[Create an app from your data]から始 めると早いです。
  8. 8. 接続するサイトを選択 接続するサイトを一覧から探すか検索してクリックします。 © SharePoint Developer sharepoint.orivers.jp 8
  9. 9. 接続するリストを選択 接続するリストを一覧から探すか検索して選択し、画面右下の [Connect] ボタンをクリックします。 © SharePoint Developer sharepoint.orivers.jp 9 一覧にはお知らせやイベントが出 てこないので、おそらくカスタムリス トにだけ対応しているのだろうと思 います。
  10. 10. サイトコレクション作成申請リストの中身 「サイトコレクション作成申請」というリストをあらかじめ作っておいた ので、これを選択し [Connect] ボタンをクリックします。  サイトコレクション作成申請リストの設定 © SharePoint Developer sharepoint.orivers.jp 10 列の内部名は、「サイトURL」 列が「Title」、「申請理由」列 が 「body」になっています。
  11. 11. アプリが自動生成される! すると・・・リストの列情報に基づき、アプリが自動生成されます! © SharePoint Developer sharepoint.orivers.jp 11 自動生成されたアプリは、一覧ペー ジ、アイテムの参照ページ、アイテム の登録・編集ページを持ち、 SharePoint リストからのデータの取 得と保存処理まで実装されています。 なので、このまま F5 キーを押すか、 画面右上の [▶] ボタンをクリックす るだけですぐにアプリを動かすことがで きます。 カスタマイズしないのであれば、これだ けでアプリ作成が完了してしまいま す!
  12. 12. 一覧ページに ID 列を追加する 今回は開発方法のお勉強なので、軽くカスタマイズをします。 一覧ページの表示項目に ID 列を追加します。 表示項目を追加するには、リボンから [Insert] – [Text] の順 にクリックします。 選択肢が表示されるので [Text box] をクリックします。 © SharePoint Developer sharepoint.orivers.jp 12
  13. 13. 一覧ページに ID 列を追加する デザイン画面上にコントロールが配置されます。 右の一覧には、コントロールとマッピングされた列名が表示されます。 © SharePoint Developer sharepoint.orivers.jp 13
  14. 14. 一覧ページに ID 列を追加する 列のマッピングを変更し、先ほど追加したコントロールと ID 列を マッピングするように設定します。 ついでに文字色を赤字にしてみます。 設定内容は設定と同時にデザイン画面に反映されます。 © SharePoint Developer sharepoint.orivers.jp 14
  15. 15. プレビュー実行で動作確認 ここまでの状態でプレビューし、 追加した ID 列が表示される ことを確認します。 © SharePoint Developer sharepoint.orivers.jp 15
  16. 16. Flow の呼び出しを追加する 申請の登録が完了したら、 Flow で作成した承認処理が 起動されるように設定をします。 セレクタで EditForm1 を 選択します。 © SharePoint Developer sharepoint.orivers.jp 16
  17. 17. Flow の呼び出しを追加する EditForm1 の内側の白い部分を クリックし、フォームを選択状態に します。 選択状態にすると選択範囲の 周りに白丸が付きます。 © SharePoint Developer sharepoint.orivers.jp 17 この辺をクリック
  18. 18. Flow の呼び出しを追加する リボンの [Action] タブをクリックし、赤枠内のプルダウンリストにて、 [OnSuccess] をクリックします。 この「OnSuccess」ですが、「保存処理が成功した時」を表して おり、右側の「Back()」が、処理する内容を表しています。 上記設定は、「保存処理が成功した時、元のページに戻る」とい う処理を定義していることになります。 © SharePoint Developer sharepoint.orivers.jp 18
  19. 19. Flow の呼び出しを追加する 「OnSuccess」時に「Back」 ではなく、Flow を動かすよう にするため、アプリに Flow を 追加します。 「OnSuccess」をクリックする ことで画面右に左図の Flow 追加の UI が表示されます。 [Create a new flow] を クリックします。 © SharePoint Developer sharepoint.orivers.jp 19
  20. 20. 呼び出す Flow を作成する Flow の追加ページが表示されます。 © SharePoint Developer sharepoint.orivers.jp 20
  21. 21. 呼び出す Flow を作成する テンプレートの中から [Get approval on email] を探しクリック します。 © SharePoint Developer sharepoint.orivers.jp 21
  22. 22. 呼び出す Flow を作成する Flow の作成ページが表示されます。 この Flow ではメール送信を伴うので、O365 へのログインアカウ ントと、メール送信先のアカウントを指定し、[Continute] をクリッ クします。 © SharePoint Developer sharepoint.orivers.jp 22
  23. 23. 呼び出す Flow を作成する Flow が作成され、エディタ上に Flow の内容が表示されます。 もちろんカスタマイズ可能ですが、今回は何もカスタマイズせず、 [Flow Name] を入力して、[Done] をクリックします。 © SharePoint Developer sharepoint.orivers.jp 23
  24. 24. Flow の呼び出しを追加する EditForm1 の編集ページに戻ると、Flow の一覧の中に、いま 作成した Flow が表示されているので、Flow 名をクリックします。 © SharePoint Developer sharepoint.orivers.jp 24
  25. 25. Flow の呼び出しを追加する Flow 名をクリックすると、Flow が EditForm1 の選択中のコン トロールと紐付けされ、式を入れるエリアに、Flow の呼び出しを 行う関数が追加されます。 今回の Flow はパラメータとしてメール本文の値を渡す必要があ るため、下図の通り入力を促すメッセージが表示されます。 © SharePoint Developer sharepoint.orivers.jp 25
  26. 26. Flow の呼び出し式を入力する 今回は下図の通り式を入力します。 左辺は「OnSuccess」になっていることを確認してください。 画像が小さいので、テキストでも一応書いておきます。 サイトコレクション作成申請_1.Run("サイトURL:" & EditForm1.LastSubmit.Title & "<BR/>申請理由" & EditForm1.LastSubmit.body);Back() ここで一点ポイントですが、現在のフォームで保存された値を取得するには、 EditForm1.LastSubmit を指定します。 これが分からず、コントロールの値を無理やり取ってこようとしたりして、試行錯 誤しているうちに2日間ほど無駄にしてしまいました(涙) ちなみに式の入力エリアは、オートコンプリート(入力候補表示)対応です。 © SharePoint Developer sharepoint.orivers.jp 26
  27. 27. 作ったアプリを 公開する 前の手順まででアプリの作成は完了した ので、完成したアプリを公開します。 27
  28. 28. アプリの名前、アイコンを指定する デプロイする前に、アプリの名前とアイコンを指定します。 PowerApps Studio のホームページの左メニューから [App settings] – [App name + icon] をクリックします。 © SharePoint Developer sharepoint.orivers.jp 28
  29. 29. アプリの名前、アイコンを指定する 今回は下図の通り設定します。 © SharePoint Developer sharepoint.orivers.jp 29
  30. 30. スクリーンサイズ、向きを指定する 今回は設定しませんが、[Screen size + orientation] のメ ニューから、スクリーンサイズと向きを指定可能です。 © SharePoint Developer sharepoint.orivers.jp 30
  31. 31. アプリを保存、公開する もろもろ設定が完了したので、最後にアプリを保存して、O365 の テナント内のユーザーにアプリを公開します。 [Save as] – [The cloud] の順にクリックして、 [Allow access …] に チェックをつけて、ページ下部に ある下図の [Save] ボタンを クリックします。 © SharePoint Developer sharepoint.orivers.jp 31
  32. 32. 公開したアプリを 動かしてみる いよいよ公開したアプリを動かしてみます。 32
  33. 33. 公開したアプリへのアクセス方法 公開したアプリは、PowerApps サイトのホームページと、 [My apps] に表示されます。 アプリを実行するには、アプリ名が書いてあるタイルをクリックします。 © SharePoint Developer sharepoint.orivers.jp 33
  34. 34. ブラウザからだとなぜかエラー・・・ アプリのタイルをクリックすると、アプリが起動するわけですが、ブラウ ザから行こうとするとなぜかエラーになりアプリを起動できず・・・ とにかく動かしたいので深追いせず、PowerApps Studio から 動かしてみます。 © SharePoint Developer sharepoint.orivers.jp 34
  35. 35. 公開したアプリへのアクセス方法 その2 ブラウザから起動できなかったので、PowerApps Studio から起 動してみます。 PowerApps Studio の [Open] メニューをクリックすると、登録 済みのアプリが一覧表示されるので、そこから起動します。 © SharePoint Developer sharepoint.orivers.jp 35
  36. 36. おまけ:アプリのアップデート なお、アプリがアップデートされている場合は、アプリアイコンの右上 に更新マーク(下矢印のマーク)が表示されます。 このマークが出ている場合、[…] メニューをクリックすると、アプリを 更新するための [Update] メニューが表示されます。 © SharePoint Developer sharepoint.orivers.jp 36
  37. 37. 公開したアプリの起動 アプリを起動すると、すぐさま開いてますよのダイアログが表示され ます。 © SharePoint Developer sharepoint.orivers.jp 37
  38. 38. 接続アカウントの指定 アプリが SharePoint に接続するためのアカウントと、 Exchange に接続するためのアカウント、メール送信先のアカウ ントを指定します。 デフォルトで、アプリおよび Flow 作成 時に指定したアカウントが指定されて います。 [Allow] ボタンをクリックして、 接続アカウントを確定させます。 © SharePoint Developer sharepoint.orivers.jp 38
  39. 39. スプラッシュウィンドウ アプリのスプラッシュウィンドウ?が表示されます。 まもなくアプリが起動します。 © SharePoint Developer sharepoint.orivers.jp 39
  40. 40. アプリの画面 一覧ページ アプリが起動すると、無事 SharePoint のサイトコレクション作成 申請リストからアイテムを表示できました。 追加した ID 列もきちんと表示 されています。 © SharePoint Developer sharepoint.orivers.jp 40
  41. 41. アプリの画面 編集ページと承認依頼メール 編集ページの保存ボタン [✓] をクリックすると、アイテムが保存さ れ、Flow が動いて承認依頼メールが送信されます。 © SharePoint Developer sharepoint.orivers.jp 41 承認依頼メール
  42. 42. アプリの画面 承認 承認依頼メールにある [Approve] ボタンをクリックすると、承認 完了のページが表示され、申請者に承認完了メールが送信され ます。 © SharePoint Developer sharepoint.orivers.jp 42 承認完了メール承認完了ページ
  43. 43. アプリの画面 却下 承認依頼メールにある [Reject] ボタンをクリックすると、却下の ページが表示され、申請者に却下メールが送信されます。 © SharePoint Developer sharepoint.orivers.jp 43 却下メール却下ページ
  44. 44. 承認、却下されているのにもう一度クリック 承認、却下が済んでいる承認依頼メールに対して、もう一度 Accept、Reject のボタンをクリックしたら、きちんとエラーになりま した。 ちょっと意地悪だけど、大事な確認。 © SharePoint Developer sharepoint.orivers.jp 44
  45. 45. まとめ 本資料のまとめ 45
  46. 46. まとめ  今回は慣れ親しんだ SharePoint と連携をする PowerApps アプリを、 チュートリアルを見ながら見よう見まねで作ってみました。  一通りの画面ショットを資料に貼り付けたので分かっていただけたと思います が、特に難しいことはしていないし、コーディングも本当に一切しませんでした。  Flow についてはテンプレートを使うにしても少々手数が多かったり、Flow を呼び出すのにパラメータが必要だったりするため、この辺りはやはり Excel 関数を使ったことがあるレベルの方でないと厳しいのかなと思いました。  まだまだプレビュー版なので、メールや各種 UI の日本語化であるとか、カス タマイズができる範囲なども変わってくるかと思いますが、ひとまず PowerApps がどのようなものか理解するには十分だったかなと思います。  みなさんも PowerApps でお手軽アプリ開発を体験してみてください!  最後に、今回のアプリ作成方針では手が届かなかった部分を軽くまとめまし たので、おまけ資料として最後につけておきます。 © SharePoint Developer sharepoint.orivers.jp 46
  47. 47. 今回の方針の下では実現できなかったこと  実現できなかったところ - ほぼイメージ通りに作ることができましたが、作成するアプリの利用イメー ジのスライドには書いていない部分でできなかったところが一つ。 • 標準機能と標準テンプレートだけでは、⑥承認/却下結果送信の前後で、 サイトコレクション作成申請リストの該当アイテムに承認/却下結果を戻す ことができませんでした。  そもそも実現できそうか? - 上記の問題を実現できそうか軽く 調べてみましたが・・・ • Flow の中に SharePoint リストの アイテムを更新するアクションがないので、 素のままだとやはり難しいみたいです。 • こういった場合は、Flow から Custom API を呼び出す必要がありますね。 © SharePoint Developer sharepoint.orivers.jp 47

×