シェンタの日記

swift,python,ubuntu等の記事を緩く書いていきます😜

XcodeのAutoLayoutを振り返る

こんにちは!先週からCyber-ZのOPENRECという部署でiOSエンジニアインターンを始めたシェンタです。 OPENRECではコードもちょこちょこ書きますが、UIの改善が多くて先日上司の方に UIの改善 を頼んだと言われてこれまでノリでやっていたAutoLayoutについて少し勉強しようと思いこの記事を書きました。 それでは早速めんどくさいAutoLayoutについて書いていきます。笑

AutoLayoutとは

まずAutoLayoutとは?という方もいるかもしれませんが、AutoLayoutとはXcodeの標準の機能で全端末でレイアウトを綺麗に見せる(同じレイアウトにする)制約みたいなものです。

制約の種類

AutoLayoutには制約の種類がいくつもあります。この制約を上手く付けてあげる事によっていい感じに全端末で表示させる事ができるという訳です。それでは制約の種類を見ていきましょう

Add New Constraints

f:id:ht16a017:20180316195924p:plain

  • Add New Constraints

    • 上下左右のUIパーツ間の距離の制約をつける

  • Width

    • UIパーツの幅を固定

  • Height

    • UIパーツの高さを固定

  • Equal Width (あんまり自分は使わない)

    • 複数のUIパーツの幅を固定する

  • Equal Height (あんまり自分は使わない)

    • 複数のUIパーツの高さを固定する

  • Aspect Ratio (自分はよく画像の比率とかを固定するときに使う)

    • UIパーツの縦横比を固定

Add New Aligment Constraints

f:id:ht16a017:20180316202253p:plain

  • Leading Edges (Edges系は自分はあんまり使わないけど便利そう)

    • 複数のUIパーツを左端揃えする

  • Trailing Edges

    • 複数のUIパーツを右端揃えする

  • Top Edges

    • 複数のUIパーツを上端を揃えする

  • Bottom Edges

    • 複数のUIパーツを下端を揃えする

  • Holizontal Centers(ここは複数のUIパーツを同じx軸とかy軸で見せる時とかに使ってそう)

    • 複数のUIパーツを横方向に中心揃えする

  • Vertical Centers

    • 複数UIパーツを縦方向に中心揃えする

  • Baselines

    • 複数のUIパーツのベースラインを揃える

  • Horizontal Center in Container(この辺はよく使う)

    • Viewの中心を0としてy軸の位置の制約をつける

  • Vertical Center in Container

    • Viewの中心を0としてx軸の位置の制約を使う

最後に

こんな感じでしょうか、試してみた的なのは今度時間があるときにまた記事にしようかと思います。自分で触ってみるのが一番早いので色んなパターンを試して、AutoLayoutを是非楽しんでください!!

XcodeのAutoLayoutを振り返る

こんにちは!先週からCyber-ZのOPENRECという部署でiOSエンジニアインターンを始めたシェンタです。 OPENRECではコードもちょこちょこ書きますが、UIの改善が多くて先日上司の方に UIの改善 を頼んだと言われてこれまでノリでやっていたAutoLayoutについて少し勉強しようと思いこの記事を書きました。 それでは早速めんどくさいAutoLayoutについて書いていきます。笑

AutoLayoutとは

まずAutoLayoutとは?という方もいるかもしれませんが、AutoLayoutとはXcodeの標準の機能で全端末でレイアウトを綺麗に見せる(同じレイアウトにする)制約みたいなものです。

制約の種類

AutoLayoutには制約の種類がいくつもあります。この制約を上手く付けてあげる事によっていい感じに全端末で表示させる事ができるという訳です。それでは制約の種類を見ていきましょう

f:id:ht16a017:20180316195924p:plain

- Width

UIパーツの幅を固定

- Height

### - UIパーツの高さを固定

- Aspect Ratio

### - 画像などの対比を固定

Swiftでライブラリを公開する際のメモ(PodSpecとかLICENSE)

