見出し画像

アプリの中身 リソースとローカライズ

アプリで内蔵している文章や写真を表示したり、効果音やビデオを再生したり、ARでオブジェクトを表示する場合、それらのデータをリソースと呼びます。
今回はリソースの登録や利用方法と各国語対応について、アプリの構造としくみを中心に説明します。

【2020年6月16日 3-9-1通常の確認手順 にアプリごとの設定を追加しました】
【2020年12月27日内容やリンクなどを確認しました。(最初の公開2019年9月)】

毎月札幌でiOSアプリ作りをアシストするセミナーをやっています。1時間にわたるセミナーの全内容を、物理的に参加できない方のためにnote上で公開します。

お知らせ
電子書籍『Swift5初級ガイド』をAppleのブックストアから出しています。
文字サイズを好みに変更でき、本文を検索可能な電子書籍です。
無料サンプルでご確認ください。
MacでもiPadでもiPhoneでも読めます。
Xcode 12に対応した第7版がダウンロード可能です。(ご購入済みの場合は無料アップデートです)
(2020年10月12日に第7版にアップデートしました)
Swift 5.3は第6版で対応済みです。
ブックストアから一度購入すると今後のアップデートは無料で読めます。

7宣伝store

iOSアプリ作りをアシストするセミナーは今後も月一回のペースで続ける予定です。(2020年3月以降COVID-19感染拡大防止のため休止しています)
詳細は connpass.com の 札幌Swiftでご確認ください。そして機会があればぜひ参加してください。
アプリ作りやプログラミング教育に関連する話題は 札幌Swift のfacebookページで発信しています。

・・・

・画像クリックで拡大表示できます
・画像を拡大表示中は画像の左右をクリックで画像だけを順に表示できます
・ソースコード部分は横にスクロール表示できます

Xcode は 10.3 を使っています。
【2020年12月27日追記:Xcode 12.3との違いがあれば追記しました。】


1 アプリの構造とリソース

リソースは、プログラムの実行可能コードに付随するデータファイルを意味します。
コードとは別にデータを持つことで、プログラマの負担が比較的少なくリッチな表示や機能を提供できます。
加えてコードをシンプルに保つことができ、機能や表示の修正や変更も楽になります。

Appleの資料に『リソースプログラミングガイド』や『バンドルプログラミングガイド』など『ガイド』ドキュメントが昔はたくさんあり日本語版も読めました。
MacやiPhoneのアプリを開発者をふやすためAppleも積極的にこれらのドキュメントを更新していたものです。

現在アプリの構造や重要な原理を解説するAppleの資料であるこれら『ガイド』のドキュメントは、残念ながら英語版でも更新が止まった状態です。
最新OSに対応していないことも問題ですが、これから新たにiOS開発に取り組む人にとってはかなり不利な状況です。
しかもSwift登場前のドキュメントのサンプルコードは、当然古いObjective-C言語で書かれています。

技術の変化が激しい今こそこれらの情報は必要なはずです。
現代のアプリもOSも様々なしくみを前提に構築されています。

前提となっている技術やしくみの知識の有無は、シンプルな実装や、バグの対処時に小さくはない差となってあらわれるはずです。

そこで、今回は私の昔の記憶を最新Xcodeで確認しリソース・バンドル・ローカライズの概要をお話しします。

【2020年12月27日追記:Appleのドキュメント、Foundationの中にResources(英文)がありました。
https://developer.apple.com/documentation/foundation/resources 】


1 -1 バンドル

バンドルは、コードとリソースをカプセル化するために使われるmacOSやiOSの基本技術です。
macOS 登場時(当時はOS X)からのしくみです。

バンドルのしくみにより、ひとつに見えているアプリは実はフォルダーで、階層構造を持っています。
バンドルのしくみはOSの基本です。このため FoundationUIKit などのフレームワークでサポートされています。

バンドルには Foundation フレームワークの Bundle クラスでアクセスできます(Swiftの場合;Objective-Cでは NSBundleクラス)。
なお基本的な作業はBundleクラスを使うまでもなく可能になっています。
バンドルはあちこちで使われていますが、今回はアプリケーションバンドルだけをあつかいます。
Bundleクラスの機能には触れません。

1-2 アプリケーションバンドルの作成

