c#でのクロスプラットフォーム モバイル開発環境 xamarin のご紹介

クロスプラットフォームで動作するエンタープライズ モバイル アプリ

開発環境のご紹介エクセルソフト株式会社 営業部

Business Development Manager田淵 義人

ytabuchi@xlsoft.com03-5440-7875 / 080-7015-3586

2013/12 © XLsoft K.K.

自己紹介

田淵 義人

エクセルソフトに10年ほど従事

RoboHelp、MadCap Flare、Alchemy CATALYST などのヘルプ、ローカライズ関連製品

、Aspose などの .NET/Java 開発製品の担当に加え、Xamarin も担当になりました。

Web 大好き、HTML5/CSS/JS 大好き、モバイル 大好き

Twitter: @ytabuchi

Blog: http://ytabuchi.hatenablog.com/

本日のスライド：

http://www.slideshare.net/ytabuchi/xamarin-201312-ms

会社概要

名称 エクセルソフト株式会社

設立 平成３年７月１日

所在地 東京都港区三田3-9-9

資本金 １０００万円

事業内容 ソフトウェアの開発・販売事業

主要取引先 伊藤忠テクノソリューションズ、インテル、SCSK、HPCシステムズ、NTTコムウェア、NTTデータ、シネックスインフォテック、新日鉄住金ソリューションズ、ソニー、ソフトバンクBB、ダイワボウ情報システム、東芝、日本アイ・ビー・エム、日本SGI、日本電気、日本ヒューレット・パッカード、日本ユニシス、ネットワールド、野村総合研究所、パナソニック、日立製作所、富士通、マイクロソフト、三菱電機 等

関連会社 XLsoft Corporation アメリカ カリフォルニア州

「開発ツールはエクセルソフトで」をモットーに。

販売/サポートだけでなく、運用もお客様と一緒に考えます。

大きい会社ではありませんが、レスポンスの速さと技術の高さが自慢です。

本日ご紹介する Xamarin について

Mono• Miguel de Icaza (ミゲル・デ・イカザ 1972年 - ) : GNOME、Mono の開発者

• 1999年 ミゲル氏、Helix Code 設立

• 2001年6月 Helix Code、Ximian(ジミアン) に社名変更し、

Mono プロジェクト開始

• 2001年7月 Mono OSS 化

• 2003年8月 Novell、Ximian を買収、ミゲル氏は Novell

開発部門のバイスプレジデントに就任

• 2004年6月 Mono 1.0 リリース

• 2011年4月 Attachmate の Novell 買収に伴い、

Mono 開発者のレイオフ実施

• 2011年5月 Xamarin 設立

• 2011年7月 Novell から Xamarin に Mono、MonoTouch、

Mono for Android などが譲渡される

• 2013年2月 Mono Touch、Mono for Android が Xamarin.iOS、

Xamarin.Android に

Miguel de Icaza (ミゲル・デ・イカザ 1972年 - ) : GNOME、Mono の開発者http://ja.wikipedia.org/wiki/%E3%83%9F%E3%82%B2%E3%83%AB%E3%83%BB%E3%83%87%E3%83%BB%E3%82%A4%E3%82%AB%E3%82%B6Mono (ソフトウェア) - Wikipediahttp://ja.wikipedia.org/wiki/Mono_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2)

Xamarin とは

• C# で 100% ネイティブ な iOS、Android、Windows アプリ

を開発できるクロスプラットフォーム開発ツール

C# のみで開発できる

Visual Studio で開発できる

Microsoft のエコシステムを活用して開発できる

Xamarin のミッション

• 個人向けからエンタープライズまで、すべての主要なデバイスに対し

て、セキュアで統合されたネイティブ モバイル アプリをビルドするベス

トな開発環境を提供します。

• 開発者を喜ばせ、イノベーションを加速し、最高なエンド ユーザー

エクスペリエンスを実現します。

Xamarin: 驚異的な成長

• 2011年設立

• 2年で登録開発者数 430,000名

• 毎月 30,000名以上の開発者が登録

• 70ヶ国に販売

• 製品として 10年を経て、堅牢でエンタ

ープライズ向けのテクノロジーを提供

Mono リリースが2001年6月

• San Francisco & Boston にオフィス

• 2012/7 に 1200万&1600万ドルの

資金調達

