ブログでjsとか書く時に便利なツール
今までブログでjQueryのことを書いたりしていたのですが、実行結果を貼り付けるだけでは分かりにくいので 実行結果などを試せてブログに埋め込める「jsdo.it」を使ってみました。
まず始めに以下サイトでユーザー登録をします。
「Start coding」でコードを書いていきます。
HTML CSS JavaScript を記述していきます。 右側に実行結果が表示されます。 以前このブログで書いたfadeのコードをそのまま記載したのですが、動かない、、
どうやらjqueryを使う時にはライブラリからAddする必要があるみたいです。 +ボタンを押します
そしてライブラリを追加します。
これで動くようになったので続いてブログに乗っけていきます まずは「Finish Editing」で完了保存をします。
ブログ埋め込むというボタンがあるので押します
埋め込みコードが出てくるのでそれをブログにコピペします。
コードを以下にコピペしました
これでブログへの埋め込みが完了になります。 今後も使っていきたいと思います。
phpの関数 array_shift , mb_convert_kana , preg_matchについて
phpの関数についていくつか調べたので記載いたします。
1. array_shift
array_shift($array); は$arrayの最初の値を取り出して返します。配列 $array は、要素一つ分だけ短くなり、1つ目以降の要素は前にずれます。 数値添字の配列のキーは0から順に新たに振りなおされます。
/* 配列を定義 */ $temp = array("A", "B", "C", "D"); print_r(array_shift($temp)); echo "\n"; print_r($temp); echo "\n"; $temp2 = array_shift($temp); print_r($temp2); echo "\n"; print_r($temp);
出力結果
A Array ( [0] => B [1] => C [2] => D ) B Array ( [0] => C [1] => D )
2. mb_convert_kana
mb_convert_kana($string , 'option') は指定した文字列を半角 ⇔ 全角 変換します。 オプションを指定した場合、オプションに従って変換します。 オプション:
:r 「全角」英字を「半角」に変換 :R 「半角」英字を「全角」に変換
:n 「全角」数字を「半角」に変換 :N 「半角」数字を「全角」に変換
:k 「全角カタカナ」を「半角カタカナ」に変換 :K 「半角カタカナ」を「全角カタカナ」に変換
/* 文字列を定義 */ $str_kana = "ABC ABC 123 123 アイウエオ アイウエオ"; /* 半角 ⇔ 全角 変換 */ print_r( mb_convert_kana($str_kana, 'krn') ); echo "\n"; print_r( mb_convert_kana($str_kana, 'KRN') ); echo "\n";
出力結果
ABC ABC 123 123 アイウエオ アイウエオ ABC ABC 123 123 アイウエオ アイウエオ
3. preg_match
preg_match("/検索文字列/","文字列") はある文字列から指定した文字列を検索することができます。マッチした場合は1を返し、マッチしなかったら0を返します。
if (preg_match("/い/", "あいうえお")) { echo "マッチしました。"; } else { echo "マッチしませんでした。"; } echo "\n"; if (preg_match("/い/", "かきくけこ")) { echo "マッチしました。"; } else { echo "マッチしませんでした。"; } echo "\n"; if (preg_match("/しすせ/", "さしすせそ")) { echo "マッチしました。"; } else { echo "マッチしませんでした。"; }
出力結果
マッチしました。 マッチしませんでした。 マッチしました。
以上です。
jQueryのtoggleとfadeについて
jQueryでtoggleとfadeの使い方について調べたので記載いたします。
1. toggle
toggleの効果としまして各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものを表示状態にします。
HTML
<button>Toggle</button> <p>Hello</p> <p style="display: none">Good Bye</p>
ボタンを押すと表示が入れ替わるようにします
$("button").click(function () { $("p").toggle(); });
ボタンを押すと以下のように変化します
2. fadeIn と fadeOut
fadeInは各要素の透明度を操作して、非表示の要素をフェードインさせて最終的に表示させます。 fadeOutは各要素の透明度を操作して、表示されている要素をフェードアウトさせて最終的に消します。
HTML
<button id="out">fadeOut</button> <button id="in">fadeIn</button> <p id="first">テキスト</p>
フェードするアニメーションは指定したスピードで実行されます。 ”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。 例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
$("#out").click(function () { $("#first").fadeOut("slow"); }); $("#in").click(function () { $("#first").fadeIn("slow"); });
fadeOutボタンを押すと「テキスト」が消えていきます。
fadeInボタンを押すと「テキスト」が表示されます。
3. fadeToggle
fadeToggleはフェードインとフェードアウトを切り替えるものになります。 先ほどのフェードインフェードアウトを1つのボタンで行うことが出来ます。
HTML
<button id="toggle">toggle</button> <p id="first">テキスト</p>
$("#fadeToggle").click(function () { $("#first").fadeToggle("slow"); });
ボタンを押すとフェードイン、フェードアウトが交互に実行されます。
といった感じになります。
jQuery でHTMLの操作2
jQueryでHTMLの操作について記載いたします。 今回は元々記述されている要素の内容を残したままHTMLを追加する方法について調べました。 まずは以下のように記述があるとします。
HTML
<p id="first">テキスト</p>
1.HTML要素内の先頭に挿入
指定した要素内部の先頭にHTMLを挿入するのに prepend()を使います。 prepend()の括弧内にHTMLを記述します
$("p#first").prepend("<strong>先頭に挿入</strong>");
2.HTML要素の最後に挿入
指定した要素内部の最後にHTMLを挿入するには、 append()を使います。 prepend()と同じく括弧内にHTMLを記述します。
$("p#first").append("<strong>最後に挿入</strong>");
3.HTML要素の前に挿入
指定した要素の前にHTMLを挿入するには、before()を使います。
$("p#first").before("<strong>前に挿入</strong>");
4.HTML要素の後ろに挿入
指定した要素の後ろにHTMLを挿入するには、after()を使います。
$("p#first").after("<strong>後ろに挿入</strong>");
といった形で今後も引き続きjQueryで試したことをまとめてブログに記載したいと思います。
CakePHP のreadとHash::getについて
cakephp でreadとHash::getの使い方を記載いたします。
1.read
データを取得してきます。 例えばCustomersModelというものがあり ファイル内でこのように記述しますと
$id = 2; $customer_data = $this->read(false,$id); debug($customer_data);
id2 のデータを返します
array( 'Customers' => array( 'id' => '2', 'name' => 'tanaka', 'age' => '20', ) )
CustomersModel以外でデータを取得したいときは以下のようになります。
$id = 2; $customer_data = $this->Customers->read(false,$id); debug($customer_data);
array( 'Customers' => array( 'id' => '2', 'name' => 'tanaka', 'age' => '20', ) )
2.Hash::get
続いてreadしてきたデータの'name'のみ必要な時はHash::getを使います。 配列から必要なデータのみ抽出することができます。
$id = 2; $customer_data = $this->Customers->read(false,$id); $customer_name = Hash::get($customer_data, 'Customers.name'); debug($customer_name);
nameに入っているデータのみが$customer_nameに代入されます。
'tanaka'
以上になります。
cssにおけるスタイルの優先度
cssのスタイルの優先度についてしっかり理解していなかったので 改めて調べて試したものを記載していきます。
1.基本の優先順位
まずは以下のようなHTLMにcssを付けます
HTML
<p class="first">何が優先されるか</p>
.first { color : blue; color : red; }
これは下に記述してある方が優先されます
2.タイプセレクタとclassセレクタ
ではタイプセレクタとclassセレクタではどちらの方が優先されるかといいますと
HTML
<p class="first">何が優先されるか</p>
.first { color:red; } p { color : blue; }
classセレクタの方が優先されます
3.classセレクタと要素を特定したclassセレクタ
classセレクタと要素を特定したclassセレクタではどうなるでしょうか
p.first { color : orange; } .first{ color: blue; }
要素を特定したclassセレクタが優先されます。
3.親要素と一緒に指定すると
今度は親要素がある時にどうなるか見てみます。 要素を特定したclassセレクタと親要素+タイプセレクタを比較します。
HTML
<div class="first"> <p id="second" class="third">何が優先されるか</p> </div>
p.third { color : orange; } .first p { color: blue; }
要素を特定したclassセレクタと 親要素+タイプセレクタでは親要素+タイプセレクタが優先されます
4.idセレクタとclassセレクタ
idセレクタとclassセレクタではどちらが優先されるでしょうか
HTML
<div class="first"> <p id="second" class="third">何が優先されるか</p> </div>
.third { color : red; } #second { color : green; }
idの方が優先されるようです。
5.idセレクタとclassセレクタと親要素
親要素+タイプセレクタとidセレクタとclassセレクタがある時はどうなるのでしょうか。
.third { color : red; } #second { color : green; } .first p { color: blue; }
ということで idセレクタが優先されます
6. 要素を特定したidセレクタとidセレクタ
最後に要素を特定したidセレクタとidセレクタを比べてみます
#second { color : green; } p#second { color : yellow; }
要素を特定したidセレクタが優先されます
7.まとめ
優先度についてまとめますと
要素を特定したidセレクタ > idセレクタ > 親要素+タイプセレクタ > 要素を特定したclassセレクタ > classセレクタ > タイプセレクタ
となります。
MySQLのREPLACEについて
MySQLでREPLACEの使い方等について覚えたので記載いたします。 REPLACEはレコードに登録してある文字列や数値を置換したい時に使います。
書き方は以下のようになります。
UPDATE テーブル名 SET カラム名=REPLACE(カラム名, '置換前', '置換後') WHERE id=X;
実際に試してみます。以下の様なcustomersテーブルがあります。
UPDATE customers SET name=REPLACE(name, 'a', 'b') where id = 1;
id 1のname であるabcdのaをbに置換します。
id1 の abcd が bbcdに置換されています。
レコード全てを置換するなら where id = 1を削れば良いです。
UPDATE customers SET name=REPLACE(name, 'a', 'b');
レコードのaは全てbに置換されています。
こちら数値でも置換することができます。
testの1を5に置換します。
UPDATE customers SET test=REPLACE(test, '1', '5');
以下のサイトを参考にしました。
以上になります。