ディーバ Blog

大阪発 C#の会社、株式会社ディーバの Blog です。

Azure ADがいつの間にか作られてて結構困った話

青柳 @ShinichiAoyagi です。
Microsoftデベロッパーセンターでいろいろしていたらいつの間にかAzure ADが新しくできていて、そのAzure ADを変更することも削除することもできず困ったことになりました。マイクロソフトのサポートに問い合わせて無事解決できましたが自分的には「こんなのわかんねえよ!」だったので記録しておきます。

続きを読む

5/23 MvvmCross 5.0 がリリース

クロスプラットフォーム MVVM フレームワーク「MvvmCross」がメジャーアップデートして MvvmCross 5.0 がリリースされています。MvvmCross 5.0 は、Xamarin.iOS, Xamarin.Android, Xamarin.Mac, Xamarin.Forms, Universal Windows Platform (UWP), Windows Presentation Framework (WPF) をターゲットとしています(Windows Phone 8.x, Windows 8.x が削除されました)。

f:id:jz5_diva:20170523023535p:plain

少人数で開発されていることもあり 4.x 系のアップデートはもうないと思われます。これから開発する場合 5.x 系を選ばない理由はないでしょう。当ブログも含めて 4.x 系以下の情報は古く 5.0 ではまったく異なる場合があるので最新の情報を確認しましょう。

所感としては、4.x 系と大きく異なっていますが(ようやく便利になった感じ)、そのままアップデートしてもある程度動くと思います。実際 iOS/Android のプロジェクトを先日から 5.0 beta にアップデートする作業をしていました。Navigation(画面遷移と画面間の値の受け渡し)などの作法は全く異なりますが、4.x 系の作法でも動くので少しずつ変更しています。

MvvmCross 5.0

詳しくは、MvvmCross 5.0 release! を参照してください。

以下、気になったところだけピックアップ。

Navigation

もう ShowViewModel は使いません(フレームワーク内部では使っています)。新しい NavigationService を使って、画面遷移します(ViewModel 間でやり取りします)。特に次の2点は大きいですね。

  • ViewModel へ渡すパラメーターが typesafe になりました。
  • ViewModel から戻り値も受け取れるようになりました。

詳しくは、Navigation を参照。

Lifecycle

ViewModel で、View のライフサイクル イベント起点で簡単に処理が記述できるようになっています。ViewModel に次のメソッドが追加されています。

void Appearing();
void Appeared();
void Disappearing();
void Disappeared();

iOS presenter

iOS 用の presenter が改善されています。これまで Modal 表示など View をどのように表示するかを presenter クラスにごりごり記述していましたが、デフォルトである程度使える presenter が実装されています。

例えば、View クラスに MvxModalPresentation 属性を付けるだけで Modal 表示になります。

活用するには、ドキュメントおよびサンプル、そして実装された Presenter のコードも参照する必要があると思います。

ちなみに Android の presenter 改善は MvvmCross 6.0 予定です。

MvvmCross 6.0

既に MvvmCross 6.0 のロードマップも公開されています。

  • Even better Xamarin.Forms support
  • A new default presenter for Android
  • Better handling of Fragments

さらに、.NET Standard 2.0 サポートも含まれています。プラグインの構造の見直しや、より async/await や C# 7 の使用も。

ロードマップの議論は MvvmCross roadmap · Issue #1415 · MvvmCross/MvvmCross でされています。

わんくま同盟 名古屋勉強会 #38 参加と、いらすとやのラズパイ素材 | Xamarin、Windows 10 IoT など

2016/5/21 開催の わんくま同盟 名古屋勉強会 #38 に、ぶらりと参加してきました。参加人数は、20名程度。場所は、名古屋市港生涯学習センター。

f:id:jz5_diva:20160523112943j:plain

C# + Windows10 IoT Core で学ぶ IoT by くぅさん

IoT はどんなものから IoT 話題など。Raspberry Pi 2 で動く Windows 10 IoT Core 上で UWP の UI ありのアプリが 動くデモも披露。

スライドでは いらすとや の素材を利用していましたが、Raspberry Pi のイラストが無かったため、アップルパイの素材で代用していました。

f:id:jz5_diva:20160523110455p:plain

リクエストが叶ったのか、Raspberry Pi の素材も勉強会後に登場しましたね。

Xamarin で始める iOS / Android アプリ開発 by biac さん

Xamarin.Forms の Hello world。

はじめに、発売されたばかりの C#プログラマーのための 基礎からわかるLINQマジック! に関連して LINQ の話題。会場から多数質問もあり、盛り上がりました。LINQ を使いメソッドチェーンで書くのと、以前のように for ループで書くのとどちらが早いのかなどの疑問も読めば解決するようですよ。

C#プログラマーのための 基礎からわかるLINQマジック!

C#プログラマーのための 基礎からわかるLINQマジック!

Xamarin の内容は、Xamarin と Xamarin.Forms の簡単な紹介と、実際に Android エミュレーターと、UWP アプリ、Windows Phone 実機デモを披露。

わんくま Azure 移行するぞ。大作戦その1 by 中博俊さん

(資料なし)

2000年初期から続く わんくま同盟 のサイトを Azure に移行中という話。当時は ASP.NET が動くレンタルサーバーを探すのも苦労したけど、今は Azure など手軽に使える時代になったとのこと(わんくま同盟のサーバーは自宅で運用)。

