iPhoneだけ表示がおかしい。

WindowsもMacもAndroidも問題なく、iPhoneだけ。

iPhoneのブラウザでだけ表示がおかしい。

このような現象は見たことも聞いたこともなく、ネット上を調べてみてもどこにも情報が見つからない。

だけども今現在、実際に起こっている。

文字コード？

Mac用のVSCodeで作成したファイルは、デフォルトで文字コードが「UTF-8」、改行コードが「LF」となる。

これは特にVSCodeに限ったことではなく、現在主流のエディタでは普通の初期設定だろう。

UTF-8。

2006年、2007年にはすでに、UTF-8はスタンダードになり始めていた。

2010年代に職業訓練校で講師をしていた時期があるが、そのときのカリキュラムでもUTF-8で作成することになっていた。

そもそもエディタの初期設定がUTF-8なのだ。

（HTMLファイルのmeta要素や、CSSファイルの１行目でもUTF-8を指定していた。）

なので、個人でも会社でも授業でも、UTF-8以外でサイトを制作したことが一度もない。

サーバーにファイルをアップロードすると文字コードと改行コードが変わってしまう。

ところが、ここ2年くらい、10年ほど前から使用しているレンタルサーバーで不可思議な現象が続いている。

サーバーのメンテナンス？

昨年、2022年9月にサーバーの大きめのメンテナンスがあり、事前にもメールで連絡が届いていたが、該当サーバーには入っていなかった。

ただし、その後に該当サーバーではないサイトが完全に表示不可となっていることを、クライアント様からの連絡でわかった。

突然の大量メール。

先月末、2023年3月30日に同じサーバー内の別サイトで、1分間に数十通、1日で1,800通以上という大量メールが届いたことがあった。

このサイトのクライアント様はメールの宛先を私とご自身のキャリアメール宛を希望しているため、クライアントの携帯へも1,800通のメールが届いた可能性がある。

サーバーへ問い合わせた約10時間後に、ようやく止まった。

クライアントはサーバーはもちろん、インターネットやホームページも得意ではない方なので、こちらからはあえて報告等はしなかった。

サーバーの迷惑フィルターは「推奨の設定」にしていたが、迷惑フォルダへは振り分けられなかった。

データベース接続確立エラー。

同日早朝には、同じサーバー内の別サイト２つで、「データベース接続確立エラー」も発生していた。

このときも他のサーバーで複数の障害が発生しており、2日前にメンテナンスも行われていた。

過去にない現象。

15年以上のキャリアで、少なく見積もっても数十サイトは制作しているが、文字コードの問題と大量メールは初めてのことだった。

他社サーバーでもなく、携帯のキャリアメールでも経験がない。

ウィルス、マルウェアなどの被害も一度もない。

WindowsからのメールやファイルがShift-JISで届き、Macで開くと文字化けしていた、くらい。

2013年頃のWordPressの事例。

このときは他社のサーバーだったが、2013年頃に「WordPressの不正アクセス」の問題が発生したことがある。

WordPressサイトへの不正アクセスによる、データの改ざんや、踏み台となっていたらしい。

WordPressサイトが対象というアナウンスだったが、なぜか「WordPressではないサイト」が閲覧不可となった。

その日はクライアントの方から夕方から夜間に連絡があり、サーバー窓口へ連絡したところ、至急対応をしていただけすぐに復旧した。

今回同様、クライアント経由で判明した事例なので、ある意味証人がいる。

サーバーのスペックは？

ビジネス向けの、比較的料金高めのサーバー。

2年くらい前に、2日間ほどファイルのアップロードができないという現象があり、その際にサーバー会社のサポートへ問い合わせたところ、なぜか繰り返し「FileZillaを使ってアップしてください。」と言われたことがあった。

おそらく、ただマニュアルに書かれていることをそのまま言っているだけなのだろう。

仮にもし携帯電話の通信だったら？

これがもし携帯電話だった場合、通信が2日間つながらなければかなり大きな問題となる。

通信障害は、2022年にも大手キャリアで実際に起こっている。

大手銀行のシステム障害も同様。起こり得ることなのだ。

言葉が伝わらない。

誰かを責めたい、ヒューマンエラーを指摘したいのではなく、問題が解決すればよいと繰り返し伝えていたのだが、この言葉自体が伝わらないので参ってしまう。

埒が明かないので結局サーバーを変えて対処したが、今回、簡単にはサーバーを変えられない事案が発生してしまった。

