個人的なメモ

Tomohiro Suzuki @hiro128_777 のブログです。Microsoft MVP for Developer Technologies 2017- 本ブログと所属組織の公式見解は関係ございません。

Visual Studio App Center で、秘匿情報をビルド時にインサートする方法

はじめに

こんにちは、@hiro128_777です。

11月3日(土)に、品川でXamarin.iOS 、Xamarin.Androidのハンズオンを開催いたします!

Swift, Objective-C のコードを Xamarin.iOS に移植する際のポイントについてのハンズオンまたは、java のコードを Xamarin.Android に移植する際のポイントについてのハンズオンを選んで受講できますので、ご興味がある方はぜひご参加下さい!

jxug.connpass.com



では本題に入りましょう。

Visual Studio App Center で、秘匿情報をビルド時にインサートする方法


自動ビルドするときに API へのアクセスキーなどの秘匿情報などは、リポジトリにプッシュしてはいけません。でもそうすると、自動ビルド後のテストなどで、API にアクセスできないので自動テストで困ってしまいます。そういうときには、ビルドサーバがリポジトリから Clone した後か、ビルド前に秘匿情報をインサートする方法が便利です。

今回はその手順についてご説明いたします。

今回の内容は下記リポジトリを利用しますので clone するか DL して下さい。
github.com

Visual Studio App Center のビルド設定に秘匿情報を環境変数として登録する


Visual Studio App Center のビルド設定を開きます。
f:id:hiro128:20181017190427p:plain



Environment variables に環境変数名とキーの値を登録します。


iOS

f:id:hiro128:20181017190444p:plain


Android

f:id:hiro128:20181121193606p:plain


ソースコード上に置き換え用の目印となる文字列を準備します。


/src/Finish/XamAppCenterSample2018/Variables.cs を確認してください。


/src/Finish/XamAppCenterSample2018/Variables.cs

using System;

namespace XamAppCenterSample2018
{
    public static class Variables
    {
        // NOTE: Replace this example key with a valid subscription key.
        public static readonly string ApiKey = "[ENTER YOUR API KEY]";
    }
}

上記の[ENTER YOUR API KEY]のように置き換えの目印になる文字列を設定しておきます。

clone 後に自動実行されるシェルスクリプトを準備します。


App Center には ビルドするcspojと同じ階層に、appcenter-post-clone.shという名前でシェルスクリプトを配置しておくと、自動認識し clone 後に自動実行してくれる機能があります。
よって、appcenter-post-clone.sh[ENTER YOUR API KEY]を本物のキーに置き換えを行う処理を書きます。


iOS

/src/Finish/iOS/appcenter-post-clone.sh


Android

/src/Finish/Droid/appcenter-post-clone.sh



#!/usr/bin/env bash

# Insert App Center Secret into Variables.cs file in my common project

# Exit immediately if a command exits with a non-zero status (failure)
set -e 

##################################################
# variables

# (1) The target file
MyWorkingDir=$(cd $(dirname $0); pwd)
DirName=$(dirname ${MyWorkingDir})
filename="$DirName/XamAppCenterSample2018/Variables.cs"

# (2) The text that will be replaced
stringToFind="\[ENTER YOUR API KEY\]"

# (3) The secret it will be replaced with
AppCenterSecret=$API_Key # this is set up in the App Center build config

##################################################


echo ""
echo "##################################################################################################"
echo "Post clone script"
echo "  *Insert App Center Secret"
echo "##################################################################################################"
echo "        Working directory:" $DirName
echo "Secret from env variables:" $AppCenterSecret
echo "              Target file:" $filename
echo "          Text to replace:" $stringToFind
echo "##################################################################################################"
echo ""


# Check if file exists first
if [ -e $filename ]; then
    echo "Target file found"
else
    echo "Target file($filename) not found. Exiting."
    exit 1 # exit with unspecified error code. Should be obvious why we can't continue the script
fi


# Load the file
echo "Load file: $filename"
apiKeysFile=$(<$filename)


# Seach for replacement text in file
matchFound=false # flag to indicate we found a match

while IFS= read -r line; do
if [[ $line == *$stringToFind* ]]
then
# echo "Line found:" $line
    echo "Line found"
    matchFound=true

    # Edit the file and replace the found text with the Secret text
    # sed: stream editior
    #  -i: in-place edit
    #  -e: the following string is an instruction or set of instructions
    #   s: substitute pattern2 ($AppCenterSecret) for first instance of pattern1 ($stringToFind) in a line
    cat $filename | sed -i -e "s/$stringToFind/$AppCenterSecret/" $filename

    echo "App secret inserted"

    break # found the line, so break out of loop
