SlideShare a Scribd company logo
iPhoneアプリ開発入門
 XcodeのStoryboardで画面を作ろう!




       2013年2月3日(日)
     iPhone開発初心者向け資料   +α
自己紹介
twitter ID : itokami1123

お昼の仕事はHTML5/CSS3/JavaScriptです。

Webの仕事なんですけどクライアント側処理
をメインにしてます。

何かお仕事があれば是非どうぞ!!

iPhoneアプリは通勤中に作ってます。
iPhoneアプリ作りのきっかけ



最初は新しい仕事の為(転職の為)

2011年まで古い技術(Java1.4とCOBOLとメー
カ独自データベース製品など)しか触った事が
なく段々と将来に不安になりました・・・
そこでHTML5とiPhone開発の勉強を
    独学で始めました。
福岡にはhtml5+α@福岡や
iDevQ(iOS Developer Community)
    など素敵な勉強会があって
  色々と助けてもらいました。

        勉強会の検索は
   http://azusaar.appspot.com/
          がお勧めです!
おかげさまで
無事転職出来ました。


 素敵な職場です。
 感謝してます。
今でもiPhoneアプリを作る理由

作るのが楽しい!

子供向けに学習ソフトを作っています。どう
やったら子供達が楽しく苦手なものを克服出
来るのかを考えるのがとても楽しいです!

iPhoneさえあればどんな子にでも学習のチャ
ンスを与える事がでます!
宣伝です!
http://www.itokami1123.com/soft/ で
   色々ソフトを公開してます!

             リジェクト中
少し悩みが。。

福岡でもAndroidは集まって開発するグループ
があるんですけどiPhoneアプリ(特に初心者
向け)の集まりは少ないんです。

福岡のiPhoneアプリ制作者の集まりができた
らいいなぁ。。
そこで

iPhoneアプリ開発者が少しでも増えたらいい
なと思い、入門を説明したいと思います!
(難しいツッコミは、ご勘弁を。。)

この資料ではメニューとゲーム2画面のじゃ
んけんゲームを作りたいと思います。
まずは。。


Xcodeをインストールしてください!

すみません。。説明は省略しますね。
Xcodeを起動



Xcodeのアイコンをクリックします!


今日は Version 4.5.2 を使用します。
新規作成




Create a new Xcode projectをクリックしま
す。なんだか英語が一杯ですね。。
アプリの雛形選択




今回はSingle View Applicationを選んでみまし
た。
初期入力




      今回のアプリに関する情報をいれます。

      上二つチェックをつけて Nextを押します。
めも:Company Identifierは、ドメイン名を逆さにしたものが推奨されているようです。
(例:example.comの場合は、com.exampleとなる)
ソース管理?




とりあえず気にせずチェックをはずして

Createボタンを押します!
じゃ∼ん




出て来ました!
いきなり動かす!



再生ボタンをクリックすると。。
なにもでません。。




でもiPhoneらしくものが出て来ましたね。

これが iOSシミュレータです!
メニュー作り!
 さっそくメニューを作ってみましょう!




Storyboardのファイルをクリックすると
この白い画面が最初に出てた画面みたいですね。
    さっそく編集してみましょう。
右下に色々あるよ




  背景を作ってみます。
Image Viewをドラッグします。
画像を選ぶ




Imageで画像を選べるみたいですけど
    登録が必要ですね。
画像を登録




画像が入っているフォルダを
ドラッグして投げ込みます!
画像が登録されます。



 Copyにチェックをつけると
 このアプリのソースの方に
 png画像がコピーされます
背景画像



前に置いた背景に画像をつけました!
タイトルをつけよ∼
     背景と同じ様に
     Image Viewを
     ドラッグします




   png画像を指定します
そういえば
 いっつもUse Autolayoutを
   OFFで作ってます。
(使い方が分かりません。。)


        そして
   タイトルの高さ幅、
   位置を指定します
スタートボタン




Round Rect Buttonをドラッグします!
ボタンを編集
  Customを選ぶと
  画像がつけれます。
メニューが出来たので
続いてゲーム画面を作りましょう!
ゲーム画面の枠を作る




 ViewControllerをドラッグ!
補足:拡大と縮小




   右下の虫眼鏡で
   切り替えます。
ゲーム画面の背景




