OTOBANK Engineering Blog

オトバンクはコンテンツが大好きなエンジニアを募集しています!

わたしのReact Hooksの使い方

こんにちは、アプリ開発担当のエモトです。Pixel 4a が発表されましたね。私のメイン機は iOS なのですが、Android も多少持っているので興味があります。パンチホール式を採用した広々としたディスプレイに惹かれるモノがありますが、「今は時期が悪い、5Gまで待て」と言い聞かせ、5Gモデルを首長く待ちます。まあ、私が使っている回線はMVNOなので、5Gが使えるのがいつになるかは分かりませんが。5Gの風を浴びたい

初めて React Hooks の存在を知ったとき、まだ React Native もよく分かっていない時期で、「フックス?なにそれ?おいしいの?」な状態でした。開発を幾つかやってきて慣れてきた現在は、Hooks で全部書きたいと、思うようにもなりました。

私の開発内容では、標準の Hooks で十分に開発はできているのですが、ときどき少し足りないと思う時があり、その場合はカスタム Hooks を使っています。今回はそれを少し紹介します。

didMount/didUnmount時のみに呼ばれるuseEffect

カスタム Hook を用意せずとも、useEffect の第二引数に [] を指定すれば、実現できます。追加するほどではないと思っていたのですが、[] を指定するたびに ESLint が反応するのは面倒なため、追加しました。

export function useEffectOnce(effect: EffectCallback) {
  useEffect(effect, [])
}

第二引数を書く必要なくなるので、コードがすっきりしまた。これは有名なカスタム Hook の1つであり、カスタム Hook を扱った技術ブログやライブラリでもしばしば見かけます。

State変数の以前の値を参照したい

これも有名なカスタム Hook です。変数の変化量に応じて処理や表示の場合分けが必要なとき、変数更新のたびに、以前の値を保存するためのコードを挿入する必要がないので、とても便利です。

export function usePrevious<T>(value: T) {
  const ref = useRef<T>(null)
  useEffect(() => {
    ref.current = value
  })
  return ref.current
}

Stateではない変数を Hook で管理したい

変数管理は setState を用いれば、変数の参照や更新もできるので便利です。ただし、対象の変数が component に影響しない(させたくない)場合は、変数更新のたびに起こる不要な再レンダリングでパフォーマンスに影響するため、不向きです。State のためにあるのだから、当然のことです。それでも、setState の変数管理だけができないかと色々と考えました。

すぐ思いつくのは、useRef を使うことです。

const ref = useRef(false)

ref.current = hogehoge

if (ref.current) {
  piyopiyo()
}

しかし、コード中に current が唐突に出てくるのは違和感を感じます。そこで、それを改善する Hook を作成しました。

  • カスタム Hook
/**
 * ステートレスな変数を管理する
 */
export function useStateless<T>(value: T): [() => T, (v: T) => void] {
  const ref = useRef<T>(value)
  return [
    () => {
      return ref.current
    },
    (v: T) => {
      ref.current = v
    },
  ]
}
  • 使用例
const [getRef, setRef] = useStateless(false)

setRef(hogehoge)

if (getRef()) {
  piyopiyo()
}

setState と異なって、変数参照が関数になってしまったのが、残念なところです。内部に useEffect を入れて、値を更新することができなかいかと試しましたが、うまく行かず、このようになりました。しかしながら、Hook でステートレスな変数を管理できるようになったので、コードが整理されたと思っています。

まとめ

Hooks は公式でカスタマイズが紹介され、またサードライブラリが公開さてします。それらを利用して、より便利に開発しましょう。

以前は、React Native の開発に躓くことが多かったのですが、function component そして React Hooks を使えるようになってから、自分が書きたいコードを自分で書けるようになってきたと思います(まだまだ知らないことは多いですが)。React Hooks は、私が React Native 開発がより面白いと思った起点の1つでもあるので、React Hooks を見ていくのは React Native の勉強におすすめです。

最後に、オトバンクではエンジニアを募集中です。オーディオブックや、React Native 開発(Swift や Kotlinのネイティブコードも書いてます)にご興味があれば、是非どうぞ。

お待ちしております。

React NativeアプリでSpotlightを使った検索を実装する

こんにちは、アプリ開発担当のエモトです。みなさま給付金は受給されましたか?僕は、あ、あれ、何かノートパソコンが生えてる。不思議なこともあるもんだな。ちなみ、前回の給付金(リーマンショックを受けて、2009年に施行)では、Realforceを購入して、今それを使って、このブログを書いています。

