最もシンプルなアプリを作る

iPhoneの画面に『ボタン』『ラベル』を配置して、ボタンを押したらラベルに文字列『hello world』と表示するアプリを作ってみましょう。

上のように動くアプリを作るためには、↓このようなプログラムが必要です。

難しそう! と思ったかもしれませんが大丈夫です。なぜなら自分で打ち込むプログラムは、このうちのたった1行だけですから。

学習内容
・プロジェクトの作り方 ・ボタンやラベルなどの『部品』をアプリの画面に配置する方法
・画面に配置した部品とプログラムを接続する方法
・ボタンを押したらラベルに「hello world」と表示する方法
・復習と応用問題

1.プロジェクトを作る

まずアプリケーションフォルダに入っているXcodeを起動してください。

Xcodeを起動したら『Create a new Xcode project』をクリックしてください。
『Xcodeのあたらしいプロジェクトを作る』という意味です。

もしくは、Xcodeのメニューの『File』→『New』→『Project』をクリックしてもプロジェクトを作れます。

補足 プロジェクトとは?
新しくアプリを作る時は必ず『プロジェクト』を作ります。 プロジェクトには画面デザイン、プログラムコード、画像ファイル、音声ファイルなど、さまざまなファイルが含まれます。 アプリを構成する、たくさんのファイルをひとまとめにしたものが『プロジェクト』です。

『Single View Application』を選んで、右下の『Next』を押してください。

必要な情報を入力します。

Product Name(アプリ(製品)の名前)
今回は『helloWorld』

『Team(開発チーム)』
初めての方は『Add Acount』を選んでAppleIDでログインしてください。2回目からはAppleIDを選ぶだけでOKです。

なお、レンタルの場合は変更しなくて大丈夫です。

Add accountをしたら、自分のAppleIDとパスワードを入力してください。

Descriptionは説明です。適当に入れておいてください。

↑このようになったらOKです。左上の赤い『閉じるボタン』を押してウインドウを閉じてください。

AppleIDの設定が成功してTeam欄をクリックすると、自分の名前が出てくるので選んでください。

・Organization Name(組織の名前)
会社名などを入力しますが、自分個人の名前で大丈夫です。

・Organization Identifier(組織の識別子)
jp.yamadaなど、『jp.』を頭に付けて、後ろは組織名や名字などを入れます。

・Language(言語)
Swiftを選んでください。

・チェックボックスは全部はずしてください。

入力が終わったら『Next』を押して次の画面に進んでください。

保存する場所を決めます。

『Documents』などで大丈夫です。アプリ開発用のフォルダに入れたい時はフォルダを作って、そこを選んでください。

『Create(作成)』を押すと、アプリの雛形が作られます。

アプリの開発画面が起動します。

補足 開発画面とは?
アプリは、画面デザインとプログラム、画像ファイル、音声ファイルなどたくさんのファイルからできています。アプリの画面デザインを作ったりプログラムを打ち込んだりする画面をここでは総合して『開発画面』と呼びました。 難しい言葉では『統合開発環境(IDE)』なんて言ったりしますが、とりあえず今は気にしないでください。

では、アプリの画面デザインを作っていきましょう。

2.スマホの画面にボタンを配置する

開発画面の左には『ファイルの一覧』が表示されています。

ファイル一覧の『Main.storyboard』をクリックすると、スマホのデザイン画面が真ん中に表示されます。

最初は真っ白です。

デザイン画面を表示すると、画面の右下にボタンやテキスト表示ラベルなどの『部品リスト』が出てきます。

部品のリストを下にスクロールしていくと、ボタン(Button)やラベル(Label)、文字入力欄(Text Field)などがあります。

『Button』をドラッグしてデザイン画面にドロップしてください。

すると、新しいボタンが配置されます。

補足 部品の名前と使い方

Label(ラベル)

画面に文字を表示したい時に使います。例えば、名前やIDの入力欄の横に『名前』とか『ID』と表示する時はラベルを使います。計算結果や処理の結果を表示するのにも使います。画面に文字を表示したい時はラベルを使うことが多いです。

Button(ボタン)
そのまんまボタンです。文字ボタンや画像ボタンなどがあります。

Segmentd Control(セグメンテッド・コントロール)
何種類かの選択肢を表示して一つを選んでもらうときに使います。選んだ項目でアプリの動作を変えるため、設定に使われることが多いです。

Text Field(テキスト・フィールド)
テキスト(文字列)を入力するために使います。名前やIDなどを実際に入力するために使います。

他にも色々あります。徐々に使っていきましょう。

 

3.ボタンのタイトルを変えましょう

青い文字で『button』と表示されているのが配置したボタンです。
青い文字の『button』をクリックすると、Xcodeの右側にボタンの設定が表示されます。
『Title』のところにある『button』という文字を『ボタンその1』に書き換えてください。

