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

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

何だか今日はトイレが近い。@It_is_Rでございます。
現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。

さて、Rは今、Macアプリ開発を勉強中なのですが、今回はStoryboardを使って、文字表示など、いろいろやってみたいと思います。
まだまだ勉強中の身なので、間違っていたりしたら、ご指摘いただけると嬉しいです。

開発環境はMac OS X El Capitan、Xcode7を使用しています。

目次
  1. プロジェクトについて
  2. Storyboardについて

プロジェクトについて

eyecatch_woman3
まずはプロジェクトを作ってみましょう。

新しいプロジェクトの作成

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

次の様な画面が開きました。
今回はOS X向けのアプリを作っていこうと思うので、「OS X」→「Application」→「Cocoa Application」という風にクリックしていきます。
Xcode12

では、そのプロジェクトの情報などを入力していきます。
Product Nameは作るアプリの名前、Organization Nameは組織名、Organization Identifierはドメイン持ってる人は逆さまにして書いておくといいと思います。
Rは組織じゃないけど、とりあえず、Organization NameにIt is Rと入れました。
また、今回のアプリはSwiftを使おうと思うので、LangageはSwiftにします。また、Storyboardを使いたいので、「Use Storyboards」にチェックを入れます。
Xcode13

Nextをクリックするします。これで新しいプロジェクトが完成しました。

設定変更

開かれたウィンドウから、Deployment infoを探し、Deployment Targetを10.10に変更します。
こうすることで、OS X Yosemiteでも、作ったアプリが使用できる状態になります。

Deployment info

Storyboardについて

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

Storyboardを開く

まずはStoryboardを開きます。
ウィンドウ左側のTestAppの中、またTestAppの中のMain.storyboardをクリックします。
Xcode16

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

ではこれを実行してみましょう。ウィンドウ左上の▶︎をクリックします。
すると、何も描かれていませんが、ウィンドウが表示されます。
Xcode18

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

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

それでは、このウィンドウに文字を表示してみます。
まず下の画像の様に2箇所クリックし、Labelと検索します。
Xcode19

ではウィンドウ右下(ライブラリ)に表示されたLabelを、Storyboard内の二つのウィンドウのうち、下側のウィンドウにドラッグします。
Xcode20

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

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

プログラムで文字を編集することも可能ですが、次回以降の記事でやっていこうと思います。

スポンサードリンク

関連コンテンツ

オススメ記事

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

【Mac】Gitのダウンロードとインストールの手順

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 前回「GitHubのアカウントを作成する方法」では、GitHubのアカウントを作成する方法を紹介しま

小学生からのプログラミング入門。プログラミングってなぁに?

小学校でプログラミングを勉強しなくてはいけないことになり、「プログラミングなんてやったことないし、そもそもプログラミングってなんなんだろう」と思う方も多いのではないでしょうか。 といっても、「

クイックタグ

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

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

Local by Flywheel

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

プログラミングのクラスってなぁに?

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「クラス」という機能を

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

scratch

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

さて、今回もプログラミングの勉強(べんきょう)をはじめていきましょう!前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、プログラミングっていうのが、どういうものなのかを学びま

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

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