iPhoneで自分だけのポートフォリオビューアーを作ってみよう！ ※初心者向け

1. iPhoneアプリを作ってみよう！
株式会社 ヒトクセ
取締役CTO 長尾俊
12年12月17日月曜日

2. Why?
株式会社
ITの力を駆使して、
人々の生活に新しい体験を生み出す。
12年12月17日月曜日

3. Why?
事業内容：WEBサービス、スマートフォンアプリの開発
メンバーは全員エンジニア
12年12月17日月曜日

4. Why?
事業内容：WEBサービス、スマートフォンアプリの開発
メンバーは全員エンジニア
コーディング × デザイン
12年12月17日月曜日

5. Who?
株式会社ヒトクセ
取締役CTO 長尾 俊
facebook: shun0750
2007 東京大学理科Ⅰ類入学
2011 東京大学大学院情報理工学系研究科入学
2012 IPA未踏人材育成プロジェクト採択
株式会社ヒトクセ 設立
12年12月17日月曜日

6. 趣味
12年12月17日月曜日

7. 趣味
ブレイクダンス
12年12月17日月曜日

8. 趣味
ブレイクダンス
12年12月17日月曜日

9. 趣味
ブレイクダンス
12年12月17日月曜日

10. 趣味
ブレイクダンス ヘヴィメタル
12年12月17日月曜日

11. 趣味
ブレイクダンス ヘヴィメタル
ギター、旅行、アートetc..
12年12月17日月曜日

12. Works(Hardware)
12年12月17日月曜日

13. Works(Hardware)
12年12月17日月曜日

14. Works(Software)
Narrow Ways A Happy 干支落とし event+ SmartAppMarket
12年12月17日月曜日

15. iPhoneアプリでポートフォリオ
ビューアを作ってみよう！
株式会社 ヒトクセ
取締役CTO 長尾俊
12年12月17日月曜日

16. 今、起こっていること
12年12月17日月曜日

17. 12年12月17日月曜日

18. Angry Birds
Playground @
Singapore
Airport
Toys @ supermarket
12年12月17日月曜日

19. Angry Birds
ダウンロード数12億以上
売り上げ月数億以上
12年12月17日月曜日

20. ゲームはシンプル
（ただ鳥を飛ばすだけ）
12年12月17日月曜日

21. 自分にも作れない訳がない！
12年12月17日月曜日

22. Make much
money
12年12月17日月曜日

23. To many users
12年12月17日月曜日

24. ポートフォリオビューアーを作ろう！
12年12月17日月曜日

25. Goal
絵を１枚ずつフリックで切り替えることができる
12年12月17日月曜日

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

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

28. 1.XCodeの使い方
XCode 4
12年12月17日月曜日

29. 1.XCodeの使い方
取りあえず起動
12年12月17日月曜日

30. 1.XCodeの使い方
新しいプロジェクトを作る
どちらかをクリック
12年12月17日月曜日

31. 1.XCodeの使い方
新しいプロジェクトを作る
Single View Applicationを選択
12年12月17日月曜日

32. 1.XCodeの使い方
新しいプロジェクトを作る
アプリ名
制作者名
制作ID
プリフィックス
（ファイル名の初
めにつく文字）
・Devices: iPhone
・全てチェック
名前を決める
12年12月17日月曜日

33. 1.XCodeの使い方
新しいプロジェクトを作る
Developerフォルダを選択
12年12月17日月曜日

34. 1.XCodeの使い方
準備完了！
12年12月17日月曜日

35. 1.XCodeの使い方
準備完了！
起動関係
ファイルの管理 作業場所 プロパティの設定
12年12月17日月曜日

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

37. 2.まずは起動
取りあえずアプリ起動
クリック！
12年12月17日月曜日

38. 2.まずは起動
12年12月17日月曜日

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

40. 3.1枚の画像を表示してみる
クリック
ここで画面の設計を行う
12年12月17日月曜日

41. 3.1枚の画像を表示してみる
ドラッグ＆ドロップ
Image Viewを白いところにドラッグ＆ドロップ
12年12月17日月曜日

42. 3.1枚の画像を表示してみる
チェックを外す
12年12月17日月曜日

43. 3.1枚の画像を表示してみる
imagesフォルダを作る
この配下に作る
12年12月17日月曜日

44. 3.1枚の画像を表示してみる
imagesフォルダを入れる
ドラッグでフォルダの中に入れる
12年12月17日月曜日

45. 3.1枚の画像を表示してみる
imagesフォルダを入れる
12年12月17日月曜日

46. 3.1枚の画像を表示してみる
imagesフォルダを入れる
入れるとこうなるはず
12年12月17日月曜日

47. 3.1枚の画像を表示してみる
UIImageViewにImageをセット
3.クリック
2.クリック 4.クリック
1
5.画像ファイル
を選択
12年12月17日月曜日

48. 3.1枚の画像を表示してみる
もう一度起動
12年12月17日月曜日

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

50. 4. 複数枚の画像をスクロールしてみる
Scroll Viewをドラッグ＆ドロップ
12年12月17日月曜日

