Monthly Archive 8月 2018

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, ,

かわけんの1分プロフィール

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

今回は、私のプロフィールを記事にまとめてみました。ではでは〜👇

生誕 東京都江戸川区で生まれる

平成6年

セミの泣き止まない熱帯夜に、ボクは生まれました。

出身は東京都江戸川区という治安が良いのか悪いのかよく分からない町に生まれました。

小さい頃から「誰よりも目立ちたい!!」と心の中で思っている人見知りでした。笑

 

小、中学生 野球とサッカーに80%の気持ちで取り組む

兄の真似をしていたので小学校低学年から野球を習い始めました。

その後、日韓W杯に感化され小学校高学年から中学卒業するまでサッカー少年となりました。⚽️

しかし、監督が厳しく野球とサッカーがスポーツとして楽しめなくなってしまいどちらも80%ぐらいの気持ちで取り組んでいました。

 

高校生〜大学1年 陸上にどっぷりハマる

心肺能力テストでズバ抜けた肺活量に自信があったので高校からは陸上部に所属しました。

800mを専門に高校2年生頃から都大会に出るも48人中24位という結果に。(笑)

大学は数学と物理が得意であったので私立一本に絞り、法政大学情報科学部に入学しました。変わった人がとても多い楽しい学部でした。

大学に入ってからも工体連という理系の学生による陸上部に所属していました。

 

大学1年の冬 突然の退部?!

20歳を迎える年に、「思い出作りではなく本気で陸上と向き合ってみたい」

と陸上部の先輩に相談し突然の退部宣言をしました。

(今、思えば「意識高い系」で痛いやつだなぁと反省)

しかし、退部後も試合に出るも、モチベーションが上がらない。

結局、自分はワイワイ楽しく応援したり、応援されたりする陸上が好きだったんだと気付きました。

同時に、本気で陸上と向き合いたいと思っていた事を「簡単に諦める自分の心」に気づき自信が持てなくなりました。

 

大学2年~4年 自信喪失男に点いた青い炎

自分は好きだった陸上を諦めてしまう人間なんだと思うと、何もやる気が出ない大学2年生だったボクは

「情報科学部に入ったんだから、プログラミングは出来るようになるか。」とサクッと立ち直る。(笑)

サクッと立ち直ってからは、バイトがない日は毎日21時まで図書館にこもりプログラミングの勉強をしていました。

そして、社会人になる 〜東京リーマンエンジニアの始まり〜

大学卒業後は、都内某IT企業にサラリーマンとして勤めています。

2018/8/15時点では2年目のまだまだ新米SEです。

今後は、自分の経験を情報発信していき誰かの人生の役に立ちたいと思いブログを始めました。

スマートフォンアプリ開発を独学で勉強中です。インプットしたものはすぐに備忘録として記事にまとめて、自分が見てわかるのはもちろん、他の人が見てもわかるように記事を挙げていこうと思っています!!

みなさんコメント等宜しくお願いします!!

Tags, , , , ,