iOSアプリ開発超入門

1 : Xcodeの導入からはじめてのアプリ開発!


 

Xcodeのインストール

iOSアプリの開発に使用するツールであるXcodeのインストールから始まります。

 

1, 「App Store」を開いてください。

2, 右上の検索バーで「Xcode」と入力し、検索してください。

 

3, 検索結果の左上に青いボートと金槌のアイコンのXcodeが見つかるので、「入手」をタップしてください。

(僕はすでにインストール済みのためアップデートと表示されています)

 

インストールには時間がかかるので、
テキストを読み進めてください。

そもそもXcodeとは?

Xcodeとは統合開発環境(IDE)です。

基本的にiOSアプリ開発に使用されます。

 

AndroidアプリはAndroid Studioという統合開発環境を使用します。

 

統合開発環境とは、

コンパイラ、テキストエディタ、デバッガなどなどの開発に必要なツールがセットになっている便利なツールです。

つまり、「これさえあればiOSアプリ開発できるよ!」ということです。

 

iOSアプリ開発はXcodeをインストールするだけで終わるのでとても楽でいいですね!

 

Xcodeのインストールが終わったら、次に進みましょう。

 

Xcodeを起動する

 

 

このような画面が表示されれば成功です!

 

お試しアプリ作成

このまま簡単なアプリを作成していきます。

Create a new Xcode project

まずは[Create a new Xcode project] を選択してください。

 

 

設定1

この画面ではどういったアプリケーションを作成するのか設定していきます。
上段でOSの種類を決めます。

今回作成するのはiPhoneアプリなので
①でiOSを選択します。

中段はアプリケーションの形式を選択することができます。

今回は一般的な②「Single View App」を選択します。

 

①、②の選択が完了しましたら、
③でNextを選択してください。

 

 

 

設定2

ここではアプリの名前などなどを設定します。

画像のように設定できたらNextで次に行きましょう!

Product Name  アプリの名前(英語で入力しましょう)です。初めてのアプリということで「FirstApp」という名前にしました。
Team  会社などのチームで開発する場合に設定します。今回は必要ないので、「None」とします。
Organization Name  会社などで開発する場合の名前を設定します。今回は必要ないので、入力しません。
Organization Identifier  会社などのIDです。会社のドメインを逆にして設定する場合が多いです。
例;mycompany.comというドメインを取っていた場合com.mycompanyと設定する。
Bundle Identifier  アプリ固有のIDです。App Store内で一意である必要があります。Product NameとOrganization Identifierで設定されるため、Organization Identifierは固有であることを保証できるメールアドレスや上記の通りドメインを選択することが多いです。
Language  開発に使用するプログラミング言語を選択します。Swiftや、その前身となるObjective-cを選択することができます。今回はSwiftを選択します。
Use Core Data, Include Unit Tests, Include UI Tests  こちらは難しいので、今回はスキップします。

 

 

保存場所

保存場所に関してはどこでも大丈夫です。

見つけやすい場所に保存しましょう。

 

やっとアプリ開発!

長かった設定も終了したので、ようやくアプリ開発ができます!

このような画面が表示されれば成功です!

 

Main.storyboardを開く

StoryboardとはiOSアプリの画面を作成するための「Interface Builder」と呼ばれる機能(ファイル)です。

HTML / CSS のようにコードを書かずに、パーツをペタペタ貼って画面を作成することができます!

まずは画像の①、②の手順で進みましょう。

Main.storyboardを開くとわかりますが、水色の枠が表示されているかと思います。

これはViewControllerというiOSアプリでの画面になります。

このViewControllerに色々なテキストやボタンを置いてアプリの画面を作成していきます。

 

ViewControllerにUIパーツを置く

それでは本格的にアプリ開発をしていきましょう!

画面の右下に注目してください。

①四つあるボタンの右から2番目の五円玉のようなマークをタップしてください。

②でStoryboardで配置することができるパーツを選択することができます。

 

今回は最初にLabelというパーツを配置していきます。

②の枠内でスクロールしてLabelを探しましょう!

 

 

見つけることができたら、ドラッグ&ドロップでViewControllerの上に配置していきましょう。

場所は適当で大丈夫です!

 

アプリ起動!!

