読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

目次

Xamarin

はじめに

Xamarin (ザマリンと読みます) とは、Gnome, Mono の開発者である Migel de Icaza (ミゲル・デ・イカザ) 氏が立ち上げた企業名であり、C#Android, iOS, Mac のネイティブアプリを作成できる開発ツール郡 (Xamarin.Android*1、Xamarin.iOS*2、Xamarin.Mac*3、Xamarin Studio*4 など) のブランド名です。

2016/4/1 をもって、Visual Studio に付いてくるようになりました。

本ブログは、エクセルソフトの田淵義人が Xamarin に関する様々な情報を記載しています。Xamarin って何だろ?という方、Xamarin についてもっと知りたい。というような開発者の皆様の手助けになれば幸いです。

まだ Xamarin に関する日本語の情報は少ないのが現状ですので、まず手始めにどのような情報を追えばよいのかを纏めておきます。

 

やっと Xamarin.Forms のプロジェクトテンプレートがまともになりました。こちらのエントリー をお読みください。

 

Xamarin とは?

紹介スライド、エントリーなどをご覧ください。

 

qiita.com

書籍

コミュニティ

公式コミュニティサイト Japan Xamarin User Group (JXUG) 

facebook User Group

 

各種情報へのリンク

本ブログの主なエントリー

全般
Xamarin.Forms
Xamarin.iOS、Xamarin.Android 記事
Xamarin.Forms TIPS/逆引き
Xamarin.Forms Plugins/ライブラリ
Xamarin.Forms MVVM
Xamarin Test Cloud/Unit Test
BAD KNOW HOW

全記事一覧 - Xamarin 日本語情報

Xamarin.Forms エントリー纏め

 

事例

事例

 

エクセルソフト Xamarin ページ

Qiita

ブログ、連載記事など

 Xamarin 本家の開発者向けの情報(英語)

Xamarin 学習用リソースまとめ でも公式情報を纏めていますので、ご参照ください。

 

Xamarin 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。
学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。

以上です。

*1:旧 MonoDroid, Mono for Android

*2:旧 MonoTouch

*3:OSS版はMonoMac

*4:OSS 版は MonoDevelop

Image/ImageCell の Source の指定方法

Xamarin Xamarin.Forms

こんにちは。エクセルソフトの田淵です。

よく忘れてしまうので、メモで残します。

Image の SourceProperty は ImageSource

なので、例えば ListViewViewCellImage を使用する場合、XAML で次のように指定したら、

<ListView HasUnevenRows="True"
          ItemsSource="{Binding}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal">
                    <Image Source="{Binding ImageSource}" />
                    <Label Text="{Binding Name}" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

<Image Source="{Binding Image}" /> の Source プロパティには、ImageSource を指定します。(以下では、ImageSource.FromResource を使用しています)

public partial class XamlPage : ContentPage
{
    public XamlPage()
    {
        InitializeComponent();

        var people = new List<Person>()
        {
            new Person
            {
                Name = "Yoshito Tabuchi",
                Company = "XLsoftKK",
                ImageSource = ImageSource.FromResource("App3.Resources.ytabuchi.jpg"),
            },
            new Person
            {
                Name = "Miguel de Icaza",
                Company = "Microsoft",
                ImageSource = ImageSource.FromResource("App3.Resources.miguel.png"),
            },
        };

        this.BindingContext = people;
    }
}

ImageSource

ImageSource は以下を見てもらうとよいと思いますが、FromFile, FromResource, FromUri が利用できます。

developer.xamarin.com

  • FromFile:
    各プラットフォームに画像ファイルを配置する必要がありますが Android で各 DPI 用の画像を用意できたり、iOS で @2x @3x の画像を用意できるので、アイコンなどにはこちらを使用するのが良さそうです。
    画像のビルドアクションは iOS では BundleResourceAndroid では AndroidResource、UWP では Content を設定します。
    デフォルトなので、image.Source = "xxx.png" としても image.Source = ImageSource.FromFile("xxx.png") としても大丈夫です。

  • FromResource(Embedded Images):
    PCL だけに画像を配置する場合は、こちらを使用します。
    画像のビルドアクションは EmbeddedResource(埋め込みリソース) を設定します。
    Resource ID を指定しますが、Resource ID は、「標準の名前空間」の後にフォルダ名、ファイル名となります。今回の例では以下のようなフォルダ構成なので、App3.Resources.xxx.png などとなります。

