display:noneとvisiblity:hiddenの違い

どうも。原田です。

今回はフロント側についての記事を書こうと思います。

 

「この時はこれ表示して、そっちの時はそっちを表示させたい」

という、瞬間がありました。

そこで、先輩からjQueryでshow()とhide()にさせちゃいなよと言われ、

言われるがままにしてうまくいったのですが。

 

jQuery書いてる時の私の頭の中は、

「hide()しちゃってる時、その部分が真っ白になって場所だけとっちゃてて不自然に見えないのか・・・」

という不安がありました。

お気付きの通り、visiblity:hiddenの状態になっちゃはないかというバカなことを考えをしてました。

もちろん、hide()はdisplay:noneとなるメソッドです。

 

 

そこで、私の頭の中の整理

display:none  ←hide()の時
エレメントが表示エリアから消える。DOMとしては存在するが描画されない
→場所とらない

 

visiblity:hidden
エレメントは描画されない。しかし表示エリアは「残る」。背景色で塗りつぶした感じ
→場所とっちゃてるまま

 

 

 

HTML5で変わったこと、その1

お久しぶりです、有村です。ご無沙汰していました。
日々悪態をつきながらも、なんとかいきている。

さて、今日はHTML5で変わったことをテーマに記事を書きます。
といっても列挙するとすごい数になりそうなので、少しずつかいつまんで。(そもそもそんなに知らない)

1.scriptのtype属性が必須ではなくなった
JSを書くときには

のようにscriptタグを用いますが、type=”text/javascript” が必須でなくなりました。
理由は、type属性のデフォルト値が text/javascript になったため。
もちろん、それ以外のtypeを用いるのであれば記述が必要です。
…でもそれ以外のtypeってどんなもので、どう使うんでしょうね?世の中のすげぇ人たちは普通に使ってるのかな?

2.dlタグの意味が変わった
「定義リスト」から「説明リスト」に変わりました。ニュアンスが緩くなったので、Q&Aをはじめとした広い場面で使えそうです。
じゃあはっきり定義とその説明を示すときはどうするんだ?というと、dfnタグというものがあるようです。

みたいな使い方。

3.hrが意味を持った
同じセクション内における、話の区切りを示すようになりました。
個人的にポイントは「同じセクション内」だと思います。sectionタグとsectionタグの間では、既に話題が変わることが明示されているので、section + hr という二重の使い方はしなくてよいそうです。
以下、例。

以前は水平線を引くためのタグで、それ自体には意味を持たなかったそうなので、同じノリで使わないようにしなければいけませんね。

今日は3つ。
他にもまだ全然あるのでまた後日。

それでは、今日はこのへんで。

jQuery.noConflict();

久々です!原田です。

ひさびさ、jQueryを触る機会があったのですが、
JSって難しいですね(;_;)

 

jQuery.noConflict()ってなんすか!?

て、なった時のこと書きまーす

 

どうやら、

バージョンの異なるjQueryを使っていたり、異なるライブラリーを使う時に

同じ変数とかで被ってるもの($関数とか)が混合して、エラーになるのを防いでるらしいです。

 

 

私がこのソースを目をした時には、1.7系のjQueryと1.9系のjQueryをnoConflictさせていました。

→1.9系から.on()が使えるようになるのでこれかな?って感じでした。

※1.9系からイベントに割り当てる.live()→.on()、.die()→.off()に成ったとのこと

toggle()も消されたらしいです

 

話を戻すと、異なるライブラリやバージョンのjQueryを使いたい時に

jQuery.noConflict();

というものを使いますが、使い方がいろいろあるようです。

 


「$」を「jQuery」と置く

jQuery.noConflict();記述後のjQueryにおいて、

$関数 が jQueryとなます。

なぜなら、$関数をjQuery.noConflict();記述前のjQueryや他のライブラリにあげたのです。

で、以後はjQueryを使って、書きますという意味のようです。

けど、$を毎回jQueyと書くのは面倒。

 

 

ってことで

