Swift de 脳トレアプリ 序章

Blog Single

Swiftをやり始めてまだまだ数ヶ月程度な私ですが、
Swiftに関する情報を調べているとバージョンがどれも古く、最新技術を探すのに非常に苦労しました…
というわけで、Swift初心者の私目線ではありますが、
Swift4でなにかアプリを作っていこう!というシリーズを何章かに渡ってご紹介しようと思います!

そもそもSwiftとは?という方はまずこちらをご覧になってからこの続きへお進みください。

序章 目次

  • アプリざっくり概要
  • プロジェクト作成
  • 画面を表示させる

(今回は概要と事前準備だけの序章となってしまいますが、次回からはSwiftを書いていく予定です。)

アプリざっくり概要

まず一体なんのアプリを作成するか、というところですが、
記事のタイトルにもなっています通り、脳トレアプリを作っていきます!
なぜ脳トレアプリを作ろうと思ったか?
それはですね、、、

最近物忘れが激しくなり歳を感じてきたからです←え

現在考えているもので最低限必須で作りたい(作ろうという想定の)ものは以下の3つです。

  • タイトル画面などの、アプリに通常備わっている画面作成
  • タップだけでできる記憶力ゲーム
  • 解答を手書き入力できる計算ゲーム

非常にオーソドックスではあるのですが、
通常のアプリに備わっているタイトル画面や設定などの機能は作成していこうと思います。
また、脳トレゲームとしては記憶力ゲームと計算ゲームを作成したいなと考えています。
Swiftの書き方が同じものばかりでは面白くないので、タップと入力、という操作法の違うものがいいかなと!
(あくまで作成予定、ではありますが。。)

その他にもSwift技術で使いたいものがあれば、それを取り入れたミニゲームを随時増やしていこうかなと考えています!

※ このアプリで本当に脳トレになるかどうかは保証できません←え

プロジェクト作成

以下の開発環境下でプロジェクトを進めていきます。

  • MacOS High Sierra 10.13.2
  • Swift 4.1.2
  • Xcode 9.4.1

実機での動作確認はiPhoneXを用いて行う予定です!

ちなみにOSごとの開発環境は以下を参考にしてみてください。
Xcode / iOS SDK / macOS 等の対応表 – Qiita

以上の環境でXcodeのプロジェクトを作成します。
基本的なプロジェクト作成方法は下記を参考にしてみてください。
Xcodeの使い方, iOSアプリ作成準備をする

またディレクトリ構成は色々パターンがありますが、今回は下記を基にファイルを作成していきます。
Clean-Swift/CleanStore: A sample iOS app built using the Clean Swift architecture. Clean Swift is Uncle Bob’s Clean Architecture applied to iOS and Mac projects. CleanStore demonstrates Clean Swift by implementing the create order use case described by in Uncle Bob’s talks.

画面を表示させる

Xcodeで作成していくにあたり、画面が実際どう表示されるか開発環境で確認する際にXcodeのシュミレータを使用していきます。

今回は画面に表示ができるかの確認をして終わりたいと思います。
先ほどプロジェクトを作成した状態では、画面に何も表示させるものがないので、
試しに文字を配置してみます。
Xcodeのstoryboardから配置してもいいのですが、せっかくなのでViewController.swiftにコードを直接書きましょう。

class ViewController: UIViewController
{
    override func viewDidLoad()
    {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let label = UILabel()
        label.text = "Swift DE 脳トレアプリ"
        label.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
        label.textAlignment = .center
        view.addSubview(label)
    }
}

画面の中央にしたいので、UILabelのサイズと位置を決めるframeを設定します。
上のコードではUILabelをおくViewのサイズと同じサイズにして、textAlignmentで文字を中央.centerに設定しました。

それではシュミレータを起動してみましょう。

最後に

今回は序章ということで、アプリの概要や下準備ほどで終わってしまいましたが、
次回からはコードを書いて画面作成をしていこうと思います!
もしお時間があればお付き合いくださいませ。

今後、Swift de 脳トレアプリシリーズはGitHubに公開していきますので、宜しくお願いします!

次章予告

  • タイトル画面を作っていこう

参考

Posted by Mao Miyaji
千葉にある夢の国を愛して止まない、元「魚のお姉さん」のエンジニア。PHP, TypeScriptメインで、暇さえあれば色々な言語を一かじり。

Other Posts: