目次
iPhoneのアプリ開発をやってみよう！
こんにちわー！
今回は僕自身初めてやるんですが、iPhone用のアプリ開発をやってみようと思います！
とはいっても、初めてなので、めちゃくちゃ簡単なやつを作ってみようと思います！
こんな感じです。
まぁ、普通にしょぼいですｗ
ボタン押すと奇数偶数と押した回数を表示できるだけ。
けど、とりあえず基本的な流れを理解するために作ってみました！
必要なもの
さて、まずみなさんにお伝えしたいのが必要なものです。
Androidのアプリならば特に無しと言えるのですが...
実はiphoneのアプリを作るためにはAppleのPCが必要になります。
おそらくこの記事をみにきている方はすでに持っている方が多いと思いますが...
最近のはそれなりに性能が高いので、もしもまだお持ちでない方がいたら、ちょっと古めの中古品等で安く済ませても開発には困らないかなと。
デスクトップの方が性能は高いですが、ノートブック（macbook air , macbook pro等)でも全然大丈夫です！
ちなみに、今回僕が使うのは"MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)"です。
次に、アプリ開発に使う開発環境を用意する必要があります。
Xcodeと呼ばれる開発環境ですが、AppStoreにて探せば出てくるので、インストールをしてください。
地味に容量が大きいので、時間かかります...大体8GBなので、10GB程度の空き容量を作った上でやるといいと思います。
ここまで来れば準備はOKです！
実際に公開して、AppStoreで配信をしたい場合はAppleのdeveloper登録等が必要になってきますが、今回は公開はしないので、不要です。
では、Xcodeを起動して早速作っていきましょう！
作ってみる！
それでは作っていきます！
では、インストールしたXcodeを起動しましょう。
LaunchPadからXcodeを検索してクリックすれば開けます。
Xcodeを開くんですが、特に画面は出てきません...
最初僕もあれ？バグ？とか思ったんですが...どうやら正常らしい。
上部のバーの部分にXcodeと開かれていればちゃんと開けています。
では、XcodeのFile->New->Projectを選択しましょう。
すると、以下のような画面が出てきます。
これはおそらくですが、テンプレート的なやつですね。
予め共通するものをなんとなーく実装してくれてるテンプレートごとにプロジェクトを作成する感じかなと。
ケーキを作る時もスポンジ部分を作ってから外側にチョコクリームやら生クリームやら塗りますよね。
そのスポンジがこれです。ええ。
土台部分は全く同じものを使うけど、そこからちょっとだけ作り込んでいい感じに違う味のケーキを楽しめる！
で、今回はSingleViewを使います。
一番基本的そうだし、一画面だけで十分なので。
選択して"next"を押すと、こんな画面が出てきます。
プロジェクトの基本情報を設定する画面ですね。
プロジェクトっていうのは1アプリに対して1つ存在し、そのアプリに関連するプログラムや素材なんかを置いておくフォルダと思ってもらえれば大丈夫かなと思います。
ProductNameは自分の好きなものに。
今回は練習なので、Practiceでやっていますが、成果物からすると、"odd/even counter"とかでもいいかもしれないですね。
試してないですが、多分日本語でも多分大丈夫なのかな...？
個人開発なので、Teamはnoneにしてます。（デフォルトで自分のPC名になってると思うので、 変える必要はないですが。一人チームってやつですね。)
そして、一箇所だけ気をつけて欲しいのが、Userinterfaceです。
ここ、デフォルトだとStoryboardになっていないので、変えてから作成してください。
実はここが違うと作り方がだいぶん違ってくるので...orz(筆者気づかずにあれ？できないな〜って迷走してました...w
Storyboardは古くからあるもので、SwfitUIというものが割と最近出た新しいUIで、開発手法が大きく変わってくるようです。
今回はStoryboardを使用して作ってみます。
作成をすると、保存先を聞かれるので、適当なフォルダで作成しちゃいましょう。
こんな感じになればOKです！
プロジェクトが完成しました。
プログラムを書く！
さて、それでは次に、プログラムを書いていきましょう！
左のファイル欄から、Main.storyboardを開きます。
すると、こんなiphoneの画面のようなものが開きます。
この時点でMain.storyboardが存在しない場合はプロジェクト作成時にSwiftUIで作成してしまっている可能性が高いです。
その場合は、再度"storyboard"で作り直してみてください。(ちなみに僕はここでめっちゃ時間食いました)
さて、このstoryboardでは部品をぺたぺた貼っていきます！
例えば、文字を入れるテキストボックスだったり、ボタンだったりをドラック&ドロップで貼り付けるんです！
では、画面を開いた状態で、"Command + Shift + L" を押しましょう。
Commandは高速道路のインターチェンジみたいなマーク、Shiftは⬆︎マークのやつで、Lは英字のLのキーです。
Commandキーを押したままShiftもおして、二つのキーを押したままLを押せばOKです。
うまくおせたら以下のような画面が出てきます。
まずはLabelを追加します。
Labelは簡単にいうと文字を表示できるやつです。
Labelをダブルクリックすると、こんなものが追加されました。
場所はIphoneの画面の中央上辺りに適当に配置します。
次に、Switchも配置します。
再度command + Shift + Lを。
labelと同じくこのSwitchも追加します。
配置もさっきのラベルのした辺りに。
土台ができてきましたね！
では、次にiphoneの画面が写ってる箇所の右上辺りの+ボタンを押します。
右上にあるこれです。
すると、同じ画面が複製されるはずです。
二つに分割された画面が表示されています。
複製できたら、そのまま左の"ViewController.swift"を開きます。
開くとこんな感じになります。
storyboardのiphoneの画面が消えている状態になっている場合は、灰色の画面部分をクリックして、スクロールするとみつけることができるはずです。
ここまでできたら、次はスイッチを切り替えると文字が変わるようにしてみます。
Label、ボタンを右クリックしながら右のコードの部分へドラッグ&ドロップしてみます。
その際、名前をつけてあげる必要があります。
今回はそのまま"Label, Switch"とつけていますが、複雑なアプリなどでは数も増えるので、役割などがあるならその名前をつけてあげると良さそうですね。
最終的に、以下のようになりました。
@IBOutlet weak var Label: UILabel!
@IBAction func Switch(_ sender: Any) {
Label.text = "hoge"
}ただし、ただ全く同じようにうつせばいいだけではなく、動画のように画面上でstoryboardの部品をコピペしてあげる必要があります。
つまり、このプログラムではこの部品を"Label"って名前でつかうよ〜みたいな設定も必要ってことですね。
ただ上記のプログラムをコピペしただけではLabelっていう関連づけなんてないよ〜？って怒られてしまいます。
なので、動画のように部品をコピペして作成するようにしましょう。
また、部品を移し終えた後、少しだけプログラムを書いています。
Label.text = "hoge"これですね。
スイッチの方に書いているのですが、これは、スイッチがクリックされたら、Labelのテキストにhogeを代入する。
という処理です。
つまり、スイッチをクリック（実際はタップ)すると、hogeになるはずです。
それでは、ここで一旦確認してみましょう！
左上にある再生ボタン（右向きの三角形)を押すと、シミュレーターが動きます。
僕の場合はデフォルトで最新のiphone11 Pro Maxになっていました。
本格的に開発するならどの端末のシミュレーションをするかしっかり考えたほうがいいですが、今回はこのままでいきます。
変わりましたね！
ここまでくればあとちょっとです！
スイッチの押された回数を数える
次はスイッチの押された回数を表示できるようにしましょう！
先にコードをお見せしておきます。
追加した部分、修正した部分にはコメントを入れています。
class ViewController: UIViewController {
var count:Int = 0 // ここを追加 - ①
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBOutlet weak var Label: UILabel!
@IBAction func Switch(_ sender: Any) {
Label.text = "\(count)" // ここを修正 - ②
count += 1 // ここを追加 - ③
}
}一つづついきます。
まず、先ほど作ったSwitchにて、数を数えるための入れ物が必要です。
それを作っているのが①のコメントの箇所です。
countという名前の変数を作成し、0を入れています。
次に、Switchがクリックされたら値を表示してあげる必要があります。
それを行なっているのが②の箇所です。
countは変数で、Int型なので、string型のtextにそのままわたすことができません。
なので、""で囲い、\()を使ってint型の変数をString型として渡しています。
そして最後に入れ物の数値を1加算（count = count + 1と同じです)しています。
実行してみると...?
いい感じですね！
では微修正しましょう。
最初、Labelと表示されていて、一回クリックをしたら0が表示されます。
そうではなく、最初っから0がひょうじされ、一回クリックをしたら1になるようにしてみます。
微修正をする！
まずはラベルの初期表示を変えましょう。
Storyboard(iphoneの画面のやつ)の部品からラベルを選択します。
画面の一番右にある欄から、下矢印に棒が刺さってるやつを選択します。
そして、すぐしたに出てくるTextの下段を修正すると...?
Storyboardの方も変わります。
つまり、ここでラベルの初期値を設定できるわけです。
今回は"ゼロだよ〜"は消して、"0"にしておきました。
次にプログラムです。
Switchの中の一部分だけ修正します。
先ほど作ったテキストの表示②と数値の加算③を上下逆に入れ替えるだけです。
count += 1
Label.text = "\(count)"先に数値の加算をやってしまうわけですね。
こうすることで、一回クリックしたら１加算されて表示されるはずです。
お手元でも是非確認してみてくださいね！
では最後に奇数偶数で表示を分けてあげましょう！
奇数と偶数で表示文字を分ける
さて、最後です。
Switchメソッドの中身だけいじっていきます！
今回は以下のようにしてみました。
@IBAction func Switch(_ sender: Any) {
count += 1
if(count%2 == 0){
Label.text = "偶数! 回数\(count)"
} else {
Label.text = "奇数! 回数\(count)"
}
}最初の最初の行は先ほども言った通り、値を加算しています。
そして、その加算した値が偶数かどうかを判定しているのがif文ですね。
ここで、"加算した値(count)を2で割って、あまりが0" ( = 二で割り切れるので、偶数)なら、偶数と回数を表示、そうでないなら奇数なので、奇数と回数を表示するようにしています。
では動かしてみましょう！
おっと、なんか表示が...
これは元々のLabelのサイズが小さすぎて、初期値"0"に合わせてその表示領域が決まっているので入りきらない分が切り取られています。
Storyboardにて、labelの部品の横幅を広げましょう。
では再度シミュレーターで確認してみます！
できました！
完成です！
まぁ、ちょっと表示位置の修正やらなんやらはしたほうがいいかもですが、とりあえず目的の挙動はできたのでよしとします。
まとめ
さて、今回はじめてswiftを触ったんですが、ボタン配置とコードの紐付けとか、だいぶん楽ですね！
昔Unityをチラッと触った時には結構苦しんだ記憶があるので...(今はそうでもないのかもだけど)
直感的で理解しやすいUIで開発ができるので、ちょっと楽しいです...!
今回はとても簡単な内容でまさに初心者向けのカウンター作成程度でしたが、また暇があればちょっといじってみたいなぁと思います！
それでわ！
