ＩＴリテラシー研究会 in 廿日市: BloggerにおけるJavascriptコードの文字化けについて

2024年8月29日

友人からもらった沖縄の写真

前回までGASについて学んできましたが，その過程で「javascript」についても学習しました。これによって，Web画面に動きを与えることができます。

ところが，Bloggerサイトで「javascript」を使うと，メッセージ文で文字化けの事象が発生しました。

他のブログサイトでは起きないと思いますが，ちょっと困りましたので簡単に対応方法を記述します。

それでは学習を開始します。

現象は，次のような場合です。

「javascript」内にalert()関数を記述してみます。

alert("こんにちは。");

</script>

これを実行すると次のように出力されます。

「こんにちは。」

句点の「。」が「。」の数値文字になります。

確認のため，その他の日本語記号（全角）も調べました。

「。「」，、｛＠［＋＊｝；：］？」の記号類は，Bloggerで数値文字に置き換えられました。

数値文字の内容は

「。「」，、｛＠［＋＊｝；：］？」です。

これはBloggerの仕様ですので仕方ありませんが，解決策として，コードの中で変換され得る文字は記述しないというです。

例えば，「。」をencodeURI（）で変換したURIエンコードを，decodeURI()を使って「。」に戻すような記述で，javascriptコードに埋め込みます。

「。」をencodeURI()で変換すると，「%E3%80%82」という％コードになります。

この変換のためのツールを，下記に作っておきました。

このツールで「。」を変換すると，「%E3%80%82」となります。元に戻すときは，decodeURI(”%E3%80%82”)として，javasprictコードに埋め込みます。

先ほどの「javascript」内でalert()関数に埋めこんでみます。

alert("こんにちは" + decodeURI("%E3%80%82"));

</script>

これを実行すると次のように出力されます。

「こんにちは。」

句点の「。」がBloggerでも「。」として表現されました。もちろん「こんにちは。」全体をencodeURI()したものをdecodeURI()してもかまいません。

Bloggerの仕様では仕方ありませんが，コードが長くなるので少し手間ですね。

その他，HTMLのvalue属性の中に文字を隠しておくようなやり方もあるようですが，必要な方はいろいろ試してみて下さい。

要は，「javascript」コードに日本語記号（全角）で表記しなければ良いということです。

参考になれば幸いです。

それでは，良いＩＴリテラシーライフを！！！

（ご注意）情報の正確性を期していますが，実施される場合には自己責任でお願いします。

ＩＴリテラシー研究会 in 廿日市