HelloWorldアプリ

Posted on 2021-08-30   |   In iOS , swift

講義の目標

  • iOSアプリ開発環境を構築すること。
  • アプリ開発の基本的な流れについて理解すること。
  • Xcodeの基本的な使い方をマスターすること。

はじめに

この章では、Mac PC上にiOSアプリの開発環境を構築し、簡単なアプリを作成します。そして作成したアプリを実機上で実行させるところまで解説いたします。

Xcodeのインストール

iOSアプリ開発は、Mac OS XがインストールされたXcodeで開発します。XcodeとはApple社が提供するIDE（統合開発環境）であり、これにiOSアプリ開発に必要なすべてのツール（iOS SDKなど）がすべて含まれています。

以下のURLからXcodeをダウンロード及びインストールしてください。

https://developer.apple.com/jp/xcode/resources/

はじめてのiOSアプリ開発

今回製作するアプリは、プログラミングではHello Onsukeアプリを作成します。アイコンをタップすると、ロゴが表示され、アプリが起動します。起動時は「Hello!」という文字が画面上に表示されています。ボタン押すたびに、「Hello!」の文字列が表示/非表示するアプリです。

アプリ開発の流れ

iOSのアプリ開発は基本的に下記の流れで開発します。

  1. プロジェクト作成
  2. アプリ基本設定
  3. 画面デザイン
  4. UIオブジェクトとコードの関連付け
  5. コーディング
  6. アプリのビルドと実行
  7. アプリ申請
  8. リリース

プロジェクト作成

先ほどインストールした、Xcodeを起動します。
そして、Create a new Xcode projectを選択してください。

作りたいアプリのテンプレートを選択します。

今回は最もシンプルなAppというテンプレートを利用します。

テンプレートを選択後、作りたいアプリに応じて、設定を施します。

今回は以下のように設定します。

入力項目 入力値
Product Name HelloWorld
Team None
Oganization Identifier jp.co.al-j
Bundle Identifer jp.co.al-j.HelloWorld
Interface Storyboard
Life Cycle UIKit App Delegete
Language Swift
Use Core Data チェックを外す
include Unit Tests チェックを外す
include UI Tests チェックを外す

尚、各項目の詳細は以下です。

入力項目 説明
Product Name プロジェクトの名前を設定する
Team Xcodeに登録済みの「Apple ID」を設定する
Oganization Identifier アプリの識別子として使用される文字列を設定する
アプリの識別子はProduct NameとOganization Identifierが組み合わされて設定される
Language 開発言語を選択する( Swift or Objective-C )
Interface 画面の開発手法を選択する
Life Cycle アプリのライフサイクルを設定する
Use Core Data チェックを外す
include Unit Tests チェックを外す
include UI Tests チェックを外す

プロジェクトの保存場所を設定します。任意の場所を選択し、Createボタンをクリックして下さい。

※ ここではDesktopを保存場所として設定しています。

通常、1つのプロジェクトは1つのフォルダとして、まとめられます。以下にその基本的な構成を記します。
これらの中で、AppDelegate.swiftやViewController.swift、Main.storyboardファイルは、開発で頻繁に編集するファイルです。詳細は後述します。

Xcodeの画面構成と用語

これまでの手順で、iOSアプリを作成するための土台が整ったことになります。ここで、Xcodeというソフトウェアの基本的な画面構成と、頻出用語について説明します。

右上に配置されている以下のボタンを全て選択されている状態(青色)にして下さい。

Xcodeの画面は大きく分けて、以下のエリアに分かれています。

エリア名 説明
①アプリケーションメニュー Macのメニューバーの中に、使用中のアプリケーションのメニューバーが表示されます。
②ツールバー 画面上部のメニューでアプリの実行を行え、画面を切り替えることができます。
③ナビゲーターエリア 主に、編集するファイルを選択します。
④エディターエリア 選ばれたファイルに応じて、適切な編集画面が表示されます。
⑤インスペクターエリア 選択されたファイルやオブジェクトの設定の変更や確認を行います。
⑥デバッガーエリア プログラム実行時の様々なデバッグメッセージが表示されます。

