1 of 28

abceed

辞書ボトムシート

作り方

株式会社Globee

2 of 28

自己紹介

鈴木　俊裕

iOSエンジニア歴 8年+

6月からEMを兼務しています

34歳で5歳の娘がいます

最近トランペットを始めました

F1とか好きです

twitter: @toshi0383

会社のメンバーページ

3 of 28

背景と仕様

Sheetっぽいハーフモーダル

テキスト選択の検知

複数要素からのイベントハンドリング

4 of 28

背景と仕様

5 of 28

abceedの辞書機能

有料機能
ウィズダム、ジーニアス、オーレックス、

自社コンテンツ

教材: TOEIC、単語、読み物系、ニュース

自社コンテンツ

6 of 28

課題

開発チームのボトムアップな意見

もっとタップ数を減らしたい。
辞書がフルスクリーンなので学習体験が途切れる。

「画面全体を覆わない形でサッと意味を確認できる」

「辞書を開いたまま元の画面を触れる」

Android Chromeの標準の辞書の挙動がイメージに近い。

7 of 28

デザイン

8 of 28

デザイン

9 of 28

どう実装を進めたか

10 of 28

Sheetっぽいハーフモーダル

11 of 28

「Sheetっぽいハーフモーダル」とは

要件

高さ2段階のハーフモーダル
Swipe-To-Dismiss
辞書出したまま元の画面は触りたい

12 of 28

「Sheetっぽいハーフモーダル」実現方法

要件

高さ2段階のハーフモーダル
Swipe-To-Dismiss
辞書出したまま元の画面は触りたい

選択肢

高さを自由に調整できるiOS 15 Sheet API
元のコンテンツを触れるPanModal
自前カスタムモーダル

13 of 28

“Sheet” like PanModal

https://github.com/slackhq/PanModal/pull/169

14 of 28

プルリクの中身を見てみましょう

意訳: アルファ背景部分ドラッグできる既存仕様おかしくない？

15 of 28

プルリクの中身を見てみましょう

意訳: そのままだと後ろのビュー触れなかったからcontainerViewは触れないようにしたよ。けどそのままだと手前のビューが触れないのでこの行が必要だよ。

16 of 28

HitTestView

UIViewでOK

17 of 28

HitTestView

> 手前のビューが触れないのでこの行が必要だよ。

触れる後ろのビューから手前のビューにタッチを委譲する

18 of 28

テキスト選択の検知

19 of 28

テキスト選択の検知

canPerformActionで検知する iOS 16からsenderの型が変わってうまく判定できなくなった
WKWebView … selectionchangeイベントで検知する
UITextView … selectedRangeをoverrideして検知する

20 of 28

テキスト選択を検知するコード

21 of 28

複数要素からのイベントハンドリング

22 of 28

複数要素ある画面の対応

単語の選択がWebView->TextViewに切り替わった場合

イベント順は当然ながら特に保証されない

この場合、ボトムシートは閉じないで単語だけ切り替えたい

23 of 28

WebView->TextViewに選択が変わったとき

WebView「選択外れたよ」
TextView「選択されたよ」

こういう処理だと..

if let word = 現在選択されている単語を取得する() {

// シート開く or 更新する

} else {

// シート閉じる

}

TextView「選択されたよ」
WebView「選択外れたよ」

一回閉じてしまう

debounceでごまかせる

閉じてしまう

ごまかせない

イベントの順番

24 of 28

ユーザーがまだ辞書使ってそうだったら閉じない

flatMapLatest + delay

25 of 28

辞書ボトムシート完成

26 of 28

利用者の声

27 of 28

まとめ

PanModalのSheet実装は結構いいと思うのだがマージされていない
イベントハンドリングが煩雑になってしまったが、やった甲斐はあった？
ボトムシート、ハーフモーダル、PhrasePreviewなど名前が氾濫してしまってる
iOS 15 Sheet APIは出番かと思ったけど使えなかった
iOS 16 Edit Menusアップデートにより影響を受けた

28 of 28

Globeeについて

28

社　名：	株式会社 Globee
本　社：	東京都港区東麻布一丁目7番3号
代表者：	幾嶋研三郎

設　立：	2014年6月12日
社員数：	36名（派遣・業務委託含む）
資本金：	32,476,000円（資本準備金含む）

エンジニア積極採用中！