iPhone Duo に対応し、カスタマイズしたタブバーも作り直して申請しました

iPhone Duo の発売は10月23日です。発売日に Duo を手にした人にも、いつもどおり使ってもらえるようにしたくて、「ICカード残高確認」を対応させ、バージョン 5.0.0 として審査に申請しました。

対応のなかでいちばん時間を使ったのは、タブバーに重ねているスキャンボタンでした。この記事では、主にその話を書きます。

タブバーに重ねた独自のスキャンボタン

このアプリは、画面下の真ん中に大きな丸いスキャンボタンを置いています。タブバーからはみ出すくらいの大きさです。改札の前など、急いで残高を確かめたい場面でも迷わず押せるように、片手で持ったまま親指が届く位置にしました。アプリを起動するとまずこのボタンが目に入るので、何をするアプリかもすぐ分かります。

左が iPhone、右が対応後の閉じた Duo です。iPhone では画面の下にあるタブバーが、Duo では右端の縦のバーになります。ボタンは iPhone より小さくなりましたが、バーからはみ出す大きさと、読取とカード履歴のあいだに置く形は残しています。

実はこの形、iOS の標準のタブバーにはありません。タブバーの真ん中を空けておき、その上に自分で作ったボタンを重ねています。OS の部品はなるべくそのまま使う方が、OS の更新や新しい端末にも素直についていけるので、本当は楽です。それでも、このボタンだけは自分で作ってきました。

Duo では、そのボタンのレイアウトが崩れました。Duo を閉じて外側の画面で使うときと、開いて横向きに持つときは、タブバーが画面の端に沿った縦長のバーに変わります（Apple は vertical bar と呼んでいます）。標準のタブは OS が縦に並べ直してくれますが、自分で重ねたボタンまでは面倒を見てくれません。シミュレータで開いてみると、ボタンのために空けていたタブがそのまま残ってバーが間延びし、スキャンボタンはバーの脇に大きく浮いたり、画面の端で切れたりしていました。

無理にカスタムを続けず、OS に任せる手もありました。iOS 27 には、タブの1つを丸いボタンとして強調して見せる仕組みがあります。試してみると、確かに丸いボタンにはなります。ただ、読取やカード履歴のタブから離れた位置に出て、丸の中の絵もほかのタブと同じくらいの小さな記号になってしまいました。手軽ではありますが、これだと iPhone で見慣れた大きなボタンとは別物です。

左が OS に任せた場合で、スキャンが小さな丸になってバーから離れています。右が採用した形です。

結局、Duo でもカスタムを続けることにしました。縦のバーの読取とカード履歴のあいだに空のタブを2つ入れて、その境目にボタンを重ねています。1つだと窮屈で、3つだと間延びしたので、2つに落ち着きました。ボタンの中の端末の絵も、Duo の形に描き直しています。ちなみに Duo を開いて縦に持つと、バーは画面の下に戻り、ボタンも iPhone と同じ大きさになります。

OS の動きに合わせる

置き場所が決まったあとも、手を入れるところが残りました。縦のバーは、思っていたよりもよく動きます。

いちばん手こずったのが長押しです。縦のバーを長押しすると、バーが画面の内側（右端にあるときは左）へ広がり、アイコンもそれに合わせてアニメーションしながら移動して、下にタブの名前が出てきます。画面下のタブバーでは見かけない動きです。最初の版では、タブは動くのにボタンだけがその場に残ってしまいました。そこで、広がったバーの真ん中へボタンも動かすようにしました。

長押しすると（右）、タブの名前が出て、ボタンもバーの真ん中へ移ります。

位置はこれで合いましたが、動き方が合っていませんでした。OS のアニメーションは、すっと止まらずに、少し行き過ぎてから戻ります。ボタンだけがまっすぐ動くと、そこだけ別の部品のように見えてしまうので、弾み方もタブとそろえました。指を離すと、バーと一緒に元の位置へ戻ります。

回転と開閉にも気を使いました。Duo は向きを変えたり開け閉めしたりするたびに、バーが横になったり縦になったり、左右の端を移ったりします。最初は、そのあともボタンが前の位置に取り残されることがありました。向きや形が変わるたびに置き場所を確かめ直すようにして、いまは起きていません。

Split View でもひとつ落とし穴がありました。アプリが画面の左側に置かれると、縦のバーも左端に付きます。右に付いたときと同じつもりで置いていたら、左のときだけボタンが消えていました。いまは左右どちらでも、同じようにボタンが出ます。

将来の OS の更新でバーの作りが変わると、ボタンをどこに置けばいいか、アプリの側で分からなくなるかもしれません。そのときは、さっきの OS の強調表示のタブに切り替わるようにしてあるので、読み取りの入口はなくなりません。

時間はかかりましたが、シミュレータで試した範囲では、どの持ち方でもボタンはタブと一緒に動いてくれています。OS の動きを自分で追いかけている部分なので、この先の OS の更新でも、また見直すことになると思います。

申請

申請にあたって、App Store のスクリーンショットも Duo 用に作りました。今回の Duo 対応から横向きでも使えるようにしたので（通常の iPhone はこれまでどおり縦向きだけです）、横長の画像も用意しています。開いて横向きにすると、読取画面では利用履歴とグラフが、カード履歴ではカードの一覧と取引が左右に並びます。

用意したのは5枚で、縦長（2007×2853）が3枚、横長（2853×2007）が2枚です。ここでは縦長と横長に分けて載せているので、ストアでの並び順とは違います。

App Store Connect の「デバイスプレビュー」では、端末に iPhone Duo を選んで、ストアでの見え方を確かめられます。参考までに、閉じた Duo の縦向きと横向きで表示したものを載せておきます。

Duo の発売までに審査が通って、発売日から使える状態になっていることを願うばかりです。

追記（2026年10月11日）

申請した翌日に審査を通過し、バージョン 5.0.0 が App Store で公開されました。Duo の発売を待たずに、Duo に対応した版をダウンロードできます。