iPhoneのキーボードと何度も戦った話
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
ツール工房.ai の中でも、TODOツールはいちばんシンプルな部類です。やることを書いて、終わったらチェックする。それだけのツールなので、作るのも一瞬で終わるだろうと思っていました。
ところが公開してすぐ、自分のiPhoneで使ってみて固まりました。入力しようとタップした瞬間、せり上がってきたソフトウェアキーボードに押されて画面が崩れ、入力欄があらぬ位置に浮いたり、画面の上のほうが潰れたりする のです。
自分が何を打っているのか見えないTODOツール。これはさすがにまずい、と直しはじめたのですが、この戦いが想像よりずっと長引きました。直し方を変えては実機で試す、を数えるのが嫌になるくらい繰り返しました。今回はその記録です。
何が起きていたのか
パソコンで作っている間は、この問題にまったく気づきませんでした。パソコンにはソフトウェアキーボードがないので、画面が隠れようがないんですよね。
iPhoneで入力欄をタップすると、画面の下半分くらいをキーボードが占領します。このとき、ページ全体がうまくずれてくれれば入力欄は見えたままなのですが、私のツールでは画面の作り方が悪かったのか、入力欄がちょうどキーボードの裏に潜り込む位置に来てしまっていました。
症状は一つではありませんでした。入力欄が画面の途中に浮いてしまうこともあれば、既にある項目を書き直そうとすると、その行がキーボードの裏に隠れてしまうこともある。使えないことはないけれど、毎回これでは誰も使ってくれない気がしました。
直しては実機で試す、の繰り返し
ここから試行錯誤が始まりました。やったことを大きく分けると、三つの方向がありました。
一つ目は、画面の固定方法を変える 方向です。ページ全体の高さの決め方や、スクロールのさせ方をいろいろ変えて、キーボードが出たときに画面が自然にずれてくれる形を探しました。
二つ目は、キーボードの高さに追従させる 方向です。キーボードが出たことを検知して、その高さのぶんだけ入力欄を持ち上げる、という考え方です。理屈の上ではいちばん筋が良さそうに見えました。
三つ目は、タップを先回りする 方向です。入力欄が押された瞬間、キーボードが出てくる前に、こちらから先に入力欄を画面の上のほうへ移動させておく作戦です。
私はエンジニアではないので、それぞれの具体的な直し方は、AIに案を出してもらいながら試しました。ここで厄介だったのが、パソコン上の確認ではほとんど意味がない ことです。ソフトウェアキーボードの挙動は実機でしか再現できないので、直すたびにデプロイして、iPhoneで開いて、タップして確認する。この一往復がとにかく地味に時間を食いました。
追従作戦が新しい事故を生んだ
この戦いの中でいちばん印象に残っているのが、二つ目の「キーボードの高さに追従させる」作戦です。
画面全体を固定したうえで、キーボードの高さのぶんだけ入力欄をこちらの手で持ち上げる、という動きを入れたところ、たしかに入力欄は隠れなくなりました。やった、と思ったのも束の間、今度は iPhoneで入力欄の位置そのものが崩れる という新しい事故が起きました。開き方やタイミングによって、入力欄が中途半端な高さに取り残されたり、変な位置に浮いたりするのです。
隠れる問題を直したら、位置が崩れる問題が生まれる。一勝一敗。この頃には、スマホのキーボードまわりは触れば触るほど別の何かが壊れる沼なんだな、と実感していました。
完璧主義を捨てたら落ち着いた
何度目かのあたりで、ふと考え方を変えました。
それまでの私は、「どこから開いても、どのタイミングでタップしても、寸分たがわず同じ動きになること」を目指していました。でも、よく考えると利用者にとって大事なのは、打っている文字が見えること と タップしたら入力できること の二つだけです。開き方によって画面のずれ方が多少違っても、その二つさえ守られていれば実害はありません。
そこで、こちらの手で入力欄を持ち上げるのをやめて、キーボードが出て狭くなった画面の高さに、画面全体を素直に合わせるやり方を軸にしました。入力欄は自然とキーボードのすぐ上に収まるようになり、あれだけ暴れていた画面が、うそみたいに落ち着いたのです。
ただし正直に書くと、最終形はこの一本槍ではありません。別のページの中に埋め込まれて表示される場合は、この高さ合わせをやめて崩れにくい表示に切り替えていますし、既にある項目を書き直すときには、編集中の行がキーボードの裏に隠れないよう、見える位置まで動かす処理も別に入れてあります。軸は一つ、例外への手当てが二つ、という構成です。
完璧をあきらめた瞬間に解決する、というのは何とも釈然としませんが、振り返ると「全部の場面で同じ挙動」という自分で勝手に課した条件が、難易度を何倍にもしていたのだと思います。
振り返り
少なくとも私にとって、スマホのキーボード対応は「こんなに難しいのか」と思い知らされる沼でした。特に、iPhoneで、別の画面の中に埋め込んだ表示で、キーボードを出す——という組み合わせは、想像していたより何段も手強かったです。
この経験からの教訓は二つあります。一つは、スマホで使うツールは実機で試すまで完成と言えない こと。パソコンの画面でどれだけきれいに動いていても、iPhoneでタップした瞬間に別物になります。
もう一つは、割り切りも設計のうち だということです。すべての場面で完璧に振る舞わせようとするより、「利用者が本当に困る点はどこか」を絞って、そこだけ確実に守る。個人でツールを作っていると、この線引きが品質と自分の正気の両方を守ってくれる気がしています。
それにしても、と思うのです。これまで他のサイトやアプリをスマホで使うとき、入力欄をタップするとキーボードが出てきて、画面がすっと上にずれて文字が見えている——あの何気ない一瞬を、私は一度も意識したことがありませんでした。単純な仕組みで勝手にそうなっているのだろう、くらいに思い込んでいたのです。
自分で作ってみて、ようやくわかりました。あの一瞬の裏側には、機種や開き方の違いに何度もつまずいて、直しては実機で確かめてを繰り返した誰かの時間が積もっている。うまく作られたものほど、苦労した跡が表に出てこない のだと思います。使う側が何も気づかないことこそが、作った人の勝利なのでしょう。
シンプルなツールほど、こういう地味な戦いが裏にある。TODOツールを開くたびに、あの長い戦いをちょっと思い出しますし、他所のサイトで入力欄がすっと上にずれるたび、少しだけ頭が下がるようになりました。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