SlideShare a Scribd company logo
1 of 17
Download to read offline
Xamarinハンズオン
2017/1/15
ラルフ(@r_ralph_h)
題材
・こんなものを作ってみます
Xamarin Dev Days(世界的に⾏われた
Xamarinのイベント)の登壇者リスト
を表⽰できるアプリ
目標
・Xamarin.Formsによるコード共有の体験
・Bindingを使⽤したMVVMパターンの体験
進め方
基本は
https://github.com/chomado/xamarin-dev-doc
を使⽤しながら進めます。
難しい部分はスライドにて補⾜説明を⼊れます
MVVMについて
MVVM(Model-View-ViewModel)
ソフトウェアアーキテクチャパターンの⼀つ
ソフトウェアアーキテクチャパターン?
・ソフトの⽣産性や保守性を上げるための考え⽅
・役割分担をすることでデータや処理の流れをわかり
やすくする
Model
・主にデータと⼿続きを表す
・データ:登壇者の名前・URL・タイトル など
・⼿続き:登壇まで何時間か計算する処理 など
・Modelは⾃⾝のデータがどのような形で描画される
か知らない
View
・ユーザーへの表⽰とユーザーからの⼊⼒を担う
・XFでは、Xamlを使⽤してViewを作れる
・MVVMにおいて、Viewは複雑なことはしない
・後述のViewModelの持つ情報をただ表⽰するだけ
ViewModel
・ViewとModelの架け橋
・Viewに描画する状態の保持
・Viewからの⼊⼒を変換し、Modelに渡す
・BindingによってViewModelが変更された時に⾃動
的にViewへ反映される
Binding(ViewBinding)
・V-VM間を結ぶ技術
・⼀⽅が変わった場合に対応する他⽅も変化する
aa
ViewModel → View
string	hoge =	"aa";
hoge =	"bb";
bb
①
②
③
aa
View	→ ViewModel
string	hoge =	"aa";
hoge =>	"bb"
bb
①
②
③
PropertyChanged
・ViewModelの状態が変化する(プロパティによって
フィールドが書き換えられる)時に
OnPropertyChangedを呼ぶ
・XFのBindingでは、この時に変化したプロパティに
対応するViewを変更する
バッキングフィールド
・フィールド:データを保存する変数
・プロパティ:フィールドの値を読み書きする⼿段
・フィールドへの読み書きのイベントを取得したい!
・Getter/Setterを実装すればできる→カッコ悪い
・プロパティで取得する
バッキングフィールド
private int hoge; // 直接いじられると困るのでprivateに
// こいつがバッキングフィールド
public int Hoge
{
get { return hoge; }
set
{
hoge = value;
// ここでイベント取れる!
}
}
バッキングフィールド
・Modelで書いた以下の書き⽅を⾃動実装プロパティ
と呼ぶ
public int Hoge { get; set; }
・これによりフィールドとプロパティがよしなに⽣成
される
OthloEvent #9 Xamarinハンズオン

More Related Content

What's hot

What's hot (10)

Microsoft loves PHP WebMatrix + Windows Azure
Microsoft loves PHP WebMatrix + Windows AzureMicrosoft loves PHP WebMatrix + Windows Azure
Microsoft loves PHP WebMatrix + Windows Azure
 
塹壕よりLivetとMVVM
塹壕よりLivetとMVVM塹壕よりLivetとMVVM
塹壕よりLivetとMVVM
 
Knockout を用いた大規模 JavaScript 開発
Knockout を用いた大規模 JavaScript 開発Knockout を用いた大規模 JavaScript 開発
Knockout を用いた大規模 JavaScript 開発
 
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有
 
XAML Islands
XAML IslandsXAML Islands
XAML Islands
 
XAML Islands その2
XAML Islands その2XAML Islands その2
XAML Islands その2
 
30分でわかった気になるWindows azure
30分でわかった気になるWindows azure30分でわかった気になるWindows azure
30分でわかった気になるWindows azure
 
モダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないためにモダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないために
 
Xamarin.iOS
Xamarin.iOSXamarin.iOS
Xamarin.iOS
 
Lightweight CMS
Lightweight CMSLightweight CMS
Lightweight CMS
 

Viewers also liked

Viewers also liked (16)

五軒家スプリント10月度 タイムスケジュール
五軒家スプリント10月度 タイムスケジュール五軒家スプリント10月度 タイムスケジュール
五軒家スプリント10月度 タイムスケジュール
 
Does Infer dream of design by contract?
Does Infer dream of design by contract?Does Infer dream of design by contract?
Does Infer dream of design by contract?
 
WebサービスにおけるWebデザイナーの働き方
WebサービスにおけるWebデザイナーの働き方WebサービスにおけるWebデザイナーの働き方
WebサービスにおけるWebデザイナーの働き方
 
名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」
名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」
名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」
 
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
 
サーバー構築ハンズオンマニュアル サンプル
サーバー構築ハンズオンマニュアル サンプルサーバー構築ハンズオンマニュアル サンプル
サーバー構築ハンズオンマニュアル サンプル
 
Hands-on VeriFast with STM32 microcontroller
Hands-on VeriFast with STM32 microcontrollerHands-on VeriFast with STM32 microcontroller
Hands-on VeriFast with STM32 microcontroller
 