アプリケーションバンドルはXcodeが作成します
どのようにバンドルを作成するかの情報は、プロジェクトファイルにあります。
Xcode のアプリケーション用テンプレートから保存したプロジェクトファイルでは、アプリケーション用のターゲットが一つ設定済みです。

1-3 アプリケーションバンドルの構造

アプリケーションバンドルをフォルダとして見ると、直下に Info.plist などの重要なファイルがあります。
iOSの場合はバンドル直下はフォルダ分けはあまりせず、基本的にリソースなどのファイルはバンドル直下に入っています。
このためフォルダ指定を省略しファイル名だけでアクセスできます。

Info.plistファイル は必須です。プロパティリスト形式でアプリに関する情報が入っています。このファイルもXcodeが設定から自動で作成します。

実行可能ファイル コードをコンパイルリンクした実行ファイルもアプリには必須です。

リソースファイル アイコン、画像、ストーリーボード、文字列など任意で追加できます。
(アプリアイコンなど一部は必須のものもあります)
(アプリアイコンは現在では単体のファイルではなくアセットカタログ形式です)

【2020年12月27日追記:アセットカタログにについては『自分のiOSアプリにアイコンを付けよう』を参照してください。】

多言語に対応する場合、リソースファイルは共通にどの言語でも使うものと、各言語専用のものを区別できるしくみがあります。(後ほど説明します)

それ以外のファイルも含めることは可能ですが、初級の範囲ではないので割愛します。


2 リソース

ファイルとしてバンドル内に組み込み利用する画像などの扱いは、ビデオや音声などデータ形式が変わっても基本は同じです。
ここでは画像を例に説明します。
アプリ内で表示に利用するには基本的に次の三ステップが必要です。

❶プロジェクトに登録
❷バンドルに組み込み
❸コードからアクセス

2-1 Xcode のプロジェクトとターゲット

テンプレートからアプリ用のプロジェクトを作り保存すると、アプリ用ターゲットがひとつ作られています。
ひとつのプロジェクトには複数のターゲットを組み込むことができます。
実行やビルドはターゲット単位で行います。

プロジェクトのウインドウ例(プロジェクト名はRSample)
ターゲットはRSampleとRSampleTestの二つの例

画像1

2-2 Xcode プロジェクトへリソース登録操作

リソースファイルをプロジェクトに組み込むにはいくつかの方法があります。
ここではプロジェクトナビゲータへドラッグ&ドロップする方法と、メニューから選ぶ方法の二つをご紹介します。

2-2-1 ドラッグ&ドロップで登録
プロジェクトナビゲータへドロップすると Choose options for adding these files: のパネルでどのターゲットに登録するかなどを指定します。

Destination: Copy items if needed をチェックするとドロップしたファイルをプロジェクトフォルダ内にコピーし、コピーを登録する
Added folders:
 フォルダを追加する場合の設定です。
Add to targets: 組み込むターゲットをチェックします。(複数あれば組み込むものすべてにチェック)

画像2

図のようにリソースを登録したいターゲットにチェックがついていることを確認してください。

Copy items if needed をチェックするとどこからドラッグしてもプロジェクトファイル内にコピーされ、そのコピーをアプリ作成に使います。
画像ファイル shinkansen.jpg をドロップで追加した例です。

画像3

アプリに必要なファイル類は上記コピーの設定を利用してプロジェクトフォルダ内にすべてまとめることをお勧めします。
すべてまとめておけば、別の環境で作業する場合にもプロジェクトファイルを含むフォルダ全体をコピーするだけで確実に移動できます。

2-2-2 メニューから選び登録
まず先にプロジェクトナビゲータのフォルダ(グループ)を選びます。

画像4

このグループに追加になります。
次に File > Add Files to "〜”... を選んでください。(〜の部分はプロジェクト名です)

画像5

ファイル選択パネルを表示します。

画像6

ここでもAdd to targets:などの設定は同じです。確認し必要ならチェックなどしてから登録してください。

どちらの方法で追加したファイルでも、プロジェクトナビゲータのファイル名をクリックするとエディタ画面に表示します。

画像7

2-2-3 インスペクタで確認
プロジェクトナビゲータでファイル名をクリックするとファイルインスペクタに詳細情報を表示します。

画像8