デザイン画面の『button』が『ボ…1』と表示されます。ボタンの幅が狭いので『ボタンその1』が省略されてしまっています。

デザイン画面のボタンの枠にマウスカーソルを重ねると形が変わります。

ドラッグして広げればボタンのサイズが大きくなります。

ボタンのフォントも変更できます。『Font』の右にある上下ボタンを押すとフォントのサイズが変わります。

Tボタンを押すとフォントの種類も変えられます(今はやらなくていいです)。

4.ラベルも追加してください

部品にある『Label』をボタンと同じ要領でデザイン画面に置いてください。

ラベルの幅もボタンと同じように広くできます。

ラベルの文字を中央揃えにしてみましょう。

ラベルの設定にある『Alignment』で中央揃えをクリックすると、『Label』という文字が中央揃えになります。

5.ボタンとラベルをプログラムに接続(Connect)する

次は、画面とプログラムを接続する(関連付けする)作業をします。
アプリは、さっき作った『デザイン』『プログラム』に分かれています。
デザインとプログラムを結び付けないと、アプリらしい動作を作っていくことができません。
Xcodeの右上にある○が2つ重なったボタンを押すと、デザイン画面が2つに分かれます。

左がデザイン画面で、右がプログラム画面です。

まずは『ボタンをタップしたら』という動作をプログラムに結びつけます。
『Ctrlキー』を押しながら『ボタンその1』をクリックすると黒いポップアップウィンドウが現れます。

リストの下から1/3くらいのところに『Touch Up Inside』(タッチアップインサイド)という項目があるので、右端の○をドラッグしてプログラム画面に引っ張ってください。
プログラム画面に青い線が現れたら離してください。

成功すると灰色のポップアップウィンドウが現れます。『Name』の部分に『tapButton』と入力してください。

名前を入力して右下の『Connect(接続)』を押すと、ボタンのアクションがプログラム画面に追加されます。

補足 アクションとは?

例えばボタンを押すなど、スマホの画面を操作することを『アクション』と言います。 ここでは『ボタンその1』というボタンに、『押したとき(Touch up inside)』というアクションを接続しました。

アクションを接続して実際にアプリを動かし、画面の『ボタンその1』を押すと、『tapButton』が呼びされます。

 

続いてラベルもプログラムと繋げます。
ボタンと同じように『Ctrlキー』を押しながら『Label』をクリックすると黒いポップアップウィンドウが現れます。

真ん中にある『New Referencing Outlet』の○をドラッグしてプログラム画面にドロップしてください。

名前を入力するポップアップウィンドウが出たら『Name』の部分に名前を入力してください。とりあえず『label』で大丈夫です。

補足 Outletとは?
ボタンの時はアクションでしたが、今度はアウトレットです。
アウトレットと言っても、安売りのことではありません。
デザイン画面に置いた部品(ラベルやボタン)をプログラムの中で使えるようにするには、名前を付ける必要があります。
「山田さん、この仕事お願いします」というように、誰かを呼んで仕事を頼むには、その人の名前が必要です。 プログラムでも同じです。名前を付けなくては用事を頼めません。
さっきは『ボタンを押したら』という行動(アクション)に『tapButton』という名前を付けました。 ここではラベルという部品そのものに『label』という名前を付けました。
プログラムの中で使えるように『名前を付けた部品』のことを『アウトレット』と呼びます。 ボタン自体もアウトレットとして名前を付けることはできますが、今回は必要ないのでアウトレットはラベルだけ用意します。 (例えばラベルのタイトルを動的に変えたい場合は、アウトレットを接続する必要があります)

6.ボタンを押したらラベルに文字を表示する

ここまでの作業で、
・アプリの画面にボタンとラベルが追加されました。
・ボタンを押したときのアクションがプログラムに接続されました。
・ラベルのアウトレットがプログラムに接続されました。

下の赤い枠で囲んだ部分が追加したアウトレットとアクションです。

次に、ボタンを押したらラベルに『hello world』と表示するように1行だけプログラムを書いてみましょう。

ボタンのアクションの{ }の間に下記の1行を追加してください。

『tapButton(_ sender: Any)』の右に書いてある『{』から、3行目の『}』の間にプログラムを書くのが重要です。外に書くとエラーになります。

アウトレット『label』『text』『hello world』という文字列データを入れなさい、という内容です。

プログラムでは、イコールの右から左に内容がコピーされます(代入と言います)

ラベルの『.text』に文字列を入れると、それが画面に表示されるという性質があります。

ボタンを押すとラベルのtextに『hello world』が代入され、画面に表示されるという仕組みです。

補足 文字列データは“ ”でくくる
文字列データとは、文字がいくつか集まったデータです。 文字の列だから文字列。String(ストリング)とかtext(テキスト)なんて呼ばれ方もします。
プログラムの中に直接文字列データを書く時は、半角の“”(ダブルクォーテーション)で囲む必要があります。 上の例では『label.text = hello world』と書くとエラーになります。
“”が大事です。

 

