2017-12-14

phpの関数について2

phpの関数について使い方等を調べたので記載いたします。

1. array_merge

複数の配列の要素をマージし、配列を返します。

$temp1 = array("a", "c", "c", "d", "a");
$temp2 = array("green", "red", "green", "blue", "red");

$temp3 = array_merge($temp1, $temp2);
print_r($temp3);

出力結果

Array
(
    [0] => a
    [1] => c
    [2] => c
    [3] => d
    [4] => a
    [5] => green
    [6] => red
    [7] => green
    [8] => blue
    [9] => red
)

2. array_unique

配列を入力して、値に重複のない配列を返します。

php

$temp1 = array("a", "c", "c", "d", "a","green", "red", "green", "blue", "red");
$temp2 = array_unique($temp1);
print_r($temp2);

出力結果

Array
(
    [0] => a
    [1] => c
    [3] => d
    [5] => green
    [6] => red
    [8] => blue
)

というような使い方になります

2017-12-12

ブログでjsとか書く時に便利なツール

今までブログでjQueryのことを書いたりしていたのですが、実行結果を貼り付けるだけでは分かりにくいので実行結果などを試せてブログに埋め込める「jsdo.it」を使ってみました。

まず始めに以下サイトでユーザー登録をします。

jsdo.it

「Start coding」でコードを書いていきます。

f:id:nonaka-katuma-hal:20171212175616j:plain

HTML CSS JavaScript を記述していきます。右側に実行結果が表示されます。以前このブログで書いたfadeのコードをそのまま記載したのですが、動かない、、

どうやらjqueryを使う時にはライブラリからAddする必要があるみたいです。＋ボタンを押します

f:id:nonaka-katuma-hal:20171212175945j:plain

そしてライブラリを追加します。

f:id:nonaka-katuma-hal:20171212180036j:plain

これで動くようになったので続いてブログに乗っけていきますまずは「Finish Editing」で完了保存をします。

ブログ埋め込むというボタンがあるので押します

f:id:nonaka-katuma-hal:20171212180249j:plain

埋め込みコードが出てくるのでそれをブログにコピペします。

f:id:nonaka-katuma-hal:20171212180401j:plain

コードを以下にコピペしました

これでブログへの埋め込みが完了になります。今後も使っていきたいと思います。

2017-12-07

phpの関数 array_shift , mb_convert_kana , preg_matchについて

phpの関数についていくつか調べたので記載いたします。

1. array_shift

array_shift($array); は$arrayの最初の値を取り出して返します。配列 $array は、要素一つ分だけ短くなり、1つ目以降の要素は前にずれます。数値添字の配列のキーは0から順に新たに振りなおされます。

PHP

/* 配列を定義 */
$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 「半角カタカナ」を「全角カタカナ」に変換

PHP

/* 文字列を定義 */
$str_kana = "ABC ＡＢＣ 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 ｱｲｳｴｵ ｱｲｳｴｵ
ＡＢＣ ＡＢＣ １２３ １２３ アイウエオ アイウエオ

3. preg_match

preg_match("/検索文字列/","文字列") はある文字列から指定した文字列を検索することができます。マッチした場合は1を返し、マッチしなかったら0を返します。

PHP

if (preg_match("/い/", "あいうえお")) {
    echo "マッチしました。";
  } else {
    echo "マッチしませんでした。";
  }
  echo "\n";
  if (preg_match("/い/", "かきくけこ")) {
    echo "マッチしました。";
  } else {
    echo "マッチしませんでした。";
  }
  echo "\n";
  if (preg_match("/しすせ/", "さしすせそ")) {
    echo "マッチしました。";
  } else {
    echo "マッチしませんでした。";
  }

出力結果

マッチしました。
マッチしませんでした。
マッチしました。

以上です。

2017-12-05

jQueryのtoggleとfadeについて

jQueryでtoggleとfadeの使い方について調べたので記載いたします。

1. toggle

toggleの効果としまして各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものを表示状態にします。

HTML

<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>

f:id:nonaka-katuma-hal:20171205172409j:plain

ボタンを押すと表示が入れ替わるようにします

jQuery

$("button").click(function () {
  $("p").toggle();
});

ボタンを押すと以下のように変化します

f:id:nonaka-katuma-hal:20171205172708j:plain

2. fadeIn と fadeOut

fadeInは各要素の透明度を操作して、非表示の要素をフェードインさせて最終的に表示させます。 fadeOutは各要素の透明度を操作して、表示されている要素をフェードアウトさせて最終的に消します。

HTML

<button id="out">fadeOut</button>
<button id="in">fadeIn</button>

<p id="first">テキスト</p>

f:id:nonaka-katuma-hal:20171205174001j:plain

フェードするアニメーションは指定したスピードで実行されます。 ”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。

jQuery

$("#out").click(function () {
  $("#first").fadeOut("slow");
});

$("#in").click(function () {
  $("#first").fadeIn("slow");
});

fadeOutボタンを押すと「テキスト」が消えていきます。

f:id:nonaka-katuma-hal:20171205174110j:plain

fadeInボタンを押すと「テキスト」が表示されます。

f:id:nonaka-katuma-hal:20171205174202j:plain

3. fadeToggle

fadeToggleはフェードインとフェードアウトを切り替えるものになります。先ほどのフェードインフェードアウトを1つのボタンで行うことが出来ます。

HTML

<button id="toggle">toggle</button>

<p id="first">テキスト</p>

f:id:nonaka-katuma-hal:20171205175400j:plain

jQuery

$("#fadeToggle").click(function () {
  $("#first").fadeToggle("slow");
});

ボタンを押すとフェードイン、フェードアウトが交互に実行されます。

f:id:nonaka-katuma-hal:20171205175440j:plain

