はじめに
過去の投稿と同じ画面に関する失敗談です。
画面の制御が複雑すぎたので今は改善してシンプルになりましたが、開発において失敗した話を共有したいと思います。
レスポンシブWebデザインの概要
- PC用のラジオボタンがあり、画面幅が803px以上なら表示される。選択した際、選択されたプランの表の外枠に色が付く
- スマホ用のラジオボタンがあり、画面幅が803px以下なら表示される。選択した際、選択されたプランの表のみが表示される
実際のサンプルコード
下記がサンプルコードです。
何の変哲もない普通のコードですがスマホ上での挙動が予想外でした。。。
- 画面幅が803px以上ならPC用のラジオボタンを表示。表とラジオボタン初期化。
- 画面幅が803px以下ならスマホ用のラジオボタンを表示。表とラジオボタン初期化。
シンプルにこの２つが実装したかっただけです。
$(window).on('resize', function() {
if (window.matchMedia('(min-width: 803px)')) {
// PC用画面表示、ラジオボタンの初期化
} else {
// スマホ用画面表示、ラジオボタンの初期化
}
});
何が起きたのか
私が見た限りだと、PC上の動きは想定内でした。
スマホ上の挙動は個人の端末を使ってたまに動かしていただけなので確認してませんでした。
ある日先輩が私の隣に来て
「見てこれ。この画面から次に進めないんだけど(笑)」
と言いながらスマホを片手にやってきました。
なんだろう。。。
と思ってスマホ画面を見てみると、大変なことが起きてました。
①スマホ用のラジオボタンを選択、ちゃんと選択されたプランの表だけが表示された
②下にスクロール。表が初期化された
「えっ！スマホのスクロールがresizeのelse処理に入ってる！？」
ぱっと見ただけでわかりました。
これは大変！そう思ったけど直しようがなくまずはelseの処理を削除しました。
プロトタイプ作成中の段階だったのでしばらくそのままにして放置。
$(window).on('resize', function() {
if (window.matchMedia('(min-width: 803px)')) {
// PC用画面表示、ラジオボタンの初期化
}
});
スマホのブラウザでは、スクロールするとアドレスバーが伸び縮みします。
この際、ブラウザの「表示領域（Viewport）」の高さが変わるため、ブラウザは「画面サイズが変わった！」と判断してresizeイベントを発生させます。
削除のその後
すると結合テストのフェーズに入ってから画面幅が変わった時の初期化処理がない事に気付きました。
「あれ～なんでここのelse処理消したっけ？まあいっか。これが無いと初期化できないし追加しとこ。」
またもとのコードに戻りました(笑)
$(window).on('resize', function() {
if (window.matchMedia('(min-width: 803px)')) {
// PC用画面表示、ラジオボタンの初期化
} else {
// スマホ用画面表示、ラジオボタンの初期化
}
});
別日にまた、、、
隣で先輩がスマホを片手に
「なにこれ？なんでこうなる？次の画面に進めないけど」
２度も同じことを繰り返してました。
これはまずいと思いまたelse処理を削除。
しかしもうフェーズ的に修正しないとまずい！でも案が出てこない。
そう思い先輩に相談しました。
相談後の解決策
結果的に画面幅の判定は別の処理とし、グローバル変数にisMobileを追加。
resize処理が発火された時はその変数を見て処理を分けることに落ち着きました。
var isMobile = checkDevice();
// 画面幅を見てスマホ用か判定
function checkDevice(){
var mobileWidth = '';
if (window.matchMedia('(min-width: 803px)')) {
mobileWidth = '';
} else {
mobileWidth = '1';
}
return mobileWidth;
}
$(window).on('resize', function() {
var currentIsMobile = checkDevice();
if (currentIsMobile != isMobile) {
isMobile = checkDevice(); // 状態を更新
if (isMobile) {
// スマホ用画面表示、ラジオボタンの初期化
} else {
// PC用画面表示、ラジオボタンの初期化
}
}
});
resizeはほんの少し画面幅が変わっただけで発火されるみたいなのでこの書き方が推奨されているみたいです。
これにて一件落着！
おわりに
自社内でスマホアプリの開発をしていない為、レスポンシブWebデザインを実装するにもデバッグができずとても苦戦しました。
未だにデバッグ方法見付かってません。
会社のPCにUSB接続できないので自分のスマホを使ったデバッグもできません。
実際の稼働確認では、修正後のコードをコミット後、自分のスマホを使ってアクセスし挙動確認してました。
現在はここまで複雑な処理ではないためデバッグできない問題は解消されました。
しかし、今後またレスポンシブWebデザインを実装するに当たって壁にぶつかることはありそうです。
それまでに何とかしなきゃ。
頑張ります！