やったこと

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

【AWS】Wordpressをhttps化！リダイレクトがトップページにしか効かない…。

先日ワードプレスのサイトをHTTPS化する作業をしました。

サーバはAWS（アマゾン）を使っていて、前方にあるロードバランサーでhttpsを終端して、webサーバはhttpのレスポンスを処理するという、定番の構成です。

このとき、webサーバの「.htaccess」に、こんな感じでリダイレクト設定を書きますよね？

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} !=https
RewriteRule ^/?(.*) https://%{HTTP_HOST}/$1 [R,L]
</IfModule>

このリダイレクトがトップページでしか有効にならずにちょっと悩んでしまいました…。

原因は、上記の設定を書く位置が悪かったです。

リダイレクト設定は、他の設定よりも一番上側に書いたほうがいいですね。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} !=https
RewriteRule ^/?(.*) https://%{HTTP_HOST}/$1 [R,L]
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

これでトップページ以外にも、ちゃんとリダイレクトが反映されます。

以上です！

【Wordpress】「functions.php」をいじってテストテンプレートを表示する！

ワードプレスで functions.php にコードを追加して、テストテンプレートを表示させる仕組みを作ります。

つまり、どういう事かと言うとですね・・。

①「http://hogehoge.com/」というサイトがあったとします。

②ここに「http://hogehoge.com/test_page/」みたいなテスト表示用のディレクトリを追加します（トップページの配下に追加します）

③この「/test_page/」にアクセスすると、自分が現在調整しているテンプレート(sample.php)を表示することできます。

こういうことがやりたい訳ですよ・・。

コードは以下です。これを「functions.php」に追加します。

add_action('init', 'add_test_page');
function add_test_page(){
  add_rewrite_endpoint('test_page', EP_ROOT);
  flush_rewrite_rules();
}

add_filter('query_vars', 'add_query_vars');
function add_query_vars($vars){
    $vars[] = "test_page";
    return $vars;
}

add_action('template_redirect', 'test_template_redirect');
function test_template_redirect() {
    global $wp_query;
    if (isset($wp_query->query['test_page'])) {
      include_once('sample.php');
      exit;
    }
}

これで「sample.php」をテスト表示することができます。

訳あって管理画面にアクセスできない人がテストページのデザイン修正するときに、この方法が使えると思います。

ところで、上記の「flush_rewrite_rules()」ですが、あまり連続的に呼び出すと、とても負荷が大きく、いろいろ不具合をもたらすのだそうな。

だから呼ぶのは一度だけでいいです。一回ページをロードしたら、下記のようにコメントアウトしてしまうといいと思います。

/*
add_action('init', 'add_test_page');
function add_test_page(){
  add_rewrite_endpoint('test_page', EP_ROOT);
  flush_rewrite_rules();
}
*/

add_filter('query_vars', 'add_query_vars');
function add_query_vars($vars){
    $vars[] = "test_page";
    return $vars;
}

add_action('template_redirect', 'test_template_redirect');
function test_template_redirect() {
    global $wp_query;
    if (isset($wp_query->query['test_page'])) {
      include_once('sample.php');
      exit;
    }
}


テスト確認が終わったら上記コードは消してしまいましょう。
（最後にもう一度「 flush_rewrite_rules()」を呼んで、追加した情報を消して元通りにしてあげるといいかも）

以上！

【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

異常です！