ブログ

Atomで書いたコードに見えないTofu(豆腐)が紛れ込んだ時の対処法

40f8970f6d4d71678b9f13c00265354d_s

こんにちは、エムフィールド広島オフィス・フロントエンドエンジニアのかみーゆです。
先日、制作中のWebサイトの中に不明な文字コード(いわゆる豆腐)が紛れ込んでいることが発覚しました。

しかも、マシーンはWindowsでブラウザーはChromeの環境下でないと表示されない怪奇現象。。。。

Tofu(豆腐)とは?
文字化けを起こして四角く表示されてしまういわゆる文字化けのこと。

ついでに『Tofuは日本Webの文化』とか言っている、こんな面白コンテンツも見つけてしまった。。。
豆腐が表示されないように膨大な文字数のある日本語フォント作っている人、会社さん本当にすごいなぁ、としみじみ。

何はともあれ、あれこれ調べて原因が分かったのでまとめました。

Atom上でTofu(豆腐)は表示されない

特定の条件下でないと表示されない。
しかも、テキストエディタ上でなんで表示されないんでしょ汗。

そこで、Atomが何からできているかを考えてみました。

AtomはElectronと言うクロスプラットフォームデスクトップアプリケーションエンジンから出来てます。

ちなみに、Atomを起動した状態でControl+Option+C(Mac)するとChromeの開発者ツールを立ち上げることができます。

     2017-04-01-15.55.34
なるほど、MacのChromeで表示されないものはMacのAtom上でも表示されない訳ですね。

エディタを変えてみる

エディタを変更して検証してみることに。

Visual Studio Code

表示のされ方は一緒。さすが同じElectronからできている。 

  2017-04-01-14.58.32

Dream Weaver

ポチ発見。

2017-04-01-14.54.55

Sublime

文字コードが表示されてる!!
正体はこいつか!!!!

2017-04-01-14.50.35

ついでなので同じコードをコピーして比べてみる

見えてないけど文字数は同じようにカウントされている。

2017-04-01-15.05.59

調べて見ると、正体はどうやら制御文字という通信時に使う特別な動作(制御)などをさせるために使う文字だったみたい。

なるほど、テキストをメッセージ系アプリからコピーしてそまま使ったせいかな?通常、プレーンテキストには混入することはないとのこと。納得。。。。。

フォントの設定やブラウザなど、様々な原因が重なり合って制御文字が見えてしまうことがあるらしい。
ちなみにAtomには不可視文字を表示するという設定があるけど、チェックを入れても解決はしませんのでご注意を。。。。。

とりあえず、コンテンツに混ざっていた文字を一気に置換、削除。解決。

まとめ

最近はクライアントとのやり取りをLINEやChatworkのようなメッセージ系アプリでお手軽に終わらせることも多いと思います。
同じような事象に遭遇した方はぜひ、エディタを変えてソースコードを確認してみてください。

また、他に良い方法があれば追記します。

■この記事を書いた人 かみーゆ(フロントエンドエンジニア)

CMS concrete5の認定エバンジェリスト。コーディングからプログラミングまでフロント周りを中心にお仕事してます。広島支社でフロントエンドからサーバエンドまで幅広く触れるリベロなエンジニアを目指してます。お得意のconcrete5や技術的なTipsの記事を主にUPしてます。好きなものは肉とビール。

関連記事

  1. How-to-make-ribbon-in-Illustrator-8 【初心者向け】イラレでリボン作成 ワープで簡単変形!
  2. perspective_tips_10 イラレの遠近グリッドで3D風のイラストを描く方法「車編」
  3. blog_image_WP CMS設計で心がけていること
  4. blog image-illustrator-pentool ペンツールでベジェ曲線を練習するための初心者向けトレース素材画像…
  5. how-to-capture fullpage screen captureで邪魔な固定表示を…
  6. photo-size_15 レスポンシブのフルスクリーン画像はどんな比率の写真が最適?
  7. blog_image_concrete5 CMS concrete5について特徴や強みをご紹介
  8. Materialicon-00 デザイナーのためのGoogle Material iconsの使…

最近の記事

  1. DSC_0072
  2. Hirofuro-logo-8
  3. carp9
  4. carp8
  5. carp7
PAGE TOP