Azure DevOpsでPower AppsのGit管理をするぞ。

D0473D6B-DBE4-457E-939A-649BE4DD32FD.png

ネタ記事と真面目記事を交互に出している気がします。
今回は、わりかし真面目よりのつもりです。


 

つい先日(ということにしておかないと老化に耐えられない)、Power AppsがGit管理に対応しました。

すぐに調べてみたのですが、出てくるのはGitHubの記事ばっかりで、他のGit管理ツールの話題はなかなかありませんでした。
まぁ無料ですぐに使えるので、そうなるのも納得なのですが......。

弊社では普段はAzure DevOpsを使っているため、GitHubのアカウントはあるけれど全く馴染みが無いんです。

 

???『そんなニッチな悩みを抱えている貴方を、助けてしんぜよう』

 

その声は!!!

 

脳内のミニチュアダックス『わしじゃよ、ワン』

ikeda_dog.jpg

Oh...... Dog......

 

というわけで、今回のテーマはこちら。

Azure DevOpsでGit管理したいPower Apps開発者の君たちへ


目次

  1. アプリのGit管理機能をONにする
  2. Azure DevOps のリポジトリURLを取得する
  3. Azure DevOps のアクセストークンを取得する
  4. ちょっと中身を見てみよう

 

まず、この記事は Git や Azure DevOps 自体の前提知識は記載しておりません。そのくせ、終盤には Git の中身をゴリゴリに見に行ったりしてます。

『Gitわからんけど、とにかくAzure DevOpsで管理したい!』という方は、手順1~3にプラスで、
プロジェクトを作成する - Azure DevOps | Microsoft Docsなども参考にしてみてください。

『折角の機会だし、Gitについても知りたい!』という方は、サル先生のGit入門をお勧めいたします。

 

1. アプリのGit管理機能をONにする


とりあえずは、Git管理するためのアプリが必要になります。

ということで、ちょうどいいアプリがないか過去の聖遺物たちを漁っていたら、こんなのを見つけました。

ikeda4_00.jpg

実験アプリ3号ちゃんです。音声データでなんかできないか遊んだ挙句に、間違えて全消しした残滓です。

これをGit管理してみましょう。

まずは、設定を押下します。

ikeda4_01.jpg

バージョンコントロールの設定をONにします。(この辺の設定の場所は変わっている可能性があるので、お気をつけて。)

ikeda4_02.jpg

そうすると、設定の一番下に『Gitバージョン管理』という項目が出てきます。

ikeda4_03.jpg

これだけで、下準備はOKです。

 

2.Azure DevOps のリポジトリURLを取得する


『接続』というボタンを押すと、リポジトリのURLやら、分岐やらが出てきます。

ikeda4_25.jpg

Azure DevOpsにプロジェクトを作成して、そのリポジトリのURLをとってきましょう。

プロジェクト作成部分の説明は、プロジェクト作成についての公式のページにお任せするとします。

 

で、あらかじめ作っておいたプロジェクトのリポジトリのURLが、こちらになります。

ikeda4_04.jpg

作成したプロジェクトの Repos にある、なんかよくわからんURLですね。HTTPSの方です。

ちなみに、今回のプロジェクト名は『PowerAppsAzureTest』にしましたが、わかりやすければ名前はなんでもOKです。
が、社内の共有環境では、名付けルールがないか確認しましょう。私は命名規則ガン無視して痛い目に何度もあいました。

これをコピーして、『GitリポジトリのURL』に貼り付けます。

ikeda4_05.jpg

『分岐』と『ディレクトリ名』は、ここで打ち込んだものを自動生成してくれるので、別の場所で何か設定をする必要はありません。

分岐は、特に問題がなければ無難に『main』がよいと思います。

ディレクトリ名は、今回はアプリの名前にカナが入っているので別のものにしましたが、基本的にはアプリの名前と同じで問題ないでしょう。


今回のマメ!(今回はGit初学者向き)

分岐は、Gitの用語ではブランチ(枝)といいます。

幹となるブランチ(main や master)をまず作り、自分の作業はさらにそこから生やしたブランチで行います。そして、作業が完了して問題の無いものを幹に戻し、元の幹を成長させていきます。