“モバイル用のMicrosoft .NET”を提供するXamarinが$12Mを調達 | TechCrunch Japanhttp://jp.techcrunch.com/2012/07/25/20120724microsoft-net-for-mobile-company-xamarin-gets-12-million-round-of-funding/Mono(C#+.NET)でモバイル開発プラットホームの支配をねらうXamarinが好調に乗ってシリーズB$16Mを獲得 | TechCrunch Japanhttp://jp.techcrunch.com/2013/07/18/20130717xamarin-raises-16m-series-b-round-led-by-lead-edge-capital-passes-20000-paid-developer-seats/

2013 Magic Quadrant for MADP (Mobile Application Development Platform) のMobile “Visionary” に認定

2013 Visual Studio Integration Partner of the

Year Award 受賞

Microsoft

and

Xamarin

Microsoft と Xamarin: 共通のゴール

製品の販促: Visual Studio、TFS、

Azure

C# 開発者のエコシステムを育て拡大する

Windows Phone 8 / Windows 8 アプリを促進する

iOS と Android 開発者をC#、Visual Studio とWindows に誘導する

Microsoft と Xamarin の 2013 の活動: 全社的により緊密な関係

• 2013/11/13 Microsoft と Xamarin はグローバルパートナーシップを

発表し、Visual Studio 2013 対応版を発表

Portable Class Library サポート

• 日本マイクロソフト様とエクセルソフトが協業（非公認）

• 渡辺さんから MSC2013 で Xamarin をご紹介いただく！

• Xamarin が Windows Azure モバイルサービスに対応

Microsoft and Xamarin Partner Globally to Help You Build Great Apps | Xamarin Bloghttp://blog.xamarin.com/microsoft-and-xamarin-partner-globally/iOS / Android / Windows すべてに対応したアプリを作るには [ MSC 2013 ] - マイクロソフト エバンジェリストのブログhttp://microsoft-evangelist.hatenablog.jp/entry/msc2013-ios-android-windowsWindows Azure モバイル サービス SDK の GitHub でのオープン ソース化と、Xamarin とのパートナーシップ提携に関するお知らせhttp://bit.ly/WgvZZS

事例：Hitcents - Draw a Stickman EPIC

• MonoGame を利用

XNA 4 の OSS 実装

• 95%コードを共通化

• iOS, Android, Windows ストアア

プリなどを提供

Draw A Stickman EPIC now available for iPhone, iPad and Windows 8 | Xamarin Bloghttp://blog.xamarin.com/draw-a-stickman-epic-now-available-for-iphone-ipad-and-windows-8-2/MonoGame - Write Once, Play Everywhere - Homehttp://monogame.codeplex.com/

サンプルアプリ：Tasky

• シンプルなサンプルアプリ

• クロスプラットフォーム開発の学

習に最適

mobile-samples/TaskyPro at master · xamarin/mobile-samples · GitHubhttps://github.com/xamarin/mobile-samples/tree/master/TaskyPro

事例：Rdio: 50,000 行のコードを共有

• Rdio は、ミュージック ストリーム サービスで、

17ヶ国で 2000万曲を提供しています。

• アプリの開発チームは、以前は、プラットフォ

ームごとのコードベースでビルドとメンテナンス

を行っていました。

• Xamarin を使用することで、現在の Rdio

は iOS、Android、Windows 間で

50,000 行の C# のコードを共有でき、開

発チームは、機能やユーザー エクスペリエン

スに集中することができました。

グローバル パートナーとの強固なネットワーク

Write Once,Run Anywhere

Xamarin のユニークなアプローチ

• あえてすべてを共通化しない

• 既存の C# のスキル、チーム、コードおよびツー

ルを再利用

• ネイティブなユーザーインターフェースとパフォーマ

ンスを備えたアプリをビルド

• プラットフォーム間で 60~90% のソースコード

を共有

• マイクロソフト エコシステムを活用: Visual

Studio、TFS などと同様に、ReSharper など

のプラグインも利用可能

Objective-C と Java で出来ることを Xamarin を使用して C# で実現できます。

Xamarin が提供するもの

• Xamarin.iOS /

Xamarin.Android：各

OS 用の .NET API

• API の .NET ラッパクラス

画面作成

Xamarin.Android は

Activity クラス

Xamarin.iOS は

ViewController

• Visual Studio プラグイン

Xamarin のユニークなアプローチ

Xamarin.iOS は、フル AOT (Ahead Of Time) コンパイルで、Apple の App Store に対応した ARM バイナリを生成。

Xamarin.Android は、Android デバイスの JIT (Just In Time) コンパイルを利用。サイズも小さい。

Application Package Sizes | Xamarinhttp://docs.xamarin.com/guides/android/advanced_topics/application_package_sizes/

モバイル開発環境の動向と比較

モバイル デバイスのシェア

• 日本でも世界でも半分スマホ

