WEBの勉強ノート
Loading

CentOS5.4 に MySQL5.1,PHP5.3とphpMyAdmin

2010 年 2 月 28 日 日曜日

MySQL、PHP、phpMyAdminのインストールから、Wordpress用のデータベース作成まで。

最新版を入れるため、yumのリポジトリをインストールして変更する。依存関係を解消しながらインストールするより、yum を使った方がずっと楽。

インストール

[root@localhost ~]# wget http://download.fedora.redhat.com/pub/epel/5/i386/epel-release-5-3.noarch.rpm
[root@localhost ~]# wget http://rpms.famillecollet.com/el5.i386/remi-release-5-6.el5.remi.noarch.rpm
[root@localhost ~]# rpm -Uvh epel-release-5* remi-release-5*

[root@localhost ~]# wget http://dag.wieers.com/rpm/packages/rpmforge-release/rpmforge-release-0.3.6-1.el5.rf.i386.rpm
[root@localhost ~]# rpm -Uvh rpmforge-release-0.3.6-1.el5.rf.i386.rpm

インストールする。

[root@localhost ~]# yum --enablerepo=remi,epel,rpmforge update php* mysql*
[root@localhost ~]# yum --enablerepo=remi,epel,rpmforge install php php-gd php-mbstring php-mysql php-odbc php-pdo php-pear mysql-server mysql-bench

phpMyadmin のインストール。

# yum --enablerepo=remi,epel,rpmforge install phpMyAdmin

PHPの動作確認

apacheの再起動

[root@localhost ~]# service httpd restart

phpinfo を表示してみる。一緒にインストールしたモジュールの項目が表示されていることを確認。

[root@centos ~]# vi /var/www/html/test.php

MySQL 設定

設定は文字コードのみ。

[root@centos ~]# vi /etc/my.cnf
[mysqld]
default-character-set = utf8
[mysql]
default-character-set = utf8

起動、自動起動設定

[root@centos ~]# service mysqld start
[root@centos ~]# chkconfig mysqld on
[root@localhost ~]# chkconfig --list mysqld
mysqld          0:off   1:off   2:on    3:on    4:on    5:on    6:off

mysql の root にパスワードを設定する。OS自体のユーザーとは別もの。まずは、パスワードを設定するユーザーを確認。

[root@centos ~]# mysql -u root
mysql> select user,host,password from mysql.user;
+-------------+-----------------------+-------------------------------------------+
| user        | host                  | password                                  |
+-------------+-----------------------+-------------------------------------------+
| root        | localhost             |                                           |
| root        | localhost.localdomain |                                           |
| root        | 127.0.0.1             |                                           |
|             | localhost             |                                           |
|             | localhost.localdomain |                                           |
+-------------+-----------------------+-------------------------------------------+

root にパスワードを設定。

mysql> set password for root@localhost=password('パスワード');
mysql> set password for root@localhost.localdomain=password('パスワード');
mysql> set password for root@127.0.0.1=password('パスワード');

mysql のrootにパスワードが設定されたことを確認。

mysql> select user,host,password from mysql.user;
+-------------+-----------------------+-------------------------------------------+
| user        | host                  | password                                  |
+-------------+-----------------------+-------------------------------------------+
| root        | localhost             | *0B6A2F2B175B57F40643A0377BE9274ACB964C44 |
| root        | localhost.localdomain | *0B6A2F2B175B57F40643A0377BE9274ACB964C44 |
| root        | 127.0.0.1             | *0B6A2F2B175B57F40643A0377BE9274ACB964C44 |
+-------------+-----------------------+-------------------------------------------+

サンプルデータベース削除。

[root@centos ~]# mysql -u root -p
mysql> show databases;
mysql> drop database test;
mysql> show databases;

wordpress 用のデータベース作成

[root@centos ~]# mysql -u root -p
mysql> create database wordpress;
mysql> grant all privileges on wordpress.* to wordpress@localhost identified by 'パスワード';

phpMyAdmin を使う

yum でインストールした phpMyadmin は以下にインストールされる。

/usr/share/phpMyAdmin

設定はデフォルトのままで使用可能。ただし、ドキュメントルート外にインストールされるので、そのままではアクセスできない。http://phpmyadmin.localhost.com/ でアクセスするため、bind のレコード追加と、Virtual hostの設定をしてみた。

Bind 設定

[root@localhost ~]# cat /var/named/chroot/var/named/localhost.com.db
$TTL    86400
@       IN      SOA     localhost.com.  root.localhost.com.(
                                      2004031901 ; Serial
                                      28800      ; Refresh
                                      14400      ; Retry
                                      3600000    ; Expire
                                      86400 )    ; Minimum
        IN NS    localhost.com.
        IN MX 10 localhost.com.
