Mimoeのメモ帳 -20ページ目

初心者用PHP入門

http://www.standpower.com/

よくわかるPHPの教科書 PHP5.5対応版　たにぐちまこと

p.38
●printのファンクションをPHPのマニュアルサイトで確認
http://jp.php.net/manual/ja/function.print.php

p.41
●エスケープシーケンス(Mac)
\n　改行
\r　キャリッジリターン
\t　タブ
\¥　¥
\$　$
\"　"
\'　'

エスケープシーケンスを使う場合はその両端はダブルクオーテーションで囲む必要がある
ex) print("\n");

p.44
●パラメータ
Y　年を4桁で
y　年を下2桁で
n　月
m　月で、1桁の場合に0をつける
F　月を英語で
M　月を英語の3文字表記で
j　日
d　日で、1桁の場合に0をつける
w　曜日を数字で(日曜日＝0、土曜日＝6)
l(小文字のL)　曜日を英語で
D　曜日を英語の3文字表記で
g　時を12時間単位で
G　時を24時間単位で
h　時を12時間単位で、1桁の場合に0をつける
H　時を24時間単位で、1桁の場合に0をつける
i　分、1桁の場合に0をつける
s　秒、1桁の場合に0をつける
u　マイクロ秒(PHP 5.2.2以降)

ex) print(date('G時 i分 s秒'));

p.58
●変数名のルール
変数につける名前を変数名といい、PHPでは必ず”＄”から始まる必要がある。
変数名はルールに従って命名します。

使える文字は英数字と日本語文字、記号は_(アンダースコア)のみ
○$value
○$abc_123
○$変数
×$!?(記号は使えない)
×$my name(空白は含まれてはいけない)

先頭には数字を使うことはできない
×$123abc

大文字・小文字が違った場合は、別の変数とみなす
×$Valueと$value

ルール上、日本語を使うことはできるが、あまり一般的とは言えない。基本的には英数字を使う。

●変数名の命名規則
変数名は自由につけることができるが、例えば、$aとか$xとかあまりにも適当につけてしまうと、あとでその変数が何に使われているかなどがわからなくなってしまって大変。
そのため、少し長くなってしまってもきちんと意味のある名前にした方が良い。

ただし、変数名には空白を使うことができないため、
$my name
は使えない。
_(アンダースコア)で区切ったり
$my_name
最近のトレンドは、単語の始めの文字だけを大文字にする”キャメルシンタックス”
$myName
が一般的。ポイントとしては1番始めの文字は小文字で、2語目以降の単語の先頭を大文字にして全体をくっつける。

命名規則は。必ず守らなくてはいけないルールではないが、一貫した規則で名付けておくと、見やすく変更しやすいプログラムになる。

p.68
●日にち
毎月の月末は、31日まである月と30日で終わる月がほぼ交互に訪れ、2月だけは28日と29日の年があるなど、一定していない条件で成り立っている。しかも、2月のうるう年については単純に4年に1度という訳ではなく、かなり複雑な計算が必要になる。
＊このような問題に出くわした場合は、自分で解決しようとせず、PHPに便利なファンクションがないか、または他の方がすでにサンプルプログラムを作っていないかなど探してみる！ぐーぐるせんせい♡
また、実は、PHPは”date”ファンクションに便利なパラメータ"t"がある。
"t"パラメータは、今月の末日を得ることができ、うるう年も自動的に計算してくれる便利なパラメータ。

ex)日にちをドロップダウン

<?php print(date('n')); ?>月

<?php

for($day=1; $day<=date('t'); $day++){

print('<option value="' . $day . '">' . $day . '日</option>');

}

</select>

p.76
●フォームの内容が空の場合に警告を表示するーif構文
フォームに入力されているかどうかは、”empty”ファンクションで得ることができる。

ブール値 = empty(調べたい変数);

このように使う。

”ブール値”とは、"Boolean"、真と偽など、相反する内容を得ることができる。
”true”と"false"を利用する。

emptyというファンクションでは、このブール値はつまり”調べたい変数が空(empty)でないかどうか”を調べることもできる。もし空であれば"true"、空でなければ"false"を得ることができる。

PHPでは”選択”の制御構造をifという構文で表すことができる。
"テキストフィールドが空"というのは、言い換えると"empty($_REQUEST['my_name'])の戻り値がtrue"ということができる。
画面に文章を表示するには、

if (empty($_REQUEST['my_name']) == true) {

print('名前を記入してください');

}

