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

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

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

java

Eclipseによる、Javaでじゃんけんゲームプログラムの作り方

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされ

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

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

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

キャラクター

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

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

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第9弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。 こ

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

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

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

コメントをどうぞ!

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