ブログ

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. blog_gif-01 エム・フィールド広島オフィスの福利厚生事情
  2. 20161214_4864 タコパ忘年会をやったらミンティアが殺人的だった
  3. how-to-capture fullpage screen captureで邪魔な固定表示を…
  4. blog_twitter エム・フィールド広島オフィスのオンオフ
  5. 2017-new-year-bird-8 あけましておめでとうございます。
  6. color-code_play02 RGBを脳内調合して札を取れ!「COLOR CODEかるた」で遊…
  7. color-12 イラレのイラストに自然な陰影を与える配色のコツ
  8. desk 知識や技術と同じくらい大事なのはディスプレイと椅子

最近の記事

  1. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  2. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  3. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  4. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  5. lig_10
PAGE TOP