Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】

XAMPPはWebサーバを稼働するために必要なパッケージがひとまとめになったもので、基本でApache・MySQL・Perl・PHPがセットになっており、簡単にWebサーバ環境を構築することができます。ちなみに「ザンプ」と読むらしいです。

XAMPPはいくつか種類がある

XAMPPはクロスプラットフォームで動作する、という前提で用意されており、Windows、Linux、そしてMacそれぞれのパッケージが用意されています。

しかし、バージョンには大きな差異があり、Windows版とLinux版は2012/7/13であるのに対し、Mac版は2010/03/04とかなり古いものとなっています(Solaris版ですら2011/9/20)。 当然ながらApache等のバージョンも低く、Windows版は2.4.2、Mac版は2.2.14と、なかなかの迫害ぶりを受けている状態です。

Mac版は別プロダクトでMAMPというものがあり、そちらのほうがメインになっているようです。といっても、Apacheは2.2.22なのでXAMPPとあまり変わりありませんが・・・。

MAMPは無料版と有料版であるMAMP PROの2種類があり、無料版との違いは幾つかの設定がGUIで行えるぐらいで、なんと59ドルします…

前置きが相変わらず長くなりましたが、結論としては、MAMP PROに59ドル払う必要もないし、Mac上で使う分にはXAMPPもMAMPバージョンもそれほど違いがないので、XAMPP for Mac OS X版を使用することにします。

インストールは至極簡単

インストールはびっくりするほど簡単です。

  1. apache friends – xampp for mac os xへ移動し、「XAMPP Mac OS X 1.7.3」のリンクをクリック、自動でダウンロード開始。
    20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】001
  2. ダウンロードした「xampp-macosx-1.7.3.dmg」をマウント。
  3. 表示されたウインドウの指示通りにXAMPPのフォルダをApplicationsフォルダへ移動して完了。
    20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】002 

Windowsのようなインストーラも必要ありませんでした。ちなみにMAMPはダウンロード欠損が多い上にpkgでインストールする必要があり、アンインストーラもまともに動きません。

起動も簡単

  1. アプリケーションフォルダにXAMPPがあるので、その中にある「XAMPP Control」アプリを起動。
  2. 「Apache」「MySQL」「FTP」の起動ボタンが表示されたら、とりあえず「Apache」の「Start」をクリック。
  3. アカウントのパスワードを入力してランプが緑になれば起動成功
    20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】003 

ブラウザ上から「http://localhost」と入力すればXAMPPのようこそ画面が表示されます。このあと、幾つかのセキュリティ設定やバーチャルホスト等の設定を行うのですが、これはまた次回。
20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】004 

注意点

Web共有は無効にしよう

Web共有はMacをAir Mac ExpressのようにMacをアクセスポイント化できたりする便利な機能なのですが、XAMPPを使う際にはいろいろ不都合が出るので無効にしておきましょう。システム環境設定→共有から変更できます。
20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】005 

プロキシの除外リストに「localhost」を入れておこう

ネットワーク接続にプロキシを使用している場合、まれにlocalhostがプロキシに引っかかることがあるので、localhostを「プロキシ設定を使用しないホストとドメイン」に追加しておきましょう。システム環境設定→ネットワーク→詳細→プロキシから変更できます。
20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】006 

アンインストールに「App Cleaner」等のアプリは絶対に使わないように!

アンインストールするときにAppCleaner等のアンインストールアプリを使うと、他のシステムファイルを巻き込んでゴミ箱に持って行ってしまいます。

なので、アンインストールするときは必ずXAMPPフォルダのみ削除するようにしましょう。

WordPressのパーマリンクから最後のアドレス(スラグ)を抜き出す

丸一日悩んでやっとできたのでメモ。

タイトルからすると何がなにやらですが、要するに表示しているページのスラグを抜き出す方法です。
Wordpressはページ毎にスラグという個別の名前を割り当てることができ、それがURL上では「http://wphoge.co.jp/スラグ」という感じに表示されます。

WordPressのテンプレートタグだとせいぜいスラグ付きのフルパスしか取得できず、正規表現で抜き出す方法とか文字を切り出す関数を使う方法とかを考えていたのですがどうにもいいのが見つからず。

そうこう調べているうちに、こちらのフォーラムで投稿情報から一部の情報を抜き出すpost_nameというものが見つかってなんとか解決できました。

postsループ内で以下のコードを使えば抜き出すことができます。

<?php echo attribute_escape( $post->post_name ); ?>

