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を使用しています。

プロジェクトについて

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

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

小学生からのJavaScript。クラスの概念をしっかりと理解しよう!

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

メインループを作ってみよう!

小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第10弾です。 突然(とつぜん)ですが、ゲーム開発(かいはつ)の基本として大切なことってなんだったか覚えていますか? そうです。「変数(

WordPress テーマの基本構成と読み込まれるファイルの優先順位。

ドラクエとかにテンプレートっていう武器ありそうですね。@It_is_Rです。 WordPress テーマ自作シリーズ第4回目です。 今回はテーマを作成する上で、重要な知識を書いていこうと思いま

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

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

enchant.js

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。 突っ立ったまま進んで行く、まるで幽霊の様な状態です。 これでは、キャラが生きてるのか死んでるのか分からない! というこ

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

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

Homebrew

Homebrewのインストール&使い方。すぐに使える詳しい解説!

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

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

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第11弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短

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

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

コメントをどうぞ!

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




オリジナルゲーム.com