51. 4. 複数枚の画像をスクロールしてみる
Scroll Viewの中にImage Viewを２つ入れる
(２つが隣り合わせになるように座標を指定）
座標や大きさを
扱う項目
Scroll Viewの中に
Image Viewを2つ入れる
12年12月17日月曜日

52. 4. 複数枚の画像をスクロールしてみる
追加
クリック
{
IBOutlet UIScrollView* portScrollView;
}
portScrollViewを変えれば
ストーリーボードで作った
Scroll Viewも変わる
12年12月17日月曜日

53. 4. 複数枚の画像をスクロールしてみる
クリック
追加
[portScrollView setContentSize:CGSizeMake(640,460)];
portScrollViewの中身の大きさを
横640縦460にしますよ、という意味
12年12月17日月曜日

54. 4. 複数枚の画像をスクロールしてみる
portScrollView右の⃝から画面に引っ張ってくる
クリック
12年12月17日月曜日

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

56. 5.アイコンを作成
・57×57、114×114の画像を作る
・imagesフォルダに入れる
12年12月17日月曜日

57. 5.アイコンを作成
クリック
アプリ全体
の設定
57×57 114×114
12年12月17日月曜日

58. 5.アイコンを作成
もう一度起動してホームボタンを押す
アイコンが
できた！
12年12月17日月曜日

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

60. Objective-Cについて
オブジェクト指向とは何か
12年12月17日月曜日

61. Objective-Cについて
オブジェクト指向とは何か
型
名前
体力
攻撃力
・
12年12月17日月曜日

62. Objective-Cについて
オブジェクト指向とは何か
型
名前 スライム１
体力 １０
攻撃力 ３
・
12年12月17日月曜日

63. Objective-Cについて
オブジェクト指向とは何か
型
名前 スライム１
体力 １０
攻撃力 ３
・
12年12月17日月曜日

64. Objective-Cについて
オブジェクト指向とは何か
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
12年12月17日月曜日

65. Objective-Cについて
オブジェクト指向とは何か
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
12年12月17日月曜日

66. Objective-Cについて
オブジェクト指向とは何か
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
IBOutlet UIScrollView* portScrollView;
12年12月17日月曜日

67. Objective-Cについて
オブジェクト指向とは何か
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
IBOutlet UIScrollView* portScrollView;
型
12年12月17日月曜日

68. Objective-Cについて
オブジェクト指向とは何か
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
IBOutlet UIScrollView* portScrollView;
型
12年12月17日月曜日

69. Objective-Cについて
オブジェクト指向とは何か
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
IBOutlet UIScrollView* portScrollView;
型 インスタンス
12年12月17日月曜日

70. Objective-Cについて
メソッド（関数）
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
12年12月17日月曜日

71. Objective-Cについて
メソッド（関数）
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
攻撃
防御
12年12月17日月曜日

72. Objective-Cについて
メソッド（関数）
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
攻撃 攻撃
防御
12年12月17日月曜日

73. Objective-Cについて
メソッド（関数）
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
攻撃 攻撃
防御
12年12月17日月曜日

74. Objective-Cについて
メソッド（関数）
型 インスタンス
名前 スライム１
体力 １０
攻撃力 ３
・
攻撃 攻撃
防御
攻撃
12年12月17日月曜日

75. Objective-Cについて
メソッド（関数）
型 インスタンス
プロパティ
名前 スライム１
体力 １０
攻撃力 ３
・
攻撃 攻撃
防御
攻撃
12年12月17日月曜日

76. Objective-Cについて
メソッド（関数）
型 インスタンス
プロパティ
名前 スライム１
体力 １０
攻撃力 ３
・
メソッド 攻撃 攻撃
防御
攻撃
12年12月17日月曜日

77. Objective-Cについて
メソッド（関数）
型 インスタンス
プロパティ
名前 スライム１
体力 １０
攻撃力 ３
・
メソッド 攻撃 攻撃
防御
メソッド 攻撃
[portScrollView setContentSize:CGSizeMake(640,460)];
12年12月17日月曜日

78. Objective-Cについて
メソッド（関数）
型 インスタンス
プロパティ
名前 スライム１
体力 １０
攻撃力 ３
・
メソッド 攻撃 攻撃
防御
メソッド 攻撃
[portScrollView setContentSize:CGSizeMake(640,460)];
12年12月17日月曜日

79. Objective-Cについて
メソッド（関数）
型 インスタンス
プロパティ
名前 スライム１
体力 １０
攻撃力 ３
・
メソッド 攻撃 攻撃
防御
メソッド 攻撃
[portScrollView setContentSize:CGSizeMake(640,460)];
インスタンス
12年12月17日月曜日

80. Objective-Cについて
メソッド（関数）
型 インスタンス
プロパティ
名前 スライム１
体力 １０
攻撃力 ３
・
メソッド 攻撃 攻撃
防御
メソッド 攻撃
[portScrollView setContentSize:CGSizeMake(640,460)];
インスタンス 命令
12年12月17日月曜日

81. Objective-Cについて
ルール
インスタンスや関数の宣言はヘッダー
ファイルに書く（.hファイル）
12年12月17日月曜日

82. Objective-Cについて
ルール
・コーディングは .mファイルへ
・-(void)viewDidLoadが最初に呼ばれる
・上から下に順番に実行される
12年12月17日月曜日

83. 応用（ボタンによる操作）
下にいくほど階層が高い
ButtonはScroll View
の外側に
12年12月17日月曜日

84. 応用（ボタンによる操作）
ヘッダーファイルに
ボタンを押したときの
メソッドを宣言
.mファイルに
メソッドの中身を記述
12年12月17日月曜日

85. 応用（ボタンによる操作）
ドラッグ＆ドロップ
12年12月17日月曜日

86. 応用（ボタンによる操作）
何したときにメソッド
が呼ばれるかを選択
Touch Up Inside
（中で指を離したとき）
12年12月17日月曜日

87. 残った時間でクオリティを上げよう！
ヒント：
画像を変える、画像の枚数を多くする、
ボタンを押すと遷移するようにする・・
12年12月17日月曜日