レスポンシブなクリッカブルマップ上でマウスオーバー時にポップアップを表示

地図を読み込むimg要素のsrc属性で地図の画像ファイルを指定し、usemap属性にmap要素のname属性で指定する名前を指定します。 map要素のname属性で、img要素のusemap属性で指定したマップ名を指定することで、src属性で指定した画像ファイルがmapとして使用されることを定義します。 そしてarea要素でマップの画像ファイル上のcoords属性の座標をクリックするとhref属性のリンク先にジャンプすることを定義します。

オープンソースとコピーレフト

コピーライト(Copyright)は著作権という意味であり、商品でもWEBサイトでも他人が作ったものを勝手にコピーしたら当然ながら違法になります。 オープンソースはソースコードを自由に修正し再配布することができるフリーソフトウェアであり、窓の杜やベクターで無料でダウンロードできるフリーウェアとは異なり、「自由なソフトウェア」という意味です。 これはコピーレフト(Copyleft)という全く価値観が異なる考え方に基づいており、「修正したソースとその派生物は、元のライセンスと同じ条件で配布しなければならない」という、むしろコピーして改変して配布することを前提としています。

バージョン管理におけるロック方式とコピー・マージ方式

ファイル管理システムはプロジェクトファイル本体をチェックイン/チェックアウト機能で排他制御し、実績データをダウンロード/アップロードで差分管理し、次回のチェックインのタイミングでマージさせますが、排他制御をかけるわけではないので、端末ごとに実績入力ラインを分ける必要があります。本体がチェックアウトされている間も実績データはアップロード可能であり、その本体との差分は次回チェックイン時に本体にマージされます。 バージョン管理システム(VCS)はWordPress公式プラグイン管理で使われるSubversionのようにリポジトリ(Repository 倉庫)をリモートリポジトリで集中管理するものもあれば、GithubやGitbucketのようにコミットはローカルリポジトリに対して行い、リモートリポジトリでマージを行なう分散管理型のものもあります。

VirtualBoxとVagrantで仮想マシン作成

イメージファイルで開発環境シェアという発想は、ローカルPC上で開発環境を構築して共同開発する場合に、互換性からくるエラーのリスクが減らすということであり、GitのリモートリポジトリのホスティングサービスであるGithubから、WordPress開発環境のboxイメージであるVagrant Chef Centos WordPress(VCCW)リポジトリのパッケージを、仮想化ソフトVirtual Boxの中で展開(GITをクローン)します。 このためにVagrant本体と設定ファイルであるVagrantfileでもって、WindowsのVirtualBox内でCentOS上のWordPress環境を構築します。

WordPressの起動2 – WordPress起動時に読み込まれるPHPファイルの順番

WordPressの起動時には、コアモジュールがブラウザに入力されたURLをパース(プログラムのソースコードやXML文書など、一定の文法に従って記述されたテキスト文書を解析し、プログラムで扱えるようなデータ構造の集合体に変換すること)して、確定したクエリに基づいてSQLクエリに変換し、MySQLから投稿やページを取得しグローバル変数に格納するプロセスと、テンプレート階層をなぞりながらテーマテンプレートを確定するプロセスが走ります。

WordPressの起動1 – WordPressテンプレートファイルの構成

エントリポイントであるindex.phpからインクルードされるwp-blog-header.phpが基点になり、wp-load.phpで環境設定、wp-config.phpでDB接続情報、wp-settings.phpでWordPress初期設定を実行します。 次にwp-includs/functions.phpのwp関数を実行し、URLにマッチしたクエリを確定し、wp-includes/query.phpのquery_postsメソッドで投稿を取得します。 URLにて確定されたクエリは、MySQLクエリに変換され、wp_postテーブルとwp_postmetaテーブルからposts配列に、表示すべき投稿・固定ページデータを格納し、template-loader.phpにてテンプレート階層の優先度に従って、ベーステンプレートが決定されます。

HTTP通信とPHPのスーパーグローバル変数の関係

HTTP通信はクライアントからのリクエストに対してApacheサーバーがレスポンスを返すことで成立します。 ApacheのHTTP環境変数はサーバー変数とも呼ばれ、変数ごとに固有の情報を記憶する仕組みを実装しており、この情報はログ収集やアクセス制御に使われます。 開発したHTMLもCSSもJavaScriptもPHPも、すべてサーバー上に置かれ、クライアントが送信したリクエストに基づいて、サーバーはPHPで処理を行い、結果をHTML形式でクライアントに送信し、ブラウザが描画(rendering)することでWEBサイトが見られる仕組みです PHPコード中から、header()関数にて、レスポンスヘッダにLocationヘッダを追加してクライアントに送信すると、それを受けたブラウザは他サイトにリダイレクトします。 PHPコード中から、header()関数にて、HTTPステータス401を追加してクライアントに送信すると、それを受けたブラウザは認証ダイアログを表示します。

WordPressの関連URL取得方法