まずLICENSEを取得する

  • LICENSEはGitHubのレポジトリを作る際にMITで取得できるのでそれで取得する
  • 取得し忘れた場合はhttps://qiita.com/shibukk/items/67ad0a5eda5a94e5c032

PodSpecファイルを設定する

ここはPodのversionによって書き方が変わるかも(ちなみに自分は1.4.0)

  • pod spec create https://githubのurl でpodSpecファイルを作成する
  • pod Specファイルはこんな感じでかく

  •     Pod::Spec.new do |s|
        s.name         = "RippleButton"
        s.version      = "1.0.0"
        s.summary      = " This Library is PopButton Animation "
        s.description  = <<-DESC
                   - Like a wave Button animation is given
                       - Animation which has never existed
                         DESC
        s.homepage     = "https://github.com/OkumuraShintarou/RippleButton"
        s.license      = { :type => "MIT", :file => "LICENSE" }
        s.author       = { "Shinta" => "flekystyley@gmail.com" }
        s.platform     = :ios, "8.0"
        s.requires_arc = true
        s.source       = { :git => "https://github.com/OkumuraShintarou/RippleButton.git", :tag => s.version }
        s.source_files = "Classes/*.swift"
        s.swift_version = "4.0"
      end
    
  • pod lib lintでValidationチェックをする

  • pod trunk push hoge.podspec で公開

RxSwiftで一定時間ごとに何らかの処理を行う

 お久しぶりです。今回はRxSwiftを用いて一定時間ごとに処理をするというコードを書いてみましたので、自分のメモ用に残しておきます。


ViewModel

import UIKit
import RxSwift
import RxCocoa
    
final class hogeViewModel {

    private let bag = DisposeBag()

    let startTimer = PublishSubject<Void>()
    let stopTimer = PublishSubject<Void>()

    let timer$: Observable<Int>

    init() {

        timer$ = Observable
            .of(
                startTimer.map { true },
                stopTimer.map { false }
            )
            .merge()
            .flatMapLatest { starts -> Observable<Int> in
                return starts ? Observable<Int>.interval(3.0, scheduler: MainScheduler.instance) : .empty()
            }
            .startWith(0)
            .share(replay: 1)

    }

    
}

ViewController

    
import UIKit
import RxSwift
import RxCocoa

final class hogeViewController: UIViewController {

    private let bag = DisposeBag()

    fileprivate private(set) var vm = hogeViewModel()

    override func viewDidLoad() {
        super.viewDidLoad()

       vm
            .timer$
            .subscribe(onNext: { [weak self] _ in
                guard let wself = self else { return }
                 // 一定時間毎にしたい処理
            })
            .disposed(by: bag)
    }


    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        vm.startTimer.onNext(())

    }

    override func viewDidDisappear(_ animated: Bool) {
        vm.stopTimer.onNext(())
    }

まとめ

特に大した事はないですがこんな感じです!
簡単に説明させてもらうと、boolを使ってtrueならObservable.interval(3.0, scheduler: MainScheduler.instance) を返して、3秒毎にイベントを発火しているという感じです。

最近はRxSwiftをゴリゴリ使って開発しているので、これからもRxSwiftについての記事を色々かけたら良いなと思っています。笑
今回の記事はちょっと適当気味ですいません。。笑
どっかのタイミングでWebApiClientかライブラリを作れたら良いな〜

MacのTerminalでgithubのブランチ名を表示させる

今回は題名の通りTerminalにブランチ名を表示します。

設定はめちゃくちゃ簡単です。それでは早速やっていきましょう!

 

① gitをInstallしていない人はInstall

brew install git

 

②  .bashrcをイジイジ

vim .bashrc

    中にこれを追加 

 source /usr/local/etc/bash_completion.d/git-prompt.sh

source /usr/local/etc/bash_completion.d/git-completion.bash

GIT_PS1_SHOWDIRTYSTATE=true

export PS1='\h\[\033[00m\]:\W\[\033[31m\]$(__git_ps1 [%s])\[\033[00m\]\$ '

 