• 対応は必須

Other Microso Blackberry

Apple

Android

Non-Smart

0

50

100

150

200

250

Q42009Q12010Q22010Q32010Q42010Q12011Q22011Q32011Q42011Q12012Q22012Q32012Q42012

TotalMobile

Users(millions)

Source:comScore

U.SMobileMarketShareByPla orm

国内モバイル／クライアントコンピューティング機器 家庭ユーザー利用実態調査結果を発表2013年10月3日 IDC Japan株式会社http://www.idcjapan.co.jp/Press/Current/20131003Apr.html

何で作るか？

色々な開発環境、開発ツールを比較してみました

まずは質問

アプリ vs Web アプリ

アプリ Webアプリ（Webサイト）

開発環境・言語

Objective-C (iOS) / Java (Android)

HTML+CSS+JavaScript をサーバーサイドで実装

配布 App Store (iOS) / Google Play (Android)

不要

速度 速い 圧倒的に遅い

開発者 少ない それなりに多い

開発効率 低い シングルソースのため高い

機能 カメラ、センサー、ファイルアクセス、通知 などすべてのスマホ機能利用可能

HTML で表現できることに限定される。ごく一部の機能* は利用可能

HTML5で使えるスマートフォンの機能: http://dev.classmethod.jp/smartphone/mobile-html5/HTML5 compatibility on mobile and tablet browsers with testing on real devices : http://mobilehtml5.org/

ネイティブアプリ vs ハイブリッドアプリ

ネイティブアプリ ハイブリッドアプリ

開発環境・言語

Objective-C / Java JS からネイティブ API を呼び出すフレームワークを利用した開発。ビューは HTML+CSS+JS で作成する。またはロジック、UI をネイティブ。

配布 App Store / Google Play App Store / Google Play

速度 速い 遅い。速くするのは大変。

開発効率 低い それなりに高い

機能 フルアクセス 主要な API をフレームワーク経由で呼び出せる

ネイティブなエクスペリエンスは必須

“HTML5に賭けたことは

Facebookの「最大の戦略

ミス」だった”

2012/9/11

Mark Zuckerberg

Facebook CEO

FacebookのザッカーバーグCEO、「HTML5に賭けたのは失敗」 Androidアプリも間もなくネイティブに - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1209/12/news032.html

Xamarin vs ネイティブ

Xamarin 一般的なネイティブ

言語 C# Objective-C / Java

配布 App Store / Google Play App Store / Google Play

速度 速い 速い

開発者数 多い（C#） それなり

開発効率 高い。60~90% を共有可能。C# での業務アプリのノウハウを流用。エコシステムを活用

低い

サポート サブスクリプションで日本語サポート 開発会社に依存

機能 フルアクセス フルアクセス

更に比較

Xamarin（ハイブリッド） PhoneGAP（ハイブリッド）

開発言語 コア：C#ビュー：HTML+CSS+JS

コア：JSビュー：HTML+CSS+JS

配布 App Store / Google Play App Store / Google Play

速度 速い 遅い

開発効率 高い js でスマホの機能を動かすため、独自のノウハウが必要。

サポート サブスクリプションに含まれる なし

機能 フルアクセス 主要な API を使用可能

更に比較

Xamarin（ハイブリッド） 一般的なハイブリッド

開発言語 コア：C#

ネイティブ UI：C＃

ビュー：HTML+CSS+JS

コア：Objective-C / Javaネイティブ UI：Objective-C / Javaビュー： HTML+CSS+JS

配布 App Store / Google Play App Store / Google Play

速度 速い 速い

開発効率 高い コア、ネイティブ UI 部分を両方のOS 分作成しなくてはいけないため、ネイティブと同じ労力が掛かる。

機能 フルアクセス フルアクセス

そこでもう一度Xamarin

C#

C# で100% ネイティブな iOS、Android、Windows アプリを記述

完全なネイティブ ユーザー エクスペリエンスですべてのプラットフォームにリーチ

iOS、Android、

Windows 向けフィールド

サービス アプリ

ビジネス ロジックとバックエ

ンドコードを共有

完全なネイティブユーザー

インターフェースとパフォーマ

ンス

Xamarin は、ネイティブ iOS、Android とWindows の API を 100% 公開します。

Objective-C または Java で出来ることは、Xamarin を使用して、C# で実現できます。

最新のデバイスの OS のリリースに対応

Apple と Google の最新の

API に常に対応。

Xamarin は、iOS 5、iOS 6、

iOS 6.1 および iOS 7 のリリー

スと同じ日にサポートを提供して

