Xamarin.Formsでみんなでてんこ！

Xamarin.Formsで
みんなでてんこ！
2015年10月3日
吉田将明
第６回 Japan Xamarin User Group Conference @東京
先端技術事業部

All Rights Reserved. Copyright © CRESCO, LTD.
1
目次
自己紹介
みんなのてんこ事例紹介
ソリューション概要
システム概要
開発環境、Framework
本アプリの特徴
Xamarin.Forms
Beacon部分とか
やってみての感想
簡単正確
スピーディー

2
自己紹介
吉田将明（よしだまさあき）
アプリケーションエンジニア
最近触ってる言語
C#,VB.NET,Objective-c,Node.js etc
兵庫県加古川育ち、東京でてきて3年目
ＳＥ→広告代理店営業→出戻りＳＥ

3
はじめに。。。
田淵さん、
XLSOFTさんHPへの事例掲載、
有難う御座います(´◉◞౪◟◉)ﾍﾟｺﾘ

5
自動点呼ソリューション
点呼を『簡単』『正確』『スピーディ』に！
添乗員が車内を往復し、数取器で人数を数える。
・２往復する（数え間違え防止のため）。
・点呼に５分程度かかる。
・人数しか分からない…
添乗員がiPadを持って車内を往復するだけ。
・基本的に１往復で30秒。
・不在者が一目で分かる。
・ SMSや自動音声で不在者へ一斉通知が可能！
カチ！カチ！
今まで「みんなのてんこ」導入
• 遠距離バス・観光バス
• 外国人向けツアー
• 修学旅行（観光名所めぐり）
• 工場施設や観光名所での集合点呼
活用シーン
• 企業内ミーティング、企業研修 • 国際会議、展示会
バス以外にも
！！

6
「みんなのてんこ」のしくみ
サーバー
情報照会／連絡指示
ツアー参加者情報取得
音声通知
SMS
データ入力
ツアー参加者
添乗員
ビーコンバッジ
点呼専用
iPadアプリ
ツアー管理者

7
ツ
ア
ー
開
始
後
ツ
ア
ー
開
始
前
ご利用の流れ
No 氏名電話番号言語
1 田中太郎 090-1234-XXXX 日
2 佐藤花子 090-YYYY-5678 日
3 ジョンスミス 080-1357-ZZZZ 英
4 張春燕 080-XXXX-2468 中
ビーコンバッジの例
本体サイズ
直径 30mm
厚さ 10mm
お客様の用途に合わせて
・ストラップ
・リストバンドを
ご選択ください
ビーコンバッジ配布休憩・観光（降車）集合２３４
ツアー参加者に、ビーコンバッジを配布ツアー参加者にビーコンバッジを
身につけて、行動してもらう
集合時刻にアプリで点呼開始
点呼不在者への連絡ビーコンバッジ回収５６７
添乗員がiPadを持ってバスの通路を
往復すると、不在者が確認できる
アプリの「連絡」ボタン一つで、ツアー
参加者の携帯電話に SMS または自動
音声通知で連絡できる（多国語対応）
ツアー終了時に、ツアー参加者から
ビーコンバッジを回収
出発までに、ツアー参加者の情報を
サーバーに登録
ツアー参加者情報登録1

8
★祝★てんこちゃんがTVデビュー！

9
3つの特徴
・外国人が多いツアーでも、母国語（自動音声）による電話連絡が可能です
【簡単】車内を往復するだけなので、30秒程度で点呼が完了します
【正確】数えないので、ミスがありません
【迅速】不在者の名前が一目でわかります（一覧表示）
点呼を簡単・正確・迅速に
不在者に自動連絡（SMS/自動音声通知）
多言語対応（日,英,中など16カ国語）
「まもなくツアーバスの出発時間となります。お集りください。」
「你很快就会成为观光巴士的起始时间请聚会仔细」
・アイコンをタップするだけで、不在者を呼び出せます（SMS／自動音声通知）
・不在者が多い場合は、全員に一斉呼び出しすることも可能です。
・集合時間の〇分前に「まもなく集合時間です」を通知することもできます。

10
SMSメッセージ
日本語、英語、中国語を含む
16ヶ国語に対応

