解放区在住氷翠 緑の閃光

とりあえず作ってみよう。【Swift】

2018-05-27 17:07

このページの環境は
Swift4をベースにしています。
また、開発環境はXcode9
MacosはHighSierra 10.13となります。

はい、氷翠です。

復習の意味も込めて、基本からやり直してみます。
ここまでで、Xcode自体の機能とかも結構覚えたのでw

Xcodeを起動して、新規でプロジェクトを作成します。
上のような画面が出てくるので、氷翠の目的はmacosのアプリケーションを作成することにあるので、「macOS」を選択。更に、「Cocoa App」を選択します。
すでにいろんなテンプレートが用意されているので、非常に開発はしやすいと感じます。

はい、では、名前とか付けていきます。
「Product Name」のところに名前を付けますが、ここで「.(ピリオド)」を名前の中につけても、実際には「_(アンダーライン)」に置き換えられてしまうので、注意が必要です。
また、氷翠は「Swift」でこだわっていこうと思うので、「Language」の部分は「Swift」を選択した状態にします。
あと、ベースになるのは「Storyboard」を利用していくので、「Use Storyboards」にチェックを入れます。
今回はこれ以外はチェックせずにいきます。

次に出てきたこの画面では特に何もすることはありませんが、ここで気をつけるといえば、下の方にある「Development Target」のところ。標準では現在のOSのバージョンになっていますが、もし下位のバージョンをターゲットにするなら、ここを変更します。

大きな画面の左側にこんなものが出てきます。
プロジェクトの内容に含まれる関連したファイルの一覧です。
この中で特に使うのは3つ。
「AppDelegate.swift」「ViewController.swift」「Main.storyboard」です。今回は「AppDelegate.swift」は使いませんが。

デザインをしていく

まずは形からw
ボード上にある「Window」と書かれた明らかにウインドウのデザインをクリックしてアクティブにします。すると、左側にインスペクターがあるのでそこを注目します。
それが上記の画像。
「Title」のところにウインドウの名前をつけてあげます。
その下にチェックボックスがありますが、今回、固定したウインドウの大きさを保つため、「Resize」のチェックを外しておきます。

ではタブを切り替えます。この様に「Show Quick Help inspector」というのをクリックするとインスペクターの内容が切り替わります。ここではウインドウの大きさを数値で設定することができますし、「initial Position」のところで初期のウインドウの出現位置を設定することができます。
今回は、画面に対して中央に設定しています。
それが、プレビューの下にある2つのSELECTの部分になります。ここでは「Center Horizontally」「Center Vertically」となっている部分がそうです。

今度はこの部分をクリックしてアクティブにします。
実際にフォームをデザインするのは、この部分。この上にいろんなアイテムを配置していく土台になります。
これはビューというやつで、ViewControllerに関連されているものです。

さっきの土台をクリックした状態でこの部分を見てみると、「Class」のところが「ViewController」となっているのがわかります。
この部分が選択できるようになっている。ということは、他のファイルで「NSViewController」が設定されていると、ここで選択できるようになるということになります。
また、「Module」の下に「Inherit Module From Target」というのがあります。これは初期段階で表示するかどうかのチェックなので、最初は大概チェックされた状態になります。チェックを外してしまうと、実行時には何もウインドウが表示されないので、注意が必要です。

ちょっと縦長で邪魔な感じですが、この部分。いろんなコンポーネントが用意されています。
ここから必要なコンポーネントをドラッグすることで、そのアプリケーションに実装することができます。

では、その一番下に検索するためのフィールドが用意されているので、検索してみます。
ここでは「text」と入力してみます。
すると、コンポーネントの一覧が更新され、それに関連したコンポーネントの一覧に変化します。

今回のアプリケーションはテスト用ですので、この2つを使います。

それと、忘れちゃいけないのが、基本のボタンw
「button」で検索すると出てくるので、この一番上にある「Push Button」を配置します。

ということで、出来上がったのがこちら

とりあえず、横いっぱいにして配置。ビューの大きさも調整。それぞれグリッドに吸着するので、一定の開きを保ちつつ配置することができるので便利です。というか、素人でも綺麗に作れます。

Xcodeの使い方?

次に、画面右上にあるアイコンを見ていきます。
ここに2種類ありますが、右側がそれぞれのウインドウを表示するかどうか。左側が中央の作業スペースをどのように扱うかという指示になります。

下の方にはコンソールとかが表示されているかと思いますが、この右側の真ん中のボタンをクリックすることで非表示にすることができます。もちろん、左右のウインドウも同様です。

では、次に「ViewController.swift」を開いてみます。

開いてみると、ウインドウの上の方をみます。先程のアイコンで左側のグループの真ん中をクリックすると、上の画像のようになります。
というのも、作業が可能な領域が2つになります。上の画像はそのうちの一つ。片方にファイルをドラッグしてあげると、その場所にファイルを開くことができ、作業が可能になります。
つまり、2つのファイルを見比べながら、編集が可能になります。

片方をプログラム、もう片方をデザインというやり方も可能になります。
この方法を使うと、非常に作業が楽になりますので、覚えておくといいと思います。

余談ですが、「コマンド+T」でウインドウを複数用意することができます。MacosのFinderの機能と同じものです。

コーディング

今回は「ViewController.swift」だけ使います。


import Cocoa
class ViewController: NSViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    override var representedObject: Any? {
        didSet {
            // Update the view, if already loaded.
        }
    }
}

初期状態ではこんな内容になっています。
基本的にオブジェクト指向なので、クラスを作成していく感じになります。
ここではビューに関するプログラムをしていくことになります。

