「webサイト運営」カテゴリーアーカイブ

PHPとHTMLの混在

PHPとHTMLの混在

HTMLコードとPHPコードは混在して記述できます。
最終的にはすべてHTMLコードとして出力されるわけですが、
PHPコードは次のように様々な書き方ができます。

(1)HTMLタグも含めて全てechoで出力する
(2)動的な部分のみPHPコードで生成する
(3)PHPではHTMLタグを出力しない

どのように記述するか考えるポイントとしては、
・デザイナーとプラグラマーの分業のしやすさ
・メンテナンスのしやすさ
があります。

そう考えると、ブラウザに表示する部分についてはHTMLで記述し、
何らかのロジックを必要とするデータ処理部分はPHPで記述するのが
好ましいと言えます。

つまり、PHPブロックではHTMLタグを出力せずロジックだけを記述する。
HTMLブロックでは変数の出力と簡単な分岐・繰り返し処理のみ記述する。
このようなコーディング方法をとります。

【分離が不完全な例】
<html>
<body>
<?php
$age = $_POST[“age”];
if ($age >= 20) {
echo “<p>お酒を飲んでもOKです</p>”;
} else {
echo “<p>お酒を飲んではいけません</p>”;
}
?>
</body>
</html>

 

【好ましいコーディング例】
<?php
$age = $_POST[“age”];
if ($age >= 20) {
$message = “お酒を飲んでもOKです”;
} else {
$message = “お酒を飲んではいけません”;
}
?>
<html>
<body>
<p>
<?php echo $message; ?>
</p>
</body>
</html>

[css] contentプロパティで挿入できるコンテンツ

[css] contentプロパティで挿入できるコンテンツ | WebTecNote

挿入出来るモノ

大きく分けると3つです。

  • テキスト
  • プロパティの値
  • 画像

content:”テキスト”

半角英数や半角の記号ならそのままでOK。ただしクォーテーションなどのメタ文字は\でエスケープしないと表示されない。
日本語などの2バイト文字も書いたまま表示されるけど、数値文字参照の値で書いた方が無難です。

例:タイトルの前に★マークをつける

h2:before { content:"\002605"; }
/*
HTML:<h2>タイトル</h2>
output: ★タイトル
*/

数値文字参照は16進数で。
例えば★を変換すると&#x2605;という値になりますが、
これそのままcontent:”&#x2605;”と入れても★にはなりません。
contentプロパティで利用する場合は、

  • &を¥に変更する
  • #とxを削るか0に変更する
  • セミコロンを削除する

と3ステップ踏む必要があります。手作業だと結構面倒かも。
16進の数値文字参照なら上記3ステップ踏めば大抵表示されるので、
✿ こんなお花だとか(\00273f) ♥ ハートマーク(\002665)だとか ☠ドクロ(\002620)みたいな特殊シンボルも表示できたりします。

16進数値文字参照 変換スクリプト

テキストエリアに文字入れてボタン押すとcontentプロパティに最適化されたコードに変換されます。
セレクトメニューから選んだ記号は変換後の値がテキストエリアに表示されます。


content:attr(属性名)

attr(属性名)とすると:beforeや:afterしている要素の属性値を表示できます。

印刷用CSSでリンク先URLや画像のタイトルを表示する…なんてのはよくある手法だと思います

a:after { content: " ("attr(href)") ";  }
/*
HTML: <a href="http://example.com/">Link Title</a>
output: Link Title (http://example.com/)
*/
img:before { content: " ["attr(title)")]";  }
/*
HTML:<img src="hoge.png" title="画像タイトル" />
output: 【image】 [画像タイトル]
*/

ブログではinsやdelタグで日時を表示するっていうのもよく見ますね。

ins[datetime]:after {
 content: " ( "attr(datetime)") ";
}
/*
HTML:<ins datetime="2010-03-23T08:49:26+00:00">○○について追記しました</ins>
output: ○○について追記しました (2010-03-23T08:49:26+00:00)*/

content:url(画像)

url指定すれば画像も表示されます。
テキストなどの前後にアイコンを表示するのには非常に便利です。

<p class="new">○○を修正しました</p>
p.new:before { content:url("new.png"); }
/* output: テキストの前にNEW!という画像が追加される */

利用にあたっての注意等

上でも書いたけどIE7以下が未対応なのでIEユーザーの方が多いサイトなんかではJavaScriptなどのフォローが必要。
擬似要素なのでcontentプロパティで指示した内容がソースに記述されるというワケではありません。
ソースに書いてあるテキストしか認識できない媒体に対しては無力に等しいです。