f:id:ytabuchi:20170116161510p:plain:w300

  • FromUri:
    ImageSource.FromUri(new Uri("https://xxx.com/example-app.png")) というように、Uri で指定します。
    また試せていないですが、ダウンロードした画像をキャッシュできるようです。ImageSource の代わりに、UriImageSourceインスタンス化して指定します。
webImage.Source = new UriImageSource {
    Uri = new Uri("https://xamarin.com/content/images/pages/forms/example-app.png"),
    CachingEnabled = true,
    CacheValidity = new TimeSpan(5,0,0,0)
};

Xamarin 気になった方は

是非 ダウンロード して触ってみてください。Visual Studio 2015 をご利用の方は Update 3 にアップデートする際にカスタムインストールで Xamarin を追加しましょう。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の導入支援サービスを始めました。ベースは基本的なアプリを一緒に作ることで Xamarin を使えるようになって頂く内容ですが、ご要望に応じて講習内容のカスタマイズも可能です。詳しくは田淵までお問い合わせください(^^)

有償セミナー、トレーニング | Xamarin : XLsoft エクセルソフト

Xamarin の情報が欲しい方はこのブログも購読いただいたり、私のTwitterアカウントをフォローいただいたりすると嬉しいです。

私が所属している エクセルソフト の宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの ReSharper (JetBrains)、 や Atlassian の JIRA, Confluence、Office/PDF ファイルを .NET/Java で操作するライブラリ Aspose(アスポーズ)Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる TestComplete などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。

以上です。

【お知らせ】Xamarin 4.2.2.11 で作成できる Xamarin.Forms のテンプレートは不備がほぼ無くなっています

Visual Studio Xamarin Xamarin.Forms

こんにちは。エクセルソフトの田淵です。

2017/1/16 現在、ほぼ直ったと言っていいでしょうか。

現在はこんな感じです

バージョン 4.2.2.11 です。(恐らく Xamarin.Forms のバージョンに併せて Xamarin for Visual Studio もバージョンアップするようにしたっぽいですね。)

f:id:ytabuchi:20170116103520p:plain:w450

Blank App (Xamarin.Forms Portable) でプロジェクトを作成します。

f:id:ytabuchi:20170116103248p:plain:w450

私の環境(Windows 10 1511、Visual Studio 2015 Update 3)では4つワーニングが表示されました。

f:id:ytabuchi:20170116104126p:plain:w450

Visual Studio を再起動すると UWP プロジェクトの2つのエラーはなくなりますので、Android プロジェクトをビルドしてみます。

f:id:ytabuchi:20170116104425p:plain:w450

ビルドすると、プロジェクトの読み込みに関するワーニングだけになりますので、Android プロジェクトを一度「アンロード」して、「再ロード」すると、プロジェクト読み込みのワーニングがなくなるはずです。

f:id:ytabuchi:20170116104624p:plain:w450

素晴らしい!!!

気になる点

ビルドも出来て配置、デバッグ実行も出来ます。

f:id:ytabuchi:20170116105154p:plain:w150

が、以下の2つのライブラリがまだインストールされていません。

Xamarin.Android.Support.Vector.Drawable
Xamarin.Android.Support.Animated.Vector.Drawale

もしかしたら何かで使っているかもしれませんので、気になる方は、Animated.Vector などで検索して、「23.3.0」をインストールしてください。

f:id:ytabuchi:20170116105706p:plain:w450

一緒に「Vector.Drawable」と「Animated.Vector.Drawale」がインストールされます。

f:id:ytabuchi:20170116110225p:plain:w300

