Web制作者なら誰もが思うこと
それは、ファイルを保存していちいちページ更新して確認するのは意外とめんどくさい。
微妙に時間がかかる・・・
ではないでしょうか？
Dreamweaverとwordpressを連携させるとワンクリックで表示を確認することが出来ます。
７ヶ月前、設定方法をライトニングトークでお話しさせて頂きました。
ただ、当時はWordpressのこともphpが環境構築しないとローカルで動かないこともDreamweaverのこともろくに知らない状態で、知らないづくしで発表したので作成したスライドは何が言いたいのか分からないものになってしまっています。
今回、設定部分に焦点を当てて簡単にまとめてみます。
★使用環境：Windows・Dreamweaver5.5
＜目次＞
1.XAMPPインストール
2.WordPressインストール
3.Dreamweaverの設定
4.Dreamweaverでサイトを見る
5.XAMPPの陥りやすいエラー
6.便利なDreamweaverの機能・一部
1.XAMPPインストール
初心者でも簡単に導入できるインストーラ版をインストールします。
上の二つ（デスクトップにアイコンを作るとか）はお好みで、とりあえず下の２つ、
・Apacheをサービスとしてインストール
・MySQlをサービスとしてインストール
にチェックを入れます。
うまく動けば、Apach、MySQlの横にRunningと表示されます。
表示されない場合は「Startボタン」を押して下さい。
（下の画像、ちょっとおかしい気がしますが気にしません。とりあえず動けばいいんです。）
そしたら、ブラウザで以下のサイトにアクセスします。
http://localhost/
「おめでとう」と歓迎されます。
左下のツール＞phpMyAdminをクリックし、データベースを作成します。
任意の単語を入れて作成。
2.WordPressをインストール
公式サイトへアクセスして、日本語版のWordPressをダウンロードします。
http://ja.wordpress.org/
落としてきたwordpressフォルダを解凍し、そのフォルダをXamppのhtdocsフォルダの中へ移動させます。
にアクセスすると「ファイルが見つかりません」と表示されます。
「設定ファイルを作成」をクリックします。
データベース接続のさいに注意すること
ユーザー名はroot
パスワードは空(カラ)
データベース名や接頭辞は好きなものにし「作成する」をクリックします。
ようこそというWPの画面が出てくるのでアカウントなど必要情報を入力しインストールします。
「成功しました」
3.Dreamweaver設定
メニューバー＞サイト＞新規サイト を選択し、サイトの定義を行います。
サイト名は任意のものでローカルフォルダーはWPをインストールしたディレクトリーを入力します。
次に、新規サーバーの追加を行います。
左側のサーバーをクリックし、+ボタン（新規サーバーの追加）を押します。
サーバー名：任意
使用する接続：ローカル・ネットワーク
サーバーフォルダー：Wordpressを入れているとこ（今回は¥c:xampp/htdocs/wordpress）
Web Url：http://localhost/wordpress
保存します。
次に、テストにチェックを入れて保存
4.Dreamweaverでサイトを見る
１.今回作成したサイト名を選択
２.「テストサーバー」を選択
３.更新ボタンをクリック
４.index.phpをダブルクリック
※ index.phpファイルはwp-includesの下にありますが、その中にはありません。場所はwordpress直下です。
「依存ファイルを取得しますか？」に「はい」を選択します。
「このページにはサーバーのみによって検索される動的関連ファイルがある可能性があります。」
→「検索」をクリックします。
「このページにはデザインビューで表示できないサーバ処理ディレクティブがあります。ライブビュー」
とありますので、ライブビューをクリックします。
こんな感じに表示されます。
5.XAMPPの陥りやすいエラー
XAMPPをインストールする時、ウィルス対策ソフトが起動していると反応して進まないことがあるので切っておくことをお勧めします
また、Apacheはポート80を使用していて他のソフトがこの80番を使用しているとApacheが起動しません。
一般的なものとしてSkypeが挙げられます。
調べる方法として、コマンドを起動します。（ファイル検索で「cmd」と入力すると出てきます。）
そこに「netstat -ano」
netstat(半角のスペース)-anoと入力すると色々と出てきます。
Local Address「0.0.0.0:80」があれば80番が使われていることになります。
使われていれば何のアプリケーションかチェックしタスクマネージャー（ctrl+Alt+Delete）から消します。
6.便利なDreamweaverの機能・一部
◇ 関連ファイル
開いているページに関連づいているファイルを一覧で見ることが出来、ワンクリックでソースを開き編集ことが出来ます。
一番上の「ソースコード」で最初のソースに戻ります。
（「footer.php」や「sidemenu.php」などテーマ作成に必要なファイルを簡単に呼び出せて非常に便利です。）
◇ マルチスクリーンプレビュー
ここでサイズを指定して、各デバイスでの表示を確認することができます。
◇ ライブビュー
WebKitを利用したブラウザにより近いプレビューで確認できます。
javascriptも動きますし逆に停めることも出来ます。
◇ ローカルファイルを「Adobe BrowserLab」で確認
Adobe BrowserLabはクロスブラウザチェックのできるサービスです。
Dreamweaverからローカルファイルを確認することができます。
クリックするとブラウザが開きAdobe BrowserLabで表示されます。
まとめ直してみましたが、あまり思い出せませんでした。
まあ７ヶ月も前によく分かっていない状態で準備したものだし・・・
（思い出せなかったのと画像が足りなかったので違うPCで設定し直してみたことは内緒です。）
スライドを見て知識の浅さを感じ、よくやろうと思ったなと過去の自分に驚きました。
きっと、この感覚はどれだけ月日が流れても変わらないと思います。
過去を振り返り、「なんで私無謀にもこんなことに挑戦したんだろう」
って何度も思うと思うんです。
でもいいんです。
失敗することには慣れているので、これからもガンガン攻めていきます♪