初心者にとって、WEB アプリが解りづらいのは、PHP 以外でも目に見える結果を大きく変える事が予想される、HTML・CSS・JavaScript の効果を理解するのに多くの知識を必要とするからですが、とにかく最初は画面の構成から少しづつ自分の中でルールを作って行く必要があります。
WEBページ上のデモ( 何も表示されません )
上のリンク先のページのソースコードは以下のようにとても短いものですが、これはこれで多くの意味を含んでいるのできっちり理解しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
// ここに JavaScript のページの初期処理を記述
});
</script>
</head>
<body>
<!-- ここにコンテンツを作成する -->
</body>
</html>
1) PHP のソースに PHPコードを書かなくても良い
もちろん、ちゃんとしたアプリケーションを作っていけばそういう事はほぼ無くなりますが、通常存在する HTML ソースコードの拡張子を .php に変更してもそのまま表示されるという事です。
.php を拡張子として持つファイルの HTML ファイルとの大きな違いは、PHP モードに移行する事によって、PHP の処理を記述できるというところです。
2) HTML5 で書いたほうが以前より簡潔になる
HTML は、画面の表示部分や、ブラウザとの約束事を書く部分です。昔はもっと多くの事を書いていましたが、今では普通に HTML5 で書いて正しく表示されるので、PHP とそれほど直接関係無い部分ですから、簡潔なほうがいいに決まっています。
特に、SCRIPT 要素では他に属性を書かなくても問題ありません。JavaScript は PHP と直接関係する事は少ないですが、WEB アプリケーションの動作を決定する重要な要素なので、書く頻度としては高いです。よってこのようなシンプルな書き方のほうが良いと思います。
3) キャラクタセットは UTF-8。但し、エディタで保存は UTF-8N
いろいろ解らない事が多いのに、解らない部分が原因で正しく動かないのは、正しい知識を効率良く知るのに弊害となります。ですから、有無を言わさずキャラクタセットは UTF-8 にします。
但し
PHP のソースコードはそれなりのエディタを使用する必要があります。決してメモ帳を使ってはいけません。理由はさておいて、『それなりのエディタ』を使った上で保存を UTF-8N と言う最後に N が付いた形式で保存して下さい。
その時注意する事は、ソースコードの中に日本語がある事を確認して下さい。日本語が一切無い場合は何も気にしないでただ保存すれば問題ありません。しかし、後から日本語を追加してその時 UTF-8N で保存するのを忘れると、トラブルに巻き込まれるので、最初からコメントでもなんでもいいので日本語を書いて、UTF-8N で保存するのが理想的です。
4) 今時は jQuery は必須。Google のホスティングを書いておく
Google Hosted Libraries(jQuery)
Google がホスティングしている jQuery を使用して、jQuery UI の Spinner のボタン部分だけを使う方法
もう、WEBページを効率良く作るには、jQuery 無しでは考えられません。そのページで使用する予定が無くても最初から記述しておいて損はありません。
<script>
$(function(){
// ここに JavaScript のページの初期処理を記述
});
</script>
この部分は、ブラウザの画面の準備が完了した時に実行される部分です。jQuery で書くにしても、ベタなJavaScript+DOM で書くにしても必ず必要な部分です。
5) viewport は書いておいたほうがいいと思います
Googe Chrome の Device Mode & Mobile Emulation に切り替えた場合に表示を見やすくするのに役立ちます。
スマホ対応するのでは無く、デベロッパーツールも WEB アプリには重要な要素なので、どうせだからいろいろ学ぶきっかけとして役に立つ事になるでしょう。
6) と言う事で、F12 でデベロッパーツールを開く
たとえページとして何も表示されなくても、そこには HTML と CSS と JavaScript のソースがあるはずです。
posted by
at 2015-05-07 17:09
|
テンプレート
|
|
