Xamarin.Formsで明朝系フォントを使用する


[Xamarin Advent Calendar 2014](http://qiita.com/advent-calendar/2014/xamarin)の16日目です。

##はじめに
今年の春頃からスマホ系アプリ開発をチャレンジすることを決めXamarinと格闘する日々です。
日頃の業務では和歌や俳句など古典ものの検索サービスを提供しており、雰囲気的に？明朝系の和文フォントを使いたいことから、今回はXamarin.Formsで明朝系フォントを表示するところまでをやってみます。

##日本語を表示してみる
まずはフォント名の指定なしで日本語を表示してみます。

```cs:App.cs
public class App
{
 public static Page GetMainPage ()
 {	
  return new ContentPage { 
   Content = new Label {
    Text = "古今和歌集（伊達家旧蔵本）",
    Font = Font.SystemFontOfSize (NamedSize.Large),
    VerticalOptions = LayoutOptions.CenterAndExpand,
    HorizontalOptions = LayoutOptions.CenterAndExpand,
   },
  };
 }
}
```

Android
![スクリーンショット 2014-12-14 09.06.23.png](https://qiita-image-store.s3.amazonaws.com/0/44195/765bf591-f93e-b35b-3ca6-0bff6967cb68.png "スクリーンショット 2014-12-14 09.06.23.png")

iPhone
![スクリーンショット 2014-12-14 09.03.24.png](https://qiita-image-store.s3.amazonaws.com/0/44195/dfd137d1-fd30-2fc4-d628-592ba8b1a720.png "スクリーンショット 2014-12-14 09.03.24.png")

AndroidもiPhoneもゴシック系、中国系のフォントでしょうか。

##Xamarin.Formsにフォントを適用する
Xamarin.FormsのコントールはFontプロパティを使用してフォント名を指定できます。

```cs:
label.Font = Device.OnPlatform(
    iOS:      Font.OfSize ("MarkerFelt-Thin", NamedSize.Medium),
    Android:  Font.OfSize ("Droid Sans Mono", NamedSize.Medium),
    WinPhone: Font.OfSize ("Comic Sans MS", NamedSize.Medium)
);
```

参考：
[Working with Fonts](http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/fonts/)

##iPhoneとAndroidの和文フォントって何？
要するにここで和文フォント名を指定すればいいわけですが、そもそもiPhoneやAndroidではどのような和文フォントがインストールされているのでしょうか。
iPhoneでは「ひらぎの明朝」が標準でインストールされています。Androidはデバイスごとに異なることや明朝系のフォントは標準ではインストールされてないデバイスがほとんどのようです。

参考：
[AndroidはモトヤLシーダ3等幅で決まり](http://d.hatena.ne.jp/Imamura/20131123/motoyafont)
[iOS7フォントリスト](http://support.apple.com/ja-jp/HT5878)
[iOS6フォントリスト](http://support.apple.com/ja-jp/HT5484)


##フォントを追加する
というわけで、iPhoneとAndroidで同じ明朝系のフォントを表示するために、[IPA](http://www.ipa.go.jp/)の「IPAex明朝」フォントを使ってXamarin.Formsで表示してみます。
[IPAフォント](http://ossipedia.ipa.go.jp/ipafont/)のサイトから「IPAex明朝」(ipaexm.ttf)をダウンロードします。
以降の作業はiPhoneとAndroidで方法が異なります。


###iPhoneの場合

1.フォントをResourcesフォルダに追加します

![スクリーンショット 2014-12-13 19.11.07.png](https://qiita-image-store.s3.amazonaws.com/0/44195/b2384ffa-f934-53b3-59dd-2ec3d1d11170.png "スクリーンショット 2014-12-13 19.11.07.png")

2.info.plistにフォント情報を追加します 

+ (Xamarin.Formsから)info.plistを選択して右クリック
+ 「アプリケーションを選択して開く」を選択
+ 「Xcode.app」を選択（Xamarin.Formsで編集できるかは未調査です）
+ 「Fonts provided by application」を選択して１行追加する（なければこの項目自体を追加する）
+ ipaexm.ttfを追加

![スクリーンショット 2014-12-13 19.23.00.png](https://qiita-image-store.s3.amazonaws.com/0/44195/3114a6a9-77b1-a066-3239-bb2f691db2b7.png "スクリーンショット 2014-12-13 19.23.00.png")

3.これでフォントを使える状態になったので、Fontプロパティにフォント名を指定します

```cs:
label.FontFamily = "IPAexMincho";  //Fontプロパティはobsolete
```
※

4.明朝系になりました
![スクリーンショット 2014-12-14 09.11.57.png](https://qiita-image-store.s3.amazonaws.com/0/44195/7955e142-b47c-92e5-9bcc-650a48eaf30b.png "スクリーンショット 2014-12-14 09.11.57.png")

##Androidの場合
Androidの場合はXamarin.Formsでカスタムフォントを設定することができないのでRendererを使って対処します。

1.フォントをassetsフォルダに追加します
![スクリーンショット 2014-12-14 11.19.04.png](https://qiita-image-store.s3.amazonaws.com/0/44195/0e7a8f3f-5e51-6515-90ee-dc71080e7269.png "スクリーンショット 2014-12-14 11.19.04.png")

2.AndroidプロジェクトにRendererを作成してフォントを読み込みます

```cs:MinchoLabelRenderer.cs
[assembly: ExportRenderer (typeof (Label), typeof (MinchoLabelRenderer))]
namespace FontViewApp.Android
{
 public class MinchoLabelRenderer : LabelRenderer {
  protected override void OnElementChanged (ElementChangedEventArgs<Label> e) {
   base.OnElementChanged (e);
   var label = (TextView)Control;
   Typeface font = Typeface.CreateFromAsset(Forms.Context.Assets, "ipaexm.ttf");
   label.Typeface = font;
  }
 }
}
```

3.明朝系になりました
細くて見づらいですが（汗

![スクリーンショット 2014-12-14 11.25.34.png](https://qiita-image-store.s3.amazonaws.com/0/44195/8b619295-b748-b9e2-d62c-3d87481175b0.png "スクリーンショット 2014-12-14 11.25.34.png")

ということで今回はここまでです。

##フォント配布時の注意
フォントを一緒に配布する場合はライセンス等にご注意ください。
今回のIPAフォントは商用非商用問わず配布はOKですが、改変するとIPAの名称を使用できないなどがあるようです。

参考：
[IPAフォント(Wikipedia)](http://ja.wikipedia.org/wiki/IPAフォント#OSI.E8.AA.8D.E5.AE.9A.E3.83.A9.E3.82.A4.E3.82.BB.E3.83.B3.E3.82.B9.E7.89.88)
[日本語フォントの比較(Wikipedia)](http://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E6%AF%94%E8%BC%83)

##最後に
今回が念願のAdventとQiita同時デビューになります（誇
C#がわかればハイブリッドでちょいちょいと開発できるよ〜とのキャッチコピー？に魅かれXamarinを始めたものの、スマホ開発が経験不足ではなかなかうまいことも行かずiOSやAndroidを勉強する日々です。
今回Android側で使用したTypeFaceやTextViewはAndroidのクラスなのでその辺りの理解も深めないといけないなあと感じてます。
それとXamarinを始めた副産物？で、それまでのWindowsOnlyを脱皮して、MacBookを購入することを決断し、info.plist編集して、KobitoでQiitaに投稿するという"にわかマカー"としてとても ~~苦しい~~ 楽しい生活を送っています。
今後はXamari.Formsで縦書きをチャレンジしたいのと、これを機にもう少し積極的にブログ等で情報発信していこうと決意した次第です。