「ソースに記述する程でもないけどあったら便利」ぐらいの内容に利用するのが程よい使い方だと思います。

PHPの予約語一覧

PHP のキーワード

言語を構成するものとして、以下のキーワードはいずれも定数、クラス名、 関数名として使用することはできません。これらを変数名として使用することは一般的には可能ですが、 混乱を生じる可能性があります。

PHP のキーワード

__halt_compiler() abstract and array() as
break callable
(PHP 5.4 以降)
case catch class
clone const continue declare default
die() do echo else elseif
empty() enddeclare endfor endforeach endif
endswitch endwhile eval() exit() extends
final finally
(PHP 5.5 以降)
for foreach function
global goto
(PHP 5.3 以降)
if implements include
include_once instanceof insteadof
(PHP 5.4 以降)
interface isset()
list() namespace
(PHP 5.3 以降)
new or print
private protected public require require_once
return static switch throw trait
(PHP 5.4 以降)
try unset() use var while
xor yield
(PHP 5.5 以降)

コンパイル時の定数

__CLASS__ __DIR__
(PHP 5.3 以降)
__FILE__ __FUNCTION__ __LINE__
__METHOD__ __NAMESPACE__
(PHP 5.3 以降)
__TRAIT__
(PHP 5.4 以降)

定義済のクラス

Directory stdClass __PHP_Incomplete_Class Exception ErrorException
php_user_filter Closure Generator self static
parent

PHP のコアで定義済みの定数

PHP_VERSION
(string)
PHP_MAJOR_VERSION
(integer)
PHP_MINOR_VERSION
(integer)
PHP_RELEASE_VERSION
(integer)
PHP_VERSION_ID
(integer)
PHP_EXTRA_VERSION
(string)
PHP_ZTS
(integer)
PHP_DEBUG
(integer)
PHP_MAXPATHLEN
(integer)
PHP_OS
(string)
PHP_SAPI
(string)
PHP_EOL
(string)
PHP_INT_MAX
(integer)
PHP_INT_MIN
(integer)
PHP_INT_SIZE
(integer)
DEFAULT_INCLUDE_PATH
(string)
PEAR_INSTALL_DIR
(string)
PEAR_EXTENSION_DIR
(string)
PHP_EXTENSION_DIR
(string)
PHP_PREFIX
(string)
PHP_BINDIR
(string)
PHP_BINARY
(string)
PHP_MANDIR
(string)
PHP_LIBDIR
(string)
PHP_DATADIR
(string)
PHP_SYSCONFDIR
(string)
PHP_LOCALSTATEDIR
(string)
PHP_CONFIG_FILE_PATH
(string)
PHP_CONFIG_FILE_SCAN_DIR
(string)
PHP_SHLIB_SUFFIX
(string)
E_ERROR
(integer)
E_WARNING
(integer)
E_PARSE
(integer)
E_NOTICE
(integer)
E_CORE_ERROR
(integer)
E_CORE_WARNING
(integer)
E_COMPILE_ERROR
(integer)
E_COMPILE_WARNING
(integer)
E_USER_ERROR
(integer)
E_USER_WARNING
(integer)
E_USER_NOTICE
(integer)
E_DEPRECATED
(integer)
E_USER_DEPRECATED
(integer)
E_ALL
(integer)
E_STRICT
(integer)
__COMPILER_HALT_OFFSET__
(integer)
TRUE
(boolean)
FALSE
(boolean)
NULL
(null)

その他の予約語

int
(PHP 7 以降)
float
(PHP 7 以降)
bool
(PHP 7 以降)
string
(PHP 7 以降)
true
(PHP 7 以降)
false
(PHP 7 以降)
null
(PHP 7 以降)
resource
(PHP 7 以降)
object
(PHP 7 以降)
mixed
(PHP 7 以降)
numeric
(PHP 7 以降)

PHP_EOL で改行 PHPの定数

PHPでソースの改行をしたい場合は、PHP_EOL を使う方が好ましい。
PHP_EOL の EOL は End of line の略で、その行の終わりをあらわす。

○この書き方でなれてる方が多いかと思います。
  <?php echo ‘できればさけたい”\n”での記述’ “\n”;  ?>

○好ましい書き方は、以下。
   <?php echo ‘できればこちらの方法でコードを改行’ . PHP_EOL;  ?>

特に問題になることはなくても、PHPの定数で記述しておいた方が何かと安心です。