fi
done< "$filename"

# Show error if match not found
if [ $matchFound == false ]
then
    echo "Unable to find match for:" $stringToFind
    exit 1 # exit with unspecified error code.
fi

echo ""
echo "##################################################################################################"
echo "Post clone script completed"
echo "##################################################################################################"


このスクリプトがやっていることは、

  • キーを置き換えるファイルを探す。
  • ファイルの中から置き換え用の目印となる文字列を探し、本物のキーに置き換える。

それだけです。


このスクリプトを含んだリポジトリをプッシュすると、以下のように、App Center 側で認識されます。


iOS

f:id:hiro128:20181017190644p:plain


Android

f:id:hiro128:20181121194150p:plain


ビルドを実行し、ログを確認してシェルスクリプトが正しく実行されていることを確認。


正しく実行されていれば、以下のようにログで確認できます。
f:id:hiro128:20181017190653p:plain


以上で、Visual Studio App Center で、秘匿情報をビルド時にインサートする手順は完了です。




今回は以上です。




次回は、ビルド後に自動UIテストが走る設定についてご説明します。
hiro128.hatenablog.jp

Microsoft Most Valuable Professional (Microsoft MVP) を再受賞いたしました!

こんにちは、@hiro128_777です。


遅ればせながらご報告させていただきます。

この度、Microsoft Most Valuable Professional (Microsoft MVP) を再受賞いたしました。カテゴリは前回同様 Visual Studio and Development Technologies です。


おかげさまで、Microsoft MVP として2年目を迎えることができました。


これもひとえに、ハンズオンに参加して頂いた方々、スタッフとしてご協力を頂いた方々、ブログや twitter で交流させて頂いた方々、いつもお世話になっているJXUGの皆様のおかげです。改めてお礼申し上げます。本当にありがとうございました。


昨年は主にハンズオンを中心に活動してきました。というのも、Xamarin では、知識よりもまずは実際に手を動かし、様々な地雷を踏み、その解決方法を体験して頂くことが何よりも重要だと感じているからです。


特に今まで Windows 中心に開発されてきた開発者の方の場合、特に iOS 開発時の面倒なお約束を乗り越えるのは非常にストレスが溜まる作業です(私自身がそうでした)。そこをある程度ご体験頂くだけでもその後がかなり楽になります。


クロスプラットフォーム開発も、いろいろ選択肢が出てきましたので、少しでも多くの皆様に Xamarin を選択していただけるように、今後も積極的にハンズオンを実施していきます。


また、今後は Xamarin と Azure や App Center などの連携のハンズオンも積極的に実施していきたいです。


そこで、早速ですが、今月7月28日(土)に、品川で Xamarin.iOS & Xamarin.Android と App Center のハンズオンを開催いたします!

今回は、Visual Studio for Mac による Xamarin.iOS、Xamarin.Android を利用したモバイル アプリの作成方法から Visual Studio App Center を利用した自動ビルドおよび自動 UI テストの手順までを総括的に体験することができるハンズオンを開催いたします。ご興味がある方はぜひご参加下さい!

jxug.connpass.com



それでは、また、1年間よろしくお願いいたします。

私自身楽しみながらコミュニティ活動を続けていきたいです。

皆様とどこかの勉強会でお会いできること楽しみにしております。

Xamarin.iOS で Core ML を利用し画像判定を行う(1) Custom Vision Service での学習モデルの作成

はじめに


こんにちは、@hiro128_777です。

Xamarin.iOS で Core ML を触ってみたかったので試してみることにしました。

私は駅弁が大好きなので、弁当の写真を学習させ、駅弁と普通の弁当を判定させるサンプルを作成したいと思います。




学習モデルの作成


Core ML を利用するには、学習モデルである .mlmodel ファイルを作成します、作成方法はいろいろありますが、一番簡単なのは Azure の Custom Vision Service で学習モデルを作成し、エクスポート機能で .mlmodel ファイルを吐き出す方法です。



Custom Vision Service で学習モデルを作成


学習させるにはサンプルの画像を準備します。今回は駅弁の写真と普通の弁当の写真をそれぞれ30枚程度準備しました。

f:id:hiro128:20180221180232p:plain



Custom Vision Service のページを開き、ログインします。

f:id:hiro128:20180221180056p:plain



利用規約に同意します。

f:id:hiro128:20180221180249p:plain



プロジェクトを作成します。

