Wowgineer Notes

WowTechエンジニアの徒然開発日記

Wowgineer Notes

〜新たな"Wow"を生み出す〜

絵文字リアクションの開発裏話

f:id:yamamoto5555:20200911113722j:plain


Web開発チームの山本です。

WowTalkに絵文字リアクション機能がリリースされ、時間が少し立ってしまったのですが、自分の中でも思い出深い機能でもあるので、今回は絵文字リアクション機能の開発裏話を紹介します。

 

絵文字リアクション機能とは?

絵文字リアクション機能は、トーク上に投稿されたメッセージに対して12種類の絵文字で反応(リアクション)することができる機能です。メッセージに対してリアクションできるため、スタンプよりもカジュアルに使うことができます。詳しくは、こちらから!

 

なぜ絵文字リアクション機能を追加したのか?

日頃から多くのメッセージをWowTalkで行なっているため、スタンプがたくさん送信された際に、メッセージが流れてしまうという課題を感じていました。また、サービスコンセプトの1つでもある「感情」と絵文字リアクションとの親和性も高く、機能を追加する後押しとなりました。

 

開発で苦労したこと

機能開発時に大変だったことは、仕様の決定でした。リアクションの種類はもちろんのこと、何個まで選択できるか、リアクションした人を見せるかなど、想像以上に決めることが多く、技術部内でも何度も話し合いをしました。またWowTalkのヘビーユーザーである社内の人の声も聞きたかったので、共有のアンケート機能を使用して、リアクションの種類について社内からも意見を募っていました。面白かったのは、技術部内ではポジティブなリアクションだけでいいのではと話していたのですが、意外と社内の人からはリアクションの感情の幅があった方が良いと言う意見があったことです。確かに現在使用する中で、喜び以外の感情のリアクションを使用することがよくあるなと思っています。

 

個人的には、リアクションの追加・削除・更新などで起こるリアクション数の変更を適切に反映させることに、とても苦労しました。ただ追加するのに1リアクション増やす、削除するごとに1リアクション減らすでは、重複などのデータの矛盾が生じるため、メッセージが持つID(下のコードでいうと"messageId1"と"messageId2"のこと)をkeyにすることで、リアクションにアクセスしやすいようにしました。今回の実装で苦手に感じていた配列やオブジェクトの使い方にだいぶ慣れた気がします。

 

{
    messageId1: {
        clapping : {
            users :  [ user1,  user2, user3 ]
        },
        heart : {
            users: [ user2, user4 ]
        },    
    },
    messageId2: {
       rose : {
            users :  [ user4,  user5, user6 ]
        }
    }
}

 

 

リリース前のハプニング?!

テストも落ち着き、そろそろリリースだとなった時に、絵文字の入れ替えが発生しました。もともとは割れたハートと泣いている顔文字を入れる予定でしたが、上からのお達しで変更することになりました。そこで新しく入れる絵文字になったのが、👌と🌹です。バラは、もともと技術部でメンテナンス時などでお疲れ様という意味を込めて、バラのスタンプを送りあっていました。そのお疲れ様の意味を込めて、今回の絵文字に追加しました。皆さんも、ぜひ相手を労う時にたくさんバラを送ってください!

 

まとめ

嬉しいことに、社内からも「絵文字リアクション便利!」というポジティブな声を聞くと、頑張って開発して良かったなと思います。まだまだ改善の余地もあるとは思いますが、ユーザーの方にドンドン使っていただけると嬉しいです。これからも更にサービスを進化させられるよう、頑張っていきます!

 

 

我々ワウテック技術開発部はこのような環境で開発をしています。
興味を持った方がいらっしゃればいつでもご連絡下さい。

f:id:wowtech-dev:20190313163146j:plain

ReduxのStore設計で気をつけたこと

                 f:id:yamamoto5555:20200821112754j:plain


 

 Web開発チームのフロントを担当している山本です。

今年リリースをした集計機能でReduxを導入しました。集計機能とは、お客様によりWowTalkを使っていただくために、社内の浸透をサポートする機能です(詳しくはこちら)。Redux導入にあたり一番頭を悩ませたのが、Store設計でした。初めての設計ということもあり、いろいろと試行錯誤したので、今回はReduxのStore設計について紹介します。 

 

公式のReduxのStore設計

