Category Archive iOSアプリ開発

Swiftプログラミング UserDefaultを使ってみよう

今回はUserDefaultsを使ったデータの保存機能について解説をしていきます。本記事をマスターすると↓のように、クリックした回数を簡単に値受け渡しできるだけでなく、アプリを一度落としてもクリック回数を引き継いで呼び出すことができます。✌️

UserDefaultsとは

端末のローカルストレージを利用して、iOSアプリ内のデータを永続的に保存できるライブラリの一つです。アプリを停止させても保持しておきたいデータなどはUserDefaultsを使って保存することができます。

 

UserDefaultsの利用例

今回はSKSceneを用いて下の2画面を用意しました。FirstSceneの灰色部分のクリック回数をUserDefaultsを用いて保存し、ScoreSceneでも呼び出すアプリを実装していきましょう。

 

FirstSceneの処理

FirstSceneではクリック回数をカウントし、ScoreSceneに遷移するイベント時にカウント数をUserDefaultsを用いて保存してきます。

 

UserDefaultsを用いてデータ登録

touchesBganメソッドでは灰色部分のクリック回数を保持する変数scoreを、クリクされる度にインクリメントすると同時に、20~23行目でUserDefaultsを用いてローカルストレージに保存しています。

21行目では、保存する際には呼び出す際のキー値としては”score”を指定しています。

23行目では、ローカルストレージへ同期しています。同期化することによって、実際にローカルストレージへ値が保存されます。

ScoreSceneへの画面遷移

FirstSceneで画面下部のラベルをクリックするとScoreSceneへ遷移する処理も以下のように追記しておく。

ScoreSceneの処理

ScoreSceneでは、画面遷移後にローカルストレージからキー値”score”で取得できる値をラベルのテキストに表示している。また、画面中央のラベルをクリックすることで、ローカルストレージにキー値”score”で保存されている値を初期化する機能も実装する。

 

UserDefaultsを用いてデータ取得

didMoveメソッドでは、9行目でUserDefaultsを用いてローカルストレージから値を取得しています。取得する際にキー値”score”を指定する事によって、FirstSceneで保存された値を呼び出す事ができます。

呼び出した値を定数scoreに代入し、10行目でラベルの表示文字列を更新する際に利用しています。

 

保存データを初期化するボタンの実装

画面中央のラベルをクリックすると、キー値”score”で保存されているローカルストレージの値を0に更新する機能を22,23行目で実装しています。22行目のUserDefaults.standard.setメソッドはFirstSceneで利用している通りの利用方法です。

ここで、シミュレータを起動すると冒頭で挙げたようにデータの保存が可能になります。またクリックした回数の初期化もできるようになりました。

 

 

 

 

 

 

 

 

以上で、UserDefaultsを利用した永続的なデータ保存が可能となります。

付録:ソースコード

参考サイト

1.SKSceneの利用方法

Swiftプログラミング SKSceneによる画面遷移

2.swift:超初心者向け!UserDefaultsでデータ保存する!

ViewControllerも交えてUserDefaultsの解説がされてる良記事です!

 

Tags, , , , ,

Swiftプログラミング SKSceneによる画面遷移

今回はSKSceneを使った画面遷移について解説をしていきます。本記事をマスターすると↓のように、SKLabelNodeをクリックすると別のSKSceneを表示できるSwiftプログラムが作れます。✌️

SKSceneの準備

今回は画面遷移を実装するため、TitleScene.swiftとGameScene.swiftを作成します。またSKScene上に部品の追加を行う際に便利.sksファイルもそれぞれ作成しましょう。ちなみに、TitleScene.swiftとGameScene.swiftは事前に作成してあります。もし、SKSceneファイルの作成がわからなければ、SpriteKitを使ってみようの記事を参考にしてください。

.sksファイルの作成

新規ファイルとして”SpriteKit Scene”を選択してTitleScene.sksとGameScene.sksを作成しましょう。

