案件でちょくちょく遭遇するんですけれど、「ChromeやMacのSafari、Android環境では問題なかったのに、iOS(iPhone)だけにバグが起きてしまう」という事案がままあって、その対応のためだけに遅くまで残業することもあり、悩ましく思っています。
この状態はまさに、「iOSは現代のIE6(インターネットエクスプローラー6)」とも言えるのではないかと、ある意味そう思わざるをえません。
では具体的にどう悩ましく思っているのかを、極力わかりやすく述べていきます。同じく悩んでいる人や、これからWEBデザイナー・フロントエンドとして働こうとしている人にも、知識として知っていただければと。
それから、以下の内容は2021年の現状で書かれている部分は、あらかじめご留意ください。
正確な情報を求む
誤りがあればご連絡ください
iOSにだけ起きる代表的なバグ
iOSは悩ましい
まず、iOS特有のバグや症状がどのようなものがあるのか、以下に代表的なものを挙げていきます。
iOSは背景固定と背景切り抜きの併用ができない
現状のiOSでもっとも頭を悩ませるバグが、
background-attachment:fixed; //背景固定
background-size: cover; //背景トリミング(切り抜き)
このふたつのCSS併用がiOSだけできないというもの(MacのSafariでは問題ないのに……)。
背景固定して、閲覧者のデバイス幅に合わせて背景をトリミング加工もするという、現代のデザイン重視のサイトだとよくあるレイアウトが、iOSにだけできないんですよね。
ちなみにiOSで見るとどうなるかというと、原寸サイズ(?)に拡大されてしまい、なんの背景がわからなくなってしまいます。これはデザイン上かなり致命的です。
fixed(完全固定)やsticky(追従固定)といった、さまざまな人が代替案を考案していますが、前者は1ページに一箇所しか使えませんし、後者はその表現のために全体のコードを微調整しなければならず、余計な時間がかかってしまいます。
このバグが厄介(というよりタチが悪い)なのは、ほぼほぼ公式認定のバグであることと、それを数年前から言われているのに、Apple側はいまだに修正しないことなんですね。
ここを直してもらえれば残業せずに救われる人が世界中で出るでしょうから、早急に対応してもらいたいものです。
background:fixedでの背景固定はiOS(iPhone)でうまく動かないのでこれを使いましょう|ホームページ制作のYCOM
【CSS】background-attachment:fixedがスマホだけ効かない原因と対処法|でざなり
【注意!】iOSでは背景画像が動いてしまう問題について|Qiita
background-attachment:fixed still not supported?|Apple Developer Forums
iOS(iPhone10)はSlickの指スライド操作が無効化される
『Slick』という、Webサイト制作会社やフリーランスなら有名な画像スライドがあります。画像スライドというのは、よく企業サイトのトップページを見ると、最初に画像が左右へ動いたり、ふわーっと切り替わる(フェードイン・アウト)アレのことです。
そしてこの『Slick』はオープンソースライブラリということもあって、誰でも自由に使えるコードな上に自由度も高く、さまざまなサイトでも紹介されているほど、重ねるように有名なんですね。こちらの職場でもよく使っています。
しかしiPhone10のiOSブラウザから、「画像スライドを指(タップ操作)でも動かせるようにする」という挙動ができません。
とはいえ、対応するコードが明確にあるということですし、そんなに難しくないですから、業務を圧迫されることもありませんから、それは救いでしょう。
具体的には、SlickのJavascript(JS)のファイルの最後に、
$(document).ready(function () {
$('.スライドの該当クラス名').on('touchstart', function(){
return true;
});
});
これを追記で入れるだけになります。
jQueryとよばれるライブラリが必要であることや、WordPressだと「$」だと動かない問題が起きるため、「jQuery」と書き換える必要も出てくるかもしれません。
これを語ると長くなりますから、よくわからない方は「jQuery 使いかた」で検索してください。
ただ、これを入れてもiOSだけ指スライドしてもコマ送りのようにスムーズにスライドできない場合もあり、検証は必要です。
【JQuery】Slickのスライダーで、iOS10以上でフリックが効かないバグ対応|MAKOCHIN WEB
slick.jsでフリックの動作が効かないときの対応メモ|kishiken.com
ほかにも縦横比率を維持する「aspect-ratio」がiOSだけ対応されていなかったり(2021年秋に実装予定)、角丸(boeder-radius)とマウスホバー(:hover)の併用が上手くできなかったりと、細かいところはあるんですが、おおむね代表的かつ、致命的になりかねないバグは上記ふたつでしょうね。
コーダーから嫌われていた『IE6』
IE6対応は
いい思い出
この「特定のブラウザに適応させるためだけに残業や追加業務を強いられる」という部分は、かつてWindowsXPなどで使われていた『IE6』を彷彿(ほうふつ)とさせます。
コーディングやフロントエンド知識がない人からすれば、「IE6の何が悪いの? みんな使ってたじゃん」となるんですが、IE6は本当にくせ者でした。
当時のIE6全盛期のころの自分はまだ学生で、趣味でサイトを作っていたレベルでしたが、IE6のためだけに適応させる意味不明なコードなどが多々あったのを覚えています。
どのぐらい嫌われていたのかは、以下のサイト様などがわかりやすいため、興味のある方は参考にしていただければと。というか、マイクロソフト公式すらもIE6を「腐った牛乳」とボロクソに言われ、葬式まであげるレベル。
なぜ、Webサイト制作者からIEは嫌われてきたのか??|株式会社アイビーネット
「IE6は9年前の腐った牛乳」――Microsoftがアップグレード呼び掛け|ITmedia NEWS
IE6の“葬儀”行われる Microsoftから献花も|ITmedia NEWS
記事タイトルでは「iOSは現代のIE6かもしれない」とは書いているんですけれど、正直なところ、まだiOSのほうがマシです。そこもまた救いであり、実際、IE6ほど嫌われてはいませんからね。
ただ重ねるように、iOSのためだけにコードを最適化させる気苦労と憤(いきどお)りは変わりません。
最後に:日本のiPhoneシェアは多くないがしろにできない
日本はiPhone使用率が
非常に高い
iOSってコーダーから見ると悩ましい部分が多々あり、かつてのIE6のようなことをしているんですね。しかもMacのSafari上では問題ないことも多々あることから、「おなじAppleのブラウザなのに、開発部署が別なの?」とツッコみたくなります。
これもまたIE6と似ているんですが、iOS(iPhone)の利用者は特に日本が多いため、「iOSの対応は切ればいい」と単純に言えず、ないがしろにできないのも、頭を抱えている部分です。
そのため、コーディングをするWEBデザイナーやフロントエンドエンジニアの人、またはその業界を目指す人は、サブ端末でもいいのでiPhoneの一台ぐらいは持っておいたほうがいいです。
iPhoneというか、スマホ上ではデベロッパーツール(開発者モード)が使えないため、推測上で直すしかありませんが、全くわからないという状況よりかはマシなはずですからね。
Mac環境なら、『Xcode』というアプリケーションを使用して擬似的なiPhoneの再現は可能ですが、高性能なマシンスペックが必要なため、自信がない場合はオススメしません。
どちらにせよ、AppleはiOS特有のバグを一日でも早く直してもらいたいものです。
当サイトはみなさまの寄付・ご支援により、広告なしの実現やサイト運営・維持をおこなっています。
記事や作品が気に入りましたら、寄付や支援サイトのご支援をよろしくお願いいたします。
寄付に登録・ログインは不要です。文章を書かなくてもスタンプだけの寄付もできます。
記事の原寸大作品、サンプル黒塗り無しは支援サイトで閲覧できます。
FANBOXは表現規制・規約変更により作品が非公開になる場合があります。
プロフィール
赤竹ただきちTadakichi Akatake
仕事で「YMYL(医療・健康・お金)記事をほぼ生成AI任せに書く」という、「これありえないだろ……」という他社事案に遭遇し驚きを隠せない。
というのもGoogleは2016年にWelq事件があったから、YMYL記事は独自性・信ぴょう性を厳しくチェックするようになっているんだよね。
それにYMYL記事を生成AI任せに書くとペナルティになる可能性も発表していて、こういった記事では生成AIを使うのはいいにしても、検証・監修で補完することが必須。
これを理解せず「SEOを上げるお手伝いをします!」という業者がやるんだから、いくらなんでもリテラシーが低すぎる。それで検索ペナルティを受けたら損害賠償モノなんだけどなぁ。
イラストレーター・マークアップエンジニア(コーダー)・Webデザイナー・ライターのウサギ好き。多様な絵柄を描け、外国人でも絵でわかるマンガ、ウサギと口内描写にこだわりを持つ。
コーディングとWebデザインは両方可能。納期が短いなどいった案件では、「デザインとコーディングのアドリブ同時進行」という荒業もおこない、SEO施策を意識したマークアップも得意。
フリーランスとの進行ディレクション・指示や、面接担当の経験が幾度もあり、プロ・趣味問わず、絵描きを含めたクリエイティブの姿勢には少々シビア。
「自省・リテラシー・正しい批判の認知・意識向上」をライフワークとし、当サイト記事も「気づき・理解・学ぶ」を全体テーマとして執筆。
当サイトの記事は中学生でも理解できるように計算しながら執筆しており、ネット・SNS上で「わかりやすく参考になる」とご好評の声多数。
「言い訳せずに下手でも自分の弱さを認め、背かず自省して学ぶ意識を忘れない(=謙虚な)人」は、年齢・性別問わず好きなタイプ。
最新記事
2024.12.11
【サンプル】ぶっこみおしおき【オリジナル】
2024.11.25
【設定画】シーラ【オリジナルキャラクター】
2024.11.10
【設定画】平間さん【オリジナルキャラクター】
2024.10.28
【元ネタ解説】ソニック×シャドウジェネレーションズの評価とポリコレ疑惑など【ソニックシャドウG / Steam】
2024.10.20
【サンプル】デ・ロイテルのおくちお触り【艦隊これくしょん】
2024.10.12
【シャドウ】アニメ『闇の序章』の全話ストーリー・元ネタ解説【ソニック×シャドウジェネレーションズ】
2024.10.09
【限定記事サンプル】デ・ロイテルのおくちお触りメイキング【艦隊これくしょん】
2024.09.30
【イラスト】ダブルうさけつ【オリジナル】
人気記事
2023.07.09
【ポリコレ】ブラックウォッシュ問題=差別と決めつけるのはよくないという話【考察】
2012.02.27
【考察】SNSはしなくてもいい理由と、リテラシーが低い人の特徴・リスク【情報弱者】
2023.10.03
【徹底解説】追加DLC『超・完全決戦』のクリア感想と攻略について【ソニックフロンティア】
2022.09.01
【絵描き向け】無断転載禁止・自作発言NGは効果がない理由と、明確な対処法【解説】
2022.04.10
【解説】ネット広告が不快で気持ち悪い原因と、広告除去禁止サイトについて【問題】
2019.10.12
【徹底解説】なぜ日本人のレビューはひどい、低俗・民度が低いと言われるのか【コメント問題】
2021.12.26
【解説】絵描きは性格が悪い変人・変わり者や子供っぽい人が多い理由【クリエイター】
2023.06.20
【イラスト】ナッコーズとKnuckles Ratesの元ネタ解説 【ソニころ】
ピックアップ
2013.07.17
【コラム感想】日本人は足の小指が二関節である割合が多いとか【オリジナル】
2020.10.14
【イラスト】経口タイプ修復剤【艦隊これくしょん】
2021.01.17
【イラスト】創作イラスト3枚【オリジナル】
2023.05.23
【ブロマガサンプル】咽頭・胃の描きかた【オリジナル】
2018.06.08
【イラスト】高潔チアガールズとツイッターに上げたハウンドわんわん絵を手直し【押忍!闘え!応援団ほか】
2019.12.22
【イラスト】脳筋の駄メイドに罰を与えるだけ【アズールレーン】
2019.01.27
【絵描き向け】あると作業効率が上がるツール・アプリまとめ【作業環境】
2019.02.19
【イラスト】ぽいぬの生ぽんぽん【艦隊これくしょん】