シュウジマブログ

Apple製品,技術系の話をするブログ

Xcode + SwiftでmacOSアプリのHelloWorld(ラベル,ボタン使用)

今更ながら,macOSのアプリを作ってみたくなりました.

WindowsだとC# + .NetFrameWork のHelloWorldがごろごろ落ちているのですが,macだと意外と少なくて苦労しました.

初心者ですが,自分がやってみてできた方法を共有しとこうと思います.

ツッコミどころなどあればお問い合わせフォームからお願いします.

環境

  • macOS 10.15.5
  • Xcode 10.2.1
  • Swift 5.0.1

プロジェクトの作成

Xcodeのインストールは省略させていただきます.

Cocoa Appの作成

f:id:masa_flyu:20190706233443j:plain

Xcodeを起動したら Create a new Xcode projectを選択します

f:id:masa_flyu:20190706234318j:plain 一覧からmacOSタブを開き,Cocoa Appを選択します

ここで少し脱線しますが,Cocoa とは何かについてほんの少しだけ説明します.CocoaとはmacOSアプリケーションを作るためのAPI群の名前です.Windowsで言うところの.NetFrameWorkのようなものでしょう.Steve Jobsが最初にOS Xを発表した時の図が以下の画像です.macOSアプリの製作について調べていると,CocoaやQuartzなどの名前をよく見かけますが,Cocoaは比較的上層でアプリから使うべきAPI群,Quartzは比較的下層でOSが使うべき描画処理エンジンという括りのようです.

f:id:masa_flyu:20190706233836j:plain

Macworld San Francisco 2000-The Mac OS X Introduction (Pt.1) - YouTubeから引用

f:id:masa_flyu:20190706235843j:plain

プロジェクトの名前を入力します

他のフィールドは基本的にそのままで良いでしょう.

Organization...はApp Storeに申請するときだけ重要みたいです.

初期設定どおりかと思いますが,LanguageはSwift,Use StoryBoardsにチェックがあることを確認してください.

以上を確認したらNextで次に進みます

f:id:masa_flyu:20190706235401j:plain

どの場所に保存するか選べます.適当な場所を選びましょう

下の設定の部分は私は画像の通りにしました.

Gitはバージョン管理機能なのでチェックを外しても問題ないでしょう.

f:id:masa_flyu:20190707000227j:plain

以上で設定が完了し,この画面にたどり着けばプロジェクトの作成が完了です.

この画面はプロジェクトの設定を表しています.

App Storeでリリースしたり他の人とアプリを共用するのでなければ設定をいじる必要はほぼ無いと思われます.

Storyboardへ

f:id:masa_flyu:20190707000556j:plain

左のメニューからMain.storyboardを選択します

f:id:masa_flyu:20190707001634j:plain

これがStoryBoardです. 画面遷移をグラフィカルに見ながら設計することで,洗練された見た目のアプリケーションを素早く作成することができます.

オブジェクトの配置

では実際にアプリケーションを構築していきます.

f:id:masa_flyu:20190707002438j:plain

右上のホームボタンのようなアイコンを選択してください

f:id:masa_flyu:20190707003733j:plain

Spotlight検索のような検索ウィンドウが出現します.

ここで,アプリケーションに配置したいボタンや要素を選択できます.

今回はウインドウ上に

  • Label ×2
  • Text Field ×2
  • Push Button

を配置します.

f:id:masa_flyu:20190707004100j:plain

まずはLabelをドラッグして貼り付けてください

貼り付ける場所はView Controllerと書かれたウインドウではなく,その下の四角い領域です.

配置したラベルやボタンは選択してコピー→貼り付けすることで増やすことができます(先ほどと同様にもう一度ドラッグしてもOK).

f:id:masa_flyu:20190707004115j:plainf:id:masa_flyu:20190707004117j:plain

同様にText Field,PushButtonをドラッグで貼り付けます

f:id:masa_flyu:20190707004554j:plain

これらの操作を駆使して,ラベル2つ,テキスト領域2つ,ボタン1つを配置してください

f:id:masa_flyu:20190707004910j:plain

f:id:masa_flyu:20190707005149j:plain

ラベルはクリックして周囲をドラッグすることで領域を拡大できます

動作チェック

f:id:masa_flyu:20190707010223j:plain

左上の再生ボタンのようなアイコンをクリックすることで,ビルドして実行できます.

f:id:masa_flyu:20190707010310j:plain

f:id:masa_flyu:20190707010403j:plain

「Build Succeeded」という表示が出た後で,ウインドウが出現します.

これがあなたが今作ったアプリケーションです

といってもまだプログラムを書いていないので張りぼてにすぎません.

Swiftプログラムへのリンク

Storyboardで編集したウインドウはプログラムで要素を編集するために,「紐付け」の作業を行わなければなりません.

この紐付けの作業をXcodeでは,本当に紐を結びつけるようにして行うことができます.

f:id:masa_flyu:20190707010739j:plainf:id:masa_flyu:20190707010739j:plain

右上の知恵の輪のようなアイコンをクリックします.

f:id:masa_flyu:20190707011012j:plain

するとStoryboardの領域を縦に割るようにソースコードの領域が出現します.

なにやらたくさんのソースコードが書かれていますが,これは今回一切触れないファイルですので安心してください.

f:id:masa_flyu:20190707011333j:plain

f:id:masa_flyu:20190707011307j:plain

「NSApplication.h」というファイル名(今開いているもの)をクリックすると選択肢が出現しますので,ViewController.swiftを開いてください.

f:id:masa_flyu:20190707011505j:plain

開くとこんな感じになります.

ここにウインドウ要素との紐付けを行なっていきます.