Reduxのドキュメントでも、複数のデータを取り扱う時の3つのポイントが書かれています。

  • Domain data: アプリケーションが表示、使用、または変更する必要のあるデータ

  例)サーバーから取得するデータ

  • App state: アプリケーション独自の動作データ 

  例)データの選択状態やリクエスト中の状態

  • UI state: 現在のUIの表示方法を表すデータ

  例)モーダルが表示か非表示か

 

この3つの分け方は、データを取り扱う時に、明確な指針としてとても助かりました。基本的には上記のことを元に、今回の集計機能のStoreも構成しています。

 

 他のプロジェクトのStoreは?

具体的な例も参考にしたかったので、react-redux-realworld-example-appというプロジェクトを見つけました。このプロジェクトでは、Twitterのように自分で簡単なメッセージを投稿できるようになっています。reducersを見てみると、editorやProfileといったパーツごとにreducerを分けており、フラットに整理されていました(プロジェクトの大きさによるかもしれませんが)。またcommon.jsでは、ユーザー情報など共通で管理を行っているデータをまとめています。

 

正直、いろいろな具体的例を参考にしたかったのですが、その当時はなかなか見つからず。。。(私の探し方が悪かったのかな)。今は、 React Developer ToolsでStoreの中を覗けることを知ったのですが、早く知りたかったです!React Developer Toolsの使い方なども書いてあり、こちらの記事がとても参考になりました。私もこれからいろいろなStoreの中を覗いてみたいと思います。

  

集計機能のStore構成

今回の集計機能では、ページごとに表示するデータが異なるので、パーツではなくページごとにStoreを構成しました。それは、今後のことを踏まえても、ページ数をかなり増やすことは考えていなかったこともあり、ページごとにStoreを作ることに踏み切ることが出来ました。 

-cache
    |_common
-page
    |_common
    |_activeUser
    |_lastActive
-ui
    |_common
    |_activeUser
    |_lastActive

 

上記が考えたStore構成です。基本はドキュメントにあった3つのポイントから構成し、さらにページごとに分けています。ページ関係なく共通で使うものはcommonに入れて管理しています。今のところ、実装する中ではどこでデータを管理しているのかが見つけやすいです。

 

まとめ

今回はStoreの設計をしたのですが、どれが正解かは分からない部分が多かったです。集計機能では、ページごとに分けて良かったとは思っていますが、サービスによっては、やはりパーツごとに分けたほうがいいものもあり、一概にはどれがいいとは言えないと思いました。また、これからさらに集計機能を進化させたいので、その中で新たな壁にぶつかりそうな気がしています(既に壁にぶつかったので、その内また違う記事で書きます)。まだまだRedux初心者なので、積極的に他のサービスからも学んで行きたいです!

  

参考URL:

React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜

redux-ecosystem-links/apps-and-examples.md

 

我々ワウテック技術開発部はこのような環境で開発をしています。
興味を持った方がいらっしゃればいつでもご連絡下さい。

f:id:wowtech-dev:20190313163146j:plain

 

カラーユニバーサルデザイン認証を取得した時の開発話

f:id:yamamoto5555:20140914125312j:plain

  

Web開発チームのフロントを担当している山本です。

 

昨年ワウテックは、カラーユニバーサルデザイン(CUD)認証を取得しました。(詳しくはこちらから)より良いサービスを提供できるよう奮闘する中で、CUD認証の取得は新機能とは少し違う新たな取り組みでした。今回、なぜCUDマーク取得を行ったのか、どのような変更があったのかについてご紹介したいと思います。

 

 

CUDとは 

CUD認証とは、特定非営利活動(NPO)法人カラーユニバーサルデザイン機構が発行を行う、“製品が多くの人にわかりやすい配色であることを保証する第三者認証の証”です。(※1)

人それぞれ色の伝わり方が異なるため、正しく情報が伝わるよう色の使い方に配慮しようという取り組みです。私が赤色に見えていても黒っぽく見えてしまう人もいるため、みんなにとって、より分かりやすい配色を選択していきます。

 

なぜCUD認証を取得したのか

弊社では「言語」「距離・時間」「個性」「温度・感情」「経験」という5つの視点からサービスの開発や新機能の追加を行なっています。その中の「個性」から色の伝わり方が違うことで生じるコミュニケーションの課題解決に取り組むことにしました。もともと、私が入社前の面接時より、代表の瀬沼からカラーユニバーサルの話を聞いており、会社としても取り組んでいきたいことだと前々から私も認識していました。

 

