Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

⑬I phoneアプリを作ってみよう!(超初心者向け)

21,505 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
  • Be the first to comment

⑬I phoneアプリを作ってみよう!(超初心者向け)

  1. 1. iPhoneアプリ作成 勉強会 ⑬iPhoneアプリを作ってみよ う!(超初心者向け)その1
  2. 2. 動作環境•  Mac OS X 10.7 Lion•  xcode 4.3.1
  3. 3. はじめに•  iPhoneアプリを作ってみよう!•  超初心者向け!難しいことは置いといて、あそ んでみよう!
  4. 4. 注意事項•  雑に教えます。難しいこと、細かいことは 大人になってから覚えましょう!•  適切なやり方ではなく、簡単なやり方を 教えちゃう場合もあるかもしれませ ん。!でもまあ、ちっちゃいことは気に しないで、まずは動かしてみましょう!
  5. 5. 写真素材について①•  写真素材については、小林真琴(愛称:まっ こり)様から提供していただいています。•  今回の勉強会の資料として提供いただいてい ますので、再配布やアプリ等での使用はでき ません。•  フリー素材ではありませんので、ご注意くだ さい。•  みなさん、応援してあげてください!(アプ リや、Web、バナー広告等のモデルの仕事お 待ちしています!)
  6. 6. 写真素材について②まっこり(小林真琴)    フリーでモデルをやっています。  秋田出身のまっこりです♪      みなさんに笑顔や感動を与えられる  モデルを目指しています!    自分だけの新しい世界観を生み出し、  日々成長して行こうと思います。    応援よろしくお願いします(^-­‐^)/    BLOG:  http://blog.crooz.jp/chery2  Twitter:  https://twitter.com/#!/maccori_1  Facebook:  https://www.facebook.com/profile.php?id=100003547711446
  7. 7. もくじ•  プロジェクトを作ってみよう•  おおまかなかいせつ•  画面を作ってみよう!•  モーダルに挑戦!•  ナビゲーションに挑戦!•  ゲーム的なもの•  アイコンとスプラッシュ
  8. 8. プロジェクトを作ってみよう•  XCODEでプログラムを作るときは、プロ ジェクトを作ります。•  プロジェクトには、プログラムのソース ファイルの他に、設定ファイルや、画像 データとかも含まれます。
  9. 9. やってみよう①•  XCODEを立ち上げよう!•  New Projectをつくろう!
  10. 10. やってみよう②•  memoryという名前のプロジェクトを作 ろう!
  11. 11. やってみよう③•  デスクトップに保存しよう!
  12. 12. できた!•  フォルダができたよー
  13. 13. ちなみに•  次回からは、フォルダの中の青いのを開く とXCODEが立ち上がります!
  14. 14. おおまかなかいせつ•  XCODEについて、おおまかにかいせつし ます。
  15. 15. おおまかなかいせつ①•  左側のパネルがファイル一覧•  上の方がタブになってるから、注意!
  16. 16. MEMO•  なんかよくわかんないけど、フォルダ一覧 と実際のフォルダの構造は違う。•  実フォルダの他にGROUPというのでフォ ルダ管理されてる。•  基本的にファイル名で管理されているので、 違うフォルダだとしても、同じ名前のファ イルを置かないこと。
  17. 17. おおまかなかいせつ②•  プログラムを入れる フォルダ、設定ファイ ルを入れるフォルダ 等、あらかじめ決め られてるので注意し よう!
  18. 18. おおまかなかいせつ③•  左上あたりで、プロ グラムの実行と停止 や、シミュレーター の選択ができる
  19. 19. やってみよう•  iPhoneとiPadそれぞれのシュミレーター で動かしてみよう!•  実機をつないでも、設定とかいるからエ ラーになるので、今は我慢しよう!
  20. 20. できた!•  ちょっとだけたのしい!
  21. 21. おおまかなかいせつ④•  右の方にあるEditorは、 左が通常、真ん中が画 面分割(通称ジェント ルマン)、一番右は、 押してはいけないボタ ン•  ストーリーボードを開 いている状態で、一番 右のボタンを押すと、 戻れなくなるので、お さないようにしよう!
  22. 22. おおまかなかいせつ⑤•  真ん中のViewは、画 面に表示するViewを 選べます。•  ここは、押しても OK!•  なぜか、実行時だけ デバッグログのView が自動に閉じるとか の変な動作になるこ とがあるけど、根気 よく毎回おそう!
  23. 23. おおまかなかいせつ⑥•  アプリの設定をする 画面•  なんだけど、ここを いじっても、plistっ ていう設定ファイル に反映されたりされ なかったりするから 注意しよう
  24. 24. XCODEのとくちょう(独自調べ)•  設定を押したら反映されるが、削除しても 反映されるとは限らない。•  削除したものを、もとにもどせるとは限 らない。•  設定画面で、エディタの色を変えられるが、 おかしな現象が起きるかもしれないので、 できればさわらないでおこう!
  25. 25. ストーリーボード•  ストーリーボードとは、XCODEのあたら しめの機能の一つです。•  ビジュアル的に開発ができるのでとても便 利です。•  ただ、本屋さんにいっても解説している本 が少ない><
  26. 26. やってみよう•  MainStoryboard.storyboardを左側の ディレクトリみたいなところから探して選 択してみよう
  27. 27. こんなかんじ!
  28. 28. おおまかなかいせつ①•  左側のエリアの、わ く一個が、右側のエ リアの画面みたいな の1個に対応してい ます。
  29. 29. おおまかなかいせつ②•  左側と真ん中のエリ アは、対応している のでどちらかを編集 すると、もう片方に も影響が出ます。•  右側のエリアは、詳 細を表示する場所で す。左側か真ん中で 選択中の情報が出ま す。
  30. 30. おおまかなかいせつ④•  右側のエリアのうえ のとこは、タブみた いになっています。
  31. 31. やってみよう•  とりあえず、全部削除して、きれいにしよ う!
  32. 32. やってみよう•  左のを選んでdeleteキー!•  真ん中も!•  右も!
  33. 33. できた!•  すっきり!
  34. 34. やってみよう•  ツリーのアイコンが灰色になってる!•  セーブされてないサイン!•  command+sで保存しよう!
  35. 35. ファイルを消そう•  つかわないファイルを消そう•  さっき消した画面用のプログラムを4個消 してみよう。
  36. 36. やってみよう•  選択して右ボタン→Delete
  37. 37. やってみよう•  右側のボタンをおそう!
  38. 38. 注意事項•  真ん中のボタンを間違えて押すと、ファイ ルが消されずに、参照だけが消されます。
  39. 39. できた!•  すっきりした! memory_01.zip
  40. 40. 画面を作ってみよう!•  まずは、画面を作ってみよう!
  41. 41. やってみよう•  右下の黄色い感じの とこにいろいろな パーツがある!
  42. 42. やってみよう•  ViewControllerをえ らんで、画面に置こ う!
  43. 43. ViewControllerって?•  まあ、簡単にいうと画面
  44. 44. やってみよう•  画面を拡大しよう。 小さいままだとパー ツが置けない!•  ボタンを置いてみよ う!
  45. 45. できた!•  ボタンを押すと青く光る! memory_02.zip
  46. 46. プロパティを変更しよう•  ボタンを選択して、 プロパティを変更し よう!
  47. 47. やってみよう•  スタートボタンをつ くってみよう!
  48. 48. メモ•  フォントをヒラギノに かえると、文字の位 置がボタンの真ん中 ではなくなります。•  格好わるいのでボタ ンの文字は画像にす ることが多いです。
  49. 49. 画像を置いてみよう•  画像をXCODEのプロジェクトに追加しよ う•  それを画面に設定してみよう
  50. 50. やってみよう•  NewGroupで、あた らしいGroup(フォ ルダみたいなやつ) をつくろう。•  名前をimagesにしよ う
  51. 51. やってみよう•  Finderから画像のは いったフォルダをド ラッグしよう•  Copyのチェックがつ いてるのを確認して Finishをおそう
  52. 52. できた!•  画像が追加された!
  53. 53. やってみよう•  UIImageViewを画面 に置いてみよう•  設定を変えると絵が 出る!
  54. 54. 画像の名前とか•  iPhoneの画面サイズは、320x480で、 retainaだと640x960です。•  これを自動に切り替えるには、xxxx.png と、倍の大きさのxxxx@2x.pngを用意し ます。•  プロパティで設定するファイル名には、 @2xがついてないものを指定します。
  55. 55. かさねあわせ•  左側のツリーみたいなところのが、パー ツの重ね合わせ(レイヤー)になっていま す。•  下に行くほど、画面では上に表示されま す。
  56. 56. やってみよう•  こんな感じの画面を つくってみよう!
  57. 57. できた!•  なんかそれっぽい! memory_03.zip
  58. 58. 画像のおおきさ•  画面サイズは320x480です。•  ステータスバーがあると、20引かれるの で、320x460になります。•  ナビゲーションバーがあるとさらに、44 引かれるので、320   416になります。※サンプル画像は、L,M,Sがそれぞれ上記の高さに対応しています!
  59. 59. モーダルに挑戦!•  モーダルとよばれる画面遷移をしてみよ う!•  いまいる画面にの上に、別の画面が表示 されるやつ!
  60. 60. やってみよう•  今の画面の隣に、もうひとつ画面を作ろ う•  画像を表示させてみよう
  61. 61. セグウェイをつなごう•  スタートボタンを選 択•  controlを押しながら 右の画面にドラッグ•  メニューが出るから modalを選択
  62. 62. できた!•  ボタンを押すと遷移する!•  もどれないけどね!
  63. 63. ナビゲーションに挑戦!•  戻れるように、ナビゲーションに挑戦しよ う!
  64. 64. やってみよう①•  NavigationControlle rを置いてみよう•  右側の RootViewControler はいらないから消そ う
  65. 65. やってみよう②•  タイトル画面の隣に 移動しよう•  タイトル画面の左に ある矢印を NavigationControlle rに移動してくっつけ よう
  66. 66. やってみよう③•  NavigationControlle rからタイトル画面に controlを押しながら ドラッグしてセグ ウェイをだそう•  セグウェイは、 RelationShipをえら ぼう!•  くっつけると、タイ トル画面にナビゲー ションがついた!
  67. 67. やってみよう④•  画像をSがついてる小 さい画像にしよう•  画像やボタンの位置 をいい感じに直そう
  68. 68. できた!•  ナビゲーションが上に出る!•  ボタンを押すと遷移する!•  もどれないけどね! memory_05.zip
  69. 69. やってみよう•  スタートボタンからでてるセグゥェイを削 除しよう•  もういっかい、セグウェイをpopでつなげ よう!•  画像もいい感じにしよう
  70. 70. できた!•  ナビゲーションが上に出る!•  ボタンを押すともどる! memory_06.zip
  71. 71. やってみよう•  ナビゲーションバーに タイトルを入れてみ よう!
  72. 72. できた!•  なんかいい感じ!
  73. 73. ラベルにちょうせん•  labelを使うと、画面 に文字を出すことが できます。
  74. 74. やってみよう•  こんな感じのカッコ いいラベルを作って みよう!•  次のページにヒント があるよ!
  75. 75. ヒント•  Alphaは透明度で、1 が不透明、0が完全に 透明•  Linesを増やすと行を 増やせる!
  76. 76. できた!•  なんかゲームみたい memory_07.zip
  77. 77. ゲーム的なもの•  ボタンと移動をつかったゲームを作ろう!
  78. 78. ヒント①•  画像を組み合わせて タイトル画面を作ろ う!•  背景の色は、 Backgroundで変更 できる!
  79. 79. ヒント②•  Viewを配置すると、フォル ダみたいな感じで、Viewの 中に他の部品を入れられま す。•  そのかわり、alphaを変更 すると、中にあるやつも透 明になるから注意しよう。•  あとなんか、重ねたいのに 勝手に中に入ったりして移 動が面倒になるけど我慢し よう。•  そんなときは、左の画面の ツリーを操作するといいか も
  80. 80. ヒント③•  ボタンを2個置いて、 分岐させてみよう!
  81. 81. ヒント④•  pushのセグウェイを つなげたのに、なぜ かナビゲーションバー がつかないときがあ る!•  でも、実行するとナ ビゲーションバーが 作っていう・・・。•  そんなときは、パラ メータを自分で変更 しよう!
  82. 82. できた!•  なんとなく、それっぽい!
  83. 83. アイコンとスプラッシュ•  アイコンとスプラッ シュをドラッグして 定義しよう!
  84. 84. アプリの名前•  Bundle display nameを変更してみよう!
  85. 85. ヒント•  設定や画像がうまく 反映されないときは、 クリーンをしよう。•  それか、アプリを一 回消してから入れ直 そう!
  86. 86. できた!•  これで完成! memory_09.zip
  87. 87. まとめ•  プログラムしてないのにできた!
  88. 88. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×