GameScene.sksも上記画像手順と同様に作成しワークスペース上に、TitleScene.sksとGameScene.sksが作成されていることを確認しましょう。

TitleScene.sksの設定

.sksファイルが作れたら、各シーンにラベルやら背景を設定していきます。.sksファイルでは背景色を”Color Sprite”を用いて、ラベルには”Label”を用いて設定しましょう。今回は以下のように、TitleSceneの背景とラベルを設定しました。

GameScene.sksの設定

TitleScene同様に背景色とラベルを任意で追加しましょう。今回は以下のように緑色の背景と、PlayModeと表示するラベルを追加しました。

.sksファイルを用いたSKSceneの呼び出し

ViewController.swiftで表示するSKSceneを指定する際にシーン上に適用する.sksファイルを”filenamed”を用いて指定することができます。最初に表示したいい”TitleScene.sks”を今回は設定してあります。

一旦、ここでシミュレータを起動するとTitleScene.sksで設定した画面が表示されます。しかし、まだ”START”ラベルを押しても画面遷移はできません。

touchesBeganメソッドの追加

次にTitleScene.swift上で”START”ラベルが押された際にGameSceneに遷移する処理をtouchesBeganメソッドに記述していきます。

今回touchesBeganメソッドでは、タッチされた場所にnameプロパティが”start”と指定されているかの判定を最初に行なっています。判定後に真であればGameSceneに遷移します。

nameプロパティの設定

.sksファイルからnameプロパティの対象となるSKNodeを選択して右側のウィンドウにでてくるnameを変更することによって指定できます。

以上で、SKSceneによる画面遷移が可能となります。簡単なゲーム作りであれば、タイトルシーン→ゲームプレイシーン→ゲームオーバシーンがあれば可能です。ぜひみなさんも作ってみましょう。

 

付録:ソースコード

Tags, , , ,

Swiftプログラミング SpriteKitを使ってみよう

どうも、東京リーマンエンジニアのかわけんです。

今回はSpritekitを使って表示した円をタッチ操作で動かす処理の解説をしていきます。完成イメージはこんな感じです

SpriteKitとは

2Dゲーム開発用のフレームワークです。iOSアプリ開発においてゲームを作成するのであれば、必ず学んでおきたいフレームワークです。

SKViewを画面に追加しよう

SimpleViewAppでプロジェクト作成ができたら、ViewController.swiftにSpriteKitをimportしましょう。

次に、”Cocoa Touch Class”を作成しましょう。今回は”MySKView”と設定します。また、”SKView”のサブクラスとして作成します。ファイルが作成されたら、MySKView.swiftも忘れずにSpriteKitをimportしましょう。

 

Main.storyboardのViewのクラスを今作成した”MySKView”に設定しましょう。

 

これで、SKViewが画面上に追加されました。

SKSceneをSKViewに追加しよう

今度はゲームの一つ一つのシーンを構成するSKSceneをSKViewに追加していきましょう。”Cocoa Touch Class”を”MySKScene”というクラス名で作成します。また、”SKScene”のサブクラスとして作成します。

“MySKScene.swift”が作成できたら、以下の手順でソースに処理を記述しましょう。

①SpriteKitのimport

②表示するグラフィックの定数化

③didMoveメソッドにてスプライト(表示する画像)の詳細設定・表示

今回表示する画像はprojectフォルダの直下に格納しておきます。

 

画面にSKViewを表示させよう

次に以下の処理をViewController.swiftに記述して、画面上にSKViewを表示させよう。
①SpriteKitのimport

②画面上のMySKViewをアウトレット接続

③画面上のMySKView(myskvie)にmysceneの設定

この状態でシミュレーターを起動すると、画面上に画像が表示されます。まだタッチして動かすことはできません。

スプライトをタッチ操作可能にしよう

スプライトをタッチしてSKScene上で自由に動かす処理を”MySKScene.swift”に処理を記述しましょう。touchesMovedメソッドではタッチされた場所の座標を取得し、スプライトの表示位置を変更し続けてくれる処理を記載しました。

