今回の記事は今から未経験でiOSアプリを開発しようという方に向けた記事になります。私自身はSwiftを扱い始めてから半年程度は経過したので未経験は抜け出せたと考えていますが、これからプログラミングをしてみようと考えている方を全力で後押ししたい為、実際にカードゲームアプリを作成する手順をIT会社っぽく行って解説していきます。
過去記事のリンクを多用していますが基本的にはかなり最新の記事になっているので参考にできると思います。では早速手順を解説していきましょう。
未経験でiOSアプリを開発する手順
全体的には下記の流れで進めていきます。（これは実際のIT会社でも同じです。）
①要件定義
アプリをどのようなものにしていくかをお客様と相談決定。ここで決まった内容をもとにアプリを制作していくので用件を洗い出し、この条件で作るという約束をする場面。その為かなり重要です。
②実際にアプリ制作
IT会社の場合はこの前に機能一覧を作成したり、画面遷移図などを作成します。今回はこの工程は省かせてもらいます。アプリ制作で今回のタイトルとしては下記を行います。
「Xcodeのインストールとアプリのプロジェクト作成」
「CollectionViewにランダムにトランプ画像を配置させる」
「CollectionViewにクリックアクションをつける」
「CollectionViewのトランプ画像を消すというアクションをつける」
「http通信でランキングなどをネット経由で表示する」
③アプリを配信する
「アプリを配信する」
「アプリに広告をつける」
ではまずは要件定義から進んでいきましょう。
どのようなアプリを作るかの決定
では早速今回紹介するアプリがどのようなものなのかを記載していきます。
簡単なトランプカードアプリで下記のようにカードをボタンを使って表示させます。表示させたカードの上下左右斜めに同じ数字のカードがあればカードを消す。という操作を繰り返し、最終的にカードが少なくなればOKというカードゲームです。
めちゃくちゃ簡素な作りですが操作一つ一つめんどくさいです。
次に必要な画像を収集しておきましょう。
トランプに関してはこちらのサイトにフリー素材が一通りありましたのでダウンロードします。
ありがとうございます。サイト主様。
では実際にアプリ制作の主な流れに進んでいきましょう。
iOSアプリ開発
Xcodeのインストールとアプリのプロジェクト作成
こちらは大量に記事があるので参考リンクを貼っておきます。
「Xcodeで Hello World」
Xcodeはかなり重たいのでインストールに非常に時間を有します。一日はかかる見込みで作業を行いましょう。
CollectionViewに画像を表示
では次にTableViewと同じくらいよく使われるCollectionViewというアプリ内に画像を表示したりマス目を表示したりするViewの使用方法とランダムに画像表示を行う方法に関してご紹介します。
まず、ColletionViewを使用する方法に関していきましょう。上記の章でプロジェクトの作成は完了していると思いますので、作成したプロジェクトにCollectionViewを配置して画像を表示させていきましょう。
まずは、UIパーツからCollectionViewを選択して、Storyboard上にドラッグします。
次に下記画像のようにCollectionViewにdelegateを設定します。delegateの詳しい説明は別記事での解説と致します。
次にこのCollectionViewをViewcontrollerに紐付けます。下記手順のようにXcode上のハンバーガーメニューボタンをクリックします。
次にAssistantをクリックすると対応するViewcontroller.swiftが開きます。
これを下記手順でoutlet接続します。
では必要な画像をAssetsにセットします。今回はテストなので画像名は「test」にしてください。下記コードと差異が出てしまいます。
あとは下記コードでCellサイズを整えた状態で画像を表示することができます。
import UIKit
class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
@IBOutlet weak var collectionview: UICollectionView!
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell",for:indexPath)
let imageview = UIImageView(frame: CGRect(x: 0, y: 0, width: image_width, height: image_width*1.3))
imageview.image = UIImage(named:"test")
cell.contentView.addSubview(imageview)
return cell
}
var screen_width:CGFloat = 0
var screen_height:CGFloat = 0
var image_width:CGFloat = 0
var image_height:CGFloat = 0
// Screenサイズに応じたセルサイズを返す
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: image_width, height: image_width*1.4)
}
override func viewDidLoad() {
super.viewDidLoad()
collectionview.delegate = self
screen_width = UIScreen.main.bounds.size.width
screen_height = UIScreen.main.bounds.size.height
image_width = (screen_width - 45)/4
image_height = image_width*1.3
// Do any additional setup after loading the view.
}
}
詳しい解説は下記参考リンクから確認ください。
buildすると下記のようになっていると思います。
では次にボタンクリックで画像を表示させる方法について解説します。
ボタンクリックでCollectionViewに画像を追加する方法
ボタンクリックで画像を追加するためには下記の手順で可能です。
「ボタンクリックでCollectionViewの画像表示を増やす方法」
こちらでボタンにより画像を追加していく手順は分かったと思います。
ではランダムに画像を増やすためにはどのようにするでしょうか？
現在の画面は下記のようにボタンをクリックするとカードがどんどん追加されるとことまでできていると思います。
まずはここまでついてこれたでしょうか？では次にクリックアクションをつけていきましょう。
CollectionViewにクリックアクションをつける
クリックアクションの設定は下記メソッドがすでに存在します。
//Cellがクリックされた時によばれます
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print("選択しました: \(indexPath.row)")
}こちらをうまく利用してトランプを一度クリックした場合と、2度目のクリックでどのカードをクリックしたかを考えていきましょう。
大まかな処理自体はできてきたのであとはトランプを消す処理のアルゴリズムを作成する必要があります。考えてみましょう。
上記がメインの処理になってきますね。では完了すれば必要なデータを管理するデータベースを作成していきましょう。
アプリ内で保持したい値をデータベースに登録
アプリを閉じても保持しておきたい値があると思います。今回の場合はトランプを消したスコアなどです。このスコアを保持するためにはSQLIteを使用することが最も簡単で一般的だと思います。
SwiftでSQLiteを使用する方法に関しては下記記事を参考にしてデータ保持方法を学んでください。
これが終わればあとは細かい修正を行なってアップルストアに配信を行います。
iOSアプリを配信
アプリ配信には有料プログラムに登録する必要があります。費用は1万円程度ですのでそこはご認識ください。
アップルストアにアプリを配信する方法に関しては非常にめんどくさく最初は難しいです。下記記事を参考に行なってみてください。
「【Swift】自作のiOSアプリをアップルストアに配信する方法ご紹介。」
これが完成すれば形はどうであれ、未経験からアプリ配信を行うことができました。長くなりましたが今回の記事は以上です。現在未経験からiOS開発ができるか不安に思っている方は是非参考にしていただければ幸いです。
また、他にもSwift関連の記事やその他言語のプログラミング関連の記事を記載しています。是非そちらも参考にしていただければ幸いです。
また、今回作成したアプリに関してはサイトのサイドメニューからかくにんできますので是非ダウンロードしてみてください。
コメント