WEBエンジニアGirls!!

今までプログラミングに触れたことがなかった女子たちが、就職・インターンを機にイケてるWEBエンジニアを目指す七転び八起きをゆるーり綴ります( ´ω`)

iOSアプリ・swift知識0だけど、swiftでiOSアプリを作ってみた

こんにちは、WEBエンジニアのあじゃです(θωθ っ )3~

エンジニアになってから昨日までの1年半、
ずーーっとPHPばっかりやってきたのですが、
違うことやってみたいな〜と思いswiftiOSアプリを作ってみました!


始める前のスペック
swiftって単語は知ってる。書き方は何も知らない。
iOSアプリって単語は知ってる。Androidアプリとは違う、くらいしか知らない。
・つまり言語も作り方も知らない。
 昔iphone使ってたので、iOSアプリを使ったことはある。

・・・こんな感じです*ω*


この状態から、
・所要時間:1時間弱で、
・機能:input field, submitボタン, 完了のalertがついたiOSアプリを作成しました


基本を理解できた!
というわけではありませんが(相変わらず全くわからないまま)、
思っていたよりハードル高くないんだな!と
興味をもつきっかけになりました٩( 'ω' )و



開発ツール Xcode をインストールする

下記のリンクから、Xcodeをダウンロードします。
https://itunes.apple.com/jp/app/xcode/id497799835?mt=12
*AppleIDが必要です。

ダウンロードが完了し、インストールできたら起動します。
特別なステップは必要ありません(`・ω・´)


Xcodeで新規アプリをつくる

Xcodeを立ち上げると、下記のような画面になります。
f:id:we-girls:20160204185018p:plain
"Create a new Xcode project"をクリックします。



作成するprojectのタイプを選択します。
f:id:we-girls:20160204185039p:plain
"Single View Application"を選択します。



Applicationの設定をします。
Product Name, Organization Name, Organization Identifierは自由に設定してください
f:id:we-girls:20160204185048p:plain
LanguageはSwiftを選択し、
DevicesはiPhoneを選択します。


アプリケーションを保存する場所を指定します。どこでもOKです!
f:id:we-girls:20160204185104p:plain



作成したアプリを開発する

設定が終わると、さっそくソースコードとview画面が表示されています。

f:id:we-girls:20160204185122p:plain
左サイドメニューからMain storyboadを選択します。
これが今回開発していくviewの画面になります。


画面のサイズを設定します。
f:id:we-girls:20160204185137p:plain
右メニューから、
Simulated MetricsのSizeをiPhone 4.7 inchに変更します。
これで、iPhone6sと同じサイズの画面で開発を進めることができます。


viewに必要な要素を設置していきます。
HTMLをカリカリ書く必要はありません!٩( 'ω' )و
f:id:we-girls:20160204185157p:plain
右サイドメニュー下部から、
必要な要素をドラッグ&ドロップしてviewに設置していきます。
今回は、
・文字(Label)
・入力フォーム(Text Field)
・ボタン(Button)

の3要素を用意してください

要素のサイズやデザインは、右サイドメニューから変更できます!


設置した要素に関数を紐付けていきます。
まず、コードと画面を並べて表示する画面に表示を切り替えます。
f:id:we-girls:20160204185219p:plain
①→②の順でクリックします。
②では、Automaticを選択してください。


ボタンに関数を紐付けます。
f:id:we-girls:20160204185230p:plain
ボタン要素の上でControllキーを押しながら、
Class ViewControllerの下にドラッグ&ドロップします。

ドロップすると、下記のような関数の設定画面が表示されます。
f:id:we-girls:20160204185239p:plain
ConnectionはAction
NameはtapHandla(これは自由に設定していただいてもOKです)、
EventをTouch Up Insideにして、Connectをクリックします。


入力フォームに関数を紐付けます。
f:id:we-girls:20160204185300p:plain
同じように要素の上でControllキーを押しながら、
Class ViewControllerの下にドラッグ&ドロップします。

f:id:we-girls:20160204192759p:plain
ConnectionはOutlet
Nameはtext(これは自由に設定していただいてもOKです)、
ObjectをView Controller
EventをUITextField
StorageをWeakにして、Connectをクリックします。

ボタンをクリックした時の動作を、@IBAction func tapHandler(sender: AnyObject) の中に書いていきます。
やりたい動作をググれば、だいたいサンプルのコードが見つかります。

例えば、
ポップアップを表示したい場合はこんな感じ↓

    @IBAction func tapHandler(sender: AnyObject) {
        var alert = UIAlertView()
        alert.title = "回答完了"
        alert.message = "ありがとうございました"
        alert.addButtonWithTitle("閉じる")
        alert.show()
    }


入力フォームに入力した値を書き換えたい場合はこんな感じ↓

    @IBAction func tapHandler(sender: AnyObject) {
        myTextField.text = "変更しちゃう!";
    }


完成です!!٩( 'ω' )و

さっそくデモをやってみましょう。
f:id:we-girls:20160204185321p:plain
画面右上の、再生ボタンっぽいものをクリックします。


iOS Simulaterが起動し、つくったもののdemoができます!
f:id:we-girls:20160204185331p:plain


とっても簡単・・・!
Swift勉強するときに、こうやって簡単にdemoまでできてしまうXcode、とっても便利だなと思いました