Visual Studio でも快適な Xamarin.Forms 開発ライフを送りましょう(^^)








2017/1 より前は以下のような感じでした

Xamarin 4.2.2.11 より前の Xamarin for Visual Studio で作成できる Xamarin.Forms 2.3.3.175 以前のテンプレートで、Android プロジェクトをデバッグ実行すると、ビルドはできますが、実行すると

System.MissingMethodException: Method 'Android.Support.V4.Widget.DrawerLayout.AddDrawerListener' not found.

というエラーが出て実行できませんでした。

これは、テンプレートから標準で作成される Android プロジェクトで以下のライブラリを参照するのですが、

f:id:ytabuchi:20161121164924p:plain:w300

ここに、本来必要な

Xamarin.Android.Support.v7.RecyclerView
Xamarin.Android.Support.Vector.Drawable
Xamarin.Android.Support.Animated.Venctor.Drawale

のライブラリが含まれていないためです。

以下のように、ソリューションを右クリックして、[ソリューションの NuGet パッケージの管理]を選択し、

f:id:ytabuchi:20161121164444p:plain:w450

[更新プログラム]タブで Xamarin.Forms を選択し、[最新の安定版 2.3.3.175]にアップグレードしてください。

f:id:ytabuchi:20161121165231p:plain:w450

上記の不足していたライブラリが追加でインストールされるのがわかると思います。

f:id:ytabuchi:20161121165445p:plain:w300

2016/11/22 追記
Visual Studio 2017 で作成した Xamarin.Forms が最新なのにビルドできないことがあるようです。その場合は、Xamarin.Forms を一度 NuGet でアンインストールして再度インストールしてみてください。

その後、デバッグ実行、開発をお楽しみください。

f:id:ytabuchi:20161121170016p:plain:w300

または

JXUG で作った

github.com

を使ってください。(ダイマ)

以上です。

【お知らせ】 Xamarin 開発パートナーのご紹介

Xamarin お知らせ

こんにちは。エクセルソフトの田淵です。

やっと発表が出来ました。Xamarin での開発を請けてくださるパートナー企業をご紹介いたします。

本日 プレスリリース(PDF) を発表しました。

パートナーさん詳細は以下をご覧ください。

https://www.xlsoft.com/jp/products/xamarin/consulting_partners.html

スタートアップから大手 SIer まで、案件の規模やスピード感、予算に応じて Xamarin でのアプリ開発を承ります。クラウドベンダーさんもいらっしゃるので、アプリ開発に必ず付いてくる、バックエンドの開発までお任せください。

Xamarin は Windows アプリとの共通化に特に力を発揮しますので、そのような案件で見積もりとったらコストが高かったり、最初 iOS で後で Android やりましょう。とか同時リリースじゃない提案をされたりしている方は、ぜひご相談いただければと思います。

引き続きパートナーさんを募集しています。ytabuchi @ xlsoft.com か、Twitterfacebook などなんでも構いませんので、私までご相談ください。

また、C#er を抱えていて、内製でスマホアプリの開発を始めたい会社は、有償のトレーニングを行っていますので、私までご相談ください(^^)

有償トレーニング

実績/事例もどんどん出てきていますので、もっともっと Xamarin での開発が盛り上がることを願って引き続き頑張ります。

Xamarin 気になった方は

是非 ダウンロード して触ってみてください。Visual Studio 2015 をご利用の方は Update 3 にアップデートする際にカスタムインストールで Xamarin を追加しましょう。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の導入支援サービスを始めました。ベースは基本的なアプリを一緒に作ることで Xamarin を使えるようになって頂く内容ですが、ご要望に応じて講習内容のカスタマイズも可能です。詳しくは田淵までお問い合わせください(^^)

有償セミナー、トレーニング | Xamarin : XLsoft エクセルソフト

Xamarin の情報が欲しい方はこのブログも購読いただいたり、私のTwitterアカウントをフォローいただいたりすると嬉しいです。