上記のコードはPHP全てのバージョンで使用できるものですが、PHP5をインストールされている環境であれば以下のコードでもできるようです。

get_page($page_id)->post_name; ※$page_idは任意のページIDを記述、変数のままだと現在表示しているIDが適用される

これで、例えば「http://www.wphoge.com/slug」というURLから「slug」という部分だけ抜き出すことができます。

この手法を使用する利点は、Wordpressのページが持つスラグに応じてCSSを変更するということができます。標準HTMLの構成が大きく変わらないパターンのときに重宝すると思います。

CSSで指定するときには以下のような感じで指定するといいでしょう。

<div class="hoge <?php echo attribute_escape( $post->post_name ); ?>">
    CSSクラス「hoge」と取得したスラグのCSSが適用される
</div>

ちなみに、Wordpress2.8では「スラグ」という名前では存在していません。記事投稿画面の「パーマリンク」というところに統合されていますので注意してください。
あと、たぶんスラグが日本語だとうまくいかないと思うので、パーマリンクの指定は必ず英数字でやりましょう。

XAMPP+phpEclipseインストールメモ

Eclipse公式サイトが毎回レイアウト変更するのかどうかわかりませんが、紹介サイトごとにインストール方法が違っていて非常にわかりづらくなっていたので、ものすごい箇条書きでメモ。
バージョンは2008年3月12日現在のリリース分を入れています。

参考サイトはこちら:

XAMPP

