プログラミングBlog

プログラミング学習用

ちょいちょい書いてます

SwiftUITutorial Building Lists and Navigation①

SwiftUITutorialで学んだことをまとめていきます。

Create a Landmark Model

Section1で学べること

  • Jsonファイル読み込み
  • 読み込んだJsonファイルをStructに詰め込む

struct

構造体のことで以下の特徴がある

  • 継承できない
  • クラスは参照型で構造体は値型

Hashable

hashについてはこちら
tokuty.hatenablog.com

Codable

API通信等で取得したJsonやプロパティリストを任意のデータ型に変換するプロトコル
これがないとJsonからStructのデータ変換が上手くいかない。

CLLocationCoordinate2D

位置情報を扱うときの型
coodinate.latitude:緯度 double型
coodinate.longitude:経度 double型

ファイルまでのパスを取得

    guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
    else {
        fatalError("Couldn't find \(filename) in main bundle.")
    }

ファイル内容を取得

    do {
        data = try Data(contentsOf: file)
    } catch {
        fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
    }

Jsonデータをデコード

    do {
        let decoder = JSONDecoder()
        return try decoder.decode(T.self, from: data)
    } catch {
        fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
    }

作成したファイル

Landmark.swift

import Foundation
import SwiftUI
import CoreLocation

struct Landmark: Hashable, Codable {
    var id: Int
    var name: String
    var park: String
    var state: String
    var description: String

    private var imageName: String
    var image: Image {
        Image(imageName)
    }

    private var coordinates: Coordinates
    var locationCoordinate: CLLocationCoordinate2D {
        CLLocationCoordinate2D(
            latitude: coordinates.latitude,
            longitude: coordinates.longitude)
    }

    struct Coordinates: Hashable, Codable {
        var latitude: Double
        var longitude: Double
    }
}

ModelData.swift

import Foundation

var landmarks: [Landmark] = load("landmarkData.json")

func load<T: Decodable>(_ filename: String) -> T {
    let data: Data

    guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
    else {
        fatalError("Couldn't find \(filename) in main bundle.")
    }

    do {
        data = try Data(contentsOf: file)
    } catch {
        fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
    }

    do {
        let decoder = JSONDecoder()
        return try decoder.decode(T.self, from: data)
    } catch {
        fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
    }
}

勉強会㉑

勉強会

今週はLT会お休みで普通のもくもく会してました。

Pythonの実行環境を揃える

Anaconda install

Pythonディストリビューション
www.anaconda.com

PyCharm install

IDE www.jetbrains.com

やったこと

Pythonのパッケージ管理システムでライブラリをinstall
pyautogui ・・・キャプチャを撮ったり、マウス操作ができるライブラリ

pipコマンド

pip install pyautogui

キャプチャの撮り方

import pyautogui

screenshot = pyautogui.screenshot()
screenshot.save('キャプチャ.png')

キャプチャ画像読み込み

from PIL import Image

img = Image.open('スクリーンショット.png')
img.show()

1秒間停止

import time

time.sleep(1)

完成したコード

import pyautogui
import time
from PIL import Image

num = 0
sc = pyautogui.screenshot()

while True:
    if num == 10:
        break
    print(num)
    sc.save(f'スクリーンショット{num}.png')
    img = Image.open(f'スクリーンショット{num}.png')
    img.show()
    num += 1
    time.sleep(1)

print('finish')

4月の振り返り。

今月からKPTはやめて普通に振り返ろうかと思います。

