Udemy:みんなのiOS講座 セクション2 メモ

  • こんばんは、小村だよ!

  • 今日はUdemyの下記講座を主に進めます

    • みんなのiOS講座 ゼロからSwiftで学ぶiPhoneアプリ開発の基礎
      • セクション2:準備
  • アプリ開発の第1歩だね!がんばろーーー!



目次

  1. 2-1: Xcodeのインストール
  2. 2-2: 最初のアプリ
  3. 2-3: 実機での動作確認



記録

2-1: Xcodeのインストール

  • AppStoreからインストールする話。

  • 導入済み!飛ばします!



2-2: 最初のアプリ

プロジェクト作成

f:id:kom314_prog:20210927220150p:plain
f:id:kom314_prog:20210927220333p:plain
f:id:kom314_prog:20210927220555p:plain
  • create new projectをクリック

  • iOSをクリック

  • インターフェースはStoryBoard

  • 名前を入力してチェックを全部外してNext

  • 保存場所を選択してCreate

  • これでシンプルなプロジェクトが作成されます!



画面の各構成

f:id:kom314_prog:20210927220753p:plain
  • 左側:ナビゲータ

  • 中央:エディタ

  • 右側:インスペクタ

    • ファイルの構成や各画面を構成するパーツの設定など
  • 下部:デバッグエリア

  • 上記はエディタ以外閉じれる



storyboardの修正

f:id:kom314_prog:20210927223247p:plain
  • ナビゲータからMain.storyboardを選択

  • インスペクタにライブラリが表示される……って言われたけど表示されてない!!


f:id:kom314_prog:20210927222009p:plain


f:id:kom314_prog:20210927222245p:plain
f:id:kom314_prog:20210927222625p:plain
f:id:kom314_prog:20210927222738p:plain
  • ラベルをぽいっ

  • インスペクタをちょちょいっ

  • ボタンもぽいっ


f:id:kom314_prog:20210927222847p:plain
f:id:kom314_prog:20210927224325p:plain
  • ViewContoroller.swiftを選択

  • @IBOと打てば自動補完が働くと言われたけどされないんだが???

  • まぁいいや。

  • @IBOutlet var myLabel: UILabel!を入力

  • これをStoryBorad上のラベルと紐づけるとmyLabelが表示されるようになるっぽい


f:id:kom314_prog:20210927224909p:plain
    @IBAction func buttonTapped(sender: UIButton) {
        myLabel.text = "Hello World!"
    }
  • を入力

  • ははーんわかってきたぞ


f:id:kom314_prog:20210927225148p:plain
f:id:kom314_prog:20210927225312p:plain
f:id:kom314_prog:20210927225552p:plain
  • ViewControllerに戻って、Bordの上のアイコンのViewControllerをクリック

  • インスペクタの一番右のConnection Inspectorをクリック

  • OutletにあるmyLabelを画面上のラベルにドラッグすると紐づく。おー!

  • Received Actions にあるbuttonTapped〜を画面のボタンにドラッグ

  • するとどのタイミングかを選択できるので、Touch up incide を選択

  • これでいったん完成


仮想シミュレータ上でデバッグ

f:id:kom314_prog:20210927230234p:plain
f:id:kom314_prog:20210927230648p:plain
f:id:kom314_prog:20210927230735p:plain
  • 画面上のほうのタイトルの右側のところクリックしてデバイスを選択

  • 私はiPhone12Proユーザなのでそちらを選択

    • iPhone13出る?出た?みたいだけど大した追加機能なさそうでよかった!
  • このUdemyの動画だとiPhone8が最新ぽい。クソ古いなこの動画。

  • タイトル左側の実行ボタンを押してデバッグ開始

  • おー!動く動く!

  • ボタン押したらちゃんとラベルも変わった!!!

  • ええやん!嬉しいね!


2-3: 実機での動作確認

f:id:kom314_prog:20210927231207p:plain
f:id:kom314_prog:20210927231331p:plain
  • Xcode - preferenceを開く

  • new accountApple IDを選択

  • 入力完了。本名ぶっぱなのでスクショ割愛