以上で、シミュレータを起動すると、冒頭のようにスプライトを自在に動かすことができます!!

UIViewよりも簡単にアニメーションが実現できるのでSKViewオススメです!!以上、今日もお疲れ様でした。コメント宜しくお願いします。

付録:ソースコード

Tags, , ,

Swiftプログラミング UIVIewを使ってみよう

どうも、東京リーマンエンジニアのかわけんです。

今回はUIViewを使った円の描写についての解説をしていきます。

UIViewとは

画面表示を管理するクラスなので、 ラベルやボタンなどの部品は全てUIViewを継承しています。

 

UIViewを画面に追加しよう

Object Libraryから”View”を選択して、画面にドラッグ&ドロップします。

 

画面へUIViewの追加ができたら、参照するclassファイル名を設定しましょう、今回は”MyView1”と設定しました。

 

次に、追加した”UIView”をViewControllerにアウトレット接続します。変数名は”myView1”としました。どこにViewがあるのかわかりやすくするために、今回はmyView1の外枠も設定しました。

 

現時点で、シミュレーターを起動するとまだ、Viewの枠しか表示されません。次にMyView1.swiftを追加して描写処理を記述していきます。

 

 

MyView1.swiftの作成

新しい”Cocoa Touch Class”を作成しましょう。

 

Class名は追加したUIVIewで設定したクラス名と一致させます、今回は”MyView1”と設定します。また、”UIView”のサブクラスとして作成します。

MyView1.swfitの作成ができたら、以下の手順で描写する処理を記述しましょう。

①コンテキストの取得
※コンテキストとは、描画処理に必要な、描画パラメータやデバイス特有の情報を保持しています。描画時に使用する色、クリッピング領域、線の幅やスタイル、フォント、画像の合成オプションなど、基本的な描画属性を定義することができます。

②円の詳細設定(色、位置、サイズなど)
今回は赤色の直径100pxの円をMyView1上の中心に設定しました。

③コンテキストの描写
描写内容が決定したら、fillPathメソッドを呼び出して描写処理を実行します。

 

以上で、円の描写が実行されます。シミュレータを起動すると赤い円が画面上に表示されるようになります。

 

付録:ソースコード

Tags, , ,

Swiftプログラミング Segueを使った画面間の値渡し

どうも、東京リーマンエンジニアのかわけんです。

今回はSegueを使った画面間の値渡しの解説をしていきます。

Segueとは

2つのView Controller間の画面遷移を実行してくれるオブジェクトです。

事前準備

まず、以下のようにボタンで画面遷移する画面構成を作成しましょう。(※Chapter1.1 UIButtonの解説 +画面遷移の解説 が参考になります。)

今回は左の画面のテキストフィールドの値を右の”TEXT1”に書き換えていきましょう。

Segueのidentifierを設定する

次に,ボタン遷移のアクションを登録する際に作成したSegueのIDを設定します。今回はidentifierに”segue1”と設定しました。

 

ViewController.swiftでSegueの処理を追加する

SegueのIDが設定したら、ViewController.swiftにprepareメソッドを追加しましょう。prepareメソッドとは、segueごとの処理を動作を定義することができます。

実行してみるとこんな感じです。遷移先の”TEXT2”が書き換えられて”TEXT1”と表示されます。

 

付録:ソースコード

受け渡しの処理の流れは以下のようになっています。
①遷移元のテキストフィールドの値を変数temp1に代入する

②変数temp1を遷移先の変数temp2に代入する

③変数temp2を遷移先のテキストフィールドの値に代入する

ViewController.swift

SecondViewController.swift

Tags, , ,

Swiftプログラミング UIButtonの解説 +画面遷移の解説

どうも、東京リーマンエンジニアのかわけんです。

Chapter1.Xでは画面に追加する部品についての解説記事となっています。前回1.0はUILabelの解説でした。

今回1.1ではUIButtonと”画面遷移”についての解説をしていきます。

