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

公開 :

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

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

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

プロジェクトについて

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

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

スポンサードリンク

おすすめの記事♪

MacBook Air の液晶割れを自分で交換修理!!最も易しい方法を解説!!

MacBook Airの液晶が割れ、しばらく使うことができなかっ[email protected]_is_Rです。 実はMacBook Airの液晶はかなり割れやすく、手で少し曲げただけで簡単に割れてしまうほどの素材な

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

[email protected]_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

ピクチャ・イン・ピクチャ

macOS Sierra – ピクチャ・イン・ピクチャの使い方 & 好きな場所へ配置する方法。

[email protected]_is_Rです。 macOS Sierra の新機能、 ピクチャ・イン・ピクチャ をご存知でしょうか? ピクチャ・イン・ピクチャ は、何らかの作業

java

【激分かりやすく!!】javaでじゃんけんゲームプログラム!!

お久しぶりです。 ゲーム制作ページのブログなのに、なんか全然ゲーム制作できてないですね。 今作ってるゲームもちょっと放置プレイ状態だし……。 ちょっと待ったー!誰が放置プレイ状態だとっ!! 

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

[email protected]_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

ターミナルによるMac操作。13の基本コマンド一覧と使い方

ターミナルでの操作を覚えると、意外と便利なこ[email protected]_is_Rです。 Macユーザーのみなさま、普段ターミナルを使う機会はありますか? GUIでの操作が分かりやすくて使わない人も多

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

[email protected]_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

enchant.js100行未満!!本格シューティングゲーム作り方。

[email protected]_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま


コメントを残す

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


Category

Games