f:id:kom314_prog:20210927231702p:plain
f:id:kom314_prog:20210927231801p:plain
  • Manage Certificatesをクリック

  • +をクリックしてiOS Development

  • これがiOS作成の証明書になるみたい

  • できたらDoneして閉じる


  • おぉ有線でiPhone繋いだらシミュレータのところに出てきた!

  • ナビゲータからプロジェクト名を選択

  • signingteamから自分のAppleIdを選択

  • 左上のデバッグボタンを実行

  • iPhone側で信頼しないとできないよーと言われる

  • iPhoneより設定 - 一般 - プロファイルとデバイス

  • デベロッパAppよりAppleDevelopmentを選択して信頼

  • デバッグを再実行


f:id:kom314_prog:20210927233851p:plain
  • できた!!!!!!

  • ついでにMacからiPhoneの画面キャプチャの方法も知った!

  • Quick Time Playerを使うんだね!!!

  • やったーーー!!!達成感!!!



終わりに

  • 今日はiPhoneネイティブアプリ作成の第1歩を歩めたよ!!!

  • 言われた通りやってるだけだけど、ひとまず順調に進めてよかった!!!

  • これから私のマック人生が始まる!!!

  • 東海道のJobsと呼んでおくれ

  • ではでは続きはまた今度

  • ちゃお〜〜〜!!!



Udemy:Swift基礎

  • こんばんは、小村だよ!

  • 前回の記事で、下記2つのSwiftに関するUdemyの講座を受けることに決めました

    • iOS】SwiftUI 超入門 - Swift を基礎から学んで iOS (iPhone) アプリを開発しよう

      • 以降、SwiftUI 超入門と呼びます
    • みんなのiOS講座 ゼロからSwiftで学ぶiPhoneアプリ開発の基礎

      • 以降、みんなのiOS講座と呼びます
  • どちらの口座にもSwiftの基礎のパートがあるので、今日はそこを見ていきます!



目次

  1. playgroundを実行する
  2. SwiftUI 超入門 セクション3 メモ
  3. みんなのiOS講座 セクション4 メモ



記録

playgroundを実行する

f:id:kom314_prog:20210925145417p:plain
  • Swiftの動作を確認するときはこのplaygroundを使うのが一般的なようです

  • blankで開けば一番シンプルなソースなので、そちらを開きます


f:id:kom314_prog:20210925145631p:plain
f:id:kom314_prog:20210925145848p:plain
  • なんかエラー出てるんですけどぉ!!!原因不明て!!!

  • しょっぱなから詰まる気配がぷんぷんするぜ!!!



f:id:kom314_prog:20210925151946p:plain
  • 再起動したら直りました!!!あるあるあるある!!!

  • でかいものインストールしたら再起動が安定はWindowsMacも共通みたいです



  • では!Udemy見ながら触っていきましょう!!



SwiftUI 超入門 セクション3 みんなのiOS講座 セクション4 メモ

変数と定数

  • let: 定数

    • let a = 123
  • var: 変数

    • var b = 987


四則演算

  • 割り算 int型同士は小数点以下が出ず余を出せる
  • 小数点が混ざってると小数点以下も出る


文字列への変数の埋め込み方

  • 文字はダブルクオートで囲む

  • バックスラッシュ+()で変数を文字に変更可能

"文字\(変数名)文字列"


比較演算

  • ==

  • !=

  • &&

  • ||

  • !


guard構文

  • if文でもいけるが可読性があがる
guard variable == 10 else {
  異常処理
  return
}
正常処理


オプショナル型

  • nil:何もないを表す(Nullとかと同じ意味ぽい)

  • ラップ:オプショナル型にすること

  • アンラップ:オプショナル型から既存の型を取り出す

  • 正式な書き方

    • let 定数名: Optional<型> = 型に対応した値
  • シンタックスシュガー

    • let 定数名: 型? = 型に対応した値
  • 強制的なアンラップ

    • Nilが確実に入っていないときにつかう

    • オプショナル変数!

  • オプショナルバインディング

    • ifやguardでNilの処理を記述したうえでアンラップ
var a: Int = 123
var b: Double = 123

var c: Int?
print(c)
c = 456
c = nil

c = 5
var d: Int? = 7

//let e = c + d
let e = c! + d!


配列

  • 空の配列の書き方

    • var emptyArray = [Int]()

    • var emptyArray: [Int] = []


辞書

  • オプショナル型になるので取り出すときは最後に!をつける
var 辞書 = [
  "aaa": "あああ"
  "iii": "いいい"
]