わんくま同盟のサイトは、Blog や掲示板、勉強会の登録やリマインダー、メーリングリストなど雑多な構成で、徐々に置き換えしているようです。Microsoft Azure は多数のサービスがあり、どれを利用するなども紹介。

セッション用のノート PC を忘れたため、借りたノート PC に Azure Powershell 等をインストールして実演しながら紹介。

さらっと学ぶ DevOps by じぇいさん

(資料なし)

50分セッションが30分で終了したため、20分は運営の手を借りながら、DevOps とは何かを少しディスカッション。

DevOpsとは何か? そのツールと組織文化、アジャイルとの違い - Build Insider の記事が良いようです。

UWP アプリで Google Maps の表示

UWP (Universal Windows Platform) で Google Maps を表示するには、WebView と Google Maps JavaScript API を使うしかないようです。

WebView の配置

XAML に WebView を配置します。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <WebView x:Name="webView"></WebView>
</Grid>

地図を表示する HTML ファイル の作成

HTML ファイルとして Google Maps を表示するコードを記述します。

プロジェクトに HTML ファイルを追加し(ここでは map.html)、ファイルのビルドアクションは「コンテンツ」を選び、「出力ディレクトリにコピー」は、コピーする項目を選びます。

また、Google Developer Console から、Google Maps JavaScript API を有効にし、ブラウザーキーを取得します。

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <title>Map</title>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">

        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 34.686564, lng: 135.503155 },
                zoom: 8
            });
        }

        function setCenter(lat, lng) {
            var latLng = new google.maps.LatLng(lat, lng);
            map.setCenter(latLng);
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=**API_KEY**&callback=initMap">
    </script>
</body>
</html>

HTML ファイルを読み込み WebView に表示

プロジェクトに追加した HTML ファイルを読み込み、WebView に表示します。

string html;

var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///map.html"));
using (var st = (await file.OpenReadAsync()).AsStream())
using (var r = new StreamReader(st))
{
    html = await r.ReadToEndAsync();
}
            
// 文字列から WevView に表示する内容を設定
webView.NavigateToString(html);

実行結果

f:id:jz5_diva:20160419234223p:plain

Windows 10 Mobile MADOSMAでは、かなりストレスのある操作性でした。

地図が表示されず、map.html を直接 Web ブラウザーで開いて「このページでは Google マップの要素を表示できませんでした。」と表示される場合は、Google Developer Console で JavaScript API を有効にしているか確認しましょう。

JavaScript と C# のコード間でのやりとり

C# → JavaScript

JavaScript の関数を WebView 経由で呼び出して地図の操作ができます。

await webView.InvokeScriptAsync("setCenter", new string[] { "34.686564", "135.503155" });

JavaScript → C#

C# で JavaScript からの呼び出しを受けるには、WebView.ScriptNotify を使います。

webView.ScriptNotify += (sender, args) =>
{
    System.Diagnostics.Debug.WriteLine(args.Value);
};

JavaScript 側は、window.external.notify で値を送ります。

window.external.notify("value");

共通のコードで iOS/Android/UWP のダイアログを表示できる ACR User Dialogs for Xamarin and Windows

ACR User Dialogs for Xamarin and Windows

ACR User Dialogs for Xamarin and Windows を使うと、MvvmCrossMVVM パターンの ViewModel のコード(PCL プロジェクト側)から、ダイアログを表示するコードを簡単に書けます。MvvmCross 用のプラグインもあり MvvmCross のサイトからも紹介されいています

ダイアログ (Alert) だけでなく、ローディング画面なども呼び出せます。機能は次の通り。

  • Action Sheet (multiple choice menu)
  • Alert
  • Confirm
  • Loading
  • Login
  • Progress
  • Prompt
  • Toasts

NuGet からプロジェクトにインストールします。ViewModel 側(PCL プロジェクト)と、View 側の各プラットフォームのプロジェクトそれぞれにインストールします。

公式のサンプルコードは GitHub の examples にあります。

Dialog

using using Acr.UserDialogs;

UserDialogs.Instance.Alert("たこ焼きです", "確認", "OK");

f:id:jz5_diva:20160421102435p:plain

Action Sheet

using using Acr.UserDialogs;

var config = new ActionSheetConfig();
config.Title = "メニュー";
config.Add("たこ焼き", () => {/* Do something */ });
config.Add("お好み焼き", () => {/* Do something */ });
UserDialogs.Instance.ActionSheet(config);

f:id:jz5_diva:20160421103041p:plain

Confirm

using using Acr.UserDialogs;

var config = new ConfirmConfig();
config.Title = "確認";
config.Message = "たこ焼きを購入します";
config.OnConfirm = (result) =>
{
    /* Do something */
};
config.OkText = "購入";
config.CancelText = "キャンセル";
UserDialogs.Instance.Confirm(config);

f:id:jz5_diva:20160421102456p:plain

おわりに

上記以外にももう少し細かなオプションや、非同期呼び出しなども用意されています。使用感として、View 側に一切コードが不要のため手軽で便利ですが、Android ではスタイルを適用できないなど、少しこだわったアプリでは使いづらいところもあります。