さて、先日のアップデートで iOS 版オーディオブックアプリは、Spotlight を使ったオーディオブック作品の検索に対応しました。Spotlight とは?アプリではどう使われる?と気になる方は、弊社 note に紹介記事「Spotlightで検索できるようになりました」 が投稿されています。是非ご覧ください。弊ブログでは技術面を少し話したいと思います。

当初、React Native のサードライブラリを利用して、Spotlight の実装をしようを思っていました。しかしながら、我々の想定にあうライブラリが見当たらなかったので、自作することにしました。もちろん、ブログ3回目の登場、Native Module を使います。以前、紹介した Siri Media Intents や Sign in with Apple とは異なり、Spotlight は iOS 8 に登場して機能です。前者と比べると複雑ではないので、比較的簡単に実装できました。

実装

コード全文を紹介すると長くなるので、エッセンシャルを紹介します。Native Modules の基本的な使い方は今回省略しています。

Spotlightの実装

Spotlitght を使用するには、まず最初に、検索対象となる SearchableItem 型の検索データを用意します。React Native での使用を想定しているので、検索データは連想配列(辞書型)で与えられるとしています。

// import Foundation
// import CoreSpotlight
// import Alamofire
// import AlamofireImage

fileprivate class SearchItemKey {
    static let title = "title"
    static let description = "description"
    static let keywords = "keywords"
    static let imageUrl = "imageUrl"
    static let domain = "domain"
    static let id = "id"
}

/// create dictionary to CSSearchableItem
func createSearchableItem(item: [String: Any],
                          completion: @escaping  (CSSearchableItem) -> () ){
  
    var domain = Bundle.main.bundleIdentifier
    if let d = item[SearchItemKey.domain] as? String{
        domain = d
    }
        
    let attr = CSSearchableItemAttributeSet.init(itemContentType: kCIAttributeTypeImage)
    attr.title = item[SearchItemKey.title] as? String
    attr.contentDescription = item[SearchItemKey.description] as? String
    attr.keywords = item[SearchItemKey.keywords] as? [String]
    attr.domainIdentifier = domain
     
    // 画像データがない or 直接画像データがある場合はダウンロード処理は不要です
    // その場合は直接 return item して問題ありません   
    let callCalback = { () in
        let item = CSSearchableItem.init(uniqueIdentifier: item[SearchItemKey.id] as? String,
                                         domainIdentifier: domain,
                                         attributeSet: attr)
        completion(item)
    }
    if let imageUrl = item[SearchItemKey.imageUrl] as? String{
        Alamofire.request(imageUrl, method: .get).responseImage { response in
            if let image = response.result.value{
                attr.thumbnailData = image.pngData()
            }
            callCalback()
        }
    }else{
        callCalback()
    }
}

次に登録を行います。登録は簡単で先ほど生成した CSSearchableItem 配列を登録メソッドに与えます。なお、登録があれば、もちろん削除もあります。興味ある方はアップルの開発ドキュメントをご確認ください。

let searchableItems = [CSSearchableItem]()
let searchableIndex = CSSearchableIndex.default()
searchableIndex.indexSearchableItems(searchableItems) { (error) in
    // 完了やerror処理など
}

iOS と React Native の連携

Spoltlight の準備ができました。次は、その Spoltlight のイベントを React Native に送る方法です。Native Modules の RCTEventEmitter を継承したクラスを用意します。

fileprivate enum SearchOnDeviceListener: String, CaseIterable {
  case onSearchOnDeviceRequest
}

@objc(SearchOnDevice)
class SearchOnDevice: RCTEventEmitter {

    @objc public static let shared = SearchOnDevice()

    override init() {
      super.init()
      for listener in SearchOnDeviceListener.allCases {
        self.addListener(listener.rawValue)
      }
    }
    
    deinit {
      self.removeListeners(Double(SearchOnDeviceListener.allCases.count))
    }
    
    @objc
    override func supportedEvents() -> [String]! {
      return SearchOnDeviceListener.allCases.map {
        $0.rawValue
      }
    }
    
    @objc(handle:)
    static public func handle(_ userActivity: NSUserActivity) -> Bool {
        var identifier: String? = nil
        if userActivity.activityType == CSSearchableItemActionType{
            identifier = userActivity.userInfo?[CSSearchableItemActivityIdentifier] as? String
        }
        var query: String? = nil
        if userActivity.activityType == CSQueryContinuationActionType {
            // iOS 10以上かつ、plistで設定が必要
            query = userActivity.userInfo?[CSSearchQueryString] as? String
        }
        let obj = SearchOnDevice.shared
        obj.sendEvent(withName: SearchOnDeviceListener.onSearchOnDeviceRequest.rawValue,
                           body: ["id": identifier, "query": query])
    }
}

