iOSアプリを作成する際に、必要なXcode。なんかアプリを作りたくてとりあえずインストールしたものの、
何から始めればわからないというかたも多いのではないでしょうか。

そんな方のために、今回は動画学習メディアUdemyで実際にiOSアプリの開発講座を提供している私が、実際にアプリを作る手順にそって、Xcodeの使い方についてご紹介させていただきます。

この記事を読み終わる頃には、Xcodeの使い方や、基本的なアプリを作る流れが理解できます。

Xcodeとは

まずは、簡単にXcodeの使い方とインストール方法についてご紹介します。

既にインストール済みだよという方は読み飛ばしてください。

Xcodeとは、Appleが無料で提供している開発ツールで、iOSはもちろんOS XやwatchOSなど、Apple製品のアプリケーション開発を中心に様々なソフトウェアを開発できる統合環境です。

XcodeはMac App Storeからダウンロードできるので、Apple IDさえ取得すれば誰でもすぐにプログラミングを始めることができます。

インストールがまだの方は下記よりインストールしてください。

▶Xcodeをインストール

ではここからXcodeの使い方をサンプルのプロジェクトを作りながら解説していきます。
今回は、画像を表示するアプリを作る手順で紹介します。

 

プロジェクトの作成

プロジェクトとは開発するソフトウェアを構成するファイルの集合です。
通常、アプリケーションごとにプロジェクトを作成し、そこにソースコードやアプリに使用する画像や音声ファイルなどを一元管理します。
アプリ開発の第一歩として、まずはプロジェクトを作成してみましょう。

Xcodeを起動して、FileメニューからNew Projectを選択します。

 

テンプレートの選択

プロジェクトのテンプレートが表示されますので、Single View Applicationを選びます。

Single View Applicationとは、単一のビューを持つもっともシンプルなプロジェクトです。

Nextボタンを押すとプロジェクト設定ダイアログが表示されます。

 

デバイスの種類・プログラミング言語の指定・保存

ここではプロジェクトの名称や対応するデバイスの種類、プログラミング言語などを指定します。

今回は「ImageViewer」という名前のプロジェクトで、iPhoneをターゲットとして、プログラミング言語はSwiftを指定します。

プロジェクト名がアプリの名前になりますが、日本語のアプリを作りたいからといって、日本語のプロジェクト名をつけるのは厳禁です。

アプリの名称は別に設定できますので、プロジェクト名は英語で設定してください。

Nextボタンを押すと、プロジェクトの保存場所を指定するダイアログが表示されます。

 

プロジェクトフォルダの作成

今回はデスクトップを指定しましたが、任意の場所に保存できます。

Createボタンを押すと、プロジェクトフォルダが作成されます。

実際にフォルダを開いてみると、以下の様なファイルの構成になっています。

 

ここで重要なのが「ImageViewer.xcodeproj」というファイルです。

これがプロジェクトファイルと言われるもので、Xcodeでプロジェクトを開く場合はこのファイルを指定します。

Xcodeに戻ると画面にプロジェクトウインドウが表示されています。

 

ウインドウの左側がナビゲーションと呼ばれ、プロジェクトを構成するファイルがリスト表示されます。

ウインドウの右側がインスペクタと呼ばれ、選択したファイルやオブジェクトの詳細が表示されます。

中央の大きなエリアがエディタで、ソースコードやInterface Builderなどの編集画面が表示されます。

 

Interface Builderの使い方

ナビゲーションからMain.storyboardを選択すると、エディタにInterface Builderが表示されます。

 

Interface Builderの設定

Interface Builderとは、マウス操作でユーザインターフェイスを設置できる機能で、お絵かき感覚でアプリを構成するオブジェクトを設計できます。

今回は画面いっぱいに画像を表示するアプリを作ります。

そのために、イメージビューを画面中央のビューコントローラに配置します。

画面右下のライブラリパレットから、Image Viewを見つけて、ビューコントローラにドラッグ&ドロップします。

 

配置したらイメージビューの隅を引っ張って、画面いっぱいに広げてください。

 

Auto Layoutの設定

次にAuto Layoutの設定を行います。

Auto Layoutとは、デバイスの大きさや縦横の切り替えによって、画面のサイズが変化してもそれに追従するようにビューの大きさが変わる仕組みです。

今回はビューコントローラの大きさに追従するように、画面右下の設定ボタンを押して次のように設定します。

 