@       IN A     192.168.0.250
phpmyadmin      IN A    192.168.0.250
*       IN A     192.168.0.250

Virtual host の設定

NameVirtualHost *:80
<VirtualHost *:80>
    ServerAdmin root@localhost.com
    DocumentRoot /usr/share/phpMyAdmin/
    ServerName phpmyadmin.localhost.com
  <Directory "/usr/share/phpMyAdmin">
    AllowOverride All
    Allow from All
  </Directory>
</VirtualHost>
参考記事
CentOS 5.3 に php-5.2.9, mysql-5.1.35 をインストール
データベースサーバー構築(MySQL)

Google AJAX Feed API の件数が反映されない

2010 年 1 月 3 日 日曜日

WordPress に最新の記事や、その他RSSで取得できるものをいくつか表示させるためにGoogle AJAX Feed APIを使ってみました。

表示自体は問題なくできたのですが、表示件数ではまりました。表示件数は、feed.setNumEntries(10) のように指定していましたが、変更しても全く反映されず。

そもそもFeed側で件数を少なく設定していないかと思い、Wordpress の設定を変えてみたり、いろいろやってみた挙句、やっと気付きました。FeedはGoogleでキャッシュされている。。

そのキャッシュを更新する方法を探していましたが、調べるとすぐに見つかりました。

そこで、下記のようにソースに手を加えて、いわゆる「キャッシュ騙し」をします。

このブログのRSSフィードを取得するソースの場合・・・

var feed = new google.feeds.Feed("http://www.lepracaun.info/blog/atom.xml?256");

?の後ろの数字は何でもいいわけです。

Google Ajax Feed API:キャッシュ騙しを使う方法

すぐに変更した件数が反映されました。

アンカーテキストと title 属性と alt 属性

2009 年 11 月 26 日 木曜日

SEOと title 属性と alt 属性

アンカーテキスト、alt 属性は、ともに SEO の観点から重要なものです。title 属性に関しては、調べる限り SEO に意味がないばかりか、a タグの title 属性と内部の img の alt 属性に同じテキストを指定するとペナルティになる場合すらあるようです。

ふと、本来alt 属性と title 属性はどのように使うものなのか疑問に思い、調べてみました。

alt属性の仕様

W3Cによると、alt 属性は、代替テキストとして定義されています。

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the langattribute.

HTML 4.01 Specification : 13.8 How to specify alternate text

「この属性は、画像、フォーム、アプレットを表示できないユーザーのために、代替テキストを指定する。代替テキストの言語は、lang 属性で指定する。」とのこと。

title属性の仕様

title 属性は、補助情報を伝えるものとして定義されています。

The title attribute may be set for both A and LINK to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc.

HTML 4.01 Specification : 12 Links

「title 属性は A と Link の両方に指定することができ、リンクの性質情報を付加します。この情報は、ユーザーエージェントによって音声出力されたり、ツールチップとして読み込まれたり、カーソルイメージの変化によって伝えられます。」

かなり苦しい訳になってしまいました。余談ですが、W3Cのドキュメントに出てくる “user agent” はブラウザのことと思っていいのでしょうか?HTTPヘッダに含まれるユーザーエージェントではなさそうです。

alt 属性と title 属性の使い方

仕様を見た上で、alt属性と title 属性に同じテキストを指定することによるペナルティを考えると、単に本来の目的を無視した使い方をしているだけのように思えます。仕様に準拠した使い方をしていれば問題ないのではないでしょうか?

ただし、title 属性を有効に活用できてきる例はあまり見たことがありません。使い方はもう少し研究したほうがよさそうです。

Dreamweaverのテンプレートを使ったWEBサイトの運用

2009 年 10 月 14 日 水曜日

今回初めて、Dreamweaver のテンプレート昨日を使ったWEBサイトの運用を試してみました。正直サーバーサイドでテンプレートからコンテンツを生成するCMSやsmartyのほうが好きなのですが、PHPなどが動かせないサーバー環境もあるので使い道はありそうです。

メニューがハイライトされるデザイン

Dreamweaver のテンプレートは、ネスト(階層化)することができて便利です。今回のサイトはグローバルメニューにハイライトがあたるようになっており、該当ページがそのメニューに含まれる場合、色が変わります。

image

このハイライトは、リストでマークアップしたグローバルメニューの a 要素にクラスを追加することで実現されています。つまり、グローバルメニューのコードは全ページ共通ではなく、ハイライトされる場所によって変わります。