print(辞書['iii']!)
  • 空の辞書を作る
var 空辞書 = [キーの型: 値の型]()


for in

  • 一定範囲の数字で繰り返すときの書き方
// 閉区間(1〜10出力)
for i in 1...10 {
  print(i)
}

// 半開区間(1〜9出力)
for i in 1..<10 {
  print(i)
}


関数

func 関数名(引数: 引数の型) -> 戻り値の型 {
  return 戻り値
}

print(関数名(引数名: 値))


クロージャ

  • 名前のない関数(無名関数と同等っぽい)
let 定数 = {(引数: 引数の型) -> 戻り値の型 in 戻り値}

print(クロージャが定義された定数(引数))
  • 引数なし、戻り値なしの場合の書き方
let 定数 = {処理}

定数()
let getName{(name: String) -> String in
  return name + "さん"
}

func sayName(name, closure: (name: String) -> String ) {
  print(closure(name))
}

クラス

  • インスタンスプロパティ/メソッドと型プロパティ/メソッドがある

  • 型〜〜はインスタンス化しなくてもアクセスできる

  • インスタンスと型のどちらを使用するかは場合による

  • イニシャライザは頭にfuncをつけなくて良い

  • クラスへ変数を渡すと参照渡し

static var 型プロパティ名
static func 型メソッド名() {
}
class ClassName {
  var property1: Int
  func Function1() {
    print("property1 = \(property1)")
  }

  init(property1: Int) {
    self.property1 = property1
  }
}

var instance = ClassName(property1: 1)
instance.Function1()

構造体

  • 値をまとめるもの

  • 構造体は配列にすることができる

  • 構造体は宣言時にプロパティに値を入れることが可能(クラスのinitを書く必要なし)

  • 構造体へ変数を渡すと値渡し

  • データの保持のみのときは構造体、それ以外はクラスなどと使い分ける

struct StructName {
  var property1: Int
  func Function1() {
    print("property1 = \(property1)")
  }

  init(property1: Int) {
    self.property1 = property1
  }
}

var instance = StructName(property1: 1)
instance.Function1()

var instances: [StructName] = [
    StructName(property1: 1),
    StructName(property1: 2),
    StructName(property1: 3),
    StructName(property1: 4),
]
instances[3].Function1()



プロトコル

  • 実装を保証する

  • 定義したプロパティやメソッドは必ず実装しなければならない

protocol ProtocolName {
    var letvalue: Int {get}
    var varvalue: Int {get set}
    func method()
}

struct StructName: ProtocolName {
    let letvalue = 1
    var varvalue = 2
    func method(){
        print("letvalue:\(letvalue), varvalue:\(varvalue)")
    }
}

var instance = StructName()
instance.method()

do-catch

  • エラーをキャッチ

  • エラーを吐くかもしれない関数はthrowをつける

  • エラーを吐くかもしれない関数を使うときはtryをつける

import Foundation
var Flg = false

func method() throws {
    if Flg {
        print("OK")
    } else {
       throw NSError()
    }
}

func getData() {
    do {
        try method()
        print("AllOK")
    } catch {
        print("Error")
    }
}

getData()


継承

  • クラスのみで構造体には使えない。へーーー
class クラス名: 継承元クラス名{
}


as

  • 型変換をできる

  • アップキャスト、ダウンキャストがある

  • ダウンキャストは失敗することがある

  • as!は絶対失敗しないときのダウンキャストとして使う

  • as?は失敗するときにnilが変える


列挙型

  • Switchなどをつかうとき便利。条件分岐が綺麗に纏まる
enum Signal {
  case Blue
  case Yellow
  case Red
}

var sig: Signal
sig = Signal.Blue
sig = .Blue

switch sig{
case .Blue:
  print("Go")
case .Yellow:
  print("Coution")
default:
 print("stop")
}


参照渡しと値渡し

  • 数字や文字は値渡し

  • 構造体は値渡し

  • クラスは参照渡し


デリゲート

  • 理解できなかったので後回しにする……

  • 正直説明が不足していると思う。なんとなくふわっとわかったけど言語化は無理


