第３回　はじめてのプログラム

2024年11月10日 2024年11月10日

田部井保

　前回の最後の画面で、左側の「Create New Project…」をクリックします。

　上のiOSを選択してAppを選択します。そして「Next」ボタンを押します。

　Product Name: に「Hello」と入れて、Team:はそのまま、Organization Identifier:には好きな名前、Interface:は「Storyboard」（ここはSwiftUIにしないで下さい）、Language:は「Swift」、Testing System:はそのまま、Storage:は「None」として下さい。「Next」ボタンを押します。

　保存する場所にして「Create」ボタンを押します。

　この様な画面が出たら、「Fix...」をクリックします。

　Author Name:に名前、Author Email:にEmailアドレスを入れて、この画面は閉じます。

　この様な画面になったと思います。真ん中辺の、Minimum Deployments、iOS 15に変えましょう。iOS 15.6 になりました。

　ここで、上部真ん中、少し左のHelloの所のiPadやiPhoneとなっている所をクリックします。

　僕の場合は、最初から iPhone 16 Pro になっていました。この講座では、iPhone 16 Pro としてやっていきますが、皆さん好きなデバイスに変えて下さい。

　ここで左側からMainを選びました。

　この様に画面イメージが現れます。

　メニューのViewから「Show Library」を選びます。

　以下の画面が出ます。

　ここで、Labelをドラッグして、iPhoneのイメージ上にドロップします。

　Labelが貼りつきました。

　同様にButtonもドラッグ&ドロップします。

　この様になりました。

　ここで、iPhoneのイメージの入っている箱の右端の上、一本線の入った四角に＋が入っている部分をクリックします。

　この様に２つに分かれましたでしょうか？

　ここで、２つの内の左側のウインドウをクリックして、

　左側の「ViewController」を選びます。

　この様になりましたでしょうか？

　ここで、右側のウインドウのラベルをcontrolキーを押しながら選択して、左側のウインドウの１６、１７行目辺りまでドラッグ&ドロップします。右側のウインドウ、白い部分の枠を広げた方が良いかも知れません。

　ポップアップが現れます。ここでNameに「Lab」と入れてエンターを押し、「Connect」ボタンをクリックします。

　この様に、ここの例では、１７行目が以下の様になりました。

//
//  ViewController.swift
//  Hello
//
//  Created by 保 Tabei on 2024/11/10.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBOutlet weak var Lab: UILabel!
    
}

　続いて、Buttonを選択して、一番右のウインドウの上部、アイコンが７個並んでいる部分の一番右のアイコンを選択します。

　ここで現れた中から、Touch Up Insideの右の丸を選択して左側のコード領域の１８、１９行目辺りにドラッグ&ドロップします。

　この様なポップアップが現れるので、Nameに「Push」と入れて「Connect」ボタンを押して下さい。

　この様になりました。

　ここで、この例では２０行目辺りに以下のコードを入れます。

//
//  ViewController.swift
//  Hello
//
//  Created by 保 Tabei on 2024/11/10.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBOutlet weak var Lab: UILabel!
    
    @IBAction func Push(_ sender: Any) {
        Lab.text = "Hello World!"
    }
}

　左側のウインドウの上部にある▶️を押して実行してみましょう。M3 Macにして速くなると期待したのですが、そんなに速くはなりませんでした。表示されるまでとても時間がかかりました。２回目は速くなった気がします。ソフトを色々立ち上げている方は、落としても良いソフトは終了させてからの方が良いかも知れません。

　ボタンを押すと、以下の様になります。

　初めてのプログラムはどうでしたか？ここで、「Hello World!」が全部出ずに「Hel…」となっています。これを全部出すには、どうすれば良いでしょう？またButtonの形状を変えられたら変えてみて下さい。

　ここからは解説編となります。

　まず、ラベルに「Hello World!」、全部出す件です。

　上のように、ラベルの横の四角をドラッグすればラベルが伸びます。

　次にボタンの形状を変えるです。

　ボタンを選択して、右側の枠の一番上のアイコン、７つ並んでいますが、それの左から５番目を選択します。

　上の方、Style を「Filled」、Title の一個下を「押して下さい」、真ん中より少し上の Background を「System Cyan Color」に変えてみました。色々いじってみて下さい。

　少しラベルを広げ過ぎた様です。

　ソースコードにコメントを入れました。

//
//  ViewController.swift
//  Hello
//
//  Created by 保 Tabei on 2024/11/10.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    ///ラベル
    @IBOutlet weak var Lab: UILabel!
    
    ///ボタン押下時処理
    @IBAction func Push(_ sender: Any) {
        //ラベルに「Hello World!」と記述する。
        Lab.text = "Hello World!"
    }
}

　今回は、特に難しいところは無いと思います。Lab.textのところが難しいかも知れません。Labラベルのtextプロパティに「Hello World!」を書き込むという処理です。textプロパティには、表示する文字列を指定します。「=」は等しいでは無くて、右のものを左に代入するという意味で使います。等しいは「==」と「=」を二つ並べます。

　今回はLabelとButtonを配置しましたが、プログラム中で扱えるようにするには、属性を変えるだけならcontrolキーを押しながらドラッグ、動作を記述するなら⚪︎からドラッグしてコード中の適切な位置にドロップする必要があります。Buttonは今回、途中で表示名を変える等の処理をせず、ボタンを押した時の処理を書くだけでしたので、Buttonをcontrolキーを押しながらドラッグしてコード中にドロップする処理は省きました。Labelのみcontrolキーを押しながらドラッグアンドドロップをしてLabelに名前を付け、その名前で処理出来るようにしました。マウスボタンを押した時の処理を書くために、Buttonを選択して、右上、一番右のアイコンをクリックして、Touch Up Insideの所の⚪︎からドラッグアンドドロップして出来た関数にコードを書きました。Touch Up Insideはマウスが押された時に動作します。Upの名前の通りマウスを押し下げてその後押し上げた時に動作します。これをTouch Up Insideではなくて、Touch Dowmにすると、マウスを押し下げた時に動作します。Touch Up InsideはInsideの名前の通りButtonから外れないで放した場合です。Buttonから外れて放すと動作しません。マウスボタンを押して、違うボタンだったと気づいた時に、マウスをボタンの外、Buttonの色が元の色に戻るまでの所に持って行って放せば、この関数は動作しません。Touch Up Outsideですが、ボタンの外で動作します。ボタンの外、Buttonの色が元の色に戻る所で放した場合に動作します。これは実際にやってみるとよく解ると思います。