第4回 JXUG Conference with dotNetConf 2015 Japan

1. 2015.04.11 #4 JXUG Conference with dotNetConf 2015
ビヘイビア・コンテキストメニュー・リストビュースクロールなど、Ver1.3以降に追加された新機能
の使用方法について
Xamarin.Formsで作成する翻訳機能付き
Twitterクライアント

2. 自己紹介
 識別子 ＳＩＮ/札幌ワークス
 Twitter @furuya02
 スタッフ CLR/H
 ブログ SIN@SAPPOROWORKSの覚書
 Microsoft MVP for Visual C# (2013/1～)
 フリーソフト BlackJumboDog
 BuildInsider Xamarin逆引きTips

3. Version1.3(1.4)

4. Xamarin 1.3以降アップデート
年末の1.3は、大きな変更だった・・・
App Lifecycle OnStart,OnSleep,OnResume (1.3)
Properties Dictionary (1.3)
ModalPushed,ModalPopped (1.4)
Styles (1.3)
Behaviors (1.3)
Triggers (1.3)
Font (1.3)
ListView context actions (1.3)
pull to refresh (1.4)
headers and footers (1.4)
row separator (1.4)
Scroll (1.3)
iOS 64bit support (1.3)
ScrollView offset (1.4)
OpenGLRenderer (1.4)

5. Xamarin 1.3以降アップデート
Xamarin.Formsに関するものをいくつか試してみました
App Lifecycle OnStart,OnSleep,OnResume (1.3)
Properties Dictionary (1.3)
ModalPushed,ModalPopped (1.4)
Styles (1.3)
Behaviors (1.3)
Triggers (1.3)
Font (1.3)
ListView context actions (1.3)
pull to refresh (1.4)
headers and footers (1.4)
row separator (1.4)
Scroll (1.3)
iOS 64bit support (1.3)
ScrollView offset (1.4)

6. サンプルアプリ

7. サンプルアプリ
本翻訳機能付きTwitter
コンテキストアクションから
翻訳表示に切替え
プルリフレッシュで更新

8. サンプルアプリ
本翻訳機能付きTwitter
オプションメニュー
トリガーによるUI拡張

9. サンプルアプリ
本翻訳機能付きTwitter
検索メニュー
ビヘイビアによるUI拡張

10. サンプルアプリ
本翻訳機能付きTwitter
スタイルによる整形

11. サンプルアプリ
本翻訳機能付きTwitter
ListViewのヘッダ
ライフサイクル・プロパティーズディクショナリー
セッションデータ保存
Tweetデータ/オプション設定/検索文字etc.

