HTML5 – 標準形・ひな形

全体構成

  • DOCTYPE宣言で始める
  • html要素の中にhead要素とbody要素を記述
  • head要素の中には、meta要素、title要素と、必要に応じてスタイル設定のための要素を記述

DOCTYPE宣言

  • XHTMLに比べて簡略化
  • ブラウザなどにHTML5であることを明示
  • DOCTYPE宣言がないと、ブラウザによってはレンダリングモードが互換モードとなりCSSの解釈が意図と異なるレイアウトとなる場合がある
  • DOCTYPE宣言によって、主要なブラウザは標準モードとなる。

html要素

lang属性による言語の指定

  • htmlタグのlang属性で言語を指定し、ブラウザ・検索サイトなどに伝える。

head要素

文字コード指定

  • head要素内のmeta要素で文字コードを指定する
  • HTML4以前の記述も可能だが、HTML5ではより簡略な表現が可能
  • この宣言より前のものは文字化けの可能性があるため、head要素の冒頭に記述

title

  • head要素内のtitle要素で指定
  • [タイトル]がブラウザのタイトルバーに表示される
  • 検索サイトでの検索結果のタイトルにも使われる

CSS設定

外部ファイル指定

  • head要素内のlinkタグの属性で指定
  • HTML5ではrel属性の値が”stylesheet”の場合のtype属性の値は”text/css”として設定されているので省略可能

CSSの直接記述

  • head要素内のstyle要素の中にCSSの文を直接記述

PHP – クエリによる結果の取得

概要

PHPからデータベースに接続した後、クエリを実行する手順は以下の通り。

  1. データベースへの接続で生成したPDOオブジェクトのqueryメソッドに、クエリの内容を与えて実行
  2. メソッドから返されるオブジェクト(PDO::PDOStatement)から、fetch()メソッドを使ってクエリの結果を引き出す

SELECT句の例

次のコードの14~19行でSELECT句をクエリとして渡し、その結果から内容を取り出している。

  • 14~15行目でPDOオブジェクトのquery()メソッドにSELECT句のクエリ内容を渡し、実行結果のPDOStatementオブジェクトを$resultに受け取っている
  • 16行目からのwhileループで、結果のレコードを一つずつフェッチしている
  • 17~18行目で、フェッチされたレコードの各カラムに対応する値を、フィールド名をキーとして指定して表示

実行結果は以下の通り。

06000 山形県
19000 山梨県
35000 山口県

SHOW TABLESの例

検索結果ではないが、コマンドのSHOW TABLESも同じように扱い、結果は一列のデータとして得られる。

実行結果は以下の通り。

pop_pref
pref_name
shop
test
test_score
test_sex
wholesale

PDOStatement::fetch()の引数について

省略可能な第1引数int $fetch_styleは、PDO::FETCH_*で指定する定数で、通常よく使われるのは以下。

  • PDO::FETCH_ASSOC→カラム名を指定する
  • PDO::FETCH_NUM→0から始まる整数でカラム番号を指定する
  • PDO::FETCH_BOTH→上記のいずれでも指定可能(省略時のデフォルト)

 

PHP – コマンドラインからの実行

PHPスクリプトのファイルをターミナルからコマンドラインで実行するには、PHPコマンドに-fオプションを付けてファイルを指定する。

たとえば次のようなphpファイルがあって、ファイル名がtest.phpだとする。

これを実行するには、以下のようにするとよい。

 

 

 

PHP – データベース接続

概要

MySQL 5では異なるデータベースシステムの違いを吸収するPDO(PHP Data Objects)が導入された。これによって、MySQL、PostgreSQLなど異なるDBMSでも、コンストラクタの表現を変えるだけで統一的に扱える。

簡単な例

MySQL上に、以下のようなテーブルtestがデータベースMY_DATABASEにあるとする。

WordPressのHTMLから、このデータベースに接続し、テーブルのデータを表示する例。

表示結果は以下の通り。

John 35 US
Alex 40 NZ
Luice 29 US
Alice 23 UK
Sala 25 JP

接続方法

PDOコンストラクタ

PDOコンストラクタで、データソース、ユーザ名、パスワードなどを指定して、データベースオブジェクトを取得する。

