読者です 読者をやめる 読者になる 読者になる

Cloudflare で DNS 登録したリクエストのIPアドレスがカンマ区切りになる

heroku + Rails5でアプリケーションを開発し、リクエストを受ける前段に Cloudflare を利用している。
Cloudflare は DNS, Crypto で SSL, CDN の設定を利用している。

しかし、 Cloudflare を使い始めたからか IPアドレスが validation エラーになってしまった。

デバッグして中身を見ていると、IP アドレスが以下のようになっていた。(前半の IP は書き換えてる)

p ip_address = request.env['HTTP_X_FORWARDED_FOR'] || request.remote_ip
# => "100.10.10.150, 103.22.200.116"

カンマの前半が実際のユーザの IP アドレスで、後半が Cloudflare の IP アドレスっぽい。
103.22.200.116 - Japan - Cloudflare - IP address location and data

ユーザの IP アドレスを取得したかったら ip_address.split(",")[0] でいけると思うけど、だいぶ不安だ...。

特定の UITableViewCell だけ separator の線消したい

tableView で この cell だけ separator 消したいよ〜 という時の方法。

ググると、全ての tableView の separator 消して追加したいやつだけ追加するコード書こうとか、全部の tableView の線を消す方法とか出るけど、特定の cell だけ separator 消す というのをしたい。

やり方

import UIKit

class HogeTableViewCell: UITableViewCell {
    static let height: CGFloat = 88

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
    }

    convenience init(_ separatorInsetLeft: CGFloat) {
        self.init(style: .default, reuseIdentifier: nil)
        separatorInset = UIEdgeInsets(top: 0, left: separatorInsetLeft, bottom: 0, right: 0)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

separatorInset の left を画面右端にすると、線が見えなくなる。

使い方

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        return FooterTableViewCell(view.bounds.width)
    }

これでいける、register nib している場合は init じゃダメだと思うので cell.separatorInset = ... で書けばいけると思う。

RxSwift をやる前にちゃんと Observer パターンを学ぶ

RxSwift やるぞ!と思ったはいいものの、ちゃんと Observer パターンを学んだことがなかったので Swift でゼロから書いてみる。

Observer パターン

観察者が何かを監視していて、その監視対象に更新があった際に観察者に通知が届く仕組み。

Subject が監視対象で、 Observer が観察者。
RxSwift でも PublishSubject とか出てくるし、 Observable とかも Subject に該当するのかな? (まだ RxSwift を理解できてない)

実際に書いてみる

Observer パターン - デザインパターン入門 - IT専科 を参考に Swift にしていく。

1. Observer protocol

観察者のインターフェースの protocol を作る。
id は後述するが、 Observer を削除するときに必要になる key みたいなもの。

protocol Observer {
    var id: String { get }

    // Subject からの通知が届く
    func update(_ string: String)
}

extension Observer {
    func update(_ string: String) {
        print("\(type(of: self)) に届いた新しい値は \(string) です。")
    }
}

2. Subject protocol

observers が mutating なため、 class を継承している。

protocol Subject: class {
    // 観察者リスト
    var observers: [Observer] { get set }

    // 観察者を追加する
    func add(_ observer: Observer)

    // 観察者を削除する
    func remove(_ observer: Observer)

    // 観察者に更新を通知する
    func notify(newString: String)
}

extension Subject {
    func add(_ observer: Observer) {
        observers.append(observer)
    }

    func remove(_ observer: Observer) {
        for (index, registerdObserver) in observers.enumerated() {
            // observer.id が登録済みだった場合削除する
            if registerdObserver.id == observer.id {
                self.observers.remove(at: index)
            }
        }
    }

    func notify(newString: String){
        print("新しい値 \(newString) を observer に通知します。")
        observers.forEach { observer in
            observer.update(newString)
        }
    }
}

3. 具象クラス

Observer は id を UUID で作成して重複しないようにしている。

final class SubjectA: Subject {
    var observers: [Observer] = []
}

final class ObserverA: Observer {
    var id = UUID().uuidString
}

final class ObserverB: Observer {
    var id = UUID().uuidString
}

(本当はシステム的に UUID を id にするようにしたほうがよさそうだけどサボる)

4. 実際に動かす

observerA と observerB が subjectA を監視する。
途中で observerB が監視をやめる。

let subjectA = SubjectA()
let observerA = ObserverA()
let observerB = ObserverB()

subjectA.add(observerA)
subjectA.add(observerB)

subjectA.notify(newString: "New!")
// -> 新しい値 New! を observer に通知します。
// -> ObserverA に届いた新しい値は New! です。
// -> ObserverB に届いた新しい値は New! です。

