Xcodeの使い方を5分で理解!画像アプリの開発で即実践!

iOSアプリ

2016/07/11

iOSアプリ

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を選択します。

fig01

 

テンプレートの選択

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

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

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

fig02

 

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

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

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

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

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

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

fig03

 

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

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

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

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

fig04

 

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

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

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

fig05

 

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

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

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

 

Interface Builderの使い方

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

fig06

 

Interface Builderの設定

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

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

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

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

fig07

 

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

fig08

 

Auto Layoutの設定

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

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

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

fig09

 

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

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

Swiftコードの入力

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

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

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

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

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

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

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

fig10

 

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

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

fig11

 

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

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

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

fig12

 

アウトレットの設定

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

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

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

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

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

fig13

 

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

 

画像の登録

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

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

fig14

 

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

fig15

 

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

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

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

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

fig16

アプリのビルドと実行

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

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

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

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

fig17

 

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

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

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

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

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

fig18

 

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

fig19

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

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

fig20

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

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事