※右上に配置されている以下のボタンをクリックして下さい。

エリア名 説明
⑦ライブラリーエリア iOS SDKに標準で備わっているボタンやリスト等のオブジェクト、さらには、独自に追加した画像素材等を選択します。

今後、①〜⑦のエリアを利用して開発をおこなってきます。操作方法については、後述で解説します。

アプリ基本設定

次にアプリの基本設定をしていきます。

まず、下記リンクから今回のアプリで使用するアプリのアイコン画像を取り込みます。

以下のzipファイルをダウンロードしたら解凍してください。

素材ダウンロード

アプリアイコン設定

アプリアイコンをセットしていきます。アプリアイコンのサイズは設定下記のとおりです。

まずその前に各種アプリアイコンのサイズを下記に記しておきます。

Notification用(iOS7〜13)アイコンのサイズ

画面スケール サイズ(px) ファイル名
x2 40 x 40 icon_20pt@2x.png
x3 60 x 60 icon_20pt@3x.png

設定画面用(iOS7〜13)アイコンのサイズ

画面スケール サイズ(px) ファイル名
x2 58 x 58 icon_29pt@2x.png
x3 87 x 87 icon_29pt@3x.png

Spotlight用(iOS7〜13)アイコンのサイズ

画面スケール サイズ(px) ファイル名
x2 80 x 80 icon_40pt@2x.png
x3 120 x 120 icon_40pt@3x.png

iPhoneアプリ用(iOS7〜13)アイコンのサイズ

画面スケール サイズ(px) ファイル名
x2 80 x 120 icon_60pt@2x.png
x3 120 x 180 icon_60pt@3x.png

App Store用アイコンのサイズ

画面スケール サイズ(px) 画像名(例)
x1 1024 icon_1024pt@1x.png

アイコンの設定方法

以下の1〜3に沿って、アイコン画像の設定をしていきましょう。

  1. Assets.xcassetsを選択する。

  1. AppIconの設定をiPhoneのみに設定します。

  1. それぞれの画像ファイルにドラック&ドロップします。

設定後、エラー(警告)が表示されていないことを確認してください。

サポートするデバイスの向きの設定

次に、対象デバイスとサポートするデバイスの向きの設定を以下のように行います。

Development info

Target Device 入力値
iOS13.5 iPhone チェックをする
iOS13.5 iPad チェックをはずす
Device Orientation Portrait チェックをする
Device Orientation Upside Down チェックをはずす
Device Orientation Landscape Left チェックをはずす
Device Orientation Landscape Right チェックをはずす

Bundle Nameの設定

アプリの表示タイトルを決めている設定項目(Bundle Name)を変更します。
Project Editorのinfoタブをクリックして、Bundle Name項目を次のように変更していきます。

Custom iOS Target Properties

Key Type Value
Bundle Name String Hello

画面デザイン

次に、画面のデザインを作成していきます。

スプラッシュ画面

スプラッシュ画面とは、アプリを起動したときに一番最初に表示される画面です。
企業やアプリのロゴマークを表示する際に利用します。

スプラッシュ画面はLaunchScreen.storyboardで設定します。

今回は以下のように、背景色(background)をBlack Color、中央にLabelオブジェクトを設置し、textをHelloWorld!にしていきたいと思います。

Viewの設定

ナビゲーターエリアからLaunchScreen.storyboardを選択し、以下のようにViewController > Viewを選択します。

インスペクターエリアからAttributes inspectorを選択し、BackgroundをBlack Colorへ設定します。

Viewプロパティ名 設定値
Background Black Color

Labelの設定

ライブラリーエリアを選択し、LaunchScreen.storyboard上にLabelを配置します。

ツリー上にLabelが配置されていることを確認します。

インスペクターエリアからAttributes Inspectorを選択し、Labelのプロパティを設定します。

Labelのプロパティを以下のようにして下さい。

Labelプロパティ名 設定値
Text HelloWorld!
Color White Color
Font 50px
Alignment centor

AutoLayoutの設定

