iphoneで文字化けするのですが(解決編)
前回の、クリエイターを、「食業」に！
nrts-creator.hateblo.jp
皆さん、おはようございます。
iphoneで自分のサイトが文字化けしてまともに見られないという問題に直面してから暫く…
ようやく文字化け問題を解決できました。
文字化けの原因はなんだったのか
Safariの問題なのか、iphoneの問題なのか、あれこれ考え、検索してきましたが…調べてみたところ、文字化けの原因はエンコードのミスということにありました。
文字化けの原因となるエンコードって何？
日本語のように全角文字・半角カナ・鈴木佳奈など、ASCIIコードという国際基準となる文字コードに無い文字を使っているサイトの場合、文字を適切に表示するために、それに適した文字コードを用いる必要があります。
半角文字で「A」と打つと、テキスト上では「A」と表示されますが、テキストを処理するツールなど、コンピュータ内部では「A」ではなく、「A」を表す文字コード（ASCIIコードの場合：４１（0100 0001））で認識されます。そういう感じで、入力した文字に対して、文字コードを介してコンピュータと人とがやり取りをしているわけです。
サイト管理者が「クリエイターを、食業に」とテキストを打ち込んだ場合、コンピュータはそれを「クリエイターを、食業に」と表示できるように、文字コードを参照して０と１の数字列に置き換えます。これがエンコードです。エンコードされた文字列は、再び同じ文字コードを参照することで、文字列として表示されます。これがデコードです。
文字列～ → エンコード → 001100111000… → デコード →文字列～
しかし、閲覧する側がサイト管理者の文字コードと異なる文字コードをもって表示した場合、表示される結果は異なります。その結果、文字化けという現象が起こります。
なぜ文字化けが起こるのか
大体はHTML（サイトを表示するためのファイル）の内部に、どの文字コードを使用するのかが未定義であることが原因です。特にジオシティーズ全盛期など、個人サイトHTML手打ち時代の頃にはそれが顕著でした。文字コードセットなんて書き込んでも目に見えてわかるものじゃなかったからですね。
しかし最近のインターネットブラウザは優秀なので、基本的にブラウザ自体が最適な文字コードを選んで表示するようになっています。もちろん自分で文字コードを変えれば当然のごとく文字化けします。
ではなぜ文字化けが起こったのか、文字化けに気づかなかったのか
PC上では文字化けが起こらなかったからです（きっぱり）。
あとは、前回に書いたとおり、音楽系のサイトなので携帯端末とは相性が悪く、携帯端末を利用してアクセスする人はほとんどいないだろう、と思っていた節があり、携帯端末での閲覧をしなかったためです。
文字化けが起こった理由は、文字コードの指定にUTF-8を指定せよと書いてあったが、HTMLファイルをSHIFT-JISで制作していたためです。なので実際は、UTF-8で文字コードを指定した上で表示されていると思って確認したサイトは、実はSHIFT-JISで表示されていたというお粗末ぶり…それが、PC上ではブラウザが力技でなんとかしてくれていたが、iphoneのSafariではそうは行かなかったということで露呈したわけです。
結局、エディタ上でUTF-8エンコード設定にした※上で、サーバーに上がっているHTMLソースを貼り付け直したことで、正しくUTF-8エンコードされたHTMLファイルに直りましたとさ。
※SHIFT-JIS設定でエディタに入力された文字列は、UTF-8設定に変えると当然のように全角文字が文字化けします。
今後の課題
しかし、これで終わりではありません。
サイトはiphone上でも正しく表示されましたが、携帯端末での閲覧独特の問題が立ちはだかります。その大部分が、画面の大きさです。
文字の大きさ
携帯端末という小さな画面において、ズームせずに文字を認識させる必要があります。また、特定の文字が極端に大きくなるなどのイレギュラーにも対応しなければなりません。
リンクの大きさ
携帯端末からすれば、他ページヘのリンクをタップする指は、あまりにも大きすぎます。ズームしないで正しくリンクをタップできることが求められます。タップしてもリンクをタップしていないとみなされる、リンク同士が隣り合って誤爆するなどすれば、サイトの使いにくさが仇となることもあるでしょう。
文字の多さ
当然ながら、文字が小さくなる原因は文字の多さにあります。
ただ、情報をじっくりと見る必要があるコンテンツは存在するので、携帯端末のために全体的に文字の量を大幅に削減すべき、というのは現実的ではないでしょう。
携帯端末を使う目的を吟味する
サイトを携帯端末で見るのはなぜか…
携帯端末でサイトを見る際に、サイト内をどう動くのか…
PCのように画面の大きな端末で閲覧する場合と比べると、サイト内の動きやサイトアクセスの目的が異なるでしょう。
それを考えると、どこまでをモバイルフレンドリーにすべきかが見えてくると思います。
とはいえ、先は長い…