早速解説していきましょう!!

UIButtonとは

画面にボタンを表示する部品です。画面遷移などのアクションのトリガとなる部品です。iOSアプリ開発で用いる基本の部品です。

 

UIButtonを画面に追加しよう

プロジェクトを開いたらObject Libraryから”Button”と表記されている部品を探しましょう。Buttonと表記されていますが、これは”UIButton”の事です。chapter1.1-1

chapter1.0同様に画面まで引っ張りドラッグして以下の様に画面にボタンを追加しましょう。chapter1.1-2

 

UIButtonを押して画面遷移しよう

まずは遷移する先の画面を作成しましょう。Object Libraryから”View Controller”を選択し元ある画面の横にドラッグしましょう。

今回は画面遷移した事をわかりやすくするために遷移元に”画面1”、遷移先に”画面2”と表示したラベルをそれぞれ追加しました。chapter1.1-3

 

Buttonを押下したときに画面2へ遷移するアクションを定義する為に、画面1のButtonを「control」キーを押しながら画面2へドラッグしましょう。chapter1.1-4

「control」キーとクリックを離すと以下のように黒いウィンドウが表示されるます。”Show”を選択すると、画面遷移のイベント定義がButtonに登録されます。chapter1.1-5↓「show」を選択すると
chapter1.1-6

以上で画面遷移の準備は完了です。シミュレータを起動してボタン押下時に画面が遷移される事を確認しましょう。chapter1.1-gif

 

以上、「Chapter1.1 UIButtonの解説 +画面遷移の解説」の解説になりました。

わからないことや、補足して欲しい点などありましたらコメント宜しくお願い致します!ではでは、chapter1.1もお疲れ様でしたー。🤙

Tags, , ,

Swiftプログラミング UILabelを使ってみよう

どうも、東京リーマンエンジニアのかわけんです。
今回は、画面の部品であるUILabelについて解説していきます。早速いきましょう。

 

UILabelとは

画面に文字を表示する部品の一つです。画面のタイトルを表示させる為などに使われます。iOSアプリ開発で用いる部品の基本です。

 

UILabeleを画面に追加しよう

まず、プロジェクト生成後に”Main.storyboard”のソースをクリックして、画面に何も表示されていない事を確認します。

xcode-uilabel-0.0

 

次に、右下のウィンドウを下にスクロールして”Label”と表記されてい部品を探しましょう。Labelと表記されていますが、これは”UILabel”の事です。

xcode-uilabel-0.1

 

Labelを見つけたら、クリックしたまま画面の方にドラッグしてみましょう。

xcode-uilabel-0.2

 

すると、画面にUILabelが追加されます。

xcode-chapter0.3

UILabelのフォントを設定しよう

画面の追加ができたら、UILabelの文字や、文字色、文字サイズの変更をしてみましょう。

画面上のラベルをクリックして、ウィンドウ右側に”Attributes inspector”を開きましょう。

xcode-chaapter1.0-4

 

”Attributes inspector”ではUILabelの設定値を変更することができます。

xcode-chapre1,0-5

 

①で表示される文字の変更

②表示される文字色の変更

③表示される、フォントや文字サイズの変更 がそれぞれできます。

設定値を変更すると、画面上のUILabelの表示も変更されます。今回は以下のように変更してみました。 他にも設定できる項目は沢山あります解説してほしい項目がありましたら、コメントなどで通知してくるれると助かります。xcode-chapre1,0-5

 

実はこれらの設定は、”Main.storyboard”上でなくても、”ViewController.swift”でも設定できます。

 

Swiftを用いてUILabelを設定しよう

まずViewController.swiftのソースが表示される事を確認しましょう。

xcode-chapre1,0-6

 

ViewController.swiftでUILabelの設定を行うには、画面上に表示されているUILabelをViewController.swiftのソース上に”control”キーを押しながらクリックして引っ張っていきましょう。

“Insert Outlet or Outlet Collection”という表示がされたら”control”キーを離してください。