f:id:hiro128:20180221180304p:plain



名前を入力し、Domains は General(compact) を選択します。

f:id:hiro128:20180221180316p:plain



駅弁の画像全部をアップロードします。

f:id:hiro128:20180221180335p:plain
f:id:hiro128:20180221180357p:plain



Ekibenというタグをつけます。

f:id:hiro128:20180221180409p:plain



画像が登録されました。同様に普通の駅弁の写真も登録します。
Trainをクリックし、学習をスタートします。

f:id:hiro128:20180221180437p:plain



学習が完了しました。
Exportします。

f:id:hiro128:20180221180457p:plain



iOSを選択します。

f:id:hiro128:20180221180508p:plain



ダウンロードします。

f:id:hiro128:20180221180537p:plain



.mlmodel ファイルが作成されました!!
非常に簡単です!!

f:id:hiro128:20180221180557p:plain




今回はここまでです。

2月10日(土)に、品川でXamarin.iOS 、Xamarin.Androidのハンズオンを開催いたしました!

こんにちは、@hiro128_777です。

2月10日(土)に、品川でXamarin.iOS 、Xamarin.Androidのハンズオンを開催いたしました!

jxug.connpass.com

今回は30名の方々にご参加いただきました。

f:id:hiro128:20180219145241j:plain

メンターにも強力な方に来ていただき非常に助かりました。この場をお借りして御礼申し上げます。本当にありがとうございました。

Androidの部は講師を@mishi_csさんがご担当されました。以下のレポートを参照ください。

rksoftware.hatenablog.com

私はiOSの部を担当しました。毎度のことながら躓きが多かったのが「実機デバッグの環境構築」でした。

今回は、

  • キーチェーンアクセスのパスワードがログインパスワードと違っており、しかもかからなくなってしまっているため、再度設定を行う必要があった。
  • 原因不明でビルドできなかったが、実機を抜き差しすることでうまくいった

など、のトラブルが発生しました。両者とも、Xamarin.iOSを触ってみた場合には自力解決が難しいものでしたので、ハンズオンで体験、解決できたのはよかったです。


いつも通り、コーディングではあまり躓きは少なかった印象ですが、「難易度が高い」との感想を持たれた方が多かったようです。

アンケート結果

ハンズオンを最後まで完了できたか

f:id:hiro128:20180219145057p:plain


今回、iOSでは全員の方がアプリ起動を確認できましたが、全体ではうまく動かなかった方がいらっしゃいました。
今後も全員がアプリを動かせるようにサポートしていきます。

難易度

f:id:hiro128:20180219145209p:plain


難易度についてですが、67%の方が「簡単」「ちょうどいい」とご回答され、28%の方が「難しい」とご回答されました。


割合としては、前回、前々回と同様の状況です。


確かにちょっと難しいですが、習得する価値がある内容ですので、今後もなるべくわかりやすくご説明できるよう改善していきますが、レベル感としては現状を維持したいと考えています。


時間

f:id:hiro128:20180219145222p:plain


時間ですが、94%以上の方が「ちょうどいい」とご回答されましたので、ボリューム的には今のままを続けたいと考えております。

ハンズオン自体は、休憩などを省くと正味3時間程度でした。集中力的にも3時間程度がちょうどいい長さだと考えております。


役に立ったか

f:id:hiro128:20180219145035p:plain


なんと94%の方に「役に立った」とご回答を頂けました!
主催者としては非常にうれしい結果となりました!
今後全員の方に「役に立った」と感じていただけるよう努力していきます。



その他のご感想

その他のご感想としては、

  • Xamarin.Androidは比較的簡単だが、Xamarin.iOSはSwiftの知識が必要で、ちょっと難しい

というご意見を挙げられた方が多かったです。
これは確かにその通りで、Xamarin.iOSの方がハマりどころやApple独自のエコシステムなどの面でもハードルが高いため、ハンズオンで一度ハマりを経験することがお役に立つのではないかと考えております。


また、

  • 独学でやるより全然テンポよく学習できた

というご意見もいただきました。

ハンズオンの目的がまさに「これ」ですので、主催者としては大変嬉しいご感想でした。

皆様のご意見を参考に今後も有意義なハンズオンを開催できるように精進いたします。



最後にお忙しい中休日にお時間を作ってご参加頂いた皆様、本当にありがとうございました!



懇親会はAzureもくもく会さまと合同で行い、とても楽しい時間を過ごせました!!



また、JXUGのイベントでお会いできるのを楽しみにしております!

