- 更新日: 2018年11月15日
- 公開日: 2016年02月12日
0からはじめるiOSアプリ開発入門！Xcodeの導入からやさしく解説！
今回はiOSアプリ開発に必須のツールであるXcodeの使い方を紹介しながら、実際にプロジェクトを作成して「Hello World」の文字を表示するアプリを0から作成してみます。
Xcodeとは
Xcodeとは、Apple社が提供するMac OS X向けの統合開発環境になります。ソースコードの編集だけでなく、デバック機能やiOSシュミレーターを利用した端末での挙動確認などが行えます、。それ以外にもiPhoneアプリ開発に必要な作業を強力にサポートしてくれるツールとなっています。
Xcodeのインストールに必要なもの
- Mac PC
- Apple ID
- ハードディスク容量 約 5 GB
Apple IDの登録がまだの方は、こちらから行えます。
Xcodeのインストールと起動
iTunesストアから Xcode をダウンロードします。
ダウンロードが完了し、インストールできたら Xcode を起動します。
Xcodeを使ってスマフォアプリを作って見る
起動すると、図１のようなWelcome to Xcodeと書かれた初期起動画面がでます。今回はアプリの新規作成ですので、「Create New Xcode Project」を選びます。
次に図２のようなテンプレート画面が出ますので、iOSのアプリケーションを選び、テンプレートとして標準の「Single View Application」を選択します。
図2
そうすると図３のようなアプリの基本情報入力画面が出ます。
図3
Product Nameにアプリの名称を、Organizetion Nameに会社名を、Organizetion Identifierに識別ＩＤを入力します。なお識別ＩＤはアップロストアで販売する場合、重要な情報になりますが、ここでは省略します。プログラムのコーディングはアップル社のネイティブ言語であるObjectiv-CとSwiftのどちらでもできますが、今回はSwiftでコーディングします。
Nextボタンをクリックするとプロジェクトが自動生成されます（図４）。
図4
画面の構成は、上部が基本操作を配置しているツールバー、左側がファイルを編集するナビゲート、中央がプログラムをコーディングするエディター、右側が画面の部品を設定するユーティリティです。
画面左側にあるナビゲートの中からデリゲートを選択すると、図５のデリゲートのソースコードが表示されます。
図5
次にナビゲートの中からヴューコントローラーを選択すると、図６のヴューコントローラーのソースコードが表示されます。
図6
さらにナビゲートの中からメインストリーボードを選択すると、図７の画面レイアウトが表示されます。
図7
以上で準備ができましたので、それではアプリの開発に取り組んでみましょう。今回は、文字を表示するアプリを作ってみます。
図8
まず、図８のようにナビゲートの中からヴューコントローラーを選択してのソースコードを表示させ、エディターに以下のソースコードを記述します。
[swift]
import UIKit
//ここから
class HelloWorld: UIView {
override func drawRect(rect: CGRect) {
let attrs = [NSFontAttributeName: UIFont.systemFontOfSize(24)]
// 表示する文字を入力する
let str = "Hello, World!"
let nsstr = str as NSString
nsstr.drawAtPoint(CGPointMake(100, 100), withAttributes: attrs)
}
}
//ここまでを追加
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
[/swift]
文字を表示するクラスを追加するだけです。
次に、図９のようにナビゲートの中からデリゲートを選択してデリゲートのソースコードを表示させます。プログラムによっては、デリゲートエディタにソースコードを記述しますが、今回は修正不要です。
図9
最後に、図１０のようにナビゲートの中からMain.Storyboardを選択し画面レイアウトを表示させ、画面の部品にHello Worldを選択します。
図10
次に右上に「show the identity inspector」という四角い青いボタンがありますので押すと、上にクラスという項目が表示されますので、クラスから「HelloWorld」を選択します。これは画面が呼ばれた時に、ビューコントローラに記述したHelloWorldというクラスを読みだすという意味です。
以上で文字を表示するアプリの開発は完了です。
お探しの記事は見つかりませんでした
作ったアプリをシミュレータで動かして見る
それでは、作った文字を表示するアプリをＭａｃパソコンのシミュレータで動作確認してみます。まず対象となるiPhoneの機種を選びますが、画面のサイズが違うだけでので、どれでもかまいません。なお、スマフォを所有しているならば、実機と接続するとスマフォ上で動作確認することもできます。
対象となる機種を選んだら、次に左上の矢印ボタンを押すと、ビルドが始まります（図１１）。
図11
ここでエラーが出た場合、デバックが必要です。エラーがなく無事に通過した場合、シミュレータが動作します。
シミュレータ上に図１２のような文字が表示されました。これで完成です。
図12
＼Webサイト担当者としてのスキルが身に付く！！／
まとめ
以上、今回はXcodeの使い方と簡単なスマフォアプリの作成を行いました。今回はコンピュータ言語については触れていませんが、Xcodeの操作自体は簡単ですので、Objextive-CやSwiftが扱えるのであれば、スマフォアプリの開発は難しくありません。これを参考にして皆さんもスマフォアプリの開発にチャレンジしてみましょう。
- この記事を書いた人
- CodeCampus編集部
