Contentfulチュートリアルメモ

正月で適度に時間があるので、前々から気になっていた https://app.contentful.com を試す

Contentful

いわゆるheadless CMSらしいということだけ知った上でチュートリアルに取り掛かる

※2019/01/01時点の内容です

チュートリアルメモ

事前準備

  • アカウント作成
    • 今回はgoogle認証から作成
  • npm i -g contentful
    • contentfulコマンドが実行できるようにしておく

1️⃣Sign in to a new or existing account

? Open a browser window now? -> Yes

ブラウザが立ち上がり、tokenが発行されるのでコピー

Paste your token here: -> 貼り付ける

2️⃣Create a Space to hold your content

? Create your new Space now? Yes

? Do you want to confirm the space creation? Yes

Gatsby Starter Blog というspaceができた

3️⃣Create your Content model and first Entries

? Populate the Content model to your Space now? Yes

推奨構成でモデルができる。

4️⃣Set up a Gatsby Starter Blog to display your content

We’ll now download the latest version of the Gatsby Starter Blog source to your machine. Just select a directory name, a destination, and we can continue. ということなので、適当な場所を選択するとDLされる

5️⃣Run the website in development mode on your machine

yesとやったらローカルで動くけど別にいまやらなくても良い気がする。

"scripts": {
    "dev": "gatsby develop",
    "build": "gatsby build",
    "heroku-postbuild": "gatsby build",
    "serve": "gatsby serve"
  }

ということなので、npm run dev とすれば起動できる。gatsby.jsですね。使ったこと無いや。

起動してしまった場合はCtrl-Cで終了すると次へ進む

Congratulations! The guide is now completed.

この時点で https://app.contentful.com/spaces/xxxxxxxx/entries. に移動するとサンプル記事が追加されており、適当に編集したあとローカルで見ると変更されていることが確認できる。

f:id:assaulter:20190101184829p:plain
適当に見出しを書き換えた

まとめ

チュートリアルを試しただけで、app.contentful.com側に

  • 個人のスペース
  • 管理画面
  • 記事を返すAPI

が作られた。gatsby側にgraphqlという文字列が見えるので、graphqlなAPIの口があるのでしょう。

次のアクション

チュートリアルだとNetlifyを使ってgatsbyなプロジェクトをdeployしましょうとあるのですが、一旦gatsbyとnetlifyなどのホスティングサービスについて調べてみることにします。

iOSアプリ設計パターンを読んでいる

 

PEAKS本買いすぎやろっていう...

peaks.cc

 

MVC, MVP, MVVM, Flux, Redux, Clean Architecture, Application Cooridinator, Routerが紹介されています。

現在RxSwift, RxCocoaを使ったMVVMにApplication Coordinatorを合わせた感じでアプリを書いていることもあり、そこらへんを重点的に読んでいて、細かい実装方法の違いとかが読んでて面白いです。

 

実はReduxちゃんとやったことないのですが、ちょうど丁寧なサンプルが収録されているので、写経してみましょうかねぇ。

試用期間が終わった話

今の会社の入社日が9/1なので、ちょうど3ヶ月たちました。

無事に試用期間を終えることができました。

転職した経緯など

どこから僕の情報が漏れてるのか分からないんですけど、定期的にやってくるエージェントからの会いませんかというお誘いに、気が向いたら会うということをやっていて、その話にのった感じです。