【他定義済みの定数】
http://jp2.php.net/reserved.constants

metaタグによるリダイレクト(SEOによるルール)

リダイレクトに <meta http-equiv="refresh"> タグを使用すると、検索エンジンランキングが下がる可能性があります。

metaタグによるリダイレクト
http://html-coding.co.jp/knowhow/tips/000572/

head要素内に記述されたmetaタグによりリダイレクトを行う方法です。記述としては、以下のようになります。

1 <meta http-equiv="refresh" content="秒数;URL=URL">

指定の例

5秒後に相対パスで指定したURLにリダイレクトさせる場合
相対パスの指定は、同じドメイン内の別ページにリダイレクトする場合に使用します。例えば、「/sample/index.html」というページから、「/redirect/index.html」というページにリダイレクトさせる場合、「/sample/index.html」の<head>タグ内に、

1 <meta http-equiv="refresh" content="5;URL=../redirect/index.html">

というタグを記入します。

10秒後に絶対パスで指定したURLにリダイレクトさせる場合
絶対パスの指定は、別ドメインのサイトやページにリダイレクトさせる場合に使用します。例えば、「http://www.example01.com/」から「http://example02.com/」へリダイレクトさせる場合、「http://www.example01.com/」内の各ページの<head>タグ内に、

1 <meta http-equiv="refresh" content="10;URL=http://www.example02.com/">

というタグを記入します。

この方法を利用するメリットとして、

  • HTMLのみで設定できる
  • 転送までの秒数が指定できる

という点が挙げられます。サイト内で転送設定を行う場合であれば、特別な準備は必要ないため、手軽に使うことができます。

ただし、サイト移転の場合に使うと、一部の検索エンジンで「前のドメインが持っていた情報が、新しいドメインに引き継がれない」という可能性があります。
例えば、Yahoo!ではmetaタグによる0秒指定のリダイレクトが後述の301リダイレクトとして扱われるため、前のドメインが持っていた情報が引き継がれますが、Googleでは.htaccessやPHPなどによる301リダイレクトを推奨していること、metaタグでのリダイレクトではスパム判定を受けることがあることから、前のドメインの情報が正しく引き継がれない可能性があります。

ページの自動ジャンプを止めるには

「5秒後に自動的にジャンプします」などの自動ジャンプ機能は、JavaScriptのsetTimeoutを使うか、<META HTTP-EQUIV=”Refresh…を使う方法がありますね。

これらの機能を持ったページに対して、ページを表示したまま、目的のページにジャンプさせないようにする方法はありますか?
JavaScriptの方は、ブラウザのスクリプト実行機能を無効にしていればできてしまうと思うのですが、METAタグの方は何か回避策はありますか?

といっても、実際に知りたいのは、「ジャンプを止める方法」ではなく「ジャンプを止めさせない方法」なのですが...

たとえば、このページはどうしても5秒以上見せたくないという場合に、ユーザーが勝手に時間延長をしたりしないようにしたいときなどです。

ブラウザのオプション
例えばWindowsInternetExplorer6ならば
ツール>インターネットオプション>セキュリティタブの中の「ページの自動読み込み」という項目を無効化するとrefreshは無効になります。
セキュリティの設定をwebページ側で変えることはできませんのでrefreshの無効化を防ぐ方法はありません。

別のページに自動でジャンプ

http://siriasu.s10.xrea.com/webtips/tips12.htm

■ 私のホームページは移転しました

「私のホームページは移転しました、10秒後に移動します」をするには下記のどちらかのソースを記述します。HTMLとJavaScriptがあります。

■ HTML

<meta>タグを使用する。<head>から</head>の間に記述します。変更箇所は赤字の数字が秒数、あとは移動先のURLを記述して下さい。

<meta http-equiv=”refresh”content=”10; url=URLを記入“>
■ JavaScript

JavaScriptでも同じように自動でページを移動できますが、ページを観覧している方がJavaScriptの機能をオフにしていると動作しません。

ソースは<body>から</body>の間にコピーして下さい。
変更箇所は移動先のURLと、移動するまでの時間です。
setTimeout(“autoLink()”,10000); で10秒になります。

<SCRIPT LANGUAGE=”JavaScript”>
<!–
function autoLink()
{
location.href=”●飛び先のURL●”;
}
setTimeout(“autoLink()”,10);
// –>
</SCRIPT>

$_FILES

$_FILES – PHPリファレンス

$_FILES

$_FILESは、定義済み変数のひとつで、POSTメソッドでアップロードしたファイルの情報を格納した多次元配列となっている。

 

