レポート

『【ヒカ☆ラボ】RainbowApps現役講師によるiPhone&Androidアプリ開発基礎講座!!』レポート

この記事を読むのに必要な時間:およそ 2 分

Xcodeの使い方

図4 Xcodeのエリア

図4 Xcodeのエリア

まずエリアの名前を覚えましょう

確かにエリアの名前がわからないと調べることも何もできませんね。

  • ナビゲーションエリア:編集するファイルの選択
  • エディターエリア:ソースなどの編集
  • デバッガーエリア:ログなどの表示
  • インスペクターエリア:UI部品などの設定
  • ライブラリエリア:画像素材やUI部品の選択

シミュレータ

アプリの動作をチェックするものです。開発を進めるとシミュレータの動きが変わって行くことが都度確認できます。

アプリの見た目を作成しよう

まずは画像を使って見た目を作ります。

図5 今回使用した画像

図5 今回使用した画像

ブラウザで画像を保存し,ナビゲーションエリアにドラッグ&ドロップしてインポートします。選択肢「Copy items into destination group's folder(if needed)」をチェックするとプロジェクトファイル内に素材がコピーされます。最初のころはこちらが便利です。

次にUIを作ります

ストーリーボードから素材を配置することで作って行くことができます。

図6 次にUIを作ります

図6 次にUIを作ります

メディアライブラリに素材があるのでドラッグ&ドロップで背景を配置して行き,文字の表示はオブジェクトライブラリからラベルを使用して行きます。ラベルとはテキストを表示できるパーツです。

パーツは種類が多く,目当てのパーツを探すのが大変なので早めに名前を覚えて検索できるようにして行くことがポイントとのこと。そして,ラベルは色々調整が可能なので自分の理想に合わせて求める値に調整して行きます。

ボタンの配置もライブラリからドラッグ&ドロップして,色,文字,サイズなど細かい調整をして行きましょう。

最後に動きの実装です

図7 動きの実装

図7 動きの実装

動きはビューコントローラにコードを書いて行くことで実装できます。まずはストーリボードのラベルとビューコントローラーのソースを紐付けします。これはcontrolキーを押しながら引っ張って行くことでソースを紐付けることができます。

ここからはコードを打って行き,完成です。

コードについてはGitHub上の資料を参照してください。


習熟した人はここまで5分位でできてしまうそうです。そしてここから技術を発展させて行くには今回の最もシンプルなアプリの形から複雑に発展させていけば良いとおっしゃっていました。

著者プロフィール

林英司(はやしえいじ)

前職はまったく違う業界だったが,より挑戦できる環境があったレバレジーズ(株)に入社。経歴関係なく実績を出せば次々に新しい仕事ができる現状に強くやりがいを感じている。仕事上,常に意識していることは「相手の想像を上回る」。少しでもモテようと生活感を出さずにミステリアスぶっていたら「ノリが悪い」「性格が悪い」「キモい」という事実無根なレッテルを貼られてしまったことが最近の悩み。