どういう見せ方をしたのか分かりませんが、多分Wantedlyの経歴は見せた気がするので

  • フロントエンド領域
  • iOS(前々職。ちょうどSwift出る前くらいでぶっちゃけあんま覚えてない
  • Rails

みたいな感じで話を持っていったのかなと思います。

で、なんかよくわからないまま一回現場の人に会って雑談をした後、速攻でオファー面談ということで社長に会い、その場で契約書にサインを迫ってくるという怪しさ満点の会社だったのですが、決めた理由としては

  • 年収 +100万円(とはいえ前職はストックオプションを持っていた。コレどう計算すべきなんですかね?
  • iOSの新規案件(Swift出た頃に遊んで以来だけど良いのかな?

というところですかね。

正直もっと貰ってる知り合いはそこそこいるので安い方かなとは思うのですが、ようやく生活に余裕が出るくらいにはなりました。お金大事。

バイト

有給が20日くらいあったので、一ヶ月くらいニートできるぞ!!!!と思っていたのですが、なんかバイトで良いから来てほしいということであんまり休みが取れませんでした。。。趣味がバイクなのでバイク旅したかったんですけど。。。

というわけで、大学生以来多分10年ぶり?のバイトをしました。 あんまり時給高くなかったと思います。フルで働いて前職と同じ位だったかな。

このときのお金はバイクとキャンプギアに消えました。

現在のお仕事領域

iOS書いてます。諸事情によりバイト中にRails見たりもしてましたが、今はiOSフルコミットです。

ロジックが基本Rails側にあるので、あんまり難しくないです。ですが、ぶっちゃけiOSほとんど覚えてなかったので転職する前に色々書いて思い出してました。

iOSくん

SPAでiOSっぽく作るなんてお題あると思うんですけど、圧倒的に楽。iOSが用意した部品の中で作るのであれば圧倒的に楽。 なんかもうCSSとか書く気がなくなってしまったかもしれない...

ビルドは遅い。マジで遅い。生産性やばくないですかレベルで遅い。

あと、RxSwift/RxCocoa + MVVM + Coodableパターン みたいな感じで作ってるんですが、RxSwift/RxCocoaはオーバースペック感がすごいですね。わかってれば実行スレッドの切り替えとか超便利なんですけど、新人くんとかはRxの勉強に引っ張られがちで、いやCocoaやろうよという感じになるのでどうなんですかね?

メンバーを見る的なお仕事

オッサンになってしまったので肩書にシニアというプレフィックスが付きました。

あんまり書くとアレなのですが、一緒に仕事しやすいかどうかというのは結構重要なファクターだというのがよくわかりました。

マネジメントされる側 / ちょっとだけ人を見る側ということでこういう本を読んだりしてました。

転職してどうなの?

30前後の普通にエンジニアやってましたという人は活躍できると思います。 詳しく知りたい人は飯でも食いながらお話しましょう。

多分こういうこと書かないほうが良いんですけど、あんまり長居はしないかなという直感が働いています。働きやすさは前職のほうが倍くらい良いw

直近お仕事外のお遊び

Flutterのチュートリアルを消化したりしてました。ReactやってるとiOSやっててもめっちゃコンポーネント分けたくなるので僕はこっちのほうが自然にかけるなぁという印象です。Dartセミコロン以外は概ね普通ですし。

これとAWS AppSyncあたりの有象無象を組み合わせて、簡単なアプリを作りたいと思ってるのですがネタが思いつかないので、とりあえずログインできるToDoアプリでもやりますかねと考えています。

あとやる気ない時用にN高のコンテンツを消化したりしています。

もっとやる気ないときはVTuberの動画を見ています。例の名取さなが一位になった投票ランキングに出てるのは8割がた知ってたのでそこそこ知ってる方だと思います。

以上〜

【iOS】リンク先に遷移可能なチェックボックスを作ってみる

完成品

f:id:assaulter:20181108224732g:plain

Webだと稀にある、テキストまでクリック対象のチェックボックスかつ、リンクだけ別のアクション(別ページを開くとか)をiOSで実装してみた。

作って思ったけど、普通にチェックボックスだけタップ可で良い気がするわ...

ロジック

samwize.com

こちらにあるように、UILabelの特定の文字が押された判定はできる。 また、UIButtonのラベルはUILabelなので、この論理で実装できる。

作り方

Xcode: 10.1

UITapGestureRecognizerを拡張

元ネタだとちょっと古いので変更する

extension UITapGestureRecognizer {

    func didTapAttributedTextInLabel(label: UILabel, inRange targetRange: NSRange) -> Bool {
        // Create instances of NSLayoutManager, NSTextContainer and NSTextStorage
        let layoutManager = NSLayoutManager()
        let textContainer = NSTextContainer(size: CGSize.zero)
        let textStorage = NSTextStorage(attributedString: label.attributedText!)

        // Configure layoutManager and textStorage
        layoutManager.addTextContainer(textContainer)
        textStorage.addLayoutManager(layoutManager)

        // Configure textContainer
        textContainer.lineFragmentPadding = 0.0
        textContainer.lineBreakMode = label.lineBreakMode
        textContainer.maximumNumberOfLines = label.numberOfLines
        let labelSize = label.bounds.size
        textContainer.size = labelSize

        // Find the tapped character location and compare it to the specified range
        let locationOfTouchInLabel = self.location(in: label)
        let textBoundingBox = layoutManager.usedRect(for: textContainer)

        let textContainerOffset = CGPoint(x: (labelSize.width - textBoundingBox.size.width) * 0.5 - textBoundingBox.origin.x, y: (labelSize.height - textBoundingBox.size.height) * 0.5 - textBoundingBox.origin.y)
        let locationOfTouchInTextContainer = CGPoint(x: locationOfTouchInLabel.x - textContainerOffset.x, y:                                               locationOfTouchInLabel.y - textContainerOffset.y);
        let indexOfCharacter = layoutManager.characterIndex(for: locationOfTouchInTextContainer, in: textContainer, fractionOfDistanceBetweenInsertionPoints: nil)

        return NSLocationInRange(indexOfCharacter, targetRange)
    }
}

UIButtonにイベント等を設定

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var button: UIButton!
    private var clickableRange: NSRange!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        setUpButton()
    }

    @objc func onClickButton(_ button: UIButton) {
        button.isSelected = !button.isSelected
    }

    @objc func tapGesture(_ gestureRecognizer: UITapGestureRecognizer) {
        if gestureRecognizer.didTapAttributedTextInLabel(label: button.titleLabel!, inRange: clickableRange) {
            // 便器上アラートを表示している
            showAlert()
        } else {
            onClickButton(button)
        }
    }

    private func setUpButton() {
        // create attributed string
        let str = "利用規約を読みなんたからんたら"
        clickableRange = NSString(string: str).range(of: "利用規約")
        let attr = NSMutableAttributedString(
            string: str,
            attributes: [
                .font: UIFont(name: "HiraginoSans-W3", size: 16)!,
                .foregroundColor: UIColor.black
            ]
        )
        attr.addAttribute(.foregroundColor, value: UIColor.green, range: clickableRange)

        // set attributed string
        button.setAttributedTitle(attr, for: .normal)

        // add checkbox images
        button.setImage(UIImage.init(named: "off"), for: .normal)
        button.setImage(UIImage.init(named: "on"), for: .selected)
        button.titleEdgeInsets.left = 6

        button.addTarget(self, action: #selector(onClickButton(_:)), for: .touchUpInside)

        // create gesture
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(tapGesture(_:)))
        button.titleLabel?.addGestureRecognizer(tapGesture)
        button.titleLabel?.isUserInteractionEnabled = true
    }

    private func showAlert() {
        let alert = UIAlertController(title: "リンクを", message: "開く", preferredStyle: .alert)
        let cancel = UIAlertAction(title: "閉じる", style: .cancel)
        alert.addAction(cancel)
        self.present(alert, animated: true)
    }
}

 

iOSで、起動時に2番目のViewを表示する

あんまり見たことないですが、起動時に2番目のViewを表示しておき、firstViewに戻れるやつをメモしておく。

動作gif

f:id:assaulter:20181104104015g:plain

ソース

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.

        self.window = UIWindow(frame: UIScreen.main.bounds)
        // create fist view controller.
        let firstViewController = FirstViewController.instantiate()
        // create second view controller.
        let secondViewController = SecondViewController.instantiate()
        let navigationController = UINavigationController(rootViewController: secondViewController)
        // 0番目にfirstViewControllerを設定する
        navigationController.viewControllers.insert(firstViewController, at: 0)

        self.window?.rootViewController = navigationController
        self.window?.makeKeyAndVisible()
        return true
    }

