Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

実装サンプル

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)

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

実装後の画面サンプル

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

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

ios-navigationbar-system.png

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

ios-navigationbar-hiragino.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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away