読者です 読者をやめる 読者になる 読者になる

CODE-LIFE│コーディング・プログラミングのメモブログ

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ

Google Analytics の文字化けしたURLを日本語に変換するブックマークレット

JavaScript

f:id:maru0014:20170130225128j:plain

Google Analyticsの画面では日本語URLは文字化けしてしまう

参考画像はこのブログのアクセス解析結果ですが、3番目のページはURLが文字化けしていますね。 これはURLに日本語などのマルチバイト文字のURLが使用されているためです。

この状態ではどのページなのか全くわかりませんね・・・。超不便。 そこで、ボタン一つでこの文字化けしたURLを日本語に変換して書き換えるブックマークレットを作ってみました。

 

変換ブックマークレットの実行結果サンプル

f:id:maru0014:20170130225652j:plain

実行するとこのようにテキストを書き換えます。 これで何のページなのか一発でわかるようになりました!

 

変換ブックマークレット利用方法

  1. このリンクをブックマークへ登録 → [日本語URL化]
  2. Google Analyticsのページで登録したブックマークを実行

これだけで変換されます。 ただし、思いつきでテキトーに作ったのでバグとかあると思います。 もし変なところや、こうした方が・・・という事があればコメントください。

 

変換ブックマークレットのソース

中身はこんなかんじ

$.each($('td'), function() {
    if ($(this).text().match(/\%/) && $(this).text().match(/\//)){
        var strUrl = decodeURI($(this).text());
        $(this).text(strUrl);
    }
});

処理の流れとしては、

  1. ページの中からtdタグを探す
  2. タグ内に「%」と「/」が含まれるかチェック
  3. trueの場合は変換を実行
  4. 変換したテキストに書き換え

の1-4を各td要素に対して繰り返し実行しています。

 

以上、「文字化けしたURLを日本語に変換するブックマークレット」でした。 javascriptはまだまだ勉強中。 というか基礎も抑えず雰囲気で書いてみて動いたらラッキーみたいな感じでやってるので、そのうち本でも読んでマスターしたいですね。

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発