います。✔

コードの共有で開発を加速製品化した Xamarin アプリのコード共有の統計

コードの共有のしくみ

• 1つのソリューションの中に、Core、Android、iOS、

Windows Phone、Windows ストアアプリなどのプ

ロジェクトを含める。

Core プロジェクトを別のプロジェクトからリンク

Core プロジェクトを PCL で

mobile-samples/TaskyPro at master · xamarin/mobile-sampleshttps://github.com/xamarin/mobile-samples/tree/master/TaskyPro

コードの共有のTIPS

• Xamarin.Mobile で連絡先、カメラ、位

置情報の API を抽象化

今後、通知、加速度の API を抽象化予

定

• ライブラリ、Component Storeの活用

Framework, jar を Binding

• Xamarin によるハイブリッド

• クラウドサービスの活用

クロスプラットフォーム モバイル アプリのビルド : XLsoft エクセルソフト http://bit.ly/1ieFur9Xamarin.Mobile クロスプラットフォーム開発 : XLsoft エクセルソフト http://bit.ly/1hhQ7IiBinding Objective-C | Xamarin http://bit.ly/18nv7NxBinding a Java Library (.jar) | Xamarin http://bit.ly/1btHSBeWeb View | Xamarin （iOS の Web View の実装） http://bit.ly/1aUdeo0WebView | Xamarin （Android の WebView の実装） http://bit.ly/1j7bHvE

アーキテクチャ

Part 3 - Setting Up A Xamarin Cross Platform Solution | Xamarin http://bit.ly/1bHYhrf

iOS と Android 向けに Visual Studio と統合

Xamarin では:

C# で 100% プログラム言語を一本化

iOS、Android、Windows アプリ開発に、Visual Studio で 100% IDE を一本化

Visual Studio で iOS アプリ

• Visual Studio から Mac にインス

トールした Xamarin Build Host

に接続

• Mac 側でビルド命令を受け取り、

Xcode でビルド、Visual Studio

でリモートデバッグ

• Visual Studio 上で Interface

Builder による画面作成は次バー

ジョンで対応

iOS Designer

世界初の iOS Designer

Xamarin Studio で利用可能

(Visual Studio でも間もなく利用

可能)

慣れ親しんだ Visual Studio デザ

イナーのスタイルを使用

すべての UIKit エレメントをサポート

カスタムおよびサード パーティ製コン

ポーネントを編集

プロパティへの変更をその場でプレビ

ュー

Localizable.strings で多言語化

Visual Studio で iOS アプリ

現状：コード

Visual Studio で Android アプリ

• Android Designer による画

面設計

• プロジェクト・プロパティの GUI

で Permission を設定

• シンプルなドラッグ アンド ドロッ

プで UI を作成

• 複数のスクリーン サイズ、解像

度、Android バージョンに対

応

• 標準 Android XML ファイル

でレイアウトを保存

• values-ja などで多言語化

Xamarin Component Store

より早くアプリをビルド

• Visual Studio と Xamarin

Studio から直接高品質のプ

リビルド アプリ コンポーネントを

追加

• 綺麗なクロス プラットフォーム

の UI コントロールと Web サ

ービスをほんの数クリックで完

成

Components / Xamarinhttp://components.xamarin.com/

プリビルド アプリで開発を加速

カスタマイズおよび配布

カット アンド ペーストで部品を使用

クロスプラットフォームのベストプラクティス

プリビルド フィールドサービス（営業支援）アプリアプリの主な機能:

ロケーション ベース アサイメント / ルーティング

タイム レコーディング

カメラ キャプチャ

キャプチャの署名

クロスプラットフォーム テクニック

MVVM パターン

Xamarin.Mobile

Component Store のコントロール

各プラットフォームのストレージ用の SQLite

Xamarin/prebuilt-appshttps://github.com/xamarin/prebuilt-apps

プリビルド 従業員ディレクトリ アプリ

アプリの主な機能:

マルチ サーチ オプション

“favorites (お気に入り)” の選択

リストから電話または Email

クロスプラットフォーム テクニック

LDAP レディ

Gravatar インテグレーション

各プラットフォームのストレージ用の SQLite

Xamarin/prebuilt-apps

https://github.com/xamarin/prebuilt-apps

サンプルアプリ Tasky Pro

クロスプラットフォームソリューションの概念学習

コントロールの配置、呼び出し

すべて (3つの) のプラットフォームのストレージ

用の SQLite

本日使用した日本語化済み Tasky Pro は近日中に弊社 Web

で公開します。（その際は Twitter, Blog でもお知らせします。）

