Vol.45

Xcodeの使い方を基礎から学ぼう~SwiftからはじめるiOSアプリ開発:その2【初心者向けアプリ開発3分tips】

  • このエントリーをはてなブックマークに追加

スクール講師がアドバイス!初心者のためのアプリ開発3分tips アプリ開発スクール『RainbowApps』日本で初めて、プログラミング受講料の無料提供を始めたアプリ開発スクール。iPhone、Android、Unity、HTML5、AWSコースを展開しており、受講用のMac完備、初心者・未経験者から受講OK。特徴は、大手IT企業からベンチャーまで、受講後の就職・転職もサポートしている点だ。全国で教室を開いているほか、オンライン講座も展開中。詳しい情報はコチラ

こんにちは、日本最大のアプリスクール『RainbowApps』で、主にiOSアプリ開発の指導を担当している七島偉之(ななしま・ひでゆき)と申します。本連載では、iOS、Android、Unityなどのアプリ開発について、初心者向けの内容を『RainbowApps』講師陣が分かりやすく解説していきます。

第3回目は「iOSアプリを実際に作ってみよう!」です。

第1回ではアプリ開発に必要なSwiftという新しいプログラミング言語の紹介をしました。今回はiOSアプリ開発に必須のツールであるXcodeの使い方を紹介しながら、実際にアプリを起動させるまでを行います。

【1】Xcodeとはなんぞや?
【2】プロジェクトを作ってみよう!
【3】Xcodeの使い方「基本のキ」

Xcodeの最新バージョンであるXcode6のインストールがまだの方は、第1回の記事を参照してインストールしておいてください。

【1】Xcodeとはなんぞや?

アプリの開発は、プログラムを書くだけではできません。アプリをiPhone上で動作させるには、プログラムをコンピュータが理解できる形式に変換する必要があります。

それだけでなく、アプリが使う画像や音声素材の管理、アプリが想定通りに動作するかの確認や、バグがないかの検証など、さまざまなことが必要となってきます。Xcodeとは、それらアプリ開発に必要な作業を「強力に」サポートするツールが入った道具箱です。

Xcodeで使えるツールをいくつかご紹介しましょう。

■テキストエディタ
プログラムを書くために必須のものです。Xcodeのテキストエディタは、ただプログラムを書くだけではなく、高度な自動入力やプログラム構文の強調(シンタックスハイライトといいます)をしてくれるため、効率良くプログラムすることができます。

■インターフェースビルダー
ボタンやスイッチなどの部品をドラッグ&ドロップしていくことで、プログラムを1行も書くことなくアプリの見た目を作ることができます。

■デバッガ
プログラムの動作に問題がないか、プログラムの実行途中で動作を止めて中の状態を確認できたりします。

■コンパイラ
ボタン1つであなたが書いたプログラムをコンピュータが理解できる形式に変換してくれます。

■iOSシミュレータ
実際のiPhone端末そっくりの動作をする「シミュレータ」をPC上に立ち上げ、アプリの動作を確認することができます。

ここに挙げた例の他にも、非常に多くの便利機能があるので、まずは必須の機能の使い方を覚えてから少しずつ他の機能にチャレンジしていくといいでしょう。

【2】プロジェクトを作ってみよう!

さて、それでは実際にXcodeを触りながら使い方を学んで行きましょう。

まずはプロジェクトの作成です。「プロジェクト」とはソースコードや画像素材など、アプリに必要ないっさいがっさいが含まれるものです。アプリ開発をする際には、まずプロジェクト作成を行います。

それではXcodeを立ち上げてみましょう。

Spotlightに「xcode」と打ち込んで、出てきた候補の中の「Xcode」を選択して「enter」を押します(Spotlightは画面右上の虫眼鏡マークをクリックすると表示されます)

GooglePlay画面

するとXcodeが立ち上がって下記のような画面が表れます。

今回は「Create a new Xcode project」を選択して「プロジェクト」を作りましょう。

GooglePlay画面

次にアプリのテンプレートを選択する画面になります。最初から便利な機能が組み込まれたテンプレートを選択することもできますが、今回は最もシンプルな「Single View Application」を選択しましょう。

GooglePlay画面

「Next」を押すとアプリの設定をする画面になります。ここでは下記のように入力してみます。

GooglePlay画面

取り急ぎ先に進みたい方は次の画面へお進みください。入力した値の内容を知りたい方は、下記に各項目の詳細を記載しておきます。

■Product Name
プロジェクトの名前です。アプリ名の初期値にもなります。

■Organization Name
会社の場合などには入力します。入力しなくてもOKです。

■Organization Identifier
任意の値でOKですが、App Storeにリリースするアプリの場合は※注の事項に注意して入力しましょう。

■Language
使用するプログラミング言語です。SwiftかObjective-Cを選択できます。

■Device
iPad, iPhone, Universal(iPhone, iPad両対応)のアプリにするかを選択できます。

■Use Core Data
高度なデータベース機能を使用するかどうかです。

※注:「Product Name」と「Organization Identifier」から成る「Bundle Identifier」は、世界中のアプリの中からあなたのアプリを識別するIDになるとても重要な値です。どんな値であっても世界中で一意となれば良いのですが、ドメインを逆さまから並べたものをOrganization Identifierに設定することが推奨されています(rainbowapps.comというドメインであればcom.rainbowapps)。

次にプロジェクトを保存する場所を聞かれるので、お好きな場所を指定して「Create」を押せばプロジェクトが作成されます。

