やったこと

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

このブログについて

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

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


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

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

【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文字削ることにします・・。

以上・・。

【CSS】GoogleMap APIを使ったマップのウィンドウ内がスクロールしない!

GoogleMap APIによって動的に追加したマップで、地点をクリックすると「info_window」というポップアップ・ウィンドウを表示をさせることができます。

このウィンドウ内のコンテンツが、iPhoneのサファリでうまくスクロールできない!
画面からはみ出た部分がちょん切れてしまい、見れなくて困ってしまいますた・・。

スクロールを効かせるためには、以下のようなcssを追加すると良いです。
ウィンドウの装飾用のクラス「gm-style-iw」に、スクロールを有効化するための設定をします。

.gm-style-iw {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

以上!

【jQuery】IEでテーブル要素を追加したら親子関係がめちゃくちゃに!

最近「グーグルマップAPI」を使って遊んでいるんですが、変な問題に悩まされてしまいました・・。

グーグルマップをクリックしたときにポップアップ表示される「info_window」というのがあるですが、ここにjQueryで定義した要素をたくさん追加すると、親子関係が何かおかしくなってしまう・・。

具体的にいうと、「テーブル要素」の後に追加した要素が、全てテーブル中に取り込まれて、子要素になってしまう・・。

これはIEだけで起きる現象で、他のブラウザでは起きません・・。

これは恒例のIEクソバグだと思うので、もう理屈を考えても仕方ありません・・。

下記のように、IEの場合だけ、テーブル要素の後ろに追加するべき要素を、遅れたタイミングで追加(append)するようにしました・・。
(こうすればテーブル要素内に取り込まれず、兄弟関係として追加できるみたい)

  //Googleマップのウィンドウを定義
  var info_window = new google.maps.InfoWindow({
    //パラメータ
    content: jQuery(hogege_map_content).prop('outerHTML')
  });

  //ブラウザがIEかどうかチェック
  var is_IE = false;
  var userAgent = window.navigator.userAgent.toLowerCase();
  if(userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0) {
    var is_IE = true;
  }

  //IEの場合は後から要素を追加
  if (is_IE  == true){
    google.maps.event.addListener(info_window, 'domready', function(){
      jQuery(hogege_map_content).append(ie_kuso1);
      jQuery(hogege_map_content).append(ie_kuso2);
      jQuery(hogege_map_content).append(ie_kuso3);
   });
  }

クソコードとなりますが、異常です・・。

【HTML】ボタンを押すと勝手にsubmitになって遷移しちゃう!

buttonをクリックすると勝手に画面が遷移してしまう…。
これは、buttonのタイプが「submit」の動作になっていたからでした…。
「submit」したくなかったら、下記のようにちゃんと「type="button"」という属性を付けましょう…。

  <button class="button" type="button">サブミットするなyo!</button>

以上です…。