以上の操作でイメージビューが画面いっぱいに表示されるようになりました。

ここまでで、画面の設計が完了します。次から、実際にアプリを動かすためのプログラム「Swift」を書いていきましょう。

Swiftコードの入力

Interface Builderで画面を設計しただけではアプリは動きません。

ユーザからの入力に対するプログラムを書いて、実際に役に立つ処理を実行しなければなりません。

ここまでの操作では、Interface Builderでイメージビューを配置するところまでです。

つまり、イメージビューには何も表示されません。

そこで、イメージビューに画像を表示するプログラムを書きましょう。

プログラムはObjective-C言語とSwift言語のどちらかを用いることができますが、今回はAppleが推奨するSwiftを使用します。

ナビゲーションからViewController.swiftを選択すると、エディタにSwiftのソースコードが表示されます。

 

まず「class ViewController: UIViewController {」の下に、「@IBOutlet weak var imageView: UIImageView!」と書きます。

これは、先ほどInterface Builderで配置したイメージビューをソースコード内でアクセスするためのコードで、アウトレットと呼びます。

 

次にviewDidLoadメソッド内に「imageView.image = UIImage(named: “sample.jpg”)」と書きます。

これは、イメージビューのimageプロパティに、sample.jpgという名前の画像を読み込んで設定することを意味します。

こうすることで、実際にイメージビューに画像が表示されます。

 

アウトレットの設定

ソースコードが完成したので、あとはアウトレットの設定とプロジェクトに画像を登録するだけです。

まずアウトレットの設定をしましょう。

ナビゲーションからMain.storyboardを選択します。

次にビューコントローラの上部にある三つのアイコンの内、一番左側にある黄色の丸アイコンからイメージビューに向かって、controlキーを押しながら（マウスの場合は右ボタンでも可）ドラッグします。

すると、黄色の丸アイコンから水色の線が引かれます。そのままイメージビューの上でマウスボタンを離すとポップアップが表示されますので、imageViewを選択します。

 

少しややこしい操作ですが、これによってViewController.swift内にあるimageViewという変数と、Interface Builderのイメージビューがリンクします。

 

画像の登録

最後にプロジェクトに画像を登録しましょう。

Finderから登録したい画像をプロジェクトウインドウのナビゲーションにドラッグ&ドロップします。

 

登録のオプションダイアログが表示されるので、Copy items if neededにチェックを入れます。

 

これは、画像ファイルをプロジェクト内にコピーするかどうかのオプションで、チェックを入れるとプロジェクト内にコピーされます。

コピーしないと画像ファイルがプロジェクトフォルダの外に存在してしまうため、プロジェクトの管理上よろしくありません。

プロジェクトで使用する画像などのリソースは、プロジェクトフォルダ内に収めることを強くお勧めします。

Finishボタンを押すと、ナビゲーションに画像が登録されます。

アプリのビルドと実行

ではアプリを実行してみましょう。

プロジェクトウインドウの左上にある▶︎ボタンをクリックすると、プロジェクトのビルドが始まり、正常にビルドが終わるとiOSシミュレータ上でアプリが実行されます。

もしソースコードに誤りがあると、エラー表示とともにビルドが中止されます。

iOSシミュレータは自動的に起動し、アプリの動作結果がMac上で確認できます。

 

アプリは正常に起動し画像も表示されましたが、写真が縦長に引き伸ばされてしまっています。

これは、イメージビューの初期設定が画像を画面いっぱいに引き伸ばす設定になっているからです。

Interface Builderで簡単に修正できますのでやってみましょう。

ナビゲーションからMain.storyboardを選択します。

イメージビューを選択して、インスペクタ上のModeでAspect Fitに変更します。

 

これで再度ビルド実行すると、写真が引き伸ばされずに縦横比を維持して表示されます。

上下に空白が空いていますが、もし縦横比を維持したまま写真を目一杯引き伸ばしたい場合は、先ほどのインスペクタのModeをAspect Fillに設定します。

すると、写真が縦横比を維持したままフルスクリーンで表示されます。

いかがでしたでしょうか？以上で、アプリは完成です。今回はシンプルな機能のアプリを作っていきましたが、みなさんが普段使っているようなアプリも、このシンプルな機能をいくつも組み合わせてできてます。
是非チャレンジして見てください。