AutoLayoutは制約（Constraint）という「位置」や「サイズ」に関するルールを設定することで、異なる大きさのiPhone上でも自動的にルールに合ったレイアウトに調整してくれる機能です。

Labelに対して、以下2つの制約（Constraint）を設定します。

Alignメニューを表示し、Horizontal Center in ContainerとVertical Center in Containerにチェックをし、Add 2 Constraintsをクリックします。

メイン画面

次にアプリ画面のデザインを行なっていきます。

今回は以下の画面構成をしたアプリを作成します。

Viewの設定

まずは、ナビゲーターエリアからMain.storyboardを選択し、以下のようにViewController > Viewを選択します。

インスペクターエリアからAttributes inspectorを選択し、BackgroundをLight Gray Colorへ設定します。

Viewプロパティ名 設定値
Background Light Gray Color

Labelの設定

Labelの設定をおこないます。

ライブラリーエリアからLabelを選択し、View上に配置します。

インスペクターエリアからAttributes Inspectorを選択し、Labelのプロパティを設定します。

Labelプロパティ名 設定値
Text Hello World!
Color White Color
Font 50px
Alignment centor

Labelに対して、AutoLayoutの設定をおこないます。

Add New Constraintsメニューを表示し、iPhoneの上端からLabelまでの距離を200px、左右を10px、Labelの縦の大きさを60pxに設定します。

Buttonの設定

ライブラリーエリアからButtonを選択し、View上に配置します。

インスペクターエリアからAttributes Inspectorを選択し、Buttonのプロパティを設定します。

Buttonプロパティ名 設定値
Title ボタン
Font 50px
Text Color White Color

Viewプロパティ名 設定値
Background Brack Color

Buttonに対して、AutoLayoutの設定をおこないます。

Add New Constraintsメニューを表示し、iPhoneの下端からButtonまでの距離を200px、左右を70px、Buttonの縦の大きさを150pxに設定します。

UIオブジェクトをコードの関連付け

次に、Main.storyboardに配置したオブジェクト（ButtonとLabel）をプログラムコードへ関連付けします。

関連付けをおこなう時は作業しやすいように、ナビゲーターエリア、デバッガーエリア、インスペクターエリアを非表示にしてください。

下図のように①をクリックします。そして②をクリックし、③のようにViewController.swiftを選択してください。

すると、下図のようにエディターエリアがMain.storyboardの画面とViewController.swiftのプログラムコードが2つに分割されて表示されます。

Labelの関連付け

次に下図のようにHelloWorld!のLabelを選択してcontrolキーを押しながらドラッグしてclass...の行とoverride...の行の間にドラッグしてください。

①の箇所にmyLabelと入力して②のConnectをクリックします。

下記のように自動的にプログラムがViewController.swiftに追加されました。
この操作により、Labelをプログラムで操作できるようになります。

Buttonの関連付け

次にButtonを選択して先ほどと同じようにボタンを選択してcontrolキーを押しながらドラッグして、下図の場所にドロップしてください。

下図のように①の箇所はActionを選択し、②のnameはbuttonPushedを入力しConnectボタンをクリックしてください。

下記のように自動的にプログラムがViewController.swiftに追加されます。
これ操作により、ボタンがタップされた場合のプログラムを実行する事ができるようになりました。

それでは次から具体的にプログラムを記述していきます。

コードの記述

前述した通り、iOSアプリはSwiftという言語を用いて、記述されています。このSwiftは、オブジェクト指向型の言語であり、このあたりの詳しい説明は今後行なっていきますが、とりあえず今回は難しいことは何も考えずに、コードを記述してみてください。

今回、改変するコードのファイルは1つだけです。ナビゲーターエリアから、ViewController.swiftを選択し、以下のように書き換えます。// ▼▼ 追加 ▼▼から// ▲▲ 追加 ▲▲までの間のプログラムを記述してください。編集した後はしっかり保存しましょう。

ViewController.swift

@IBAction func buttonPushed(_ sender: AnyObject) {

    // ▼▼ 追加 ▼▼

    if myLabel.isHidden {
        myLabel.isHidden = false
    }else{
        myLabel.isHidden = true
    }
    
    // ▲▲ 追加 ▲▲

}

