スタイルシート(CSS)が重たかったの?

051303最近、メインで運営しているサイトが何となく重たい感じがしていました。サイト容量もかなり大きくなったのですが、それよりも基本的な部分で問題があるのかな・・・?といった感じがしていました。
このサイトは開設してから10年近くなるので、その間サイト構成やらページ構成をかなり手を入れてきましたので、全体のページソースを点検してみることにしました。といっても、何種類かのパターンに統一していましたので、それほど面倒なことではありませんでした。

その点検作業をしているうちに、あることに気が付きました。それは、スタイルシート(CSS)の問題です。CSSは外部CSSにしているのですが、そうすると、外部CSSを呼び込んでからページが表示されていきますので、CSSが読み込まれる部分での課題があります。
余分なコードがあると、どうしても重たくなってしまうようです。そのことを思いついてから振り返ってみすと、10年近く運営するなかでは、ページ表示の必要性から、その都度必要なCSSコードを追加したり変更したりしていました。
そのことで点検してみると、使わないコードやダブったものなど、ついついCSSが膨らんできていました。それではと、一つ一つチェックしながらCSSコードを点検し、不要なものを削除したり、統合したりと修正をしていくと、みるみるコードが減っていき、3分の2くらいに減少してきました。

出来上がったものを、もう一度チェックしてアップロードし、サイトをチェックしてみると、今まで感じていた重たさが改善されていました。
やっぱり、日頃の手抜きをしてはいけないということでしょうね。

hrタグ 〓 水平線表示も使い方によって便利

hrタグはホームページ内で水平線を表示するタグで、終了タグがないのも特徴です。
普通どおり<hr>と記入すると、ちょっと味気ない感じなので、あまり使っていなかったのですが、水平線の長さや太さ、色などを設定することができるので、ちょっと使ってみることにしました。

hrタグの設定の仕方でいろいろと変化します。
よく使われるケースを列挙してみました。一般的にはこれらを組み合わせて使用するケースが多いようです。

(水平線の太さを指定する場合)
<hr size=”1″>
※これはサイズを1ピクセルで指定した場合の事例です。整数で指定する必要があります。

(水平線の幅を指定する場合)
<hr width=”2″>
※これはサイズを2ピクセルで指定した場合の事例です。

(水平線の位置を指定する場合)
<hr align=”center”>
※これは中央揃えで指定した場合の事例です。この指定は一般的なalignの指定と同様です。
・left
・center
・right
が指定できます。

(水平線の影なし表示を指定する場合)
<hr noshade>
※これはhrタグを使用した場合、通常は陰影のついた立体感のある表示となるのを影なし表示するための設定です。

(水平線の色を指定する場合)
<hr color=”#cccccc”>
※これは水平線の色として#ccccccを指定した場合の事例です。

hrタグは便利なのですが、水平線の色を指定するcolor属性を使用した場合、HTMLの文法チェックをした場合に問題点として指定されます。
これがいやな場合は、スタイルシートで指定するという方法がいいのではと思い、結局のところスタイルシートでの指定に落ち着いた次第です。
スタイルシートで指定する場合は、次のような表現をcssで行っています。
hr.p {
#cccccc;
}
そして、ページ側では次のような記述で使っています。
<hr class="p">
※hrは全角で記載していますが、もちろん実際は半角です。

Services_Amazon を使った Amazon API の修正

Amazon Product Advertising API への対応で「Services_Amazon」を使うこととし、「Services_Amazon 0.8.0」のインストールが終わったので、今度はPHPコードの修正を行う必要があります。
現在のPHPコードの事例を次のとおりとして、これを修正していくことします。

【PHPコード事例(修正前)】
<?php
require(‘Services/AmazonECS4.php’);
$amazon = new Services_AmazonECS4(“Access Key ID”, “Associate ID”);
$amazon->setLocale(‘JP’);
$amazon->setVersion(‘2008-08-19′);
$amazon -> setCache(‘file’,array(‘cache_dir’ => ‘/cacheフォルダへのパス/’));
$amazon -> setCacheExpire(86400);
$options = array();
$options['Keywords'] = ‘書籍などの区分キーワードを記入’;
$options['BrowseNode'] = ”;
$options['Sort'] = ’salesrank’;
$options['ResponseGroup'] = ‘Small,ItemAttributes,Images’;
$options['ItemPage'] = 1;
$result = $amazon->ItemSearch(‘Books’, $options);
// 検索結果を表示
(以下、省略)

この事例の場合の修正箇所は2か所です。
一つめは、次の箇所です。
require(‘Services/AmazonECS4.php’);
AmazonECS4.phpではなくて、Amazon.phpを使用するため、次のように修正しました。
require(‘Services/Amazon.php’);
二つめは、次の箇所です。
$amazon = new Services_AmazonECS4(“Access Key ID”, “Associate ID”);
の部分を、
$amazon = new Services_Amazon(“Access Key ID”, “Secret Access Key”, “Associate ID”);
に修正します。
それ以外は修正の必要がないようですので、変更していません。
その結果、新たなPHPコードを次のとおりとして、それぞれのページに対応していくこととしました。

