Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Xamarin.Forms +
Azure MobileApps による
クロスプラットフォームアプリ
開発実例(開発の現実)
(株)デンタライト
吉⽥ 憲司
吉⽥ 憲司
(株)デンタライト 取締役CTO
WEB系デザイン誌でライター
 ➡
WEB制作会社でデザイナー(主にコーダー)
 ➡
エンタープライズを中⼼としたリーダーSE
 ➡
2016年6⽉にデンタライトへ
デザイナー、エンジニアの採⽤の他...
Xamarin使ってる声なかなか聞かないなぁ
Xamarinの裾の尾を広げたいなぁ
➡
うちの現場でXamarin.Forms+Mobile Appsでアプリ作っ
ている
➡
結構簡単につくれます
➡
紹介すれば、ユーザー増えるかも
“今回のセ...
・Xamarin.Formsのイメージをつかんでほしい
・サーバー側の処理にAzure MobileAppsという
 選択肢もありかなという感覚を持ってほしい
“今回のセッションのゴール”
難しい話無し。
どちらかというと初級者向けに基本的な話...
Xamarin.Forms Azure Mobile Apps
弊社の実例 開発⼯数
“今⽇のキーワード”
Xamarin.Forms
“そもそもXamarinとは”
・Xamarin は 2016年2⽉、Microsoft に買収され、
  Visual Studio に無償で同梱