たまたまのサイト更新依頼で判明。

今回、2015年に制作したサイトの更新依頼があり、その作業をしようとしたところ、なぜかiPhoneのブラウザでのみ、表示が不安定という現象に陥った。

クライアント様から保守・管理の費用をいただいているわけではないので、もし更新依頼がなければ気がつかなった。

MacやWindowsの主要ブラウザでは全く問題なく、AndroidのChromeやiPadのSafariでも問題がない。

なぜか、iPhoneのブラウザだけ、Safariでも、Chromeでも、Edgeでも、表示不具合な状態となっている。

原因切り分けのため、ファイルマネージャーからアップロード。

FTPソフトの原因を省く。

2年前に理解に苦しむ対応を受けた経験があったので、今回はFTPを使わず、わざわざサーバーのコントロールパネル内のファイルマネージャーからアップロードを行なった。

これで使用ソフト（といっても現在主流となっているVSCodeだが。）が原因である可能性を消すことができる。

が、しかし、iPhoneでのみという、レアな表示不具合は解決されなかった。

検索して探し回る。

延々とネット上やサーバー会社のヘルプページを探し回ってみても、解決の糸口が見つからない。

そんな中ふとまた2年前のことが頭をよぎり、その際に文字コードのエラーが表示されたことを思い出した。

ファイルマネージャーを確認。

すぐにファイルマネージャーを確認したところ、なぜかファイルが「EUC-JP」の「CR+LF」という全く身に覚えのない設定に変わっていた。

文字コードがEUC-JPに？

文字コードや改行コードは、ファイルマネージャー内でも変更できる仕様となっており、プルダウンメニューで「UTF-8」や「LF」を選択できる。

なのでファイルマネージャーから変更を試みたところ、「改行コード」は変更できるが、「文字コード」の変更ができない。

何度やっても、VSCodeでもAtomでも、ネット上の文字コード変換サイトでも試してみたが、ファイルマネージャーへアップした途端に、単なるHTMLやCSS、JavaScriptの一部のファイルが「EUC-JP」となってしまう。

（※Atomは開発終了しているが、ローカル上のエディタとしては特に問題なく使える。）

文字化けしているわけではない。

文字コードが違う場合パッと思い浮かぶのが、「文字化け」。

だが、文字化けをしているわけではなく、表示がされたりされなかったり途中で消えたりという、不安定な状態が起きている。

EUC-JPとUTF-8のシェア率。

近年のWebサイトにおける「EUC-JP」のシェア率は0.1%であり、97%以上は「UTF-8」である。

参照： Historical yearly trends in the usage statistics of character encodings for websites, April 2023
参照：UTF-8が増加 – 1月Webサイト向け文字エンコーディングシェア | TECH+（テックプラス）

日本語サイトもほとんどが「UTF-8」なので、全く意味がわからない。

どうしようもないので、サーバー会社へ問い合わせ。

自分の周りでもネット上でも、サーバーの良し悪しは常に話題となっている。

新規でサイトを作るときは、ほぼ100%、どこのサーバーが良いかを聞かれる。

なので正直なところ問い合わせには躊躇するが、クライアント様のサイトで発生しているため問い合わせざるをえない。

しかも未だにコールセンターがコロナの影響で閉鎖中となっているので、メールで連絡を行った。

ユーザー側の問題？

ファイルマネージャーや文字コードの件で連絡をしているのに、案の定、その場しのぎのような理屈の合わない理由をつけられ、「こちら側が作ったコンテンツ」、「こちら側のプログラム」の問題にされてしまった。

文面に惑わされるので、改めて整理すると、、、

• サーバーのファイルマネージャーは「こちら側が作ったコンテンツ」ではない。
• 今回のサイトを構築しているHTMLやCSS、SSIは、正確には「プログラム」や「プログラミング言語」とは呼ばない。
• SSI（Server Side Includes）は、サーバーのヘルプに記載されている方法で読み込んでおり、実際に7年以上問題なく表示されていた。
• 文字コードの件は完全にスルー。

以上のように状況を整理し、返信をしたが、土日を迎えてしまった。

これでまた2日間、ホームページの表示に不具合がある状態となる。（iPhoneのみ。）

ChatGPTへも相談。

とにかく復旧させるべく、ChatGPTへも相談してみた。

Google翻訳を使い、つたない英語でサーバー担当者になってもらい、状況を説明。

ChatGPTはこのような内容は得意だと思われる。

