Kのプログラミング勉強ブログ

プログラミング勉強中のKです。できるだけ簡潔に、勉強したことをブログに載せていこうと思います。

【CSS】スマホでタップした時にグレイになるのをなくしたい。

「-webkit-tap-highlight-color」というプロパティを利用するという話。

a {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

これで、タップした際にグレイにはならなくなる。

webkitという名前から、Androidでは効かないのでは?と思うが、普通に効いていた。

【JQuery】appendした要素を操作する

例えば以下の様にappendした要素からwidthを取得しようとすると、
取得できる時とできない時がある。

var test = $('<div id="test"></div>');
$('body').append(test);
console.log(test.width());

これはappendした要素のロードは非同期で行われていることが原因。

そうなると、要素追加が完了したタイミングで次の処理に進めばいいことになる。

解決策は以下の様になる。

var test = $('<div id="test"></div>');
$('body').append(test);
test.ready(function() {
 console.log(test.width());
});

.ready()によってロード完了が取得できるため、callback関数で行いたい処理を記述してやればいい。
なるほど。

【Javascript】「参照渡し」「値渡し」について

Javascriptの「参照渡し」「値渡し」についてまとめてみた。

数値型とかオブジェクト型とか、今までごっちゃになってつかってたけど、今後はちゃんと使いわけよう。

結論

  • プリミティブ型 ⇨ 値渡し
  • オブジェクト型 ⇨ 参照渡し


プリミティブ型(基本型)

  • 文字列型
  • 数値型(一種類double型のみ)
  • ブーリアン
  • null型
  • undefined型(初期値を代入していない状態)
<script type="text/javascript">
	var test1 = 1;
	var test2 = test1;
	test2 = 5;

	console.log(test1); // 1
	console.log(test2); // 5
</script>

「メモリ領域のアドレス」ではなく「値」自体が代入されるので、test2とtest1は別物になる。これが値渡し。

オブジェクト型

  • 配列
  • 連想配列
  • 関数
  • その他、プリミティブ型以外
<script type="text/javascript">
	var test1 = [1];
	var test2 = test1;
	test2[0] = 5;

	console.log(test1); // 5
	console.log(test2); // 5
</script>

「メモリ領域のアドレス」が代入されるので、test2とtest1は同じオブジェクトとなる。これが参照渡し。

【Ruby on Rails】railsでpgがインストールできないできない

postgreSQLをDBにしたrailsアプリケーションで

$ bundle install 

エラー文はこれ

An error occurred while installing pg (0.18.2), and Bundler cannot continue.
Make sure that `gem install pg -v '0.18.2'` succeeds before bundling.


とりあえず指示に従う。

$ gem install pg -v '0.18.2'

これもダメ

/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby extconf.rb
checking for pg_config... yes
Using config values from /usr/local/bin/pg_config
checking for libpq-fe.h... yes
checking for libpq/libpq-fs.h... yes
checking for pg_config_manual.h... yes
checking for PQconnectdb() in -lpq... no
checking for PQconnectdb() in -llibpq... no
checking for PQconnectdb() in -lms/libpq... no
Can't find the PostgreSQL client library (libpq)
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
--with-opt-dir
--without-opt-dir
--with-opt-include
--without-opt-include=${opt-dir}/include
--with-opt-lib
--without-opt-lib=${opt-dir}/lib
--with-make-prog
--without-make-prog
--srcdir=.
--curdir
--ruby=/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby
--with-pg
--without-pg
--enable-windows-cross
--disable-windows-cross
--with-pg-config
--without-pg-config
--with-pg_config
--without-pg_config
--with-pg-dir
--without-pg-dir
--with-pg-include
--without-pg-include=${pg-dir}/include
--with-pg-lib
--without-pg-lib=${pg-dir}/
--with-pqlib
--without-pqlib
--with-libpqlib
--without-libpqlib
--with-ms/libpqlib
--without-ms/libpqlib

Gem files will remain installed in /Library/Ruby/Gems/2.0.0/gems/pg-0.18.2 for  inspection.
Results logged to /Library/Ruby/Gems/2.0.0/gems/pg-0.18.2/ext/gem_make.out

これでやっと通った。結論はこれ

 ARCHFLAGS="-arch x86_64" bundle install

【HTML】「id」と「class」の本当の差

よく「idは1つしかない」「classは複数存在する」って書かれてる。
「じゃあ1つだった場合ってclassでいいんじゃない?気付かないで2つ目書いた場合は、どっちにしろ何かしら上手く動かなくなるんだしさ」
って思って調べてみた。

idも意味あるんだ。参考にしたのは以下のブログ。
http://hitokuse.com/blog/?p=75

結論としては「idの方が速い」とのこと。なので以下で実験。

 for (var i=0; i<10000; i++) { $("#test").css("color", "blue"); } 
 for (var i=0; i<10000; i++) { $(".test").css("color", "blue"); }


id : 42.4ms
class : 94.7ms

確かに結構差が出た。メモメモ

【CSS】positionの「absolute」「relative」「fixed」の本当の意味

この間初めて知ったのでメモしときます。

参考になれば使ってください。

 

  • static

初期設定がこれ。特に配置方法が指定されないので、ブラウザごとの配置方法に依存する。

※ この値のときには、top、bottom、left、rightは適用されない。

  • absolute

一番近い、static以外が指定されている親ボックスの左上を「top : 0px, left : 0px」として配置を指定する。

※ 該当の親ボックスがなければ、windowの左上が0px, 0pxとなる。

 

  • relative

相対位置への配置。つまりstaticでブラウザによしなに置かれた位置(staticでの位置)を「top : 0px, left : 0px」として配置する。

 

  • fixed

absoluteと同じで、スクロールしても位置がwindowに固定されたままになります。

 

fixedで注意したいのが「windowに固定されたまま」という点です。

 

他の値(static,absolute,relative)はdocument上で固定なのに対し、fixedはwindow上(ブラウザ表示領域上)で固定という点に気をつけてください。