上記を AppDelegate.m にて Spotlight が実行されると呼ばれるメソッド内で設定します。これにより、実行のたびに、React Native へ検索データが送られます。そのデータを使って、詳細画面や検索画面を開けば OK です。

// AppDelegate.m
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
  return [SearchOnDevice handle:userActivity];
}

まとめ

開発当初、適切なライブラリが見つからないとアクシデントがありましたが、Spotlight 自体の実装コストが低いのもあり、比較的に容易に実装できました(これまでの Siri Media Intents や Sign in with Apple の Native Module 実装の経験が役立ちました)。Spotlight は低い開発コストのうえ、iPhone の検索からユーザーが Safari に行くことなく自アプリへ導入できるという非常に魅力的な機能なので、おすすめです。

最後に、オトバンクではエンジニアを募集中です。日頃は Swift や Kotlin を書かれてる方でも、オーディオブックや、React Native 開発(ネイティブコードも書いてます)にご興味があれば、是非どうぞ。

お待ちしております。

自宅の狭い作業環境を拡張してみた

おひさしぶりです。サーバエンジニアのyukimuraです!

全国で緊急事態宣言が解除されましたね。 まだまだ油断せずに節度ある生活を心がけていこうと思います。

さて、今回の自粛期間中フルリモートとなり会社からリモートワーク一時金をいただきましたので、自宅の作業環境を拡張してみました。
https://note.com/otobank/n/n40323daa3c93

タイトルの通り私の作業スペースは横幅約70cmと結構狭いです。 しかし、狭くても快適な環境を作りたい!ということで拡張の様子を晒していきます👐

拡張前

f:id:yukimura0301:20200526172141j:plain

横幅70cmくらいのPCデスクを置いて作業しています。 本当はもっと横長の机を置いてディスプレイを横に並べたいのですが、 デスク横に扉があるのでこれ以上横長の机は置けないんですよね。 う〜ん狭い。

横に並べられないなら縦に並べれば良いんじゃない?ということで、 今回はモニターアームを買って縦にディスプレイを並べてみることにしました。

拡張後

モニターとモニターアームを購入しました!

縦にモニターを2枚配置しています。(上部のプリンタ台は撤去。プリンタは足下の台に移動) f:id:yukimura0301:20200529125342j:plain

後ろ。モニタの角度を変えられて良い感じです。 f:id:yukimura0301:20200529125412j:plain

うちは扉があるため出来ませんが、ネジを緩めて高さ調整すれば横に2枚配置する事も可能です。
なお、このモニターアーム(FLEXIMOUNTS社製M6SD)を組み立てる際にはモニタを手で支えながらアームのねじ止めをする必要があるため、1人で組み立てを行うのはかなり厳しいです。
(説明書にも安全のため大人2名で組み立てるよう、注意書きがあります。)
モニターアームの購入を考えている方がいたら、誰かに組み立てを手伝ってもらってくださいね。

構成

  • PC: MacBook Pro 13-inch 2019(Apple)
  • PCデスク: HLN-60BKN(サンワサプライ)
  • 既存モニタ: RDT234WLM(MITSUBISHI)
  • 新モニタ: GW2780(BENQ)
  • USBTypeCハブ × 1 : A8335(Anker)
    ※ ハブは無くても良いですが、USB2.0のデバイスを接続するためにあると便利。この機種の場合はmacの電源ケーブルを接続して充電もできます。
  • HDMIケーブル(USBTypeC to HDMI) × 1
  • HDMIケーブル × 1
  • モニタアーム: M6SD(FLEXIMOUNTS)

接続は以下構成です。

  • macbookのTypeCポート --- USBTypeCハブ --- HDMIケーブル --- 新モニタ

  • macbookのTypeCポート --- HDMIケーブル(USBTypeC to HDMI) --- 既存モニタ

感想

今のところ上モニタにブラウザやコンソール、下モニタにエディタ、Macbook本体画面にslackやその他ツールを表示・・という形で使っておりなかなか快適です。
アプリを開いたり非表示にしたりという動作が減って作業が効率的になっている気がしています。

しかし予想していたことではありますが、椅子を高くしないと上の画面を見上げると首が痛くなりますね・・。 椅子を高くした状態で使っていると、手元のmacbookを見ると背中が丸まってしまい 気付くと姿勢が悪くなっているということがあるため良い対処法がないか検討中です😓

おわりに

まだまだ改善点があるため、今後も理想的な作業環境を模索していきたいと思います。 ヘッドセットを買おうと思っているためおすすめがある方は教えていただけると嬉しいです!!

それでは、他のエンジニアの作業環境も見たいな〜と前振りして終わります🙏