こうなる。
ブール値には少し変わった性質がある。
” == true”は省略することができる。
つまり、

if (empty($_REQUEST['my_name'])) {

print('名前を記入してください');

}

これで良い。

” == false”を省略するには、

if (!empty($_REQUEST['my_name'])) {

print('正しく記入されています');

}

こうなる。

p.81
●複数選択可能なチェックボックス、リストボックスの値を取得するには工夫が必要
チェックボックスや、"multiple(複数選択可能)"属性を付加したリストの場合、同じ項目を複数選ぶことができる。アンケートなどでよく利用されるコントロール。

これをPHPで扱うには、少し工夫が必要になる。
まず、HTMLを作るときにも注意が必要。
チェックボックスで複数選択可能なものを作りたい場合は、"name"属性に必ず"[]"という記号を付加しなければならない。こうすることで、PHPにはチェックボックスの値が"配列"として渡される。配列には、順番に内容が格納されていく。

チェックボックスやラジオボタンは、"value属性"の値が格納されることに気をつける。また、フォームに記入された内容は、もともと配列に格納されるため、ここでは配列のさらに配列という非常に複雑な変数に格納される。
このような配列を"二次元配列"と呼ぶ。

p.83
●半角数字に直して、数字であるかをチェックする

<?php

$age = mb_convert_kana($_REQUEST['age'], 'n', 'UTF-8');

if (is_numeric($age)) {

print($age . '歳');

}else{

print('※年齢は数字でご記入ください');

}

ある変数が、数字かどうかを判定するには"is_numeric"という便利なファンクションがある。
このファンクションに調べたい変数を指定して、ブール値(trueかfalse)で得ることができる。

しかし、日本語環境の場合、変換ソフトが起動した状態で”1”と入力すると、全角の"１"となってしまう場合がある。これは見た目には数字だが、is_numericファンクションには数字とみなされず、エラーになってしまう。

そこで便利なのが、"mb_convert_kana"ファンクション。
これは全角文字を半角文字に変換したり、逆の操作をしたりすることができる。
2番目のパラメータの"n"がポイントで、これが"全角数字を半角数字に変換する"という意味がある。その他にも、英数字を変換できたりカタカナを変換できたりなど、非常に便利。

パラメータリスト
http://jp.php.net/manual/ja/function.mb-convert-kana.php
r　　"全角"英字を "半角"に変換
R　　"半角"英字を "全角"に変換
n　　"全角"数字を "半角"に変換
N　　"半角"数字を "全角"に変換
a　　"全角"英数字を "半角"に変換
A　　"半角"英数字を "全角"に変換
s　　"全角"スペースを "半角"に変換
S　　"半角"スペースを "全角"に変換
k　　"全角カタカナ" を "半角カタカナ"に変換
K　　"半角カタカナ" を "全角カタカナ"に変換
h　　"全角ひらがな" を "半角カタカナ"に変換
H　　"半角カタカナ" を "全角ひらがな"に変換
c　　"全角カタカナ" を "全角ひらがな"に変換
C　　"全角ひらがな" を "全角カタカナ"に変換
V　　濁点付きの文字を一文字に変換 "K", "H" と共に使用する

これで、全角数字も半角数字に変換してから検査するため、正しく処理が行われるようになる。
親切な入力フォーム制作には欠かせないテクニックといえる。

背景をフルスクリーンのスライドショーにする

背景に画像をフルに表示させてフェードで入れ替えるのはいくつかあったけど、左右にスライドさせたかった。
そして、それはあくまで背景として、上にはちゃんとテキストなど表示させたかった。

前にも書いた、Fotoramaがすごくいろんなオプションがあって、カスタマイズできるので、これを使います。
http://fotorama.io/

ちょー簡単なスクリプト。

<!DOCTYPE html>

<html>

<head>

