xamppでcmsのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽...

64
1 XAMPP で CMS のお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

Upload: others

Post on 03-Aug-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

1

XAMPP で CMS のお手軽テスト環境を手に入れよう!

2011/5/21 上村崇

Page 2: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

2

CMS はphpファイルなど動的なファイルばかりで構成されています。

Page 3: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

3

パソコン上で静的な html ファイルは開くことはできます。しかし、 php ファイルはうまく表示されません。

Page 4: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

4

パソコン上では CMS の動作確認はうまく行えません。

Page 5: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

5

CMS のデザインを編集するときの一般的なフロー

Page 6: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

6

ファイルを修正するたびに FTP でサーバーにアップしなければならないのでめんどくさい。

Page 7: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

7

XAMPP を使えば、パソコン上でCMS を動かすことができます。

Page 8: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

8

の構築作業を一緒にやってみましょう。

Page 9: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

9

・ XAMPP インストール

・パソコンで WordPress が動くようにする

パソコン

サーバ

・ WordPress をまるごと移設

大まかな手順

・サーバで WordPress を動かす

Page 10: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

10

1 . XAMPP インストール

3 .データベース作成

2 . WordPress インストール

4 .デザイン作成、編集

5 .データベースエクスポート

6 .データベースインポート

8 . wp-config.php 編集

パソコン

サーバ

7 . FTP アップロード

Page 11: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

11

http://www.apachefriends.org/jp/xampp.html

1 . XAMPP をインストールしましょう。

Page 12: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

12

XAMPP for Windowshttp://www.apachefriends.org/jp/xampp-windows.html

Page 13: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

13

Webサーバ

データベースプログラム言語データベース管理ツール

気にしなくて良い

MySQLと PHPのバージョン番号は気にしておくこと!

XAMPPの実行環境

気にしなくて良い

Page 14: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

14

Page 15: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

15

何も考えずに進んでいけば OK

Page 16: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

16

Webサーバ

データベース

サーバを起動

Page 17: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

17

起動中

Skypeが動作中の場合はApacheが起動しない不具合があるようだ

Page 18: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

18

http://localhost にアクセスしてみる

自分のパソコンへのアクセスは http://localhost

Page 19: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

19

XAMPP インストール完了 !

Page 20: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

20

ドキュメントルートはC:\xampp\htdocs

Page 21: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

21

試しにphpスクリプトを動かしてみましょう

Page 22: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

22

出た !

Page 23: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

23

1 . XAMPP インストール

3 .データベース作成

2 . WordPress インストール

4 .デザイン作成、編集

5 .データベースエクスポート

6 .データベースインポート

8 . wp-config.php 編集

パソコン

サーバ

7 . FTP アップロード

Page 24: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

24

2 . WordPress をインストールしてみましょう

Page 25: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

25

WordPress 日本語 http://ja.wordpress.org/→ ドキュメンテーション→ サーバーの用意 動作要件

動作できるバージョンを確認 !

PHP 4.3以上MySQL 4.1.2以上

Page 26: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

26

wordpress フォルダを htdocs の下に置きます。

Page 27: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

27

http://localhost/wordpress

Page 28: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

28

データベース名 wordpress

MySQLユーザ root

パスワード (なし )

サーバー側で作るデータベース名と名前を合わせること。

Page 29: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

29

phpMyAdmn でデータベース wordpress を作ります。http://localhost/phpmyadmin

Page 30: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

30

Page 31: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

31

サイトのタイトル“テスト”

パスワード “ wordpress”

メールアドレス

Page 32: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

32

Page 33: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

33

WordPress インストール成功 !

Page 34: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

34

1 . XAMPP インストール

3 .データベース作成

2 . WordPress インストール

4 .デザイン作成、編集

5 .データベースエクスポート

6 .データベースインポート

8 . wp-config.php 編集

パソコン

サーバ

7 . FTP アップロード

Page 35: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

35

4. デザイン作成・編集 → 自分のパソコン上で、 XAMPP で確認しながら 自由に編集する。

Page 36: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

36

5 .データベースエクスポート

phpMyAdmin の local ホストのページから「エクスポート」

Page 37: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

37

wordpress を選択「ファイルに保存する」チェック有効

localhost.sql としてファイルに保存

