☆新設!! － 《PHP＋MySQL》で自作WEBアプリに挑戦…!?

★これまで、『週刊電説』【Dense2’s Blog Weekly】ではオンラインのWP：WordPress【ワードプレス】のことばかりに触れてきました。でも、探究心の強い人にはアレだけでは物足りなかったかもしれません。なので、今回は、”インストール型“にチャレンジするための前段階として、《WAMPP/XAMPP》【ワンプ/ザンプ】という「開発環境」について、少しだけお届けしますね。

☆WP：WordPress【ワードプレス】などのいわゆるWEBアプリ（ケーション）は、コアは《PHP＋MySQL》という、一種のプログラムの「塊」【モジュール】になっているのですが、それを開発しながら安全に試運転（テスト）するためには、それなりの「開発環境」が必要です。これらをマトメた、”フリー“【オープンソース】のものに、《WAMPP/XAMPP》【ワンプ/ザンプ】というスグレモノがあります。これは、自分のPC内で”ローカル“【インターネットに接続しないオフラインの状態】で《擬似サーバー環境》を提供してくれるオール･イン･ワン･ソフトです。これを使うことによって、自分のPC内の”WEBブラウザー“【IE：InternetExplorerやFF：FireFoxなど】で確認しながらセキュアな環境下での開発が可能になります。

◎《XAMPP》【ザンプ】について －
～これは、実質、”Windows“対応のPCを前提としているので、《WAMPP》【ワンプ】ということです。尚、Mac対応のPC向けには《MAMPP》【マンプ】というものがあります。

• WAMPPの入手先⇒ http://www.apachefriends.org/jp/xampp-windows.html
• WEBサーバー：Apache【アパッチ】
• スクリプト言語：PHP
• データベース：MySQL

…の「三点セット」に加え、PHPでよく使う汎用プログラム･セットをマトメたライブラリーである”PEAR“【PHP Extension and Application Repository】なども入っています。

◎Smartyについて －
～このWP：WordPress【ワードプレス】にせよ、いわゆるWEBアプリケーションの構造は、”ロジック“【データ管理】を担う《PHP＋MySQL》などのモジュールと”デザイン“【テンプレート】を担う《(X)HTML＋CSS》などのテーマ（スキン）･セットから成り立っているのですが、この両者をつなぐ「テンプレート･エンジン」として”Smarty“というものがあります。【一種のPHPの拡張書式みたいなもの】

• Smartyの入手先⇒ http://www.smarty.net/download.php

…この”Smarty“を使うメリットとしては、特に、オンライン･ショップなど更新頻度の高いWEBサイトの場合、ロジックとデザインを切り離し主に「データ管理」の部分のみに専念して作業が進められるというメリットがあります。

※参考図書について －

・藤本 壱：『作って覚える PHP+MySQLアプリケーション － ブログ、ショッピングサイトからマッシュアップまで』〔ソシム；2008-07-03〕

＝ 目 次 ＝
• 第１章：開発環境を整える〔主に、XAMPPについて〕
• 第２章：MySQLの基本とPHPからの利用
• 第３章：Smartyでロジックとデザインを分離する
• 第４章：ミニブログのシステムを作る
• 第５章：ショッピングサイトのシステムを作る
• 第６章：マッシュアップWebアプリケーションを作る

［参考］著者のブログサイト

Appendix②：CSSについて…

※昨日はWEBサイトを支える「ハードコード」である”(X)HTML“についてお話ししましたが、今日は、「ソフトコード」とも言うべき”CSS“についてお話ししようと思います。【言ってみれば、”レイアウト“や”（文字）装飾“に関わるTIPSです】そのバイブル的な書物としては －

・市瀬裕哉･福島英児･望月真琴 共著：『実践 Web Standards Design ～ Web標準の基本とCSSレイアウト&Tips ～ 』〔技術評論社；2008-11-29；再刊版〕

～2005年の同名書の”再刊版”だが、それだけ支持された…ということの証拠でもある。【因みに、絶版になったのは元の出版社が倒産したため】しかしながら、豊富な実例を挙げてCSSの”裏技”的なものまで殆ど網羅しているので、興味を抱いた人には是非一読をお勧めします。【この本に書いてある通りにやれば、取敢ずはプロ”並み”のWEBサイトを作れるようにはなります】尚、やはり、著者のWEBサイトとの併読がさらに効果的でしょう!?【このサイトでは、後述するWP用の”無料”の”Vicuna“という「テーマ（スキン）」も開発していて定評があるようです】

・3Ping.org
・Vicuna【CMS】 ← コチラを読めば、”テンプレート“や”テーマ（スキン）“などの構造が理解できますよ!!

【参考：最低限知っておくべきCSSタグ】 ← 「ブログ」を書く上で…という意味です
～CSSタグは「ソフト･コード」とも言われ、他の（親）ファイルから読み込まれるため、こう呼ばれます【ある意味、”PHPもその一種と言えます…言わば、PHPは硬軟とり合わせた”両刀使い“ということですね】

・ボックス･コントロール系：［文法］《ｄｉｖ＃【”id-name”】 ｛ｄｉｓｐｌａｙ：ｂｌｏｃｋ； ｗｉｄｔｈ：【横幅の数値】ｐｘ； ｈｅｉｇｈｔ：【高さの数値】； ｍａｒｇｉｎ：【トップの数値】ｐｘ 【ライトの数値】ｐｘ 【ボトムの数値】ｐｘ 【レフトの数値】ｐｘ；｝》…という書式になります【”仮想“のボックスをサイズ指定で作り、それを上下左右の”マージン“【スペース/余白】でコントロールするイメージ】