f:id:masa_flyu:20190707011852j:plain

Storyboard上に配置したText Fieldから,controlキーを押しながらドラッグしてください

すると水色の線がついてくるので,右側のプログラムの「class〜〜〜」と書かれた行の下にドラッグしてください

すると小さなポップアップウインドウが出現しますので,Nameの欄に「textfield_x」と入れてください.

Connectをクリックすると紐付けが完了し,プログラムに

    @IBOutlet weak var textfield_x: NSTextField!

の1行が追加されます.

同様に5つの要素について以下

  • textfield_x 上のテキストフィールド
  • textfield_y 下のテキストフィールド
  • button_move ボタン
  • label_left 左のラベル
  • label_right 右のラベル

のように紐付けをこなってください(名前は私が決めたものです).

紐付けを消したいとき

間違えてしまって紐付けの操作を取り消すときには,追加された行を削除するとともに,以下の操作も行なってください.

f:id:masa_flyu:20190707012449j:plain

紐付け元である要素を右クリックすると,黒いメニューが出現します.

中央付近の紐付けされている要素にある,×のアイコンをクリックすることで紐付けを解除できます.

紐付けが完了するとこのようになるはずです.

f:id:masa_flyu:20190707012918j:plain

この状態でビルドして実行してエラー等が出ないことを確認してください.

もしエラーなどが出る場合は無駄な紐付け等をしてしまっている可能性があります.

わからない場合は最初からやり直すのも手です.

Hello, World

いよいよプログラムを編集していきます.

f:id:masa_flyu:20190707013501j:plain

さきほど出した右側のプログラムの表示は閉じておきましょう(この画面で編集することも可能です,今回は画面が狭いので改めて開き直すことにします).

f:id:masa_flyu:20190707013900j:plain

先ほど開いていたのと同じ,「ViewController.swift」を開きます.

f:id:masa_flyu:20190707014210j:plain

既存のプログラムの確認

このプログラムを編集していきますが,その前にだいたいの外観をつかんでおきましょう.

class ViewController: NSViewController {

今回作成するウインドウはNSViewというAPIで描画されるものです.NSとはNextSTEPという,Steve Jobsがかつて在籍した会社の製品に由来します.

    @IBOutlet weak var textfield_x: NSTextField!
    @IBOutlet weak var textfield_y: NSTextField!
    @IBOutlet weak var button_move: NSButton!
    @IBOutlet weak var label_left: NSTextField!
    @IBOutlet weak var label_right: NSTextField!

先ほど追加した紐です.紐の接続口の役割をするこのコードをIBOutletと言います.IBとはInterfaceBuilderの略です.

override func viewDidLoad() {
        super.viewDidLoad()

この行はウインドウがロードされてすぐ1回だけ実行される関数です.

ArduinoやProcessingを使ったことがある人はsetup()だと思えば良いでしょう.

    override var representedObject: Any? {
        didSet {

これは今回は使用しません.プロパティを記述するためのものです.

Hello, Worldを追記する.

ようやくここまできました.

それではいよいよHello, Worldプログラムを記述します.

viewDidLoad()内に以下の1行を追記してください

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        label_left.stringValue = "Hello World!" //1行を追記
    }

ビルドして実行しましよう.

以下のように左のラベルがHello, World!という表記になっていたら成功です.

macOSのでは文字の表示を各要素が持つstringValueプロパティに文字列を代入することで実現できます.

ちなみにintValue,floatValueといったプロパティもあり,数値を直接代入できます.

f:id:masa_flyu:20190707020842j:plain

ボタンイベントを使う

実際のアプリケーションではHello, Worldのように最初から決まった表示をするのではなく,ユーザの操作に応じて,動作を行う場面が多いでしょう.

アプリケーションでは,ユーザの操作をOSから自動的に教えてもらう機能「イベント」を利用可能です.

今回はボタンを使ってイベントの機能を体験します.

ボタンイベントの紐付け作業

最初と同じようにStoryboardに戻り,右側にViewController.swiftを開いてください.

f:id:masa_flyu:20190707021547j:plain

この状態で,Storyboard上のボタンを右クリックします

出現した黒いメニューの中腹から,actionと書かれた行を探し,その右端をViewController.swiftのclassの中にドラッグします

例によってポップアップが出現するので,「button_move_clicked」(名前なのでなんでもよい)と入力します.

すると,

    @IBAction func button_move_clicked(_ sender: Any) {
    }

という行が出現します.

これがイベント関数で,ボタンが押されるなどのイベントが起こるとこの関数が自動で実行されるようになります.

今回はボタンが押された時にやりたいこととして,以下のように追記します

    @IBAction func button_move_clicked(_ sender: Any) {
        label_right.stringValue = "X = \( textfield_x.stringValue ) \r\n"
            + "Y = \( textfield_y.stringValue ) \r\n"
    }

この状態でビルドして実行します

最初の表示は先ほどと何も変わりません

f:id:masa_flyu:20190707022151j:plain f:id:masa_flyu:20190707022157j:plain

2つのテキストフィールドになにか文字を入力します

その後Buttonをクリックすると,右側のラベルに文字が表示されます

ボタン押下というイベントを検知してプログラムが実行できたことが確認できました.

プログラムは,ラベルのstringValueプロパティにテキストフィールドのstringValueプロパティの値を代入しています.

Swiftでは文字列の中に\()で囲って文字列や数値を入れることができます.

"文字列 \( 文字列・文字列にしたい数値 ) 文字列"

続けて別の記事でマウスイベントを取得したもうちょっと複雑なことをやってみようと思います.

当ブログをご利用いただく際には免責事項をお読みください。