変更点

では、実際にCUD認証を取得するにあたっての変更した箇所をいくつかご紹介したいと思います。

 

1. 赤文字からオレンジへ

ワウトークで使用していた赤が暗めで黒と同じように見えてしまうため、「注意を集める、強調する、違いを表現できていない」という指摘がありました。改善案としては、明るいオレンジよりの色に変更することでした。ただ赤文字はあらゆる所で使っていたため、全てを変更するのがとても大変でした。ただ色を変更すればいいという訳ではなく、動的に色を変更しているところもあるため(例えば、クリックすると色が変化するなど)、見落としがないようにと神経を使った気がします。

f:id:yamamoto5555:20200311094711j:plain

 

2.グラフの色

 共有機能では、アンケートを取ることができ、その結果はグラフで表示されます。そのアンケートのグラフで使用している色が差が少ないということでいくつか変更しました。それぞれの項目に白縁をつけたり、グラフの項目をクリックすると情報が表示されるなど、もともと対応していたところもあり、全ての色を変更する必要はありませんでした。ただ僅かな色の変更なので、私も変更するときに色の差異を認識することが難しかったです。

 

f:id:yamamoto5555:20200311095241p:plain

 

まとめ

正直CUD認証を取得にあたって、「色の変更が多くなるのでは」、「現在の製品とかなり違う色を提案されるのでは」と不安もありました。嬉しいことに、ワウトークの強みでもあるシンプルさが使用している色にも出ており、改善箇所の指摘も多くなかった気がします。意外と文字の色をオレンジに変更しても、私の中では違和感もあまりなく、今では馴染んでいるように感じます。

 

今回のCUD認証の取得から、色自体を認識できないというのではなく、背景色との色の差が少ないため分かりずらさが生じたり、強調するなどの色の役割ができていなかったことを知りました。デザイン性だけではなく、新たな色に関する視点を意識するようになったので、今後の開発にも活かしていきます!

 

 

我々ワウテック技術開発部はこのような環境で開発をしています。
興味を持った方がいらっしゃればいつでもご連絡下さい。

f:id:wowtech-dev:20190313163146j:plain

 

駆け出しエンジニア1年目で学んだ3つのこと

f:id:yamamoto5555:20200203135617j:plain

 

Web開発チームのフロントを担当している山本です。 

最近では技術開発部の仲間も着々と増え、再来年入社の新卒採用まで始まりました。基本的に技術開発部は実務経験のある方が主なのですが、私は実務未経験からの採用でした。エンジニアを目指している人やエンジニアとして働き始めた人たちがエンジニアとして働くイメージが膨らむよう、エンジニア1年目で得た3つの学びを紹介したいと思います。

 

 

学び1: ReactとReduxの技術面での挑戦

Reactでの開発時にデータ管理の複雑さが増していき、Reduxを取り入れようという話になりました。それからWeb開発チームでも定期的にRedux勉強会を開催されるようになりました。毎回テーマを決め、各自で事前に予習をし、勉強会でお互いに学んだことを共有するスタイルで行っています。Reduxを勉強する中で、Reactの復習にもなり、初期の頃より理解できることが増えてきたのを実感できたのも嬉しかったです。

 

学び2: 機能(サービス)リリースするまでの見積もりの大切さ

機能追加などを行う中で、現在の自分の力を考慮し、実装にかかる時間を正確に見積もることが大切だとよく上司から言われます。無限に時間があればいいのですが、そういうわけにはいきません。機能実装の時に必要な作業を書き出し、それに対してかかる作業時間を見積もるようにしています。数時間で終わるだろうと思っていても実際に取り掛かると手間取り、見積もりと差が出ることがよくありました。また作業時間の見積もりは正確だとしても他の作業が発生することもあるため、それも事前に想定しながら見積もることが必要です。見積もり時間が短いからいいというわけではなく、自分の力量を知るために自分と向き合う時間でもあると思っています。

今はInstaganttでスケジュール管理をしており、タスク状況を視覚的に把握できるので便利です。他にもオススメのツールがあれば教えて欲しいです。

 

学び3: 仕様の決定からデザインについて考えるようになる

