<h1 id="%E3%81%93%E3%82%8C%E3%81%AF%E3%81%AA%E3%81%AB%EF%BC%9F">
<a class="header-anchor-link" href="#%E3%81%93%E3%82%8C%E3%81%AF%E3%81%AA%E3%81%AB%EF%BC%9F" aria-hidden="true"></a> これはなに？</h1>
<p>こんにちは、エンジニアの<a href="https://twitter.com/decoch718" target="_blank" rel="nofollow noopener noreferrer">冨永</a>です！<br>
モバイルアプリを開発していると、コード量や処理が増えることで徐々に起動時間が遅くなることがありますよね。SNKRDUNK でも一時期起動時間が遅くなっていて改善をしたことがあります。<br>
この記事では、その改善をするために取り組んだことをまとめました。</p>
<h1 id="firebase-performance-monitoring-%E3%81%AE%E5%B0%8E%E5%85%A5">
<a class="header-anchor-link" href="#firebase-performance-monitoring-%E3%81%AE%E5%B0%8E%E5%85%A5" aria-hidden="true"></a> Firebase Performance Monitoring の導入</h1>
<h2 id="firebase-performance-monitoring-%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#firebase-performance-monitoring-%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Firebase Performance Monitoring とは</h2>
<p>Firebase Performance Monitoring サービスを使用すると、Apple アプリ、Android アプリ、ウェブアプリのパフォーマンス特性を把握できます。<br>
Performance Monitoring SDK を使用してアプリからパフォーマンス データを収集し、Firebase コンソールでデータのレビューと分析を行います。これにより、アプリのパフォーマンスをどこで改善できるかがリアルタイムでわかり、その情報を使用してパフォーマンスの問題を解決できます。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9479a3143f77c" src="https://embed.zenn.studio/card#zenn-embedded__9479a3143f77c" data-content="https%3A%2F%2Ffirebase.google.com%2Fdocs%2Fperf-mon%3Fhl%3Dja" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://firebase.google.com/docs/perf-mon?hl=ja" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://firebase.google.com/docs/perf-mon?hl=ja</a></p>
<h2 id="%E3%81%AA%E3%81%9C%E5%B0%8E%E5%85%A5%E3%81%97%E3%81%9F%E3%81%AE%E3%81%8B">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%9C%E5%B0%8E%E5%85%A5%E3%81%97%E3%81%9F%E3%81%AE%E3%81%8B" aria-hidden="true"></a> なぜ導入したのか</h2>
<p>SNKRDUNK は元々 WebView で作られたアプリでした。現在ではモバイルアプリエンジニアが増え、徐々に Flutter への移行をしています。<br>
Flutter 化の最初のリリースをする際に社内のメンバーから起動時間が遅くなっているというフィードバックをいただいたのですが、モバイルアプリエンジニアが目視で起動時間を何回か測定し比較をしたところ明確な差がなく修正を行わなかったことがあります。<br>
その際に目視ではなく、起動時間の数値で計測し監視をできるようにしていきたいと考え、Firebase Performance Monitoring を導入しました。</p>
<p>また、SNKRDUNK は初回起動のみ表示する画面があり起動時に初期化処理が行われています。導入する際に Firebase Performance Monitoring でデフォルトで計測できる起動時間だけでなく、起動から初期化処理完了後に初めて画面が表示されるまでの時間もカスタムコード トレースで計測することにしました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__57dae81c89ba8" src="https://embed.zenn.studio/card#zenn-embedded__57dae81c89ba8" data-content="https%3A%2F%2Ffirebase.google.com%2Fdocs%2Fperf-mon%2Fcustom-code-traces%3Fhl%3Dja%26platform%3Dios%23add-custom-code-traces" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://firebase.google.com/docs/perf-mon/custom-code-traces?hl=ja&amp;platform=ios#add-custom-code-traces" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://firebase.google.com/docs/perf-mon/custom-code-traces?hl=ja&amp;platform=ios#add-custom-code-traces</a></p>
<h1 id="%E8%B5%B7%E5%8B%95%E6%99%82%E9%96%93%E3%81%AE%E6%94%B9%E5%96%84%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E8%B5%B7%E5%8B%95%E6%99%82%E9%96%93%E3%81%AE%E6%94%B9%E5%96%84%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> 起動時間の改善のためにやったこと</h1>
<h2 id="%E5%8E%9F%E5%9B%A0%E3%81%AE%E7%89%B9%E5%AE%9A">
<a class="header-anchor-link" href="#%E5%8E%9F%E5%9B%A0%E3%81%AE%E7%89%B9%E5%AE%9A" aria-hidden="true"></a> 原因の特定</h2>
<p>導入しアプリを長期で運用していたところ、起動時間が遅いという意見が上がったため Firebase Performance Monitoring を使った調査をしました。<br>
結果、特定のバージョンから起動時間が遅くなっていることがわかったためリリースの差分を確認し原因の特定を行いました。</p>
<p>原因は、起動時に不要な処理が入っていたこと、並列実行できる処理が直列で実行されている箇所があったため修正しました。</p>
<h2 id="%E7%B5%90%E6%9E%9C">
<a class="header-anchor-link" href="#%E7%B5%90%E6%9E%9C" aria-hidden="true"></a> 結果</h2>
<p>結果として、起動時間を 76% 高速化することができました。やったぜ！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/98a911916eb5-20230824.png" alt loading="lazy" class="md-img"></p>
<h2 id="%E5%86%8D%E7%99%BA%E9%98%B2%E6%AD%A2%E7%AD%96">
<a class="header-anchor-link" href="#%E5%86%8D%E7%99%BA%E9%98%B2%E6%AD%A2%E7%AD%96" aria-hidden="true"></a> 再発防止策</h2>
<p>また今回は、リリース後にモバイルアプリエンジニアが起動時間が遅くなっていることに気が付かなかったという課題がありました。<br>
現在は Firebase Performance Monitoring のアラート機能を使い、指定の時間を超えたら開発者にアラートが飛ぶようにして起動時間が遅くなったら気がつけるように改善を行いました。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/22074b842051-20230824.png" alt loading="lazy" class="md-img"></p>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
<p>▼下記ではより詳しく弊社のプロダクト開発組織について紹介してますので　是非ご覧ください！</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ec0f225f58112" src="https://embed.zenn.studio/card#zenn-embedded__ec0f225f58112" data-content="https%3A%2F%2Frecruit.soda-inc.jp%2Fengineer" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://recruit.soda-inc.jp/engineer" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://recruit.soda-inc.jp/engineer</a></p>
<p>またSODAでは特にエンジニアを積極的に採用しておりますので<br>
少しでも弊社に興味を持っていただけましたらご応募お持ちしております！</p>
<p>▼詳しい会社情報はこちらから</p>
<span class="embed-block embed-speakerdeck"><iframe src="https://speakerdeck.com/player/d1d5f206b8ba44e9b1faf50b6c17ed0a" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></span>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fe96828a862a3" src="https://embed.zenn.studio/card#zenn-embedded__fe96828a862a3" data-content="https%3A%2F%2Frecruit.soda-inc.jp%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://recruit.soda-inc.jp/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://recruit.soda-inc.jp/</a></p>


モバイルアプリの起動時間の監視・改善するためにやったこと

Firebase Performance Monitoring の導入

起動時間の改善のためにやったこと

firebase

Discussion