RubyMotionでナビゲーションバーや本文に日本語フォントを指定する方法

RubyMotionを使った環境で、ナビゲーションバーのフォントを一括でヒラギノ角ゴシックにする方法を紹介します。

## 環境

* Mac OSX 10.9.4
* RubyMotion 2.33 (2014年9月18日時点での最新版）

## 利用したサンプルアプリ

QiitaのRubyMotionタグの付いた記事を読めるニュースリーダーアプリです。

RMQiita
https://github.com/shigemk2/RMQiita

## 使うフォント

iOSで利用できる日本語フォントは、ヒラギノ角ゴシックProNのW3とW6の2種類です。
PostScriptネームは次の通りで、MacOSXでも標準的に使われているフォントです。

* HiraKakuProN-W6
* HiraKakuProN-W3

そのほか、iOS 7 で使えるフォント名一覧はこちらのページが参考になります。
http://qiita.com/shu223/items/6fd2a22b717055e9682b

## 課題

デフォルトではあまりイケていないシステムフォントを用い、このように日本語が表示されます。
これを、日本語フォントを指定することで美しい表示にしたいと思います。

![ios-navigationbar-system.png](https://qiita-image-store.s3.amazonaws.com/0/19199/d7429133-34b2-7c0c-11ea-fe99c447a346.png)

## 実装サンプル

app_delegate.rb にUINavigationBarを操作するためのnavigation_appearanceというメソッドを追加します。
そしてそれをapplicationメソッドから呼び出すことで、アピアランスの適用を一括して行えます。

##### app/app_delegate.rb

```rb
# -*- coding: utf-8 -*-
class AppDelegate
  def application(application, didFinishLaunchingWithOptions:launchOptions)
    @window = UIWindow.alloc.initWithFrame(UIScreen.mainScreen.bounds).tap do |window|
      window.rootViewController = UINavigationController.alloc.initWithRootViewController(QiitaViewController.new)
      window.makeKeyAndVisible
    end
    navigation_appearance
    true
  end

  def navigation_appearance
    UINavigationBar.appearance.setTitleTextAttributes({
      UITextAttributeTextColor => UIColor.blackColor,
      UITextAttributeFont => UIFont.fontWithName("HiraKakuProN-W6", size: 18)
    })
    true
  end
end
```

オリジナルの qiita_view_controller.rb へは次のような変更を行っています。

##### app/qiita_view_controller.rb

```diff
--- a/app/qiita_view_controller.rb
+++ b/app/qiita_view_controller.rb
@@ -4,7 +4,7 @@ class QiitaViewController < UITableViewController
     super

     @feed = nil
-    self.navigationItem.title = "Qiita RM Reader"
+    self.navigationItem.title = "きれいな日本語表示を行いたい"
     self.view.backgroundColor = UIColor.whiteColor

```

また、コンテンツ部分のフォントについては、qiita_view_controller.rbの
tableViewメソッドにてフォント指定がAppleGothicになっていたため、そちらを書き換えております。

```rb
--- a/app/qiita_view_controller.rb
+++ b/app/qiita_view_controller.rb
@@ -36,8 +36,8 @@ class QiitaViewController < UITableViewController
     cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator

     label = UILabel.alloc.init
-    label.frame = CGRectMake(40, 20, 200, 30)
-    label.font = UIFont.fontWithName("AppleGothic",size:14)
+    label.frame = CGRectMake(40, 5, 250, 30)
+    label.font = UIFont.fontWithName("HiraKakuProN-W6",size:14)
     label.text = @feed[indexPath.row]["title"]
     label.textAlignment = UITextAlignmentLeft
     cell.addSubview(label)
```

結果は、次の画面サンプルの通りです。


## 実装後の画面サンプル

画面サンプルは次の通りです。

#### 変更前のデフォルト表示（システムフォント）

![ios-navigationbar-system.png](https://qiita-image-store.s3.amazonaws.com/0/19199/d7429133-34b2-7c0c-11ea-fe99c447a346.png)

#### 変更後のヒラギノフォント指定

![ios-navigationbar-hiragino.png](https://qiita-image-store.s3.amazonaws.com/0/19199/a2ecf2b0-b260-25aa-e1f9-c2f46ded9464.png)

やはり、見た目が綺麗だと印象が良いですね！

## 参考サイト

Creating a flat navigation bar in a RubyMotion iOS iPhone app.
https://gist.github.com/bensheldon/5751863

続編である、フラットデザイン化するためコード例は次の記事にまとめました。
http://qiita.com/y-ken/items/f98daaab72ab3bebd7a6