2.スマートフォン向けサイトを作りました(設定編)


こんにちは。株式会社オーラライン(http://www.auraline.co.jp/)のインフラ構築・運用担当のH.Oです。

スマートフォン向けサイトを作りました(インストール編)」に引き続き、本ブログ記事を閲覧して頂きまして、誠にありがとうございます。

今回も、BIGLOBEクラウドホスティングを利用した簡単なスマフォサイトの構築の説明を行なっていきます。

今回は、前回の筆末で予告させて頂いたとおり、以下の手順の説明をさせて頂こうと思います。

Ⅱ.WordPressのインストール(メインディッシュ)
Ⅲ.スマートフォンサイトの構築(デザート)
メインディッシュの設定編は、Linuxコマンドを利用する機会が多いですが、なるべくサーバ側の作業は少なくなるように説明させて頂いておりますので、最後までお付き合い頂けたら幸いです。
それでは、早速スマートフォンサイトの構築をして行きましょう!

Ⅱ.WordPressのインストール

①WordPressのサーバインストール
ここからはいよいよメインディッシュのコンテンツの構築となります。
下記URLより、WordPerssのダウンロードを行ない、サーバにインストールします。
http://ja.wordpress.org/wordpress-3.3.1-ja.zip
今回はコマンドにてダウンロードとインストールを行いますが、WinSCPやSSH接続が可能なFTPソフトを使って代用して頂いても構いません。
※WinSCPは、以下のページからダウンロードする事が可能です。
http://winscp.net/eng/docs/lang:jp

↓WinSCP本家サイト(英語)
http://winscp.net/eng/index.php


# cd /usr/local/src
# wget http://ja.wordpress.org/wordpress-3.3.1-ja.zip
# unzip wordpress-3.3.1-ja.zip
# mv wordpress/* /var/www/html
# rm -rf wordpress

ここまでで、WordPressのダウンロードとインストールは完了です。
念のため、コンテンツの確認もしておきましょう


# ls -l /var/www/html
total 308
-rw-r--r-- 1 root root 397 Jan 4 11:07 index.php
-rw-r--r-- 1 root root 16899 Jun 9 2011 license.txt
-rw-r--r-- 1 root root 13294 Jan 4 11:07 readme.html
-rw-r--r-- 1 root root 4044 Jan 4 11:07 readme-ja.html
-rw-r--r-- 1 root root 4268 Jan 4 11:07 wp-activate.php
drwxr-xr-x 9 root root 4096 Jan 4 11:07 wp-admin
-rw-r--r-- 1 root root 40272 Jan 4 11:07 wp-app.php
-rw-r--r-- 1 root root 274 Jan 4 11:07 wp-blog-header.php
-rw-r--r-- 1 root root 3982 Jan 4 11:07 wp-comments-post.php
-rw-r--r-- 1 root root 4289 Jan 4 11:07 wp-config-sample.php
drwxr-xr-x 5 root root 4096 Jan 4 11:07 wp-content
-rw-r--r-- 1 root root 2684 Jan 4 11:07 wp-cron.php
drwxr-xr-x 8 root root 4096 Jan 4 11:07 wp-includes
-rw-r--r-- 1 root root 1997 Jan 4 11:07 wp-links-opml.php
-rw-r--r-- 1 root root 2719 Jan 4 11:07 wp-load.php
-rw-r--r-- 1 root root 27695 Jan 4 11:07 wp-login.php
-rw-r--r-- 1 root root 7777 Jan 4 11:07 wp-mail.php
-rw-r--r-- 1 root root 413 Jan 4 11:07 wp-pass.php
-rw-r--r-- 1 root root 334 Jan 4 11:07 wp-register.php
-rw-r--r-- 1 root root 9913 Jan 4 11:07 wp-settings.php
-rw-r--r-- 1 root root 18545 Jan 4 11:07 wp-signup.php
-rw-r--r-- 1 root root 3702 Jan 4 11:07 wp-trackback.php
-rw-r--r-- 1 root root 3266 Jan 4 11:07 xmlrpc.php

なお、今回は便宜上Webサーバソフト(apache)の初期設定のドキュメントルートに
設置してます。設置場所を別の場所に設定する場合は、apacheの設定ファイルの編集が
必要になります。
②Webサーバソフト(apache)の設定と起動

コンテンツを置いただけでは、ページが表示できませんので、Webサーバソフトを起動しましょう。
ただし、起動前にWebサーバの設定をする必要があります。
ここでは、詳しくは解説しませんが、設定例と設定内容を挙げておきます。
●設定例
ドメイン名:example.com
ホスト名 :www

●設定方法

# cd /etc/httpd/conf
# cp -p httpd.conf httpd.conf.default
# vi httpd.conf
(設定内容) ※変更部分のみ記載
=====================================================
#ServerName www.example.com:80
↓ 変更
ServerName www.example.com:80
=====================================================
# diff httpd.conf httpd.conf.default
※設定したファイルの差分を確認します
# /etc/init.d/httpd configtest
# /etc/init.d/httpd start
ここまでで起動は完了ですが、念のため起動しているかも確認します。
# /etc/init.d/httpd status

『httpd (pid xxxxxxx) is running…』
最後に自動起動設定をしておきましょう。


# chkconfig --list httpd
httpd 0:off 1:off 2:off 3:off 4:off 5:off 6:off
※この時点で既にonになっていれば設定の必要はありません

# chkconfig httpd on
# chkconfig –list httpd
httpd 0:off 1:off 2:on 3:on 4:on 5:on 6:off

上記の設定変更で、Webサーバが起動しなくなるという事は無いと思いますが、万が一にも起動しなくなった場合は、下記のコマンドで設定ファイルをデフォルトに戻して下さい。


# cp -p httpd.conf.default httpd.conf

③データベースサーバの設定(MySQL)
Webサーバ設定の次は、データを処理する為のデータベースサーバの設定をします。本当であれば、インストール&設定が必要なのですが、冒頭で既にインストールされている事が確認出来ていますので、ここでは起動及びデータベースとユーザの作成を行ないます。


# /etc/init.d/mysqld start
# chkconfig mysqld on
# mysqladmin -u root password ********
# mysql -u root -p
(パスワード入力:********)
> create database example_db;
> grant all privileges on example_db.* to example@localhost identified by '********';
> \q
※パスワードは仮に"********"としていますが、任意に設定して下さい

上記の作業内容を簡単に解説すると、”mysqladmin”コマンドにてrootパスワードを作成し、
“mysql -u root -p”でMySQLデータベースサーバにログインしています。
その後、MySQLデータベースサーバにて”create database”にてデータベースを作成し、
データベースにログインできるユーザとパスワードの設定をしています。

他にも色々設定方法はありますが、今回はWordPressの設定に必要な部分だけ設定しました。

なお、本来であればメールサーバの起動設定も必要なのですが、BIGLOBEのクラウドホスティングでは、既にメールサーバ(Sendmail)が自動起動に設定されていました。


# chkconfig --list sendmail
sendmail 0:off 1:off 2:on 3:on 4:on 5:on 6:off

また、通常のWordPress構築ではメール送信しか利用せず、デフォルト設定の変更は必要ありませんでした。(メールサーバとしても使う場合は、別途メールサーバの設定が必要となります。)

④Webページの確認とWordPressのブラウザインストールさて、WordPressのサーバ側の作業が
一段落しました。
とりあえず、ここら辺で一度コーヒータイムにして、ブラウザでのインストール作業をしましょう。

この作業は、サクッと終わってしまいますので、サクッと進めて行きましょう。
1)Webページへのアクセス
Webブラウザにて”http://www.example.com/”へアクセスします

