やったこと

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

このブログについて

absgといいます。webサービスのこととかいろいろ書いてます。

最近作ったサイト
全国で発生した事件のデータベース「地域の事件簿」
みんなでなかよく政治の話!「なかよし討議!」
女子のつぶやきまとめ「Twiggy×Twiggy!」
ツイッターバトラーズ!
ニコニコ人気ユーザーランキング


連絡先
何かご相談がある人はご連絡ください。
http://absgexp.net/prof/con.html

    (⌒)
  ∧__∧ (~)
 (。・ω・。)( )
 { ̄ ̄ ̄ ̄}
 {~ ̄お__}  ゴユックリ ドゾー
 {~ ̄茶__}
 {____}

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

VirtualBoxVagrantの環境をほかの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で情報を送信するゾ!

iPhoneSafariでページを移動したときに、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.

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

以上です・・。