最近の出来事

  • 6月から次の案件(Javaの予定
  • 学習効率アップ
  • FE試験が6月
  • Swiftを学び始めた
  • 宣言駆動開発を始める

学習効率アップの仕方

学習の効率化を進めていきたいので学習の見直しを図りたいと思います。 直近の課題は、学習時間が長いわりに結果が出ていない気がするので、学習方法の見直しをすること。 そこで効率の良い学習方法について調べてみると、驚きの事実が発覚しました。


プログラミングの勉強する時によく「一つの言語をしっかり学んでから次に行きなさい」というアドバイスが多いですが、 自分の場合はずっと続けていると飽きしまったり、興味があることがたくさんあるので、 ずっと好きなことを同時並行で学習し続けていました。 (アンチパターン 笑


実はこのやり方はインターリービングという勉強方法で同じ勉強を何時間もずっと続けるのではなく、 別の勉強も並行して進めていくことで学習効率アップに繋がる勉強方法でした。結果的にちゃんとしたやり方のようなので今後も続けて行きたいと思います。

スケジュールを決めて行動していく。

集中型学習ではなく分散型学習を進めていく。よくある一夜漬けの丸暗記はせずに時間を決めてみっちり学習を行い、集中して取り組むことで短時間でも結果を出す学習スタイルを確立したい。
特に資格をとるためだけの一夜漬けに近い形の勉強法は意味がないと思うので長くゆっくり時間をかけて学習していきたい。
そのためにはスタートとゴールを明確にして一日ごとのタスクを細分化していくことが重要である。

宣言駆動開発

毎週土曜日の朝、前日までにテーマを決めてLTをするようにしています。
意外とこれが良質なアウトプットになっているので今後も続けていく。
得られる事は資料作り、説明力、自ら考える能力などたくさんあります。
ノージャンルで行っているため、新たな発見もあり、宣言駆動開発おススメです。

SwiftUIアプリをiPhoneにinstall

SwiftUIアプリをiPhoneにinstallした際のまとめ。

やることリスト。

  1. XcodeApple IDでログイン
  2. 証明書とキーチェーン作成
  3. iPhone端末へのinstall

installまでの参考サイト

tech-blog.rakus.co.jp

キーチェーン作成後、buildしてinstallするまで少し詰まったので以下にまとめました。

iPhone端末へのInstall

赤線の部分をinstall先のiPhone端末に変更する
f:id:Tokuty:20210503225249p:plain

もし表示されない場合はiPhone端末の許可設定を行いましょう。
それでもできない場合は接触が悪い可能性があるのでUSBの確認をしましょう。
f:id:Tokuty:20210503225703p:plain

Test.xcodeprojを選択する。 f:id:Tokuty:20210503230639p:plain  

Teamを選択する。
f:id:Tokuty:20210503231140p:plain

Build実行後にiPhone端末の許可設定を行う。
f:id:Tokuty:20210503231353p:plain

設定 ⇨ 一般 ⇨ デバイス管理  installの許可をしましょう。

無事iPhone端末にinstall完了。

参考サイト

SwiftUIプロジェクト作成方法
【Xcode】超初心者のためのSwiftUIチュートリアル1|やこ|note

勉強会⑳

Hands-on and Lightning Talks

開催日時 2021年5月3日(月) 7:00-9:00
本日の発表者は私と、koboriさんとNakagawaさんの3人!

発表者 テーマ 資料 時間
Nakagawa Gitで難儀してる話 5分
Toku BootStrapのGridLayout 発表用資料 20分
Kobori BootStrapダウンロードして使うやり方(2つの方法)とカスタマイズについて 45分

各テーマの感想

Gitで難儀してる話

gitのワークフローを使わずに開発を始めた結果、失敗した話。
mainブランチのみで開発を行っているため、main→派生ブランチ→派生ブランチのような開発フローで行ったが、 何をしているかわからなくなった。
結局mainに反映する際にcherrypickで必要なコミットのみpushした話。

BootStrapのGridLayout

GridLayoutを使うと簡単にレスポンシブ対応した、レイアウトを作成できる。
基本的に横幅を12分割するので、5分割などしたい場合は、独自のcssを定義する必要がある。

BootStrapダウンロードして使うやり方(2つの方法)とカスタマイズについて

前回はCDNから読み込んだが、今回はcss、jsファイルを直接サイトからDLして読み込む方法。
DLしたファイルを改造してオリジナルのcss、jsを作成する。
Scssも対応しているため、やり方の簡単な紹介。

BootStrapのGridLayout

GridLayoutとは??

  • Grid・・・格子状のもの、方眼紙。
  • Layout・・・何をどこに配置するかの割り付けのこと。
  • GridLayoutは格子状のものに、例えばボタンやデザインを配置することを言います。

今回使用したBootStrapのGridLayoutのクラス説明

名前 説明
container Gridコンテナを作成。横幅が固定となるため、余白が生まれる。
container-fluid Gridコンテナを作成。横幅が可変となるため余白なし。
row
col
col-offset-1 1Grid分のスペースを空ける。

Bootstrap、GridLayoutのレスポンシブ対応

ブラウザ、タブレットスマホなどの画面の大きさごとにレスポンシブ対応がされるようになっています。
ブレークポイント(画面のサイズ)ごとのcontainerとcontainer-fluidの違い。
fluidの場合はwidth100%が指定されるため余白なしで流動的に変化していきます。
getbootstrap.jp

Bootstrap、GridLayoutの特徴

  • 基本は横幅を12分割。
  • レスポンシブ対応

ハンズオン

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
    <!-- 固定幅 -->
    <div class="container">
        <div class="row">
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
        </div>
    </div>
    <!-- 可変幅 -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
        </div>
    </div>
    <!-- 2分割分のスペース。 -->
    <div class="container">
        <div class="row">
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 offset-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
        </div>
    </div>
    <!-- 2分割を12分割 -->
    <div class="container">
        <div class="row">
            <div class="col-2 bg-success">
                <div class="row">
                    <div class="col-2 bg-success">layout2</div>
                    <div class="col-2 bg-danger">layout2</div>
                    <div class="col-2 bg-success">layout2</div>
                    <div class="col-2 bg-danger">layout2</div>
                    <div class="col-2 bg-success">layout2</div>
                    <div class="col-2 bg-danger">layout2</div>
                </div>
            </div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
        </div>
    </div>
</body>

</html>

一番最後は応用で、2分割した列をさらに12分割しています。
Gridの分割数によっては独自のCssを定義してあげないと実装できない場合もある。

参考サイト

Layout saruwakakun.com GridLayout ferret-plus.com

勉強会⑲

Hands-on and Lightning Talks

開催日時 2021年5月1日(土) 7:00-9:00
本日の発表者は私と、koboriさんとNakagawaさんの3人!

発表者 テーマ 資料 時間
Nakagawa seed.rbの話 5分
Toku Node.jsでhttpメソッド② PUTとDELETE 発表用資料 25分
Kobori 一緒にフロント画面をスタイリングしてみましょう! 1時間

各テーマの感想

Railsのseedの話

DBへのデータ投入時に使用できる。
Rubyを使ったスクリプトファイルに書ける。

Node.jsでhttpメソッド② PUTとDELETE

XMLHttpRequestを使用。
HTTPメソッドのPUTとDELETEを検証ツールで確認。

一緒にフロント画面をスタイリングしてみましょう!

Boostrap DL
getbootstrap.jp
CDNで読み込んだ後、スタイリングのハンズオン。
ドキュメントが充実している。
フォーム、ボタン、ドロップダウンも簡単に作れる。