やったこと

webサービスを作るときに考えたことを垂れ流します

【MYSQL】GETパラメーターやハッシュタグが付いたURLを集計する！

MYSQLが苦手な私が難問に直面しました・・

「GETパラメーター(?)」とか「ハッシュタグ(#)」とかが付いたURLってあるじゃないですか。

こんな感じのやつです。
http://hogehoge.com/page/1
http://hogehoge.com/page/1?param=123
http://hogehoge.com/page/1#chapter1

これらをみんな同じURLとみなして、SQLのCOUNTで集計をするというものです。

結論からいうとこんな感じのクエリでいけました。

  SELECT url, COUNT(*) AS click_count FROM test_tabel  GROUP BY SUBSTRING_INDEX(SUBSTRING_INDEX(url, '#', 1), '?', 1);


内側の「SUBSTRING_INDEX(url, '#', 1)」で、まずはURLのハッシュタグ(#)より前の部分を抜き出します。

続いて外側の「「SUBSTRING_INDEX(url, '?', 1)」」で、URLのGETパラメータ(?)より前の部分を抜き出します。

「#」や「?」が付いてないURLも、そのまま合算して集計されます。

もっとかっこいいやり方があるかもしれないけど、ちゃんと動いてるみたいだしこれでいいか。

以上です・・。

【Vagrant】packageコマンドを叩いてもboxが生成されないゾ！

VirtualBoxとVagrantの環境をほかのPCにコピーしようと思って、packageコマンドを叩いたのですが、「package.box」というファイルが生成されない・・。


参考ブログ：
vagrant + virtualboxで作ったRuby環境を他のPCに環境移行する方法 - Qiita


これは何故かというと、コマンドプロンプトの管理者権限の問題でした・・。

ウィンドウズのコマンドプロンプトを、右クリックで「管理者として実行」で開いたら、ちゃんとboxファイルを生成してくれた・・。

なんと初歩的なトリック・・。ほんとうっかりさんなんだから・・。数時間くらい時間を無駄にしちゃったゾ、テヘッ（はぁと）

【Javascript】IEでGETパラメータ付きのURLが文字化け！

IEでGETパラメータがついたURLを生成して、location.hrefで移動しようとしたら「＆」の文字が「§」に化けてしまう謎の現象に見舞われた・・。

こんな風に、普通にURLを入れた移動しようとしただけなのに、文字化けのせいでまともに移動できない。

  window.location.href = 'hogehoge/ + '?date=1234' + '&sect=5678';

下記のように「sect」のパラメータを「section」にしたら、文字化けが収まった。

  window.location.href = 'hogehoge/ + '?date=1234' + '&section=5678';

GETパラメータで「sect」という文字を使っちゃいけないルールなんてあったっけ？
これは全然問題解決できている気がしないですな・・。

誰か理由知っている人おしえてくだしあ・・。

以上です・・。

【iOS】iPhoneでページ離脱時にajaxで情報を送信するゾ！

iPhoneのSafariでページを移動したときに、ajaxで何か情報を送信したいときのコードです！

jQuery(window).on('pagehide', function() {
   sendAjaxData();
});

function sendAjaxData(){
   var ajax_url = "http://hogehoge.com";
   var post_data = new Object();
      post_data.hoge1 = 'hoge!';
      post_data.hoge2 = 'hoge!hoge!';
      post_data.hoge3 = 'hoge!hoge!hoge!';

    jQuery.ajax({
      type: 'POST',
      datatype: 'json',
      url: ajax_url,
      cache: false,
      timeout: 3000,
      async: false,
      data: {
             'data' : post_data
            }
    }).done(function(data, textStatus, jqXHR){
      alert("送信成功したよ！");
    }).fail(function(xhr, textStatus, errorThrown){
      alert("送信失敗しちゃった…");
    });
}

これで「リンクをクリックしたとき」「戻るボタンを押したとき」「ページと閉じたとき」などで、ajaxの送信処理が走るよ！
（でもタブを別に切り替えたときは処理が走らない…）
（あとページの一番上部にいるときに離脱したときも処理が走らない…）

「beforeunload」のイベントはiOSでは効かないので注意してね！
上記みたいに「pagehide」のイベントじゃないとちゃんと動作しないから！

異常です！

jQueryで要素にdata属性を追加するゾ！

jQueryで要素にdata属性を追加する方法です！

以下みたいにすると、ページ中のすべてのimg要素に「data-hoge」という属性が追加されるよ！

jQuery(window).load(function(){
  jQuery("img").each(function(i, elem) {
    jQuery(elem).attr('data-hoge', 'hogehoge');

   //こっちだと追加されないので注意！
   // jQuery(elem).data("data-hoge", "hogehoge"); 
  });
});

「data」のメソッドを使うと追加されないので注意してね！「attr」のメソッドの方を使ってね！

※参考サイト：stackoverflow
jquery - Adding data attribute to DOM - Stack Overflow

異常です！

【Wordpress】一部のテーマで「jquery.js」が読み込まれないとき！

知ってますでしょうか？

Wordpressは、「wp_enqueue_script」によって追加されたスクリプトをチェックしていて、jQueryを利用するスクリプがないときは「jquery.js」をロードしません。

なのでHTMLにコードを直書きしていると「jquery.js」がロードされなくて、jqueryがうまく実行されないことがあります。

jqueryを利用するときは、直書きでなくてちゃんとjsファイルを用意して、「wp_enqueue_script」にjqueryのオプションをつけて読み込むようにしましょう。

//こんな感じな！
add_action('wp_enqueue_scripts', function(){
  wp_enqueue_script('hogehoge-script', plugins_url( 'js/hogehoge.js', __FILE__ ), array('jquery'), '1.0');
});

異常です！

【javascript】「Onbeforeunload」イベントはページを一回クリックしないと効かない！

「Onbeforeunload」のイベントを使って、ページ遷移を検出しようとしたんですが、一部のケースで検出ができませんでした・・。

それは、ページが表示されていきなり「戻るボタン」を押してブラウザバックしたとき・・。

画面内を一回でもクリックしているときは、ちゃんとイベントが発火するのですが、いきなり「戻る」ボタンを押した場合はイベント発火しない・・。

この動作ですが、下記ページを見るとどうもブラウザの仕様みたいです。
javascript - Onbeforeunload doesn't work until mouse is clicked once in the body - Stack Overflow

ようは悪質なポップアップ広告を避けるために、こういう仕様にしているのだそうな・・。

Note: To combat unwanted pop-ups, browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with, or may even not display them at all.

なんでこの動作にするとポップアップを抑制できるのかよく分かりませんが、これが仕様だということは分かりました・・。
もっと頑張ればよい検出方法があるのかもしれませんが、今回はなんだか疲れたので諦めましょうかね・・。

以上です・・。