個人開発

【個人開発】実際にアプリを使っているところを見て気づいたこと

今日はミューチャを知人に紹介したときに触っているところを隣で見ていて感じたことを書いていこうと思います。

知り合いに触ってもらった

実際に合う機会があった人にミューチャを紹介すると、友だち登録をして開くところまではスムーズにいくのですが、ページを開いたときに読み込みの時間が長く、我慢できずに連続でタップしてしまったり閉じてしまったりしていました。

また、別の人に触ってもらって感想を聞いたところ、読み込みに時間がかかるので早くしてほしいという要望をもらいました。

許容範囲だと思っていた

もちろん動作確認は自分の環境でしていて、長いときに表示まで大体読み込みに2 ~ 3秒かかっていました。体感的に許容範囲だと思っていました。

ただ、自分が動作確認をしていたのは自分の家で Wifi が通っていて、動作する端末もIpone 14 pro と限りなく完璧に近い環境で行っていました。

実際に読み込みに時間がかかるといっていた知り合いの端末は Iphone SE でさらに格安SIMという環境でした。

また、実際に開くところを見せてもらったのですが、測ってないので体感ですが 5 s くらいかかっていて僕も遅いと強く感じました。

ユーザーはリマインドを外の Wifi が通っていない、電波の悪いところで開くこともありえるのでそこを考える必要があるなと感じました。

高速化するためにしたこと

現状、Mucha のログインに関するアーキテクチャーは以下のようになっています。(わかりやすくするために簡略化しています)

このログインの処理は大きく2つに分けることができます。

  1. LINEサーバーに対する前処理
  2. バックエンドサーバーに対してログイン処理

この内②の処理がかなりボトルネックになっていました。

ただ、ログインをしないと当然リマインドを設定することはできません。

そこで、①の処理が終わったタイミングで、ログインしなくても表示できるところ表示してユーザーはリマインドの入力ができるようにしておきました。

そして、入力中にバックグランドでログイン処理を行い、ユーザーが登録ボタンを押すころにはログインができている状態にするということをしました。

これにより、きちんと測定はしなかったのですが体感2倍以上高速に表示することができるようになりました。

ブラウザにキャッシュするのは?

最初はユーザー情報をブラウザにキャッシュすることも考えました。SPA でブラウザのキャッシュを使うには基本的にローカルストレージになると思っていて、これを使う場合 XSS などの攻撃に対する耐性が低くなります。

ミューチャの場合、キャッシュにトークンを持たせておく必要があるので、認証情報であるトークンをブラウザに持たせるのはセキュリティー的に危険と考えてこの方法は採用しなかったです。

さいごに

スマホで使うアプリの場合は、ユーザーが外出中に使うことを想定して、ネットワークがつながりにくい状態で動作確認するということをやったほうがいいということが分かりました。

下が今開発しているミューチャです!
友だち登録してトーク画面のメニューからリマインドの設定ができます。よければぜひ使ってみてください。

ABOUT ME
sakai
三重出身の28歳。前職はメーカーで働いていて、プログラミングスクールに通って未経験からWeb業界に転職しました。Railsをメインで使っていて、AWSも少しできます。音楽を聞くこととYoutubeを見るのが好きです。最近はへきトラ劇場にハマってます