やる気駆動型エンジニアの備忘録

WPF(XAML+C#)の話題を中心に.NET/Android/CI やたまに趣味に関するブログです

Azure DevOpsの拡張機能を自作する -Hello World編-

Azure DevOps の拡張機能を自作する機運が高まってきたので色々調べながらとりあえず Hello World まで到達したので、その手順を備忘録として残しておきます。 なお、ここで記載している内容は2020年3月28日時点の以下のページに記載されている手順に則っています。 このページは英語で書かれていますが、一通りの手順を実施することで全く知識が無くても Hello World に到達できるようになっています。

docs.microsoft.com

なお、今回作成するのは以下のように Azure Repos にMy Hubというメニューを追加して、ログインユーザー名を表示する画面を追加します。

f:id:iyemon018:20200328223636p:plain

環境構築

Azure DevOpsに自分自身がownerになるorganizationを作る

Azure DevOps では拡張機能を自身が所属する organization にインストールするには権限が必要です。 最も手っ取り早いのは個人用の organization を作成することです。

会社で Azure DevOps を使用していて拡張機能をインストールする権限を持っていない場合、organization の owner に権限を与えてもらうか、owner 自身に拡張機能のインストールを依頼する必要があります。

拡張機能を作成するための環境を構築する

  1. Node.jsをインストールする
  2. Azure DevOps用の拡張機能パッケージツール(TFX)をインストールする

以下から Node.js をインストールします。とりあえず LTS をインストールしておけば問題ありません。

nodejs.org

Node.js をインストールしたら、TFX はコマンドプロンプトから以下のコマンドを実行することでインストールできます。

npm install -g tfx-cli

拡張機能を公開するためのPublisherを作成する

Azure DevOps のすべての拡張機能はパブリッシャーによって提供されます。 Marketplace で公開されているものだけでなく、自作して個人や特定の organization 内だけで使用するものについても同様です。

Publisher を作成するタイミングは拡張機能を作ってからでもいいのですが、ここで入力した以下の情報を拡張機能マニフェストファイルに埋め込む必要があるので先に作っておいたほうが楽ちんです。

  • ID

Publisher を作成するには以下の URL から必要な情報を入力します。

https://aka.ms/vsmarketplace-manage

なお、この手順の詳細は以下のページのほうがわかりやすいので、わからない場合はこちらを参照してください。

docs.microsoft.com

拡張機能を作る

基本的に以下の手順に従えば拡張機能を作成することができます。

docs.microsoft.com

ここではざっくり手順を紹介していきます。

  1. 拡張機能を作成するためのフォルダを作成する。場所はどこでもいい。
  2. npm パッケージマニフェストを初期化する。上記で作成したディレクトリでnpm init -yコマンドを実行する。
  3. Microsoft VSS Web Extension SDK パッケージをインストールする。npm install vss-web-extension-sdk --saveコマンドを実行する。
  4. 手順1.で作成したフォルダにvss-extension.json1ファイルを追加する。ファイルの内容は上記 URL の 4. を参照してください。
  5. Publisher 作成時に入力したIDvss-extension.jsonpublisherに記載する。
  6. 今回追加する画面のmy-hub.htmlファイルを追加する。こちらも、ファイルの内容は上記 URL の 5. を参照してください。
  7. 手順1. で作成したディレクトリでtfx extension createを実行する。

=== Completed operation: create extension ===と出力されたら完成です。 作成したフォルダ内に.vsixファイルが作成されるはずです。

ここまで実行すると以下のようなフォルダ構成になります。 (私は VS Code を使って Git で管理していたので.git, .vscode フォルダがあります)

f:id:iyemon018:20200328231928p:plain

Azure DevOpsにインストールする

Azure DevOps に作成した拡張機能をインストールするには先ほど作成した Publisher から.vsixを公開します。 拡張機能の管理ポータルへアクセスして [New extension] - [Azure DevOps] を選択します。 ダイアログに先程作成した.vsixをドラッグ・アンド・ドロップして [Upload] ボタンを押したら完了です。

f:id:iyemon018:20200328232936p:plain

Version にチェックマークがついていればアップロードは完了です。

f:id:iyemon018:20200328234157p:plain

続いてアップロードした拡張機能を organizatin にインストールします。 今回は private な拡張機能を作っているため、organization に対して拡張機能を共有する必要があります。 共有はアップロードした拡張機能のメニューから [Share/Unshare] を選択して共有先の organization 名を入力すればOKです。

f:id:iyemon018:20200328234955p:plain

拡張機能のメニューから [View Extension] を選択すると拡張機能のページに遷移するので、あとは他の拡張機能と同じようにインストールすれば完了です。 organization の Azure Repos メニューにMy Hubが追加されているはずです。

f:id:iyemon018:20200329000620p:plain


ドキュメントがしっかりしているおかげでほとんど詰まること無く、また大体1時間程度で Azure DevOps の拡張機能のインストールまでできました。 この時点では Hello World 程度で SDK の機能は殆ど触れていません。しかし、.vsixの作成方法やアップロード手順を知るには十分です。

What's next...

Azure Pipelines やその他サービスのチュートリアルです。 作りたい拡張機能に合わせてこの辺を通していけばよさそうです。


  1. vss-extension.jsonは Azure DevOps 専用のマニフェストファイルです。詳細はこちらのページを参照してください。

食洗機(NP-TA3-W)を買った

今年に入ってすぐに食洗機を買いました。 パナソニックの NP-TA3-W てやつです。

折角なので実際の使用感とか食洗機を購入・使用する上でやったこと、追加で購入したものなどを、私の調べた限りあまり紹介されてないことをメインに残しておきます。

購入までの流れ

意外と購入したひとのブログや動画をあさってもなかった情報です。 あ、ちなみに私はほしい機種のレビューをブログや Youtube 中心に見ていました。 そこでは、使用した結果やどのくらいうるさいのかを中心に紹介していましたが、購入までの流れを記載している人はいませんでした。

私が食洗機を購入して使い始めるまでの流れは以下のとおりです。 なお、私はヨドバシカメラで食洗機を購入しています。

1. 分岐水栓の型番と設置箇所の確認・見積もりの日程を決める

食洗機は備え付けの蛇口に分岐水栓を取り付ける必要があります。 この分岐水栓は蛇口の型番に合わせたものを使用する必要がありますが、素人目ではその型番が何なのかわかりません。(わかるものもあるかもしれないですが私にはわかりませんでした) この分岐水栓と蛇口の型番が合わないと食洗機の設置ができません。

sq.jbr.co.jp

まずはこの型番を確認してもらうためにヨドバシカメラの店員さんにお願いして、見積もりの日程を決める必要があります。 休日だと見積もりできないそうなので直近の平日に設定しました。

なお、この見積もりは100円かかるのですが、ヨドバシカメラだと無料でできるそうです。 この時点で食洗機を購入することもできますが、型番が一致しない場合のことを考えて私は一旦保留にしました。

2. 分岐水栓と設置場所を確認してもらう

見積もり日は朝から電話があり、2,30分程度で完了しました。 分岐水栓自体は在庫が合ったのですが、分岐水栓を設置する際に「冷水と温水のどちらに設置するか」を決める必要がありました。

温水に設置した場合は給湯器を利用することで温水で洗浄が可能になります。 冷水に設置した場合は食洗機の電気を利用することで温水で洗浄が可能になります。

要はガス代を使うか電気代を使うかの違いですね。食洗機の中には電気を使って温水にすることができないものもあるのでご注意ください。 この機能自体は油汚れ対策ですね。 特に温水に設定することのデメリットが思い浮かばなかったので温水にしました。

また、その他にも以下の2点の調整を依頼されました。

  • 食洗機を設置するためのシルバーラックを設置したが、足部分のキャスターは使えないので、固定できるものにすること
  • 食洗機の設置段はシートをおいて安定させること

ちなみにシルバーラックは上の 幅70x奥行き35 のタイプであれば設置可能です。

ここでは言われたとおりに円形のアジャスターとウッドシートを購入しました。

3. 食洗機を購入する

分岐水栓の型番を記載した見積もり書を持って食洗機と合わせて購入します。 あとは配達予定日などを決定すれば購入完了です。

設置するとこういう感じに。

f:id:iyemon018:20200309165011j:plain

なお、ヨドバシカメラではポイントを考慮すれば価格ドットコムの最安値と同じ値段になっていました。

使用するにあたって

実際使ってみると想定していなかったことなどがいくつかありました。 こちらも他のブログや Youtube などでは触れられていない箇所を中心に記録しておきます。

良かったところ

洗い物から完全に解放されるわけではないですが、それでも食器を置いて洗剤入れてボタンを押して待ったら洗い物が完了するというのは最高の UX だと思います。

食洗機を購入する前は気が付かなかったのですが、洗い物が楽になることで自炊する上での心理的ハードルが極端に下がりました(個人差あり)。

手こずる部分

食器の設置が難しい。 どこに何を置けば洗浄できるのか見ただけではわかりません。

取扱説明書に"こんな感じでおいてね!"と記載されているのでそのとおりに置きましょう。 最も、自宅の食器の形がサンプルと同じ理由もないので多少位置を変更する必要があります。 どの食器をどのあたりに置くのが良いかは試行錯誤が必要になります。 (とはいえ2週間もすると慣れますが)

想定していなかったこと

小さいタッパーを洗浄すると水が溜まってしまうことがある

我が家では白米を炊いたらご飯用の小さいタッパーに詰めています。 ↓↓↓こんなの

これを食洗機に入れて洗浄すると置き方によっては温かい水が溜まってしまいます。 多分内部で洗浄する際に立て掛けていたタッパーが水圧で倒れているのだと思います。 なので、私はお椀などをタッパーの後ろに配置するなどして設置場所を工夫しています。

洗浄中にシャワーを使うと水圧が弱まる

考えれば当然なのですが洗浄中にシャワーを使うと水圧が弱まります。 洗浄する時間は設定によりますが、1度開始すると30分以上は洗浄するので時間の管理が必要です。

その他、追加で購入したもの

食洗機でも洗えないものはいくつかあります。 例えば鉄製のものやフッ素加工されたフライパン、サイズが大きい食器などです。 そういったものを洗ったあと、乾かすための場所が必要になります。 そこで、以下のような水切りラックを購入しました。

設置するとこういった感じに(汚くてすみません…)。

f:id:iyemon018:20200309165114j:plain

これの良いところは折りたたむことができる点です。 食洗機を設置するとどうしてもキッチン周りは狭くなってしまうので折りたたんでおくことでスペースを確保できます。

最後に

感じ方は個人差ありますが、食洗機は人類の英知の結晶です。導入すればほぼ間違いなく QOL (Quality of Life)が上がることと思います。

(Azure Pipelines)Git Tag の情報を変数に保存・参照する

Git で Tag を使う場合、タグにはバージョン番号を付けて管理することが多いのですが、そのバージョン番号を Azure Pipelines で使いたいケースが稀にあります。 今回は Git で Tag うちされた情報を取得して Azure Pipelines の変数として保存・参照する方法を残します。

手順

  1. PowerShell タスクから Git コマンドで Tag を取得する
  2. Tag を変数に保存する
  3. 保存した変数を参照する

最後は PowerShell を使って変数を参照していますが、Azure Pipelines のタスクから変数を参照することができます。 少し調べると YAML ファイルから変数を設定する方法はすぐ出てくるのですが Classic を利用しているブログなどは、実はあまりありません。 折角なので Classic を使用してみようと思います。

なお、今回は2.1.0.0のような形式で保存しているものとします。

Git コマンドで Tag を取得する

$TagVersion = & git describe --tags --abbrev=0

Git コマンドの詳細については以下を参照してください。

git-scm.com

ただ、このままだとタグを取っているだけなので整形します。 今回のバージョン番号形式では、以下のようなスクリプトで取得することができます。

$TagVersion = & git describe --tags --abbrev=0
$Version = $TagVersion.Substring(4, $TagVersion.Length - 4)

Tag を変数に保存する

Tag を取得できたと言っても PowerShell の変数に保存しただけです。 これを他の Azure Pipelines タスクで使用するにはVariablesに保存する必要があります。

Write-Host "##vso[task.setvariable variable=TagVersion;]$Version"

docs.microsoft.com

なお、YAML を使う場合は以下のようにします。

docs.microsoft.com

保存した変数を参照する

Azure Pipelines を使っている方にはもはや書くまでもないですね。

$(TagVersion)

これでバージョン番号を取得することができます。

さいごに

タグを使う目的はプロダクトごとに異なると思います。 必要に応じて PowerShell でタグ文字列を整形していい感じに利用してください。

(Power Apps)Excelのチェックリスト入力アプリを作る

前回はカメラアプリを使った単独で実行可能なPower Appsアプリを作りました。

iyemon018.hatenablog.com

今回はデータ ソースにアクセスしてPower Appsを使ってデータを入力するようなアプリを作ってみます。

ということで今回は業務アプリとしてよくありがちなExcelと連携するチェックリスト アプリを作っていきます。

チェックリストを作る

前準備(Excel

  1. Excelからテーブルを作っておく。テーブル名は"チェックリスト"としておく。
  2. 日時を登録したいので"確認日時"列の書式を"yyyy/MM/dd HH:mm:ss"とする。
  3. One Drive上にExcelを保存する。

出来上がったのがこちら。

f:id:iyemon018:20200202174946p:plain

Power AppsでExcelからアプリを構築する

  1. アプリの新規作成し、接続からOne Driveを選択する。
  2. 先程作成したExcelファイルを選択して、テーブルを選択して接続する。
  3. しばらくするとアプリが作成される。

ちなみにこの時点でPower Appsが忖度してある程度アプリが出来上がります。 実行するとこのようになります。

f:id:iyemon018:20200202171347g:plain

Excel にはこのようにデータが記録されます。

f:id:iyemon018:20200202175230p:plain

このままではアプリとしては使えたものではないので調整していきます。

登録画面を編集する

そのままだと日時を手動入力したり、確認項目が自由入力となり統一されていません。 また、日時もUTCになっているのでタイムゾーンを合わせなければなりません。 ここではチェック項目を登録するための画面を調整していきます。

  1. ツリービューからEdit Screen1を選択する。
  2. ツリービューのEditForm1を選択してプロパティのフィールドから備考を選択する。備考は自由入力としたいのでテキスト入力項目を選択してプロパティのモードから"複数行"を選択する。
  3. 確認項目は確認済みなら"済"、それ以外は空欄とする。確認項目のカードを選択してプロパティの詳細タブからロックを解除する。Update に"済"を入力する。テキスト項目は削除しておく。
  4. 確認日時項目も同じくプロパティのロックを解除する。Power Apps ではUTC日時を扱っているのでUTC日時からの変換方法に従って、Update に"DateAdd(Now(), -TimeZoneOffset(Now()), Minutes)"を入力する。
  5. 確認者は利用ユーザー名を設定する。同上&省略。Update に"User().FullName"を入力する。
  6. 確認者(アドレス)は利用ユーザーのメールアドレスを設定する。Update に"User().Email"を入力する。

これで登録画面は問題なく入力した情報が登録されるようになりました。

一覧画面を編集する

一覧画面は登録済みの情報を表示していますが、初期状態では表示したい情報が適切に表示されているわけではありません。 表示したい情報を適切に表示し、かつ検索条件も調整していきます。

  1. ツリービューからBrowseScreen1 - BrowseGallery1を選択する。
  2. Title1のTextプロパティに"ThisItem.確認者"を入力する。
  3. SubTitle1のTextプロパティに"ThisItem.'確認者(アドレス)'"を入力する。
  4. Body1は削除し、アイテム内の外観は必要に応じて調節する。
  5. ツリービューからBrowseGallery1を選択してプロパティのItemsに"SortByColumns(Search([@チェックリスト], TextSearchBox1.Text, "備考","確認者"), "確認日時", If(SortDescending1, Descending, Ascending))"を入力する。

実行結果

登録画面はシンプルにこれだけです。

f:id:iyemon018:20200202194833p:plain

一覧画面もちょっとだけ見た目を調整しました。検索テキストも確認者で検索できるようになっています。

f:id:iyemon018:20200202194903p:plain

最後に

Excelの一覧をテーブルで作っておくだけで自動的にアプリが作られるのは本当に強いですね。 最初のうちはこういったテンプレートから生成されたアプリを改造しつつちょいちょい入出力項目を追加していくのがいいのでしょう。

今回作ったアプリも必要最低限だけなので、実務で使おうとするとExcelに列を足していけばいいです。 Excelに複数ユーザーから入力してもらうユースケースは業務上多いはずなので、この方法でカスタマイズしていけば業務改善のハードルもかなり下がりそうですね。

(Power Apps)単体で起動するカメラアプリを作る

先日、Power Platform Day Winter'19 Oosakaに参加してから、Power Appsがマイブームです。 とはいえ、私自身まだまだ初心者なので色々試しつつ遊んでいる最中です。

概要

今回は折角なのでPower Appsでカメラアプリの作り方を残しておきます。 カメラアプリといいながら撮影したイメージは特にどこに残すというものではありません。 保存先はデータソースなりを変更すればいいので、今回はその部分については触れません。

カメラアプリを作る

カメラアプリということでせっかくなのでモバイル端末でも利用できるようにしています。 モバイルアプリからPower Appsアプリを使う場合は以下のアプリをインストールしておいてください。

play.google.com

Power Apps

Power Apps

apps.apple.com

手順

  1. [キャンパス]から新規作成
  2. [空のアプリ] - [携帯電話レイアウト]で新規作成
  3. ラジオボタンを配置する。これはどのカメラを使用するか選択するためのもの。Items に "[0,1,2]", Default に "0" を設定する。
  4. メディア から カメラを選択して適当にサイズ調整する。
  5. カメラの Camera に "Radio1.Selected.Value"を入力する。 StreamRate に"100"を設定する。
  6. モバイル端末で開くとカメラの使用許可を求められるので許可しておく。
  7. カメラの OnSelect に"Collect(Phots, Camera1.Photo);"を入力する。
  8. 水平ギャラリーを選択する。データソースを先程入力した"Phots"を選択する。
  9. 保存して発行する。

手順8.でPhotsを選択する場合は以下のようなポップアップが出てきます。 f:id:iyemon018:20200202153345p:plain

実行結果

f:id:iyemon018:20200202163124g:plain

こんな感じで撮影したイメージが画面下部に表示されるようになります。

注意点

最後に

Power Apps 楽しいですね。 単体でアプリを作るならこれほど敷居が低い仕組みもないと思います。 特にデバイスを使用したものが簡単にクロスプラットフォームで作れるのがいいですね!

少し難点を上げるとすれば、このあとデータを保存したり一覧に表示する情報を増やしたり画面遷移したりすると一気に複雑化します。 この複雑さをPower Appsで実現するにはどうするかを考えるのが結構難しかったりします。

とはいえ、簡単な単機能のアプリくらいならサクサク作れるのでこれからもPower Appsで遊んでいきたいと思います!