1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Swift
  6. »
  7. 【Xcode】Storyboardを使ってMacアプリ開発に挑戦。

【Xcode】Storyboardを使ってMacアプリ開発に挑戦。

こんにちは。@It_is_Rでございます。

さて、今回はStoryboardを使ってのmacOS用のアプリ開発の基本として、ウィンドウに文字の表示させてみたいと思います。
開発環境はMac OS X Big Sur、Xcode12を使用しています。

目次
  1. 新規プロジェクトの作成
  2. Storyboardを開く
  3. アプリを実行する
  4. ウィンドウに文字を表示する
  5. まとめ

新規プロジェクトの作成

まずは新しくプロジェクトを作成します。
Xcodeを開いたら、「Create a new Xcode project」をクリックします。

次の様な画面が開きました。
今回はmacOS向けのアプリを作っていこうと思うので、「macOS」→「App」と選択して、「Next」をクリックします。

では、そのプロジェクトの情報などを入力していきます。設定は下の画像のようにしました。
Product Nameは作るアプリの名前、Organization Identifierはドメイン持ってる人は逆さまにして書いておくといいと思います。
また、今回のアプリはSwiftを使おうと思うので、LangageはSwiftにします。
最後に、「Next」をクリックします。

すると、下の画像のように、プロジェクトを作成する場所を指定するための画面が表示されます。
もしGitで管理したいならば「Create Git repository on my Mac」のチェックを入れたままにし、そのつもりがないならチェックを外します。
プロジェクトを作成する場所を選択したら、「Create」をクリックします。

これで新しいプロジェクトが完成しました。
次のような画面が表示されれば完了です。

Storyboardを開く

Storyboardでは、実際にウィンドウを見るイメージで、視覚的にアプリを作ることができます。

では、Storyboardを開いてみましょう。
ウィンドウ左側のTestAppの中の「Main.storyboard」をクリックします。

もしも左側にプロジェクトの一覧(プロジェクトナビゲータ)が表示されていない場合は、ウィンドウ左上にそれを表示する、次の様なアイコンがあります。これをクリックしてください。

すると、次のような画面が開かれます。

アプリを実行する

では、アプリを実行してみましょう。ウィンドウ左上の▶︎をクリックします。

すると、何も描かれていませんが、ウィンドウが表示されます。

確認したら、▶︎の隣にある■をクリックしておきます。

ウィンドウに文字を表示する

それでは、ウィンドウに文字を表示してみます。
まず、画像のように、「View」または「View Controller」を選択します。

つづいて、画面上部の「+」をクリックします。

つぎのような画面が表示されるので、「Label」を探して、ダブルクリックします。

これで画面にラベルが配置されました。

実行すると、ウィンドウにLabelと表示されます。

文字を編集したい時は、Labelと書かれた文字列を二度クリックすることで編集できます。

また、文字の位置はドラッグで移動できます。文字を画面の左右中心に合わせました。
(もしViewが画面からずれてしまっている場合は、Xcodeを再起動することで直りました)

実行するとこのようになります。

まとめ

今回は、Storyboardを使ってウィンドウに文字を表示する方法を紹介しました。

参考になれば幸いです。

スポンサードリンク

関連コンテンツ

オススメ記事

GitHubのアカウントを作成する方法

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。まず今回はG

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、CSSフレーム

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

さて、今回はターミナルをかっこよくするシリーズ、第二弾です。 この記事は、前回からのつづきとなっております。前回の記事はこちらです。zsh のインストール方法と、うまく起動しない時の対

【Unity】Addressableを使って画像をスクリプトから表示する方法

こんにちは。私が執筆した小説「ELENA 人魚と過ごした時間」をベースとしたノベルゲームを現在Unityにて開発中です。まだまだ、時間はかかりそうですが、完成したときはよろしくお願いいたします。

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりやすく示

パスの書き方を覚えるべ!

パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い

みなさん、こんにちは。今日もプログラミングの勉強《べんきょう》をはじめていきましょう。 今回は、パスの書き方について学びます。パスというのは、ファイルの場所《ばしょ》を、パソコンに教《おし》え

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、

Pythonのtkinterで、画像つきのおみくじゲームを作ろう!

さて、今日《きょう》も楽《たの》しくプログラミングを学《まな》んでいきましょう。 今回《こんかい》はPython《パイソン》のtkinterを使《つか》って、本格的《ほんかくてき》なおみくじゲ

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。