Labelの配置が完了したら、実際にアプリを起動してみましょう!

画面の左上の再生ボタンをタップしてください!

すると、Simulatorが起動するのでみてみましょう!

動きましたか??

これがアプリ開発の第一歩です!!

 

それでは、もう少しカスタマイズしていきましょう。

 

完成図

ボタンをタップすると
「はじめての」-> 「アプリ開発!」にLabelのテキストが変化します。

Labelのカスタマイズ

まずは

①ViewControllerに配置したLabelをタップして選択してください。

②ホームベースのようなマークをタップしてください。

このマークをタップすることでパーツをカスタマイズすることができる画面が表示される。

③「Label」と表示されているところに「はじめての」と入力しましょう。入力が完了するとViewControllerに配置したLabelにも反映されます。

 

うまく表示されない場合

Labelにうまく「はじめての」が表示されない場合があります。

「…」となってしまっています。

これはLabelの横幅テキストの横幅が超えてしまっている場合に起こります。

これを修正するには、テキストの横幅よりLabelの横幅を大きくする必要があります。

Labelを選択すると周りに四角形が8つ出てきます。

これを引っ張るとLabelのサイズを変更できるので、テキストがしっかりと表示されるように修正しましょう!

 

 

Buttonを配置する

Labelと同じようにドラッグ&ドロップでButtonを配置しましょう。

場所はどこでもいいですが、Labelと被らないようにしましょう。

 

 

IBOutlet接続・IBAction接続

今回作成しようとしているアプリはButtonをタップした時にLabelの文字が変わる仕組みです。

そのためにはSwiftでコードを書く必要があるため、ViewController.swiftを開いてみましょう。

ちなみに、ViewController.swiftはStoryboard上に置いてあるViewControllerはリンクしています。

今回は詳しい説明はしませんが、

とりあえずこのファイルにコードを書いていきます!

 

次にStoryboardのViewControllerに置いたLabelやButtonをViewController.swiftファイルのコード上から編集できるようにするため、
ViewController.swiftにViewController上のLabelとButtonを紐付けます。

 

labelを接続する

 

①ViewControllerを選択状態にしましょう。

②輪っかが二つ重なっているマークをタップする。

 

これをすると画面が二つに別れます!

 

これで準備が整ったので、

labelをIBOutlet接続します。

labelを選択状態にして、

「control + ドラッグ」をすると青い線が出てくるので
「class ViewController : UIViewController {」と「override func viewDidLoad()」の間の隙間まで伸ばしてドロップしましょう。

 

 

 

すると、画像のようにグレーのポップアップが表示されるので、「Name」の部分を「label」にして、Connectをしましょう。

このような記述が自動的に足されたら成功です。

これでStoryboardのViewController上に置いたLabelをViewController.swift(コード)で触ることができるようになりました。

 

Buttonを接続する

同じようにStoryboardのViewController上に置いたButtonもViewController.swift(コード)と繋いでいきましょう。

しかし、注意することがあります。

注意点!!

  1. control + ドラッグでファイル内で最後の「}」の一段上に青い線を引っ張りドロップする。
  2. ConnectionをOutletから「Action」に変える。
  3. NameをchangeTextにする。

 

なぜLabelを設定するときのConnectionはOutletなのに、Buttonの場合はActionなのか。

 

それは

  • Labelは単純にStoryboardに置いたLabelをコード上からも触れるようにするための繋ぎ口(Outlet)
  • Buttonはタップしたときの処理(Action)を定義したいからです。

 

Buttonは、

このような記述が足されていれば、接続成功です!

 

 

Buttonをタップしたときの処理

タップしたときの処理は {  } の間に記述することができます。

 

 

今回はlabelのテキストを変更するため、このような記述になります。

label.text = “アプリ開発!”

「labelのtextを”アプリ開発!”にする」という意味になります!

 

これで完成です!

最後にRun !

最後にアプリを起動してみましょう!

覚えていますか??

 

左上の再生ボタンです!

 

どうでしょうか

うまくいきましたか?

 

今回はアプリ開発の最初の最初の最初ということで詳しい説明をせずに進んできました。

「思ったより簡単だったなぁ」と思っていただけたら嬉しいです!

次回からはもう少し本格的に解説していきたいと思います。


コメントを残す

*