hikalab

【ヒカ☆ラボ】モバイル決済サービスのLT会に行ってきました【Kyash、Coiney、PAY】

先日行われた【ヒカ☆ラボ】【Kyash、Coiney、PAY】新しい支払いの形を作る、モバイル決済サービスの開発の裏側とは と言うイベントに参加してきました。

今回は、Kyash、*Coiney*、PAYの3社より、
「Paymentにおけるモバイル開発について」をテーマに、
それぞれの現場のエンジニアから自由な内容で発表して頂きます。

過去の開発に置ける技術的負債との向き合い方や
React Nativeを用いた開発、UXについてなど多彩な内容を予定しています。

上記3社の社員さんによるLT会で、どちらかと言うと決済自体の話よりは単純にモバイル開発の経験談のような感じだったので特に決済の知識がなくても楽しめることはできました。

場所は渋谷ヒカリエ17Fで株式会社レバテックさんが主催者様なのですが、めっちゃ綺麗でした、すごい。

 

AndroidのUIテストを運用にのせるまで

株式会社Kyash 小西 氏(@konifar) のLTです。

konifarさんはTwitterでよくお見かけするのでこれが本物か、、、と謎の感動がありました笑

私自身、最近ようやくテストを書く環境になってきたのでタイムリーでした。

  • テストツールの選定
  • パッケージ・クラスの分割指針
  • 外部との通信の指針
  • CIサービスの選定

このような内容です。

CIサービスをBitriseにすることで、Virtual Device Testing for AndroidでFirebase Test LabとGUIで簡単に連携できるのが便利そうです。

 

iOSアプリの技術的負債をどうやって返済していったか

株式会社Kyash 小林 氏のLTです。

元々Android担当だったところkonifarさんが入社したことによってiOSチームに入り、技術的負債をどうやって返済したかと言う話。

  • とにかく無駄なコードを消した(Find Selected Symbol in Workspaceとか)
  • MVVM + レイヤードアーキテクチャ
  • RxSwiftの導入で非同期処理の直列、並列実行を簡単に
  • Embedded Framework

iOSは完全に専門外なのですが、綺麗で開発・保守しやすいコードの設計方法は勉強になりました。

最近よくRxSwiftの話を聞くようになってきたので、iOS開発をするときはぜひ触っておきたいです、非同期処理が楽にかけるのはありがたいですね。

 

iOS・Android共通コードのライブラリ化

コイニー株式会社 マイヤーズ 氏のLTです。

電子決済でAndroid/iOS共通の処理を行うところをライブラリ化したと言うお話。

  • C++でライブラリ実装
  • iOSはCocoa touch framework
  • AndroidはJNIレイヤー

ネイティブに疎いので理解しきれてはいないのですが、React Nativeなどクロスプラットフォームを使わなくとも、やはり共通部分はライブラリ化できると強いです。

あとはアプリだけでなく電子決済の端末込みでのサービスなので、ハードやより低レイヤーの部分に触れられる仕事は楽しそうだなと思っていました。

 

モーショングラフィックスによるアプリの “つかいかた” の “つくりかた”

コイニー株式会社 松本 氏のLTです。

モーショングラフィックスに関するUX/UIデザイン寄りなお話。

サービスの説明をする際にトレーニングモードや長々と説明文章を入れると、無駄に工数がかかったりユーザーが理解しにくいため、モーショングラフィックスをうまく利用して解決した事例です。

  • 微妙なニュアンスを伝えるにはモーショングラフィックスが重要
  • 適切なタイミングで動きを出して直感的な理解を得る
  • いいねや目標達成時など、期待感や楽しさの「攻め」のモーショングラフィックス
  • サービス説明などユーザーの理解や状態の表示を行う「守り」のモーショングラフィックス
  • コンテクスチュアル、ユーザーの振る舞いに応じた適切なタイミングでの表示
  • 意味を引き立てる、情報を削ぎ落としたグラフィック(路線図のような抽象度)
  • 毎日使うものだからこそ見ていて飽きないものを
  • ラフアニメーションはAnimaticで
  • Lottieの利用でデータは100分の1に、Web/Android/iOS対応可能

デザイナー寄りのタスクだと思って今までモーショングラフィックスは全然触っていなかったのですが、今回かなり有用性を感じました。

どうしても機能面や単純なデザインではカバーしきれないUX設計において重要な部分だと思います。

やはりインパクトの強い「攻め」のモーショングラフィックスに行きがちですが、「守り」も意識することで、高機能なアプリはITリテラシーの低いユーザーにも受け入れられやすく、シンプルなアプリはより強みを活かせるようになるので今後は意識的に取り入れて行きたいところです。

あとAnimaticめちゃくちゃ良さそうです。

 

React Native開発におけるAPIクライアント

PAY株式会社 山中 氏のLTです。

React Nativeに置ける通信のお話。

  • OpenAPI Generator2.0(Swagger)を採用
  • Webフロントの人が多かったらfetch axiosとか
  • RNでの使用を想定されているfrisbeeなども
  • yamlやjsonで定義したらそれを共有することでAPIの更新・共有が楽になる
  • PAYではOpenAPIのカスタマイズも
    • 独自ヘッダー追加
    • HTTPRequest前のintercept処理
    • エラー発生時のハンドリング処理

LTではOpenAPIはいいぞで時間が来てしまいましたが、スライドにはRN開発中に困ったことなど追加資料があります。

最近は公式が結構まとまっているらしいので、RNの通信を考える時は一読することを推奨とのこと。

私自身は実装しませんが、RNでバックエンドがREST APIとGraphQLのプロジェクトに参加しているのでそこの比較なども行ってみたい所です。

単純なfetchしか使ったことがなかったので(時々axios)他のサードパーティライブラリもチェックしておこうかなと思います(frisbeeとか)

 

“楽しめる“お支払いアプリを作る「PAY ID」のUX思想

PAY株式会社 陳 氏のLTです。

PAY IDでのUX設計で気をつけた点などのお話。

  • ユーザーの気持ちになる
  • 観察でお客様の対応を理解する
  • 自ら体験する
  • iOSっぽさ(HIGを理解する)
  • UIScrollView系のBounce
  • 他者アプリから学ぶ
  • お支払いアプリとしての体験

Androidっぽさ、iOSっぽさと言うのは最近考えていたことですが、UIScrollView系のBounceの違いとかGroup-liked UITableViewの話とかを聞くと細かいところまで拘っているなと関心しました…

モバイル開発はちょいちょいやっているんですが、iOS端末をがっつり触らないので(Android勢)実際に使い慣れているユーザー視点で考える上で両OS使わないとなと最近思います。

お支払いアプリとしての体験で出て来た「振動や音によるお金支払った感」はすごく大事だなと感じで、確かにAmazonのアプリでカートに入れた時の振動なんかは良い体験だなと思っています。

スライドの最後にまとめられている参考資料もチェックしておきたいです。

その後は懇親会でエンジニアさんとモバイル開発の話をさせていただいてそこそこ盛り上がりました笑

モバイル開発ってトレンドの移り変わりが激しかったりして書籍やネットの情報だけじゃ追いきれないところがあるので、がっつり開発してるエンジニアさんと実際に話して意見交換できるのは結構大事なことだと思っています。

ヒカ☆ラボさんでは他にも勉強会が開催されているので参加してみてはいかがでしょうか!