開発ブログ
iPhoneのSafariで確認画面が出なかった話：confirm() をアプリ内のカードに置きかえた
ポケット箱庭を公開した次の日、iPhoneのSafariでだけ「ファイルを開く」が効かない不具合がありました。原因は、ブラウザに最初から入っている確認画面（JavaScript の confirm）でした。この記事では、何が起きていたのか、どう直したのか、そこから決めたルールを書きます。
起きていたこと
ポケット箱庭では、作品をファイルにして保存したり、人から受け取った作品を開いたりできます。ファイルを開くと今の箱庭が置きかわるので、その前に「今の箱庭は上書きされます。よろしいですか？」と確認を出していました。
ところが iPhone の Safari で、作品を共有シートから端末に保存したあとに「ファイルを開く」でファイルを選ぶと、何も起きませんでした。エラーも出ず、箱庭もそのまま。パソコンや Android では問題なく開けていました。
原因は「出なかった確認画面」
確認には、ブラウザ標準の confirm() を使っていました。1行で書けて、「OK」か「キャンセル」かを返してくれる便利な関数です。調べていくと、iPhone の Safari では、共有シートを閉じた直後などの場面で、この確認画面が表示されないまま「キャンセル」と同じ結果が返ってきていると見られました。
つまりアプリから見ると、利用者が毎回「キャンセル」を押したように見えていたわけです。だから何も起きなかった。プログラムとしては正しく動いているので、エラーにもなりません。気づきにくい不具合でした。
直し方：確認はアプリの中のカードで出す
ブラウザ標準の確認画面に頼るのをやめて、アプリの画面の中に確認用のカードを出すようにしました。カードには説明と「OK」「キャンセル」のボタンがあり、押されたほうの答えをアプリに返します。見た目はほかのメニューやカードとそろえたので、画面の雰囲気も崩れません。
このカードは自分たちで描いているので、ブラウザの都合で出なかったり、勝手にキャンセル扱いになったりしません。直したあとは、iPhone の Safari でも、ファイルを選ぶと確認のカードが出て、OK で作品が開くようになりました。
決めたルール
- 確認・お知らせは、ブラウザ標準の画面を使わない：
confirm()やalert()の代わりに、アプリの中のカードを使います。その後に入れた「共有リンクの作品を編集する前の確認」なども、同じカードで出しています。 - iPhone の Safari で確かめる：日本では iPhone を使う人が多いので、共有シートやファイル選択のように、OS の画面をはさむ操作は、とくに iPhone の実機で確かめることにしました。
- 「何も起きない」は不具合の合図：エラーが出ない不具合は、利用者からは「壊れている」としか見えません。押しても反応がないところがあれば、ご意見フォームやお問い合わせから教えていただけると助かります。
おわりに
ブラウザだけで動くアプリは、端末やブラウザの違いをそのまま受けます。便利な標準の機能ほど、端末によって動きが違うことがあります。AIといっしょに作っていても、最後に実機で触って確かめることの大切さを、あらためて感じた出来事でした。
ポケット箱庭で遊ぶ無料・登録不要・スマホのブラウザで遊べます