subjectA.remove(observerB)
subjectA.notify(newString: "New!!!!!!!!!!!!!!!")
// -> 新しい値 New!!!!!!!!!!!!!!! を observer に通知します。
// -> ObserverA に届いた新しい値は New!!!!!!!!!!!!!!! です。

想定通りの動作になった。

全コード

Gist - Swift observer pattern.

感想

実際に書いてみて、 Subject や Observer などの関係性などが理解できてよかった。

とはいえ Observer パターンはそんなに難しくないしゼロから書くほど価値はあまりないしちょっと時間の無駄だった感ある、KVO でやればこんな書かなくて良いしな!!!!!!!

Google Analytics と Firebase を同時に使うとき、 1 つの GoogleService-Info.plist で管理する

GoogleService-Info.plist

何も考えずに Google Analytics と Firebase をアプリに導入しようとすると、それぞれ別で Project を作成して、GoogleService-Info.plist も 2 つ生まれてしまう。
2 つあったとしても読み込む plist はそれぞれ設定できるので問題ないといえばないが、管理などがややこしくなる。

それを 1 つで管理する方法があるので、その方が便利。

ここでは、 iOS アプリに GA と Firebase を組み込んでいきます。

Google Project の作成

iOS アプリにアナリティクスを追加する  |  iOS 向けアナリティクス  |  Google Developers

この手順の「設定ファイルを取得する」項に 設定ファイルを取得 ボタンがあるので押す。

f:id:star__hoshi:20170109093051p:plain

そうすると、 「Create or choose an app」 画面が開く。

Create or choose an app

アプリ名、 bundle id など入れていく。
入れたら Choose and configure services を押す。

f:id:star__hoshi:20170109093202p:plain

Choose and configure services

Analytics を選択し、 Property を作成にして ENABLE ANALYTICS SERVICE を押す。

f:id:star__hoshi:20170109093427p:plain

Generate Configure Service は無視して画面を閉じて良い。

Firebase でインポート

(Firebase に登録していない人は登録が必要。)

Firebase Console を開いて、中央右らへんにある GOOGLE プロジェクトをインポート を押す。

追加ダイアログの選択肢で先ほど作成した sample を選択して FIREBASE を追加 する。

f:id:star__hoshi:20170109093943p:plain

追加すると Firebase Project に追加される。

設定ファイルのダウンロード

左上の歯車から プロジェクトの設定 を選択し、 GoogleService-Info.plist を DL する。

f:id:star__hoshi:20170109094208p:plain

設定ファイルを確認

Firebase からダウンロードした設定ファイルでも、 GA の TRACKING_ID が挿入されている。🎉

...略...
    <key>TRACKING_ID</key>
    <string>UA-44007234-21</string>
...略...

あとは GA も Firebase も普通の手順でやれば OK!!!

APIGateway + Lambda + NodeJS で rest api を作る

AWS 全然使ったことなくて Lambda とか全くわからなかったけど1時間くらいで API 公開まで行けた。
このままだとやり方忘れちゃいそうなのでメモ。

AWS Lambda

Get Started Now

まず AWS にログインして、 Lambda を選んで Get Started Now する。
次に、 blank function を選択する。

そうすると Configure triggers という画面になるが、ここは気にせず Next を押す。

Configure function

Name に適当に名前入れる、とりあえず test とか入れておけば良い。
Runtime は Node.js を選ぶ。

Lambda function code

コードはこんな感じで書く。

exports.handler = function(event, context, callback) {
  console.log('"Hello":"World"');
  const response = {
    statusCode: 200,
    headers: {},
    body: JSON.stringify({ "message": "Hello World!" })
  };

  callback(null, response);
};

API Gateway と連携させる場合、 statusCode や body などが必要。

参考: プロキシリソースのプロキシ統合を設定する - Amazon API Gateway

Lambda function handler and role

ロールはなければ作る。
Create new role from template(s) を選んで、 Role name を適当に入れる。
適当だから admin などにした。

他は無視して Next する。

Review

内容確認して Create function する。
これで Lambda 関数が作られる、簡単!!!!!!!!!!

Test

画面上の方に Test があるので押してみる。
json の中身は変えないで Save and test を押す。

以下の json が返って来れば成功!

{
  "statusCode": 200,
  "headers": {},
  "body": "{\"message\":\"Hello World!\"}"
}

API Gateway

次は Rest API として叩けるように API Gateway と連携させる。

Get Started Now

Get Started Now を押すと サンプル API の作成 など出るが無視して OK を押す。

画面上にある、 ◯ 新しい API をクリック。

API 名 を適当に入れる。
適当だから api にした。

リソースの作成

