この授業では、プログラミング経験はないけどiOSアプリ開発には興味がある！というデザイナーさん、ディレクターさんに向けて、「iOSアプリ開発って実際にどういうことをしているの？」ということを分かりやすく説明していきます。 プログラマーが何をしているのかが分かれば、デザイナーやディレクターとのやり取りも今よりもっとスムーズになるはず。アプリ開発ができるようになるには本授業だけでは足りないですが、プログラマーの「キモチ」を理解できるようになります。 授業は4回で構成されます。各授業では、前半で講義、後半は実演という形で進めていきます。授業が始まる前に、各自お持ちのMacにAppStoreよりXcodeをダウンロードして、インストールしておくとより効果的に学べます。 （ダウンロードURL→ https://itunes.apple.com/jp/app/xcode/id497799835) 第1回目の今回は、授業前半にiOSアプリ開発に必要なもの、どんな手順でアプリを形にしていくのか、その概要を説明していきます。後半では、さまざまなUI部品を貼付ける実演を行います。

1. デザイナーでも安心！
はじめてのiOSアプリ開発
2014/01/09
関根元和

2. 自己紹介
•
名前：関根元和
•
iOSやAndroidアプリの開発をしています
•
ネットではCHEEBOWという名前でアプリを作っ
たりブログを書いたり
•
週末は週末音楽家を名乗りライブアイドルへ楽曲提
供も

3. やること
•
iOSアプリ開発に必要なもの(10分)
•
アプリってどうやって作るの？(25分)
•
実演(15分)
•
質疑応答(10分)

4. iOSアプリ開発に
必要なもの

5. 必要なもの
•
Mac
•
Xcode
•
iOS Developer Program
•
iPhone/iPad

6. Mac

7. Mac
•
iMac
•
MacBook Pro
•
MacBook Air
•
OS X Mountain Lion v10.8.4以上

8. Xcode

9. Xcode
•
アプリを作るために必要なものが全部入っています
•
しかも無料！
•
Mac App Storeからダウンロードできます
•
最新バージョンはXcode 5。iOS 7に対応させるに
はXcode 5が必要です！

10. iOS Developer Program

11. iOS Developer Program
•
App Storeでアプリを配布するために必要
•
年間参加費 8,400円
•
たとえ配布するのが無料アプリでも、年間参加費が
必要です
•
実機でバッグするためにも必要
•
新しいOSもいち早く試すことができます

12. iPhone/iPad

13. iPhone/iPad
•
開発そのものは実機がなくてもできます
•
しかし、リリース前には「ほんとに動くのか」確認
した方が良いでしょう
•
普段使っているiPhoneでも大丈夫です
•
iPadにも対応させるならiPadでの確認も必要です

14. アプリって
どうやって作るの？

15. アプリ開発手順
•
企画
•
デザイン
•
プログラミング
•
デバッグ
•
リリース

16. 企画
•
どんなアプリ？ 誰が使うの？
•
このアプリを使うとどんな幸せがあるの？
•
どんな機能があるの？
•
もちろん、「このアプリで
かるの？」も

17. デザイン
•
UIデザイン
•
UXデザイン
•
最終的にはPNGファイルや、HTMLなどのリソース
を作ることになります

18. プログラミング
•
アプリの動きを記述します
•
ユーザが何かしたら何かをする
•
曖昧ではコンピュータは理解してくれません。適当
によろしく、は通じません
•
iOSではObjective-Cという言語でプログラミング
します

19. 問題
•
「ユーザが何かをしたら何かをする」
•
例：ユーザがボタンを押したら音を鳴らす
•
他にどのようなものがありますか？

20. デバッグ
•
実は、プログラマの仕事のほどんとがデバッグ！
•
バグを見つけて潰して、見つけて潰して……
•
再現手順のはっきりしているバグは楽に退治できま
す(なので、できるだけ開発者には手順を伝えましょ
う！)

21. リリース
•
完成したアプリはApp Storeで配布します
•
アプリの説明文、スクリーンショットなどを用意
•
リリース作業はWebでの説明やスクリーンショット
の登録と、Xcodeからのアプリ本体(バイナリ)の登
録の2段階があります
•
アプリ公開には審査があり、それに通らない
(reject)とApp Storeには並びません

22. 時計アプリを
作るとしたら……

23. 企画
•
デジタル時計にしよう！
•
シンプルに時間と分だけを表示しよう！

24. デザイン
•
XcodeのInterface Builderを
使います
•
ぺたぺたとUI部品を貼付けて
いきます
•
もちろん独自画像をUI部品に
適用することもできます

25. プログラミング
•
XcodeのSource Editorを使ってコードを書いていきます
•
コード自動入力、構文の強調表示など便利機能満載です！

26. 問題
•
時間と分を表示するだけなのに0.1秒ごとに表示を
更新しているのはなぜでしょう？ なぜ、60秒ご
と(1分)ではないのでしょう？

27. デバッグ
•
iOS Simulatorを使って行いま
す
•
Mac上でiPhoneが動いている
イメージです

28. リリース
•
Xcode上からアプリをApp
Storeに登録することができま
す
•
ただし、Xcodeからできるの
はアプリ本体(バイナリ)の登録
のみ
•
アプリの情報、スクリーン
ショットなどはWEBから

29. アプリ開発実演

30. 実演
•
これから実演を行います
•
さまざまなUI部品を画面に貼ってみます
•
実際にシミュレータで動きを確認してみます

31. まとめ
•
Mac、Xcode、iOS Developer Program、実機が
必要です
•
企画を考えて、デザインして、プログラミングして、
デバッグして、最後にリリース
•
UIデザインにはInterface Builderを使う

32. 質疑応答

33. 宿題
•
デジタル時計に比べて、アナログ時計を作るのは非
常に難易度が高いです。なぜでしょうか？