今回の例では、予め変数にそれらの値を設定しておき、データベースオブジェクトを構築している。

PDOコンストラクタの仕様は下記のとおり。

dsnはデータソース名で、データベースに接続するのに必要な情報が含まれる。

MySQLのデータソース名の構文は以下の通り(ポート番号は省略可能)。

usernamepasswordはその名の示す通りユーザ名とパスワード。

例外

データベースに接続できなかった時は、例外(PDOException)がスローされるので、try~catchで受ける。

日本語対応

日本語を正しく表示させるため、以下のクエリを入れておく。

接続の遮断

明示的にデータベースを閉じるため、PDOクラスのオブジェクトにNULLを代入する。

 

 

 

PHP – die()/exit()

 

概要

die()とexit()は同じ機能の別名で、そのスクリプトを含むページを表示させずに実行を停止する。停止時にページにメッセージを表示可能。

die()/exit()が実行されない場合

まず確認のために、次のページを表示させる。

この場合はHTMLの内容が普通に表示される。

php-when-not-died

die()/exit()が実行された場合

次に(ダミー)のところで、die()を実行させる。

 

 

 

この場合は次のように表示され、ページのほとんどが表示されていない。

php-when-died

 

QGIS – クリッピング

概要

たとえばあるエリアの地図と、そのエリア内だけ鉄道や道路のベクタを切り出して扱いたい時がある。このようなときは、広域データの鉄道や道路のベクタデータのうちエリア内のみ切り出す「クリッピング」を行う。

ここでは、東京23区内の鉄道路線と駅をクリップする例を示す。大まかな手順は以下の通り。

  1. 23区の地図データを切り出し、外形データを作る
  2. 上記の外形データで鉄道路線と駅の全国データをクリップ

地図データの切り出しと外形データの作成

地物の切り出し

地物を切り出す手順で、23区のみ抽出して保存する。このデータはレイヤとして後に利用する。

外形データの作成

切り出した23区のデータの外形を融合(dissolve)処理によって作成・保存。このデータはクリッピングのために一時的に利用するだけ。

以下の図は、23区の外形ポリゴンと全国の鉄道路線データ、駅データを重ねたもの。

qgis-tokyo-ward-outline-and-railway

クリップ処理

メニューから、ベクタ→空間演算ツール→クリップでダイアログを表示させる。

qgis-clipping-dialog

  • 「入力レイヤ」には、クリップされるデータを指定(この場合は鉄道路線データ)
  • 「レイヤをクリップする」データには、クリップ範囲のデータを指定(この場合は23区の外形データ)
  • 「クリップされた」データには、クリップ後のデータを保存するファイルのパスを指定

実行結果は以下の通り。

qgis-tokyo-ward-clip-railway

 

PHP – 基本

基本構成

最も基本的な方法は以下の通り

  • 通常のHTMLの中にスクリプトを書く
  • ファイル名の拡張子は、通常は.php

スクリプトを外部ファイルにするには、require(-once)、include(-once)を使う。

WordPressの場合は、HTML中に直接スクリプトを書けないようなので、WordPressで準備された方法で外部ファイルを読み込む。

通常の方法でのPHPの例を新しいタブで示す。

スクリプトの開始と終了

一般的に、PHPは<?phpで開始し、?>で終了する。

複数行に渡る場合は、一行目に<?php、最終行に?>を配置する。

コメント

一行コメントは//#。複数行コメントは/*で開始し、*/で終了。

行の終了は';'

各行は必ず';'で終了させる。行の解釈が適切になされるなら、行の途中で改行してもよい。

変数

変数は'$'で始める

変数宣言や型宣言は不要

コード中で値を代入した時点で変数が確保され、値によって型が決まる。また、値を代入するたびに、その値に応じた型に変化する。

“可変変数”がある

変数名自体を他の変数に格納して、参照することができる。

通常の変数に文字列で他の変数名を代入し、参照時に'$$'とすることで、変数内容の文字列を変数名として、その内容が返される。

参照代入が可能

通常の代入は値がコピーされて渡されるが、=&で代入すると参照渡しとなる。

この例では$originalの内容を各変数に代入した後に値を変更しており、値代入した$copy_valの値は代入前と変わらず、参照代入した$copy_refの値は$originalと同じ値に変化する。