※一口メモ※
通常は、DNSを設定していないと、外部からの通信では表示出来ないので、以下の設定を自分のパソコン上で行ないます。(仮想的にDNSの仕組みを解決します)

(Windowsのhostsファイル設定例)
ファイルの場所:C:\WINDOWS\system32\drivers\etc\hosts
=====================================================
***.***.***.*** www.example.com
=====================================================
※ IPアドレスは、サーバ作成時に配布されるグローバルIPアドレスを設定して
下さい

2)WordPressの初期設定(ファイル作成含)
初回アクセスで、手動で設定ファイルを作っていない場合は、設定ファイル作成の画面が表示されますので、以下の手順で設定ファイルを作成しましょう。

1.『設定ファイル作成』ボタンをクリックします
2.『次に進みましょう!』ボタンをクリックします
3.『④データベースサーバの設定(MySQL)』の作業で設定した内容を設定します

★設定内容★
データベース名      :example_db
データベースのユーザー名 :example
データベースのパスワード :********
データベースのホスト名  :localhost ※デフォルト
テーブル接頭辞      :wp_    ※デフォルト
(※1つのデータベースに複数の WordPress を構築する場合に設定します)

4.上記入力後、『作成する』ボタンをクリックします

・・・っとここで、『wp-config.php ファイルへの書き込みができません。』と怒られました。
これは、ファイルへの書き込み権限が無いとこうなります。という訳で、SSHのコンソール画面に戻って以下のコマンドを実行して下さい。


# cd /var/www
# chown -R apache. html

上記コマンド実行後、再度Webブラウザのインストール画面に戻り、『インストール実行』をクリックして下さい。(予め設定されていれば、この作業は必要ありません。)

5.WordPress初期設定画面が表示されますので、下記設定例を参考にして設定して下さい

★設定内容★
サイトのタイトル     :FOR EXAMPLE
ユーザー名        :example
パスワード        :********
メールアドレス      :info@example.com
プライバシー       :任意に設定.

6.上記設定を入力したら、『WordPressをインストール』ボタンをクリック

あまり待たずに『成功しました!』の画面が表示されますので、『ログイン』ボタンをクリックしてログインを行なって下さい。

ログイン画面からユーザー名、パスワードを入力してログインすると、管理画面にログインできます。
このログインが出来ましたら、WordPressの設定はおしまいです。