xcode-chapre1,0-7

 

controlキーを離して小さいウィンドウが表示されると、”Name”を設定するように求められます。ここで指定した値は、”ViewContoller.swift”のソース上でのUILabelの変数名になります。今回はUILabel1と設定します。

xcode-chapre1,0-8

 

変数名の設定が完了したら小さいウィンドウの”Connect”を選択し、”ViewController.swift”上に設定した変数名が宣言されている事が確認できます。

xcode-chapre1,0-9

 

ちなみに、ViewController.swift上でUILabelなどの画面部品を設定できるように紐づける事を”アウトレット”接続と呼びます。

よく参考書とかでもでてきますが、余力があれば覚える程度でいいと思います。

ViewControlle.swiftに”viewDidLoad( )”という関数があるので、その関数内でUILabelの設定を行う事ができます。補足すると、アプリを起動するとViewControlle.swiftで設定した値が優先されて、画面上に表示されます。

今回は、以下のように表示される文字を”test1.0”に設定してみました。

xcode-chapre1,0-10

 

それでは、シミュレータで実行して確認してみましょう。起動後、ViewControlle.swiftで設定した値が優先されて、画面上に表示されている事が確認できます。

xcode-chapre1,0-11

以上、「chapter1.0 UILabelを使ってみよう」の解説になりました。個人的にはアウトレット接続が少しつまずきやすいのかなと思いました。

わからないことや、補足して欲しい点などありましたらコメント宜しくお願い致します!ではでは、chapter1.0もお疲れ様でしたー。🤙

 

Tags, , ,

Swiftプログラミング Xcodeの導入

どうも、東京リーマンエンジニアのかわけんです。

iOSアプリを開発⇒リリースまでの記録をブログで発信していこうと思っています。

早速ですが、今日は導入編という事で「Xcodeの導入」を解説していきます。

 

Xcodeを導入しよう

※MacBook端末専用のソフトです

AppStoreからXcodeをインストール

AppStoreを開き”Xcode”を検索してインストールしましょう。

xcode

 

 

Xcodeの起動

インストールが完了するとFinder⇒アプリケーション配下に”Xcode”が追加されている事を確認しましょう。

xcodeの起動

 

Xcodeの追加が確認できたらクリックして起動してみましょう。Xcodeが起動されると下記のようなウィンドウが開かれます。

Xcodeのウィンドウ

 

Xcodeプロジェクトを作成しよう

上記のウィンドウが開いたら、赤枠の”Create a new Xcode project”をクリックしましょう。Xcode projectとは、これから開発していくiOSアプリのソースファイルをまとめてくれるフォルダのようなものです。

クリックしたら一番簡単な”Simple View App”を選択し”Next”ボタンをクリックしましょう。

Xcodeプロジェクトの作成

 

次の画面に進むと、プロジェクト名などを入力するように求められます。

任意の値で構いません。当ブログでは、今勢いにノッている”Swift”を用いてiOSアプリ開発の解説を進めていきます。ノリに乗ってLanguageは”Swift”を選択しましょう。

Xcodeプロジェクトの作成1

 

次の画面へ進むとXcode projectをどこに保存するか聞いてきます。どこに保存したか分からなくなりそうな人は”DeskTop”に保存しておきましょう。

保存先が決まったら”Create”を押してXcode projectが作成されます。

Xcodeプロジェクトの作成2

 

ここまできたら……ボンっと下記のウィンドウが開かれ、Xcode projectの作成が完了しました。

Xcodeプロジェクトの作成3

 

今回は、”Capter0.0 Xcodeの導入”という事で

①Xcodeの導入

②Xcode projectの作成

を解説しました。アプリ開発はこれからです。開発環境が一番挫折しそうになりそうですが、ここまでくれば貴方もエンジニアの仲間入りです!!

次回は画面の作成について解説していきたいと思います。👏

ではでは〜、お疲れ様でした。また明日!

Tags, ,