iOSアプリ開発超入門！Xcodeの導入からSwiftを使ったHello Worldまで
2017/01/31
おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep
以前はiOSアプリ開発に「Objective-C」が使われていましたが、現在は2014年にAppleから発表された「Swift」が新しく使えるようになりました。
今回はSwift言語を使って「Hello World」の文字を表示するアプリを1から作成してみます。
iOSアプリを作成するにはXcodeが必要ですので、まずはXcodeをインストールしていきましょう。
スポンサーリンク
Xcodeのインストールと起動
App Storeを開きます。
App Store内右上の検索から「xcode」と入力。Xcodeが表示されるのでインストールします。
インストールが完了したら、Finderから「アプリケーション」→「Xcode.app」でXcodeを起動します。
ライセンスの同意画面が表示されたら「Agree」をクリック、ユーザログイン画面が表示されたらパスワードを入力して「OK」を押して下さい。
下記画面から「Create a new Xcode project」を選択。
次回以降は、Xcode上で「File」→「New」→「Project」から新規Projectを作成できるので覚えておきましょう。
Xcodeが立ち上がり、Project作成ダイアログが表示されます。「Single View Application」を選択して「Next」をクリック。
作成するProjectの情報を入力します。まずは下記の通りに入力してみましょう。
- Product Name
- Organization Name
- Organization Identifier
- Language
- Devices
アプリの名前を入力
組織名を入力。空欄でもOK
その組織が持っているドメインを入力。「sample.net」を持っていた場合は「net.sample」になる
利用する言語を選択
利用するデバイスを選択
「Use Core Data」は今回使用しないのでチェックを外した状態でOKです。「Next」をクリックします。
次にプロジェクトを保存する場所を選択します。ご自身の管理しやすい場所を選択しましょう。今回は「書類」フォルダの中に「iOSApps」フォルダを作成してそこに保存しました。
これで新しいプロジェクトが作成されました。
ちなみに画面下部の「Create Git repository」にチェックがついていると、アプリのバージョンを管理する「Git」というアプリが設定されます。ここではあまり意識せずに、チェックを入れておけばOKです。
言語を日本語に設定
デフォルトの言語を日本語に変更しておきましょう。画面左部のナビゲータエリアにある「Supporting Files」の左の「▼」をクリックして、表示された「Info.plist」を選択します。
中央のエディタエリアが切り替わるので、「Localization native development region」のValueを「Japan」に変更します。
これでアプリで利用する言語を日本語に変更できました。
コンソールにHelloWorldを表示
ではSwift言語を使って「Hello World」と表示させてみましょう。
ナビゲータエリアにある「ViewController.swift」を選択します。中央のエディタエリアにある「viewDidLoad()」中に下記コードを追加しましょう。その後、左上にある「スタートボタン」をクリックします。
println("Hello World");
シミュレーターが立ち上がり、プログラムが実行されます。エディタエリアの下にあるデバッグ(コンソール)エリアに「Hello World」と表示されれば成功です。
デバッグエリアには表示されましたが、シミュレーターの画面は真っ白の状態でした。次はシミュレーター上に「Hello World」と表示できるようにアプリを変更していきましょう。
シミュレーターにHelloWorldを表示
シミュレーター上にHello Worldを表示させてみましょう。
「Main.storyboad」を選択するとエディタエリアに「View Controller」が表示されます。どこでもいいのでView Controllerの中をクリックしておきましょう。
次に、右側のユーティリティエリアから「◎」に似た形のマークを選択し、その下から「Label」を探します。見つけたらLabelをView Controllerの中にドラッグ＆ドロップしましょう。
View Controllerにラベルを追加できました。しかし、位置がきちんと定まっていないので、どのデバイスでも画面中央にラベルを表示できるように設定していきます。
ラベルを選択した状態で、エディタエリア右下にある長方形が２つ重なったマークをクリックします。
次のように「Horizontal Center in Container」「Vertical Center in Container」にチェックを入れ、「Add 2 Constraints」をクリック。これでラベルが画面中央に固定される制約をつけることができます。
制約はすぐに適応されないので、エディタエリア右下の三角形のマークから「Update Frames」を選択します。
ラベルが画面中央に移動し、黄色い線が青く変化しました。
ラベルをダブルクリックして「Label」を「Hello World」に書き換えます。
実行ボタンをクリック。
シミュレーター上に「Hello World」と表示されれば成功です。
まとめ
Xcodeをインストールして最初のプロジェクトを作成しました。また、「HelloWorld」を「こんにちは」に変更してもちゃんと表示されますので試してみてください。
最初のうちは制約周りに難しさを感じますが、解像度が違うデバイスでも簡単にレイアウトを保てる便利な設定ですので、ここで慣れておきましょう。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