尚、プログラムを早く記述する時のコツは「tab」キーを利用することです。

例えばifと入力すると以下のような候補一覧が表示されます。

上記のようにifelse - If-Else Statementが選択された状態で「tab」キーを押すと、If-Else文の構文が自動的にプログラムが挿入されます。

初心者のエラー原因のほとんどが構文ミス若しくはタイピングミスです。「tab」キーを利用すると早く記述することができ、エラーも少なくなるので積極的に利用するようにしてください。

ソースコードの説明

このコードにある、myLabelとは、UILabelクラスのインスタンスと呼ばれるものです。メソッド同様、クラスやインスタンスの詳細も今後、随時解説していきます。現段階では、myLabelは画面上のLabelと密接に関係しあい、そのコントロールをコード側から行うものと考えてください。

また、Buttonと関連付けを行った際に出てきたIBActionとは、メソッドの型（返り値）を示すものです。この場合は、buttonPushedというメソッド（処理）がUIオブジェクト上で発生するイベント（ボタンを押す、選択肢を変更する、など）に付随するものだということを明示しています。

「//」で始まる行はコメントと呼ばれる行です。このコメントは人間がコードを読む際に、コードの説明のメモ書き等を残せる仕組みとなっています。コンピュータ（iOSデバイス）は、プログラムを実行する際、全てのコメントを無視するため、コードの動作に影響を及ぼすことなく、コードの説明を記述することが可能となっています。自分でコードを記述する際、コメントを積極的に活用し、誰にとっても理解しやすいコードを目指しましょう。

ViewController.swift

@IBAction func buttonPushed(_ sender: AnyObject) {
    if myLabel.isHidden {
        myLabel.isHidden = false
    }else{
        myLabel.isHidden = true
    }
}

上記の、myLabel.isHidden = trueという記述は、「myLabelというLabelを非表示にせよ」という処理を意味しています。同様に、myLabel.isHidden = falseという記述は、「myLabelというラベルを表示にせよ」という処理になります。

アプリのビルドと実行

ここまでの内容で、開発環境構築からXcodeの基本的な使い方を学びながら、FirstAppの制作を完了しました。いよいよ、作ったアプリを動かすところまでやっきました。このセクションでは、アプリのビルド、及び実行方法を解説します。

ビルドとは？

プログラミングの経験がある方はご存知かと思いますが、アプリは作成したら、すぐに実行できるわけではありません。実行する前にソースをビルド（コンパイル）する必要があります。
昨今のコンピュータは、実に様々な使い方ができるため、「物凄く頭がいい」と思われるかもしれません。しかし、実は、コンピュータはあくまで、人間の命令した通りにしか動けないのです。プログラム（アプリ）のソースコードを「命令書」に例えるなら、ビルドとは、「人間の理解できる命令書を、コンピュータ（iPhoneなど）が理解できる機械語に翻訳する作業」に値します。ソースコードをビルドすることで、初めてアプリがiOSデバイス上で動くようになるのです。

Xcodeを用いたビルドと実行

Xcodeでは、ソースコードを記述したり、インターフェースをデザインしたりすることができる以外に、作成したものをビルドし、さらには実行するという機能を備えています。ここでは、シミュレーター上での実行と、実機上での実行、それぞれの場合に併せて、その手法を解説します。

シミュレーター上でのビルドと実行

まず、シミュレーター上でのビルドと実行の手法を説明します。
FirstAppを「iPhone 11」へ設定し、「Run」ボタンを押します。通常はこの操作によって、自動的にアプリがビルドされ、実行されます。しばらくすると、iOSシミュレーターが立ち上がり、アプリが起動します。ソースの大きさや使っているPCの仕様によって、多少ビルドと実行に時間がかかる場合もあります。

無事に起動した方、おめでとうございます！初めてのiOSアプリの完成の瞬間です！
起動後、ボタンを押すと、正常に「HelloWorld!」の文字列が消えることを確認してください。

シミュレーターは便利である一方、センサーやカメラを利用できない、物理的な動き（iPhoneを振るなど）を反映することができないなど、様々な制約があります。アプリの種類にもよりますが、特に事情が無い限り、実機上でビルドと実行を行うことをお勧めします。