初めて機能追加する時に、仕様の可能性が無限大だということに気がつきました。ユーザーが使う時のことを考えながら、開発期間内でできることを決めていく必要があります。既存の機能のことも考慮しないといけないため、色々なケースを想定する必要があり、何度も話し合いが必要なこともあります。

 

また私の場合デザイナーにデザイン依頼する前に、自分が実現したいものを伝えるため、ワイヤーフレームを作成します。大まかな配置も伝えたいので、色々と調べたり部内メンバーからもフィードバックをもらうことがあります。ワイヤーフレーム自体は、HTMLやCSSでコードを書きながら調整したり、既にあるコンテンツをつなげながら作っています。ワイヤフレームを作るようになり、他のサイトのレイアウトなども意識するようになりました。

 

まとめ

以前のエンジニアに対して、コーディングだけが仕事内容だというイメージがあったのですが、仕様決めからスケジューリングなどコードを書く上で必要な作業があることも知りました。また未経験でも勉強すればできるようになることも増えると実感し、今後も学び続けたいと思います。 

昨年は目の前のことで精一杯でしたが、今年はES6などの基礎部分を固めたり、もう少しバックエンドのことにも挑戦したりすることで、自分でできることの幅を増やしたいです。

 

 

我々ワウテック技術開発部はこのような環境で開発をしています。
興味を持った方がいらっしゃればいつでもご連絡下さい。

f:id:wowtech-dev:20190313163146j:plain

 

ペアプログラミングを試してみた

どうもこんにちは!web開発チームのしまねです。
最近web開発チームでペアプログラミングに取り組んでみました。
取り組んだ開発はまだリリースまでいっていませんが、どのように取り組んだのか・やってみた感想などを振り返ってみたいと思います。

 

目的

目的としては大きく3つありました。

目的① レビューが十分にできていない状況を変えたい

 コードレビューの依頼は来るのですが自分の開発業務もあるため、十分にできていないなぁという思いを少し前から抱えていました。例えばある機能を実装するとしてそれに関するコードをすべてレビューするとなると、まとまった時間が必要となるためついつい後回しにしてしまっていました。そして結局十分な時間がとれず深く見れずに終わってしまうという。。
 ペアプログラミングで開発すればレビューせざるを得ないためレビュー不足な状況を変えることができるのではないかと考えました。

目的② 新卒が入った時に研修で使えるかを検証したい

 ワウテックでは新卒採用を始めていて近い将来新卒が入社します。新卒の研修の一環としてペアプログラミングはいいんじゃないかなと思っていたので、その効果を検証する必要がありました。

目的③ テスト時のバグ改修の工数を減らしたい

 開発の工数は見積もりやすいのですが、テストに出したあとのバグ改修はバグの数によって工数が増減するため見積もりにくくスケジュールが押してしまうことがありました。
 もしもテスト提出の時点で極力バグを少なくできればテスト工数の振れ幅も小さくなり見積もりやすくなるはずです。
 2人で1人分のコードしか書けないので開発スピードは遅くなりますが、2人で確認しながら進めるのでバグが減ってテスト時のバグ改修の工数では短くなるのではないかという期待がありました。

 

使ったツール

  • Live Share

https://visualstudio.microsoft.com/ja/services/live-share/

 Live Shareというプラグインを使えばVisual Studio Codeでソースコードを複数人で編集できるようになります。
 誰か1人がホストになり共同編集する人を招待し、招待された人はホストのファイルを編集できるようになります。
 他の人がどこを編集しているのかはカーソルで表示されてわかりやすかったです。

f:id:wt-shimane:20200107102151p:plain

VScodeのLive Shareでファイルを共同編集している様子

 招待したり招待されたホストに接続する際にMicrosoftアカウントかGitHubアカウントが必要です。

 

やり方

 調べてみるとペアの中でドライバーとナビゲーターという役割に分ける方法があったので参考にしました。
参考サイト: ペアプログラミングのやりかた
https://qiita.com/kanatatsu64/items/3f04d0116e22392efaca


ナビゲーターの役割
・プログラムの構成を考える
・テストを書く
・ドキュメントを書く
・ドライバーの疑問をググる
・ドライバーが書いたプログラムをレビューする

ドライバーの役割
・コードを書く

その他にはルールとして次のことを決めました。
・開始時間と終了時間とどこまでやるかを決める
・1時間を目安に休憩

 