ソース管理の仕組みであるGitをお使いの方は、「Source Control」のチェックボックスにチェックをすれば、同時にリポジトリが作成されます。

GooglePlay画面

プロジェクト作成完了です。

これで、アプリ開発に最低限必要なファイルやフォルダが自動生成されました。

GooglePlay画面

【3】Xcodeの使い方「基本のキ」

さて、何やら難しそうな画面がたくさん出てきました。Xcodeはさまざまな機能があるのはいいのですが、機能が有り過ぎて使いこなすのが大変です。

実際に多くのアプリ開発入門者にとっての最初の関門となっているところなので、一つ一つ確認していきましょう。

まず画面構成についてご説明します。画面は大きく5つのエリアで構成されています。

■ツールバー
アプリ開発においてよく使う機能が配置されています。

■ナビゲーターエリア
主に編集するファイルを選択したりします。

■エディタエリア
選択したファイルを編集するのに使います。

■デバッグエリア
プログラム実行時のデバッグメッセージが表示されます。

■ユーティリティエリア
アプリ開発で使用する部品の設定ができます。

GooglePlay画面

最初はそれぞれのエリアの名前を覚えるのが大変だと思いますが、使い方をググるときに必要となってきますのでぜひ覚えておきましょう。

今回は特によく使う「ツールバー」、「ナビゲーターエリア」、「エディタエリア」の機能を使って、操作をしてみましょう。

まず、ナビゲーターエリアで「ViewController.swift」というファイルを選択します。ViewController.swiftは画面に関するソースコードが記述されているファイルです。なので、エディタエリアにソースコードを編集するのに適したテキストエディタが表示されます。

GooglePlay画面

次に「Main.storyboard」というファイルを選択してみましょう。

その際に画面右上、ツールバーにある四角いアイコンの右2つもクリックしてみましょう。これは各エリアを表示/非表示にするボタンです。エディタエリアを広く使いたい時に便利ですので覚えておきましょう。

GooglePlay画面

さて、「Main.storyboard」を選択したら下記のような画面になったと思います。

エディターエリアにキャンバスのようなものが表示されました。これがインターフェースビルダーの機能「ストーリーボード」です。

このストーリーボードにボタンや画像などを配置してアプリの見た目を作っていきます。

このようにナビゲーターエリアでファイルを選択すると、編集に適した形でエディターエリアに表示されるので、これを編集していくことでアプリ開発を進めていくのが「基本のキ」です。

最後にシミュレーターを立ち上げてアプリを動作させてみましょう。

画面左上、ツールバーにある再生マークのアイコンをクリックします。下図下線の部分で立ち上げるシミュレーターの種類を選択することができます。

シミュレーターが立ち上がってアプリが実行されました!画面は真っ白ですが、電波や電池のアイコンは実物そのままですね!!

いざ、アプリ開発へ!

今回、アプリ開発に必須の「プロジェクトの作成」と「Xcodeの使い方」を学習してきました。あとはアプリを開発するのみです!

次回はソースコードを編集したり、ストーリーボードで画面を作ったりする、実際のアプリ開発の仕方をご紹介します。

【講師プロフィール】
RainbowApps講師
七島偉之(ななしま・ひでゆき)

1982年生まれ。茅ヶ崎在住エンジニア。業務Webシステムの開発に5年携わった後、モバイル系の技術に萌えすぎて、2013年「野良エンジニア」として独立。現在はiPhone、Androidアプリの開発を中心に活動しつつ、セミナーやアプリ開発スクールを通してプログラミング教育にも携わる。

>>連載バックナンバー:初心者向けアプリ開発3分tips

この記事が気に入ったらいいね!しよう

エンジニアtypeの最新情報をお届けします
  • このエントリーをはてなブックマークに追加

RELATED POSTS関連記事

JOB BOARD編集部おすすめ求人

この記事に関連する求人・キャリア特集

  
株式会社 大洋システムテクノロジーの求人を見る エンジニア転職フェア開催 IT&モノづくりエンジニアを求める優良企業が大集結! アプリケーション・パフォーマンス 2017 typeメンバーズパーク

日本マイクロソフト株式会社 【マイクロソフトサポートエンジニア】トップ…

株式会社チェプロ SE/PG*100%自社開発*元請案件/自社製品(ERP…

イーレックス株式会社 社内SE◆残業月平均20h◆土日祝休◆月給28万円…

ジャパニアス株式会社 テストエンジニア(正社員登用有)★未経験から始め…

ソフトバンク・テクノロジー株式会社 インフラエンジニア◆最上流工程に携…

株式会社神戸製鋼所【ポジションマッチ登録】 品質管理・検査ポジション

株式会社ワット・コンサルティング 【グローバルエンジニア】海外と日本を…

アトー株式会社 設計エンジニア/業界未経験歓迎/バイオサイエンス、バイ…

株式会社マルチウェーブ 【品質保証】年俸400万円~800万円◆100%自社…

大成技研株式会社 CADオペレーター:未経験歓迎/2D・3DCADがゼロから…

Xcodeの使い方を基礎から学ぼう~Swiftからはじめるi...

データアナリストになる方法~コンサル型かエンジニア型か?ビッ...

モノのBoTが語るコトは、ヒトの人生を変えるか。Bsize八...

今度こそ克服するAutoLayoutの使い方・基礎編~Swi...

なぜ、いまだ7割のITプロジェクトが失敗するのか? 「再生人...

>>過去のエンジニアtypeのページはこちら