2016年2月28日日曜日

Swiftを始めてみよう

株式会社Pro-SPIRE SS第1BU荘司まなつです。

今回はSwiftを学び簡単なアプリを作成しました。
Swiftでとにかくアプリを作成してみたいという方向けの記事となっております。
Swiftの文法等は後日ご紹介していきます。

※Swiftとは・・・
 Apple社が開発したiPhoneアプリを作成する為のプログラム言語です。
 特徴は「速い」「モダン」「安全」の3つとなっています。
 Swiftは実行速度が速く、JavaScriptやRubyやPythonなどの言語のいいところを参考にして
 言語に慣れているプログラマーにも分かりやすいモダンな言語です。
 また、エラーが起きそうな書き方をしていると「文法的なエラー」として教えてくれます。
 アプリの実行時のエラーが起きにくい安全なプログラムを書くことができ、この「安全機能」は
 Swiftの一番の特徴となっています。

以下の順番でSwiftのアプリを作成してみます。
【Step1】Hello の表示
【Step2】じゃんけんアプリ作成

用意するもの
・Mac

*....................*....................*....................*....................*....................*....................*
まず始める前に・・・
《Xcodeのインストール》
アプリ開発を始める前に「Xcode」(無料)をApp Storeからインストールします
※Xcodeとは・・・
 Mac,iPhone,iPadアプリを開発するためのIDE(統合開発環境)です
 Swift以外にC言語、C++、Objective-Cなども使用することができます


《プロジェクト作成方法》
1.Xcodeを起動します
2.「Create a new Xcode project」をクリック
3.「Single View Application」を選択し、「Next」をクリック 

4.プロジェクトを作成するにあたり、必要な情報を入力します
  今回は以下のように設定をします
 ・Product Name:Sample
 ・Organization Name:myname
 ・Organization Identifier:com.myname
 ・Language:Swift
 ・Devices:iPhone
「Next」をクリックします

5.プロジェクトの保存先を選択し、「Next」をクリック

以上の方法で、基本的なアプリ作成の事前作業は終了です
*....................*....................*....................*....................*....................*....................*

【Step1】「Hello」の表示
Xcodeの試運転として「Hello」を表示してみましょう

1.プロジェクトの保存先を選択後、以下の画面が表示されます 

2.画面左側面にあるファイル一覧の「Main.storyboard」をクリック 
3.するとiPhoneの画面のような四角い枠が表示されるのを確認 











4.右下に並んでいるアイコンのエリアをスクロールして「Label」をクリックして四角い枠の中にドラッグ&ドロップをして
配置します(右下にある検索エリアで「Label」と検索するとスムーズに見つけることができます)


5.「Label」をダブルクリックして文字が反転状態になったところで「Hello」と入力
6.Command + R キーを押下するとSimulatorが起動し、アプリが実行されます 

[確認] 

「Hello」と表示されたアプリが実行されたでしょうか
プログラミングではなくアイコンを配置するだけでしたが、これでXcodeの試運転は終了です

【Step2】じゃんけんアプリ作成
*事前作業*
 「グー」「チョキ」「パー」の画像を用意して自分のMacに保存しておく

以下のような、じゃんけんアプリを作成してみましょう
アプリについて:
 ユーザーが画面下部の3つのボタンを選択し、コンピュータとじゃんけんの勝負をするアプリです
 勝敗の結果も表示します



1.新規プロジェクトを作成するため、プロジェクトの基本情報を入力して「Next」ボタンをクリックして保存先を選択する
   ・Product Name:JankenSample
 ・Organization Name:myname
 ・Organization Identifier:com.myname
 ・Language:Swift
 ・Devices:iPhone

2.左側面の「JankenSample」(Project Name)を右クリック
「Add Files to ”JankenSample”」をクリック

3.以下のダイアログが表示されるので、事前に準備してあった画像を選択し「Add」をクリック
以下のように画像(choki.jpg)が登録された状態になります 
以上の作業を2回繰り返し、「グー」「チョキ」「パー」の画像3枚を登録します


4.「Main.storyboard」を選択して、右側面のSizeを「iPhone 4-inch」にします
(作成画面の大きさが変化し、アプリの作成がしやすい状態になります) 
5.右下のアイコンエリアから「Image View」を選択・ドラッグして四角い枠の中に配置します 
6.右側面の「Image View」の「Image」で先ほど登録した画像を選択します
 2つのImage Viewに同じ画像を設定します 
7.アイコンエリアから「Button」「Label」を選択し配置します
「Button」はダブルクリックし「最初はグー」に修正します
「Label」はダブルクリックし「*じゃんけんアプリ*」と修正します
「Button」をさらに3つ配置し、「グー」「チョキ」「パー」を作成します
分かりやすいよう右側面の「Text Color」「Background」で色を変えておきます
8.3つ並べたボタンを同じサイズに設定して体裁を整えます
 ボタン3つを選択し以下画面の赤枠部分(「Stack」ボタン)をクリックします 
3つのボタンがくっつく状態になります

9.3つのボタンが選択した状態で、
   shiftキー + controlキーを押したまま選択したボタンをクリックします
  以下の状態で、「Stack View」を選択します 


10.右側面の「Stack View」で「Distribution」を「Fill Equally」に設定します

11.赤枠部分をクリックし以下のように設定を行う
  Add 3 Constraintsをクリックすると体裁が整えられます
 ※数字を入力する前に赤い点線をクリックし実線にすることで設定が確定されます 


以上で基本的なSwiftのアプリのデザインが完了します。
残りはコードを記述してButtonが思い通り動くよう実装します。
(今回はコード記述を省略致します)

実装後、commandキー + R キーを押下するとSimulatorが起動し、
以下のようにアプリが実行されます。
 



実際に作成してみて、XcodeはデザインをButtonやLabelを使い自分の好きな場所に
簡単に配置できるので言語初心者でも楽しくアプリ開発ができるものだと感じました。
また、エラー検知が素早いのでアプリ実行前にその場でエラーを修正できます。
エラー場所を見つけやすいので開発の時間短縮になると思いました。

次は、Swiftで旅行の写真や訪れた場所等を管理してくれるアプリを作ろうと考えています。
次回の記事では、Swiftの文法をご紹介するとともにアプリをご紹介できるよう挑戦します。


参考文献
森 巧尚(2015.10) 『Swiftではじめる iPhoneアプリ開発の教科書』 株式会社マイナビ

0 件のコメント:

コメントを投稿