たまごごはん

役に立ちそうなことを忘備録。オススメ情報や開封レビュー!

WEBとSEO

【原因&解決済】HTMLで空白または♂雄マークが出てしまう。ファイルメーカーの垂直タブが文字化け?

投稿日:2017年2月9日 更新日:

Chrome 文字化け スペースが表示される

特に変更を加えてないHTMLページだったのに、昨日ふと見てみると自分のChromeでは♂マークが文と文との間などに大量発生していた。

 

結果から・・・
要素と要因をまとめると下記の3つ。

1. 突然現れた原因はChromeのバージョンアップ
2. ファイルメーカーで作成したHTMLソースのみに出現
3. 「改行」がすべて「垂直タブ」に変換されており、それが空白または♂雄マークに

 

1 の原因を疑う理由としては、特に編集していないHTMLで少なくとも先週までは正常だったものが、昨日2/8に突然すべて同じ現象になったことから。

キャッシュの残り具合や気づかなかった&見過ごしなどで日付の前後はあると思うけど、以前は確実に無かったものが、現在は表示されているという事実・・・

ということは・・・クロームのバージョンアップでHTML内に謎の空白&雄マーク記号が出現したと思われるなぁ

クロームのバージョンアップ?で文字化け・空白・♂雄マークが出る

 

同じGoogle Chromeブラウザでも

56.0最新バージョンでは文字化けが発生。
55.0の旧バージョンでは正常表示。

なので、自分の環境と情報の限りだとクロームのバージョンによって発生したと考えています。

この♂マークがでる。。。ブラウザの個体(デフォルトのフォント)によっても違うらしい。

 

クロームのブラウザバージョンを確認してみた

現時点での自分のブラウザのChromeの最新バージョン
56.0.2924.87

再起動等しておらず、バージョンアップされる前の他のパソコンのChromeのバージョン
55.0.2883.87

最新バージョン

 

旧バーション

 

手元のパソコンでは同じクロームブラウザでも「♂」と出るパソコンと「□(四角:俗に言う豆腐文字)」とでるパソコンがあり、個体ごとに違いました。

ちなみにIEでは該当部分が空白として表示されていました。

ファイルメーカーでエクスポートしたCSVファイル内にある「垂直タブ」が原因

文字化け・空白・♂雄マークが発生したソースはすべてファイルメーカーで書き出したものでした。

たしかに、、ファイルメーカーで書き出したCSVをエクセルで開くと、♂マークが大量に出ていた記憶が。

ググってみると、こんな記事が。

 

ファイルメーカー内の「改行」はCSV書き出し時に、すべて「垂直タブVT」に変換されているとのこと。
たしかに、HTMLソースを見やすくするための改行(<br>じゃなくてソース上での)を各所に入れており、ちょうどその部分が文字化け?している様子。

ということは、今までのブラウザでは垂直タブを無視してくれていた(=「垂直タブ」を「普通のソース内改行」としてレンダリングしてた)
のが・・・

仕様変更?で空白または文字化けとして表示されるようになってしまった、ということらしい。

解決方法:ファイルメーカーからのエクスポートの際に改行をすべて削除(置換え)で対策

対策として、ファイルメーカーからの出力の時点で改行をなくすことにしました。

ソース内改行は見た目のために入れてましたが、実際にはファイルメーカー内で確認・編集するケースがほとんどです。

改行ナシにするので、ソース上ではずら~~っと1行になっちゃいますが、特に今回は問題なし。
書き出し用のHTMLは計算フィールドで整形していました。

なので改行コード「¶」を削除するようにファイルメーカー内のスクリプト(実際にはデータベース内の計算オプション)を変更しました。

Substitute ( テキスト全部 ; "¶" ; "" )

 

こういう仕様変更もあるんですね~

同じ現象の方の参考になれば、、といってもファイルメーカーのHTML書き出しってかなりマイナーか。。。

おわり。thanks!

 

-WEBとSEO

Copyright© たまごごはん , 2019 All Rights Reserved.