Visual Studio for Mac で iOSの実機UIテストを実行する(1) テストプロジェクトの作成・実行

はじめに

こんにちは、@hiro128_777です。

2月10日(土)に、品川でXamarin.iOS 、Xamarin.Androidのハンズオンを開催いたします!

Swift, Objective-C のコードを Xamarin.iOS に移植する際のポイントについてのハンズオンまたは、java のコードを Xamarin.Android に移植する際のポイントについてのハンズオンを選んで受講できますので、ご興味がある方はぜひご参加下さい!

jxug.connpass.com



では本題に入りましょう。


テストプロジェクトの作成


iOSの実機UIテストを実行するために、まずは、テストプロジェクトを作成します。

今回は私のハンズオン用サンプル「AVCamSample」を題材にします。
ソースは以下から入手できます。

github.com


ソリューションの右クリックメニューから、追加 -> 新しいプロジェクトを追加 を選択します。

f:id:hiro128:20180131212524p:plain


テンプレートから「UIテストアプリ」を選択し、「次へ」をクリックします。

f:id:hiro128:20180131212542p:plain


テストアプリの名前を「AVCamSample.UITest」とし、「作成」をクリックします。

f:id:hiro128:20180131212557p:plain



パッケージのアップデート


Xamarin.UITest パッケージを最新版にアップデートします。
NUnitはバージョン2系に依存しているようなのでアップデートしないでください。

f:id:hiro128:20180131212615p:plain


Test.csの作成

Test.csのコードを以下のように書き換えてください。

using System;
using System.IO;
using System.Linq;
using NUnit.Framework;
using Xamarin.UITest;
using Xamarin.UITest.iOS;
using Xamarin.UITest.Queries;

namespace AVCamSample.UITest
{
    [TestFixture]
    public class Tests
    {
        iOSApp app;

        [SetUp]
        public void BeforeEachTest()
        {
            app = ConfigureApp
                .iOS
                .EnableLocalScreenshots()
                .PreferIdeSettings()
                .InstalledApp("com.hiro128777.AVCamSample")// アプリのバンドル識別子
                .StartApp();
        }

        [Test]
        public void AppLaunches()
        {
            app.Screenshot("First screen.");
        }
    }
}


この時、下記のように「パッケージが見つからない」扱いになり、赤線が出るようであれば、

f:id:hiro128:20180131212631p:plain


一度ソリューションを閉じて開き直すと直ります。

f:id:hiro128:20180131212703p:plain


これで、テストプロジェクトが完成しました。


アプリ本体のプロジェクトに Xamarin.TestCloud.Agent パッケージを追加

アプリ本体のプロジェクトのパッケージの右クリックメニューから、「パッケージの追加」をクリックします。

f:id:hiro128:20180206143550p:plain


「TestCloud」で検索して、Xamarin.TestCloud.Agent パッケージを追加します。

f:id:hiro128:20180206143608p:plain


FinishedLaunchingメソッドにXamarin.TestCloud.Agentを起動するコードを追加します。

public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
{
	// このコードを追加します
	#if ENABLE_TEST_CLOUD
	Xamarin.Calabash.Start();
	#endif
	// ここまで

	Window = new UIWindow(UIScreen.MainScreen.Bounds);

	var controller = new CameraViewController();
	var navController = new UINavigationController(controller);

	Window.RootViewController = navController;
	Window.MakeKeyAndVisible();
	Window.TintColor = UIColor.FromRGBA(1.0f, 1.0f, 0.0f, 1.0f);

	return true;
}

実機での起動を確認する

まずはテストプロジェクトを一度ビルドします。

単体テストのペインの「アプリのテスト」を右クリックし、「Add App Project」をクリックします。

f:id:hiro128:20180206143757p:plain


「AvCamSample」にチェックを入れ、「OK」をクリックします。

f:id:hiro128:20180206143820p:plain


ターゲットのデバイスに自分のiPhoneが表示されればOKです。

f:id:hiro128:20180206143833p:plain


これで実機テスト実行の準備が整いましたので、一度テストを走らせてみましょう。

「AvCamSample.UITest」 を右クリックし、「テストの実行」を選択します。

f:id:hiro128:20180206143843p:plain


テストが開始します。オールグリーンになればテスト成功です。

f:id:hiro128:20180206143935p:plain


成功すると、以下のようにスクリーンショットが撮れています。

f:id:hiro128:20180206144020p:plain


これで、実機テストが実行できるようになりました。



次回は実際のテストコードを記述してテストを作成していきます。

今回はここまでです。