Page 38: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

38

localhost.sql を開き、http://localhost の文字列をサーバのURL に置換する。

Page 39: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

39

1 . XAMPP インストール

3 .データベース作成

2 . WordPress インストール

4 .デザイン作成、編集

5 .データベースエクスポート

6 .データベースインポート

8 . wp-config.php 編集

パソコン

サーバ

7 . FTP アップロード

Page 40: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

40

レンタルサーバ側の phpMyAdmin を開く。インポートで localhost.sql をインポートする

Page 41: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

41

「参照」ボタンで localhost.sql を選ぶだけ !

Page 42: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

42

7. FTP アップロード

WordPress のファイルをすべてサーバにアップロードします。

Page 43: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

43

1 . XAMPP インストール

3 .データベース作成

2 . WordPress インストール

4 .デザイン作成、編集

5 .データベースエクスポート

6 .データベースインポート

8 . wp-config.php 編集

パソコン

サーバ

7 . FTP アップロード

Page 44: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

44

8.wp-config.php 編集サーバーで WordPress を使うための設定。※ 編集後は FTP でサーバにアップロードすること

データベース名

データベースユーザ

データベースのパスワード

Page 45: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

45

http://( レンタルサーバ URL)/wordpress でアクセスレンタルサーバ上で表示された !

Page 46: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

46

補足 : トラブルシューティング

XAMPP の環境とサーバの環境が違うことによる問題

レンタルサーバは php5.2, MySQL5.0 を使っていることが多い。

文字コードの違いによるもの

XAMPP: UTF-8 。 ( ただし Windows は一般的に Shift-JIS)サーバ : UTF-8 であることが必要。稀に EUC があるので注意。

サーバは UNIX/Linux なのでファイルのパーミッションを気にする必要あり。

アップロードしたファイルは読み込みの権限があるか ?画像アップロード用のディレクトリは書き込み権限が必要。wordpress/wp-content/uploads の権限を 777 にする。

Page 47: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

47

"WordPress 引越し”で検索

これは WordPress のサイト移転の方法と同じ

Page 48: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

48

でも DBの移行はちょっと大変かも

Page 49: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

49

DBを移行しないで済む方法もあります。

Page 50: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

50

1 . WordPress インストール

2 .デザイン作成、編集作業 ( テーマファイルの編集のみ )

パソコン サーバ

3 .テーマファイルだけを FTP でアップロード

パソコン、サーバ両方に WordPress をインストールすることで移行の手間を省く方法

1 . WordPress インストール

両方に WP をインストールする

Page 51: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

51

この方法で開発するときの注意点

・コンテンツ作成や設定はすべてサーバー側で行うこと。 (DBを使う系の加工はすべてサーバー側で )・パソコン側で加工するのはテーマファイルのみ。

パソコン サーバ

アップロードするのはテーマだけ

UP

Page 52: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

52

コンテンツの内容など、データベースに入っているデータを移行したい場合は、 WordPress の「エクスポート」で可能。

※ ただし、移行先でデータをインポートする前に ドメイン名の置換作業は必要。※ プラグインをインストールする必要があるが、英語なので  ハードルが高い。

Page 53: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

53

<参考 >XAMPP を使用せず、Linux サーバを立てて、 samba で Windows共有する方法

Page 54: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

54

WordPress 編終わり

→ 次は SoyCMS 編

Page 55: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

55

SOY CMS 編

Page 56: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

56

SoyCMS を XAMPP で動かしてみます

MySQL版インストーラ付き

Page 57: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

57

動作環境を確認

MySQL は ?

Page 58: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

58

データベース作成 “ soycms”

utf8_general_ci にすること

Page 59: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

59

http://localhost/cms/soycms_installer

Page 60: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

60

ホスト名 “ localhost”

MySQLユーザー名 “ root”

MySQLパスワード (なし )

データベース名 “ soycms”

Page 61: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

61

パスワード “ password”

Page 62: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

62

チェック入れること。データベースを複数作らないようにするため

Page 63: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

63

Page 64: XAMPPでCMSのお手軽 テスト環境を手に入れよう!...1 xamppでcmsのお手軽 テスト環境を手に入れよう! 2011/5/21 上村崇

64

これでページが作成されました。