3.スマートフォンサイトの構築 ←見出し

それでは、最後にデザートのスマートフォンサイトの構築です。

インストールしたWordPressをスマートフォン対応にさせるため、プラグインのインストールを行います。一口にスマートフォン対応用プラグインと言っても、色々なプラグインが用意されていますが、今回は導入が非常に容易だと言われている『WPtouch』を利用してみました。

■WPtouch公式サイト(英語)
http://www.wptouch.com/
※WordPress公式サイト上の無料試用版
https://ja.wordpress.org/

今回ご紹介させて頂いた『WPtouch』は、WordPressサイトをiPhone・iPod touch用に表示を最適化してくれるプラグインです。
選定した理由の1つは、冒頭で挙げた「導入の容易さ」以外にも、バージョン1.9.22以降で日本語化が標準で組み込まれていることでした。
純日本人の筆者にとっては、数あるスマートフォン対応プラグインの中で、日本語化標準対応が今回のこのプラグインの魅力の1つでした。
また、今回は無料版のプラグインを利用していますが、有料版の『WPtouch Pro』も提供されています。ちょっとしたサイトであれば、無料版でも事足りてしまうのですが、iPadに対する対応など欲を出せば有料版の利用も検討に入れても良いと思います。

さて、前置きが長くなってしまいましたが、早速WordPress管理画面からプラグインのインストール作業をしていきましょう!

①WordPress管理画面にログイン

http://www.example.com/wp-admin/へアクセスし、ログインします。

②プラグインのインストール

1.[プラグイン->新規追加]でプラグインのインストール画面を表示します。
2.検索窓に『wptouch』と入力して[プラグインの検索]ボタンをクリックします。
3.検索結果一覧より『WPtouch』の項目にある『今すぐインストール』のリンクをクリックします。
4.『本当にこのプラグインをインストールしてもよろしいですか?』というポップアップメッセージが表示されますので、これは『OK』をクリックして下さい。
5.『プラグイン WPtouch x.x.xx のインストールが完了しました。』と表示されればプラグインのインストールは完了です。
※『x.x.xx』はWPtouchのバージョンです

③プラグインの有効化

1.②のインストールが完了した直後の画面で、『プラグインを有効化』のリンクをクリックして下さい。
2.『プラグインを有効化しました。』のメッセージが表示され、プラグイン一覧に『WPtouch』されている事を確認して作業は終了です。

④プラグインの日本語設定

①~③までの作業が終わりましたら、以下の手順で標準言語を日本語に設定します。

1.[設定->WPtouch]よりWPtouchの設定画面を表示します。
2.[WPtouch Language]の項目のプルダウンをクリックし、[Japanese]を選択します。
3.画面下までスクロールをして、[Save Options]ボタンをクリックします。

上記作業を行なって、説明などの表示が日本語に変わっていれば設定完了です。

⑤スマートフォンサイト表示確認
④の作業が終わりましたら、スマートフォン用の表示になるか確認します。
http://www.example.com/

作業お疲れ様でした!これにてスマートフォン向けサイトの構築は完了です。

ここまで作業してきていかがでしたしょうか?思ったよりも簡単だったのではないかと思います。
最近は特別なシステム構築知識が無くても、便利なツールやコマンドが用意されており、Web製作参入へのハードルは低くなって来ていると思います。
今まで、Linuxコマンドを覚えるのがちょっと・・・と考えていた皆さんもドンドン挑戦されて良いと思います。仮想化ソリューションで、今はサーバも仮想イメージで動いている時代ですから、バックアップを用意しておけば、例え構築に失敗しても、RPGゲームの様にセーブポイントから再開出来ます。

ちなみに、このブログも私自身のスマートフォンで見てみたら、偶然にも今回紹介した『WPtouch』を使われている様なので、スマートフォンをお持ちの方は、是非とも確認してみて下さい。

なお、今回は『BIGLOBEクラウドホスティング』を利用した『スマフォサイト構築』がメインテーマでしたので、詳しくはご紹介しませんでしたが、『ファイアーウォール』『WAF(ウェブアプリケーションファイアーウォール)』『ロードバランサ』など有料オプションを利用することで、本格的なサイト構築も可能です。

コマンドで一生懸命設定していたOSのファイアーウォール(iptables)についても、有料オプションの『ファイアーウォール』を利用することで、コントロールパネルから簡単に設定でき、サーバ台数が増えた場合でも楽に運用する事も可能です。

それでは、ここまでお付き合い頂きまして、誠にありがとうございました。
最後になりますが、皆さんのスマフォサイト構築にこの記事が役に立つことが
ありましたら幸いです。

 

お問い合わせ

BIGLOBEクラウドホスティングについて、もっと知りたい方、質問がある方、まずはBIGLOBE法人コンタクトセンターへお電話、または下記のお問い合わせフォームからお問い合わせください。phoneotoiawase

カテゴリー: 技術情報 タグ: , , パーマリンク