11
システム構成（概要）
ツアー当日
ツアー前日
サーバー音声通知SMS
点呼アプリ
(iOS)
HTTP
(SSL)
旅客の
個人携帯
ユーザー
情報
管理Web
Xamarin.Forms

12
画面イメージ
50
45
「まもなく」ボタン
まもなくツアーバスの
出発時間です。
お気をつけて
お集りください。
5 名の不在者
在席者
/
参加者
自動音声電話
SMS
iPadを持ってバス車内の通路を往復すると、アプリ
が自動的にツアー客のビーコンバッジを検知します。
「集合時間！」ボタン
バスの出発時間と
なりました。
ツアーバスに
お集りください。
①アイコンをタップして
起動します。
②ツアーを選択します。
③点呼が実行されます。
④不在者を確認し、必要に応じて連絡します。
（※一人ひとりの言語で連絡します）

15
開発環境
 Windows 8.1
• Visual Studio Premium 2013 update4
• Xamarin 3.9
• Xamarin.iOS 8.6
 Mac OS X Yosemite
• Xcode 6.2
• Xamarin Studio 5.7.2
• Xamarin.iOS 8.6
• Xamarin.iOS Build Host 3.9

16
Framework and Library
 Xamarin.Forms PCL（共通部分）
• Xamarin.Forms Styles
• Xamarin.Forms Behaviors
• Xamarin.Forms Dependency Service
• JSON.NET
• SQLite.NET
• BouncyCastle-PCL(Blowfish暗号化ライブラリ）
• Microsoft Fakes Framework (Unit Test用)
 Xamarin.iOS （プラットフォーム固有部分）
• Core Location API
• BTProgressHUD(インジケータ)

17
みんなのてんこiOSアプリの特徴
全8画面、全て Xamarin.Forms (XAML)製！！！
iOSのCoreLocarion frameworkをXamarin.iOSから使用
開発者はC#Exportと半人前のObjective-c経験者
PCL(Portable Class Library)共通化割合89%！！！
iOSのみ対応、軌道に乗ればAndroidも。。。(´・ω・`)

18
全8画面、全て Xamarin.Forms (XAML)製！！！
 基本、Stack Layoutの組み合わせ
 フッダーはGrid Layout
 コードビハインドで実装
 ListViewはCustom Cell実装
 Forms標準コントロールのみ
 XF.Styles, XF.Behaviors利用

19
<StackLayout
Orientation="Vertical"
Padding="40,40,40,0"
Spacing="20">
<Entry
x:Name="_TenantIdEntry"
Style="{StaticResource STYLE_ENTRY_DEFAULT}"
Text=""
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Placeholder="メールアドレスを入力してください">
<Entry.Behaviors>
<local:EntryBehaviors_MaxLength_200/>
</Entry.Behaviors>
</Entry>
…

20
Xamarin.Forms Styles（ Xamarin.Forms 1.3 以降）
UIコントロールのテンプレート化の仕組み。
アプリ全体のグローバルなスタイルを指定、使用することも可能。
//アプリ全体のスタイルを定義
Application.Current.Resources = new ResourceDictionary();
//Entryのデフォルトスタイルを定義
var STYLE_ENTRY_DEFAULT = new Style(typeof(Entry))
{
Setters = {
new Setter{Property = Entry.TextColorProperty,Value = Const.ENTRY_DEFAULT_TEXTCOLOR},
new Setter{Property = Entry.HeightRequestProperty,Value = Const.ENTRY_DEFALUT_HEIGHTREQUEST},
new Setter{Property = Entry.KeyboardProperty,Value = Const.ENTRY_DEFAULT_KEYBOARDTYPE}
}
}
Application.Current.Resources.Add("STYLE_ENTRY_DEFAULT", STYLE_ENTRY_DEFAULT);
<Entry
</Entry>
◆XAMLでStyleを使用する場合
◆C#でStyleを使用する場合
var entry = new Entry();
entry.Style = (Style)Application.Current.Resources["STYLE_ENTRY_DEFAULT"];

21
<StackLayout
Orientation="Vertical"
Padding="40,40,40,0"
Spacing="20">
<Entry
x:Name="_TenantIdEntry"
Text=""
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Placeholder="メールアドレスを入力してください">
<Entry.Behaviors>
</Entry.Behaviors>
</Entry>
…

22
Xamarin.Forms Behaviors（ Xamarin.Forms 1.3 以降）
UIコントロールに機能追加するための仕組み。
下記は200文字以上入力できなくする振舞をEntryコントロールに追加する。
public class EntryBehaviors_MaxLength_200 : Behavior<Entry>
{
//最大文字数
private static readonly int MAX_LENGTH = 200;
protected override void OnAttachedTo(Entry entry)
{
entry.TextChanged += OnEntryTextChanged;
base.OnAttachedTo(entry);
}
protected override void OnDetachingFrom(Entry entry)
{
entry.TextChanged -= OnEntryTextChanged;
base.OnDetachingFrom(entry);
}
void OnEntryTextChanged(object sender, TextChangedEventArgs args)
{
//文字列長を取得
var length = string.IsNullOrEmpty(args.NewTextValue) ? 0 : args.NewTextValue.Length;
if (length > MAX_LENGTH)
{
//長さが200を超えていると入力できない
((Entry)sender).Text = args.OldTextValue;
}
}
}

23
var entry = new Entry();
entry.Behaviors = { new EntryBehaviors_MaxLength_200() };
◆XAMLでBehaviorsを使用する場合
◆C#でBehaviorsを使用する場合
Xamarin.Forms Behaviors（ Xamarin.Forms 1.3 以降）
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TenkoApp.View.Behaviors;assembly=TenkoApp"
<Entry
<Entry.Behaviors>
</Entry.Behaviors>
</Entry>

24
ListViewはCustom Cell実装
<ListView
x:Name="_TouristListView“
…
</ListView>
private ObservableCollection<ContactListViewListCell> _cellData;
_cellData = new ObservableCollection<ContactListViewListCell>();
//セルの指定
_TouristListView.ItemTemplate = new
DataTemplate(typeof(ContactListViewListCellTemplate));
//データソースの指定
_TouristListView.ItemsSource = _cellData;
◆ContactListViewListCell.cs
Xamarin.Forms.ViewCell クラスを継承したセルテンプレートを定義
セルのイベントはここで拾っている
◆ContactListView.xaml
ListViewコントロールを定義
◆ContactListView.xaml.cs
ObservableCollectionを作成し、データバインドする
データの更新はここで行っている

25
Xamarin.Forms Dependency Service
PCLからプラットフォーム固有の機能にアクセスする仕組み
PCL側に共通インターフェースを、プラットフォーム側に実装クラスを用意する
//PCL側に定義する共通インターフェース
public interface IBeaconManager
{
bool StartMonitoring(BeaconObject beaconInfo);
void StopMonitoring();
Action<object,BeaconEventArgs> Received { get; set; }
}
//プラットフォーム側に定義する実装クラス
[assembly: Dependency(typeof(BeaconManager_iOS))]
namespace TenkoApp.iOS
{
[Preserve(AllMembers = true)]
public class BeaconManager_iOS : IBeaconManager
{
public Action<object,BeaconEventArgs> Received { get; set; }
…
public BeaconManager_iOS(){…}
public bool StartMonitoring(BeaconObject beaconInfo){…}
public void StopMonitoring(){…}
IBeaconManagerの
iOS用実装クラスだと宣言
IBeaconManager
インターフェースを実装

26
Xamarin.Forms Dependency Service
PCLでDependencyService呼び出し
//modelクラス
public class BeaconService
{
public BeaconObject beaconInfo { get; set; }
public IBeaconManager _beaconManager { get; set; }
//コンストラクタでDependencyService.Getでインスタンス取得
public BeaconService()
{
this._beaconManager = DependencyService.Get<IBeaconManager>();
}
public bool StartMonitoring()
{
return this._beaconManager.StartMonitoring(beaconInfo);
}
//singleton + factory class
public class BeaconServiceFactory
{
private static BeaconService beaconService { get; set; }
public static BeaconService getInstance()
{
if (beaconService == null) { beaconService = new BeaconService(); }
return beaconService;
}
}
//利用シーン(実際はbeaconInfoの初期設定は別途必要だがここでは省略)
BeaconServiceFactory.getInstance().StartMonitoring();

27
Tips:[Preserve(AllMembers = true)]
コンパイラに対して、必要な機能ですよーとお知らせするおまじない
これがないと、Reflectionや、Dependency Service経由で使用しているクラスは、
参照がないと判断され、コンパイル対象から除外されてしまうことがある。
//PCL側に定義する共通インターフェース
public interface IBeaconManager
{
bool StartMonitoring(BeaconObject beaconInfo);
void StopMonitoring();
Action<object,BeaconEventArgs> Received { get; set; }
}
//プラットフォーム側に定義する実装クラス
[assembly: Dependency(typeof(BeaconManager_iOS))]
namespace TenkoApp.iOS
{
[Preserve(AllMembers = true)]
public class BeaconManager_iOS : IBeaconManager
{
public Action<object,BeaconEventArgs> Received { get; set; }
…
public BeaconManager_iOS(){…}
public bool StartMonitoring(BeaconObject beaconInfo){…}
public void StopMonitoring(){…}
どうかコンパイルしてくださ
いお願いします・・・

28
iOSのCoreLocarion frameworkをXamarin.iOSから使用
基本、iOSのCoreLocation Frameworkの薄いラッパーなので、
C#流儀だけ覚えれば、感覚的に実装できる。
iOS技術者は参入しやすい。はず( ..)φメモメモ
//CLLocationManagerのインスタンス作成
CLLocationManager _CLM = [[CLLocationManager alloc] init];
◆Objective-c コード抜粋 ◆Xamarin.iOS コード抜粋
// 測位を開始する
[_CLM startRangingBeaconsInRegion : _CLBeaconRegion];
//デリゲートの設定
_CLM.delegate = self;
// 位置情報測位の許可を求めるメッセージを表示する
[_CLM requestAlwaysAuthorization];
//CLLocationManagerのインスタンス作成
CLLocationManager _CLM = new CLLocationManager();
// 測位を開始する
_CLM.StartRangingBeacons(_CLBeaconRegion);
//デリゲートの設定
_CLM.AuthorizationChanged += _CLM_AuthorizationChanged;
// 位置情報測位の許可を求めるメッセージを表示する
_CLM.RequestAlwaysAuthorization();
じゃぁC#erは・・・？(・ω・)ノ

29
iOSのCoreLocarion frameworkをXamarin.iOSから使用
リファレンスが結構わかりやすいから頑張れそう(*^▽^*)無責任笑
http://developer.xamarin.com/api/type/CoreLocation.CLLocationManager/

30
開発者はC#Exportと半人前のObjective-c経験者
C#エキスパートいわく。
API部分、DBやmodelなどビジネスロジックを担当。PCL
暗号化のところ、PCL対応のライブラリが最初見つからなくて、焦ったそう。
ビジネスロジックをPCLで作ったが、そんなに違和感ない(´◉◞౪◟◉)
Objective-C経験者（C#スタンダード)いわく。
View周り、DependencyService、Beaconなどを担当。PCL+Xamarin.iOS
画面をXAMLで作ったが、デザイナ／Viewerがないから、デザインの確認するのに、
毎回ビルドして、微妙に違ったら修正して、またビルドして。。。 orz
イメージボタンの扱いにはまった。
今回のような画面なら、標準コントロールで十分実装可能。
iOSのプロジェクト設定とか、ビルド設定、スプラッシュ設定などは
iOSでリリース作業やったことある人なら、そんなに違和感なく設定可能な感じ。

31
PCL(Portable Class Library)共通化割合89%！！！
分類 Step数比率
Xamarin.Forms(PCL) 4.8KS 89%
Xamarin.iOS 0.6KS 11%
計 5.4KS 100%
もしAndroidを作ったとしても・・・
分類 Step数比率
Xamarin.Forms(PCL) 4.8KS 80%
Xamarin.iOS 0.6KS 10%
Xamarin.Android 0.6KS 10%
計 6.0KS 100%
きっと80%は共通化できてるはず！
Xamarin万歳(^O^)／

ご清聴ありがとうございました<m(_ _)m>

Xamarin.Formsでみんなでてんこ！

Recommended

Recommended

More Related Content

Featured

Featured (20)

Xamarin.Formsでみんなでてんこ！