いざ実践

 今回は僕がナビゲーターでペアのメンバーがドライバーで進めていくことにしました。
 まずナビゲーターの僕がコーディングの前に大まかな作りを説明し、処理をコメントで書いていきました。
 この間はドライバーはやることがなくなってしまうので最初だけでもこの作業はあらかじめやっておくべきでした。
 キリの良いところまで処理を書いてドライバーにコーディングを始めてもらいました。
目の前でどんどんコードが書かれていくのが面白くてしばらく見ていたのですが、「いけない、いけない。次の処理のコメント書かなくちゃ」ということでいったん次に実装予定の処理をコメントでどんどん書いていきました。
 その後はドライバーの書いたコードを見たり、疑問点に答えたり、次の実装を書いたりと進めていって最初に目標にしていた部分まで実装してその日は終わりにしました。
1回やってみた時点で、2人とも他の業務もあり今回ペアプログラミングを行ったプロジェクトだけやるわけにはいかないので週に何回か2~3時間くらいでやってみよう、また、ペアプログラミングをする部分はそのプロジェクトのコアになるようなロジックの部分にしてcssの設定等の見た目の部分は1人で進めていこうということになりました。

 

その後何度かやってみて・・・

 

  • ペアプログラミングした部分のソースコードについては考え方まで理解しているのでレビューする必要が全くなかった。
  • ナビゲーターはあまりやることがないのではないかと思っていたがドライバーとのやり取りが多く発生して想定していたよりも忙しかった。
  • 1時間を目安に休憩と決めていたがついつい進めてしまって休憩を取りそこねることが多かった。
  • どこまでやるかを毎回最初に決めておいてよかった。

 というような感想をもちました。

 

まとめ

結論① ペアプログラミングをする上でLive Shareはすごく便利

 1つのPCではなくそれぞれのPCでできるようになるのでナビゲーター側の自由度が高くなります。昔は1つのPCに2人がはりついてやっていたそうですが、それだとお互いにかなりストレスになると思います。

結論② どこまでやるかを毎回最初に決めておくことが重要
 ペアプログラミングをしていると1人でやるより疲れるので予めゴールを設定しておくと気が楽です。気が楽なだけですが続けていくには重要なことです。

結論③ 改めてコードレビューの時間をとる必要はない
 ペアプログラミングを行った部分に関してはドライバー側が書いたコードもナビゲーター側が設計しているし、議論しながら進めているためコードを書き終わった時点でもうレビューはしなくてもいい状態になっています。

結論④ 新卒の研修としてはとてもアリ
 マンツーマンでしっかりコードの書き方から見ることができるので新卒の研修時には非常に有用だと思いました。研修の際には逆にナビゲーターをやってもらってプログラムの構成を考えてもらうのもありかもしれません。

 目的③についてはまだテストまで到達していないので検証できていないです。。
 ただ現時点の感想では、仮にペアプログラミングで開発した方が工数がかかったとしてもメンバー間の知識の共有や議論して進めることでの品質のアップと他に得られるものがあると思います。

 どうやってコードを書くのかについては体系的に説明するのは難しいため、書いているところを見てもらうのが一番早いです。まだまだ慣れませんがもうしばらく続けてみたいです。
 今回はやりませんでしたがLiveShareを使えばリモートワーク中でもペアプログラミングできるかもしれないので近い将来チャレンジしてみたいです。

 

我々ワウテック技術開発部はこのような環境で開発をしています。
興味を持った方がいらっしゃればいつでもご連絡下さい。

f:id:wowtech-dev:20190313163146j:plain

 

2020年もワウテックをよろしくお願いします

新年あけましておめでとうございます。アプリ開発チームの岡野です。

今年もよろしくお願いします。

 

今年で2回目ですが、ワウテックでは毎年年明けに全社で神田明神に参拝に行っています。

9時に神田明神に到着。去年も天気がよくなった気がしますが、残念ながら今年も雨でした(2敗)

f:id:okano4413:20200108111921j:plain

 

待ち時間の間にお守りを購入。我らが技術開発部部長(自分の上司)は、今年もIT情報安全祈願のお守りを買って早速会社のデスクに飾っていました。去年はこれのおかげでほぼ半年間重大な障害なく過ごせました。今年もご利益があるよう願います。

 

個人的には今年も金運のお守りを買いました。宝くじが当たりますように。。。(_人_)

f:id:okano4413:20200108122037j:plain

