こんにちは。@It_is_Rでございます。
さて、今回はStoryboardを使ってのmacOS用のアプリ開発の基本として、ウィンドウに文字の表示させてみたいと思います。
開発環境はMac OS X Big Sur、Xcode12を使用しています。
新規プロジェクトの作成
まずは新しくプロジェクトを作成します。
Xcodeを開いたら、「Create a new Xcode project」をクリックします。
![](https://original-game.com/wp-content/uploads/2015/11/xcode-1-860x493.jpg)
次の様な画面が開きました。
今回はmacOS向けのアプリを作っていこうと思うので、「macOS」→「App」と選択して、「Next」をクリックします。
![](https://original-game.com/wp-content/uploads/2015/11/xcode2-1-758x540.jpg)
では、そのプロジェクトの情報などを入力していきます。設定は下の画像のようにしました。
Product Nameは作るアプリの名前、Organization Identifierはドメイン持ってる人は逆さまにして書いておくといいと思います。
また、今回のアプリはSwiftを使おうと思うので、LangageはSwiftにします。
最後に、「Next」をクリックします。
![](https://original-game.com/wp-content/uploads/2015/11/xcode7-1-758x540.jpg)
すると、下の画像のように、プロジェクトを作成する場所を指定するための画面が表示されます。
もしGitで管理したいならば「Create Git repository on my Mac」のチェックを入れたままにし、そのつもりがないならチェックを外します。
プロジェクトを作成する場所を選択したら、「Create」をクリックします。
![](https://original-game.com/wp-content/uploads/2015/11/xcode12-1-860x458.jpg)
これで新しいプロジェクトが完成しました。
次のような画面が表示されれば完了です。
![](https://original-game.com/wp-content/uploads/2015/11/xcode13-1-860x523.jpg)
Storyboardを開く
Storyboardでは、実際にウィンドウを見るイメージで、視覚的にアプリを作ることができます。
では、Storyboardを開いてみましょう。
ウィンドウ左側のTestAppの中の「Main.storyboard」をクリックします。
![](https://original-game.com/wp-content/uploads/2015/11/xcode14-860x496.jpg)
もしも左側にプロジェクトの一覧(プロジェクトナビゲータ)が表示されていない場合は、ウィンドウ左上にそれを表示する、次の様なアイコンがあります。これをクリックしてください。
![](https://original-game.com/wp-content/uploads/2015/11/xcode15-1.jpg)
すると、次のような画面が開かれます。
![](https://original-game.com/wp-content/uploads/2021/07/xcode19-860x523.jpg)
アプリを実行する
では、アプリを実行してみましょう。ウィンドウ左上の▶︎をクリックします。
![](https://original-game.com/wp-content/uploads/2015/11/xcode16-1.jpg)
すると、何も描かれていませんが、ウィンドウが表示されます。
![](https://original-game.com/wp-content/uploads/2015/11/xcode17-1-860x534.jpg)
確認したら、▶︎の隣にある■をクリックしておきます。
![](https://original-game.com/wp-content/uploads/2021/07/xcode18-860x467.jpg)
ウィンドウに文字を表示する
それでは、ウィンドウに文字を表示してみます。
まず、画像のように、「View」または「View Controller」を選択します。
![](https://original-game.com/wp-content/uploads/2015/11/xcode28-1-860x523.jpg)
つづいて、画面上部の「+」をクリックします。
![](https://original-game.com/wp-content/uploads/2015/11/xcode20-1-860x517.jpg)
つぎのような画面が表示されるので、「Label」を探して、ダブルクリックします。
![](https://original-game.com/wp-content/uploads/2021/07/xcode23-860x535.jpg)
これで画面にラベルが配置されました。
![](https://original-game.com/wp-content/uploads/2015/11/xcode29-1-860x489.jpg)
実行すると、ウィンドウにLabelと表示されます。
![](https://original-game.com/wp-content/uploads/2015/11/xcode30-860x534.jpg)
文字を編集したい時は、Labelと書かれた文字列を二度クリックすることで編集できます。
![](https://original-game.com/wp-content/uploads/2015/11/xcode31-860x473.jpg)
また、文字の位置はドラッグで移動できます。文字を画面の左右中心に合わせました。
(もしViewが画面からずれてしまっている場合は、Xcodeを再起動することで直りました)
![](https://original-game.com/wp-content/uploads/2015/11/xcode32-1-860x477.jpg)
実行するとこのようになります。
![](https://original-game.com/wp-content/uploads/2021/07/xcode37-860x534.jpg)
まとめ
今回は、Storyboardを使ってウィンドウに文字を表示する方法を紹介しました。
参考になれば幸いです。