前のパートに戻る 完了して次のパートへ  

  1-5 画像のダウンロード

本教材で使う画像などはこちらからダウンロード可能です。zip圧縮されているのでダブルクリックして解凍(アーカイブユーティリティなど)してください。

ダウンロード

アプリアイコンの設定


ダウンロードしたiconフォルダ内の画像をアプリアイコンとして設定します。"Assets.xcassets"の"AppIcon"をクリックしてください。20pt(2x)にはicon/icon40.png、40pt(3x)にはicon/icon120.pngなど全てのicon...pngをドラッグアンドドロップしてください。

iPhoneやAppStore、通知センターなどで表示されるアイコン全てを設定します。実際に表示されるアイコンは自動で角が丸くなります。角が丸くなることを想定したアイコンを作成する必要があります。

"Assets.xcassets"は画像を管理する機能です。アプリアイコン以外にもツールバーやナビゲーションバーのアイコン、背景画像など様々な画像を設定できます。設定された画像はソースコードやストーリーボード、SwiftUIで使用する事ができます。ただし設定した画像ファイルはそのままアプリに組み込まれます。多くの画像を設定するとアプリサイズが肥大するため、必要最小限の数にとどめてください。

"Assets.xcassets"が登場する前は、画像ファイルをソースファイルと同じように管理していたため、煩雑になりやすい面がありました。今後の画像管理には"Assets.xcassets"を使用することを推奨します。

起動画面の設定


アプリ起動時に表示される画面を設定します。

  1. 起動画面で表示する画像を設定
  2. 起動画面に画像を追加

では実際に進めてみましょう。

1. 起動画面で表示する画像を設定


まず起動画面に表示する画像を"Assets.xcassets"に追加します。以下のように新しいImage設定を追加してください。

追加したimage設定の名称を"LaunchScreenIcon"に変更してください。

下記のファイルLaunchScreenIcon/LaunchScreenIcon180.pngなどをドラッグアンドドロップしてください。全て同じ画像ですが解像度が異なります。これはiPhoneやiPad毎に異なる解像度の画像が必要なためです。

2. 起動画面に画像を追加


本パートではストーリーボードというUI構築機能を使用して起動画面を作成します。"LaunchScreen.storyboard"をクリックして、ツールバーの "+" をクリックします。表示された画面から"Image View" を左側のiPhoneにドラッグアンドドロップしてください。Image Viewとは画像を表示するビューのクラスです。今は画像を表示するために必要なものという認識で大丈夫です。

追加したImageViewをiPhoneと同じ大きさになるように広げてください。

次に画像が常に真ん中に表示されるようにAutoLayout機能を使用します。Image View を選択した状態で下部にある "Aligh" アイコンをクリックします。表示された画面の"Horizontally in Container" と "Vertically in Container" をチェックします。最後に "Add Containers" をクリックすると画像を真ん中に表示する制約が設定されます。

次にユーティリティ領域にて画像を設定します。Image View を選択した状態で以下のAttributes inspector 画面を表示し、Imageに"LaunchScreenIcon"を設定してください。

以上で起動画面の作成は終了です。

画像ファイルをアプリにコピー (iPhone,iPad実機)


本パートでコピーする画像は"Assets.xcassets"ではなく、アプリが管理するDocumentsフォルダ内にファイルをコピーします。

  1. FinderやiTunesとの共有設定
  2. Finderからファイルコピー

では実際に進めてみましょう。

1. FinderやiTunesとの共有設定


info.plistに新しい値を追加します。Infomation Property Listにカーソルを合わせると"+"が表示されるのでクリックしてください。

追加された行のKeyに "Application supports iTunes file sharing" をコピーペーストしてください。TypeにBoolean、ValueにYESを設定してください。この設定によりMacのFinderやiTunesにてファイルを共有できるようになります。

2. Finderからファイルコピー


MacとiPhoneを接続した状態でMacのFinderを開いてください。Finder場所のiPhoneを選択しファイルをクリックしてください。TechImageアプリが表示されているので、ダウンロードしたimage/Image01.jpgからimage/Image10.jpgをドラッグアンドドロップしてください。この操作によりアプリが管理するDocumentsフォルダ内にファイルがコピーされます。

画像ファイルをアプリにコピー (シミュレーター)


シミュレーターでは以下の方法です。

  1. Mac内のDocumentsフォルダパスを調べる
  2. Finderからファイルコピー

では実際に進めてみましょう。

1. Mac内のDocumentsフォルダパスを調べる


シミュレーターではMac内にアプリフォルダが作成されます。画像ファイルを保存するDocumentsフォルダパスを調べるためAppDelegate.swiftに以下のソースコードを追加します。

次にシミュレーターを実行すると、デバッグ領域のコンソールに /Users/.../Documents が表示されるのでコピーしておきます。

2. Finderからファイルコピー


Finderを開きcommand + shift + G を押下するとフォルダの場所を入力できるので、取得したDocumentsフォルダパスをペーストして移動します。

Documentsフォルダが表示されますので、ダウンロードしたimage/Image01.jpgからimage/Image10.jpgをコピーしてください。


以上で今回のパートは終了です。

お疲れ様でした。

議論

1 質問

このコースの評価は?