[Swift] ヒラギノ丸ゴシックをダウンロードしてiOSアプリ内のUIWebViewで使えるか試す

スポンサーリンク

iOS内にインストールされているフォント一覧を見ると

00

関連情報として

App は必要に応じて以下のフォントをダウンロードすることもできます。

と書かれており、アプリからこれらのフォントをダウンロードし、追加インストールして使えるようです。標準のフォント以外のフォントを扱うには、最初からアプリ内にフォントを組み込んでおくことで、カスタムなフォントを使えますが、ここでは、フォントはアプリに含めず、このフォント一覧にある「ヒラギノ丸ゴシック」を追加インストールする形を試してみようと思います。

さらに、そのフォントをUIWebView内の文字にも適用できるのかを試してみます。

iOS 6 or 7で「游ゴシック体」や「ヒラギノ丸ゴシック」を使う」に非常に詳しい説明とサンプルファイルがありました。アプリ内のラベルなどのフォントを変更することは、このサンプルを見れば実際に確かめられます。

自分でこれを試すにあたって、ここでは「Download-Font-iOS」を使ってSwiftのプロジェクトでやってみようと思います。CocoaPodsなので「CocoaPodsのセットアップ〜SDWebImageの使用準備までのログ」の流れでセットアップして、Swiftにブリッジして試してみようと思います。CocoaPodsはセットアップされている状態として、以下にそれ以降の流れをMEMOしておきます。

まずは、いつものようにシンプルなプロジェクトを作成します。新規プロジェクトで、

01

適当な名前をつけてプロジェクト作成します。作成後は、いったん、そのプロジェクトを閉じてしまいましょう。

02

ターミナルを使って、作成したプロジェクトフォルダに移動します。「pod init」を実行して、

03

作成された「Profile」というファイルに

pod ‘Download-Font-iOS’

と書き込んで

として保存します。「pod install」を行うと、

04

「DownloadFontTest.xcworkspace」というファイルが出来上がりますので、それをダブルクリックして起動します。

05

ストーリーボードを開いて、テストに必要なものを配置します。

06

これら配置したものを、Ctrlキーを押しながら、ViewController.swiftに追加していきます。ボタンはアクションを記述する準備をします。

07

「Download-Font-iOS」がObj-Cなので、ブリッジヘッダーファイルを用意します。

08

ヘッダーファイルを新規作成し、

09

適当な名前をつけて保存します。

10

ヘッダーファイルに

#import “DBLDownloadFont.h”

と書き込みます。

Build Settingsで「swift」で検索して、「Objective-C Bridging Header」に追加したヘッダーファイルをドラッグアンドドロップするか(何度かやっても空白になることあり。)、あるいは、「$(PROJECT_DIR)/DownloadFontTest/Bridge-Header.h」と書き込みましょう。

12

「ViewController.swift」を

このように書いて実行してみます。1、2の順にボタンを押していくと、ラベルのフォントが「ヒラギノ丸ゴシック」になりました!

13

それでは、次に「font.html」というファイルを作って

のようなHTMLを書き込み、そのHTMLファイルをドラッグアンドドロップでプロジェクトに追加します。

14

15

3のボタンを押すと、UIWebViewにそのHTMLファイル「font.html」をロードする内容を書き込みます。

16

これを実行して、1、2、3の順にボタンを押していくと、

17

のようにUIWebView内も、HTMLで指定した「ヒラギノ丸ゴシック」で表示されました!

しかし、ちょっと謎が残っておりまして、、、UIWebVIew内の文字をこのような形でダウンロードしたフォントで表示するには、1の「フォントをダウンロード」をした後に、3の「UIWevViewにHTMLをロード」をしなければ適用されないんです。。(謎)

試しに、一度フォントをダウンロードして(フォントはアプリの内部ではなく、共有のスペースにダウンロードされるようです)、そのアプリを強制終了します。フォントはこの状態でもダウンロードされて実機の中には存在していますので、次の起動では、viewDidLoadでHTMLをロードしても、UIWebView内のテキストはヒラギノ丸ゴシックになってもよさそうなものですが、この場合は適用されません。。

18

なんとか回避策を見つけたいところですが、今のところ僕がわかっているのは、UIWebViewにHTMLを読み込む前に、必ずフォントをダウンロードする工程を入れなければならない感じです。

追記:テストファイルをGitHubに載せておきました。
https://github.com/mushikago/DownloadFontTest

東京造形大学卒業後、マクロメディア(現アドビ システムズ)に入社。Quality AssuranceやテクニカルサポートマネージャーとしてFlash、DreamweaverなどのWeb製品を担当。独立後、虫カゴデザインスタジオ株式会社を設立。最近は、ZBrush、Xcode(Swift)、Firebase、Unity、Adobe Creative Cloud関連にフォーカスしています。モバイルアプリ開発情報を主としたブログ「MUSHIKAGO APPS MEMO」の中の人。