上司の机に飾られてるIT情報安全祈願

去年は文化交流館という箇所の2階で参拝しましたが、今年は御神殿で参拝できました。(去年は混雑日だったため代表者以外は文化交流館2階で参拝という形だったようです)

f:id:okano4413:20200108113215j:plain

神田明神境内図

f:id:okano4413:20200108120828j:plain

会社として参拝して神社の方に商売繁盛の祈願をしてもらう間参列している会社の名前が呼ばれるのですがIT系の企業名が多く呼ばれていました。IT時代を感じますね。

混雑日を避けたことや去年よりも開始時間が早いこともあってか人は比較的少なく、スムーズに参拝は終了しました。

 

解散後、去年買ったお守りをお焚き上げ所に渡し、今年一年の運勢を占うべくおみくじを購入しました。

結果は

大吉でした :D

うまくいかないことがあってもおおらかな心で構えていろというありがたいお言葉。

忘れないように持って返って飾っておくことにします。

f:id:okano4413:20200108113750j:plain

 

 

今年もきっと慌しくなるでしょうが、公私共に最高な1年にできるように頑張りたいと思います。

今年もワウテックをよろしくお願いします。

 

参考リンク

神田明神

https://www.kandamyoujin.or.jp/

我々ワウテック技術開発部はこのような環境で開発をしています。
興味を持った方がいらっしゃればいつでもご連絡下さい。

f:id:wowtech-dev:20190313163146j:plain

大きなActivityは小さく分割したほうがいいお話

こんにちは。ワウテックAndroidアプリ担当の岡野です。

今回は珍しくAndroidに関する投稿です。

WowTalkには様々な機能がありますが、私が着任当時に実装した機能がタスク管理機能でした。当時はiOS担当だったため、Androidの実装は当時の担当の方がしてくれた(※1)のですが、最近不定期に機能改善をする際にAndroidのタスク管理機能のメンテナンスに苦心することが多かったので思い切ってアーキテクチャの変更に取り組みました。

1 タスク管理機能の概要

WowTalkでは作業内容をタスクとして管理する機能があり、テキスト情報に加えて画像やドキュメントファイルを添付し、タスクの担当者・関係者間で共有できる仕組みです。タスクには期限が設定でき、期限切れ当日には通知が届くようにもなっています。

f:id:okano4413:20191204135117p:plain

自分はもっぱら個人のタスク管理に使うことが多い

このタスク管理機能は大きく3種類のActivityから構成されています。

リスト画面 タスクの一覧を表示する画面
作成画面 タスクを作成する画面
詳細/編集画面 作成したタスクの詳細を確認し、編集する画面

 

f:id:okano4413:20191203153350p:plain

タスク管理機能。詳細画面と編集画面は1つのActivityで実装されていた

それぞれ独立したActivityで実装されており、サーバーからのデータ取得リクエスト呼び出しや描画に伴うデータ加工などもそれぞれのActivityで実装されていました。

2. 実装の問題点

上述したとおり複数の役割を1つのActivityで実装したため、多いものではソースコードの行数が2800行近くにまでなりました。多いと見るかは個人差があるかもしれませんが、個人的にはかなり苦労するレベルです。またメンテナンスも忘れた頃にするので、毎回作業時に「これなにしてるんだっけ...」と処理を見返すことが何度もあり、作業効率があまりに悪いということもありました。

3. 改善方針

今回はタスクの詳細・編集画面を改修することにし、下記の2つを実施することにしました。

画面ごとにActivityを切り分ける

タスクの詳細画面と編集画面は類似したインターフェース及びデータ構造のため、1つのクラスで実装されていましたが、それぞれ表示の仕方が変わるため、モードの切り替え時に逐次ViewのVisibilityを変更していました。

これらを個別のActivityに分割することで状態の管理などを気にしなくて済むような実装にしていきます。 

データとViewの操作をActivityから切り分ける(MVVMアーキテクチャ)

合わせてデータ操作とViewの状態管理も切り分けて、それぞれが依存しないようにしていきます。今回はGoogleがAndroidアプリ実装時の推奨アーキテクチャとしているMVVM(※2)を採用することにしました。

簡単にMVVMについて書くと、データの取得/送信部分をModel(M)クラスに任せ、ViewModel(VM)はModelからデータを受け取り、View(V)が使いやすい形でデータを提供します(※3)。