【PHPコード事例(修正後)】
<?php
require(‘Services/Amazon.php’);
$amazon = new Services_Amazon(“Access Key ID”, “Secret Access Key”, “Associate ID”);
$amazon->setLocale(‘JP’);
$amazon->setVersion(‘2008-08-19′);
$amazon -> setCache(‘file’,array(‘cache_dir’ => ‘/cacheフォルダへのパス/’));
$amazon -> setCacheExpire(86400);
$options = array();
$options['Keywords'] = ‘書籍などの区分キーワードを記入’;
$options['BrowseNode'] = ”;
$options['Sort'] = ’salesrank’;
$options['ResponseGroup'] = ‘Small,ItemAttributes,Images’;
$options['ItemPage'] = 1;
$result = $amazon->ItemSearch(‘Books’, $options);
// 検索結果を表示
(以下、省略)

PHPで「NEWマーク」を設置

PHPを使って記事登録を行う場合に「NEWマーク」を付加したい。それも、1日とか2日間とか指定した日数だけ表示されるように自動化したいと思い、参考になるものはないかとググってみました。
参考にさせていただいたのがアロマネット株式会社さんの次のページです。
PHPでNEWマークを自動ON/OFF
具体的には、次のようなPHP関数で設定しました。

<?php
function newmark($entry,$n){
$today=date( “Y-m-d”, mktime( 0,0,0,date(“m”) ,date(“d”)-$n, date(“Y”) ) );
if($entry>=$kyou) print “<img src=\”./image/new.gif\”>”;
}
?>

このPHP関数を<head></head>間に設定します。
その上で、表示させた箇所に次のように追加すれば表示させることができます。

<?php
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
echo “<font size=\”-2\”>(表示)”;
echo $row["hyouji"];
newmark($row["hyouji"], 0);
echo “</font><br>\n”;
?>

これは、あくまでも一つの設定事例であり、具体的には設定場所に応じて指定することとします。
なお、上記の事例でいえば表示期間のところを「0」にしていますので、その日(当日)のみ「NEWマーク」が表示されることになります。

Amazon Webサービス(Services_Amazon 0.8.0)インストール

Amazon Webサービス(Amazon ECS 4.0)で新たな対応の必要性
AmazonアフィリエイトでAmazon Associates Web Service(Amazon ECS 4.0)を利用していたのですが、Amazon.co.jp Product Advertising API チームからメール連絡がきました。
内容は、「Amazon アソシエイト Web サービスの名称を、「Product Advertising API」へ変更したこと、及び Product Advertising API への全てのリクエストに、認証のための電子署名を 2009年8月15日までに含める必要がある」というものでした。さらに、「2009年8月15日までに、必ず利用する全ての Product Advertising APIリクエストに署名認証を含めること。移行期間終了後に認証を含まないリクエストが送信された場合、リクエストは一切処理されなくなる。」との連絡となっていました。
つまり、この連絡内容でいうところの、「Product Advertising API リクエストに署名認証を含める。」ことができないと、苦労して作り上げているAmazon APIが全て無効になるというものでした。

Secret Access key の取得
これまでのAmazon Webサービスでは、Access Key IDとAssociate IDのみで利用できましたが、新しいバージョンではそれに加えて「Secret Access key」が必要になります。
Secret Access key の取得は次により行うことができます。
Amazon Web Services にアクセス・ログインし、「Your Account」から「Access Identifiers」を見ると記載されています。

電子署名が必要
署名認証に関する詳細情報は、「開発者向けガイド」に掲載されているということなんですが、これは英語ページ。しかし、せっかくこれまでやってきたので諦めるわけにはいかず、例によってググルことから準備をはじめました。そうすると、いろんな情報がすでに掲載されていました。今回欲しかった情報はといいますと、これまでのAmazon ECS 4.0で利用していたpearモジュール(Services_Amazon)がProduct Advertising APIに対応できるようになっているかどうかということです。
すると、やっぱり有りました。Product Advertising APIに対応した「Services_Amazon 0.8.0」が公開されていました。早速これをコマンド操作でインストールしようと思ったのですが、もう少し周辺情報を調べてからということで、さらに情報収集を進めてみると、今回のAmazon Product Advertising APIでは、「SHA256をハッシュ関数としたHMACを電子署名として採用している」との情報が掲載されていました。そして、SHA256のハッシュ生成のためにHASHライブラリまたはMHASHライブラリに依存しているということです。そこで、自分が契約しているサーバー環境が対応できるかどうかをチェックしてみることになりました。