PHP、MySQL、Apache、Perl等がセットになった総合Webサーバです。インストーラ版もありますが、ZIPでも配布されており、やろうと思えばUSBメモリ等に入れてどこでも仮想環境を実現できそうです(User権限では動かせないと思いますが)。

  1. XAMPP Windows 1.6.6a(http://www.apachefriends.org/download.php?xampp-win32-1.6.6a.zip)のダウンロード・解凍
  2. 解凍したxamppフォルダをドライブレター直下に移動(C:\等)
  3. 「setup_xampp.bat」を起動、Apache等の設定ファイルが自動設定される
  4. 「xampp-control.exe」を起動
  5. ApacheとmySQLの「Start」をクリック、Runningとなっているか確認
  6. ブラウザから「http://127.0.0.1/」または「http://localhost/」でアクセス
  7. XAMPPの大きいアイコンが表示され、使用言語に「日本語」を選択
  8. XAMPP管理画面が表示されれば成功

※ XAMPPの終了はxampp-controlの各サービスにある「Stop」をクリックしてから「Exit」をクリックして終了してください。ウインドウのXボタンは最小化されるだけです。

XAMPP-phpMyAdminでMySQL初期設定

XAMPPにはMySQLデータベースを管理するためのツールが同梱されています。コマンドラインからSQLを打ち込んでもよいですが、動作が安定しているのでこちらを利用します。

  1. ブラウザから「http://127.0.0.1」にアクセス

不要ユーザの削除

  1. 左メニューの「phpMyAdmin」をクリック
  2. 「特権」をクリック
  3. ユーザリストのroot:127.0.0.1の項目にチェック
  4. 「実行する」をクリック

rootパスワードの設定

  1. root:localhostの項目右端にあるアイコンをクリック
  2. 「パスワードを変更する」エリアからパスワードを任意で入力
  3. 「実行する」をクリック

phpMyAdminのユーザ認証方法設定

  1. 「C:\xampp\phpMyAdmin\config.inc.php」をエディタで開く
  2. 19行目を「$cfg[‘Servers’][$i][‘auth_type’] = ‘http’;」に変更
  3. 再度phpMyAdminにアクセスし、認証画面が表示されたら設定したrootのユーザとパスワードを入力

Web製作用の一般ユーザ作成

  1. phpMyAdminトップページから「特権」をクリック
  2. 「新しいユーザを追加する」をクリック
  3. ユーザ名:任意、ホスト:ローカル、パスワード:入力必須
  4. 「グローバル特権」エリアの「データ」「構造」すべてにチェックを入れる
  5. 「実行する」をクリック
  6. ログアウト

Web製作用データベースの作成

  1. 作成したユーザでログイン
  2. 「データベース」をクリック
  3. 「新規データベースを作成する」項目に任意のデータベース名を入力
  4. 「作成」をクリック

XAMPP-Apacheバーチャルホストの設定

XAMPPのhtdocsフォルダ内はXAMPP管理系ファイルがおいてありますので、Web製作用フォルダを別にhtdocs2として作成します。
http://127.0.0.1:8080でアクセスするとWeb製作用サイトにアクセスする設定にします。
htdocs以下にフォルダを作成して作業する場合はこの設定は必要ありません。

  1. XAMPPフォルダ直下にhtdocs2フォルダを作成
  2. 「C:\xampp\apache\conf\httpd.conf」をエディタで開く
  3. 54行目「Listen 8080」を追加
  4. 最終行に以下の内容を追加

<VirtualHost *:8080>
DocumentRoot C:/xampp/htdocs2
<Directory "C:/xampp/htdocs2">
Options Indexes FollowSymLinks MultiViews Includes ExecCGI
AddType text/html .shtml
AddHandler server-parsed .shtml
AddHandler cgi-script .cgi .pl
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

  1. XAMPPからApacheを再起動
  2. ブラウザから「http://127.0.0.1:8080」にアクセスし、ページが表示されるか確認

Eclipse

Eclipseはオープンソースの総合開発環境です。基本はJavaしか使えませんが、プラグインを追加することによりC++やHTML等の多言語を扱うことができます。

  1. Eclipse Classic 3.3.2のダウンロード(http://www.eclipse.org/downloads/)
  2. Eclipse Classicを任意の場所に解凍
  3. JDK 6 Update 5のダウンロード(http://java.sun.com/javase/ja/6/download.html)
  4. JDK 6 Update 5のインストール
  5. eclipse.exeのショートカット作成
  6. ショートカットのリンク先に「-vm "C:\Program Files\Java\jdk1.6.0_05\bin\javaw.exe"(JDKのパス)」を追加
  7. ショートカットから起動してeclipseの起動を確認

Eclipse-Pleiades(日本語化)

Pleiades はEclipseと関連する有名なプラグインを日本語化します。Eclipseしか使わないという方はEclipse 日本語化言語パック (http://prdownloads.sourceforge.jp/blancofw/29812/NLpackja-eclipse-SDK-3.3.2 -win32-blancofw20080307.zip)を使用してください。

  1. Pleiades 1.2.1(http://mergedoc.sourceforge.jp/index.html#/pleiades.html)のダウンロード
  2. Pleiades の解凍
  3. 解凍した中身をEclipseのフォルダに上書き
  4. eclipse.iniをメモ帳で開き、最下行に「-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar」を追記
  5. eclipse.exe -clean.cmdをメモ帳で開き、5行目を「start .\eclipse.exe -clean -vm "C:\Program Files\Java\jdk1.6.0_05\bin\javaw.exe" %*」に変更
  6. eclipse.exe -clean.cmdを実行(eclipse.exe -clean.cmdの起動はこれ一回のみ)
  7. 次回以降の起動は作成したショートカットから起動する
     

Eclipse-phpEclipse(PHPエディタ)

phpEclipseはEclipse上でPHPの開発ができるようにするものです。XAMPPのPHPと連携してデバッグする機能も備えています。

  1. Eclipseを起動
  2. 「ヘルプ」→「ソフトウェア更新」→「検索およびインストール」
  3. 「インストールする新規フィーチャー」にチェックし、「次へ」
  4. 「新規リモートサイト」をクリック
  5. 名前「phpEclipse(任意)」、URL「http://phpeclipse.sourceforge.net/update/releases」
  6. 「終了」クリック後、自動的にパッケージの検索開始
  7. 「インストールフィーチャーの選択」の「phpEclipse」にチェックし、「次へ」
  8. 「使用条件の条項に同意します」にチェックし、「次へ」
  9. 「終了」をクリック後、自動的にダウンロード開始
  10. 署名なしの警告画面が出るが、無視して「インストール」
  11. Eclipseの再起動「はい」
  12. 再起動後、「ウインドウ」→「設定」
  13. 「PHPeclipse Web開発」→「ブラウザー・プレビューのディフォルト」
  14. プレビューのデフォルト・エントリーにあるチェックをすべてはずす
  15. 「PHPeclipse Web開発」→「プロジェクト・ディフォルト」
  16. PHPプロジェクトのディフォルト・エントリーにあるローカルホストを「http://127.0.0.1:8080」、ドキュメントのルートを「C:/xampp/htdocs2」に変更
  17. 「PHPeclipse Web開発」→「PHP外部ツール」
  18. PHPコマンド実行に「C:\xampp\php\php.exe」、パーサー・コマンドに「C:\xampp\php\php -l -f {0}」へ変更
  19. 必要ならApacheやMySQLのパスも指定しておく

Eclipse-Aptana(HTML総合エディタ)

AptenaはHTML、CSS、JavaScript等の総合HTMLエディタプラグインです。

  1. Eclipseを起動
  2. 「ヘルプ」→「ソフトウェア更新」→「検索およびインストール」
  3. 「インストールする新規フィーチャー」にチェックし、「次へ」
  4. 「新規リモートサイト」
  5. 名前「Aptana(任意)」、URL「http://update.aptana.com/install/3.2」
  6. 「終了」クリック後、自動的にパッケージの検索が始まる
  7. 「インストールフィーチャーの選択」の「Aptana」にチェックし、「次へ」
  8. 「使用条件の条項に同意します」にチェックし、「次へ」
  9. 「終了」をクリック後、自動的にダウンロードが開始される
  10. 署名なしの警告画面が出るが、無視して「インストール」
  11. Aptena Firewall Configurationは特に設定しなくてもよいが、一応指示通りに設定しておいた
  12. Eclipseの再起動「はい」

意外にめんどくせーって感じです。

WordPressTag:wp list bookmarks

忘れないようにメモ。日本語で解説しているところがないので・・

Wordpressの2.x以降で使用できるタグのようです。
機能としてはget_links_listと同様ですが、カテゴリやページメニュー表示タグと同様にさまざまなオプションを指定できます。

参照サイト:Template Tags/wp list bookmarks « WordPress Codex

指定例:

<?php wp_list_bookmarks(‘between=
&show_images=0&orderby=id&show_rating=1&show_updated=1′); ?>

オプションの指定例は大体カテゴリやページメニューと同じなので、大して難しくはないと思います。
っていうかオプション一覧は後日書きます・・・よくわからないのもあるので。

WordPressPlugin:Fold Category List

カテゴリメニューの項目をクリックするとそのサブカテゴリが表示される、いわゆるCMS的な折りたたみメニューが実現できます。

ダウンロード先:Collapsable, Foldable, Expandable Category menus for WordPress: The Fold Category List Plugin

使用方法は以下のコードをサイドバー用などのテーマに入れてやればOKです。

<?php wswwpx_fold_category_list (‘オプション類’); ?>

オプション類には従来のwp_list_catと同じものが使えます。項目については、wp_list_cats « Wptags.comを参照してください。指定方法の例は以下の通りになります。

wswwpx_fold_category_list (‘sort_column=name&hide_empty=0’);

これ以外にfold category listには追加オプションとしてcut_descとexpandというのがあるのですが、いまいち使い方が分かりません。
ソースを見ているときに気づいたのですが、list_catと同様の指定方法が使えるwswwpx_list_catsというものと、カテゴリーの指定したコメントを表示できるwswwpx_category_descriptionというものもあります。

で、このプラグインは非常に便利なのですが、wp_list_catsとの違いとして、親カテゴリを選択した際にその親カテゴリのリンクが消えてしまい、テーマ作成のCSS指定に不都合が出てしまいました。
常にリンクを有効にするためには、以下のコードを編集します。構造としては、「親カテゴリだったら」というのを無効にしているだけです。

//if ($category->cat_ID == $current_cat) { ※コメントアウト
//$link = wp_specialchars($category->cat_name); ※コメントアウト
//} else { ※コメントアウト

//
//WSW Check for whether an ancestor of the current category
//
if (in_array($category->cat_ID, $all_ancestors)) {
$link_class = ‘class="current_cat_ancestor"’;
} else {
$link_class = ”;
}
$link = ‘<a ‘ . $link_class . ‘ href="’.get_category_link($category->cat_ID).’" ‘;
if ($use_desc_for_title == 0 || empty($category->category_description)) {
$link .= ‘title="’. sprintf(__("View all posts filed under %s"), wp_specialchars($category->cat_name)) . ‘"’;
} else {
//
//WSW change to allow for truncated descriptions within link titles.
//
//$link .= ‘title="’ . wp_specialchars(apply_filters(‘category_description’,$category->category_description,$category)) . ‘"’;
$link .= ‘title="’ . wp_specialchars(wswwpx_category_description($category, $cut_desc, 0)) . ‘"’;
}
$link .= ‘>’;
$link .= apply_filters(‘list_cats’, $category->cat_name, $category).'</a>’;
//} ※コメントアウト

ちなみに、もう一つのfold page listではこの問題は出ません。