東京発、雲に乗って

2017年4月26日

【CSS】vertical-alignが効かないときに確認すること

縦方向の表示位置を整えてくれるスタイル「vertical-align」ですが、
横方向の「text-align」と比べて使用できる条件は限られています。

まずvertical-alignが使用できるのは
・インライン要素
・テーブル要素
のみです。divタグやpタグに、ただvertical-alignを指定しただけでは反映されません。

反映させるにはテーブル要素にしてしまいます。

display: table-cell;

1	display: table-cell;

それと、縦方向のサイズが指定されていなかったり、％で指定されていたりしても反映されません。
具体的なサイズで指定します。

height: 200px;

1	height: 200px;

2017年4月21日2017年4月21日

【HTML5】localStorageを使ってローカルPCに連想配列DBを構築する

HTML5で利用できるようになったlocalStorageは
その名の通り、ローカルPCにデータを保存することができます。

しかもセッションやcookieのように期限もないので
これまでWEBアプリではサーバーに保存するしかなかったデータを、
サーバーを使わずにローカルのデータベースに保存することができます。

まずはlocalStorageに対応しているかどうかを確認

function check_ls() {
  return localStorage ? true : false;
}

function check_ls() {

return localStorage ? true : false;

}

次に値の格納・取得ですが、いろんな使い方が用意されています。

私が使うのはもっぱら連想配列です。

連想配列のセット (valが連想配列)

function set_ls(key, val) {
  localStorage.setItem(key, JSON.stringify(val));
}

function set_ls(key, val) {

localStorage.setItem(key, JSON.stringify(val));

}

連想配列の取得

function get_ls(key) {
  return JSON.parse(localStorage.getItem(key));
}

function get_ls(key) {

return JSON.parse(localStorage.getItem(key));

}

これだけで連想配列のデータベースとしていろんな使いかたができると思います。
スマホのアプリでWEBビューを使ってアプリのデータ保存に使うのも面白いですね。

もちろん、ローカルなので他の端末でアクセスするとデータが取得できないという
WEBアプリとしてはあり得なかったデメリットもあります。
ローカルとサーバーで両方DBを持ち、お互いにデータを同期させるなど工夫も必要になります。

2017年4月19日2017年4月21日

【jQuery】配列や連想配列をコピーする

var array2 = array1;

1	var array2 = array1;

のように配列や連想配列をそのまま代入すると「参照渡し」という形になり、
コピー先だけ変更したつもりがコピー元も一緒に変更されてしまいます。

コピーするには配列の中身を代入していく必要があるのですが、
jQueryの場合はextend関数で簡単にコピーできます。

配列：

var array2 = $.extend(true, [], array1);

1	var array2 = $.extend(true, [], array1);

連想配列：

var array2 = $.extend(true, {}, array1);

1	var array2 = $.extend(true, {}, array1);

2017年4月19日2017年4月19日

【JavaScript】連想配列でも配列でも要素数を取得

配列の要素数はlengthで取得できますが、
連想配列の場合はlengthは使えません。
スマートではないですがfor inでループを回してカウントするのが簡単です。

連想配列でも配列でも同じように要素数が取得できる関数です。

var len = function(val) {
  if(val == undefined || val == null) {
    return 0;
  }
  if(val instanceof Array) {
    return val.length;
  }
  else if(val instanceof Object) {
    var _cnt = 0;
    for(var x in val) {
      _cnt++;
    }
    return _cnt;
  }
  else {
    return val.length;
  }
};

var len = function(val) {

if(val == undefined || val == null) {

return 0;

}

if(val instanceof Array) {

return val.length;

}

else if(val instanceof Object) {

var _cnt = 0;

for(var x in val) {

_cnt++;

}

return _cnt;

}

else {

return val.length;

}

};

文字列だったら長さが返ってきます。

2017年4月18日2017年4月18日

【WordPress】Twenty Seventeenテーマで5つ目のセクションを追加する

Twenty Seventeenテーマでは
「外観」→「カスタマイズ」→「テーマオプション」から
簡単に4つまでのセクションを設定することができるようになっていますが、
ここに5つ目のセクション設定枠を追加するにはPHPファイルを変更しなくてはならないようです。

といっても非常に簡単です。
functions.phpに下記のコードを追加するだけです。

function wpc_custom_front_sections($num_sections) {
  return 5; /* 変更したいセクションの数 */
}       
add_filter('twentyseventeen_front_page_sections', 'wpc_custom_front_sections');

function wpc_custom_front_sections($num_sections) {

return 5; /* 変更したいセクションの数 */

}

add_filter('twentyseventeen_front_page_sections', 'wpc_custom_front_sections');

これでセクションを設定するプルダウンの数が5つになります。
簡単ですね。