サーバー環境のチェックと再インストール
いろいろと情報を取ってみると、PHP5環境ではHASHライブラリのHASH_HMAC関数が利用できるがPHP4環境では利用できないとなっていました。私が契約しているサーバーのPHP環境はPHP4でした。久しぶりに利用サーバーの情報をチェックしてみると、PHP5をプレインストールしているOSで再インストール可能な状態になっていました。ということは選択肢として、現状OSでPHP4→PHP5へのバージョンアップを行うか、OSの再インストールでPHP5がプレインストールされているOSをインストールするかの二通りがあるということになります。
PHP4環境でもHASHライブラリを次のpearコマンドでインストールすれば使えるようです。
#pear install hash
メインのウェブサイトでは、PHP+MySQLでDB構築し、日々情報投入していますので、「OS再インストール」となりますとデータが全て初期化されてしまうので、データのバックアップなど、必要な作業も多岐にわたることになります。
しかし、現在のサーバーを契約して利用しはじめてから年数も経過していることや、PHP4についてはすでにサポート期間も終了していることもあり、この機会にPHP5環境をプレインストールしている新OSへの再インストールを行うこととしました。
再インストールに伴う備忘録メモにつきましては、別の項目で残しておきたいと思っています。
続きを読む »

yumコマンドでよく使うコマンド

yumコマンドもよく使うコマンドですが、しばらく利用していないと必要なコマンドを探すためにググルことになります。そのため、yumコマンドでよく使うコマンドを備忘録として整理しておくこととしました。

check-update アップデート可能なパッケージ一覧を表示する。
clean ダウンロードしたパッケージと古いヘッダを削除する。
clean oldheaders 古いヘッダを削除する。
info 利用可能なパッケージ情報を表示する。
info パッケージ名 指定したパッケージ情報を表示する。
install パッケージ名 指定したパッケージをインストールする。
list 利用可能なパッケージの一覧を表示する。
list installed インストールしているパッケージの一覧を表示する。
list updates アップデート可能なパッケージの一覧を表示する。
provides パッケージ名 アップデート可能なパッケージの一覧を表示する。
remove パッケージ名 指定したパッケージをアンインストールする。
search キーワード キーワードからパッケージを検索する。
update アップデート可能な全てのパッケージをアップデートする。
update パッケージ名 指定したパッケージをアップデートする。

画像のサイズ指定、変更

ホームページ作成にあたって画像のサイズ指定(変更)はよくあることです。この場合、スタイルシートによる指定もありますが、簡単に画像サイズを指定(変更)する方法も便利です。この場合に調節するのが「width」と「height」です。

imgタグに「width=”"」「height=”"」を追加指定することで、画像サイズを指定(変更)することができます。

画像が、 <img src=”sampre.gif” width=”300px” height=”300px”>

であった場合、この画像サイズをそれぞれ半分の「150px」に変更(指定)する場合、次のように簡単に行うことができます。

<img src=”sampre.gif” width=”150px” height=”150px”>

この方法で画像サイズを指定した場合、画像そのもののデータ量が変わるのではなく、データ量はそのままで「縮小する」ということになるので、画質が悪くなるケースがあります。

ただ、ホームページ編集の際に、商品画像など頻繁に取り替える要素がある場合や、それほど極端なサイズ変更でない場合などは、やり方が簡単なだけに多用する機会が多い方法です。

この場合の指定方法を整理しておくと、次のようになります。

width=”" 横のサイズをピクセル数、または%で指定する。
height=”" 縦のサイズをピクセル数、または%で指定する。

MySQLの初期設定

レンタルサーバーに「MySQL」がインストールされている場合で、そのMySQLを活用してWeb運営するには、MySQLが動作するように設定しなければならない。このブログはワードプレス(WP)を使用していますが、この場合もMySQLが前提となります。

<1>MySQLの起動

MySQLを活用するためには、初期設定を行うことになる。最初に行うのが「MySQL」を起動させることになりますが、MySQLの起動は次のコマンド操作で行うことができます。
# /sbin/service mysqld start
これで「enter」すると、次のように表示されれば、無事にMySQLが起動したことになります。
Initializing MySQL database: [ OK ]
Starting MySQL:   [ OK ]

<2>MySQLのrootパスワードの設定

初めてMySQLを使用する場合は、MySQLの初期時点ではルートパスワードが設定されていないので、MySQLのrootパスワードを設定します。この場合もコマンド操作を行うことになります。下記に記載のnew-passwordとなっているところを、自分が設定するrootパスワードに置き換えてからルート権限でコマンドを実行します。
# mysqladmin -u root password ‘new-password’

<3>データベースなどWebアプリ用のユーザー登録

データベースなどWebアプリの接続用にrootユーザー権限を使用するにはセキュリティ上の問題があるので、Webアプリ用のユーザーとパスワードを設定して使用します。
まず、root権限でMySQLに入ります。
#mysql -u root -p
とコマンドすると、次のようにrootユーザーパスワードの入力を求められるので、先ほど設定したrootユーザーパスワードを入力します。
Enter password:
これでMySQLに接続されるので、rootユーザー以外のユーザー登録を行います。
<rootユザー以外の全ての権限を有するスーパーユーザーの登録>
mysql> grant all on *.* to ユーザー名@localhost identified by ‘パスワード’;
これでユーザー登録されます。
*.* とするとMySQLに設定された全てのデーターベースに共通するユーザーとして登録されます。データベース毎にユーザー登録する場合は、*.* の部分に当該するDB名を入れることで設定できるので、使用環境に合わせて設定します。