・画像コントロール系：［文法］〔前述の(X)HTMLタグの”img“タグの末尾に挿入〕《ｓｔｙｌｅ＝”ｄｉｓｐｌａｙ：ｂｌｏｃｋ； ｗｉｄｔｈ：【画像の横幅の数値】ｐｘ； ｈｅｉｇｈｔ：【画像の高さの数値】ｐｘ； ｂｏｒｄｅｒ：０； ｍａｒｇｉｎ－ｌｅｆｔ：【レフト･スペースの数値】ｐｘ； ｍａｒｇｉｎ－ｔｏｐ：【トップ･スペースの数値】ｐｘ；”》…という書式になります

・部分装飾系：［文法］《＜ｓｐａｎ ｓｔｙｌｅ＝”【装飾系CSSのコマンド記述】”＞「装飾したい文字や文章」＜／ｓｐａｎ＞》…という書式になります

・フォント装飾系：［太字の文法］〔”p“タグの末尾に挿入〕《ｓｔｙｌｅ＝”ｆｏｎｔ－ｗｅｉｇｈｔ：ｂｏｌｄ；”》…という書式になります【例：太字の場合ですが、これは、”strong“タグで囲ったものと同じ効果になります】

・下線強調系：［下線強調の文法］〔”p“タグの末尾に挿入〕《ｓｔｙｌｅ＝”ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｕｎｄｅｒｌｉｎｅ；”》…という書式になります

・背景装飾系：［背景色/背景画像の文法］〔”div“タグの末尾に挿入〕《ｓｔｙｌｅ＝”ｂａｃｋｇｒｏｕｎｄ：【＃（六桁のカラー番号） ｕｒｌ（【背景画像のURL】） ｘ【左上の基点からのレフト･スペースの数値】ｐｘ ｙ【左上の基点からのトップ･スペースの数値】ｐｘ；”》…という書式になります

【注：CSSを外部ファイルに置いて読み込む場合】
・［文法］＃【ID名】（または）．【class名】 { ～ ～ ～ （プロパティを書き込みます） ～ ～ ～ ；}
…という書式になります
⇒”プロパティ“の書式や値については、関連書籍で確認して下さい【複数のプロパティを併記する場合は、必ず”；“”セミコロンで区切り”半角“分の”スペース“を開けるようにして下さいね。尚、（X）HTMLとの一番の違いは、値を指定する時は必ず”px”などの”単位を付けるということと、”や’は使えないことです。”英数半角文字“に限り使えますが、紛らわしいので”＿“”アンダーバー“や”～“”チルド“などは使わないほうがイイでしょう】

♪fitted BGM〔Philippe Saisse：Land of the Flying Funk performed by Philippe Saisse from “Next Voyage”, 1997
【↑ ※リンクをクリックすると、WMP：WindowsMediaPlayerが立ち上がり曲が聴けます※↑】

Appendix①：（X）HTMLについて…

※先週一週間、WP：WordPress（ワードプレス）という”オンライン･ブログ“について、集中的に解説してきました。あまり面白くなかったかもしれませんが、WEB用の言語である”(X)HTML“や”CSS“などに興味を持たれた方もいるかと思います。なので、今日は、”(X)HTML“のバイブルとも言われている参考書を紹介しますね。

・益子 貴寛：『Web標準の教科書 － XHTMLとCSSでつくる”正しい”Webサイト』〔秀和システム；2005-09〕

～2005年頃から「Web標準」（”Web Standard“）という言葉が使われ始めたが、【あの”WEB2.0“という言葉も同じ頃】この確たる”基準“のないIT-WEB業界での《スタンダード化》への試みでもある。この本は本当に分厚いけれども、”事典“代わりに使うには好適な”バイブル書“とは言える。加えて、著者である益子氏自身のWEBサイトと併用すると、より理解が深まると思います。

・CYBER＠GARDEN

【参考：最低限知っておくべき(X)HTMLタグ】 ← 「ブログ」を書く上で…という意味です
～(X)HTMLタグは「ハード･コード」とも言われ、文章の中に直接”コマンドを埋め込むため、こう呼ばれます【ある意味、”PHPもその一種と言えます】

・画像挿入系：［文法］《＜ｉｍｇ ｓｒｃ＝”【画像のURL】” ｂｏｒｄｅｒ＝”0″ ａｌｔ＝”【代替テキスト】” ｗｉｄｔｈ＝”【横幅の数値】” ｈｅｉｇｈｔ＝”【高さの数値】” ／＞》…という書式になります【※コードは敢て大文字で表記してありますが、実際に使う場合は”半角文字“で使って下さいね】

・リンク貼付系：［文法］《＜ａ ｈｒｅｆ＝”【リンク先のURL】” ｔｉｔｌｅ＝”【リンク先への誘導文】”＞「リンク名」または「画像名」＜／ａ＞》…という書式になります【※コードは敢て大文字で表記してありますが、実際に使う場合は”半角文字“で使って下さいね】

・部分強調系：［文法］《＜ｓｔｒｏｎｇ＞「強調したい文字や文章」＜／ｓｔｒｏｎｇ＞》…という書式になります【※コードは敢て大文字で表記してありますが、実際に使う場合は”半角文字“で使って下さいね】

～”文字装飾“に関わることは、明日解説する”CSS“でコントロールするようにしたほうがベターです

♪fitted BGM〔Philippe Saisse〕：Land of the Flying Funk performed by Philippe Saisse from “Next Voyage”, 1997
【↑ ※リンクをクリックすると、WMP：WindowsMediaPlayerが立ち上がり曲が聴けます※↑】