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を使ってウィンドウに文字を表示する方法を紹介しました。

参考になれば幸いです。

スポンサードリンク

関連コンテンツ

オススメ記事

npm-scriptsの使い方。自作のコマンドによるタスク実行方法

畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。 npm-scriptsを使うことで、あらかじめタスクをかんたんな名前で指定しておき、そのタスクを素早く実行できるように

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

キャラを決まった間隔ずつ動かすよ!

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔

Windows10にPythonをインストールする方法

みなさんこんにちは。@It_is_Rです。今回はWindows10にPythonをインストールする方法を紹介します。 Pythonのインストーラをダウンロード では、Python

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

みなさんこんにちは。今回もたのしくプログラミングを学んでいきましょう! 前回の「JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方」では、JavaScriptでゲームエンジ

キーボードで画像を動かすよ!

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScri

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です