Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Visual Studio開発者のためのXcodeによるデスクトップアプリ開発

More than 5 years have passed since last update.

 Windows で開発してきた Visual Studio 開発者の中にも、Mac でのデスクトップアプリ開発を行いたい方がいるかと思います。この記事では、Visual Studio の用語と概念をベースとして、Xcode で簡単なデスクトップアプリを作成する手順を説明します。

対象

  • Visual Studio での開発経験はあるが、Xcode に触れたことが無い方
  • Xcode でデスクトップアプリを作成したい方(モバイルアプリは扱いません)

目標

 簡単なデスクトップアプリ(テキストフィールド、ラベル、ボタンのみで構成)を作成する。

要点

  • フォームの追加は Story Board で行う。
  • コントロールオブジェクトの追加は Story Board から View Controller へコントロールキー+ドラッグ (*1) で行う。
  • イベントハンドラの追加は Story Board から View Controller へコントロールキー+ドラッグ (*1) で行う。
*1 コントロールキーを押したまま、マウスの左ボタンでドラッグすることを意味します。

手順

1. プロジェクト作成

  • Xcode を起動します。
  • Create a new Xcode project をダブルクリックします。
    project1.PNG
     
  • Cocoa Application を選択し、Next をクリックします。
    project2.PNG
     
  • Product Name と Organization Name は任意で記入します。Language で Swift を選択し、Use Storyboards をチェックし、Next をクリックします。
    project3.PNG
     
  • 次に、プロジェクト作成場所を任意で選択します。その後、プロジェクトが開始します。

2. フォーム追加

  • 左側のナビゲータより Main.storyboard を選択します。
  • 右下の Show the Object library より Text Field (以降テキストフィールドと表記)を選択します。
    form1-1.PNG
     
  • View Controller にドラッグ&ドロップすることで、テキストフィールドのフォームが追加されます。
    form2-1.PNG
     
  • Round Rect Button (以降ボタンを表記)と Label (以降ラベルと表記)も同様に実行します。
  • フォームデザインの変更は右上の Show the Attributes inspector で行います(本記事では扱いません)。
    form3-1.PNG

3. コントロールオブジェクト追加

  • 前回とは異なる画面ですが、作業が行いやすいようにヘッダー右側の Hide or show the Navigator と Hide or show the Utilities でナビゲータとユーティリティを隠しています。
  • 更に、本作業のために Show the Assistant editor を選択しています。
    controlobject0-1.PNG
     
  • Main.storyboard よりテキストフィールドを選択し、コントロールキー+ドラッグ (*1) で View Controller クラスへドロップします。
  • Connection で Outlet を選択し、Name を任意で記入し、Connect をクリックします。
    controlobject1-1.PNG
     
  • これで、テキストフィールドのコントロールオブジェクトが作成されました。
    controlobject2-1.PNG
     
  • ボタンとラベルも同様に実行します。
    controlobject3-1.PNG

4. イベントハンドラ追加

  • Main.storyboard よりボタンを選択し、コントロールキー+ドラッグ (*1) で View Controller クラスへドロップします。
  • Connection で Action を選択し、Name を任意で記入し、Connect をクリックします。
    eventhandler1.PNG
     
  • これで、ボタンのクリックイベントハンドラが作成されました。
    eventhandler2-1.PNG
     
  • クリックイベント以外のイベントハンドラに関しては delegate を用いて作成します(本記事では扱いません)。

5. アプリ実行

  • 先ほどのイベントハンドラに簡単な処理を記載します(テキストフィールドの値をラベルの値に引き渡します)。
    eventhandler3-1.PNG
     
  • ヘッダー左側の再生ボタン (Built and then run the current scheme) をクリックします。
  • アプリが実行されます。
    window1.PNG
     
  • ボタンをクリックすると、正しく処理するのが確認できると思います。
    window2.PNG
     
  • これにて、本記事による説明は終了です。お疲れさまでした。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away