うめぼしジョイスティック - ivoice

CakePHP、JavaScript、jQuery等のプログラミングについて書いていきます 思考は、うめぼしのように硬く、そして柔らかく。

Macを持っているならXcodeでiPhoneアプリの一歩を踏み出そう。Xcodeの簡単な使い方。

iOSのアプリの統合開発環境Xcodeを使ってアプリっぽいものを作る最初の一歩の流れをざっくりまとめてみます。

(今回はswiftやobject-cなどのプログラミング言語は使いません!)

Xcodeは、iPhoneアプリを作る場合に通常使われる開発環境です。これはMacでしか提供されていないので、 iOS用のアプリを作りたい場合はMacが必須ということになります。

Xcodeをまずはapp storeでダウンロード&インストール。 無料です(2015年7月現在)

Xcodeを起動。

File→New→Project をクリック。

f:id:ivoice:20150731160112p:plain

するとこのような画面になるので、 「Single View Application」を選択。

次にこのような画面になるので、

f:id:ivoice:20150731160201p:plain

Product Nameは「test」など、まぁテストなので適当な名前を付けましょう。(今回ぼくはtesttestにしています)

[Language] はプログラミングに使う言語です。 SwiftObjective-Cがあります。

今回言語は全く使わないですが、次回の記事でObjective-Cを少し記述するのでそちらを選んでおいて下さい。

そうすると、統合開発環境があらわれます。 f:id:ivoice:20150731160314p:plain

ここでアプリケーションの開発を行います。

この時点で左上の再生ボタンを押すと、アプリが実行されます。 先ほど設定したProduct Nameが表示され、そのあと白い画面になるでしょう。

さて、viewを作っていきましょう。

まず、左側のフォルダ群にある、「Main.storyboard」という部分を「左クリック(1回)」 して下さい。Macbookなどの場合は「カチッ」という音が鳴る物理クリックを使って下さい。(タップだとなぜか反応しない。というか名前変更になってしまう)

そうしたら、

f:id:ivoice:20150731160356p:plain

このような画面が出るはずです。ここが、メインで使う画面だと思っておきましょう。

では、試しにもう一つViewを設置してみましょう。

右下の

f:id:ivoice:20150731160422p:plain

この部分から「ViewController」をドラッグ&ドロップして、メインの左あたりに配置しましょう。

f:id:ivoice:20150731160437p:plain

このような感じになるはずです。

そうしたら、今度はメイン(右のビュー)のほうにラベル(文字)を付けてみましょう。

さっきと同じように右下の部分から「Label」というものをスクロールして見つけ、ドラッグ&ドロップします。

f:id:ivoice:20150731160503p:plain

このような感じです。ラベルのテキストは自由に書けるので、表示させたい文字を書いてみましょう。

同じようにして、新しく作ったほうのViewにもラベルを貼っておきましょう。

f:id:ivoice:20150731160528p:plain

このようにしました。位置は中央にしておきましょう。グリッド線が表示される部分があるので、そこに合わせればOKです。

そして、メインのビューについている矢印[→]を、左に移動させます。

f:id:ivoice:20150731160549p:plain

この矢印の意味は「一番最初に表示されるビュー」です。

さぁいよいよ最後の仕上げです。この2つのビューを移動できるようにしましょう。 まずは左にボタンを設置します。右下から「Button」を選んで、左のビューに設置しましょう。

そして、controlキーを長押ししながら、設置したボタンの範囲をクリックしてマウスを移動してみてください。 線がでてくるとおもいます。

その線を右のビューに繋げましょう。離すと選択肢があらわれます。 選択肢にあらわれる「Action Segue」は[show]を選択です。

これで、ボタンを押すと右のViewが表示される簡単なアプリケーションができました。

左上の再生ボタンで実行してみましょう。

以上です。これを基本にして色々やっていきましょう!