・.NET技術で iOS や Android アプリが作成できる SDK
 (Xamarin....
“Xamarin.Formsとは”
Shared C# AppLogic
UI Code UI Code UI Code
Shared C# AppLogic
Shared C# UI Code
Xamarin Xamarin.Forms
UI...
Xamarin.Forms Azure Mobile Apps
弊社の実例 開発⼯数
“今⽇のキーワード”
ただ
・リリースしてそこそこ経つけど、私の廻りでの活⽤事例をあまり聞かないような…
 (試してみた系はよくある)
・実装が簡単なので、初級者でも取っつきやすいはずなんだけど…
“Azure Mobile Appsについて”
ログイン認証
データ...
さらに
Mobile Apps = App Service
App Serviceのメリットを享受できます
 ・スケーラブル
 ・ステージングスロット
 ・CI/DevOps連携など
  その他いろいろ
“なぜXamarin.Forms+Mobile Apps?”
“アプリの開発にあたって”
条件
・開発期間は2週間(超特急で作ってPDCA回したい)
・iOS, Androidで同時リリース
・導⼊医院さん毎にカスタマイズしたい
“凄い⼯数減ると思った”
※半分くらいになると思った
・開発期間は2週間(超特急で作ってPDCA回したい)
・iOS, Androidで同時リリース
・導⼊医院さん毎にカスタマイズしたい
Xamarin.Formsで
ほとんど共通化できるんじゃ...
⼯数は結構減ります
が半分にはならん。
Xamarin.Forms Azure Mobile Apps
弊社の実例 開発⼯数
“今⽇のキーワード”
“弊社での実例”
■myDental
 ⻭科医院患者さん向け電⼦診察券、コミュニケーションアプリ
  ➡2016年8⽉にアルファ版リリース
  ➡2018年3⽉ 正式に導⼊開始
  ※現在5000⼈以上の患者さまが利⽤中
 iOS,Androi...
“myDental”構成(ラフ)
Xamarin.Formsアプリ
App Service
(Mobile Apps)
SQL Database
App Service SQL Server SQL Database
ジニー(患者管理&コミュニ...
・UI部分のほとんど
・APIコール
・Mobile Apps
・プッシュ通知
・デバイス固有の処理
・他アプリの連携など(SMS,LINE)
“実装例1 Xamarin.Formsを使う”
Shared C# AppLogic
Shared ...
実装例1 Xamarin.Formsを使う
1371
共通処理
Android
1133iOS
ステップ数
(コメント含む)
6859 73%
12%
15%
7割以上は
共通化できます
“実装例1 Xamarin.Formsを使う”
⾊の微調整とか、、
if (Device.OS == TargetPlatform.iOS)

{

textColor = CommonConstants.NAVI_TEXT_COLOR_HEX...
“実装例1 Xamarin.Formsを使う”
[assembly: ExportRenderer(typeof(LabelEx), typeof(LinkLabelRenderer))]



namespace myDental.Droid...
“実装例1 Xamarin.Formsを使う”
[assembly: Dependency (typeof (phoneService))]



namespace myDental.Droid.Services

{

public cla...
・Application.Current.PropertiesとSQLiteを利⽤
“実装例2 Xamarin.Forms, Xamarin.iOS,Android間でのデータやりと
りどうしてる?”
本アプリに限って⾔うと
//ダミーモードか...
“実装例2 Xamarin.Forms, Xamarin.iOS,Android間でのデータやりと
りどうしてる?”
こんな感じ
//CommonDataを共通領域に設定する

//データが更新されている

public static void...
Azure Mobile Apps SDKを利⽤する
“実装例3 MobileAppsを使う”
- テーブル操作
- プッシュ通知
- ユーザ認証
- カスタムAPI
- オフラインデータ同期
Xamarin側にNugetでパッケージ導⼊するだけ
“実装例3 MobileAppsを使う”
初期状態ではDBはSQLiteなので
SQLDatabaseを作成して、
SQLDatabaseに接続する
MS_CON_DEV
Mobile AppsからEasy Tables を選
択。テーブル登録する。“実装例3 MobileAppsを使う”
Connectionの取得
テーブル操作
public static MobileServiceClient getConnection()

{

lock (Locker){

if (_mClient == null)

{

_mCli...
Xamarin.Forms Azure Mobile Apps
弊社の実例 開発⼯数
“今⽇のキーワード”
“⼯数の削減は?”
UIの共通化だけでなく、API処理やロジック部の実装⼯数が別々に画⾯作った場合と⽐較して、実質50%ほ
ど減少した印象。
細かいUIの実装をCustomRendererで、処理はDependencyServiceが必要になる...
まとめ
・Xamarinとその周辺について
アルファ版開発時は謎のエラーやビルドが遅さなど問題が多かっ
たが、年々改善されてきている。
Xamarin.Formsも3.xに進化
・スタイルシート・・・
・FlexLayout・・・可変レイアウト。様々な...
・Azure Mobile Appsとの連携
今⽇話したレベルであれば、Mobileクイックスタートが参考にな
るので⼀度お試しあれ。
試すのが⼀番⼿っ取り早い
ご清聴ありがとうございました
Fukuoka.NET Conf 2018 : Xamarin.Forms + Azure MobileApps による クロスプラットフォームアプリ 開発実例(開発の現実)
Fukuoka.NET Conf 2018 : Xamarin.Forms + Azure MobileApps による クロスプラットフォームアプリ 開発実例(開発の現実)
Upcoming SlideShare
Loading in …5
×

Fukuoka.NET Conf 2018 : Xamarin.Forms + Azure MobileApps による クロスプラットフォームアプリ 開発実例(開発の現実)

40 views

Published on

Fukuoka.NET Conf 2018 : Xamarin.Forms + Azure MobileApps による クロスプラットフォームアプリ 開発実例(開発の現実)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Fukuoka.NET Conf 2018 : Xamarin.Forms + Azure MobileApps による クロスプラットフォームアプリ 開発実例(開発の現実)

  1. 1. Xamarin.Forms + Azure MobileApps による クロスプラットフォームアプリ 開発実例(開発の現実) (株)デンタライト 吉⽥ 憲司
  2. 2. 吉⽥ 憲司 (株)デンタライト 取締役CTO WEB系デザイン誌でライター  ➡ WEB制作会社でデザイナー(主にコーダー)  ➡ エンタープライズを中⼼としたリーダーSE  ➡ 2016年6⽉にデンタライトへ デザイナー、エンジニアの採⽤の他、 Xamarinを使ったアプリ開発を主に担当 @ness556 実家は⽶農家。お⽶の販売もしてます。
  3. 3. Xamarin使ってる声なかなか聞かないなぁ Xamarinの裾の尾を広げたいなぁ ➡ うちの現場でXamarin.Forms+Mobile Appsでアプリ作っ ている ➡ 結構簡単につくれます ➡ 紹介すれば、ユーザー増えるかも “今回のセッションについて”
  4. 4. ・Xamarin.Formsのイメージをつかんでほしい ・サーバー側の処理にAzure MobileAppsという  選択肢もありかなという感覚を持ってほしい “今回のセッションのゴール” 難しい話無し。 どちらかというと初級者向けに基本的な話をします
  5. 5. Xamarin.Forms Azure Mobile Apps 弊社の実例 開発⼯数 “今⽇のキーワード” Xamarin.Forms
  6. 6. “そもそもXamarinとは” ・Xamarin は 2016年2⽉、Microsoft に買収され、   Visual Studio に無償で同梱 ・.NET技術で iOS や Android アプリが作成できる SDK  (Xamarin.iOS、Xamarin.Android) や、  さらにMac アプリを開発できる Xamarin.Mac 、IDEのXamarin Studio(今はVisualStudio)  を加えたツール群をまとめてXamarin 
 ・100%ネイティブアプリ(.ipa/.apk)をC#でつくれる
  7. 7. “Xamarin.Formsとは” Shared C# AppLogic UI Code UI Code UI Code Shared C# AppLogic Shared C# UI Code Xamarin Xamarin.Forms UIだけじゃない
  8. 8. Xamarin.Forms Azure Mobile Apps 弊社の実例 開発⼯数 “今⽇のキーワード”
  9. 9. ただ ・リリースしてそこそこ経つけど、私の廻りでの活⽤事例をあまり聞かないような…  (試してみた系はよくある) ・実装が簡単なので、初級者でも取っつきやすいはずなんだけど… “Azure Mobile Appsについて” ログイン認証 データ保存 プッシュ通知 オフライン同期 結構強⼒なmBaaS
  10. 10. さらに Mobile Apps = App Service App Serviceのメリットを享受できます  ・スケーラブル  ・ステージングスロット  ・CI/DevOps連携など   その他いろいろ
  11. 11. “なぜXamarin.Forms+Mobile Apps?”
  12. 12. “アプリの開発にあたって” 条件 ・開発期間は2週間(超特急で作ってPDCA回したい) ・iOS, Androidで同時リリース ・導⼊医院さん毎にカスタマイズしたい
  13. 13. “凄い⼯数減ると思った” ※半分くらいになると思った ・開発期間は2週間(超特急で作ってPDCA回したい) ・iOS, Androidで同時リリース ・導⼊医院さん毎にカスタマイズしたい Xamarin.Formsで ほとんど共通化できるんじゃないか Mobile Appsで サーバ側処理を作らなければ いけるんじゃないか
  14. 14. ⼯数は結構減ります が半分にはならん。
  15. 15. Xamarin.Forms Azure Mobile Apps 弊社の実例 開発⼯数 “今⽇のキーワード”
  16. 16. “弊社での実例” ■myDental  ⻭科医院患者さん向け電⼦診察券、コミュニケーションアプリ   ➡2016年8⽉にアルファ版リリース   ➡2018年3⽉ 正式に導⼊開始   ※現在5000⼈以上の患者さまが利⽤中  iOS,Androidどちらも同時リリース ※IDEはVisualStudio 2017 for Mac アルファ版開発当時はXamarin Studioでした
  17. 17. “myDental”構成(ラフ) Xamarin.Formsアプリ App Service (Mobile Apps) SQL Database App Service SQL Server SQL Database ジニー(患者管理&コミュニ SQL Server ・各医院個別のアプリ設定 ・アプリのバージョン情報  ・アプリの設定情報 ・患者さんの予約情報やコ ミュニケーション情報など WebAPI SDK
  18. 18. ・UI部分のほとんど ・APIコール ・Mobile Apps ・プッシュ通知 ・デバイス固有の処理 ・他アプリの連携など(SMS,LINE) “実装例1 Xamarin.Formsを使う” Shared C# AppLogic Shared C# UI Code Xamarin.Forms 実際のプロジェクトの構成 共通処理 プラットフォーム別
  19. 19. 実装例1 Xamarin.Formsを使う 1371 共通処理 Android 1133iOS ステップ数 (コメント含む) 6859 73% 12% 15% 7割以上は 共通化できます
  20. 20. “実装例1 Xamarin.Formsを使う” ⾊の微調整とか、、 if (Device.OS == TargetPlatform.iOS)
 {
 textColor = CommonConstants.NAVI_TEXT_COLOR_HEX;
 bgColor = CommonConstants.NAVI_COLOR_HEX;
 }
 else {
 textColor = CommonConstants.NAVI_TEXT_COLOR_HEX_DROID;
 bgColor = CommonConstants.NAVI_COLOR_HEX_DROID;
 }
 7割ほどの処理を共通化できているが⼀部闇もあり if (Device.RuntimePlatform== Device.iOS)
 {
 CarouselView.HeightRequest = Height - 40;
 CarouselView.MinimumHeightRequest = Height - 40;
 }
 ビューの⾼さを微調整したりとか、、、 ⾒た⽬の調整はかなり必要です
  21. 21. “実装例1 Xamarin.Formsを使う” [assembly: ExportRenderer(typeof(LabelEx), typeof(LinkLabelRenderer))]
 
 namespace myDental.Droid
 {
 public class LinkLabelRenderer : LabelRenderer
 {
 public LinkLabelRenderer(Android.Content.Context context) :                                   base(context) { }
 
 protected override void OnElementChanged(               ElementChangedEventArgs<Label> e)
 {
 base.OnElementChanged(e);
 
 var element = Element as LabelEx;
 
 Linkify.AddLinks(this.Control, MatchOptions.WebUrls);
 this.Control.SetLinkTextColor(                 element.LinkTextColor.ToAndroid());
 }
 }
 }
 namespace myDental.View
 {
 public class LabelEx : Label
 {
 public static readonly BindableProperty LinkTextColorProperty = BindableProperty.Create(
 "LinkTextColor", typeof(Color), typeof(LabelEx), Color.Default
 );
 
 public Color LinkTextColor
 {
 get { return (Color)GetValue(LinkTextColorProperty); }
 set { SetValue(LinkTextColorProperty, value); }
 }
 }
 } [assembly: ExportRenderer(typeof(LabelEx), typeof(LabelExRenderer))]
 
 namespace myDental.iOS
 {
 public class LabelExRenderer : LabelRenderer
 {
 readonly List<Match> Matches = new List<Match>();
 //…省略
 var matches = Regex.Matches(Element.Text, @"https?://[-_.!~*'a-zA-Z0-9;/?:@&=+$,%#]+");
 
     //以下ものすごく⻑いので略 Xamarin.FormsではUIの共通化に限界があるケースが多々ある。 CustomRendererが必要な場⾯も多々あり。 共通プロジェクトに、Xamarin.Formsのlabelを継承したlabelEXを⽤意 Xamarin.Droid側のCustomRenderer Xamarin.iOS側のCustomRenderer パッケージを探した⽅がいいと思う。
 やるとしても、今はEffectsを使ったほうがスマートに作れるかもしれません。 本プロジェクトはEffects未実装のため割愛します。。
  22. 22. “実装例1 Xamarin.Formsを使う” [assembly: Dependency (typeof (phoneService))]
 
 namespace myDental.Droid.Services
 {
 public class phoneService : ifDeviceService
 {
 //電話を開始
 public void tel(string dialNumber){
 //電話コールの機能を実装(Android)
 var url = Android.Net.Uri.Parse("tel:" + dialNumber);
 var intent = new Intent(Intent.ActionDial, url);
 intent.AddFlags(ActivityFlags.NewTask);
 Android.App.Application.Context.StartActivity(intent); 
 }     //以下略
 
 
 namespace myDental.Services
 {
 public interface ifDeviceService
 {
 
 void tel(string dialNumber);
 //省略 [assembly: Dependency (typeof (phoneService))]
 
 namespace myDental.iOS.Services
 {
 public class phoneService : ifDeviceService
 {
 
 //電話を開始
 public void tel(string dialNumber){
 //電話コールの機能を実装(iOS)
 //Console.Out.WriteLine("test");
 var url = new NSUrl ("tel:" + dialNumber);
 // Use URL handler with tel: prefix to invoke Apple's Phone app, 
 // otherwise show an alert dialog 
 if (!UIApplication.SharedApplication.OpenUrl (url)) {
 var av = new UIAlertView ("Not supported",
 "Scheme 'tel:' is not supported on this device",
 null,
 "OK",
 null);
 av.Show ();
 }
 }
 
 デバイス固有機能へのアクセスはやっぱりDependencyServiceを使う。 共通プロジェクトに、interfaceを⽤意 Xamarin.Droid側の実装 Xamarin.iOS側の実装 こちらもまずパッケージを探す ※カメラの処理などはNuGet から「xam.plugin.media」 を使えば実装できる。

  23. 23. ・Application.Current.PropertiesとSQLiteを利⽤ “実装例2 Xamarin.Forms, Xamarin.iOS,Android間でのデータやりと りどうしてる?” 本アプリに限って⾔うと //ダミーモードか判定
 public static bool isDummy()
 {
 bool param = false;;
 try
 {
 param = (bool)Application.Current.Properties["dummyMode"];
 }
 catch (Exception e)
 {
 //エラー時はダミーではないと判断
 param = false;
 }
 return param;
 }
 
 //ダミーモード設定
 public static void setDummyMode(bool isDummy)
 {
 Application.Current.Properties["dummyMode"] = isDummy;
 }
 ※設定項⽬が増えると管理がめんどい  なので、ウチではクラスのインスタンスを  そのまま⼊れているます。
  24. 24. “実装例2 Xamarin.Forms, Xamarin.iOS,Android間でのデータやりと りどうしてる?” こんな感じ //CommonDataを共通領域に設定する
 //データが更新されている
 public static void setCommonData(List<int> _defineCdList , CommonData _cd, string _key){
 //共通クラスのインスタンス取得
 //共通情報は”commonData” + "22桁のキー情報"(⻭科医院番号+患者番号)で保持している
 CommonData cd = null;
 if (Application.Current.Properties.ContainsKey ("commonData" + _key))
 {
 //共通領域にCommonDataが作成されている場合は取得
 cd = (CommonData)Application.Current.Properties ["commonData" + _key];
 } else {
 //共通領域にCommonDataが作成されていない場合は新規作成
 cd = new CommonData();
 }
       ・・・・
 //省略 
 //共通領域にデータを戻す
 Application.Current.Properties ["commonData" + _key] = cd;
 }

  25. 25. Azure Mobile Apps SDKを利⽤する “実装例3 MobileAppsを使う” - テーブル操作 - プッシュ通知 - ユーザ認証 - カスタムAPI - オフラインデータ同期 Xamarin側にNugetでパッケージ導⼊するだけ
  26. 26. “実装例3 MobileAppsを使う” 初期状態ではDBはSQLiteなので SQLDatabaseを作成して、 SQLDatabaseに接続する MS_CON_DEV
  27. 27. Mobile AppsからEasy Tables を選 択。テーブル登録する。“実装例3 MobileAppsを使う”
  28. 28. Connectionの取得 テーブル操作 public static MobileServiceClient getConnection()
 {
 lock (Locker){
 if (_mClient == null)
 {
 _mClient = new MobileServiceClient(CommonConstants.DEF_AZURE_DBURI);
 }
 }
 
 return _mClient;
 }
 configTbl = mClient.GetTable<m_config>();
 List<m_config> items_conf = new List<m_config>();
 if (Device.RuntimePlatform == Device.iOS)
 {
 items_conf = await configTbl.OrderByDescending(items => items.ios_latest_version).ToListAsync();
 }
 else
 {
 items_conf = await configTbl.OrderByDescending(items => items.droid_latest_version).ToListAsync();
 }
 foreach (m_config item in items_conf)
 {
 //先頭1件。複数存在した場合でも最初の⼀件⽬のみ取得
 rtn = item;
 break;
 }
 public class m_config
 {
 public string id { get; set; }
 
 [JsonProperty(PropertyName = "ios_latest_version")]
 public string ios_latest_version { get; set; }
 
 [JsonProperty(PropertyName = "droid_latest_version")]
 public string droid_latest_version { get; set; }
 
 [JsonProperty(PropertyName = "contents_url")]
 public string contents_url { get; set; }
 
 [JsonProperty(PropertyName = "update_request_flag")]
 public int update_request_flag { get; set; }
 
 }
 
 テーブル定義 MobileServiceClientの テーブル操作メソッドを 使うだけで 簡単に使えます。 “実装例2 MobileAppsを使う”
  29. 29. Xamarin.Forms Azure Mobile Apps 弊社の実例 開発⼯数 “今⽇のキーワード”
  30. 30. “⼯数の削減は?” UIの共通化だけでなく、API処理やロジック部の実装⼯数が別々に画⾯作った場合と⽐較して、実質50%ほ ど減少した印象。 細かいUIの実装をCustomRendererで、処理はDependencyServiceが必要になる部分などの⼯数は初期段階 で調査するべきでもう少し減らせたかもしれない。 ちなみに、テスト⼯数はほとんど変化なし。
 ※Test Cloudや、ローカルでもXamarin.UITestを使って⼯数削減はできそうですが、今回は急で対応できず。 設計含めて実装に7⼈⽇、テスト3⼈⽇ 今回の設定のみMobileAppsに持たせるような処理は半⽇で実装 2週間でとりあえず動くものができたが、Androidでバグ対応祭りをすることになった。 ※AndroidのAPIパターンのテスト⼯数が⾜りなかった。
  31. 31. まとめ
  32. 32. ・Xamarinとその周辺について アルファ版開発時は謎のエラーやビルドが遅さなど問題が多かっ たが、年々改善されてきている。 Xamarin.Formsも3.xに進化 ・スタイルシート・・・ ・FlexLayout・・・可変レイアウト。様々な画⾯サイズへの対応 ちょっとしたことをCustomRenderer で書く必要がなくなるかも その他進化は公式を。 https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.2/3.2.0/ などなど お作法などいろいろ制約もあるがやはりクロスプラットフォーム のアプリを同時に作るとなるとC#好きには最善(と思います)
  33. 33. ・Azure Mobile Appsとの連携 今⽇話したレベルであれば、Mobileクイックスタートが参考にな るので⼀度お試しあれ。 試すのが⼀番⼿っ取り早い
  34. 34. ご清聴ありがとうございました

×