12. サンプルコード
参考になるものが少しでもあれば幸いです
https://github.com/furuya02/TranslationTwitter
利用のためには、Twitterと翻訳サービス利用のためのアクセスキーが必要です。
class Translator{
const string ClientId = "{ClientId}";
const string ClientSecret = "{ClientSecret}";
class Twitter{
const string ApiKey = "{ApiKey}";
const string ApiSecret = "{ApiSecret}";
const string AccessToke = "{AccessToke}";
const string AccessTokeSecret = "{AccessTokeSecret}";

13. テンプレートでは、V1.3.1.6296
2015年4月9日現在、最新のstableは1.4.1.6349
v1.4となっているものは、インストールしないと動作しません。
PM> Get-Package
Id Version Description/Release Notes
-- ------- -------------------------
CoreTweet 0.4.0 …
Microsoft.Bcl 1.1.10 …
Microsoft.Bcl.Build 1.0.14 …
Microsoft.Net.Http 2.2.29 …
Newtonsoft.Json 6.0.8 …
Wptoolkit 4.2013.08.16 …
Xamarin.Android.Support.v4 21.0.3.0 …
Xamarin.Forms 1.4.1.6349 …

14. サンプルプログラムは、Xamarni.Forms Version1.4.1.6349で作成されてい
ます
PM> Get-Package
Id Version Description/Release Notes
-- ------- -------------------------
CoreTweet 0.4.0 …
Microsoft.Bcl 1.1.10 …
Microsoft.Bcl.Build 1.0.14 …
Microsoft.Net.Http 2.2.29 …
Newtonsoft.Json 6.0.8 …
Wptoolkit 4.2013.08.16 …
Xamarin.Android.Support.v4 21.0.3.0 …
Xamarin.Forms 1.4.1.6349 …

15. デモ

16. ライフサイクル

17. App Lifecycle
アプリ起動時 OnStart()
OnStart()

18. App Lifecycle
バックグランドへ移行した時 OnSleep()
OnSleep()

19. App Lifecycle
バックグランドからの復帰時 OnResume()
OnResume()

20. App Lifecycle
アプリ終了時は、特になし

21. App Lifecycle
セッションデータの保存・読込みの適切なタイミング
OnStart(){ Read() }

22. App Lifecycle
セッションデータの保存・読込みの適切なタイミング
OnSleep(){ Save() }

23. App Lifecycle
セッションデータの保存・読込みの適切なタイミング
OnSleep(){ Save() }

24. Properties Dictionary
Application.Currentは、何処からでも使用できて超便利
//保存
Application.Current.Properties ["key"] = value;
//読込み
var value = Application.Current.Properties ["key"] as T;

25. Properties Dictionary
1件１件のデータは、Tweetクラスで表現されている
//１つのTweetを表現するクラス
class Item{
public string Name { get; set; } //表示名
public string Text { get; set; } //メッセージ
public string ScreenName { get; set; } //アカウント名
public string CreatedAt { get; set; } //作成日時
public string Icon { get; set; } //アイコン
public long Id { get; set; } //Id
public string TranslatedText { get; set; } //翻訳済みテキスト
public bool IsTranslated { get; set; }
}

26. Properties Dictionary
Application.Current.Propertiesで、シリアライズする
var p = Application.Current.Properties;
//保存 MyPage.Save() [App.cs]
foreach(var a in _items){
p["items_" + i++] = a;
//読み込み MyPage.Read() [App.cs]
_items.Add(p["items_" + i++] as Item);

27. Properties Dictionary
ごみは、Clearで削除する
var p = Application.Current.Properties;
//初期化 MyPage.Save() [App.cs]
p.Clear();

28. Properties Dictionary
保存したのは、検索文字列・オプション・Tweetデータなど
//App.OnSleep() [App.cs]
protected override void OnSleep() {
((MyPage)MainPage).Save();
}
//MyPage.Save() [App.cs]
public void Save() {
var p = Application.Current.Properties;
p["ListViewMax"] = _option.ListViewMax;
p["Separator"] = _option.Separator;
p["Count"] = _listViewHeader.Count;
・・・
【参考】 WindowsPhoneXamarin でセッションデータを保存・復元したい
【Windows Phone 8.0 編】
http://matatabi-ux.hateblo.jp/entry/2015/03/23/120000
App.OnSleep() [App.cs]
MyPage.Save() [App.cs]

29. セパレータ

30. セパレータ(ListView)
Ver1.4以降、プロパティが増えました

31. セパレータ(ListView)
Android

32. セパレータ(ListView)
iOS

33. セパレータ(ListView)
WindowsPhoneには、セパレータを表示するオプションがない・・・

34. セパレータ(ListView)
気が付かないレベル
Option.Option() [Option.cs]

35. ヘッダ・フッタ

36. ヘッダ・フッタ(ListView)
Ver1.4以降、プロパティが増えました

37. ヘッダ・フッタ(ListView)
Headerプロパティ（データコンテキスト）
var listView = new ListView() {
ItemsSource = Enumerable.Range(0, 100).Select(n => "Item" + n),
};
listView.Header = "TEST“;
①Headerプロパティに
セットする

38. ヘッダ・フッタ(ListView)
Headerプロパティ（データコンテキスト）
class Parson {
public String Name { get; set; }
public int Age { get; set; }
}
・・・
listView.Header =
new Parson{Name="Taro",Age=20}; ②コンテキストの
ToString()で処理されて
いる

39. ヘッダ・フッタ(ListView)
HeaderTemplateプロパティ（データテンプレート）
listView.Header = new Parson{Name="Taro",Age=20};
listView.HeaderTemplate = new DataTemplate(typeof(HeaderTemplate));
public class HeaderTemplate : ContentView{
public HeaderTemplate() {
var label = new Label();
label.SetBinding(Label.TextProperty, "Name");
Content = label;
}
}
③データテンプレートを
指定する

40. ヘッダ・フッタ(ListView)
HeaderTemplateプロパティ（データテンプレート）
listView.Header = new Parson{Name="Taro",Age=20};
listView.HeaderTemplate = new DataTemplate(typeof(HeaderTemplate));
public class HeaderTemplate : ContentView{
public HeaderTemplate() {
var label = new Label();
label.SetBinding(Label.TextProperty, "Name");
Content = label;
}
}
※データテンプレートは
ContentViewを継承する

41. ヘッダ・フッタ(ListView)
データテンプレートによる整形（ContentView/ViewCell)を継承
listView.Header
listView.HeaderTemplate
class HeaderTemplate : ContentView
listView.ItemsSource
listView.ItemTemplate
class ItemTemplate: ViewCell
MainView. MainView() [MainView.cs]
ListViewHeader() [ListViewHeader.cs]

42. プル・リフレッシュ

43. プル・リフレッシュ(ListView)
追加されたイベント・プロパティなどは次のとおり
event EventHandler Refreshing;
bool IsPullToRefreshEnabled;
bool IsRefreshing;
ICommand RefreshCommand;
public void BeginRefresh ();
public void EndRefresh ();

44. プル・リフレッシュ(ListView)
プルリフレッシュの機能ON
event EventHandler Refreshing;
bool IsPullToRefreshEnabled;
bool IsRefreshing;
ICommand RefreshCommand;
public void BeginRefresh ();
public void EndRefresh ();
①trueにすると有効になる

45. プル・リフレッシュ(ListView)
グルグルの間はtrue
event EventHandler Refreshing;
bool IsPullToRefreshEnabled;
bool IsRefreshing;
ICommand RefreshCommand;
public void BeginRefresh ();
public void EndRefresh ();
②引っ張るとtrueになる

46. プル・リフレッシュ(ListView)
更新等の処理を仕込む
event EventHandler Refreshing;
bool IsPullToRefreshEnabled;
bool IsRefreshing;
ICommand RefreshCommand;
public void BeginRefresh ();
public void EndRefresh ();
③処理を記述する

47. プル・リフレッシュ(ListView)
止めないと、永遠にクルクル
event EventHandler Refreshing;
bool IsPullToRefreshEnabled;
bool IsRefreshing;
ICommand RefreshCommand;
public void BeginRefresh ();
public void EndRefresh ();
④クルクルを止める

48. プル・リフレッシュ(ListView)
リストの最下行は処理できない・・・
IsPullToRefreshEnabled = true;
Refreshing += (s, a) =>{
//ここで更新処理
IsRefreshing = false;
};
MainView.MainView() [MainView.cs]

49. コンテキストアクション

50. コンテキストアクション(ListView)
外観は、プラットフォームごとかなり違います

51. コンテキストアクション(ListView)
セルのテンプレートに仕込む
var listView = new ListView() {
ItemsSource = Enumerable.Range(0, 100).Select(n => "Item" + n),
ItemTemplate = new DataTemplate(() => new MyCell())
};
①まずは、テンプレートが必要

52. コンテキストアクション(ListView)
実体はMenuItemで、ContextActionsに追加するだけ
internal class MyCell : ViewCell {
public MyCell() {
・・・
var deleteAction = new MenuItem {
Text = "Delete",
Command = new Command(処理)
IsDestructive = true, //背景赤色
};
ContextActions.Add(deleteAction);
②MenuItemを生成
③ContextActionsプロパティに追
加する

53. コンテキストアクション(ListView)
翻訳の処理をブッこみました
MyCell.MyCell() [MainView.cs]

54. コンテキストアクション(ListView)
見た目はやっぱり大きく違う・・・
MyCell.MyCell() [MainView.cs]

55. ビヘイビア

56. ビヘイビア
サブクラス化せず、UIコントロールに機能を追加
public class MyBehavior : Behavior<Entry> {
・・・
}
var entry = new Entry{
・・・
Behaviors = { new MyBehavior() }
};
①Behaviorを継承したクラス
を作成
②UIコントロールの
Behaviorsプロパティに追加

57. ビヘイビア
機能の追加と削除
public class MyBehavior : Behavior<Entry> {
protected override void OnAttachedTo(Entry bindable) {
bindable.TextChanged += CheckEmail;
}
protected override void OnDetachingFrom(Entry bindable) {
bindable.TextChanged -= CheckEmail;
}
・・・
}
④OnDetachingFromで破棄
③OnAttachedToでハンドラ
の追加

58. ビヘイビア
記号など入力を拒否（テキスト色を赤色にして、OKボタンを非表示にした）
SearchBehavior. OnAttachedTo() [SearchBehavior.cs]
SearchBehavior. OnDetachingFrom() [SearchBehavior.cs]
SearchView.SearchView() [SearchView.cs]

59. トリガー

60. トリガー
イベントやプロパティの変化に応じ、UIの外観変更をXAMLだけで実装
プロパティ値の変化
プロパティトリガー（Property Trigger）
別コントロールのプロパティ値の変化
データトリガー（Data Trigger）
イベント
イベントトリガー（Event Trigger）
複数トリガーの複合状態
マルチトリガー（Multi Trigger）

61. トリガー
プロパティトリガー
<Entry>
<Entry.Triggers>
<Trigger TargetType="Entry" Property="IsFocused" Value="True">
<Setter Property="BackgroundColor" Value="Aqua" />
</Trigger>
</Entry.Triggers>
</Entry>
①Trigger
IsFocusedプロパティがTrueの時
②Setter
BackgroundColorプロパティ
がAquaとなる

62. トリガー
データトリガー
<Entry x:Name="entry" Text=""/>
<Button Text="OK">
<Button.Triggers>
<DataTrigger TargetType="Button"
Binding="{Binding Source={x:Reference entry},
Path=Text.Length}" Value="0">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Button.Triggers>
</Button>
①Trigger
EntryのText.Lengthが0の時
②Setter
IsEnableがFalseとなる

63. トリガー
フォーカスが入ると水色、数値以外だとテキストを赤色にしてOKを非表示
[OptionView.xaml]
プロパティトリガー
フォーカスが入ると水色
イベントトリガー
数値以外の時、テキスト赤色
データトリガー
Entryのテキスト色が赤の時、Disable

64. スタイル

65. スタイル
プロパティ指定をリソースとしてまとめて行う
<ContentView ・・・>
<ContentView.Resources>
<ResourceDictionary>
<Style TargetType="Button">
<Setter Property="BorderColor" Value="White"/>
<Setter Property="BorderWidth" Value="1"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="BorderRadius" Value="5"/>
</Style>
</ResourceDictionary>
</ContentView.Resources>
<StackLayout>
<Button Text="OK">
<Button Text="キャンセル"/>
</StackLayout>
リソースとしてスタイルを定義す
る
TargetType=Button
全てのButtonに適用
される
[OptionView.xaml]

66. Twitter

67. CoreTweet
バージョンによってはPCLで使用できません
PM> Install-Package CoreTweet
依存関係 'Newtonsoft.Json (≥ 4.5.11)' の解決を試みています。
'Newtonsoft.Json 4.5.11' をインストールしています。
'Newtonsoft.Json 4.5.11' が正常にインストールされました。
'CoreTweet 0.4.0' をインストールしています。
'CoreTweet 0.4.0' が正常にインストールされました。
'Newtonsoft.Json 4.5.11' を Project に追加しています。
'Newtonsoft.Json 4.5.11' が Project に正常に追加されました。
'CoreTweet 0.4.0' を Project に追加しています。
'CoreTweet 0.4.0' が Project に正常に追加されました。
Newtonsoft.Jsonは、依存関係から
自動的にインストールされます。
【参考】 CoreTweet/CoreTweet - クイック チュートリアル
https://github.com/CoreTweet/CoreTweet/wiki/クイック-チュートリアル

68. 開発者ページ
https://apps.twitter.com/
Application Settings
Consumer Key (API Key)
Consumer Secret (API Secret)
Your Access Token
Access Token
Access Token Secret

69. 翻訳

70. Microsoft Translator
1 ヶ月あたり200万文字まで無料で利用可能です
http://api.microsofttranslator.com/v2/Http.svc/Translate?text="文字列”

71. Microsoft Translator
利用の手順は３ステップ（ClientId及びClientSecretを取得する）
1) Live ID 取得
2) サブスクリプション登録
3) アプリケーション登録
クライアントID(ClientId)
顧客の秘密(ClientSecret)
【参考】 SIN@SAPPOROWORKSの覚書 - Xamarin.Forms 機械翻訳
http://furuya02.hatenablog.com/entry/2015/03/02/042823

72. HttpClient
System.Net.HttpはWindowsPhoneで利用できない
PM> Install-Package Microsoft.Net.Http
依存関係 'Microsoft.Bcl (≥ 1.1.10)' の解決を試みています。
依存関係 'Microsoft.Bcl.Build (≥ 1.0.14)' の解決を試みています。
'Microsoft.Bcl.Build 1.0.14' をインストールしています。
'Microsoft.Bcl.Build 1.0.14' が正常にインストールされました。
'Microsoft.Bcl 1.1.10' をインストールしています。
'Microsoft.Bcl 1.1.10' が正常にインストールされました。
'Microsoft.Net.Http 2.2.29' をインストールしています。
'Microsoft.Net.Http 2.2.29' が正常にインストールされました。
'Microsoft.Bcl.Build 1.0.14' を Project に追加しています。
'Microsoft.Bcl.Build 1.0.14' が Project に正常に追加されました。
'Microsoft.Bcl 1.1.10' を Project に追加しています。
'Microsoft.Bcl 1.1.10' が Project に正常に追加されました。
'Microsoft.Net.Http 2.2.29' を Project に追加しています。
'Microsoft.Net.Http 2.2.29' が Project に正常に追加されました。
【参考】 SIN@SAPPOROWORKSの覚書
- Xamarin.Forms HttpClientで超シンプルにダウンロードする
http://furuya02.hatenablog.com/entry/2014/10/05/053525

73. ご清聴ありがとうございました
札幌ワークス
http://www.sapporoworks.ne.jp/spw