ゲーム画面もメニュー画面と
同じ様に作ります。
操作ボタン


               Round
                Rect
               Button
              をドラッグ

ゲームの操作ボタンを置きます。
ぐー、ちょき、ぱーの3つです。
ボタンの画像設定




typeをcustomにしてImageを設定します!
では画面遷移を作って行きましょう!
画面遷移




ctlを押しながらドラッグすると線が!
画面遷移2




 modalを選ぶと
矢印ができました。
動かしてみましょう∼
メニュー画面の上にゲーム画面が表示されます!
突然ですが
  残念なお知らせです。


こっから先はプログラムがないと
  ゲームになりません。
Storyboardとコード




 Storyboardの画面とコードは
 どうやってつながってるの?
紐づけたいViewCotrollerを選んで




 Classと書いている所に指定すればOK
それではゲーム画面用のプログラムを
   用意してみましょう!
File -> New -> Cocoa Touch ->
Objective-C class を選んで Next!
ViewControllerを作成




ゲーム画面用としてGameViewControllerを作成
  注意:Subclass of は UIViewController
そのままcreateをクリック
ゲーム画面のViewControllerのClassに
 GameViewController設定します。
勝ち負けの表示




勝敗を表示するLabelを貼ります。
最初は非表示




HiddenをOnすると
 非表示になります
相手の手




相手の手をImageViewで配置して
   Hiddenにしておきます
ここまでで動かしてみましょう!
hiddenは表示されない事が確認出来ます。
hidden(非表示)の勝ち負けのラベルなど
表示されていない事が分かりますね!
それではじゃんけんのボタンと
プログラムを繋いでみましょう!
じゃんけんボタン

         「Assistant」ボタン


   Storyboard右上に
   ある人の顔みたいな
   アイコンを押します。
右側にソースが




右側に設定したGameViewControllerが
       出てきました!
難しそうな文字がいっぱいですが気にせず
じゃんけんボタンをctlを押しながら
@interfaceと@endの間にドラッグします。
ConnectionをAction(動作)
TypeをUIButton(ボタン)
EventをTouch Up Inside(ボタンを触った)
ArgumentsをSender(押されたボタン)
NameはjankenDidPush(好きな名前)にします。
jankenDidPushと言う
関数が出来ました!
他のじゃんけんボタンは
さっき作った関数名にくっつけます。
どのじゃんけんボタンを
押しても同じ関数を呼ぶ様になりました。
相手の手


 じゃんけんですので
相手の手が必要ですね!
arc4random()%3 って書くと0から2の範囲
で適当な数値を返してくれます。
じゃんけんボタンを押した時の処理の
先頭にかきましょう!
hiddenで隠していた手を表示する為には
各Image Viewをプログラムと接続しないといけな
いです。ctlを押しながら GameViewController.h
にドラッグします。
ConnectionをOutlet、TypeをUIImageCiew、
StorageをWeakのまま変えず
Nameに好きな名前をつけます。
上の場合はぐーなので “guu”とつけました。
ちょき、ぱーも入れて
GameViewController.hは
こんな感じになりました。
相手の手を表示してみましょう!
if は もしも 〇〇 だったらという
意味です。
うごかしてみましょう!
ボタンを押すと相手がじゃんけんを
  出す様になりました!
そういえば、自分が押した手が
何かiPhoneが分かりませんね??
Tag




  Tagを使うと区別が出来ます。
ぐーは0、ちょきは1、パーは2にします。
プログラムでTagの数字が拾えるんです。
かち!まけ!あいこ!の3つの文字も
 プログラムに繋いでおきます。
自分の手と相手の手の組み合
わせで結果を表示します。
2回目おすとなんだかおかしいですね。。
前の表示が残っているからです。
前の表示を全部非表示にして
  やりなおせばOKです。
ゲームから
メニューに戻る機能を
  つけましょう∼

こっから画像が変わってますけど
    気にしないでね
前回同様、ボタンをドラッグします。
メニューのボタンと同様に
customを選びボタンを
Image画像を変更します
メニュー画面に戻るボタンを
ctl押しながらドラッグします。
下記のように設定します
         Connection : Action
            Type : UIButton
        Event : Touch Up Inside
          Arguments : Sender

       Nameは好きにつけれます。
