20/01/07

JSで任意のパラメータの取得について

/**
 * Get the URL parameter value
 *
 * @param  name {string} パラメータのキー文字列
 * @return  url {url} 対象のURL文字列（任意）
 */
function getParam(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

任意のパラメータの取得 めもめも

最終更新日：20/01/07
18/10/29

Ajaxの通信で非同期にしろとのこと

あと追加できになったこと

url: ajaxurl,
dataType: 'json',
async: true,
type: 'POST',

async: true,

ここをfalseにしているとコンソール画面でお説教がでてくる。
非同期通信の設定が推奨されているということみたい。
けど通信が完了しないとと表示できないものなんかもあるしまたややこしいことになりそうだ。

最終更新日：18/10/29
18/10/29

fullcalendarのイベントの日付の問題。

//終日設定がうまく起動しないので時間をつい1日分の時間を自動で追加　（それに伴い日付の表示をCSSで削除
$start_date = $event_schedule['start_date']."T00:00:00+09:00";
$end_date = $event_schedule['end_date']."T23:59:59+09:00";

WordPressでAjaxをつかってfullcalendarにイベントを掲載しようとしていたときに
ドツボにはまりそうだったのでメモ書き。
現在でもスマートな解決にはなってない。

phpでjonsを返しているが
fullcalendarのallDay（終日設定）を入れても最終日の最後までイベントが開催されていることになっていない。
原因としてはphp側でデータを引っ張って来ている時に足りない部分をfullcalendarが自動変換することが原因のようなことらしい？

現状としてはソースを掲載しているように時間を付け足し
画面上に表示される時刻の表記をCSSで消しているという美しくない実装で終わっている。
う〜〜〜ん。
手書きで書いたjson形式のデータだと問題ないから 手書きでも問題あったわ。
もしかしたらphp側のjson_encodeの問題なのかもしれない。
もうちょっとこれは見てみようか。

最終更新日：18/10/29
16/12/21

ちょっと話になったJSのこと

var callee_fn = function(){ return 0; };
console.log(callee_fn); //オブジェクトが返る
console.log(callee_fn()); //実行結果が返る
buttons:[
        {
            text: 'リセット',
            class: 'dialog_edit_page btn_bbs_add_reset',
            click: reset_dialog_bbs_add
        },
],

JSの記述の仕方でclickしたさいの関数の指定に()がついてないのでどういうことかを聞いてみると
・test このままだとオブジェクトとして指定
・test() この指定だと該当箇所を読み込んだ瞬間実行される

という違いがあるとのこと。
こういう書き方があるのは初めてしった。

最終更新日：16/12/21
16/08/05

グーグルマップのカスタマイズ

<script src="//maps.google.com/maps/api/js?sensor=true&language=ja"></script>
<script src="js/map.js"></script>

map.js

function initialize(){
    var e=new google.maps.LatLng(座標1,座標2),
    a={zoom:17,center:e,scrollwheel:!1,mapTypeControlOptions:{mapTypeIds:["sample",google.maps.MapTypeId.ROADMAP]}},
    o=new google.maps.Map(document.getElementById("map_canvas"),a),
    s=new google.maps.MarkerImage("img/pin.png",new google.maps.Size(90,90),new google.maps.Point(0,0)), //アイコンの読み込み
    p={position:e,map:o,icon:s,title:"ほげほげ"},
    t=(new google.maps.Marker(p),
        [ //この中身でスタイルの変更
 
        ]
    );
    o.setOptions({styles:t});
        var i={name:"Squeeze Inc"},
            l=[ //この中身でスタイルの変更
            {stylers:[]},
            {
                'featureType':"poi",
                'elementType':"labels.icon",
                'stylers':[{visibility:"off"}
            ]
        }
    ],
    n=new google.maps.StyledMapType(l,i);
    o.mapTypes.set("sample",n),
    o.setMapTypeId("sample")
}google.maps.event.addDomListener(window,"load",initialize);
//# sourceMappingURL=mapstyle.js.map

あとは要素を用意してCSSで装飾を掛けて終了です。
ttps://developers.google.com/maps/documentation/javascript/styling?hl=ja
ドキュメント

最終更新日：16/08/05
16/06/01

.ajax()や.done()などのメモ

function click_action_post(){
    var $post_data = { category : $('input:radio[name="category"]:checked').val() , text : $('textarea#entry_text').val() , post_type : 'post' }
    console.log($post_data);
    return $.ajax({
        type: 'POST',
        url: 'check.php', //postしたいurl
        datatype: 'son', //データの形式
        scriptCharset: 'utf-8', //文字コード
        data:$post_data, //postするデータ
    });
}

上記の書き方はcheck.phpに
“category” => チェックされたネーム属性がcategoryのinputの値,
“text” => IDがentry_textのテキストエリアの値（入力された文字列,
を配列にしてcheck.phpにpostする

function click_action_post_check(){
    click_action_post().done(function($result) {
        // click_action_post()が完了後に行いたい挙動
    }).fail(function($result) {
        console.log($result);
        alert("失敗");
    });
}

postされたphpでpostされた内容に合わせてreturnをしているので
そのreturnされた内容が$resultに格納されている。
return内容が配列だとjsではそのまま使えないので

var $hoge = $.parseJSON($result);

配列をjson形式に変更する必要がある。

最終更新日：16/06/01
16/06/01

jsには

phpでのprint_rやvar_dampみたいな関数がなくって

console.log($result);

コンソールログとして出力するのが大半っぽい。
一応、コンソールログではなく画面上で確認するようのJSなんかを自作してる人はいてはったりはするようだけども
あまり一般的？ではない様子。

ttp://www.openjs.com/scripts/others/dump_function_php_print_r.php

/**
* Function : dump()
* Arguments: The data - array,hash(associative array),object
* The level - OPTIONAL
* Returns : The textual representation of the array.
* This function was inspired by the print_r function of PHP.
* This will accept some data as the argument and return a
* text that will be a more readable version of the
* array/hash/object that is given.
* Docs: http://www.openjs.com/scripts/others/dump_function_php_print_r.php
*/
function dump(arr,level) {   var dumped_text = "";
  if(!level) level = 0;
   
  //The padding given at the beginning of the line.
  var level_padding = "";
  for(var j=0; j < level + 1; j++) level_padding += "    ";
  if(typeof(arr) == 'object') { //Array/Hashes/Objects
    for(var item in arr) {
      var value = arr[item];
       
      if(typeof(value) == 'object') { //If it is an array,
        dumped_text += level_padding + "'" + item + "' ...<br />\n";
        dumped_text += dump(value,level+1);
      } else {
        dumped_text += level_padding + "'" + item + "' => \"" + value + "\"<br />\n";
      }
    }
  } else { //Stings/Chars/Numbers etc.
    dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
  }
  return dumped_text;
}

元の記事がふるいので試していないけども上記のJSを読み込んで
alert(dump(array));
などすれば良いらしい。

最終更新日：16/06/01
16/02/12

labelの挙動に嵌った。

<ul>
<li><label><input type="checkbox" name="test" value="test">くま<label></li>
</ul>
jQuery(document).ready(function($){
    $("li").click(function(){
        console.log("くま");
    });
});
li{
    width:400px;
    background:pink;
}
label{
    display:block;
    width:250px;
    background:gray;
}


とソースをつくってJSを実行してliの箇所をクリックすると当たり前だけども
コンソールで1回ログがでるのだけども
labelの領域をクリックするとJSが2回実行されコンソールで2回ログが表示される。
labelをクリックして動作させないほうがいい。

ttp://qiita.com/kazu56/items/9ebc8918fb7a75da9434
ちょっとやっていることは違うけども似たようなことだと思う。

最終更新日：16/02/12
15/11/16

アナリティクスのイベントについて

イベントの設定でのちょっとメモ
テンプレート側に

<script>
var btn_type = "dl_btn_type3"
var type="type3";
<script>

としておいて
読み込むJS側には

<script>
$(document).ready(function(){
$('#btn1').on('click', function() {
    ga('send', 'event', 'app_dl_button', 'click', btn_type);
});
    ga('send', 'event', 'app_lp', 'view', type);
});
</script>

こんな風にしておけばテンプレート側の変数の値を変更するだけで各々のタイプに対応ができる。
ちょっと便利。

あとはいつまでもほったらかしにしていたWordpressのページのCSSを修正しておいた。

最終更新日：15/11/16
15/10/21

回転木馬。

えすけーーーぷ！

シンプルなカルーセルを実装するタイミングがあったのでｊSのメモ

var count = 0;
var carousel_speed = 600; //移動スピード
var carousel_waittime = 8000; //待ち時間
var carousel_width = $("#carousel").width();
var carousel_height = $("#carousel").height();
var carousel_main = $("#carousel ul");
var carousel_cont = $("#carousel ul li").length; //複製前の要素の数
var carousel_list = $("#carousel ul li");
var carousel_list_index = carousel_list.get(); //リスト部分を取得
carousel_list.remove(); //既存のリストを削除
 
//表示部分をランダムに
carousel_list_index.sort(function() { //取得した要素をランダムにソート
    return Math.random() - .5;
});
//ソートしたものを再描画
for(i = 0; i < carousel_cont; i++) {
    carousel_list_inner = $(carousel_list_index[i]).html();
    $(carousel_main).append('<li>' + carousel_list_inner + '</li>');
}
//最初の要素を要素の最後に複製
var carousel_endcontent= $(carousel_list_index[0]).html();
$(carousel_main).append('<li>' + carousel_endcontent +'</li>');
 
//メイン部分のCSS
var carousel_maxwidth = carousel_width * (carousel_cont + 1); //メイン部分の横幅（+1は複製分
carousel_main.height(carousel_height);
carousel_main.width(carousel_maxwidth);
 
function carousel_animate() {
    count ++;
    carousel_main.animate({
        'left' : '-=' +(carousel_width)
    }, carousel_speed,
        function(){
            carousel_position()
        }
    );
}
 
function carousel_position() {
    if(!(count % carousel_cont)) {
        carousel_main.css({'left': 0});
        count = 0;
    }
}
 
setInterval(function() {
    carousel_animate();
},carousel_waittime);

HTML

<div id="carousel">
 <ul>
  <li>sssss</li>
  <li>sssss</li>
  <li>sssss</li>
  <li>sssss</li>
</ul>
</div>

こんな感じ。
元になったリスト部分をランダムで並び替えを行うタイプ。

最終更新日：15/10/21