すると、なかなか具体的な回答があった。

なるべく精度を高めるため英語で質問。

英語なので折りたたみに。

Google翻訳で日本語にしたもの。

担当者「person in charge」のスペルを打ち間違えて「person in change」と入力してしまったが、意図はChatGPTに伝わっている。

こういうときのChatGPTは優秀。

VSCodeやその他のエディタの複数で「UTF-8」ファイルを作成し、FTP経由ではなくサーバーのファイルマネージャーからアップしている。

なので、ChatGPTによる提案の「２」と「３」の項目は外れる。

その他の、、、

• 「１」については、0.1%のシェア率の文字コードを利用する理由がない。なので97%以上のUTF-8にする方が現実的。
• 「4」については、W3CのバリデータとChatGPTによるチェックで問題なしと確認。

• 「１」については、もともとUTF-8で作成しており、その後サーバー内で「UTF-8」と「EUC-JP」が混在しているため、除外される。
• 「２」については、FTPソフトを使用するとソフトの原因と言われてしまうので、消去法としてファイルマネージャーからアップロードしている。
• 「3」については、日本のサーバーなので、言語は必然的に日本語である。
• 「４」の「特殊文字」は使用していない。

SSI（Server Side Includes）の認識。

少なくとも自分の周りにはSSIのことをプログラムと呼んでいる人は過去にも現在にもいない。

念のためChatGPTにも聞いてみると、、、

のようだ。

HTMLファイルとCSSファイルのチェックは問題なし。

W3CのバリデータとChatGPTで。

HTMLファイルのコードは、ChatGPTとW3CのMarkup Validation Serviceで確認したが、No errorsであり、Validだ。

CSSファイルも、W3CのCSS Validation Serviceでエラーなしと確認済み。

同時期に制作した他のSSIのサイトは異常なし。

WordPressサイトではないのでSSIを使用しているが、2015年〜2022年までは特に問題なく、同時期にSSIを使用して制作した別サイトは今現在でも問題なく表示されている。

もしこの別サイトも同じ現象であればSSIの可能性を疑えるが、事実として問題がなく、むしろSSIの問題ではないことを証明できるサイトとも言える。

SSIのチェックも問題なし。

.htaccessでSSIを有効化し、サーバーのヘルプページに記載されているSSIの読み込みコードとも一致している。

.htaccessでのSSI有効化。

Options +Includes
AddHandler server-parsed .shtml

SSIの読み込み。

<!--#include virtual="xxxxx/xxxxx.shtml"-->

（※「xxxxx」の部分には実際のパスやファイル名が指定されている。）

コンソール。

404でfaviconが見つかりませんという旨のエラーが出ているが、該当サイトはロゴが２つあるためファビコンを設定していない。

また、それ以外にエラーはない。

補足。

• iPhone以外では正常に表示されているので、パスの問題でもない。
• 拡張子はもともと.htmlにしていたが、2022年にサーバー会社の指示により.shtmlに変更。
• 前述の、SSIを使用している別サイトでは現在でも.htmlで問題がない。

サーバー費が未納では？

年間契約をしているので、すでに金額の支払いが済んでいる。

容量の問題では？

ストレージ使用量600GB中、7.25GBしか使用していない。

転送量は「無制限」である。

結論、結果、そして後日追記。

ローカルの文字コードと、iOSのバージョンと、サーバーのデフォルト文字コード。

ローカル上の文字コード。

VSCodeでは「UTF-8」となっている。

当初はAtomでコーディングされ、UTF-8で保存されていたが、VSCodeでもUTF-8で保存し直していた。

Appleからの通知。

Appleからアップデートの通知が届き、iOS16.4.1へアップした後、自然に解消。

2015年から特に問題なかったサイトが、たまたまiOSのバージョンと文字コードなどの相性が悪かったため、一部のiOSのバージョンのiPhoneのみ表示に不具合が出ていたということになる。

サーバー側からの返答。

サーバーの担当者の方からも回答が届いた。

ローカル上のエディタではUTF-8で保存されているファイルに、マルチバイトが含まれていないものがあったため、サーバー側でASCIIとの判定となり、文字コードがサーバーデフォルトのEUC-JPへ変わった、ということがあるそうだ。

→ちなみにマルチバイトが含まれていない半角英数のみだったファイルは、リセットCSSくらいだった。

まぁ様々が絡み合った結果、iPhoneのみでサイト表示に不具合が出た、というレアなケースだった。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。