終わりに

  • 一通り基礎構文については理解できたんじゃないかな

  • デリゲートはちょっと実践で使ってからまた戻ってきます

  • それ以外で知らなかった概念はオプショナル型くらいかな

  • これは何回もエラー出しながら覚えていくことになりそうです

  • 次から本格的にアプリ作成に着手できるな!!!

  • ではでは今回はこの辺で、ちゃお〜〜〜!



Udemy:iOSアプリを学ぶための講座選択とXCodeインストール

  • こんばんは、小村だよ!

  • 今回からiOSアプリの勉強をしていきたいと思います!

  • 使う言語はSwiftで、勉強につかう教材はUdemyと決めています

  • 今日はUdemyの講座選択と環境構築と最初のちょっとが聞ければいいかな!



目次

  1. Udemy講座選択
  2. Xcodeインストール



記録

Udemy講座選択

  • まずはUdemyのなかでSwiftを検索し、最初の方を聞いていきます

  • 評価数が高く、比較的新しいものは下記の3件


iOS】SwiftUI 超入門 - Swift を基礎から学んで iOS (iPhone) アプリを開発しよう

  • 印象として、いまいち面白くはなさそう

  • 2020年11月あたりに収録している

  • UIの作成はSwiftUIを使用している


みんなのiOS講座 ゼロからSwiftで学ぶiPhoneアプリ開発の基礎

  • 機械学習系で何回か試聴しているAzumaさんが講師

  • 知りたいなーと思っているところを結構的確に解説してくれる印象

  • UIの作成はStoryBoardを使用している


【6日で速習】iOS 13アプリ開発入門決定版 20個のアプリを作って学ぼう(Xcode 11, Swift 5対応中)

  • カメラを使うアプリの講習があって、それが気になってる

  • UIはStoryBoard



選択する


  • 参考記事を読んで察したことは、

    • SwiftUIだとできないことが出てくる
    • SwiftUIを使ってもUIKit(StoryBoard)の知識はしばらく必要
  • うーん、受ける講義、1つ目(SwiftUI)か2つ目(StoryBoard)で悩む!

  • どうしようかなーーーー


  • 決めた。2つともやろ。1つめと2つ目のUdemy受けることにします!

  • 最初の環境構築とかSwift基礎の講座を両方並行して受けて、

  • アプリ作成の段になったら、StoryBoard→SwiftUIの順で学んでいきます!



Xcodeインストール

  • では早速AppStoreからXcodeをインストール

  • 12.4ギガくらいあるみたいでインストールにめちゃんこ時間かかりました

  • インストールして規約に同意して開きました

  • よーしパパHelloWorld作っちゃうぞ〜!

f:id:kom314_prog:20210925103447p:plain
f:id:kom314_prog:20210925111747p:plain


f:id:kom314_prog:20210925143426p:plain
f:id:kom314_prog:20210925144008p:plain
  • と思ったらこれだよ!!!

  • ふんふんつまりどういうことだってばよ?


f:id:kom314_prog:20210925144534p:plain
  • 感で動かしながらひとまずHelloWorlds完了!

  • 設定周りは次回以降に回します!!!



終わりに

  • ひとまず今回はここまで!

  • 次回の記事から実際のUdemyを見ながらメモしていきたいと思います!

  • ではでは、ちゃお〜〜〜!



調査:AdobeXDを使って困ったこと

  • こんばんは、小村だよ!

  • このたびAdobeXDでプロトタイプを初めて作りまして

  • 使いこなせなかった点があったので、今度のために調べていきたいと思います!

  • よろしくね!



目次

  1. 困ったこと1
  2. 回答1
  3. 困ったこと2
  4. 回答2



記録

困ったこと1

f:id:kom314_prog:20210923160040p:plain
f:id:kom314_prog:20210923160058p:plain
  • iOSのUIキットを主に使って画面イメージ作ってたですが

  • 図のようにボタンとかを貼り付けてサイズ調整しようとすると大きくならないの!


f:id:kom314_prog:20210923160116p:plain
  • 貼り付けた後コンポーネントのリンクを解除することで動くようになったけど

  • ほんとはもっといい方法あったのではなかろうかねぇ



回答1



困ったこと2

f:id:kom314_prog:20210923165121p:plainf:id:kom314_prog:20210923165121p:plain
  • UIKint内のこの図があるとすごくイメージわきやすいので使ってたんだけど

  • これを一番上のレイヤーに置いておくと下のシェイプとかがさわれなくて不便!!



回答2