使い方

$_FILESは、二次元配列になっているので、2つのキーで呼び出す。1つ目のキーは、フォーム部品のファイル送信欄のname属性値。2つ目のキーは、nametypesizetmp_nameerrorのいづれか。

例えば、ファイル送信欄のname属性値がuserFileであれば、userFileを1つ目のキーにする。ファイル名を呼び出すのであれば、2つ目のキーを「name」にし、$_FILES['userFile']['name']となる。

$_FILES[‘userFile’][‘name’]
ファイルの名前。
$_FILES[‘userFile’][‘type’]
ファイルのMIME型。
$_FILES[‘userFile’][‘size’]
ファイルのサイズ(バイト単位)。
$_FILES[‘userFile’][‘tmp_name’]
テンポラリファイル名。
$_FILES[‘userFile’][‘error’]
ファイルアップロードに関するエラーコード。

  • 0: エラーなし。ファイルアップロード成功。
  • 1: ファイルサイズが、「php.ini」の「upload_max_filesize」の値を超えている。
  • 2: ファイルサイズが、送信フォームで指定した「MAX_FILE_SIZE」の値を超えている。
  • 3: 一部しかアップロードされなかった。
  • 4: アップロードされなかった。
  • 6: テンポラリフォルダがない。
  • 7: ディスクへの書き込みに失敗。
  • 8: PHP拡張モジュールがファイルアップロードを中止。

$_FILESは、スーパーグローバル変数で、プログラム全体の、どのスコープでも呼び出せる。関数の内部で呼び出す場合、グローバル変数は、グローバル宣言するが、スーパーグローバル変数は、グローバル宣言すら必要ない。

サンプル

<form action=“sample.php” method=“POST” enctype=“multipart/form-data”>
<p>ファイル: <input type=“file” name=“userFile” /></p>
<p><input type=“submit” value=“送信”></p>
</form>

「sample.txt」というテキストファイルを送信すると、

<?php
echo ‘<p>$_FILES[userFile][name]: ‘ . {$_FILES[userFile][name]}</p>”; // name属性値が「userFile」のファイル送信欄に入力したしたファイルの名前を出力
echo ‘<p>$_FILES[userFile][type]: ‘ . {$_FILES[userFile][type]}</p>”; // name属性値が「userFile」のファイル送信欄に入力したしたファイルのMIME型を出力
echo ‘<p>$_FILES[userFile][size]: ‘ . {$_FILES[userFile][size]}</p>”; // name属性値が「userFile」のファイル送信欄に入力したしたファイルのサイズ(バイト単位)を出力
echo ‘<p>$_FILES[userFile][error]: ‘ . {$_FILES[userFile][error]}</p>”; // ファイルアップロードに関するエラーコードを出力
?>

↓↓↓出力結果↓↓↓

$_FILES[userFile][name]: sample.txt
$_FILES[userFile][type]: text/plain
$_FILES[userFile][size]: 12345
$_FILES[userFile][error]: 0

ファイルサイズ制限

PHPで取得可能なファイルの最大サイズを指定する方法。

<form action=“sample.php” method=“POST” enctype=“multipart/form-data”>
<input type=“hidden” name=“MAX_FILE_SIZE” value=“10000” />
<p>ファイル: <input type=“file” name=“userFile” /></p>
<p><input type=“submit” value=“送信”></p>
</form>

サイズが「12345」の「sample.txt」というテキストファイルを送信すると、

<?php
echo ‘<p>$_FILES[userFile][name]: ‘ . {$_FILES[userFile][name]}</p>”; // name属性値が「userFile」のファイル送信欄に入力したしたファイルの名前を出力
echo ‘<p>$_FILES[userFile][type]: ‘ . {$_FILES[userFile][type]}</p>”; // name属性値が「userFile」のファイル送信欄に入力したしたファイルのMIME型を出力
echo ‘<p>$_FILES[userFile][size]: ‘ . {$_FILES[userFile][size]}</p>”; // name属性値が「userFile」のファイル送信欄に入力したしたファイルのサイズ(バイト単位)を出力
echo ‘<p>$_FILES[userFile][error]: ‘ . {$_FILES[userFile][error]}</p>”; // ファイルアップロードに関するエラーコードを出力
?>

↓↓↓出力結果↓↓↓

$_FILES[userFile][name]: sample.txt
$_FILES[userFile][type]:
$_FILES[userFile][size]: 0
$_FILES[userFile][error]: 2