今回2つの画面のデータ取得ロジックがほぼ同じため、下記の様にModelを共通化した形で変更を加えることにしました。

f:id:okano4413:20191204141623p:plain

1つの大きなActivityを画面と処理の種類で分割する

4. 改善の効果

画面ごとにActivityを切り分けた上、MVVMにすることで1クラスあたりのソースコード量が減り、かなり見やすくなりました。合わせて以下の様な効果がありました。

・現在の状態を意識する必要がなくなった

・クラス内部の変数が減り、各変数への依存関係も減ったためロジックの構築がシンプルになった

・表示のための"ビューロジック"と"実際の表示処理"が個々のクラス内で完結しているため、実装時に頭の中で同時に考える負担が減り実装が早くなった

1つ目と2つ目は書いている通りで、今の画面が詳細画面なのか編集画面なのかを意識する必要もなく、またそれぞれの状態で利用していた変数を個別のClassで管理する様になったので、条件分岐などの記述が減り1つの関数の行数もだいぶ削減されました。

 

3つ目に関しては実際に経験があるとイメージしやすいのですが、1つのActivity内でデータの取得から表示までの一連の流れを書く場合

①バックグランドでデータの取得

②受け取ったデータをメインスレッド(Handler)にポストする

③メインスレッド内で変数への保存を行いデータの表示処理を行う

みたいなことをするわけですが、一連の流れを描く際に1つで今回取り扱うデータとは関係ないデータを取り扱う処理(例えば描画や別の処理のエラーハンドリング関数)をかき分けながらHandlerを探すなんてことがよくあります。

これが無くなるだけでもかなり実装時の負担は低減されました。 

5. 気づいたこと

今回実装していて思ったのがViewModelが思ったよりも肥大化したことでした。実装にあたりLiveData(※4)を利用した値の自動更新を採用したのですが、これとビューロジックを一度に実装するとそこそこな分量になりました(1000行程)

また通常ModelはSingleton(※5)で実装してDBやサーバーから取得したデータをキャッシュすることを推奨(※6)されているのですが、別のタスクを開いたはずが直前のタスクの情報が表示されてるなんてこともありました。ActivityとModelは依存関係を排除しているとはいえ、用途は想定して実装しないといけませんね。

 

6. 終わりに

今回はタスク管理機能のFatActivityをビューロジックの切り分けと整理によって2800行あったソースコードを200~1000行のクラスに分割し、保守性を改善しました。今後はこの画面以外でも同様の問題を抱えている箇所を1つずつ改善していければと思います。

 

当たり障りのない内容でしたが、基本的なことの大切さを実感します。社内ではこういった既存実装が抱える問題を「負の遺産」と呼んでいますが、まだまだ負の遺産はありますので1つずつ返済していきたいと思います。

 

7. 注釈

※1 : Androidの実装は当時の担当の方がしてくれた

決して前任者のソースコードがわかりにくいというわけではないです。

※2 : アプリのアーキテクチャガイド

https://developer.android.com/jetpack/docs/guide?hl=ja#cache-data

※3 : MVCと何が違うのか

いわゆる昔のModel-View-Controller(MVC)と同じに聞こえるかもしれませんが、個人的に思うControllerとViewModelの大きな違いはまさにViewModelである点です。

画面で表示する際、仕様によって表現を変える必要が出てくる場合があります。例えばサーバー側ではLong型の UnixTimeで保存し、アプリ側ではこれを「2019-11-29」と表示する場合もあれば「明日」「今日」の様な表現にする場合もあります。

これらの表示の上での計算(=ビューロジック)は、MVCにおいてControllerで記述することはせず、Viewで加工することになります。一方MVVMではこのビューロジックをViewではなくViewModelに担当させることでViewは複雑な処理を記述する必要がなく、表示だけに集中できます。

 

※4 : LiveDataの概要 

 https://developer.android.com/topic/libraries/architecture/livedata?hl=ja

※5 : デザインパターン シングルトン

https://qiita.com/shoheiyokoyama/items/c16fd547a77773c0ccc1

※6 : Androidアプリ設計パターン入門

https://peaks.cc/books/architecture_patterns

 

我々ワウテック技術開発部はこのような環境で開発をしています。
興味を持った方がいらっしゃればいつでもご連絡下さい。

f:id:wowtech-dev:20190313163146j:plain