WordPressもブログツールとして使う分にはシステム的なことはあまり意識しませんが、WEBサイト開発のプラットフォームとして利用する場合は、テーマフォルダにアップロードした画像へのリンクの取得方法とか、サイトの基本情報の取得方法とかを意識せざるを得なくなります。

floatプロパティをclearfixで解除

floatの本質は文字を回り込ませることではなく、コーヒーからあがる湯気のようにブロックレベル要素を浮かせるためのプロパティです。 通常フローから浮き上がって別のフローを作っているので、別のフローを一旦clearして通常フローに戻してあげる必要がありますが、そのためにはclear属性を使ったり、親要素のoverflow属性値をhiddenに設定することでフロートを解除するなどの方法があります。

marginプロパティの上下に隣接するブロック要素での相殺問題

ブロックレベル要素は、幅指定がなければ親要素の中で横幅一杯に広がって配置されますが、これは本来ブロックレベル要素の横に同一フロー内において他の要素を並べることができないからです。 隣接する上下要素のmarginは相殺しますが、padding同士やpaddingとmarginの間では相殺しません。

ページ定義タグと構造化タグとdivタグの関係

htmlとheadとbodyというページ定義タグで定義されたコンテンツ部に対して、構造化タグ(header, nav, article, aside, footer)でWEBサイト全体を「ヘッダー領域」「ナビゲーション領域」「コンテンツ領域」「サイドバー領域」「フッター領域」の5つに区切ってレイアウトし、コンテンツの意味のカタマリをdivタグにid属性とclass属性を定義します。

positionプロパティのrelativeとabsoluteの関係

floatとmargin-left(子ボックス)またはpadding-left(親ボックス)を使わずに、positionとtopとleftで位置を動かすことができます。 positionプロパティの親がrelativeで、親の中にコンテンツがなければ、子がretaliveの場合と子がabsoluteの場合に違いはありませんが、親の中にコンテンツがある場合、子がrelaviveならコンテンツの下を基点にtopとleftで位置をずらし、子がabsoluteのなら親の基点からtopとleftで位置をずらします。

Ajax関数によるGET通信とPOST通信

jQueryはDOM(Document Object Model)を操作するためにJavaScriptを元に設計されたJavaScriptの拡張ライブラリで、nodeインターフェイスを通してアクセスできるDOMの最上位オブジェクト(エレメント)は、html開始タグ<html>とhtml終了タグ</html>から生成されるdocumentオブジェクトです。 ページのリフレッシュなしで、サーバープログラムにデータを渡して処理結果を受けとることができるAsynchronous(アシンクロナス)な非同期通信がAjaxであり、jQueryのAjax関数、特にshorthandメソッドを使うと実装が楽です。

クラスとインターフェイスの関係を製造業システムの視点で説明してみた。

インターフェイスという言葉にはそれ自体をインスタンス化することに意味がないクラスという意味と、異なる媒体をつなぐAPIの意味があります。 製品クラスは、製品にインスタンス化できますが、セット品はそのままではインスタンス化できないファントムであり、インスタンス化できない抽象クラスであるインターフェイスです。 またブラウザはHTMLの開始タグから終了タグまでを、1つのDOM(Document Object Model)オブジェクトとして要素化(エレメント化)し、DOMはJavaScriptやjQueryからエレメントにアクセスするために、Nodeインターフェイスを提供します。

WEB環境起動時に読み込まれるモジュールをphpinfo()でチェックしてみた。

php.iniはPHPの設定ファイルであり、PHPからDBに接続するための拡張モジュールphp_mysql.dllやphp_oci8_11g.dllを設定します。 httpd.confはApacheサーバーの設定ファイルであり、Apacheディレクティブと値(ON/OFF, 数字, HTTP環境変数, URLなど)を設定することでApatchのチューニングを行い、これと親子関係にある.htaccessをディレクトリ単位に配置することもできます。 Apacheの設定ファイルhttp.confは、XAMPPの場合PHPに関する設定部分をhttpd-xampp.confに分離して別途includeしており、httpd-xampp.conf内のPHPINIDirで指定したディレクトリのphp.iniが有効になります。

オブジェクト指向における要素と属性

システムは人間の言葉をそのままでは理解できないので、理解できるようにHTMLの開始タグと終了タグで囲んで範囲を明確にした後のカタマリが要素です。 HTML要素はDOMオブジェクト、属性はプロパティに割り当てられ、CSSでセレクタというオブジェクトとして、プロパティと値を設定することでレイアウトを整えます。 スタイルは要素に対して適用するときはHTMLタグをセレクタとして指定し、属性に対して適用するときは属性をセレクタとして記述します。

DOMの基本操作

ブラウザのDOM(Document Object Model)は、HTML文章を受け取ると、まず開始タグと終了タグの区切りをひとかたまりとしてエレメント(要素)を生成し、次にJavaScriptがエレメントを操作するためのツリー状のnodeインターフェイスを提供します。