今回は、 “backToMenuBtnDidPush”とつけました。
GameViewController.hは
こんな感じになりました
こんどは、GameViewController.m の
backToMenuBtnDidPush関数にゲーム画面を閉じる
命令を書きます。
[self dismissViewControllerAnimated:YES
completion:nil];
動かしてみましょう!
これでおしまいです!
最後まで見て頂き
 ありがとうございました!


間違いご指摘などありましたら
 twitterで@itokami1123まで

More Related Content

PDF
StoryboardでUIを使いまわす
PDF
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
PPTX
Sketch 3 を使って、コンテンツの魅力を 最大限に活かしたUIを作ろう
PDF
デザイナーとエンジニアが話す、iOSアプリケーション開発
PDF
冬合宿でOpenProcessing
PPTX
Visual Studio といえば 当然 Visual Studio for Mac だよね!
PDF
Autolayoutを使って、画面レイアウトを作成してみよう
PDF
一ヶ月Blender サイト用
StoryboardでUIを使いまわす
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Sketch 3 を使って、コンテンツの魅力を 最大限に活かしたUIを作ろう
デザイナーとエンジニアが話す、iOSアプリケーション開発
冬合宿でOpenProcessing
Visual Studio といえば 当然 Visual Studio for Mac だよね!
Autolayoutを使って、画面レイアウトを作成してみよう
一ヶ月Blender サイト用

What's hot (15)

PDF
Ux jam7
PPTX
ノンエンジニアが手探りでシューティングゲームを作った話。Swiftで。その入り口部分。
PDF
お互いに教えあおう
PDF
はじめてのAndroidアプリ
PDF
20161126_Blender step2
PPTX
ホントのホントの0から始める3Dモデリング入門
PDF
ボクの開発スタイル
PDF
UE4・Re:ゼロから始めるVR開発
PPTX
ゲーム開発で使えるかもしれないレイアウトデザイン
PDF
iPhoneアプリ無料勉強会 vol1
PDF
わたしのVisual studio環境
PDF
iPhoneアプリ無料勉強会 vol3
PDF
福井で「しあわせデザイナー」になるために
PPTX
こわくない!初心者向けBlender2.8講座#6
PDF
第2回 Blender勉強会(難波)Unityちゃん
Ux jam7
ノンエンジニアが手探りでシューティングゲームを作った話。Swiftで。その入り口部分。
お互いに教えあおう
はじめてのAndroidアプリ
20161126_Blender step2
ホントのホントの0から始める3Dモデリング入門
ボクの開発スタイル
UE4・Re:ゼロから始めるVR開発
ゲーム開発で使えるかもしれないレイアウトデザイン
iPhoneアプリ無料勉強会 vol1
わたしのVisual studio環境
iPhoneアプリ無料勉強会 vol3
福井で「しあわせデザイナー」になるために
こわくない!初心者向けBlender2.8講座#6
第2回 Blender勉強会(難波)Unityちゃん
Ad

Viewers also liked (20)

PDF
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
PDF
はじめてのiOSアプリ開発 ①
PDF
㉚Xcodeを覚えよう!簡単なアプリを作ってみよう!
PDF
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
PDF
㉙iPhoneアプリ開発の基礎知識を覚えよう
PDF
iOSアプリの画面デザイン・遷移を驚くほど簡単にするStoryboardの使い方
PDF
Xcode 再入門「Xcode の検索機能」 #さいたまdev
PDF
Swift 3.0 の新しい機能(のうちの9つ)
PDF
Swiftビギナーズ
PDF
Objective-C/Swift コードの共用
PPTX
de:code エスキュービズム勉強会0620
PDF
2014年からSwiftを振り返る! #cswift
PDF
第7回 カジュアル Swift 勉強会 @ 青葉台 オープニング #cswift
PDF
TestFlightみたいなのを自作する
PDF
ぼくがかんがえたさいきょうのMvc
PDF
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
PDF
「レガシーコード」とはいったい?
PDF
Swift 3 で新しくなったところ - 表面から見えにくいところを中心に紹介 #ISAOcorp
PDF
iOSアプリ開発 脱初心者に向けて
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
はじめてのiOSアプリ開発 ①
㉚Xcodeを覚えよう!簡単なアプリを作ってみよう!
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
㉙iPhoneアプリ開発の基礎知識を覚えよう
iOSアプリの画面デザイン・遷移を驚くほど簡単にするStoryboardの使い方
Xcode 再入門「Xcode の検索機能」 #さいたまdev
Swift 3.0 の新しい機能(のうちの9つ)
Swiftビギナーズ
Objective-C/Swift コードの共用
de:code エスキュービズム勉強会0620
2014年からSwiftを振り返る! #cswift
第7回 カジュアル Swift 勉強会 @ 青葉台 オープニング #cswift
TestFlightみたいなのを自作する
ぼくがかんがえたさいきょうのMvc
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
「レガシーコード」とはいったい?
Swift 3 で新しくなったところ - 表面から見えにくいところを中心に紹介 #ISAOcorp
iOSアプリ開発 脱初心者に向けて
Ad