f:id:nonaka-katuma-hal:20171205175606j:plain

といった感じになります。

2017-11-30

jQuery でHTMLの操作2

jQueryでHTMLの操作について記載いたします。今回は元々記述されている要素の内容を残したままHTMLを追加する方法について調べました。まずは以下のように記述があるとします。

HTML

    <p id="first">テキスト</p>

f:id:nonaka-katuma-hal:20171130171729j:plain

1.HTML要素内の先頭に挿入

指定した要素内部の先頭にHTMLを挿入するのに prepend()を使います。 prepend()の括弧内にHTMLを記述します

jQuery

$("p#first").prepend("<strong>先頭に挿入</strong>");

f:id:nonaka-katuma-hal:20171130172209j:plain

2.HTML要素の最後に挿入

指定した要素内部の最後にHTMLを挿入するには、 append()を使います。 prepend()と同じく括弧内にHTMLを記述します。

jQuery

$("p#first").append("<strong>最後に挿入</strong>");

f:id:nonaka-katuma-hal:20171130172606j:plain

3.HTML要素の前に挿入

指定した要素の前にHTMLを挿入するには、before()を使います。

jQuery

$("p#first").before("<strong>前に挿入</strong>");

f:id:nonaka-katuma-hal:20171130173021j:plain

4.HTML要素の後ろに挿入

指定した要素の後ろにHTMLを挿入するには、after()を使います。

jQuery

$("p#first").after("<strong>後ろに挿入</strong>");

f:id:nonaka-katuma-hal:20171130174909j:plain

といった形で今後も引き続きjQueryで試したことをまとめてブログに記載したいと思います。

2017-11-28

CakePHP のreadとHash::getについて

CakePHP

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'

以上になります。

2017-11-21

cssにおけるスタイルの優先度

css

cssのスタイルの優先度についてしっかり理解していなかったので改めて調べて試したものを記載していきます。

1.基本の優先順位

まずは以下のようなHTLMにcssを付けます

HTML

<p class="first">何が優先されるか</p>

f:id:nonaka-katuma-hal:20171121172747j:plain

CSS

.first {
    color : blue;
    color : red;
}

f:id:nonaka-katuma-hal:20171121173032j:plain

これは下に記述してある方が優先されます

2.タイプセレクタとclassセレクタ

ではタイプセレクタとclassセレクタではどちらの方が優先されるかといいますと

HTML

<p class="first">何が優先されるか</p>

CSS

.first {
    color:red;
}

p {
    color : blue;
}

f:id:nonaka-katuma-hal:20171121173032j:plain

classセレクタの方が優先されます

3.classセレクタと要素を特定したclassセレクタ

classセレクタと要素を特定したclassセレクタではどうなるでしょうか

CSS

p.first {
    color : orange;
}
.first{
  color: blue;
}

f:id:nonaka-katuma-hal:20171121181611j:plain

要素を特定したclassセレクタが優先されます。

3.親要素と一緒に指定すると

今度は親要素がある時にどうなるか見てみます。要素を特定したclassセレクタと親要素＋タイプセレクタを比較します。

HTML

    <div class="first">
    <p id="second" class="third">何が優先されるか</p>

    </div>

CSS

p.third {
    color : orange;
}
.first p {
  color: blue;
}

f:id:nonaka-katuma-hal:20171121174459j:plain

要素を特定したclassセレクタと親要素＋タイプセレクタでは親要素＋タイプセレクタが優先されます

4.idセレクタとclassセレクタ

idセレクタとclassセレクタではどちらが優先されるでしょうか

HTML

    <div class="first">
    <p id="second" class="third">何が優先されるか</p>

    </div>

CSS

.third {
  color : red;
}
#second {
  color : green;
}

f:id:nonaka-katuma-hal:20171121174937j:plain

idの方が優先されるようです。

5.idセレクタとclassセレクタと親要素

親要素＋タイプセレクタとidセレクタとclassセレクタがある時はどうなるのでしょうか。

CSS

.third {
  color : red;
}
#second {
  color : green;
}
.first p {
  color: blue;
}

f:id:nonaka-katuma-hal:20171121174937j:plain

ということで idセレクタが優先されます

6. 要素を特定したidセレクタとidセレクタ

最後に要素を特定したidセレクタとidセレクタを比べてみます

CSS

#second {
  color : green;
}
p#second {
    color : yellow;
}

f:id:nonaka-katuma-hal:20171121180241j:plain

要素を特定したidセレクタが優先されます

7.まとめ

優先度についてまとめますと

要素を特定したidセレクタ > idセレクタ > 親要素＋タイプセレクタ > 要素を特定したclassセレクタ > classセレクタ > タイプセレクタ

となります。

情弱エンジニアのなかのblog

一人前のエンジニアになる為のブログです

phpの関数について2

1. array_merge

2. array_unique

ブログでjsとか書く時に便利なツール

phpの関数 array_shift , mb_convert_kana , preg_matchについて

1. array_shift

2. mb_convert_kana

3. preg_match

jQueryのtoggleとfadeについて

1. toggle

2. fadeIn と fadeOut

3. fadeToggle

jQuery でHTMLの操作2

1.HTML要素内の先頭に挿入

2.HTML要素の最後に挿入

3.HTML要素の前に挿入

4.HTML要素の後ろに挿入

CakePHP のreadとHash::getについて

1.read

2.Hash::get

cssにおけるスタイルの優先度

1.基本の優先順位

2.タイプセレクタとclassセレクタ

3.classセレクタと要素を特定したclassセレクタ

3.親要素と一緒に指定すると

4.idセレクタとclassセレクタ

5.idセレクタとclassセレクタと親要素

6. 要素を特定したidセレクタとidセレクタ

7.まとめ