iPhoneアプリを作ってみよう

iPhoneアプリを作ってみよう！

株式会社　ヒトクセ取締役CTO　長尾俊

12年12月17日月曜日

Why?

ITの力を駆使して、人々の生活に新しい体験を生み出す。

株式会社


Why?

事業内容：WEBサービス、スマートフォンアプリの開発メンバーは全員エンジニア


Why?

事業内容：WEBサービス、スマートフォンアプリの開発メンバーは全員エンジニア

コーディング　×　デザイン


Who?

株式会社ヒトクセ取締役CTO　長尾　俊facebook: shun0750

2007 東京大学理科Ⅰ類入学2011 東京大学大学院情報理工学系研究科入学2012 IPA未踏人材育成プロジェクト採択　　株式会社ヒトクセ　設立


趣味


趣味

ブレイクダンス


趣味



趣味



趣味

ブレイクダンスヘヴィメタル


趣味

ブレイクダンスヘヴィメタル

ギター、旅行、アートetc..


Works(Hardware)


Works(Hardware)


Works(Software)

Narrow Ways A Happy 干支落とし event+ SmartAppMarket


iPhoneアプリでポートフォリオビューアを作ってみよう！

株式会社　ヒトクセ取締役CTO　長尾俊


今、起こっていること



Angry Birds

Playground @ S i n g a p o r e Airport

Toys @ supermarket12年12月17日月曜日

Angry Birds

ダウンロード数12億以上売り上げ月数億以上


ゲームはシンプル（ただ鳥を飛ばすだけ）


自分にも作れない訳がない！


Make much money


To many users


ポートフォリオビューアーを作ろう！


Goal

絵を１枚ずつフリックで切り替えることができる


Contents

1.XCodeの使い方2.まずは起動3.1枚の画像を表示してみる4.複数枚の画像をスクロールしてみる5.アイコンを作成6.言語の解説・応用


Contents



1.XCodeの使い方

XCode 4


1.XCodeの使い方

取りあえず起動


1.XCodeの使い方

新しいプロジェクトを作る

どちらかをクリック12年12月17日月曜日

1.XCodeの使い方


Single View Applicationを選択12年12月17日月曜日

1.XCodeの使い方


名前を決める

アプリ名制作者名制作ID

プリフィックス（ファイル名の初めにつく文字）

・Devices: iPhone・全てチェック


1.XCodeの使い方


Developerフォルダを選択12年12月17日月曜日

1.XCodeの使い方

準備完了！


1.XCodeの使い方

準備完了！

ファイルの管理作業場所プロパティの設定

起動関係


Contents



2.まずは起動

取りあえずアプリ起動

クリック！


2.まずは起動


Contents



3.1枚の画像を表示してみる

クリック

ここで画面の設計を行う12年12月17日月曜日


ドラッグ＆ドロップ

Image Viewを白いところにドラッグ＆ドロップ12年12月17日月曜日


チェックを外す



この配下に作る

imagesフォルダを作る



imagesフォルダを入れる

ドラッグでフォルダの中に入れる







入れるとこうなるはず12年12月17日月曜日


UIImageViewにImageをセット

12.クリック

3.クリック

4.クリック

5.画像ファイルを選択



もう一度起動


Contents



4. 複数枚の画像をスクロールしてみる

Scroll Viewをドラッグ＆ドロップ



Scroll Viewの中にImage Viewを２つ入れる(２つが隣り合わせになるように座標を指定）

座標や大きさを扱う項目

Scroll Viewの中にImage Viewを2つ入れる



クリック追加

{ IBOutlet UIScrollView* portScrollView;}

portScrollViewを変えればストーリーボードで作った

Scroll Viewも変わる12年12月17日月曜日


クリック

追加

[portScrollView setContentSize:CGSizeMake(640,460)];

portScrollViewの中身の大きさを横640縦460にしますよ、という意味



クリック

portScrollView右の◯から画面に引っ張ってくる


Contents

1.XCodeの使い方2.まずは起動3.1枚の画像を表示してみる4.複数枚の画像をスクロールしてみる5.アイコンを作成6.アプリの完成（実機へインストール）


5.アイコンを作成

・57×57、114×114の画像を作る・imagesフォルダに入れる



クリック

アプリ全体の設定

57×57 114×114



アイコンができた！

もう一度起動してホームボタンを押す


Contents



Objective-Cについて

オブジェクト指向とは何か



オブジェクト指向とは何か型

名前体力攻撃力・





スライム１

１０

３





スライム１

１０

３





スライム１

１０

３

インスタンス





スライム１

１０

３

インスタンス





スライム１

１０

３

インスタンス

IBOutlet UIScrollView* portScrollView;





スライム１

１０

３

インスタンス

IBOutlet UIScrollView* portScrollView;型





スライム１

１０

３

インスタンス

IBOutlet UIScrollView* portScrollView;型





スライム１

１０

３

インスタンス

IBOutlet UIScrollView* portScrollView;型インスタンス



メソッド（関数）型


スライム１

１０

３

インスタンス





スライム１

１０

３

インスタンス

攻撃防御





スライム１

１０

３

インスタンス

攻撃防御

攻撃





スライム１

１０

３

インスタンス

攻撃防御

攻撃





スライム１

１０

３

インスタンス

攻撃防御

攻撃

攻撃





スライム１

１０

３

インスタンス

攻撃防御

攻撃

攻撃

プロパティ





スライム１

１０

３

インスタンス

攻撃防御

攻撃

攻撃

メソッド

プロパティ





スライム１

１０

３

インスタンス

攻撃防御

攻撃

攻撃

メソッド

プロパティ

[portScrollView setContentSize:CGSizeMake(640,460)];メソッド





スライム１

１０

３

インスタンス

攻撃防御

攻撃

攻撃

メソッド

プロパティ

[portScrollView setContentSize:CGSizeMake(640,460)];メソッド





スライム１

１０

３

インスタンス

攻撃防御

攻撃

攻撃

メソッド

プロパティ

インスタンス[portScrollView setContentSize:CGSizeMake(640,460)];メソッド





スライム１

１０

３

インスタンス

攻撃防御

攻撃

攻撃

メソッド

プロパティ

インスタンス命令[portScrollView setContentSize:CGSizeMake(640,460)];メソッド



ルール

インスタンスや関数の宣言はヘッダーファイルに書く（.hファイル）


・コーディングは .mファイルへ・-(void)viewDidLoadが最初に呼ばれる・上から下に順番に実行される

ルール



応用（ボタンによる操作）

ButtonはScroll Viewの外側に

下にいくほど階層が高い



ヘッダーファイルにボタンを押したときのメソッドを宣言

.mファイルにメソッドの中身を記述



ドラッグ＆ドロップ



何したときにメソッドが呼ばれるかを選択

Touch Up Inside（中で指を離したとき）


残った時間でクオリティを上げよう！

ヒント：画像を変える、画像の枚数を多くする、ボタンを押すと遷移するようにする・・


Technology

iPhoneアプリを作ってみよう