東京渋谷 “初心者向けiPhoneアプリ開発” 勉強会② (5/22)

Xcodeを基本から勉強。前は何も知らずに画面遷移をコピペプログラムしただけだったので基本から勉強します。バージョンは4.6.2。

プロジェクト作成

File -> New -> Project
Master-Detail-Application
Product Name : nicomoro Use Storyboards」「Use Automatic Reference Counting」の二箇所チェック createでデスクトップにフォルダを作成

左側のパネル

ファイルの一覧になっている
パネルに表示されるフォルダの構造と実際のフォルダでは構造が違う
→Xcode上では違う階層で同じ名前のファイル名も作れるが、コンパイル時にエラーになる。
フォルダのルールをできるだけ守る
プログラムを入れるフォルダ、設定ファイルを入れるフォルダ等予め決められているフォルダのルールにできるだけ従う
→変なところに作られたファイルは適切な場所に移動させる

左上の方

Runでシミュレーターを実行。横にあるメニューでシミュレーターを選択(iPhone,iPadなど)

右上の方(Editor)

左:通常表示
中:画面分割(ジェントルマンみたいなアイコン)使いっぱなしにしているとおかしくなるので作業が終わったら通常表示に戻すことを意識する
右:差分表示。あまり使わないほうが良い。ストーリーボードを開いている状態で押してしまうと差分が出まくって戻れなくなる

右上の方(View)

左:左側のパネルを出したり引っ込めたり
中:下のパネルを出したり引っ込めたり(実行ログが表示されたりするところ)
右:右側のパネルを出したり引っ込めたり(Identityとか情報が表示されたりするところ)
※ ここは色々いじってもOK

アプリの設定をする画面

左側パネルの一番上の部分をクリックした後、「TARGETS」で目的のアプリを選択
アプリのアイコンの設定とかできる。

Xcode特徴

設定したら反映されるが、削除の場合は反映されないことがある
削除したものを元に戻せるとは限らない(削除対象と関連するものも削除、変更されることがる)
設定でエディタの色も変えられるが変になることがあるのでできるだけ変えないほうが良い

ストーリーボード

ビジュアル的に開発できる
Xcodeの新しめの機能(参考書などにはまだ載ってないものも多いかも)
左側のパネルの「MainStoryboard.storyboard」をクリックすると表示される

使わないファイルなどを削除

ストーリーボードに表示されているものは選択してDeleteキーで消せる
→その後「Command S」で保存する
使わないmファイルやhファイルを削除
→「Move to Trash」でゴミ箱に移動しないと、表示されなくなるだけでディレクトリ内にはファイルは残ってしまう。エラーの元になるのでちゃんと消す。

ViewControlerの追加

右下の方にあるところのリストにある「View Controler」を真ん中の画面にドラッグアンドドロップ
→AWSっぽい立方体のアイコンにチェックが入っている状態で表示される(Object library)

リソースを追加

左側のパネルにフォルダやファイルをドラッグアンドドロップ
「Choose options for adding these files」の画面の「Add to targets」で対象のプロジェクトにチェックが入っていることを確認する。

ステータスバーを消す

iPhoneで電波とか時刻とかバッテリー残量とかが表示されているところ

アプリの設定をする画面「Status bar」のVisibility「Hide during application launch」にチェックを入れる
ストリートボードで対象のView Controlerを選択し、右側のパネルの「Simulated Metrics」のStatus Barを「None」にする

画面を作ってみる

背景画像を配置

右下の方にあるリストの中にある「Image View」を対象のView Controlerにドラッグアンドドロップ
→広い画面で見ていてドラッグアンドドロップができない時は、対象のView Controlerにズームしてからやってみる
選択した状態で、右上の「Image View」のImageに、先ほどリソースを追加した中に入っている背景画像のファイル名を入力する(bg.pngなど)
サイズはGUIでも変更できるし、右上のパネル「View」でWidth,Heightを数値で指定することもできる

キャラクターなど画像を配置

先ほどと同じ要領でキャラクターの画像を配置する

ボタンを配置する

右下の方にあるリストの中にある「Round Rect Bottun」を対象のView Controlerにドラッグアンドドロップ
ダブルクリックするとボタンに表示されている文字を変更できる

もう一つ同じ画面を作ってつないでみる

同じ要領でView Controlerを右側に追加する
→吹き出しのImageや「戻る」ボタンを追加しておく

左の画面上に配置したボタンをCtrlを押しながらクリックし、右の画面にドラッグアンドドロップする
メニューが出るので「modal」を選択する

※ここでシミュレータを実行してボタンを押すと、次の画面に遷移する

クラスを作る

戻るボタンを実装するためにクラスを作る

ファイルの作成

File -> New -> File
Objective-C class を選択

Class : MainViewControler
Subclass of : UIViewControler Targeted for iPadなどのチェックボックスるが外れていることを確認する
対象のフォルダが選択されていること、対象のプロジェクトにチェックが入っていることを確認してCreate
同じ要領でClass SubViewControlerを作成する

MainViewControler.mの編集

以下を何処かにコピペ

- (IBAction)mainViewReturnActionForSegue:
(UIStoryboardSegue *)segue{
NSLog(@"もどってきた！");
}

MainStoryboardで設定

後の画面に設置した「戻る」ボタンをCtrlを押しながらMainViewの「exit」にドラッグアンドドロップする
→出てきたメニューで先ほど追加した

Octopress Blog

自分のためのまとめブログ

東京渋谷 “初心者向けiPhoneアプリ開発” 勉強会② (5/22)