ファイルインスペクタにはファイル名、タイプ、位置、ファイルのフルパス、画像の場合はサイズなどの情報、ローカライズ情報、ターゲット所属表示があります。

LocationFull Pathは文字として選択できます。
(パスはファイルがどのフォルダにあるかの論理的な位置を示す情報です)

Target Membershipのチェックがあるターゲット(アプリ)でこのリソースを利用できます。(チェックをはずすと利用できなくなります)

2-3 バンドルへの組み込み

基本的にターゲットを選択して追加したファイルは自動でアプリケーションバンドル内に組み込まれます。
通常は意識することもないと思います...が、画像を表示しないなどの問題が発生したときにはしくみを知っているとスムーズに対処できます。

そのしくみを確認しましょう。

2-3-1 ビルドフェーズの確認 Build Phases

プロジェクトナビゲータでプロジェクトファイルを選び、ターゲットを選択すると7つのタブがあります。
このタブは選択したアプリケーション用ターゲットのものです。
右から二つ目のBuild Phasesを選ぶと次の画面になります。

画像9

Copy Bundle Resources(n items) があります。
クリックすると図のように内容を表示します。
プロジェクトに追加した campus.jpg ファイルがあることを確認してください。

画像10

プロジェクトに追加した画像などのファイルは自動的にこのリストに追加されます。
プロジェクトでこのターゲットをビルドする時に、このリストにあるファイルをアプリケーションバンドルにコピーします

このリストにも➕➖の追加削除ボタンがありますが、ここでの操作はお勧めしません。
万一このリストに載っていないためにバンドルにコピーされていない場合はリソースのターゲットのチェックを確認してください。
ターゲットにチェックが問題ない場合は面倒でもプロジェクトインスペクタから一度削除し、2-2の方法で追加し直した方が良いです。

このようにプロジェクト(ターゲット)へのファイルの追加操作すると、Xcode で自動的にアプリケーションバンドルへのコピーリストにも追加されます。
(拡張子により、ソースコードはコンパイルされ、リソース類はバンドルにコピーされます)

シミュレータで実行する場合はソースコードをコンパイルしてできた実行ファイルと一緒に、リソースもアプリケーションバンドル内に自動でコピーします。
そして完成したアプリをシミュレータにインストールして起動します。

2-3-2 ビルドの注意点

バンドルには各リソースファイルをコピーします。
プログラミング途中でリソースファイル名を修正したりすると、コピー済みの古い名前のファイルがアプリケーションバンドル内に残ります
(ビルドフェーズではコピーするだけで、古いファイルを消さずに上書きします)
リソースのファイル名は修正して、コードやストーリーボードのファイル名指定の修正を忘れると、利用するファイル名が古ため表示できなくなります。
ところが、残っている古いファイルにアクセスし表示できるため、バグの発見が遅れる場合があります。

このようなバグを防ぐには Product > Clean Build Folder メニューを使いバンドル内の古いファイルを消します。
リソースを追加/修正するたびに Clean Build Folder メニューで古いビルド内容を消すのが確実です。

2-4 コードから利用(画像ファイルの例)

画像ファイルはUIImageのイニシャライザでファイル名を指定して読み込み利用します。
ファイルが存在しない場合は画像データを得られません、このためこのイニシャライザはオプショナルを返します。

// ファイルから読み込むイニシャライザinit(named:)
init?(named name: String)

引数には拡張子付きのファイル名を指定します。(PNGファイルは拡張子を省略できます)

ストーリーボードでは UIImageView を配置しファイル名を指定すると表示できます。


3 ローカライズ

macOS や iOS はたくさんの言語に対応し世界中で使われています。
昔のパソコンでは日本語用と英語用は別ものでしたが、現在は区別なく利用できます。

これは
❶ OSレベルで多言語対応のしくみが完成している
❷ 各言語に対応したユニコードフォントをシステムが持っていて表示可能、各言語の入力もシステム機能で可能
❸ 各言語に対応した表示用リソースをアプリが持っている
この三つの条件がそろっているためです。

アプリ用のプロジェクトはテンプレートを保存した状態では、デフォルト設定で「英語」アプリの状態です。

続きをみるには

残り 6,459字 / 11画像
この記事のみ ¥ 500
期間限定 PayPay支払いすると抽選でお得に!

今後も記事を増やすつもりです。 サポートしていただけると大変はげみになります。