私が所属している エクセルソフト の宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの ReSharper (JetBrains)、 や Atlassian の JIRA, Confluence、Office/PDF ファイルを .NET/Java で操作するライブラリ Aspose(アスポーズ)Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる TestComplete などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。

以上です。

Xamarin.Forms の StackLayout を活用するには

Xamarin Xamarin.Forms

こんにちは。エクセルソフトの田淵です。

今回は基本中の基本、StackLayout についてです。

公式ドキュメントは StackLayout - Xamarin です。

StackLayout

積み上げ式のレイアウトです。Android では LinearLayoutiOS では 9 以上から UIStackView があるので、iOSAndroid 両方の方が StackLayout の感覚を掴んでいただけると思います。

余談ですが、iOS は 2つ前のバージョンまでサポートすれば良いと言われているので、今から Xamarin.iOS 開発をされる方は対応バージョンを iOS 9 以上にして、なるべく UIStackView を使うと良いでしょう。コチラコチラ の記事が分かりやすいと思います。

f:id:ytabuchi:20170101183245p:plain:w150

公式ドキュメントでは上記画像で説明されているレイアウトですね。

StackLayout の仕組み

StackLayout には、HorizontalOptionsVerticalOptions に加え WidthRequestHeightRequest がメインの要素です。OrientationSpacing の設定要素もあり、Orientation はデフォルトが縦 Vertical で、Spacing がデフォルトで 7(だと思います)のスペースがありますので、ピッタリくっ付けたい場合は Spacing=0 を指定してくだださい。

ここでは標準の縦の StackLayout として話を進めます。例えば次のようなレイアウトの場合、

gist.github.com

gist.github.com

一番上の BoxView は横幅の HorizotalOptions が未記入のためデフォルトの Fill が指定され WidthRequest=100 は無視されます。そのため、次のように表示されます。

f:id:ytabuchi:20170104164025p:plain:w150

Expand について

OrientationVertical の時は VerticalOptions の Expand だけが有効になり、Horizontal の時は HorizontalOptions の Expand だけが有効になります。(そのため先ほどのセクションのサンプルで言うと HorizotalOptions="StartAndExpand" を指定しても無視されます。)Expand を指定したコントロールが利用できる領域をすべての Expand が指定されたコントロールで等分して、各コントロールの領域内で余白をどこに配置するかを決めます。

例えば次のようなレイアウトの場合、一番上の BoxView は HeightRequest=100 が指定されていますが VerticalOptions が未指定のため、広がりません。残りの下三つの BoxView で残りの領域を分け合い、StartAndExpand で自身の下に余白、CenterAndExpand で上下に余白、EndAndExpand で自身の上に余白が配置されます。FillAndExpand は領域最大まで自身のサイズを広げますので、この場合では HeightRequest が無視されます。

gist.github.com

gist.github.com

次のように表示されます。

f:id:ytabuchi:20170104170938p:plain:w450

パフォーマンス

非常に使い勝手がよい StackLayout ですが、ネストが多く発生する場合は、AbsoluteLayout や Grid を使用した方が良いみたいです。公式ドキュメントの ListView のパフォーマンスを向上させるには? を参照してください。

Xamarin 気になった方は

是非 ダウンロード して触ってみてください。Visual Studio 2015 をご利用の方は Update 3 にアップデートする際にカスタムインストールで Xamarin を追加しましょう。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の導入支援サービスを始めました。ベースは基本的なアプリを一緒に作ることで Xamarin を使えるようになって頂く内容ですが、ご要望に応じて講習内容のカスタマイズも可能です。詳しくは田淵までお問い合わせください(^^)

有償セミナー、トレーニング | Xamarin : XLsoft エクセルソフト

Xamarin の情報が欲しい方はこのブログも購読いただいたり、私のTwitterアカウントをフォローいただいたりすると嬉しいです。

私が所属している エクセルソフト の宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの ReSharper (JetBrains)、 や Atlassian の JIRA, Confluence、Office/PDF ファイルを .NET/Java で操作するライブラリ Aspose(アスポーズ)Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる TestComplete などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。

以上です。