f:id:kom314_prog:20210923170627p:plain
  • まずレイヤーをロックをすると動かさなくすることができるみたい

  • この状態でドラッグすると、下のものを選択することが可能

  • ただ下のものを選択しても、そのままドラッグしても動かせないみたい

  • 移動したい場合は矢印キーで動かすことができる


  • うーんなるほどなー、正直微妙

  • 完全に無として扱えないみたいなので、素直に非表示がよさそう



  1. 終わりに

  2. ひとまず気になることを調べてみたけど、うまい解決がなさそう

  3. 他にも、動画の挿しこみができなさそうだとか

  4. プレビュー中に文字を打つようなことはできなさそうとか

  5. 今の時点でもめちゃくそ便利なんだけど、痒いところに手が届かないとこあるなー

  6. 今後のアップデート待ちだね!がんばれAdobe

  7. ではではひとまず今日はこのへんで!ちゃお〜〜〜!



日記:AdobeXDを使用したプロトタイプ作成

  • こんばんは!こむらだよ!

  • 今日は技術記録はなくて作業記録だよ

  • というのもこの3連休で、プロトタイプを作成する必要あってね

  • 時間とれなくて日記かけませんでした☆

  • というわけで3連休終わってこの日記書いてます。無事終わったよ!

f:id:kom314_prog:20210923180451p:plain
  • 雰囲気だけ!こんな感じ!

  • 初めて本格的にAdobeXDをつかって1つのプロトタイプを作っただけあって、結構色々こまった!

  • 次の記事に困ったところまとめようかな

  • ではでは今回の日記はこのへんで!ちゃお〜〜〜!

環境構築:MacBook Pro 作業ツールインストール(開発系以外)

  • こんばんは、小村だよ!

  • 今日は初めてmacでブログ記事を更新しています!

  • 実際書いてみると日本語と英語の切り替えのストレスがやばい!!!

  • 大体はキーボードの設定とかで違和感を解消できてたんだけどなー

  • 「半角/全角」のボタンがないのがかなり響いてます。

  • どうやら全角入力でも、半角に変換した後のスペースは半角になるみたい

  • これを駆使すれば英数とかな入力の切り替えは極力減らせそうかな!

  • 今後の開発は基本的にMacになる予定なので早く慣れたいね!



目次

  1. インストールするものを整理
  2. Zoom
  3. Discode
  4. AdobeXD
  5. Slack



記録

はじめに

  • 今回のMacの設定は、できるだけ環境を汚さないことを目標にしてます

  • 外部アプリは必要最低限だけにし、基本はデフォルトのものを使う!

  • そうすれば業務などで別のMacを使うときにも応用が効くからねー

  • まずは、開発以外で使用する必要最小限のものをインストールします!



インストールするものを整理

  • Zoom

    • 会社での業務も全てMacでこなしていきたいので
  • Discode

  • Slack

    • 会社での連絡用
  • AdobeXD

    • 記事まで書いたAdobeXDです。
    • 直近作成する予定のiOSアプリのプロトタイプを作るために必要



Zoom

- - 参考:Zoom 公式

f:id:kom314_prog:20210919001053p:plain
  • MacのM1チップのことをAppleシリコンチップって言うんですね

  • ぶじ対応してくれているので、それをDLします!ありがたや


f:id:kom314_prog:20210919001304p:plain
  • 流れに乗ってインストール完了

  • Mac用のアカウントを作成して無事完了!

  • バリバリ本名アカウントなので写真少なめですね!



Discode

f:id:kom314_prog:20210919003900p:plain
f:id:kom314_prog:20210919004212p:plain
  • 調べましたがM1用とかの記述が全然ありませんでした

  • ひとまずインストールしようとしたけど、Rosetta2が必要みたい

  • すぐに対応するだろうとM1版を待つかなやみますね

  • うーん……Discodeをメインで使うのはWindowsだしなぁ

  • Iphoneもあるし今はいいや!M1版が出るのを待ってみます!



AdobeXD

f:id:kom314_prog:20210919011324p:plain
  • 参考:Adobe XD - 革新的デザインツール

  • 検索するかぎりM1チップに対応してますが、インストールしようとするとRosetta2を要求されます

  • なんでだろう?インストーラーが使うのかな?

  • AdobeXDは明日にでも使うので、Rosetta2をインストールしちゃいます

  • そうしてXDをインストールを進めます