jQueyを他の変数でおく。

var $1 = jQuery.noConflict();

と書くことで 「$1」で$関数を使うことができます!

 

置き換えがめんどい!って時は。。。

3

即時関数内なら、そのまま「$」で使える

jQuery.noConflict();

(function($){

ここから$が使える。

})(jQuery);

 

3が読みやすくていいけど、個人的にはConflictさせてることがわかるように

2とかでもいいなと思ました。

smarty_function、smarty_modifier

ちーす!ww原田です。

smarty_function  又の名をテンプレート関数プラグイン

smarty_modifier 又の名を修飾子プラグイン

 

こいつらすっごく便利だけど、何が違うんだろう?

同じプラグインやんって思ってます、

引数の取り方が違うくらいで、他に違い教えてください・・・。

 

とりあえず、

自分で調べたこと書きます。

▪️smarty_function_名前($param, &$smarty)

・引数は連想配列として $params(array)に格納される

 

・テンプレート上での使い方

<!–{名前 var1=’第1引数’ var2=’第2引数’}–>

$param[‘var1’] = ‘第1引数’;

$param[‘var2’] = ‘第2引数’;   で渡してる感じ

 

 

▪️smarty_modifier_名前($value, $param1)

・第1引数は、このmodifilerによって影響を受ける値。

他の引数はどのような動作が行われるかによって任意。

・修飾子プラグインは処理の結果を 返す 必要があります。

→static的(引数を受け取って、加工して返す)?

 

・テンプレート上での使い方

<!–{assign var=res value=$var1|名前:$var2}–>

<!–{$res}–>

デリミタ、エスケープ、正規表現・・・。

どうも原田です。

Smartyを触っていたので、今回はSmartyネタというか、PHPネタです!

SmartyでPHP関数使えますよね。(最近知ったw)

 

PHPもSmartyも世の中も何もかもわからない私にとって、

preg_matchを使う機会に遭遇いたしまして、何で第一引数を「/」(スラッシユ)で囲ってんの?って思いまして、、、、

さらに、この中でよく意味のわからない記号を使っておる!!→正規表現

 

phpmanualによりますと、、、

preg_match($pattern,  $input_word);

$pattern=’/^abc/’; みたいなんがきます。

 

ポイント

$pattern=’/(探したい言葉)/‘;

「^」は先頭、ちなみに末尾は「$」、「*」は直前の文字が1個以上連続。他には「/」や「.」があります。【正規表現】

 

囲ってる「/」をデリミタというそうですね。

このデリミタの中に、探したいワードを書くわけですが、もし「/」を探したい時どうしますか?

→「\」(エスケープ)ですね!

こんな感じ preg_match(‘/ \/ /’, $input_word);

何を探したいのかがよくわからず、見にくいですよね!!!

 

こんな時はデリミタの変更をすると便利です!

使えるデリミタは「#」や「+」、「%」などいっぱいあるんです。

なので、さっき見にくかったやつも、、

preg_match(‘# \/ #’, $input_word);

うーん ・・・見にくいですが、ごちゃつきが減りましたよね!

こんな感じで読みやすくするのも、大切だなあと思いましたとさ。ちゃんちゃん。

 

 

ちなみに、わたしは正規表現がよくわからず、

どうエスケープしたらいいのかよくわからない!

そんな時はー・・・・。

preg_quote()!!

正規表現をクオート(エスケープ)してくれる関数なのです!

これ超便利って思う。

preg_quote (‘エスケープしたいもの’, ‘デリミタ’);

使うとこんな、感じ。

 

<?php

$str = ‘This /is $100.’

$res = preg_quote($str, ‘/’);

echo $res   //    This \/is \$100\.を返します

 

よって、preg_matchでパターンとして使う時は、preg_quoteから得た結果をそのままつっこんで、

preg_match(‘/ This \/is \$100\. /’,  $input_word);

このように、正規表現とか、デリミタとか、エスケープどこでしたらええんのん

っって時使えます!!!!