Visual Studio CodeでTFVCを使うには その2

その1の続きです。

ここまで設定できたら、VSCodeからTFVCでのチェックインができるようになります。
まず、VSCode起動時のちょっとした注意点ですが、「マッピングしたローカルフォルダを開く」ことが必要です。
→VSCodeで開いたフォルダからTFVCのワークスペースを認識するので、該当フォルダ以外やフォルダ内のファイルを単独で開いたときはチェックインできません。

VSCodeを起動したら、TFSにログインしておきます。すべてのコマンドの表示(Ctrl+Shift+P)から’team signin’コマンド実行→ユーザ名入力→パスワード入力でログインします。
005

006

007

あとはファイルの変更を行い、TFVCにチェックインします。
VSCodeの左側にあるビューバーからソース管理のアイコンをクリックすると、チェックイン時のコメント入力欄と変更を検知したファイルが表示されるので、ソース管理のメニューから「Check In」を選択するか、コメント欄でCtrl+Enterキーを入力するとチェックインが実行されます。
008

なお、ファイルを新規追加したときには、「EXCLUDED CHANGES」に追加したファイルが表示されますが、そのままではチェックイン対象にならないので、ファイル名の右側に表示される「+」部分をクリックすると、「INCLUDED CHANGES」にファイルが移り、チェックイン対象になります。
009

さて、ここで今回のネタの最後の注意点ですが、チェックインコメントに日本語を入力すると、TFS上ではコメントが文字化けします(VSCode上では’初期生成’と入力しています)。
011

対処法ですが、tf.cmd内のJavaコマンドの引数に’-Dfile.encoding=UTF-8’を追加します。
010

これで、「Gitわからない」「xxなのでGit使えない(使わせてくれない)」いう方もTFVCでバージョン管理と連携しながら開発できますね。

Visual Studio CodeでTFVCを使うには その1

発表されてからすごい勢いで拡張されまくっているVisual Studio Codeですが、バージョン管理システムとの連携機能で標準搭載されているのはGitでした。自分の仕事ではほぼ使用しないのであまりフォローしていませんでしたが、最近Team Foundation Version Control(TFVC)が使える拡張機能が本家MSから提供されているのを知ったので、ちょっと使ってみました。

今回は以下の環境を前提にしています。
・オンプレミスのTFS(TFS2015 Update2以降)が接続先
・バージョン管理はTeam Foundation Version Controlを使う
・Visual Studioはインストールしない

まずはMarketplaceから拡張機能をインストールします。

https://marketplace.visualstudio.com/items?itemName=ms-vsts.team

にあるように、Quick Open(Ctrl+P)からコマンドでインストールするか、
001

VSCodeの左側にあるビューバーから拡張機能のアイコンをクリックし、検索ボックスで’team’を入力すると’Visual Studio Team Services’が出てくるので、’インストール’をクリックしてインストールします。
002

これだけで使えるようになればよかったんですが、この拡張機能、内部ではTFコマンドを使用しているので、TFコマンドが使える環境にする必要があります。
Visual Studioをインストールしていれば、VS2017だとTFコマンドが標準でが入っているのですが、今回はVisual Studioをインストールしないので、Team Explorer Everywhereのコマンドラインクライアント(TEE CLC)を使います。
※VS同梱のTFコマンドは、VS2017で標準のインストール先だと「C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\TF.exe」になります。