Dreamweaver のテンプレートは条件分岐もできるため、通常はそれで OK になりそうです。しかし、今回のサイトは、サイドメニューがあり、そのサイドメニューにもハイライトがあたるようになっているため、より運用を簡単にするためには、グローバルメニュー = カテゴリ ごとにテンプレートを用意する必要がありました。

ネストされたテンプレート

そこで、コンテンツページに共通する部分を共通化するベーステンプレートと、ベーステンプレートをもとに、グローバルメニューのハイライトと、カテゴリ内で共通するサイドメニューを含む子テンプレートを作成してみました。

作成の方法は、「ファイル」-「新規」-「テンプレートから作成」でベーステンプレートから新規ドキュメントを開きます。その新規ドキュメントをテンプレートとして保存すると、子テンプレートを作ることができます。

image 

また、ベーステンプレートの編集可能領域は、ネストされた子テンプレートに引き継がれます。ただし、その編集可能領域に新しいテンプレート領域(各種編集可能領域、編集可能にした属性を含む)を挿入すると、子テンプレート独自の編集可能エリアとなります。

基本テンプレート内の編集可能領域はネストされたテンプレートに継承されます。それらの領域に新しいテンプレート領域が挿入されない限り、ネストされたテンプレートから作成されるページでも、編集可能なまま保持されます。

Adobe Dreamweaver CS4 : ネストされたテンプレートについて

 

テンプレート構成

今回は、以下のような構成で、作成してみました。

image

その他はまったところ

複数の文字コードは対応していない?

このサイトは、メールフォームのみ shift-JIS 、その他のページが UTF-8 で作成されていました。デザインはメールフォームもコンテンツページも変わらないため、同じテンプレートで作成し、charset の値をDreamweaver の変数に設定して、ページ側で文字コードを設定できるようにしたのですが、見事にすべてのページが shift-JIS に変換されて泣きそうになりました。

そのほかの方法は試していないですが、複数の文字コードはサポートしていない気がします(未確認)。今回は、メールフォームのみテンプレートを使用しない方向で乗り切りました。

ページの作成は「新規ドキュメント」-「テンプレートから作成」で

最初はテンプレートから1ページ作成して、そのファイルをコピーしたりしていましたが、ページ内に必要ないTemplateparam タグやが残ったり、テンプレートプロパティの中に削除した項目が残ったり、よくない雰囲気でした。

おとなしく、「新規ドキュメント」-「テンプレートから作成」で新規ページを開き、そこにコンテンツを流しこむ方法が確実でした。

「編集可能にマークされていないコードに変更を加えました。これらの変更を保持しても、次回のテンプレート適用時にファイルが更新されて、これらの変更は失われます。それまで変更を保持しますか?」

しょっちゅう出る。いまだ原因がわからず。これに関しては、いずれまとめてみたい。

dir="ltr" ってなに?

2009 年 10 月 7 日 水曜日

ヘッダーの html タグに何気なく指定しているのですが、そもそも何なのかと。

html要素に dir="" を追加すると、文書全体の書字方向を指定できます。

TAG index : ページ全体の書字方向を指定する

ようするに、そのページが右から読むページか左から読むページかを明示するもののようです。日本語は左から右へ、アラビア語は右から左へ、その方向を指定するものですね。

ユーザビリティーとデザインの話

2009 年 10 月 6 日 火曜日

1. ラベルはフィールドの上に配置
2. フォーカスは視線の先に
3. デザインのクオリティは信頼を与える
4. ランディングページのスクロール
5. リンクはやっぱりブルー
6. 検索ボックスの文字数
7. ホワイトスペースの価値
8. ユーザビリティテストの重要性
9. プロダクトページは作りこむ
10. コンテンツのような広告

実用的なユーザビリティの10のポイント:ガイドライン編

コリスさんで上記のようなユーザビリティーに関するエントリをあげられていました。いくつかぐっときた項目があったのでメモしておきます。

ラベルはフィールドの上に配置

UX Mattersのレポートによると、フォームにおけるラベルの理想的な配置はフィールドの上です。

つい最近作ったフォームが、まさにtableを使って左にラベル、右にフィールドのレイアウトでした。このエントリを読んで、確かにラベルとフィールドを上下に配置すると見やすそうだなと反省しました。

メールフォームを作っていると中身のチェック処理に気を取られてHTML側のユーザビリティーがないがしろに。。気をつけます。

デザインのクオリティは信頼を与える

ウェブサイトの重要な役割の一つにユーザーに信頼を与えることがあります。

これは常日頃思うことです。細部に渡るまで、デザインの質のテンションを落とさないこと!