instantiateはUIStoryboardからinstantiateViewControllerしているヘルパーメソッドです。

SBI つみたてNISA 買い付け金額変更メモ

これはなに

つみたてNISAをSBI証券で運用しているのですが、設定が非常に分かりづらいのでメモしておく。

つみたてNISAについては、それっぽいブロガーの人の記事を読んだほうが早いので割愛。 (リーマンショックから10年なので、そろそろ耐える時期に来るかな...?

設定条件

  • 毎日買い付け
  • 銀行から自動引き落とし

毎日買い付けの設定金額変更

f:id:assaulter:20181103122922p:plain

取引 > 投資信託 > 投信(積立買付)の順に潜っていく

ページ中程に、つみたてNISA-設定画面というリンクが出てくるので押す

次のページはそれっぽい感じになっているので、未来の自分が見ても操作可能だと思うので割愛。

銀行からの自動引落金額変更

f:id:assaulter:20181103123756p:plain

口座管理 > お客さま情報 設定・変更 > お取引関連・口座情報 の順に潜っていく

ページ中程に銀行引き落としサービスという項目があり、その中に確認・変更のリンクがあるので押す

ここで数字入れる必要あるかなと思ったんですが、勝手に数字が変更されてました。

注意点

11/3時点で引き落とし日が12/14になってたので、前もって余計にお金を移しておく必要がありそうです...