一部分文字化けしてた20151010

２０１５年１０月１０日

「otosan page」のindexページが部分的に文字化けし、それが起因していると思われる、デザイン崩れを起こし、サーチ機能が無くなっているという初めての体験をした。

場所は、indexページ（入口に相当するホームページ）を、下に3等分した時の2/3辺りのメインページ（薄いピンクの背景をしたページ）内に設置している、「サイト内検索とContact」とサブタイトル「★Otosan Pageサイト内検索」部分です(下記図2参照)。

意図しない「文字化け」が生じていた（詳細は図1参照）。
htmlのソースコードが変わって解釈されてしまった為か、以降にある「検索窓表示」が消えて無くなっていて、検索が全く出来ない状態にデザインも変わっていました。

何時からこの現象が現れたかは全く分からず、原因対策の手掛かりがつかめない。
「otosan page」画面の縦長設計が災いして、通常では目につき難い位置で起きていた現象だった。

  図の説明

 写真はクリックするとlightboxで拡大表示します。「」ボタンのクリックで連続表示します。

1 タイトルの表示異常と検索窓表示が無い異常表示状態。

2 発生した場所。

3 表示・機能修整復帰後。

4 復帰前に行ったシュミレートによる試験表示。

5 エディターが、シフトJISで開くか、UTF-8で開くか聞いてくる設定。

6 htmlソースファイルを保存する時の文字コード（UTF-8を選択）の指定。

  考察と対応

• 図1の表示を見る限り文字化けである。indexファイルには目次がある為、「otosan page」サイト内では更新頻度が一番多い。
• HPの作成・編集の環境としては、通常1台のデスクトップPCのみで全てやっていて、他にword、excel、図の加工等も全てこのPCを使用している。
  HP確認ブラウザーは、PC版ではIe11,Chromeを標準に（問題が出た時はFireFox,Safariも使用）、タブレット版はGoogle Nexus7(2013)を使用しています。
• 特にHPの作成等には、日常比較しながらの作業が多い為、20型の画面を2分割した使い方をする。しかし、他のページ等を参照するため更に４～６画面を開く場合が多い。特に3画面以上は手動でやるため、画面の重なり等が起こり作業し難くなることが多い。
• 現在作成する全てのHPの文字コードは、UTF-8を指定している為に能率UPの為この様な指定をしている。
  この様な作成環境が影響したのかも知れません。
• もし、この時誤ってシフトJIS指定のソースをUTF-8で開いたら、通常では保存時の確認（PC内）で、文字化け表示になる為直ぐ発見できると思うが今回は発見できなかった。
• PC内の表示では何ら問題は見つからなかったにもかかわらず、webへUPした後初めて文字化けが分かったものです。それも、HP全体に及ぶ文字化けではなく、検索エリアの<div>～</div>間だけで起こっていました。
• この様な文字化けの仕方は今まで経験したことが有りません。
  今回やったことはHP内の検索部分のソースをコピーして、別に検索窓の独立ページを作り、保存する時の文字コードを、エディターで「自動保存」では無く「UTF-8を選択」して保存しました。（図6参照）。これをブラウザーで開いた時、表示異常が無いか確認しました（図4参照）。
• このソースを、indexページの元の場所へ貼り付け、更にindexページ全体を再度上書き保存し直しした。
  その結果、webへupした状態でも文字化けは無く、従来の様な機能する検索窓が表示されていました。

今回この様な現象が出ている(見える)のに、原因が分からないまま、対策は完了し現在は表示も機能も復旧しています。しかし、原因が不明のままですから、又、同じ現象が別のページに表われるか知れませんが、今度は同じ対策方法ですぐ解決できると思います。