ランディングページのスクロール

useit.comのレポートによると、初めての訪問でどれぐらいスクロールするかというと、ビジターの23%という数字がでました。
これは、ビジターの77%がスクロールをしない、ということを意味しています。

もちろん想像は付きますが、77%がスクロールをしないというのはなかなかインパクトのある数字です。

日々のWeb作成で、頭の片隅に置いておこう。

Windows Live Writer でテーマを取得できない

2009 年 10 月 2 日 金曜日

だいぶ前に設定した、このブログのテーマは反映されているのですが、新しく作った別のサイトでWindows Live Writer でテーマが取得できません。

調べてみたら、同様の症状の人はいるものの、解決策は見つかりませんでした。単純に編集用の CSS を指定できるようにしてくれればいいのに、、

それでも、オンラインのエディタよりはずっと便利なので使いますが、、


参考

Windows Live Writer が早くも使えなくなった

Windows Live Writer + WordPress + wp.Vicuna Ext. Custom メモ

WordPress移行しちった

WordPress 全体に閲覧認証をかける

2009 年 9 月 30 日 水曜日

自分用ナレッジベースとして、Wordpress でサイトを作ってみました。WEB に公開できるような完成度ではないような文章をためておければいいなと。

最初は、.htaccsess で Bsic認証をかけていたのですが、これでは Windows Live Writer で投稿できませんでした。そこで、Wordpress 側で認証できる仕組みを模索してみました。

今回使用したものは、プラグインではなく、/wp-blog-header.php のwp(); の直前に下記のコードを追記します。

if (is_user_logged_in()){
 }
 else {
 auth_redirect();
};

コードの動作

is_user_logged_in() : ユーザーがログインしているかどうかを返す
WordPress.org : Function Reference/is user logged in

auth_redirect() : ユーザーがログインしているかどうかを判別し、ログインしていなければログインページにリダイレクト。ログインに成功すれば、最初にアクセスを試みたページに再度リダイレクトする。
WordPress.org : Function Reference/auth redirect

説明を見る限り、auth_redirect() のみでも閲覧制限をかけられそうですが、これだけでは正しいユーザー/パスワードを入力してもログインできなくなってしまいました。

この動作を見る限り、auth_redirect() はログインに成功した場合、遷移元のページにリダイレクトするので、ログインページ自体を遷移元と認識してしまって、ログイン成功→ログイン画面のループにはまっているのでしょうか?それともバグ?auth_redirect() を定義しているコードを読んでいないのでわかりません。。

いずれにせよ、ログインしているかどうかを、is_user_logged_in() で判別してから auth_redirect() を呼び出すことで期待通りの動作をさせることが可能になりました。


blog.sugulab.com : WordPressに認証をつける。

php.ini を書き変えずにエラーを表示させる

2009 年 8 月 28 日 金曜日

ini_set(); 関数を使うことで、一時的に php.ini の設定値を変更することができます。一時的にエラーを出力させたい時などに役立ちそう。

<?php
ini_set("display_errors", 1);
?>

WordPress カテゴリを jQuery でアコーディオンにしてみる

2009 年 8 月 16 日 日曜日

このブログは階層構造をもつカテゴリのみをナビゲーションにしています。しかしカテゴリは増えるばかりで逆にわかりにくくなってきました。そこで、親カテゴリを残して、子カテゴリを開閉式のアコーディオンにしてみました。

目標とした動作

・子カテゴリ (孫カテゴリ以下を含む) を非表示に
・親カテゴリのリンクを無効化→子カテゴリの開閉に使う

$(document).ready(function(){
$('li.widget_categories>ul>li>ul').css('display','none');
$('li.widget_categories>ul>li>a').click(function(e){e.preventDefault()}).attr('href','#');
$('li.widget_categories>ul>li>a').click(function() {
$(this).next().slideToggle('slow');
});
});

問題は、子カテゴリのページに移動したときにそのカテゴリが展開されたままだとよいのですが。ページ遷移を超えるので、セッションとかクッキーとか使えばできるのでしょうが、めんどいのでとりあえず開閉のみ。

※追記、デザインを変えてからこの機能は付けていません。また、子カテゴリ(孫カテゴリ以下を含む)を非表示にするのをJavascriptで行っていますが、Jacascriptが実行される前までは表示されていて、実行されたタイミングで非表示になるので、cssで最初から非表示にしていたほうが良い気がします。

ただし、SEOの視点から見ると、display: none の指定はスパム判定の一因になる可能性もあるのでむずかしいところです。サイドバーのリンク集を displya: none にしたところで、いきなりスパム判定になるということもないでしょうけど。