フロントエンド
エンジニア
T.K
新年あけましておめでとうございます！
本年初登場、フロントエンドエンジニアのT.Kです。
フロントエンド
エンジニア
T.K
たまにイベントにDJとして出演しております。
弊社ロジカルスタジオの納会でDJ体験会を開催したらかなり好評でした。
一瞬音量ミスって、納会会場にPENICILLINが爆音で響き渡りました。
皆様この
超寒い季節、いかがお過ごしでしょうか。
私は寒いときは度数が高めのお酒をコンビニで買って飲んで、なんとか寒さをごまかしております。
さて本日は、この超寒い季節に似つかわしくない、
私がコーディング中に出会った背筋が冷たくなる現象についてのお話。
ある日私は、前任者から引き継いだコーディング案件を進めておりました。
そして、テスト環境にアップして、iPhoneでブラウザチェックをしたところ、
ブラウザにこんな表示が出てページが見れなくなりました…
！！！！！？？？？？
こんな表示見たことない…
というわけで、本記事ではこのような現象を解決できるかもしれない対処法をご紹介。
同じ現象が起こった方は、ぜひご参考にしてください
目次
解決法
制作したページをiOSで開くと「問題が繰り返し起きました」と表示されるときは、
ページの読み込み時の動作を軽くしてみましょう！！！
私の場合は、
読み込み時に表示されるiframeを減らす
という方法で解決しました。
解決の経緯
まずはGoogle検索、しかし解決せず
問題が起こったときに、やはり役立つのはGoogle検索。
Apple公式のヘルプを見てみると、
あの、俺開発者やねんけど…
そこで、さらに他を検索してみると、まず出てくる対処法は
- キャッシュを削除する
- 履歴を削除する
- JavaScriptをオフにしてみる
- iOSを更新する
- iPhoneを再起動する
といったもの。
しかし私の案件の場合、どれを行っても解決しませんでした…
別に特殊仕様のサイトとかいうわけでもないのに…
詰んだ…どうしよう…
ここである一つの事実に気づく
実は本案件、phpを使用してヘッダとフッタを読み込む案件でした。
そして、読み込む前と読み込む後では動作が異なることが判明。
- 読み込む前：初期状態ではエラーは発生せず、画面を横に傾けるとエラーが発生する
- 読み込む後：初期状態の時点でエラーが発生している
ん？ということは、これはページの容量の問題か・・・？
しかしこのページはそんなに重くないはず…
そう思ってもう一度HTMLファイルを見回してみると…
HTMLファイル中に、iframeタグがいっぱい！！！
そのページのモーダルウインドウ内に、iframeタグがいっぱい書かれておりました！！！
しかもそのモーダルウインドウ、内容が複数種類あるのですが
全種類がHTMLファイル中に記入されており、JavaScriptの役割といえば下記2点のみ…
- モーダルウインドウの表示/非表示
- モーダルウインドウの内容のうち、表示するものにクラスを付与して内容を切り替え
どうやらページ読み込みの時点で全てのiframeを読み込もうとしたため、クラッシュしてしまったようです。
ではどうすればクラッシュを防げるかというと…
ページ読み込み時に必要のないiframeタグは、必要なときにJavaScriptで動的に読み込む
読み込みの時点ではiframeは必要ないし、
HTMLファイルに直接書いてたマークアップをJavaScriptに移行して表示しよ！
私の場合は上記の方法で解決しました。
具体的には下記のような方法です。
- JavaScriptで、モーダルウインドウのマークアップ内容を全て変数に格納
- 内容を切り替えるときは、その変数中から該当するマークアップを取得して表示
これで無事、クラッシュせずにページを読み込むことができました…
助かった…
最後に
どうやらiframeを多用すると読み込み時にページが途端に重くなってしまうようです。
どうしても必要な場合は、今回の方法のように、読み込み時に重くならない工夫をしなければならないようですね。
「このような事象が起こる＝必ずしも重さが原因」というわけではありませんが、まずはここを疑ってみてください。
ところで
弊社ロジカルスタジオでは、フロントエンドエンジニアを募集中です！
未知の現象も恐れず解決し合える、素敵な環境が整っていますことよ
今回非常に
お世話になった
エンジニア
べーさん
そこのあなたのご応募、
社員一同、心より、