f:id:kom314_prog:20210919012402p:plain
f:id:kom314_prog:20210919012534p:plain
f:id:kom314_prog:20210919013118p:plain
  • ログインしてインストールを実施

  • 正常に完了し、問題なく使えることが確認できました!

  • これで明日は問題なさそうだ!



Slack

f:id:kom314_prog:20210919020036p:plain
  • あ、AppStoreにある!!!

  • HPからDLして使おうとしてました。あぶねーあぶねー!

  • こちらをインストールしたところ問題なく使うことができました。びば!



終わりに

  • Discode以外は問題なくM1に対応してそうでよかったです!

  • たった4つ(実際は3つ)インストールしただけなのですが、超疲れました……

  • 不便と感じたら都度ショートカット検索でめちゃめちゃ時間かかります!

  • この作業の果てに快適な人生が待っていると信じたいぜ……

  • 開発に直接関わるもののインストールは次に回しますね

  • 待ってろXcode

  • ではでは、ちゃお〜〜〜!



環境構築:MacBook Pro 購入時の初期設定

  • こんばんは、小村だよ!
f:id:kom314_prog:20210911145222p:plain
  • デデン!

  • MacBookPro買っちゃいました!!!17万円!!!高い!!!

  • いや!MacBookProが17万だぞ!?安くないか!?

  • いやいや!17万あればPS5だってVRゴーグルだって買えるぞ!?

  • いやいやいや!でも他のMacBookProは20万超えだぞ!?

  • いやいやいやいや!

  • はい、混乱してます。

  • どれくらい使いこなせるかで安いか高いか変わってくるよね!

  • 使いこなして元とっていくぞー!



目次

  1. 最初の設定
  2. システム環境設定
  3. 覚えておきたいショートカット



記録

最初の設定

  • 参考:Mac初期設定は難しくない!M1チップ搭載のMacbook Pro 13の初期セットアップ!

  • 私バカなので

  • 仕事が始まる5分前くらいに届いたMacを初めて開いたのですが

  • 急に初期設定始まったよね!

  • 焦って全部スキップするよね!

  • めちゃ後悔!!!

  • というわけで改めて参考動画見ながら飛ばした初期設定をしました

  • 再設定はしたのは下記

    • Apple IDとの連動
    • Touch IDの登録
      • 右人差し指 右親指 左人差し指
    • Siriの登録
    • ユーザ情報にアイコンを登録
  • 基本的にすべて見たまま進めれば簡単に設定できたよ!



システム環境設定

  • 「システム環境設定」を片っ端に開いて必要そうなところ設定しました

    • インターネットアカウント

      • メインで利用しているGoogleアカウントを登録
    • Apple Payにクレジットカード登録 -Dカードを登録しようとしたところ電話認証が必要でdocomoに連絡!

      • 問題なく答えて認証できた。心の準備してなかったから焦りました
    • ファイやウォール

      • OFF⇒ON
      • なぜデフォルトオフなの???と調べた結果、あまり必要ないみたい?
      • ただ私はネカフェとか行って公共WIFI使ったりして怖いので、念のためONに。
    • バイス名の変更

      • デフォルトがフルネームMacBook Pro とクソダサいので
    • キーボードのキー位置設定

      • 参考:MacキーボードのWindowsキー
      • さすがにここはWindowsに寄らせてもらいます……
      • capslockキーをcommandキーに変更
        • capslockしたいときはショートカットキーを使う



いくつかの参考サイトを確認



覚えておきたいショートカット

  • fnキー + tabキー:

    • Caps Lockを有効にする
      • メモ帳で試したけど有効にならない!ただないならないでいいかも
  • fnキー長押し:

    • マジックパッドにFキー表示
  • fnキー+BackSpace:

    • Deleteキー
  • command + shift + control + 3, 4:



必要な外部機器の購入



おわりに

  • ひとまず外部ツールを使用しない環境設定は一通りできたかな!

  • 書いた以外に、細かな部分(マウスの早さとか)も変えてたりするけど割愛!

  • そのほか重要な変更点があったら追記する予定

  • ひとまずこれで基本的な設定は終わりにします!

  • 外部ツールのインストールなどは次の記事にまとめます!

  • ではでは、ちゃお~~~!