API のエンドポイントを作る。
画面左上にある アクション > リソースの作成 を選択。

リソース作成画面になるので、リソース名を test とかで リソースの作成 を押す。

そうするとリソースが作られる。
画面には リソースにはメソッドは定義されていません。 などと出てくる。

メソッドの作成

アクション > メソッドの作成 を選ぶと、 メソッドを選ぶ選択肢が出てくる。
GET を選んで ✅ を押す。

GET - セットアップ

統合タイプ: Lambda 関数、 Lambda リージョン は適当に us-east-1 を選ぶ。

そうすると Lambda 関数の入力欄が出るので、そこで先ほど作成した test を入力し、保存 を押す。

Lambda 関数に権限を追加するOK を選択。

メソッドの実行

箱が 4 つ並んでる画面が出てくるが、画面左上の テスト を押す。
メソッドテスト画面に遷移する。

画面下にある ⚡️テスト ボタンを押す。
下記 json が返って来れば OK!

{
  "statusCode": 200,
  "headers": {},
  "body": "{\"message\":\"Hello World!\"}"
}

API のデプロイ

最後にデプロイして外から叩けるようにする。

アクション > API のデプロイ を選択。

  • デプロイされるステージ
    • [新しいステージ]
  • ステージ名
    • test (なんでもよい)

で入力し、 deploy する。

API 実行確認

画面上に URL の呼び出し: https://hoge.execute-api.us-east-1.amazonaws.com/test みたいなの書いてるので、これに先ほど決めたリソース名の /test を追加しアクセスしてみる。

{
  statusCode: 200,
  headers: { },
  body: "{"message":"Hello World!"}"
}

と返って来れば成功!!!!!

感想

めっちゃ簡単に Lambda 使えて最高である、これだけ手軽に使えるとスマホアプリでちょっとサーバでやりたいこととか Lambda でできて良い。

しかも一ヶ月 1,000,000 件リクエストまで無料である、強い。

WKWebView で target = _blank と POST の組み合わせ注意

target = _blank かつ POST リクエストの際に画面が表示されないバグを出してしまったので気をつけないといけない。

WKWebViewでtarget="_blank"なリンクが開かない時の対処法 - Qiita のコメント欄で注意喚起がされている。

target="_blank" を強引にメインのwebViewにロードさせる場合は注意が必要です。
例えばイベントサイトのATNDで参加登録をした時、
メインフレームで参加登録リクエストが投げられ、別ウィンドウでTwitterへの投稿画面が開かれようとします。
このとき、別ウィンドウで開かれようとしているTwitterへの投稿画面を、
参加登録リクエストを送信するはずだったwebViewに読み込ませてしまうと、
肝心の参加登録処理が実行されないままになってしまいます。

つまりどういうこと?

注意1. target = _blank

WKWebView で target = _blank を開くことができないので、下記のように自力で load request を送る必要がある。

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    guard navigationAction.targetFrame else {
        webView.load(URLRequest(url: url))
        decisionHandler(.cancel)
        return
    }
    decisionHandler(.allow)
}

注意2. WKWebView で POST パラメータが空っぽ

webView.load(URLRequest(url: url)) では POST のパラメータが消えてしまう。
実際に iOS Simulator + Safari Debug で確認した。

これをアプリ側でどうにかするためには、

  1. request が POST か判定
  2. POST だったらネイティブ側で Request を発行し HTML を取得 (API を叩く感じ)
  3. その返り値を WKWebView にセットする

つらい。

参考: WKWebViewでNSURLRequestをPOSTするとヘッダーが消える問題(解決) « TORQUES LABS

なので

  • 社内サービスで調整できる場合
    • Web の人に iOS でアクセスきた時は target = _blank 外してくれという話をする
  • 社外サービスでどうしようもない時
    • がんばってネイティブ側で HTML 取得する

という対策をとる必要がある。

そもそも

アプリで WebView を使うのやめようぜ!!!!!!!!!!!!!!!!!!!

2016年振り返り

今年あったことを書き起こしていったら怪文書のようになってしまった。

2016 年振り返り

まとめ

2016年初めに「去年は仕事以外何もしなかったから、今年はひたすらアウトプットし続けるぞ」と誓った記憶がある。
振り返ってみると、そこそこアプリを作ったし GitHub に9割がた草も生えた。

f:id:star__hoshi:20161225211440p:plain

個人開発、チーム開発、転職など色々あったが良き一年だった。

2016年あったこと

1月

SEKITORI 〜 ニコ生で座席を確保する という iOS アプリを開発していた。
Swift で初めてリリースしたアプリ。

この時ニコ生見るのにひたすらハマっていた。

2月