エラーコード「2」は、送信フォームで指定した「MAX_FILE_SIZE」をオーバーしていることによるエラーを示している。

tableの膨張を防ぐ

table要素の中に、半角スペースなどの区切り文字が存在しない英数字を入れると、td要素やth要素に設定しているwidthプロパティの長さ以上に、tableが膨張されてしまいます。

特に、Firefoxは記号を区切り文字として認識しない為、長いURLなどを入力するとすぐに発生します。

これについていくつか解決方法があります。

1)table要素ではなく、div要素で書く

まず、最初にためすべき方法です。
table要素に固執する必要がなければ、このようなことで頭を悩ませる必要はありません。

2)改行したい所にbr要素やスペース

抜本的な解決方法になります。
しかし、当然表示をコントロールする為に構造をいじることは、web標準の考えからは反します。

3)word-break:break-all;

IEの場合はword-break:break-all;を指定することにより回避できます。

ただし、word-breakはIEの独自拡張の為Firefoxには適応されません。

しかし、この方法のおかげで大多数の人が閲覧できるのはありがたいことです。

4)overflow:hidden;

overflow:hidden;を使いはみ出ている部分を消す方法もあります。
この場合はtd要素やth要素には適応されないので、内部にブロックレベル要素を作成して指定します。

はみ出た部分が表示されることはありませんが、レイアウトが崩れることがないのでイメージサイト向けの対応方法です。

5)overflow:auto;

overflow:auto;を使いはみ出ている部分をスクロールで表示する方法もあります。

見た目は悪いですが、すべての情報を表示することができる為、情報サイト向けの対応方法です。

★結論★

word-break:break-all;とoverflowプロパティの併用が望ましいかと

td{
	word-break:break-all;
	border:1px red solid;
	width:200px;
}
td div{
	overflow:hidden;
}

JavaScriptコードを外部ファイルとして作成し、それらのファイルをHTMLに読み込む際、外部ファイルに記述されたコードはいつどのようなタイミングで実行されるのか?

JavaScriptコードを外部ファイルとして作成し、それらのファイルをHTMLに読み込む際、
外部ファイルに記述されたコードはいつどのようなタイミングで実行されるのか?

参照先 http://analogic.jp/external-js-execute-timing/

1
2
3
4
5
6
7
8
9
<html>
  <head>
    <script src="http://hogehoge.com/first.js"></script>
    <script src="http://localhost/second.js"></script>
  </head>
  <body>
  ...
  </body>
</html>
first.js
1
console.log('first script');
second.js
1
console.log('second script');

検証1:ネットワークからのレスポンス速度の違うJSファイルの実行タイミング
⇒second.jsの方が先にダウンロードが完了しています。にもかかわらず first.js、second.js の順で実行されているということは、second.jsはfirst.jsのロード・実行が完了するまで「待っている」ということになりますね。

検証2:ファイルサイズの違うJSファイルの実行タイミング
⇒検証1の結果同様、こちらの場合も first.js、second.js の順で実行されていることが分かります。

検証3:外部JSファイル、インラインスクリプト、スクリプト以外のタグの混在時の実行順序

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head></head>
  <body>
    <script src="http://hogehoge.com/first.js"></script>
    <p>テストです。</p>
    <script>
    console.log('inline script');
    </script>
    <script src="http://hogehoge.com/second.js"></script>
  </body>
</html>

上記の例では、以下の順で記述しています。

  • 外部JSファイル(非常に重いファイル)
  • pタグ
  • インラインスクリプト
  • 外部JSファイル(軽いファイル)

スクリプトは first.js → インラインスクリプト → second.js の順で実行されていることが分かります。
外部JSファイルであれ、インラインスクリプトであれ、スクリプト以外のマークアップであれHTML上での出現順序通りにコードが実行される、ということが言えそうですね。これは言い方を変えると、スクリプトのロード・解析/実行が完了するまで、以降のHTMLマークアップの解析は「一時停止状態」になるということです。

【まとめ】

ここまでの検証結果を踏まえると、HTMLマークアップの中に複数の<script>タグ(外部ファイル参照やインラインスクリプト)や、スクリプト以外のマークアップが存在する場合でも、HTML上での出現順序通りに順次処理される、と言えるでしょう。※<script>タグが<head>タグ内にあっても<body>タグ内にあっても結果は同じ)

また、特定のスクリプトのロードに時間がかかってしまった場合、そのスクリプトのロード・実行が完了するまでは、次のスクリプトは実行されないということが分かりました。