100日後にアプリエンジニアになるウサギ【4日目】
おつかれさまです！Ninomaeです
今日はPokemon GOのイベントを楽しみにしていたのに盛大に寝坊してしまいました、、、(笑)
これも全部妖怪のせいだ！(ではなくて、多分低気圧のせいです&少し古い)
ポケモンのイベントにはあまりコミットできなかった分、アプリ開発の勉強にはフルコミットしてきました！というわけで、いつもどおり今日取り組んだコンテンツと気付きについて紹介します。お付き合いどうぞよろしくお願いします！
今日やったこと
参考書: Develop in Swift Fundamentals
■ UIの作り方とユーザーインタラクションの方法について
- iOSアプリでのメジャーなUI要素とアクションの取り扱い方
- よく使われているViewとControlについて
- View(データを表示するUI要素)の種類とその使い方
- Control(ユーザーのアクションを受け付けるUI要素)の種類と使い方
- 様々な画面サイズのiOSデバイスに対応したUIの作り方
UIってなんだっけ?
UIは"ユーザーインターフェイス"の略で、簡単にいうと私たちが使っているアプリの画面のことです。
私たちが普段何気なく使っているアプリの画面はUI要素の組み合わせでできています。例えば時計アプリでは以下のような画面になっています。
少し汚いのですが、シンプルなアプリでもこれだけのUI要素(ViewやControl)を組み合わせて作られていることがわかりますね。
じゃあUI要素ってなに？
UI要素は画面を構成している、パーツたちのことです。大きく分けて、ViewとContorlという区別ができます。
Viewはテキストや画像などのデータを表示するもので、Controlはユーザーがアクションをシステムに伝えることのできるUI要素です。代表的なものでは、「編集」や「+」などのボタン、明るさや音量を調節するときに使っているスライダー、アラームのON・OFFなどを切り替えることできるSwitch、文字を入力することのできる、TextFieldなどが存在します。
アプリ開発では、これらのUI要素をうまーく組み合わせて1つの画面を作っていきます。
UI要素の作り方と使い方
Xcodeにはインターフェイスビルダーという、画面を作る機能が備わっています。パワーポイントで資料を作る時のように、UI要素を画面においてサイズなどを視覚的に作成することができます。
画面にUI要素を配置したあとは、プログラムとUI要素を紐付けるために、Outlet(アウトレット)やAction(アクション)というものを作ります。
上の写真はLabel(テキスト情報を表示するUI要素)をOutletを作成し、プログラムと紐付けている画像です。これをすることによって、Labelとプログラムがひも付き、表示されているテキストの内容や色、サイズ、フォントなどをプログラムから変更することができます。
上の画像はSwitchとプログラムの間でActionを作成して紐付けている画像です。Actionを作成することで、Swichが操作されたときに特定の処理を実行することができます。例えば、アラーム機能では、SwitchがONになっているときは、アラームが設定されていて、SwitchをOFFにするとアラームが解除されているといった感じですね。(よくONにし忘れて寝坊するのは内緒....)
やったことの感想と気づき
自分たちが普段使っているアプリがどうやって作られているのか、また自分がアプリを作るとしたらどうやったらいいのかについて基本的な知識を付けることができたのではないかと思います。
LINEやTwitterのようなSNSも時計やメモといったシンプルなアプリでも基本的には、ここで紹介したようなViewやControlといったUI要素を組み合わせて画面を作っています。あとは、ViewやControlとプログラムを紐付けて、ユーザーが使う機能を実現するだけですね。(簡単に言ってるけどガチで難しい)
少しずつですが、アプリ開発の基本的な知識も自分の中に溜まってきて、自作アプリ開発も意外といけるんじゃないかと思い始めてます笑
終わりに
明日はいよいよガイドプロジェクトに取り組みます。
ガイドプロジェクトでは、ここまでつけてきた知識をもとに、単語の推測ゲーム(アプリ)を作ります！いよいよアプリ開発っぽくなってきて、ワクワクしますね！！！
今日も長い時間お付き合いくださりありがとうございました！また明日からも頑張っていきますので、応援のほどよろしくお願いします！
みなさんからのいいね！やフォローなども励みになりますので、よかったらお願いします(^^)
雨が続いて気温の変化も激しくなってますが、風邪など体調にお気をつけてお過ごしください！では、また✋