Similar to iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」 (20)

PDF
Beginning iPhone Vol2
PDF
⑬I phoneアプリを作ってみよう!(超初心者向け)
PDF
Wankuma0402
PPTX
oF勉強会資料(図形)
PDF
第1回windows phoneアプリ開発のハンズオンセミナー
PPTX
oF勉強資料(アドオン編)
PDF
初心者向けMacユーザー勉強会
PDF
はじめてのWord pressプラグイン勉強会
PDF
iPhone develop for Beginner
PDF
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 1
PDF
スマホ向けWebアプリ開発について~初級編~
PPTX
ゲーム開発講座1
PDF
everevo × Open Graph
PPTX
Appsheet基礎講座.pptx
PDF
Css nite(2010.09.23)
PDF
⑭iPhoneアプリを作ってみよう!(超初心者向け)その2
KEY
WordPress プラグイン Infinite Scroll を試してみた
PPT
Oitec
PDF
3D touch for iOS
Beginning iPhone Vol2
⑬I phoneアプリを作ってみよう!(超初心者向け)
Wankuma0402
oF勉強会資料(図形)
第1回windows phoneアプリ開発のハンズオンセミナー
oF勉強資料(アドオン編)
初心者向けMacユーザー勉強会
はじめてのWord pressプラグイン勉強会
iPhone develop for Beginner
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 1
スマホ向けWebアプリ開発について~初級編~
ゲーム開発講座1
everevo × Open Graph
Appsheet基礎講座.pptx
Css nite(2010.09.23)
⑭iPhoneアプリを作ってみよう!(超初心者向け)その2
WordPress プラグイン Infinite Scroll を試してみた
Oitec
3D touch for iOS

More from Toshio Ehara (20)

PDF
iPhoneアプリを Javaで書くよ?
PDF
Java初心者勉強会(2015/08/07)資料
PDF
Java電卓勉強会資料
PDF
BABELで、ES2015(ES6)を学ぼう!
PDF
AngularJSで業務システムUI部品化
PDF
traceur-compilerで ECMAScript6を体験
PDF
traceur-compilerで未来のJavaScriptを体験
PDF
AngularJS入門の巻2
PDF
JenkinsをJava開発でこんな感じで使っています
PDF
AngularJS入門の巻
PDF
AngularJS+TypeScriptを試してみた。
PDF
AngularJSのDirectiveで俺俺タグつくっちゃお
PDF
HTML5のCanvas入門 - Img画像を編集してみよう -
PDF
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
PDF
福岡のIT勉強会情報の集め方(LT資料)
PDF
BACKBONE.JSによるWebアプリケーション開発について
PDF
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
PDF
JavaScriptのテストコード 一緒に勉強しませんか??
PDF
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
PDF
LT Leap MotionとJavaScriptで遊ぼう!
iPhoneアプリを Javaで書くよ?
Java初心者勉強会(2015/08/07)資料
Java電卓勉強会資料
BABELで、ES2015(ES6)を学ぼう!
AngularJSで業務システムUI部品化
traceur-compilerで ECMAScript6を体験
traceur-compilerで未来のJavaScriptを体験
AngularJS入門の巻2
JenkinsをJava開発でこんな感じで使っています
AngularJS入門の巻
AngularJS+TypeScriptを試してみた。
AngularJSのDirectiveで俺俺タグつくっちゃお
HTML5のCanvas入門 - Img画像を編集してみよう -
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
福岡のIT勉強会情報の集め方(LT資料)
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
JavaScriptのテストコード 一緒に勉強しませんか??
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
LT Leap MotionとJavaScriptで遊ぼう!

iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」