日別アーカイブ: 2012 . 1 / 19

サイト制作のテスト環境をwindowsからlinuxへうつしたのでメモ

サイト制作のためにwindows&xamppからlinux&lampにしました。

方針
1:なるべく本番環境に近い状況を作り出すため、仮想Linuxサーバーを使う。
2:なるべく本番環境への操作に近い状態を作り出すため仮想サーバーへはSSHかFTPを使用する。
3:マルチドメイン的に使用する。
4:実際のドメインで見られるように。
5:個人的なテスト環境にするため仮想サーバーは自身のコンピューターにインストールし、外部からは接続しないようにする。

ということで選択した方法が下記になります。

1:仮想化にはVirtualBoxを使用。
2:linux はUbuntuを使用(デスクトップ版。特に意味はないが使いやすそうだったから)
3:webサーバーはLAMP。
4: FTPサーバーにvsftp。
5:ウィンドウズからブラウザで見るときはhostsファイルを操作。

以下参考にさせていただいたサイトです。
■VirtualBoxの構築からウェブサーバーの設定まで
考えてる途中[テスト環境作り]
途中、VirtualBoxとUbuntuのファイル共有のやり方も載っています。
■さらにマルチドメイン的に動作させたかったので、
この辺りを参考に。
■Windowsからテストサイトを実際のドメインで見たかったかったので
ココを参考(CentOSでしたがほぼ同じ)にVirtualBoxのネットワークを設定し、UbuntuのIPを固定しました。
ブリッジ接続を使う方法も考えましたがプライベート具合という部分と、LANによってIPが変化せざるを得ない面倒くささからNAT+ホストオンリーという方法を選択しました。
■テストサイトと本番環境をすばやく切り替えたかったので Hosts Managerをインストールして使用します。
■どうせプライベート環境なので使いやすいFTPでの接続にすべく、こちらを参考にvsftpを設定

ひとまずOKですが、もう少しやりたいことが

■phpmyadminをインストール→shinodogg.com[Ubuntuにphpmyadminのインストール]
■.htaccessを有効にする。→UbuntuのApacheで.htaccessを有効にする方法・コマンド

これでやっと大体レンタルサーバーと同じようなことができる環境が整いました。初めてのことは何でも時間がかかりますね。

wordpress + chromeで編集時に文字化けが起こる現象について。

ちょっと前から気がついていたのですが、Wordpressをchromeで編集するときに「&」とかが「.」になっちゃったりする現象がありました。

ググるとちょこちょこと情報が。ただ、現象が起こりうる条件が結構厳しいらしく、症状はまれなケースらしいです。

どうやらfont-familyが原因みたいで、chromeの「要素を検証」で一部のfont-familyを消してみるときちんと表示されました。
つまりそのフォントが入っているPCというのもひとつの条件ということです。
じゃあスタイルを適応しなおせばいいですね。ということで犯人のCSSを調べたところ、

/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

に記述されているbodyに指定されたfont
font: 13px/19px Georgia, “Times New Roman”, “Bitstream Charter”, Times, serif;
の下にあらためて
font-family:”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
と指定してアップしたら直りました。日本語で見やすくなるというおまけつき。

wordpressのアップデート時に再び元に戻る可能性はありますが、とりあえず直った。よかった。