③ 追加したものを反映

source ~/.bashrc

 以上です。

 

近況報告

フィリピンから帰って来たばかりではありますが、現在大学を休学し東京のスタートアップでiOSエンジニアのインターンをしています。1年間のインターンなのでかなり長いですが、それなりにスキルはつけてくるのでブログの記事がみなさまの所に届く時を楽しみにしています。

使っているものとしてはR.Swift,RxSwift,等を使っているので、それらに関する記事が書けたら良いなと思っております!!

それではまた次回!!

配列をSwiftyJSONでPathな話(前回のおまけ)

今回は前回に引き続きSwiftyJSONの話です。

前回はXAMPPを用いてローカルサーバーを立ち上げてSwiftyJSONでローカルサーバーにあるJSONファイルを変換してって感じでした。

 

 前回の記事

shinta1209.hatenablog.com

 

今回は実際にネットに転がっているJSONファイルを取得して表示させましょう。

 

① まず前回同様 SwiftyJSONをインストールします

 

② 全体のコード

まず全体のコードはこんな感じです。

次から一つずつ見て行きます。

(そして今回取得するJSONはこちら →)  http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830068 

import UIKit
import SwiftyJSON

class ViewController: UIViewController {
   
      let stringUrl = "http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830068"

    @IBAction func startParth(_ sender: Any) {
        
        // 取得したURLをURL型に変換
        let url = URL(string: stringUrl)
        
        // 変換したurlをリクエストするために変換
        //URLRequest型
        let request = URLRequest(url: url!)
        
        // HTTPセッションを作成
        let session = URLSession(configuration: URLSessionConfiguration.default, delegate: nil, delegateQueue: OperationQueue.main)
        
        // HTTP通信を実行する
        // sessionを使ってrequestをdataに代入する
        // dataにJSONデータが入るらしい
        let task:URLSessionDataTask = session.dataTask(with: request, completionHandler: { data, responce, error in
            
            if error != nil {
                print(error)
                return
            }
            //メインスレッドで処理
            DispatchQueue.main.async {
                
            let json = JSON(data!)
            
                print("JSONの中身をまず全て表示")
                
                print("\(json)\nJSONの中身はここまで\n")
                
                print("resultのkana1の中身を参照")
                //JSONの配列名[0]で中身を参照できる["kana1"]はresultsの中にあるvalueのキー値
                //配列が複数ある場合はjson["results"][0]とjson["results"][1]等で配列を指定できる
                print("\(json["results"][0]["kana1"])\nkana1の中身だよん\n")
                
                print("zipcode取得")
                
                print("\(json["results"][0]["zipcode"])\nzipcodeだよん")
            
            }
        })     
        task.resume()     
  }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
  }
} 

 

③ SwiftyJSONのimport

import SwiftyJSON

 

これをせずにはSwiftyJSONは使えませんから、忘れずにimportしましょう。

 

④ ターゲットのURLを格納

  let stringUrl = "http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830068"

 

⑤  ターゲットURLをURL型、URLRequest型に変換

// 取得したURLをURL型に変換
let url = URL(string: stringUrl)      
// 変換したurlをリクエストするために変換
 let request = URLRequest(url: url!)

 

⑥ HTTPセッションを作成

 // HTTPセッションを作成
        let session = URLSession(configuration: URLSessionConfiguration.default, delegate: nil, delegateQueue: OperationQueue.main)

 