7.iPhoneにアプリを転送して実行

1.USBケーブルでiPhoneとMacを接続してください。
2.Xcodeの左上にある『helloworld』の右の『iPhone xxxx』という部分をクリックしてください。

3.一番上の『Device iPhone』(自分のiPhoneの名前が出てきます)を選んでください。
(USBケーブルで接続したiPhoneの実機で動かす、という設定をしています)

4.次に、左にある『▶』実行ボタンを押してください。

これでプログラムがアプリの形にパッケージされてiPhoneに送られます(少し時間が掛かることがありますが待ってください)。

ただし、プログラムにエラーがあると実行できません。

補足 エラーの直し方
エラーがあると画面上部に赤いアイコンとエラーの数が表示されます。エラーが0にならないとアプリを実行できません。
プログラムのエラー箇所に赤いアイコンが表示されます。
クリックするとエラーの内容と、場合によってはFix(修正内容)が表示されます。Fixがある場合はクリックしてください。自動で修正されます。
Fixがない時はプログラムをよく観察して間違いを見つけてください。エラーメッセージを検索してみるとヒントが見つかるかもしれません。最初はどこを直せばいいのか分からないと思うので、エラーが出たら遠慮なく質問してください。

 

8.開発元を信頼する

初めて自分で作ったアプリを実行すると、iPhoneの画面に下のな警告が表示されます(有料ライセンスを買って開発する場合は出ません)。

『信頼されていない開発元』とは自分のことです。実行するために、自分自身を信頼してやるという設定を行います。

iPhoneの[設定]→[一般]→[プロファイル or プロファイルとデバイス管理]を開いてください。

デベロッパAPPの下に自分のAppleIDが表示されているはずです。

タップして開いてください。

『”xxxx@xxxx”を信頼』と書かれている部分をタップしてください。

確認画面が出るので、『信頼』をタップすれば完了です。これで自作のアプリを動かすことができます。

9.動作を確認する

実行に成功すると、iPhoneでアプリが実行されます。

白い画面に『ボタンその1』と表示されるはずです。

iPhoneがロックされていると実行できないので、実行ボタンを押す前にロックを解除してホーム画面を出しておいてください。

『ボタンその1』を押して下のラベルに『hello world』と表示されれば成功です。

10.起動しない場合や、途中で止まってしまう場合

バグはなく、プログラムには何の問題もないのに途中で止まってしまうことがあります。

そんな時はプログラムの左側に下図のような青いマークがないか確認してください。これがあると、プログラムがそこで一時停止してしまいます。

『ブレイクポイント』という機能で、これはこれで便利ですが、今は使いません。ドラッグして右に捨てれば消えます。

iPhoneのiOSが古いとアプリが起動しないことがあります。

その時は下記順番(左から)にクリックして『Project』を選び、『iOS Deployment Target』のバージョンを下げてください。

 

補足 リネーム(名前変更)の方法

ラベルやボタンなどの名前を変更するときは、下記の方法で一括変更しましょう。
すでに接続したアウトレットなどのネームを手入力で変更するのもバグの原因になります。

(1)ViewController.swiftのファイルを開き、リネームしたい部品の名前にカーソルを動かし、右クリック

(2)出てきた欄に新しいネームを記入して、右上の「Rename」ボタンを押す

これで一度にすべてリネームできます。とても簡単ですよね。

 

他にも途中で止まってしまう原因は色々あります。分からなかったら遠慮なく質問してください。

11.まとめ

ボタンとラベルをアプリの画面に表示して、ボタンを押したらラベルに文字列を表示できるようになりました。

これがアプリ開発の基礎となります。

画面をデザインし、アウトレットやアクションを設定し、アクションに動作を書きます。アプリは大体そういう構造でできています。

12.復習と応用

ボタンとラベルをあと2個ずつ追加して、各ボタンを押したら対応するラベルに挨拶を表示するようにしてください。

・『ボタンその2』、『ラベル2』、『ボタンその3』、『ラベル3』を追加する。
・『ボタンその2』を押したら『ラベル2』に『こんにちは』と表示する。
・『ボタンその3』を押したら『ラベル3』に『你好』と表示する。
・ラベル2は左寄せ、ラベル3は右寄せに設定する。

実行してボタンを押すと下のような画面になります。

ボタンのタイトル、色、表示される内容などはオリジナルで変えても構いません。

できるだけ自力でがんばってみましょう。正解のプログラムを下の方に載せておきます。

13.復習と応用の正解

解説を書いたものが↓こちらです。正しく書けましたか?

なお、プログラムの中で緑色の部分、『//』の後ろの部分は『コメント』と言います。プログラムの説明を書くためのもので、何を書いてもバグにはなりません。

アウトレットを接続したlabel、label2、label3に対して、ボタンのアクションtapButton、tapButton2、tapButton3でそれぞれの挨拶文字列を代入しています。

 

戻る