TEE CLCを使うためには前提でJava8(以降)が必要ですので、事前にインストールしておきます。
TEE CLCはGithubのサイト(https://github.com/Microsoft/team-explorer-everywhere)から最新版をダウンロードして解凍します。
(今回は、「C:\Program Files\TEE-CLC」に解凍しています)
解凍したら、ライセンス条項への同意を行います。
コマンドプロンプト(or PowerShell)で解凍先フォルダに移動したあと、’.\tf.cmd eula /accept’を実行します。
ライセンス条項を見たい方は’.\tf.cmd eula’で見れますが、注意点が2つあります。
・コードページをUTF-8に変更しないと日本語が正しく表示されません。
 →’chcp 65001’を実行するとUTF-8に切り替わります
・同意するときの入力は、’y’でも’yes’でもなく’はい’と日本語で入力しないといけません。
004

 (「ここを頑張ってローカライズしなくても」という気が・・・)

また、解凍先フォルダに空白を含み、かつPowerShellで解凍先フォルダに移動せずに動かすときは、頭に実行演算子(&)を置き、コマンドをシングルクォーテーション(‘)で括る必要があります(「& ‘C:\Program Files\TEE-CLC\tf.cmd’」)。

次に、VSCodeの拡張機能に対する設定として、’tfvc.location’にTFコマンドの絶対パスを指定します。
003

ここまで来たらTFSと連携できそうなんですが、もう少しだけ作業があり、初期設定としてTFVCのワークスペース作成とマッピングをTFコマンドで割りあてる必要があります。
〇ワークスペースの作成
.\tf.cmd workspace /new /collection:http://tfsserver:8080/tfs/DefaultCollection /location:local ReviewRelease1
〇フォルダマッピング
.\tf.cmd workfold /map /collection:http://tfsserver:8080/tfs/DefaultCollection /workspace:ReviewRelease1  $/ReviewRelease1 C:\repos\ReviewRelease1

<補足>
・TFコマンドの詳細は https://msdn.microsoft.com/ja-jp/library/y901w7se(v=vs.100).aspx になります。
・’ReviewRelease1’はチームプロジェクト名/ワークスペース名です。
 個人的な好みで、単一言語での開発の場合、ベースとする分岐(Gitでいうところのmasterブランチ)に対するワークスペースの名前はチームプロジェクト名に合わせてます。
・ワークスペースの種類に’local’を指定していますが、現時点ではTFVC拡張機能を使うときはローカルワークスペース限定ですので、明示的に指定しています(Github上でIssueが切られてるので、今後対応すると思います)。

その2に続く・・・

VSCodeでElectronアプリをデバッグするときのlaunch.json

とあるイベントでElectronが面白そうと思って、ちょっと触ってみたのですが、VSCodeでのデバッグ設定でハマったのでメモ。

<前提環境>

・Windows 10 Creator Update
・nodistでnpm 6.9.2
・VSCode 1.11.2
・Electron 1.6.5(「npm install electron -g」でインストール)
とりあえず、サンプルでよくあるファイル(index.html, main.js, package.json)作って、.vscodeフォルダにlaunch.json作ってデバック実行してみると、こんな感じでエラーが( ;∀;)
001
ざっと検索してみると、「Windowsだと’.bin/electron’じゃなくて’.bin/electron.cmd’を呼び出さないといけない」とあるけど、元々VSCodeに登録されているElectron用テンプレートにはちゃんと指定してある・・・。
002
よくよく考えると、’${workspaceRoot}’ってVSCodeが開いているフォルダになるので、その配下にelectron.cmdなんてあるわけない!
でも、パスを直接書くのは嫌なので、何か参照できるものはないかと思ってたら、OS環境変数に’NODIST_PREFIX’があるのを発見(ちなみに、x64環境だと’C:\Program Files (x86)\Nodist’になります)。
Nodistの配下に’node_modules\.bin’フォルダもあったので、’${env.NODIST_PREFIX}/node_modules/.bin/electron.cmd’に変えてみたものの、これでもNG。
‘electron.cmd’を探してみると、’C:\Program Files (x86)\Nodist\bin’に居た!!
ということで、windows用のruntimeExecutableの指定は’${env.NODIST_PREFIX}/bin/electron.cmd’で無事落ち着きました。

MacやXcodeを知らないやつが始めるXamarinアプリ開発 – 目次2

Xamarinアプリ開発(iOS)でのVisual Studio Mobile Center関連についての目次です。
・Visual Studio Mobile Centerとは:http://blackssi.cocolog-nifty.com/blog/2017/02/macxcodexamarin.html
・アプリ登録:http://blackssi.cocolog-nifty.com/blog/2017/02/macxcodexamar-1.html
・ビルド機能:http://blackssi.cocolog-nifty.com/blog/2017/02/macxcodexamar-2.html
・テスト:http://blackssi.cocolog-nifty.com/blog/2017/02/macxcodexamar-3.html
・アプリ配布:http://blackssi.cocolog-nifty.com/blog/2017/03/macxcodexamarin.html
・データ格納:http://blackssi.cocolog-nifty.com/blog/2017/03/macxcodexamar-1.html
・認証連携:http://blackssi.cocolog-nifty.com/blog/2017/03/macxcodexamar-2.html
・クラッシュ管理:http://blackssi.cocolog-nifty.com/blog/2017/03/macxcodexamar-3.html
・利用分析:http://blackssi.cocolog-nifty.com/blog/2017/03/macxcodexamar-4.html

MacやXcodeを知らないやつが始めるXamarinアプリ開発 – Visual Studio Mobile Center概要:利用分析

今回はアプリの利用分析についてです。
作成したアプリがどのぐらい利用されているか、どんな環境で利用されているかといった内容や、アプリ固有のイベント情報を収集することができます。
アプリの利用状況については、Analyticsの「Audience」で確認できます。
001

002

ここで表示される利用状況については、Mobile Centerの「Getting Started」に記載されているSDKの初期組み込みだけで取得が可能になります。

アプリ固有のイベント情報を取得することもできます(HockeyAppのとき[http://blackssi.cocolog-nifty.com/blog/2017/01/macxcodexamar-2.html]と同じアプリで取得してみました)。
003

HockeyAppとほぼ同じ内容で集計されています。
アプリへの実装ですが、HockeyApp SDKだとプラットフォームごとの実装でしたが、Mobile Center SDKではPCLプロジェクトだけの実装になります。
004

最後はLog Flowです。これはアプリで発生したクラッシュ情報やイベント情報を時系列に表示してくれます。
005

個人的には「ようやく」感がありますが、これでMobile Center関連については終了です。
まだMobile CenterはPreview版ですので、今からたくさん改善されると思います(これを作ってる最中でもいろいろ変わってました)。
とは言っても、VSTS+Xamarin Test Cloud+HockeyAppのほうが良いこともあるかと思いますので、単純に「Mobile Centerが新しいから使う」のではなく、開発環境や開発プロセスをちゃんと考えた上で「選択」してください。

さて、次何しようかな・・・

MacやXcodeを知らないやつが始めるXamarinアプリ開発 – Visual Studio Mobile Center概要:クラッシュ管理

今回はアプリのクラッシュ管理についてです。
本来作成したアプリはクラッシュ(エラー終了)しないように作成している(したつもり)ですし、してほしくはないのですが、いろんな理由でどうしてもクラッシュしてしまうことがあります。業務アプリであれば、ユーザーから「落ちた」とか連絡が入るのですが、コンシューマー向けだと「落ちちゃった、まぁいっか」とか「落ちるようなアプリはもう使わない」といった感じでなかなかフィードバックが得られないことも多いと思います。また、修正しようとしたときに、フィードバックを提供してもらった範囲内で再現できないと対応が非常に困難になったり、対応できないこともあると思います。

Mobile Centerでは、Crashesでクラッシュ時のスタックトレースや、使用機種やOSのバージョンを収集することができます。
初期画面では、クラッシュの発生概要(発生頻度と発生した例外の一覧)が表示されます。
001

発生した例外をクリックすると、詳細情報が表示されます。
002

クラッシュ時のスタックトレースや使用機種・OSのバージョンなどが表示されます。
さすがにVSのIntelliTraceと比較すると情報は少ないですが、多少修正する際のヒントにはなるかと思います。

もう少し詳細情報が欲しいときは、Debugプロファイルで生成したアプリとsymbolファイル(iOSだと.dSYMファイル)を追加でアップロードしておくと、スタックトレースが詳細化されます。

ちなみにアプリをCrashesに対応させるためには、Mobile Centerの「Getting Started」に表示される「Add Mobile Center’s SDK to your app」に従ってusingの追加と"MobileCenter.Start(~)"を追加するだけです。
003

この機能を自分で実装するのは非常に労力やリソースが必要になるので、使うつもりがなくても使える状態にしておいたほうがいいと思える機能です。

やっと最後になりそうですが、次はAnalytics(分析機能)についてです。

MacやXcodeを知らないやつが始めるXamarinアプリ開発 – Visual Studio Mobile Center概要:認証連携

今回は、ユーザの認証連携(Identity)についてです。
重要な注意点ですが、この機能、現時点ではXamarinで使えません(´・ω・`)
ですが、せっかくMobile Centerに実装されている機能ですので、ご紹介したいと思います。

Identityの実体は「Azure App Service Authentication / Authorization」です。
Mobile Centerからは
・どの認証プロバイダを使用するか
・認証プロバイダとの連携情報(Client IDとかAPI Keyとか)の設定
・Scope(どの操作権限を与えるか)の設定 ※Microsoft AccountとFacebookのみ
が設定できます。
001_2

002_2

003_2

004_2

005_2

006_2

アプリからアクセスする方法ですが、プラットフォームごとのSDK(iOS: Azure iOS SDK、Android:Azure Android SDK)を使用します。
こちらも、サンプルはネットにたくさん溢れているのでそちらを見てください。

次はアプリのクラッシュ情報の管理(Crashes)についてです。

MacやXcodeを知らないやつが始めるXamarinアプリ開発 – Visual Studio Mobile Center概要:データ格納

今回は、クラウド上にあるデータ格納領域を管理する機能(Tables)についてです。
(思いのほか長くなったので、Identityについては別にします)

Tablesは、Azure上のテーブルに対して、テーブル作成・削除/項目の編集/データのインポート・全レコードクリアができます。
使用前の注意点としては、Mobile CenterのログインユーザがAzureが使える状態でないと使えません。
(Azure上にリソースを作成するので仕方がないのですが)

まずはテーブルを作成してみます。Tablesの初期画面にある「Create Table」をクリックします。
001

テーブル名と、テーブルに対する属性を指定し、「Create」をクリックします。
002

指定する属性の内容ですが、
・Authenticated
 匿名ユーザでテーブルにアクセスさせる場合はOFFにします。
・Soft delete
 削除処理で、論理削除にする(いきなりレコードを削除せず、自動的に作成される項目"deleted"を使ってレコードを処理対象外とする)ときにONにします。
・Dynamic schema
 レコードを挿入したときに、挿入したオブジェクトに合わせてテーブルの列を変更したいときはONにします。
・Per-user data
 ユーザ単位でデータを分けて管理したいときにONにします。ONの場合、自動的に"userId"という列が追加されます。

この状態では「とりあえずシステムで使用する最低限の枠だけ作成された状態」ですので、実際に使用する項目を追加していきます。
右上にある「Edit Schema」をクリックします。
003

次に、右上にある「Add Column」をクリックします。
004

追加する項目の名前と型を入力し、「Create」をクリックすると、テーブルに列が作成されます。
005

テーブルが作成できたら、次はデータをインポートしてみます。テーブルの項目が表示されている画面で、右上の「・」が縦に3つ並んでいるところ(ハンバーガーメニュー)をクリックし、「Upload CSV」をクリックします。
006

「Clear table」でテーブル内の全レコード削除、「Delete table」でテーブルの削除を行うこともできます。

CSVファイルのアップロード画面で、.csvファイルをエクスプローラーからドラッグし、「Upload」をクリックすると、データがインポートされます。
007

008

なお、CSVファイルは、
 ・ヘッダ行(列名)が必要
 ・自分が追加した列はすべて指定する必要がある
 ・ファイルサイズは最大4MBぐらいまで
という条件で作成する必要があります。

テーブルの情報やデータについては、Azure上でも確認できます。App Services内の「Easy Tables」に作成されています。
009

010

アプリからアクセスする方法ですが、Mobile Center SDKではなくWindows Azure Mobile Services SDKを使用します。
サンプルはネットにたくさん溢れているのでそちらを見てください。

次は認証連携(Identity)についてです。

MacやXcodeを知らないやつが始めるXamarinアプリ開発 – Visual Studio Mobile Center概要:アプリ配布

今回はアプリ配布(Distribute)についてです。
Mobile Centerでは、アプリの配布先をグループ単位で管理するようになっています。
この部分でできるのは、「配布先ユーザの確認」「配布履歴」「配布実行」「配布先グループの作成」の3つです。
※配布先グループにユーザを登録するのは「アプリ管理(Manage app)」からになります。

配布グループに関する情報を確認したいときは、「Distribution Groups」画面から対象グループをクリックすることで、登録されているユーザを確認したり、アプリを配布した履歴を確認できます。
001

002

003

何か順番が違う気もしますが、ここで配布先グループにユーザを登録してみます。登録ユーザがGitHubアカウント/Microsoftアカウントのどちらでもない場合は、事前にMobile Centerにユーザを登録しておきます。
グループ内のユーザ一覧が表示されている画面にある「collaborators of this app」の部分がアプリ管理へのリンクになっていますのでクリックします。
004

グループ欄の一番下に「Invite users to this app bu email」と表示されている入力欄がありますので、そこに登録ユーザのメールアドレスを入力し、「Save changes」をクリックします。
※メールアドレスは、アプリを使用する端末が受信できるものを使用したほうが、メール内のリンクをクリックするだけで作業が行えるので、アプリ更新時の対応が楽になります。

登録ユーザには招待メールが到着しますので、「Accept Invitation」をクリックします。
005

Mobile Centerへのログイン画面が表示されるので、GitHubアカウントやMicrosoftアカウントを使用する方は上側にある「Connect with ~」をクリック、それ以外の方はメールアドレスとパスワードを入力して「Sign and join app」をクリックします。Mobile Centerの画面が表示されれば登録は完了です。
007

008

※確認用ユーザのため、Mobile Centerの画面に管理アプリが表示されていますが、開発者ではなく配布対象のみのユーザではアプリ一覧が空白で表示されます。

配布先の登録が完了したら、実際にアプリを配布してみます。
事前に、アップロードするアプリのファイルをダウンロードしておきます。
ファイルはビルド履歴の詳細画面にある「Download」-「Download build」でダウンロードできます。
013

次に、配布管理画面の右上にある「Distribute new release」をクリックすると、配布するアプリをアップロードする画面が表示されるので、「Release: Upload .ipa file」をクリックします。Windows環境であれば、「ファイルを開く」といったメニューで表示されるファイル選択画面が表示されるので、アプリのファイル(ここでは、iOS用アプリなので、.ipaファイル)を選択します。
010

すると、勝手にアプリのアップロードが開始されます(先ほどクリックした枠の上側に青くて細いプログレスバーで「アップロードしてます」アピール)。
アップロードが終了すると、アプリの概要が表示されるので、右下の「Next」をクリックします。
011

012

配布対象グループを選択し、「Next」をクリックします。
014

配布前の確認画面が表示されるので、「Distribute」をクリックします。
015

この時点で、配布対象ユーザに対してこんな感じのメールが送信されます。
016

この中にある「See details」をクリックすると、Mobile Centerにサイトに転送されますので、「Install」をクリックしてアプリをインストールします。
017

018

019

0201
0202
0203

これで、配布対象ユーザがアプリを使用できる状態になります。

この機能を使えば手動で配布タイミングをコントロールできるようになりますが、アプリを配布するために、「ビルド→実行ファイルのダウンロード→実行ファイルのアップロード→配布実行」という作業が発生することになります。VSTSとかJenkinsとか使って自動化することもできそうな気がしますが、個人的にはリポジトリに配布用のブランチを作成+配布用ブランチに対する自動ビルド/自動配布定義を作成しておいて、配布したいときには開発ブランチから配布用ブランチにPull Requestする運用が簡単かなと思います。

次は、Tables(Azureへのデータ格納)とIdentity(外部システム認証連携?)について、あっさりと書いてみます。

(「この分野が全然できなくて書けない」とは書けない・・・)

MacやXcodeを知らないやつが始めるXamarinアプリ開発 – Visual Studio Mobile Center概要:テスト

今回はテスト機能についてです。
実体はXamarin Test Cloudなのですが、使用可能な機種が制限されている(現時点で約400機種)とか、テストの実行がVSTS+Xamarin Test Cloudと異なるところなどがあります(今後改善されるとは思います)。

ここでは、UIテスト構成の作成や実行などについて記載します。UIテスト用プロジェクト作成とかの内容についてはSDKのところで書きたいと思います。

まずはテスト構成を作成します。初期状態だと、こんな画面が表示されるので、「Try automated UI testing」をクリックします。
001

次にテスト構成の作成に入るために画面中央の「Start testing your app」(これは初期状態でしか表示されません)、または右上の「New test run」をクリックします。
002

機種選択画面が表示されるので、テスト対象にしたい機種のチェックボックスをONにした後、「Select 〇 devices」をクリックします。
"〇"には選択した機種数が入ります。
003

テスト構成の詳細を指定したあと、「Next」をクリックします。
004

〇Test series
 どのテスト構成に対して設定するかを選択します(初期状態では「master」しかありません)。
 「Create new」をクリックすると、新しいテスト構成を作成することができます。
〇System language
 作成されるアプリは多分日本語だと思いますので、「Japanese(Japan)」を選択します。その他の言語でテストするときは該当する言語を選択します。
〇Test framework
 テストプロジェクトで使用するテストフレームワークを選択します。今回はXamarinアプリですので「Xamarin.UITest」を選択します。

最後にテスト方法に関する説明が表示されますが、この内容が非常に重要ですのですぐに閉じたり「Done」をクリックしないようにしてくださいw
(慣れるまでは、テキストをコピペして保存したほうがいいかもしれません)
005

ここからが、VSTS+Xamarin Test Cloudとは大幅に違うところです。
(一番改善されてほしいところでもあります)

前準備として、ローカルにXamarin UITestプロジェクトをビルドすることができる開発環境+Node.js実行環境が必要です(Windows環境でも問題ありません)。
今回はWindows 10/Visual Studio 2015/Node.jsはnodistでv6.9.2をインストールしています。
そして、一度Xamarin UITestプロジェクトをビルドしておきます。このときには、ビルド対象はAndroidでも問題ありません(Mac不要)。

ここからは、先ほどテスト構成の設定で表示されたページに従っていきます。
まず、npmでMobile Center Command Line Interfaceのパッケージ(mobile-center-cli)をインストールします。
→npm install -g mobile-center-cli

次に、テスト対象アプリをMobile Centerに登録/テスト実行します。
が、ここでドキュメントとして表示されていない手順として、コマンドラインからMobile Centerへのログインが必要です。
→mobile-center login
 ※大昔、ここでエラーが発生してあきらめた方は、最新のmobile-center-cliを再インストールしてください。

ようやく本題に入れますw。先ほどのページには以下の内容が表示されていました。
mobile-center test run uitest –app "[Mobile Centerで作成した時のアプリ名]" –devices [Xamarin Test Cloudで割り振られたデバイスID] –app-path [①] –test-series "master" –locale "ja_JP" –build-dir [②]

ここで指定する内容は以下の2つです。
①–app-path
 .ipaのファイル名を指定します。カレントフォルダにない場合はパス指定が必要です。
 ローカルにMacのビルド環境がない場合、Mobile Centerのビルドからダウンロードしたものを使用できます。
②–build-dir
 UITestプロジェクトをビルドして生成されたDLLの格納フォルダ(UITestのプロジェクト名が"UITest"の場合、"UITest\bin\[Debug] or [Release]")

ここでの注意点ですが、「run the following commands from the directory that contains the NuGet packages directory」とあるように、このコマンドを実行するときのカレントフォルダをソリューションのpackagesフォルダ(.slnファイルが格納されているフォルダ内にあると思います)にしておく必要があります。

コマンドを実行すると、Xamarin Test Cloudにアプリが転送され、テストが実行されます。
※アプリ転送やテストデバイスの空き状況などにもよりますが、結構時間がかかります。

と、ここまで書きましたが、現時点[2017/02/12]では、テスト実行後にエラーとなります(;´Д`)
→コマンドプロンプトに
 Current test status: Tests completed. Processing data.
 Current test status: Failed!
 Reason: Mono dependency error:
と出力されます。これも少し待てば解消されると思います。
・・・もしかすると自分の実行方法(というか、XarinやNUnitとかのバージョン依存関係?)がおかしいのかもしれませんが、プレビュー感満載w

テスト結果はウェブサイト上で確認できます(上記エラーのため、スクショはあまり意味がないので省略)。

次はDistribute(アプリ配布)についてです。