Xamarin Sketches ことはじめ

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

Xamarin Sketches で遊んでみましたので簡単に使い方を紹介します。  
Sketches の概要については [Xamarin Platform Preview (Android Player, Sketches, Profiler) : XLsoft エクセルソフト](http://www.xlsoft.com/jp/products/xamarin/xamarin_platform_previews.html) をご参照ください。

C# で Xamarin.Forms のレイアウトを作成していく場合の練習やアニメーションの確認などに最適だと思います。(F# でも使えるようになっているようですが、まだ調べていません。)

# 必要なシステム

- Mac の Xamarin Studio 5.6 (Beta) か 5.6.1 (Alpha)
- 有効な Xamarin.iOS、Xamarin.Android の Subscription ライセンス
    - **なんか STARTER でも動くっぽいです！(STARTER では Forms 使えないのに！ｗ)  (2014/10/20 追加)**
- Xcode 6 と最新の iOS SDK
- 最新の Android SDK 
- (多分) Xamarin Android Player

※現在はまだ Mac 版 Xamarin Studio のみの機能ですが、Visual Studio 版も追って提供されます。待ちきれない！って場合は先に Mac で試しましょう。
STARTER 動作参考画面 (STARTER の方は是非試してみてください。で、結果を報告頂けると嬉しいですｗ)
![スクリーンショット 2014-10-20 14.40.47.png](https://qiita-image-store.s3.amazonaws.com/0/32453/3c39b21d-ed60-3c33-29cd-43bc480ec5aa.png)

# はじめに

このエントリーでは、C# で Xamarin.Forms の画面を構築し、Xamarin Android Player と iOS Simulator の両方でチェックするまでの手順や TIPS を記載しています。
Xamarin のドキュメントによると Android 版 (多分 Forms ではなくネイティブ Android) は early preview のようなので、Android ネイティブの画面を Sketches でテストするのはまだ難しいのかもしれません。

Android、iOS 両方でチェックしますので、ファイルを作成する前に、Xamarin Android Player を起動しておきましょう。iOS Simulator は自動起動してくれますが、Xamarin Android Player は自動起動してくれないようです。



# ファイル作成

Sketches ファイルを作成します。
`ファイル > 新規 > ファイル` から `C# > Sketches > Xamarin.Android Sketch` を選択します。

![スクリーンショット 2014-10-19 23.29.16.png](https://qiita-image-store.s3.amazonaws.com/0/32453/4c5aba2d-9171-8621-93b7-a95624dd754e.png)

ここでは Android を選択していますが、テンプレートの Android、iOS(Classic, Unified)、Mac はそれぞれ以下のようにデフォルトの using が変わるだけで、後で対象プラットフォームはすぐに変更できるため何でも大丈夫です。

```csharp:android.sketches
//using は無し
```
```csharp:ios_classic.sketches
using MonoTouch.UIKit;
using MonoTouch.Foundation;
using System.Drawing;
```
```csharp:ios_unified.sketches
using UIKit;
using Foundation;
using CoreGraphics;
```
```csharp:mac.sketches
using AppKit;
using Foundation;
using CoreGraphics;
```

> 因みに、Sketches ファイルをテキストエディタで開くとファイル先頭に
> // The following line is automatically generated by Xamarin and should not be edited:
> // {"AgentType":4}
> と書かれていて、Agent を指定しているようです。Android は 4 みたいですね。

今回は Xamarin.Forms の Sketches を試しますので、何も追加されない Android でやりましょう。

# コードを書いてみよう

ファイルを作成すると、以下のようになります。
![スクリーンショット 2014-10-19 23.52.12.png](https://qiita-image-store.s3.amazonaws.com/0/32453/f0be85a2-d4e2-db4a-e3b0-793649c4473a.png)

暫く待つと Xamarin Android Player に Agent が自動インストールされて起動し、以下の画面になります。
![Sketches_Android_Android.png](https://qiita-image-store.s3.amazonaws.com/0/32453/b5e214c5-37d4-259d-7d21-ea2c2ac7a0b4.png)

TabView になっていない場合は、Xamarin Studio 右側の Output & Analysis セクションの Toolkit が Android になっていると思いますので Xamarin.Forms に変更しましょう。変更後、Xamarin.Forms 用の Agent がインストールされるっぽくて初回は少し時間が掛かると思います。(どうしても表示されない場合は、iOS でやりましょう。)

無事画面が表示されたら、早速コードを書いてみましょう。

まずはコンソール出力してみます。

```csharp
var s = "Hello World!";

Console.WriteLine (s);
s.Substring (6);
```

![スクリーンショット 2014-10-20 00.09.53.png](https://qiita-image-store.s3.amazonaws.com/0/32453/cb1ad244-7fe6-ec65-270b-e2f6f599d52e.png)

素晴らしいですね！
画面中央がなんか色んなのが処理された結果、右側にコンソール出力があるので、エラーもここでチェックできます。

基本的な使い方はドキュメント 
[Introduction | Xamarin](http://developer.xamarin.com/guides/cross-platform/sketches/introduction/) と [Walkthrough | Xamarin](http://developer.xamarin.com/guides/cross-platform/sketches/walkthrough/) をご覧ください。


# Xamarin.Forms コードを書いてみよう

using を追加します。

```csharp
using Xamarin.Forms
```

Sketches では、Forms の画面は RootPage に Children.Add するのがお作法のようなので、次を追加してみましょう。

```csharp
var label = new Label {
    Text = "ラベルのテキスト",
    BackgroundColor = Color.Red,
};

RootPage.Children.Add(new ContentPage {
    Title = "Sketches サンプル！",
        Content = label,
});
```

表示されましたね！では、iOS Simulated でも見てみましょう。右の プラットフォームを iOS (Classic) に変更しましょう。

Android/iOS 両方は同時には表示できませんが、それぞれはこんな感じで表示されるはずです。

![Sketches_iOS-Android.png](https://qiita-image-store.s3.amazonaws.com/0/32453/a0059b1e-a43c-6178-e6ef-4ca69f883bb6.png)

後は、LayoutOptions を試したりとか StackLayout、GridLayout の組み方を試したりとか色々やってみると面白いと思います。

Auto Complete も効きますので、そんなに辛くはないはず！
![スクリーンショット 2014-10-20 00.36.53.png](https://qiita-image-store.s3.amazonaws.com/0/32453/545107de-f742-ce31-20c8-be816c05b4d6.png)

# こんな時は？

- iOS Simulator が延々と再起動する！ 
    - Sketches ファイルを閉じて暫くすると多分収まります。その後、iOS Simulator を一度閉じて Xamarin Studio 再起動
- Android Player での表示が出来ない！
    - early preview だけあって、あまり調子良くないっぽいです。次を試してみましょう。
    - プラットフォームを一度別のに変更して、また Android に戻します。
    - 全部再起動してもう一度試してみます。

安定した Preview が出てくるまで Android は厳しいかもなので、当面は iOS (Classic) だけでやるのが幸せかもしれません。


# サンプル

Xamarin の github にもサンプルがありますので、見てみてください。
[xamarin/sketches](https://github.com/xamarin/sketches)

以下はさっと作った Grid お試し用サンプルです。

```csharp
using Xamarin.Forms;

var title = new Label {
    Text = "Grid",
    Font = Font.SystemFontOfSize(NamedSize.Large),
};
var description = new Label {
    Text = "テーブル状にitemを並べます",
    Font = Font.SystemFontOfSize(12),
    TextColor = Color.FromHex("#666"),
    VerticalOptions = LayoutOptions.Center,
};
    
var grid = new Grid { 
    RowDefinitions = {
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
    },
    ColumnDefinitions = {
        new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition { Width = GridLength.Auto },
    },
};
grid.Children.Add(new Label { 
    Text = "grid 0-0", 
    BackgroundColor = Color.Red,
}, 0, 0);
grid.Children.Add(new Label {
    Text = "grid 0-1", 
    BackgroundColor = Color.Blue,
}, 1, 0);
grid.Children.Add(new Label { 
    Text = "grid 1-0", 
    BackgroundColor = Color.Yellow,
}, 0, 1);
grid.Children.Add(new Label {
    Text = "grid 1-1", 
    BackgroundColor = Color.Green,
}, 1, 1);


var header = new StackLayout {
    Orientation = StackOrientation.Horizontal,
    Children = {
        title,
        description,
    },
};


RootPage.Children.Add(new ContentPage {
    Title = "Sketches サンプル！",
    Padding = new Thickness(10),
    Content = new StackLayout {
        Children = {
            header, 
            grid,
        }
   }
});

```


Forms の画面構築は結構楽になるかも。是非使ってみてください。

以上です。