⑦ HTTP通信を実行する

 // HTTP通信を実行する
 // sessionを使ってrequestをdataに代入する
 // dataにJSONデータが入る
 let task:URLSessionDataTask = session.dataTask(with: request, completionHandler: { data, responce, error in
          
//errorがあれば吐き出す if error != nil { print(error) return }

//メインスレッドで実行 DispatchQueue.main.async {
//jsonにJSON型のdataを代入する let json = JSON(data!) print("JSONの中身をまず全て表示") print("\(json)\nJSONの中身はここまで\n") print("resultのkana1の中身を参照") //JSONの配列名[0]で中身を参照できる["kana1"]はresultsの中にあるvalueのキー値 //配列が複数ある場合はjson["results"][0]とjson["results"][1]等で配列を指定できる print("\(json["results"][0]["kana1"])\nkana1の中身だよん\n") print("zipcode取得") print("\(json["results"][0]["zipcode"])\nzipcodeだよん") } }) task.resume() }

 

 こんな感じです。

 基本的には

 → URLを型変換して→ HTTPセッションを作成して → JSON解析開始

みたいな感じです。

自分もまだSwiftyJSONを触ったばかりなので、こんな書き方がいいよーとかがあれば是非コメントをください。

次はSwiftyJSON & Alamofireを使って解析して見ようと思います。

XAMPPでローカル環境作って、SwiftyJSONを使ってJSONの取得と余談。

久しぶりの投稿です。

 

今回はSwifyJSONで

 ローカルサーバー(XAMPP)を使う → ローカルにJSONファイルを置いて → SwiftyJSONでJSONを取得 → Labelに追加

を実装したので、自分用のメモ or JSON初心者の方に向けてお送りいたします。笑

 

 〜〜 余談 〜〜

現在、フィリピンのセブ島にて3週間エンジニア留学をしています。コースはSwiftでiOSアプリを作るコースです。

うちの大学は2年の後期から研究が始まるので、Swift復習がてら +α 英語も勉強するか的な感じでセブに来ています。

僕は初海外なのですが、来て最初に感じた事は海外ヤベェです。笑

とにかく日本と違いすぎてビックリしています。海も綺麗、飯もまぁ美味い、人がフレンドリー、etc......  とりあえずセブはいい所です!!

 

エンジニア留学ではみんなで話し合いながらプログラミングをしてアプリを作るのでかなり楽しいです。笑

他人のアイデアを聞いたり、あれこれ言い合いながらプログラミングがこんなに楽しいとは思いませんでした。ずっと独りでプログラミングをしていたので、新たな刺激になってやる気がかなり出て来ます。

シュノーケリングや滝にも行ったので後日、写真をUPしたいと思います!

 

エンジニア留学オススメです!!(下記リンク)

nexseed.net

 

余談が長くなってしまいました。。。   そろそろ本題に入りましょう!!

 

XAMPPでローカル環境構築

 

ここはググればすぐ出てくるので、飛ばします。

参考リンクを一応貼っておきます。

 

Windowsの方はこちら 〜

techacademy.jp

 

Macの方はこちら 〜

www.koreyome.com

 

〜〜 文字化け対策 〜〜

bistro.site

 

②  ローカルサーバーにJSONファイルを置く

 

任意のディレクトリにJSONファイルを置きます。

自分の場合はhtdocsにtest.jsonという名前で置きました。

 

f:id:ht16a017:20170909024413p:plain

 

中身はこんな感じで簡単なJSONファイルです。

 

Xcodeでプロジェクトを作成して、SwiftyJSONをインストール

 cocoapodsを利用してPodfileにSwiftyJSONを追加。

use_frameworks!

pod 'SwiftyJSON'

 

 インストールに成功したら一旦Xcodeを閉じます。

白色のプロジェクトファイルが追加されるので、それを開きます。

 

こんな感じのプロジェクトです  ↓

 

f:id:ht16a017:20170909161759p:plain

 

 

 ④ SwiftyJSONをインポート → ローカルサーバーのURLを指定して非同期処理を行う、配列の中身をindexOfで検索してJSONファイルと一致していれば、Labelに表示する。

 

みたいな流れです。

コードはGithubに載せときました。

 

github.com

 

これからもボチボチ上げていくのでよろしくお願いします。

 

おまけ

これはマクタンからバスで約4時間、モアルボアルってとこの海です。

シュノーケリングしてたらウミガメに遭遇したり、ニモがいたり.....etc

その写真やその他諸々の写真は又後日アップします!!!

f:id:ht16a017:20170909170847j:plain