実機上でのビルドと実行

次に、iPhoneの実機上で実行してみましょう。

まずは、XcodeへApple IDを登録します。

次に実機をUSBケーブルでPCと接続します。正常に認識されると、画面上部にある実行環境の設定（Schema）に以下のような選択肢が追加されます。設定が「HelloWorld > 【所有者の】iPhone」になっていることを確認します。

その後、「Run」ボタンを押します。

iPhone上で「HelloWorld」アプリをタップします。初回時は認証の許可を設定していない為、
以下の画面(「信頼されていないデベロッパ」)が表示されます。一旦キャンセルを押します。

設定 ＞ 一般 から「デバイス管理」をタップします。

「デベロッパAPP」の以下をタップします。

「信頼」をタップします。

トップ画面へ戻ります。

トップ画面から「HelloWorld」アイコンをタップします。

問題なく、iPhoneからも動作確認ができたらOKです。

iOSアプリの基本的な仕組みと構成

無事、シミュレーターや実機でアプリを動作させることに成功した方、本当にお疲れ様でした。最後に、教取り扱ったコードを元に、iOSアプリの基本的な仕組みと構成を解説します。

iPhoneアプリの構成

iOSアプリを構成する主なコンポーネントとしては、App DelegateやView Controller、Storyboardが挙げられます。

AppDelegateについて

AppDelegateは、いわば、「連絡役」として、iOS本体とアプリの間に立って、イベント（ホームボタンが押された、デバイスがスリープした、など）の発生の通知に使用されます。また、アプリの中でも、様々なクラス（画面・部品等）が互いにイベント（入力を受け取った、アイテムが選択された、など）の発生を通知しあう用途でも使われます。このように、イベントの発生を通知することを、「Delegate通知する」と表現することが多いので、覚えておいてください。

ViewControllerについて

View Controllerは、それぞれの「画面の管理人」です。基本的には、画面1つに対して、1つのView Controllerが対になっており、それぞれの画面内における処理などを受け持っています。My Very First Appの場合は画面が1つしかないため、View Controllerも1つです。ですが、複数の画面を持つアプリの場合、一部の例外を除き、基本的には画面の数だけView Controllerが必要となります。

Storyboardについて

Storyboardは、各画面の「設計図」のようなものです。各画面において、どの場所にどのようなオブジェクト（ボタンやラベル）を配置するかを管理しています。また、アプリに複数の画面がある場合、それぞれの遷移の手法等も管理しています。

iOSアプリ上の画面を作りあげるためには、以下の手法があります。

  • Storyboardを使う（iOS 5 SDKから新規登場）
  • XIBファイルを使う（iOS 4 SDK以前の主流）
  • SwiftのUI描画プログラムを、直接View Controllerに記述する

これらのうち、最も手軽なのはStoryboardを用いる手法ですが、XIBファイルを使う手法も依然として多く用いられています。

また、状況次第では直接描画プログラムをソースに記述しなくてはいけない場合もあります。iOSマスターコースでは、後半戦でXIBファイルや描画コードを用いたUI画面構築も取り扱うので、ご安心ください。

以下にApp DelegateとView Controller、Storyboardの相関関係をまとめます。App Delegateは全体のコーディネーションを行い、View Controller同士を管理します。View ControllerはStoryboardと密接に連携を取りながら、ユーザーからの入力を元に処理を行ったり、処理結果を画面表示に反映したりと、ユーザーインタラクションの重要部分を担っています。

まとめ

今回はiOSアプリを開発するための環境づくりから、Xcodeの使い方の解説、さらには、簡単なアプリ作成と実行を行いました。初めて聞く用語の連続や、使い慣れないソフトウェアの使用などで、わからないことも多くあったと思いますが、今回の目標は「学ぶ」というより「慣れる」ことなので、あまり不安に思わないで下さい。復習する際も、「とにかく使って慣れる」ことに重点をおいて行うことをお勧めします。

#iOS #swift
オリエンテーション
カウンターアプリ