データ解析のための統計モデリング入門第5章
データ解析のための統計モデリング入門第5章データ解析のための統計モデリング入門第5章
データ解析のための統計モデリング入門第5章
 
伝える・見せる技術
伝える・見せる技術伝える・見せる技術
伝える・見せる技術
 
120901fp key
120901fp key120901fp key
120901fp key
 
鹿児島に引っ越しました
鹿児島に引っ越しました鹿児島に引っ越しました
鹿児島に引っ越しました
 
サーバー構築ハンズオンマニュアル セキュアなプロトコルを使ってみようサンプル
サーバー構築ハンズオンマニュアル セキュアなプロトコルを使ってみようサンプルサーバー構築ハンズオンマニュアル セキュアなプロトコルを使ってみようサンプル
サーバー構築ハンズオンマニュアル セキュアなプロトコルを使ってみようサンプル
 
データ解析のための統計モデリング入門 1~2章
データ解析のための統計モデリング入門 1~2章 データ解析のための統計モデリング入門 1~2章
データ解析のための統計モデリング入門 1~2章
 
Design Sprint 概要 / デザインスプリント概要
Design Sprint 概要 / デザインスプリント概要Design Sprint 概要 / デザインスプリント概要
Design Sprint 概要 / デザインスプリント概要
 
Design Sprint ガイドブック v2
Design Sprint ガイドブック v2Design Sprint ガイドブック v2
Design Sprint ガイドブック v2
 
LT_Murayakuba_2016
LT_Murayakuba_2016LT_Murayakuba_2016
LT_Murayakuba_2016
 

Similar to OthloEvent #9 Xamarinハンズオン

Xamarin で クラシックデスクトップ 2
Xamarin で クラシックデスクトップ 2Xamarin で クラシックデスクトップ 2
Xamarin で クラシックデスクトップ 2
m ishizaki
 
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD PatternApplication Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Atsushi Kambara
 
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
Taiji Miyabe
 
20140322 mvvm crossforwindowsstoreapps-pdf
20140322 mvvm crossforwindowsstoreapps-pdf20140322 mvvm crossforwindowsstoreapps-pdf
20140322 mvvm crossforwindowsstoreapps-pdf
Takayoshi Tanaka
 

Similar to OthloEvent #9 Xamarinハンズオン (20)

Xamarin 概要 2017/01/15
Xamarin 概要 2017/01/15Xamarin 概要 2017/01/15
Xamarin 概要 2017/01/15
 
Xamarin概要と活用方法
Xamarin概要と活用方法Xamarin概要と活用方法
Xamarin概要と活用方法
 
いまさら学ぶMVVMパターン
いまさら学ぶMVVMパターンいまさら学ぶMVVMパターン
いまさら学ぶMVVMパターン
 
Xamarin概要と活用方法
Xamarin概要と活用方法Xamarin概要と活用方法
Xamarin概要と活用方法
 
Xamarin で クラシックデスクトップ 2
Xamarin で クラシックデスクトップ 2Xamarin で クラシックデスクトップ 2
Xamarin で クラシックデスクトップ 2
 
Xamarin.Forms アプリケーション 設計パターン
Xamarin.Forms アプリケーション 設計パターンXamarin.Forms アプリケーション 設計パターン
Xamarin.Forms アプリケーション 設計パターン
 
ゆるふわ Xamarin Tips
ゆるふわ Xamarin Tipsゆるふわ Xamarin Tips
ゆるふわ Xamarin Tips
 
Xamarin.Forms.WPF を試してみた
Xamarin.Forms.WPF を試してみたXamarin.Forms.WPF を試してみた
Xamarin.Forms.WPF を試してみた
 
Introduction to Xamarin - JXUG 20171209
Introduction to Xamarin - JXUG 20171209Introduction to Xamarin - JXUG 20171209
Introduction to Xamarin - JXUG 20171209
 
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD PatternApplication Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD Pattern
 
NET Standard と Xamarin
NET Standard と XamarinNET Standard と Xamarin
NET Standard と Xamarin
 
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
 
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT appsMAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
 
20140322 mvvm crossforwindowsstoreapps-pdf
20140322 mvvm crossforwindowsstoreapps-pdf20140322 mvvm crossforwindowsstoreapps-pdf
20140322 mvvm crossforwindowsstoreapps-pdf
 
Xamarin+MVVMCross のあれこれ
Xamarin+MVVMCross のあれこれXamarin+MVVMCross のあれこれ
Xamarin+MVVMCross のあれこれ
 
JSUG SpringOnePlatform 2016報告会 Case study2 - feed back - springoneplatform
JSUG SpringOnePlatform 2016報告会 Case study2 - feed back - springoneplatformJSUG SpringOnePlatform 2016報告会 Case study2 - feed back - springoneplatform
JSUG SpringOnePlatform 2016報告会 Case study2 - feed back - springoneplatform
 
俺とHashiCorp
俺とHashiCorp俺とHashiCorp
俺とHashiCorp
 
Developers.io.札幌 xamarinってどうよ
Developers.io.札幌 xamarinってどうよDevelopers.io.札幌 xamarinってどうよ
Developers.io.札幌 xamarinってどうよ
 
ドメイン駆動設計入門
ドメイン駆動設計入門ドメイン駆動設計入門
ドメイン駆動設計入門
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
 

Recently uploaded

Recently uploaded (7)

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 

OthloEvent #9 Xamarinハンズオン