$(function(){

$('.fotorama').fotorama({

width: '100%',

height: '100%',

fit: 'cover',

nav: 'none',

margin: 0

});

</script>

</head>

<body>

<style>

body{

margin: 0;

padding: 0;

}

.fotorama{

margin: 0;

padding: 0;

width: 100%;

height: 100%;

position: absolute;

z-index: -999;

}

</style>

</div>

ここに文字がかけるよぉー♪

</body>

</html>

これでおk！

jQueryプラグイン Fotorama

Fotorama
http://plugins.jquery.com/fotorama/

使い方など
http://fotorama.io/

Fotoramaのカスタマイズ

htmlの<div class="fotorama" ******>の中に書く場合は、

data-****="****"

jsの$('.fotorama').fotorama({******});の中に書く場合は

****: ****

Number or Stringはpx or %で指定可能

width Number or String

minwidth Number or String

maxwidth Number or String

height Number or String

minheight Number or String

maxheight Number or String

ratio Number or String width/height

margin Number 隣の写真との距離

glimpse　　　　　　　　　Number or String 隣の写真が見えるその幅指定

nav String or Boolean 'dots'(Default) ドット 'thumbs' サムネイル false なし

navposition String 'bottom' 'top'

thumbwidth Number

thumbheight Number

thumbmargin Number

thumbborderwidth Number

allowfullscreen Boolean or String false(Default) true ブラウザのフル 'native' スクリーンのフル

fit String 'contain'(Default) widthかheightのどちらかがエリアと同じ幅上下、左右どちらかに隙間がある小さい場合、拡大される

'cover' エリア全部に表示されるように画像をトリミング

'scaledown' そのままの大きさで表示、大きい場合はwidthかheightのどちらかがエリアと同じ幅上下、左右どちらかに隙間がある

'none' 画像のそのままの大きさで表示

transition String 'slide'(Default) 'crossfade' 'dissolve' アニメーションなし

transitionduration Number

caption String

hash Boolean

startindex Number or String

loop Boolean

autoplay Boolean or Number

stopautoplayontouch Boolean スライドショーに関する何かの動作をしたらストップする

keyboard Boolean

arrows Boolean

click Boolean

swipe Boolean

trackpad Boolean

shuffle Boolean

direction String ltr or rtl Right-to-left

spinner Object

shadows Boolean

display:none;を使わないタブtab

タブの中にスライダーを入れようとしたら、display:none;で、１回消されちゃってるから、タブを切り替えた後にスクリプトがうまく動かない。

あああああああああああ・・・

＊解決方法＊
opactyをつかって表示切り替えする。

しかし、、、
float:left;で横に表示してmargin-leftを調節しようとしたら、タブによってheightが違うから、変な空白が生まれてしまう。。。

うわぁぁぁぁぁぁぁ>□<。。。

＊解決方法②＊
position:absolute;を使う。

あと、表示がうまくいかない場合は、z-indexを使えばいい。

ではでは、ちょー簡単なテストスクリプト。

<!doctype html>

<head>

$(document).ready(function(){

$('.redTab').click(function(){

$('.xnoneTab div').removeClass('active');

$('#red').addClass('active');

});

$('.blueTab').click(function(){

$('.xnoneTab div').removeClass('active');

$('#blue').addClass('active');

});

$('.greenTab').click(function(){

$('.xnoneTab div').removeClass('active');

$('#green').addClass('active');

});

$('.orangeTab').click(function(){

$('.xnoneTab div').removeClass('active');

$('#orange').addClass('active');

});

</script>

</head>

<body>

<style>

ul{

list-style:none;

padding: 0;

margin: 0;

}

li{

float: left;

width: 80px;

height: 24px;

}

li:hover{

cursor: pointer;

}

.xnoneTab {

position: relative;

margin-top: 24px;

}

.xnoneTab div{

clear: both;

width: 320px;

height:150px;

position: absolute;

opacity: 0;

}

.xnoneTab .active{

opacity: 1;

position:relative;

}

.red{

background-color: red;

}

.blue{

background-color: blue;

}

.green{

background-color: green;

}

.orange{

background-color: orange;

}

#blue{

height: 300px;

}

#green{

height: 100px;

}

</style>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>

<ul>

<li class="green greenTab">green</li>

<li class="orange orangeTab">orange</li>

</ul>

<div id="red" class="red active">redredredredredredredredredred</div>

<div id="blue" class="blue">blueblueblueblueblueblueblueblue</div>

<div id="green" class="green">greengreengreengreengreengreen</div>

<div id="orange" class="orange">orangeorangeorangeorangeorange</div>

</div>

</body>

</html>

こんな感じです♪

あーーーーーー
疲れたぁーーーーーーー

初心者用PHP入門

よくわかるPHPの教科書 PHP5.5対応版 たにぐち まこと

背景をフルスクリーンのスライドショーにする

jQueryプラグイン Fotorama

display:none;を使わないタブtab

よくわかるPHPの教科書 PHP5.5対応版　たにぐちまこと