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

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

課題

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

実装サンプル

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

app/app_delegate.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

--- 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になっていたため、そちらを書き換えております。

--- 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)

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

実装後の画面サンプル

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

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

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

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

参考サイト

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

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