文字列

文字列の結合

文字列の結合にはドット(.)を使う。変数、文字列リテラルのほか、数値も文字列に変換されて結合される。

変数内での文字列展開

ダブルクォート(")やヒアドキュメント内では、変数は文字列として展開される。

変数前後の半角スペースは必須で、出力にも半角スペースが入る。これを回避するために、変数を{}で囲むことができる。

なお、シングルクォート(‘)を用いた場合は、変数としてではなく文字列表現として扱われる。

ヒアドキュメント

<<<によって、指定した文字列(ID)の間が連続した文字列として解釈される。

ヒアドキュメントの開始IDや終了IDの書くのにスペースやタブを入れてはいけない、終了ID行には';'以外書いてはいけない、などの条件があるので注意。

なお、ソースコードの改行位置で完全に連続せずに空白が入っているが、これはダブルクォートで文字列を分割した場合でも同じようになるので、WordPressの仕様か?

特殊文字やエスケープする文字の扱い

ダブルクォート(“)、シングルクォート(‘)、ヒアドキュメントの違い。

変数展開 特殊文字の扱い エスケープする文字
ダブルクォート(“) される 特殊文字 $ \ “
シングルクォート(‘) されない そのまま
ヒアドキュメント される 特殊文字 なし

 

viコマンド

カーソル移動

w 次の語の先頭に移動
b 前の語の先頭に移動
^ 行頭に移動
$ 行末に移動
[CTRL] + f 次のページに移動
[CTRL] + b 前のページに移動
G 最終行に移動
Gn n行目に移動

入力・編集

a カーソルの右から挿入開始
i カーソル位置から挿入開始
o 現在行の下に1行挿入し、行頭から入力開始
O 現在行の上に1行挿入し、行頭から入力開始
J 現在行と次の行を結合

削除

x カーソル位置の1文字を削除
X カーソルの左の1文字を削除
dd 現在行を削除
dw カーソル位置の1語を削除
d^ 行頭からカーソル位置まで削除
d^ カーソル位置から行末まで削除

複数行の操作

行の選択

  • 開始行でms
  • 終了業でme

mはマークコマンドで、続く一文字でその行をマーキングする。

行のカットまたはコピー(ヤンク)

  • カットは:'s,'ed
  • ヤンクは:'s,'ey

:でコマンドモードに移り、開始行と終了行の範囲を指定した後にd(delete)またはy(yank)。

貼り付け

貼り付ける行の上の行にカーソルを置いてp

 

 

WordPress – PHPを使う

概要

WordPressでPHPをHTML内に書いても、拡張子phpのファイルにならないため、そのままでは実行されない。

.htaccessを変更することでhtmlファイルでもPHPが呼ばれるようになるらしいが、それよりもPHPを外部ファイルとして持っておいて、HTMLからそこで定義された関数を呼び出す方法の方が、改変部分が少なそう。

方法1:親テーマのfunctions.phpに加える

親テーマディレクトリ下のfunctions.phpにショートコードの関数を書き加え、HTMLから呼び出す方法。

たとえばfunctions.phpの最後に以下を追加。場所は最後の方がよいか。

そして、WordPressのエディタ画面で以下を記述。

これで上記の記述の部分でショートコードが実行され、この部分に”Hello World!”が表示される。

ただしこの方法は、親テーマのfunctions.phpを加工しているので望ましくない。

方法2:子テーマのfunctions.phpに加える

子テーマのfunctions.phpに以下を記述する。今回はコード全体を<?php?>で囲んでいる。

そして方法1と同じように、HTMLからショートコードを呼び出す。

この方法だと、親テーマのバージョンアップなどの影響を受けないのでよい。

ただし、ショートコードが増えると、一つのfunctions.phpファイルで管理をするのが大変になってくる。

方法3:別ファイルのPHPを呼ぶ

functions.phpに以下を記述。

以下の内容のファイルを、ファイル名を”php_in_wp.php”として、functions.phpと同じ場所に置く。

そして、以下のようにHTMLから外部ファイルを呼び出す。

下の行は、実際に上記を実行した結果。

Hello WordPress!

参考リンク

WordPress投稿ページにPHP利用→ショートコードを使おう!