mobile-samples/TaskyPro at master · xamarin/mobile-samples · GitHubhttps://github.com/xamarin/mobile-samples/tree/master/TaskyPro

評価版をお試しください

• 以下が含まれます:

Xamarin Studio IDE

iOS と Android 用の Visual Studio 統合

プラットフォームラインタイムと完全なネイティブ SDK バインディ

ング:

Xamarin.iOS, Xamarin.Android, Xamarin.Mac

.NET ベースのクラスライブラリとランタイム

ネイティブコンパイル

コンポーネントストア

プリビルドのフィールドサービス、従業員ディレクトリ アプリ

http://www.xlsoft.com/jp/products/xamarin/xamarin_download.html

ライセンス体系、価格、サポート

• Xamarin.iOS Business Subscription

Xamarin.Android Business Subscription

Xamarin.Mac Business Subscription

2014年3月末までキャンペーン特価 各¥98,000（税別）

1 開発者の永続ライセンス。数量によりボリュームディスカウントあり。

弊社から 1年間 日本語でのサポート

1年間のバージョンアップ

• お見積もりしますので、お気軽に弊社または各販社様までお問い合わせくださ

い。

ご清聴ありがとうございます

ご質問がありましたら、田淵までお気軽にどうぞytabuchi@xlsoft.com

@ytabuchi03-5440-7875 / 080-7015-3586

参考資料 - More Deep Xamarin• Xamarin FAQ よくある質問 : XLsoft エクセルソフト

http://www.xlsoft.com/jp/products/xamarin/faq.html

• Xamarin.Mibile クロスプラットフォーム開発 : XLsoft エクセルソフト

http://www.xlsoft.com/jp/products/xamarin/mobileapi.html

• Visual StudioでiOS／Androidアプリが書けるXamarinを試してみた（iOS編） - Build

Insider

http://www.buildinsider.net/mobile/xamarinvisualstudio/01

• Xamarin Advent Calendar 2013 - Qiita [キータ]

http://qiita.com/advent-calendar/2013/xamarin

• コラム/C#で作れる！ iOS & Android クロス開発環境 Xamarin を試す - WisdomSoft

http://www.wisdomsoft.jp/615.html

• Visual Studio 2013 Launch | ++C++; // 未確認飛行 C ブログ

http://ufcpp.wordpress.com/2013/11/15/visual-studio-2013-launch/

参考資料 - アプリ配信

• 企業内 App 配信 - iOS

アップル - 社内用アプリケーションの開発 - 概要

http://www.apple.com/jp/business/accelerator/

iOS デバイス向けのエンタープライズ App を配信する

http://help.apple.com/iosdeployment-apps/mac/1.1/#

• 企業内 App 配信 – Android

Google Play の Google Apps 向けプライベート チャンネル - Google Apps

管理者用 ヘルプ

https://support.google.com/a/answer/2494992?hl=ja&ref_topic=1734

198

参考資料 - ハイブリッド

• Rails Hub情報局: ネイティブでもHTML5でもない「ハイブリッドアプリ」の

価値 （Cookpad 事例）

http://el.jibun.atmarkit.co.jp/rails/2012/10/html5-d1ba.html

• ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについ

て （Cookpad 中の人のトーク）

http://www.slideshare.net/kazuakihidaka/html5-22091660

• Evolve 2013 Conference – Building Hybrid Apps with

Xamarin （ビデオ、英語）

http://xamarin.com/evolve/2013#session-g1idcxy2rm

参考資料 - デザインガイドライン

• iOS ガイドライン

iOSヒューマンインターフェイスガイドライン: UI設計の基本事項

https://developer.apple.com/jp/devcenter/ios/library/documentation/UserEx

perience/Conceptual/MobileHIG/BasicsPart/BasicsPart.html

• Android ガイドライン

Design | Android Developers

http://developer.android.com/design/index.html

Android デザインを訳してみた - Firespeed

http://firespeed.org/diary.php?diary=kenz-1462

• Windows ストアアプリ ガイドライン

Windows ストア アプリの UX ガイドラインの索引 (Windows)

http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465424.aspx

参考資料 - UI デザインについて

• 同じサービスで比較！iPhoneアプリとAndroidアプリのUI設計の違い |

Webnoborder

http://webnoborder.jp/iphoneandroidui/

• ガイドラインからみたアプリUI〜iPhone用とAndroid用〜

http://www.slideshare.net/toooommmmmmmmy/mayumaro-akb-fix

• Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだ

けでいいの？〜

http://www.slideshare.net/toooommmmmmmmy/androidios-25469241