やったこと

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

【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.

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

以上です・・。

【jQuery】Lity.jsの画像ポップアップ機能、動的に追加したコンテンツに効かないぞ！

画像をクリックしたときにポップアップで表示してくれる便利なjQueryライブラリ「Lity.js」
このライブラリですが、やはり動的に追加した「img」には反応してくれません・・。

動的に追加した「img」にもポップアップを有効にするには、追加後の要素に以下のようにイベントをセットしてあげる必要あります
（下記の「.hoge_alink」というのは「img」を囲んでいるaタグのことです・・）

 jQuery(".hoge_alink").click(function() {
      var url = jQuery(this).attr("href");
      var instance = lity(url);
      return false;
});

異常です！

【FuelPHP】ajax送信データが$POSTの中に入ってないぞ！

最近アルバイトでFuelPHPのコードをいじっているですが、ajaxで送信したデータがサーバ側でうまく受信できない・・。

クライアント側では下記のようにajaxで送信です。

        var post_data = {
            "hoge1_id": "hoge",
            "hoge2_id": "hogehoge",
            "hoge3_id": "hogehogehoge"
        };
        $.ajax({
            url: "/api/hogege.json",
            type: 'POST',
            cache: false,
            dataType: 'json',
            data: post_data,
            contentType: 'application/json'
        }).done(function(data) {
            alert('成功！');
        }).fail(function() {
            alert('失敗・・');
        });

FuelPHP側では下記のようにajaxを受信です。

<?php
class Controller_Api extends Controller_Rest
{
    protected $default_format = 'json';

    public function post_hogege()
    {
        $hoge1 = Input::post('hoge1_id');
        $hoge2 = Input::post('hoge2_id');
        $hoge3 = Input::post('hoge3_id');
        return $this->response("ok", 200);
    }
}

FuelPHP側で、$_POSTの中に何も入ってなくてデータ受信できません！

原因はajaxの「contentType: 'application/json'」の記述・・。この記述がわるい！
この記述あると$POSTの中に値が入らなくてデータ取得できない！
↓
参考ブログ：
PHP で json の POST request の body を参照するには · Yuichi Takada

「contentType: 'application/json'」の記述はいらないので削除する！
これでサーバ側で「Input::post」でデータ受信できる！

あんましFuelPHPは関係ない問題かもしれないけど、めでたしめでたし、ちゃんとできた！
以上！

【Teraterm】SSHでパスワードをコピペ入力するとログイン失敗する！

ターミナルソフト「Teraterm」でSSHログインするときに、右クリックで「貼り付け」を選択すると、クリップボードにあるパスワードをコピペ入力することができます。

この「貼り付け」で入力したパスですがが、なぜかログイン失敗してしまい、うまくいかない・・。

コピペ入力したパスは「●●●●」みたいに黒塗りで表示されているんだけど、よく見るとこの文字数が一つ多いような・・？
ためしに一番最後の「●」を削除してみると、無事にログイン成功しました・・。

末尾に余分な文字列が一つ付記されていたということなんでしょうか・・。なぜ「Teraterm」でだけこの現象が起きるのか不明ですが、まあこれからはログイン失敗したら、一番お尻の文字を1文字削ることにします・・。

以上・・。