<p data-line="0" class="code-line">こんにちは、<a href="https://www.spacemarket.com/" target="_blank" rel="nofollow noopener noreferrer">スペースマーケット</a>でモバイルエンジニアをしている村田です。</p>
<p data-line="2" class="code-line">以前投稿した記事【<a href="https://zenn.dev/spacemarket/articles/amenity-highlight" target="_blank">アプリエンジニアがプロダクトをグロースさせる施策立案</a>】に続き、今回はスペースの利用時間をスムーズに延長するための機能について考え、施策を立案しました。iOSならではのLive Activityを活用した機能を実装しましたので、開発時に直面した課題も含め本記事で紹介します。</p>
<h1 id="live-activity%E3%81%A8%E3%81%AF" data-line="4" class="code-line">
<a class="header-anchor-link" href="#live-activity%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Live Activityとは</h1>
<p data-line="6" class="code-line">ロック画面やDynamic Islandに、アプリの最新情報を表示する機能で、ユーザーがリアルタイムの情報を一目で確認し、関連するアクションを素早く実行できるようにします。</p>
<p data-line="8" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/a0b36edeb634-20240825.png" loading="lazy" class="md-img"></p>
<p data-line="11" class="code-line">例えばUberEatsアプリでは、注文品の進捗状況（調理中、配達中など）がロック画面に表示されるようになっており、商品が手元に届くまで逐一ユーザーがアプリをフォアグラウンド移行して確認する手間がなくなったのかなと思います。</p>
<p data-line="13" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__2672661535d6b" src="https://embed.zenn.studio/tweet#zenn-embedded__2672661535d6b" data-content="https%3A%2F%2Fx.com%2Ftomokusutomi%2Fstatus%2F1664208722934247424" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/tomokusutomi/status/1664208722934247424" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/tomokusutomi/status/1664208722934247424</a></p>
<h1 id="live-activity%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9F%E6%96%B0%E6%A9%9F%E8%83%BD" data-line="15" class="code-line">
<a class="header-anchor-link" href="#live-activity%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9F%E6%96%B0%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> Live Activityを利用した新機能</h1>
<p data-line="17" class="code-line">冒頭に記載した通り、今回Live Activityを利用した機能を開発しました。iOSエンジニアとして漠然と触ってみたいと思っていた技術だったため、Live Activityを起点に施策の立案を行いました。</p>
<h2 id="%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E5%88%A9%E7%94%A8%E6%99%82%E9%96%93%E3%81%AE%E5%BB%B6%E9%95%B7%E4%BF%83%E9%80%B2%E6%A9%9F%E8%83%BD%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E5%87%BA%E3%81%97" data-line="19" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E5%88%A9%E7%94%A8%E6%99%82%E9%96%93%E3%81%AE%E5%BB%B6%E9%95%B7%E4%BF%83%E9%80%B2%E6%A9%9F%E8%83%BD%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E5%87%BA%E3%81%97" aria-hidden="true"></a> スペース利用時間の延長促進機能アイディア出し</h2>
<p data-line="21" class="code-line">スペースマーケットは最短1時間からレンタルスペースを予約でき、15分単位で利用時間の延長が可能です。スペース利用中に、利用残り時間と延長ボタンをロック画面に表示することで、ユーザーが気軽に延長をしてくれるのではと考えました。また、延長が可能であること自体知らないユーザーへのリーチにもつながれば嬉しいなと思いました。</p>
<p data-line="23" class="code-line">スペース利用前/利用中/利用後と適切なWidgetを切り替え、各ステップユーザーにとって有益な情報を出したいなと考えを粗くFigjamへ書き出し✍️</p>
<p data-line="25" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/461cb92331ae-20240825.png" loading="lazy" class="md-img"></p>
<h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" data-line="27" class="code-line">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" aria-hidden="true"></a> デザイン</h2>
<p data-line="29" class="code-line">考えがある程度固まった後、デザインチームに話を持っていき、仕様を詰めつつデザインの依頼を行いました。UIレイアウトの制約が多くとても面倒だったと思います、BIG感謝！（<a href="https://developer.apple.com/jp/design/human-interface-guidelines/live-activities" target="_blank" rel="nofollow noopener noreferrer">Live Activities – Human Interface Guidelines</a> ）</p>
<h3 id="%E5%88%A9%E7%94%A8%E5%89%8D" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E5%88%A9%E7%94%A8%E5%89%8D" aria-hidden="true"></a> 利用前</h3>
<p data-line="34" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/0a068db4b59b-20240825.png" loading="lazy" class="md-img"></p>
<h3 id="%E5%88%A9%E7%94%A8%E4%B8%AD" data-line="36" class="code-line">
<a class="header-anchor-link" href="#%E5%88%A9%E7%94%A8%E4%B8%AD" aria-hidden="true"></a> 利用中</h3>
<p data-line="38" class="code-line">利用残り時間と経過時間が視覚的に分かりやすくなるよう経過時間プログレスバーを設置</p>
<p data-line="40" class="code-line">※ 後述しますがプログレスバーの更新が難しく泣く泣く削ることになりました..。デザイナーさんに申し訳なかったです🙇</p>
<p data-line="42" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/4fbedf22bd9f-20240825.png" loading="lazy" class="md-img"></p>
<h3 id="%E5%88%A9%E7%94%A8%E5%BE%8C" data-line="44" class="code-line">
<a class="header-anchor-link" href="#%E5%88%A9%E7%94%A8%E5%BE%8C" aria-hidden="true"></a> 利用後</h3>
<p data-line="46" class="code-line">利用終了後は延長ができないため、レビューを投稿ボタンを設置</p>
<p data-line="48" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/534d2c789b3e-20240825.png" loading="lazy" class="md-img"></p>
<h1 id="%E9%96%8B%E7%99%BA%E6%99%82%E3%81%AE%E8%AA%B2%E9%A1%8C" data-line="50" class="code-line">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E6%99%82%E3%81%AE%E8%AA%B2%E9%A1%8C" aria-hidden="true"></a> 開発時の課題</h1>
<p data-line="52" class="code-line">UIレイアウト制約やアプリがバックグラウンド状態を考慮した実装（バックグラウンドタスク or <a href="https://developer.apple.com/documentation/activitykit/starting-and-updating-live-activities-with-activitykit-push-notifications" target="_blank" rel="nofollow noopener noreferrer">Push通知</a>）が必要だったり、制限の多さから開発を進める中で仕様の変更を余儀なくされる場面がありました。そのいくつかを紹介させていただきます</p>
<h2 id="%EF%BC%98%E6%99%82%E9%96%93%E5%88%B6%E9%99%90" data-line="54" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%98%E6%99%82%E9%96%93%E5%88%B6%E9%99%90" aria-hidden="true"></a> ８時間制限</h2>
<p data-line="56" class="code-line">Live Activityのアクティブ時間は最大8時間のようで、この制限を超えるとOSが自動でLive Activityを終了してしまうようです。利用時間前の表示時間+利用時間が8時間を超える場合、そもそもLive Activityを起動しないような工夫が必要でした。</p>
<blockquote data-line="58" class="code-line">
<p data-line="58" class="code-line">A Live Activity can be active for up to eight hours unless its app or a person ends it before this limit. After the eight-hour limit, the system automatically ends the Live Activity, and immediately removes it from the Dynamic Island. However, the Live Activity remains on the Lock Screen until a person removes it or for up to four additional hours before the system removes it — whichever comes first. As a result, a Live Activity remains on the Lock Screen for a maximum of 12 hours.</p>
</blockquote>
<p data-line="60" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__be32d9a1079a" src="https://embed.zenn.studio/card#zenn-embedded__be32d9a1079a" data-content="https%3A%2F%2Fdeveloper.apple.com%2Fdocumentation%2Factivitykit%2Fdisplaying-live-data-with-live-activities%23Understand-constraints" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.apple.com/documentation/activitykit/displaying-live-data-with-live-activities#Understand-constraints" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.apple.com/documentation/activitykit/displaying-live-data-with-live-activities#Understand-constraints</a></p>
<p data-line="62" class="code-line">また、当初は8時間経過する度にLive Activityの再起動を繰り返すことでOS8時間制限を突破しようと考えていました。ただ、Live Activityはバッググラウンド状態で起動ができないという制限があることを知り、確実に8時間以内に収める必要がありました</p>
<blockquote data-line="64" class="code-line">
<p data-line="64" class="code-line">Your app can only start Live Activities while it’s in the foreground. However, you can update or end a Live Activity from your app while it runs in the background — for example, by using Background Tasks.</p>
</blockquote>
<p data-line="66" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__884ee0201c273" src="https://embed.zenn.studio/card#zenn-embedded__884ee0201c273" data-content="https%3A%2F%2Fdeveloper.apple.com%2Fdocumentation%2Factivitykit%2Fdisplaying-live-data-with-live-activities%23Start-the-Live-Activity" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.apple.com/documentation/activitykit/displaying-live-data-with-live-activities#Start-the-Live-Activity" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.apple.com/documentation/activitykit/displaying-live-data-with-live-activities#Start-the-Live-Activity</a></p>
<h2 id="%E3%83%90%E3%83%83%E3%82%AF%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89%E3%82%BF%E3%82%B9%E3%82%AF" data-line="69" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%83%E3%82%AF%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89%E3%82%BF%E3%82%B9%E3%82%AF" aria-hidden="true"></a> バックグラウンドタスク</h2>
<p data-line="71" class="code-line">利用中Widgetにおける残り時間と経過時間のプログレスバーの更新は、フォアグラウンドとバックグラウンドそれぞれで1分に1回更新する設定をしていました。アプリチームでバックグラウンド状態の動作確認を各メンバーの端末で進める中で、確実に更新されるメンバーと、うまく更新されないメンバーが存在し、動作が不安定であることが判明しました。</p>
<p data-line="73" class="code-line">バックグラウンドタスクへの依存を減らすために1分1回更新を諦め、プログレスバーを削除する決断をしました。</p>
<p data-line="75" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/eac1bd486f35-20240826.png" loading="lazy" class="md-img"></p>
<p data-line="77" class="code-line">利用残り時間の表示には、SwiftUIのTextに <a href="https://developer.apple.com/documentation/swiftui/text/init(_:style:)" target="_blank" rel="nofollow noopener noreferrer">Text.DateStyle.timer</a> スタイルを設定することで、利用終了時刻までのカウントダウンを表示するよう対応。</p>
<div class="code-block-container"><pre class="language-swift"><code class="language-swift code-line" data-line="79"><span class="token keyword">let</span> endedAt<span class="token punctuation">:</span> <span class="token class-name">Date</span> 
<span class="token class-name">Text</span><span class="token punctuation">(</span>endedAt<span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token punctuation">.</span>timer<span class="token punctuation">)</span>
</code></pre></div><aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="84" class="code-line">フォーマットは以下の形式固定で、任意のフォーマットへの設定はできないようです<br>
Example output: 2:32 36:59:01</p>
</div></aside>
<hr data-line="88" class="code-line">
<p data-line="90" class="code-line">開発中に原因を特定することはできませんでしたが、リリース後にREALITYさんの記事を拝見し、位置情報オンにしているかどうかの差だったのかなと想像しています</p>
<blockquote data-line="92" class="code-line">
<p data-line="92" class="code-line">調査したところ、位置情報など特定のバックグラウンドタスクがアプリで実行されている必要があり、配信の音声再生だけでは、バックグラウンド更新ができる条件を満たさないようでした</p>
</blockquote>
<p data-line="94" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__942a4744accbb" src="https://embed.zenn.studio/card#zenn-embedded__942a4744accbb" data-content="https%3A%2F%2Fnote.com%2Freality_eng%2Fn%2Fn1ba7b7d02127" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://note.com/reality_eng/n/n1ba7b7d02127" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://note.com/reality_eng/n/n1ba7b7d02127</a></p>
<h1 id="%E6%88%90%E6%9E%9C%E7%89%A9" data-line="96" class="code-line">
<a class="header-anchor-link" href="#%E6%88%90%E6%9E%9C%E7%89%A9" aria-hidden="true"></a> 成果物</h1>
<p data-line="98" class="code-line">利用時間延長ボタンを押下した際の挙動になります。<br>
アプリをフォアグラウンドに移行し、利用時間延長画面を表示する一連の流れをワンタップで行えて便利！</p>
<table data-line="101" class="code-line">
<thead data-line="101" class="code-line">
<tr data-line="101" class="code-line">
<th>ロック画面</th>
<th>Dynamic Island</th>
</tr>
</thead>
<tbody data-line="103" class="code-line">
<tr data-line="103" class="code-line">
<td><img src="https://storage.googleapis.com/zenn-user-upload/04c5a0ba1f77-20240826.gif" loading="lazy" class="md-img"></td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/01d046482a3a-20240826.gif" loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<h1 id="%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E5%BE%8C%E7%B5%90%E6%9E%9C" data-line="106" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E5%BE%8C%E7%B5%90%E6%9E%9C" aria-hidden="true"></a> リリース後結果</h1>
<p data-line="108" class="code-line">8月中に実行された予約延長の約1割が、Live Activityを導線としたものでした！ 8月の頭にリリースしたばかりでバージョンの浸透率が低い中でも、良い結果が出ているのではないかと感じています。</p>
<p data-line="110" class="code-line">ちなみに、Dynamic Islandの拡張表示に設置した予約延長ボタンは、数回しかタップされていませんでした🥺 Dynamic Island対応端末利用ユーザーが多くない事は前提ですが、Dynamic Islandをロングタップして拡張表示されること自体、認知度が低いのかもしれません</p>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB" data-line="112" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
<p data-line="114" class="code-line">スペースマーケットでは一緒に働く仲間を募集中です！<br>
詳しくは以下採用ページをご確認ください。</p>
<p data-line="117" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8d36cb22a4c4a" src="https://embed.zenn.studio/card#zenn-embedded__8d36cb22a4c4a" data-content="https%3A%2F%2Fspacemarket.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://spacemarket.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://spacemarket.co.jp/recruit/engineer/</a></p>
<p data-line="119" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6a70ece6d8d85" src="https://embed.zenn.studio/card#zenn-embedded__6a70ece6d8d85" data-content="https%3A%2F%2Fherp.careers%2Fv1%2Fspmhr%2Ff8x6AkIueBSb" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://herp.careers/v1/spmhr/f8x6AkIueBSb" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://herp.careers/v1/spmhr/f8x6AkIueBSb</a></p>
<p data-line="121" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__90c658ef00192" src="https://embed.zenn.studio/card#zenn-embedded__90c658ef00192" data-content="https%3A%2F%2Fherp.careers%2Fv1%2Fspmhr%2F9zYSnsOQ0UMA" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://herp.careers/v1/spmhr/9zYSnsOQ0UMA" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://herp.careers/v1/spmhr/9zYSnsOQ0UMA</a></p>


Live Activityによるスペース利用時間の延長促進機能

スペース利用時間の延長促進機能アイディア出し

zenn-contents

Discussion