では、最初の「import Cocoa」ですが、Cocoaフレームに関するプログラムなので、これを宣言します。もちろん、他の命令文を使いたいときなどは、ここで別のものを宣言して使えるようにできます。

次にクラスの宣言ですが、「class ViewController: NSViewController」まずクラスであることの「class」その後ろに、クラスの名前。任意でつけても問題はありませんが、storyboardのほうでも設定が必要になります。その後ろに使用するクラス。独自のクラスの場合は必要ありませんが、今回のこのクラスではビューに関するものなので、この「NSViewController」が必要になります。

ここで余談ですが、氷翠が感じた限りですが、macosに関するものは「NS〜」、iOSに関するものは「UI〜」となっているようです。

まずは、先程の画面の状態にしましょう。
最初はこれを使うのが便利なんです。

というのも、デザインのコンポーネントとプログラムは現時点ではまだなんのつながりも持っていません。なので、プログラムをしたところで、実行したとき、何も動かないのです。

なので、

コンポーネントを右クリック。そのままプログラムの方へドラッグしていきます。
プログラムの上の方で、空いている部分に持っていくと、ヒントが出てきます。「Insert Outlet or Action」ってな感じで。
そこで離すと、

こんな感じのものが出てきます。
まず一番上はこの場合「Outlet」としておいてください。「Name」のところは任意でつけられる変数と考えてください。「Type」は「NSTextField」となっています。自動で選択されているので、いじることはないかと思います。「Storage」は基本的にこの「Weak」としておきます。他にもありますが、今はWeakだけでいいかと。

今回はこんな感じになりました。

すると、コードの方は、こんな感じで自動で入力してくれます。
「@IBOutlet」は変数とオブジェクトをつなぎますよ!という宣言、weakは氷翠はよくわかっていませんが、「var」は変更の可能な変数だということ。その後ろが変数の名前、その後ろに、このオブジェクトが何のコンポーネントなのか。
そして、このコードの左側、行数が並んでいる部分に丸がついています。これがデザインとつながっている証拠になります。つながっていなければただの丸になっているはず。つながっていると、このように二重丸になるので、確認してください。

では、同様に入力するコンポーネントもやっていきます。

できた結果がこんな感じになっています。
あ、ボタンはしません。
ボタンは次です。

ボタンも同様に右クリックで引っ張ってきますが、今度は下の方に引っ張ってきます。
これは変数として使うのではなく、ボタンがクリックされたときの関数を作成するためです。

今度は「Connection」のところを「Outlet」ではなく、「Action」に変更します。

「Name」のところは任意で関数名をつけます。
「Type」のところは今回はどちらでも構いませんが、氷翠としてはわかりやすく「NSButton」にします。

ということで、こんな感じになりました。

では実際にプログラミングしていきます。
まず、変数名「tf」というのは入力する方の「NSTextField」のことです。これを扱いやすくするため、別の変数に代入します。ここでは変数ではなく、定数として扱います。内容をいじることがないので。
ということで、「tf」の内容を取得するためのパラメータが「stringValue」というのがあるので指定します。
ここで一旦止めておくと、Xcodeが現在のプログラムの内容を検証してくれます。エラーがあれば教えてくれるのです。
で、まった結果、右側になにか!が出ています。

「Initializetion of immutable value ‘a’ was never used; consider replacing with assignment to ‘_’ or removing it」

長いですよね。
要は、この先、この変数が使われていないので、「_」(アンダーライン)に置き換えるか、削除したほうがいいよ。ということです。
親切にもこんな情報まで検証してくれます。

はい、これも画像が大きいので省きます。
よく見ると、下に入力途中の文字が見えます。そうすると、コードアシスト機能によって、その文字が含まれる関数やパラメータなどが候補として表示されます。
氷翠はいつもこれを見て、新しい発見をしていますw


// tfの内容を取得する
let a = tf.stringValue
if a.isEmpty {
    
} // endif

こんな感じで入力しました。
もし、「a」の内容が何も入力されていなかったら
という感じですね。

内容は「return」だけ。何もしないで返してあげます。

ここでも余談ですが、「}」の後ろにカーソルを持っていくと、それに対応した「{」が一瞬ハイライトするので、何個もif文が入れ子になっても見分けがつくかと思います。
あ、「}」の後ろの「endif」というコメントは氷翠の癖なんで、つける必要はありませんw


@IBAction func push(_ sender: NSButton) {
    // tfの内容を取得する
    let a = tf.stringValue
    if a.isEmpty {
        // 何も入力されていなかったら終了
        return
    } // endif
    // 文字が入力されていると以降のプログラムが実行される
    // ラベルに入力した文字を代入する
    textLabel.stringValue = a
}

最終的にこんな感じのものになりました。
結局、ラベルであるコンポーネントも「NSTextField」なので、扱い方は一緒なので、最初に取り出したように「stringValue」のプロパティを利用すればいいわけです。

実行してみる

では実際に実行してみましょう。
画面、左上にあるこの部分。再生ぽいボタンをクリックすると、ビルドが始まり、完了したら自動的に実行されます。

その間、検証・コンパイルするので、上の中央でこんな感じで進行状況が確認できます。

終わればこんな感じで完了を示してくれます。もちろん、プログラムに問題があれば別のメッセージが出るので見ておきましょう。

無事に実行できました。
では、動かしてみましょう。

ここに入力、ボタンをクリックすると

という感じでできました。

今回はここまで。
お疲れ様でした♪