アークウェブ
Webデザイン
SandBox
Web制作会社アークウェブのスタッフが、デザインのTips・ノウハウをまとめているWikiです
アークウェブシステム開発SandBox
アークウェブWebマーケティングSandBox
アークウェブWebデザインSandBox
アークウェブ アクセシビリティWiki
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
#topicpath
*Mac OSXローカルにMAMPでサイト制作環境を構築 [#ze06d85c]
**目次 [#acd8c0b1]
#contents
**目的 [#i4a82398]
通常サイトを制作している中で困ることはいくつかありますが...
-ルートからのパスで記述されている場合でも、ローカルで意図...
-SSIを使用しているサイトもローカルで確認できるようにして...
また、上記とは別に問題となるのが、複数のサイト制作が同時...
デフォルトのままだとMAMPのDocument Rootは
/Applications/MAMP/htdocs
のみとなっており、複数のサイト制作をしている場合、その都...
そこで
-Virtual Host（バーチャルホスト）を用いて複数のサイトを確...
という点も解決したいと思います。
また、あわせて
-Movable Type（CMS）をローカルで確認したい
-Zen Cart（ショッピングカートシステム）をローカルで確認し...
という点も、MAMPというアプリケーションを用いて解決してい...
**MAMPのダウンロード [#f9b4bf20]
[[MAMPのサポートサイト:http://www.mamp.info/en/index.php]...
なお、今回は ''Mac OS：OSX 10.5'' の環境にて作業を行って...
**MAMPのインストール [#xbf0d414]
ダウンロードしたmamp_1.7.1.dmgを展開してインストールしま...
【画像：インストールキャプチャ】
次にMAMPフォルダをApplicationフォルダにドラック&ドロップ...
***MAMPのアップグレード [#u2082a82]
インストールを行うと、以前にインストールしていたMAMPフォ...
以下のステップの通りに行えばMAMPをアップグレードできます。
+Apache、MySQLを停止させます。
+MAMPを終了します。
+データベース、ウェブサイトデータおよび設定ファイルなどMA...
+インストールディスクイメージより、ApplicationフォルダへM...
+バックアップデータからデータを元に戻します。きちんと動作...
+MAMPを起動します。
+設定を確認します。
**SSI関係の設定 [#u5a9ba0a]
SSIを使用可能にするため、まず
/Application/MAMP/conf/apache/httpd.conf
を修正します。
※念のため修正前のファイルのバックアップをとっておきます。
httpd.confから「SSI」という記述を検索すると、以下のような...
#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml
なお、pache1.3でSSIを有効にするには、AddHandlerディレクテ...
デフォルトのままですとコメントアウトされているので、以下...
#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
拡張子が.htmlでもSSIが表示されるようにする
上記の設定でSSIを使用可能としました。続いて拡張子「.html...
その場合は以下のように拡張子を追記します。
AddType text/html .shtml .html .htm
AddOutputFilter INCLUDES .shtml .html .htm
**Virtual Hostを用いてMAMPで複数サイトを管理する [#nb809e...
MAMPでのデフォルトのポート設定は以下のとおりとなっていま...
-Apacheのポート：8888
-MySQLのポート：8889
また、MAMPのDocument Rootはデフォルトだと
/Applications/MAMP/htdocs
となっており、ブラウザでアクセスする場合は
http://localhost:8888
でアクセスします。
ここでは、複数サイトの制作を同時進行する場合に、サイト毎...
これにより、各サイトのディレクトリごとにサイトルートが設...
今回は
http://localhost:ポート番号（任意の数字）
でサイトを振り分けて表示できるように設定します。
仮に、
-サイト「projectA」を、ディレクトリ「/Applications/MAMP/h...
-サイト「projectB」を、ディレクトリ「/Applications/MAMP/h...
-サイト「projectC」を、ディレクトリ「/Applications/MAMP/h...
で確認できるよう設定することを想定します。
※なお、ポート番号は他で利用しているサービスのポート番号と...
まず、
/Application/MAMP/conf/apache/httpd.conf
を修正します。
※念のため修正前のファイルのバックアップをとっておきましょ...
上記ファイルをエディタで開き、「Listen 8888」と記述されて...
この後ろへ任意のポート番号の設定を記述します。
Listen 8888
Listen 8001
Listen 8002
Listen 8003
さらにポート番号と各サイトのディレクトリを紐付けるため、...
Listen 8888
Listen 8001
Listen 8002
Listen 8003
<virtualhost *:8001>
DocumentRoot "/Applications/MAMP/htdocs/projectA"
</virtualhost>
<virtualhost *:8002>
DocumentRoot "/Applications/MAMP/htdocs/projectB"
</virtualhost>
<virtualhost *:8003>
DocumentRoot "/Applications/MAMP/htdocs/projectC"
</virtualhost>
httpd.confを書き換えた際には、MAMPの管理画面にてApacheを...
【画像：MAMP管理画面】
ブラウザでアクセスする場合、例えばprojectAのサイトを確認...
http://localhost:8001
で表示できます。
※ブラウザで
http://localhost:8888/projectA/index.html
でアクセスしてしまうと、ルートへのパスなどが適切に処理さ...
***メモ [#x1d501b6]
ポート番号と各サイトの関係が複数ある場合、覚えておくのは...
また/Applications/MAMP/htdocs/内の各サイトのディレクトリ...
/Application/MAMP/conf/apache/httpd.conf
のファイルを修正する必要が生じてしまいます。
私の場合は
-「http://localhost:8001」に紐づくのは「project001」ディ...
-「http://localhost:8002」に紐づくのは「project002」ディ...
-「http://localhost:8003」に紐づくのは「project003」ディ...
のようにしておき、サイトの入れ替えが生じた際にはディレク...
ただこのままですとポート番号に紐づくサイトを忘れてしまい...
都度ディレクトリ内のファイルを確認するのもいいのですが、
http://localhost:888
でアクセスされる
/Applications/MAMP/htdocs/index.html
のファイルに各サイトとポート番号の関係をメモしておき、
<a href="http://localhost:8001">サイト名</a>
<a href="http://localhost:8001">サイト名</a>
<a href="http://localhost:8001">サイト名</a>
のようにリンクの設定しておけば調べる手間が省けます。
【画像：サイトリストページのキャプチャ】
***備考 [#k3b697a0]
Virtual Hostの設定には、設定ファイルをエディタで開いて修...
Document Rootのディレクトリ変更はMAMPの管理画面の「環境設...
その場合は各ディレクトリ名を各サイト名と紐づいた命名とし...
【画像：MAMPの環境設定画面】
***参考 [#m38df8a0]
-[[Macでローカル開発サーバ ( MAMP ＋バーチャルホスト) | T...
&color(#f00,){※};この記事はまだ書きかけです
#blikifooter(大家)
終了行:
#topicpath
*Mac OSXローカルにMAMPでサイト制作環境を構築 [#ze06d85c]
**目次 [#acd8c0b1]
#contents
**目的 [#i4a82398]
通常サイトを制作している中で困ることはいくつかありますが...
-ルートからのパスで記述されている場合でも、ローカルで意図...
-SSIを使用しているサイトもローカルで確認できるようにして...
また、上記とは別に問題となるのが、複数のサイト制作が同時...
デフォルトのままだとMAMPのDocument Rootは
/Applications/MAMP/htdocs
のみとなっており、複数のサイト制作をしている場合、その都...
そこで
-Virtual Host（バーチャルホスト）を用いて複数のサイトを確...
という点も解決したいと思います。
また、あわせて
-Movable Type（CMS）をローカルで確認したい
-Zen Cart（ショッピングカートシステム）をローカルで確認し...
という点も、MAMPというアプリケーションを用いて解決してい...
**MAMPのダウンロード [#f9b4bf20]
[[MAMPのサポートサイト:http://www.mamp.info/en/index.php]...
なお、今回は ''Mac OS：OSX 10.5'' の環境にて作業を行って...
**MAMPのインストール [#xbf0d414]
ダウンロードしたmamp_1.7.1.dmgを展開してインストールしま...
【画像：インストールキャプチャ】
次にMAMPフォルダをApplicationフォルダにドラック&ドロップ...
***MAMPのアップグレード [#u2082a82]
インストールを行うと、以前にインストールしていたMAMPフォ...
以下のステップの通りに行えばMAMPをアップグレードできます。
+Apache、MySQLを停止させます。
+MAMPを終了します。
+データベース、ウェブサイトデータおよび設定ファイルなどMA...
+インストールディスクイメージより、ApplicationフォルダへM...
+バックアップデータからデータを元に戻します。きちんと動作...
+MAMPを起動します。
+設定を確認します。
**SSI関係の設定 [#u5a9ba0a]
SSIを使用可能にするため、まず
/Application/MAMP/conf/apache/httpd.conf
を修正します。
※念のため修正前のファイルのバックアップをとっておきます。
httpd.confから「SSI」という記述を検索すると、以下のような...
#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml
なお、pache1.3でSSIを有効にするには、AddHandlerディレクテ...
デフォルトのままですとコメントアウトされているので、以下...
#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
拡張子が.htmlでもSSIが表示されるようにする
上記の設定でSSIを使用可能としました。続いて拡張子「.html...
その場合は以下のように拡張子を追記します。
AddType text/html .shtml .html .htm
AddOutputFilter INCLUDES .shtml .html .htm
**Virtual Hostを用いてMAMPで複数サイトを管理する [#nb809e...
MAMPでのデフォルトのポート設定は以下のとおりとなっていま...
-Apacheのポート：8888
-MySQLのポート：8889
また、MAMPのDocument Rootはデフォルトだと
/Applications/MAMP/htdocs
となっており、ブラウザでアクセスする場合は
http://localhost:8888
でアクセスします。
ここでは、複数サイトの制作を同時進行する場合に、サイト毎...
これにより、各サイトのディレクトリごとにサイトルートが設...
今回は
http://localhost:ポート番号（任意の数字）
でサイトを振り分けて表示できるように設定します。
仮に、
-サイト「projectA」を、ディレクトリ「/Applications/MAMP/h...
-サイト「projectB」を、ディレクトリ「/Applications/MAMP/h...
-サイト「projectC」を、ディレクトリ「/Applications/MAMP/h...
で確認できるよう設定することを想定します。
※なお、ポート番号は他で利用しているサービスのポート番号と...
まず、
/Application/MAMP/conf/apache/httpd.conf
を修正します。
※念のため修正前のファイルのバックアップをとっておきましょ...
上記ファイルをエディタで開き、「Listen 8888」と記述されて...
この後ろへ任意のポート番号の設定を記述します。
Listen 8888
Listen 8001
Listen 8002
Listen 8003
さらにポート番号と各サイトのディレクトリを紐付けるため、...
Listen 8888
Listen 8001
Listen 8002
Listen 8003
<virtualhost *:8001>
DocumentRoot "/Applications/MAMP/htdocs/projectA"
</virtualhost>
<virtualhost *:8002>
DocumentRoot "/Applications/MAMP/htdocs/projectB"
</virtualhost>
<virtualhost *:8003>
DocumentRoot "/Applications/MAMP/htdocs/projectC"
</virtualhost>
httpd.confを書き換えた際には、MAMPの管理画面にてApacheを...
【画像：MAMP管理画面】
ブラウザでアクセスする場合、例えばprojectAのサイトを確認...
http://localhost:8001
で表示できます。
※ブラウザで
http://localhost:8888/projectA/index.html
でアクセスしてしまうと、ルートへのパスなどが適切に処理さ...
***メモ [#x1d501b6]
ポート番号と各サイトの関係が複数ある場合、覚えておくのは...
また/Applications/MAMP/htdocs/内の各サイトのディレクトリ...
/Application/MAMP/conf/apache/httpd.conf
のファイルを修正する必要が生じてしまいます。
私の場合は
-「http://localhost:8001」に紐づくのは「project001」ディ...
-「http://localhost:8002」に紐づくのは「project002」ディ...
-「http://localhost:8003」に紐づくのは「project003」ディ...
のようにしておき、サイトの入れ替えが生じた際にはディレク...
ただこのままですとポート番号に紐づくサイトを忘れてしまい...
都度ディレクトリ内のファイルを確認するのもいいのですが、
http://localhost:888
でアクセスされる
/Applications/MAMP/htdocs/index.html
のファイルに各サイトとポート番号の関係をメモしておき、
<a href="http://localhost:8001">サイト名</a>
<a href="http://localhost:8001">サイト名</a>
<a href="http://localhost:8001">サイト名</a>
のようにリンクの設定しておけば調べる手間が省けます。
【画像：サイトリストページのキャプチャ】
***備考 [#k3b697a0]
Virtual Hostの設定には、設定ファイルをエディタで開いて修...
Document Rootのディレクトリ変更はMAMPの管理画面の「環境設...
その場合は各ディレクトリ名を各サイト名と紐づいた命名とし...
【画像：MAMPの環境設定画面】
***参考 [#m38df8a0]
-[[Macでローカル開発サーバ ( MAMP ＋バーチャルホスト) | T...
&color(#f00,){※};この記事はまだ書きかけです
#blikifooter(大家)
ページ名:
アークウェブのサービスやソリューションはこちら
サービス
Webの企画・戦略立案
Webデザイン
Webシステム開発
Zen Cartソリューション
Zen Cart導入コンサルティング, RFP作成, トラブル診断
Zen Cartで大規模ECサイト構築
Zen Cartモジュールの開発・カスタマイズ
Zen Cart制作会社(デザイン・企画会社)様向けサービス
Zen Cart海外向け・多言語ECサイトの制作
Zen Cartのデザイン, ペルソナ/シナリオ法, RIA(Ajax・Flex)
Zen Cartのセキュリティ・運用保守サポート
Zen Cart企画・マーケティング戦略, SEO・SEM(サーチエンジン広告)
Zen Cartハイエンド版(大規模サイト用高可用バージョン)
EC-CUBEとZen Cart 機能比較表（概要）
Zen Cart携帯モジュール(モバイルショップ構築用)
Zen Cartの導入事例
Zen-Cart.JPのご紹介とアークウェブの取り組み
Zen-Cartモバイルショップ構築サービス
Movable Typeソリューション
企業サイトでのMovable Type活用
Movable Type用プラグイン一覧
MT用フォーム作成プラグイン「A-Form」
A-Formパートナー制度
その他ソリューション
AjaxでRIA開発
Ruby on Rails
Flexによる業務システム構築
ペルソナ/シナリオ法
ビジネスブログ
SNS・ソーシャルソフトウェア
SEO・SEM
アークウェブのCSR(企業の社会的責任)
アークウェブのCSR指針
![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