Alcatraz Search | Search Alcatraz more better. という Web アプリを作った。
Xcode Plugin を探しやすくしたかったが、Xcode 8 で Plugin が使えなくなったので価値がなくなった。

実際は何のために作ったかというと React を使ってみたかった、という以外にない。

React + Redux + TypeScript でWebアプリを作った感想・勉強法と Angular との比較 - Qiita という記事を書いて、結構バズって嬉しかった。

3月

ピーちゃん 〜 Unofficial esa.io Client. という esa.io の iOS クライアントアプリを開発した。

このときくらいから会社の先輩と一緒にサービスを作り始める。

4月

会社の先輩と始めたサービスを本格的に作り始める。
一緒に開発している先輩が Android で、私は Rails + iOS 担当で、アドバイザー的な人が一人いて3チームでスタートした。

このときから Rails を学び始め、仕事で Java を使っていたが Rails 最高じゃん... という気持ちになる。

5月

会社のオフィスが移転した。
移転したオフィスがひどくて、この会社は従業員に気持ちよく働いてほしいという気持ちがないんだと思い、今までの会社に対する不満のタカが外れ転職活動を始める。

会社の先輩と作っているサービスは、既存サービス調査が甘く、開発開始から3か月くらいたって超強豪がいることを知りピポッドする。

この後はどういうサービスにするかブレまくり、毎週ピポッドすることになる。

6月

26 歳になる。

転職活動が本格化し、週2回で仕事終わりによその会社の話を聞きに行く。
家で開発する体力が削られだいぶつらかった。

開発中のサービスはブレまくり毎週のようにやることが変わっていった。
でもそうやっていろいろな可能性を探してくのは楽しいし、必要なことだと思って毎週何時間も話し合ってた。

7月

内定が出る。
いま内定が出ている会社に行くのか、それとも現職に残るのか、もっと他の会社に行くのか考える。
現職に留まるのはないな、と思いとりあえず上司に転職する旨を話し了承を得る。
いろいろ考え、 Classi というサービスの会社に入社する。

開発中のサービスは、先月と同様どうするか話し合い作ってみては壊し、作ってみては壊すという感じ。

8月

9月13日くらいが最終出社日に決まる、最後の仕事はインターン受入れで、辞めるやつがインターン受入れしていいのか...という気持ちだったが、まあ最後まで頑張ろうと思い受入れの準備をする。
受入れで Swift やりましょうという話になり、初めて仕事で Swift を書く。

開発中のサービスは依然として作っては壊し作っては壊す。
その過程で Rails についていろいろ学び、 Rest とは... と悩むことになる。

ハッカソンOPanimED というアプリを開発し、勢いでそのままリリースする。

9月

インターンの受入れをして、職務を終える。9月後半は有給モードに入る。
退職エントリ を書いたら、内輪向けに書いたはずがブクマたくさんついてビビった。

転職先で iOS やるので Objective-C も勉強しておこう、と思い勉強して アプリを1本リリース する。

会社の先輩と話していたサービスは寿司を食べながらやることが固まり、ドメイン取ったりする。

10月

10月中旬から転職先で iOS エンジニアとして働くがそんなに知識もないので、10月前半はひたすら iOS + Swift の学習をする。

転職先は椅子が悪くなったこと以外すべて前職より良くなっており逆に困惑する。

11月

仕事で新規アプリを作ることになり開発を始めるが、既にリリース済みのアプリでクラッシュが多発しそれを調べたりするので進捗が出ずエモい気持ちになる。
また、ObjC だの Swift だの開発方法だの色々とあり、転職先の良くない点も理解する。

ポケモン新作が発売された こともあり、Rails は完全に手付かずになってしまう。

12月

仕事ではクラッシュ問題が解決され進捗が出るようになる。
転職先は良い面もあれば悪い面もあるけど、楽しく働けているし貢献できるように頑張るぞいという気持ちになる。

12月前半はポケモンばかりやっていたが、12/21 に前職のサービス作ってた人たちと会い、やっていきの気持ちを取り戻す。

2017年

2016年の反省として、個人的なアウトプットは色々としたが、勉強会に出たりなどはしてないので来年は登壇したい。
また、書籍も全然読まなかったので今年はインプットもやっていきたい。
仕事もやるし、家でも開発するし、本も読みたいしで、多分本を読むというのがおそろかになる気がするが、どれも頑張る気持ちで2017年やっていきたい。

会社の先輩と作っているサービスは年初にリリースするぞという感じで、そのサービスがウケるかわからないけど、
「作ってダメだったけど勉強になってよかったね」では悔しいのでなんとかして軌道に乗せたい。

来年一年間もどうぞよろしくお願いします。