根幹は揺るがさず、それぞれが枝葉の先で自分の作業を行うことができるのが、Gitの大きな利点です。

ただまぁ、その辺はApps側がよしなにやってくれるので、Power Appsでは深く考える必要はないです。


 

3. Azure DevOps のアクセストークンを取得する


『適用』を押下すると、今度はサインインの画面になります。

ikeda4_11.jpg

メールアドレスはすぐにわかると思いますが、問題はパスワードです。

これが普通のアカウントのパスワードとは違うのが、引っ掛かりやすいです。
私も、初見の時に訳が分からず「うがぁぁぁぁぁぁ!!!」ってなりました。

『アクセストークン』を取得する必要があります。

 

Azure DevOps の画面に戻ります。

『ケセランパセランがついてる人間』アイコンをクリックして、『Personal access tokens』です。

ikeda4_06.jpg

からの、『+ New Token』。

ikeda4_07.jpg

そうすると、アクセストークン作成の画面になります。

Nameは適当に、それっぽいのをつけておきましょう。Scopeは、とりあえず Full access にしましょう。

ikeda4_09.jpg

これでCreateしたら、トークンが生成されます。

このトークンは今後も使うので、忘れないようにどこかに保存しておきましょう。

ikeda4_10.jpg

このアクセストークンを、先ほどのパスワードに入力しましょう。

ikeda4_11.jpg

サインインすると、先ほど適当に入力しておいた分岐とディレクトリの作成をするか聞かれますが、これは『はい』でOKです。

ikeda4_13.jpgikeda4_12.jpg

これで、Gitのリポジトリと接続されました。

ikeda4_14.jpg

なお、いまのところ一度接続すると切断はできないのでご注意ください。

今後は、アプリの編集画面に入る際に、メールアドレスとアクセストークンを聞かれるようになります。

ikeda4_26.jpg

 

4. ちょっとPower Appsのソースを見てみよう


はい、ここからは完全におまけです。

せっかくGitなので、適当にクローンして、リポジトリの中身を見てみましょう。

ikeda4_18.jpg

このボタン、いつも大変お世話になっております。VS Code大好き!

 

画面に、適当なラベルを追加して、

ikeda4_16.jpg

保存時にコメントを入れましょう。

ikeda4_17.jpg

さて、コミットの履歴を見ますと、

ikeda4_19.jpg

ちゃんとコメントも反映されていますね。もしものことを考えたら、コメントはちゃんと残す方がいいかもしれませんね......。そんなもしもが起こるとは思えませんが

では、さらにコミットの中身を見てみましょう。

ikeda4_20.jpg

おお?!

ラベルをひとつ追加しただけなのに、なんかコミットがとんでもないことになっていますね。

アプリ全体の整合性を保つためのjsonとか、labelそのものの定義とか、いろいろありますが、
私たちがPower Appsで記述するプロパティの内容は、今回は『Screen1.fx.yaml』に入っているようです。

ikeda4_21.jpg

こんな感じ。

 

では、最後にちょっと悪戯しましょう。

Text: ="hoge" を Text: ="ほげ" に変えて、commitしちゃいます。

ikeda4_22.jpg

ikeda4_23.jpg

そのままリモートにpush!

もう俺は止められねぇ!!

人の夢は、終わらねぇ!!!!

ikeda4_24.jpg

はい、ちゃんと『ほげ』になってます。

※軽率に中身をいじるのはやめましょう。

 

 

最後に

今回の記事ではAzure DevOpsを活用したGitの導入をご紹介いたしました。

弊社では、Power Appsでの技術支援を行っております。実際の支援では、その後のGitの管理方法や一般的なGitの扱い方などについてもサポートさせていただきます。

他にも Power Platformの各製品での開発なども承っております。

興味のございます方や、社内導入のための初期教育を行いたいなどございましたら、ぜひお気軽に弊社までご相談ください。

 

参考

キャンバス アプリでの共同編集(公式ドキュメント)

お気軽にご依頼・ご相談ください

前へ

Power Automateを活用して電子帳簿保存法に対応する為に社内改善したこと

次へ

エンジニア2年目となったので通信の仕組みについて体系的に整理してみた。