• Apacheのバージョンを上げる
• CentOS5のバージョンアップする
• CentOS5 Apache起動・停止・再起動とか
• CentOS5ユーザーの削除
• CentOS5ユーザーの追加
• さくらVPS開通したら真っ先にやること
• Javascript 電話番号正規表現
• Linkタグ+rel属性でSEO効果をアップ
• HTML5マークアップ

Apacheのバージョンを上げる

さくらVPSではApacheが最初から入っていないのですが、ServersmanではApacheが入っていますが、デフォルトで入っているバージョンはやや古い可能性があるので、Apacheのバージョンを本格的な運用が開始される前に対応しておきましょう。

Apacheバージョンアップのコマンド

もしもアップデートするバージョンが存在しない場合は下記のように表示されると思います。

Complete!したらApacheを再起動

必要に応じてApacheを再起動しておきます。

Apacheのバージョンを確認

全て完了したらApacheのバージョンも確認しておきましょう。

以上でApacheのバージョンアップは終了です。

CentOS5のバージョンアップする

さくら　VPSにCentOSにアップデート

(2012/01/13現在では、バージョンアップするとCentOS5.7になりました。)

一般ユーザーでログイン

TeraTermで、一般ユーザーにてログインします。
ログイン方法は前回記事rootログインとやり方は全く一緒です。
ユーザー名とパスワードとポート番号は自分で変更・設定したものを入力してください。
まだユーザーを追加していない人は、下記リンクを参考にユーザーの追加を行ってください。
関連:CentOSでユーザーを追加する

ログイン完了したら、rootに切り替え

一般ユーザーからrootに切り替えを行います。
基本的にはログインは一般ユーザーで行い、SSHにログインしてからrootにユーザーを切り替えます。
ユーザーの切り替えはsuコマンドでrootに切り替えます

するとrootのパスワードを聞かれるので、rootのパスワードを入力したら、rootに切り替わります。

自分のCentOSのバージョンを確認

以下コマンドで自分のCentOSのバージョンが分かる

現在のバージョンが表示される。
(2011年末に借りたさくらVPSではバージョンは5.5のようです。)

アップデート実行

さっそくCentOSのバージョンを新しくしましょう。

しばらくするとダウンロードの許可を求められる

[y]を入力して許可。
しばらくするとまたIs this ok [y/N]と聞いてくるので
[y]を入力して許可。

と表示されればCentOSのアップグレードの終了。

再びCentOSのバージョンチェック

でバージョンを確認。

2012/01/13段階でアップデートを実行したところ、5.7になりました。

以上でバージョンアップ完了です。

注意

2012年７月現在、さくらVPS　OS再インストールを行うと、最新CentOS6.2になります。しかし、CentOSのアップデートの場合はCentOS5.8にアップデートされます。

CentOS5 Apache起動・停止・再起動とか

Apacheの再起動

Apacheの再起動は以下のコマンド。
新しくモジュールを追加したり、PHPやMysqlをインストールしたり、あるいはApacheの設定を変更したら、必ずApacheを再起動させて変更を反映させます。

/etc/rc.d/init.d/httpd restart

Apache 停止

/etc/rc.d/init.d/httpd stop

緩やかな再起動

/etc/rc.d/init.d/httpd graceful

再読み込み

/etc/rc.d/init.d/httpd reload

CentOS5ユーザーの削除

ユーザーが削除するときは以下のコマンドを実行します。

userdel -r centos

なお、ユーザー削除時にこのユーザー名のフォルダも同時に削除されてしまいますので　ご注意下さい。

CentOS5ユーザーの追加

ユーザーの追加

次にroot以外のログイン用ユーザーを作成します。
newuserとは例で示したユーザー名。各人それぞれ好きな名前のユーザー名を追加してください。

# useradd newuser[Enterキー]

作業用ユーザーにパスワードを設定

# passwd newuser[Enterキー]

パスワード入力

パスワードはいずれも入力しても何も表示されないので注意。

homeディレクトリにユーザー名と同じフォルダ名が出来る

CentOSの場合、ユーザーを追加すると、ユーザー名と同じフォルダ名が自働で作られます。
FTPサーバーを構築していない場合は、WinSCPなどのSCP接続が可能なソフトで接続してみます。
試しにWinSCPクライアントでつないでみましょう。

WinSCPで繋ぐ

以下は先ほど追加したユーザーでのWinSCPの設定について

ログインしてみましょう。赤線のディレクトリ部分に注目してください。home下に先ほど追加したユーザー名でディレクトリが作られていることが確認出来ますね。

さくらVPS開通したら真っ先にやること

さくらVPSは初期状態は停止状態にあるので、まずはVPSの起動から

サーバーを起動する

まずはさくらVPSサーバーのコントロールパネルにログインする。

さくらはVPSホームより、VPSサーバーの起動、停止、再起動が行える。
この時点ではまだサーバーは起動していない。
VPS ホームより　起動をクリック。

画面に『起動中』と表示されれば起動OK。

ログイン用のユーザーを作成する

ここからはTeraTermという、SSHターミナルエミュレーターを使って作業をしていきます。サーバーではこのSSHのコマンドでなんでも作業を行います。コマンドさえ間違えなければ何も難しいことはありません。

TeraTermを利用してrootでログイン

TeraTermを起動します。ホストにはIPアドレス、さくらVPSはデフォルトではポートは22番なのでそのまま。Serversmanでは3843だったります。SSH2になっていることを確認し、OK。

初期はまだrootしかユーザーが無いので、ひとまずrootと開通後に届いたメールに記載されているパスワードを入力しログインします。

下の画像はログイン直後の画面です。
(左端が#になっていたら、現在rootで作業しているということ)

ログイン用ユーザーの作成

次にroot以外のログイン用ユーザーを作成します。
newuserとは例で示したユーザー名。各人それぞれ好きな名前のユーザー名を追加してください。
#とはrootで入っていますよ、の意味なので、間違えて#も一緒に書かないようにね。

# useradd newuser[Enterキー]

作業用ユーザーにパスワードを設定

# passwd newuser[Enterキー]

パスワード入力

パスワードはいずれも入力しても何も表示されないので注意。

以上でユーザーの追加が完了しました。

rootログイン禁止

次にrootログインを禁止します。
TeraTermでいきなりrootでログインしていくと、rootのパスワードが漏れる恐れがあるので、rootでの直接ログインを今後禁止します。
必ずログイン用ユーザーを作成してから作業を行う。ログインができなくなります

viモードでsshの設定ファイルを編集

viモードでsshd_configというファイルを編集します。viとFTPでの作業することの決定的な違いは、FTPは都度アップロードするのに対し、viモードとはサーバー内のファイルを直接編集する点です。
viモードの詳しい使い方・操作方法

まずは以下のコマンドを実行。/etc/ssh/sshd_configを編集します。

下の画像はSSH設定ファイルsshd_configをviで開いた直後の状態。
[iキー]を一度クリックするだけでインサートモード(編集できる状態)に切り替わります。

変更前

 #PermitRootLogin yes

変更後(コメントアウトもはずすこと)

 PermitRootLogin no

変更した内容を保存する

保存せず終了

間違えたりして、変更を反映したくない場合は以下コマンドを実行します。
変更が反映されずviエディタを終了することが出来ます。

保存して再起動をしないと変更は反映されない。
まだ設定する内容があるのでそのまま次の作業。

VPSポート番号を変更

そのままSSHポートも変更。さくらVPSは初期で22番ポートを利用。
一般的すぎるポート番号ではやはりセキュリティホールになるのでポート番号を任意の数字に変更します。
インサートモードを終了せずに、13行め付近　ポート変更

ポート番号を任意の番号に。
1000以下だと他のサービスと被る恐れ。

Port 1000

SSH再起動

インサートモードを終了して、SSHを再起動。
インサートモードを終了するには[Escキー]。Escキーをクリックすると、INSERTの青字が消える。

viエディタの終了と保存

viエディタで設定ファイルの変更が終わったら、下記を入力。

:wq![Enterキー]

保存せずにviエディタ終了

あれれ？設定ファイルがおかしくなった？変になったと思ったら、慌てず変更をせずに一度終了しましょう。以下コマンドを入力すれば、変更が反映されず、viエディタが終了します。

:q![Enterキー]

ここまで終わったら、設定を反映させるため、SSHを再起動します。
下記がSSH再起動のコマンド

# /etc/init.d/sshd restart

確認のため、一度TeraTermを落として、再びTeraTermを起動する
ほど変更したポート番号と一般ユーザーでログインする。

すでにrootログインを禁止したので、もうrootログインはできなくなっている。
以後、TeraTermでログインするときは一般ユーザーで行う。

一般ユーザーでログインすると、左端が$になっていることが確認できる。現在一般ユーザーで作業中という意味になる。

以後、TeraTermでログインするときは一般ユーザーで行う。
すでにrootログインを禁止したので、もうrootログインはできなくなった。

Serversmanだと3843なので変更しなくてもいいのかな～と思いつつ、Serversmanは3843のポート番号だということはServersmanを一度利用したことのある人なら周知のことなので、変更するのが理想。

Javascript 電話番号正規表現

Javascriptの電話番号のバリデーションを行っていたのですが、どうも電話番号を『現実的にかつ完璧に』正規表現チェックをするのは難しいらしい。
よく出回っている電話番号のバリデーションチェックだと以下のようなものがあるのですが、下記の場合だと最後のケタ数が4桁で終わらないといけないのでフリーダイヤルの一般的な形『0120-000-000』の対応が出来ない。

/^\d{2,4}-\d{2,4}-\d{4}$/

結論:電話番号正規表現は妥協が必要

下記が私が書いた電話番号の正規表現

/^0\d{1,4}-\d{1,4}-\d{3,4}$/

左のブロックから順に解説すると、

0から始まる2桁以上4桁以下-１桁以上4桁以下-3桁以上4桁以下

この形だと03-1-4678などありえない電話番号でもtureが返ってしまうのですが、そこはケースバイケースで。

おまけ：ハイフンなし

/^\d{7,13}$/

Linkタグ+rel属性でSEO効果をアップ

relを利用する『要素(タグ)』によって使い方、意味が異なるようです。
また、SEO上の強い因果関係もあるようで、非常に興味深い属性です。

スタイルシートやファビコンの読み込みで使ったり、後はlibht-box系のjQueryでたまにrelタグに画像のURLを書いたりなど　普段あまり意識して使ったことはありませんでした。最近趣味サイトを作ったときにふと気になったので、
良い機会ですし、　rel属性について色々調べてみたいと思います。

今すぐ使えるSEO効果のあるrel属性参考

今回非常に内容が長くなってしまったので、先に参考のコードを示しておきます。詳しい解説は下まで読んでいってください。

index

ITかあさんのインデックスを示す場合。各ページのトップページとして認識される。

<link rel="index" title="ITかあさん" href="/" />

alternate

RSSリーダーの設定

<link rel="alternate" type="application/rss+xml" title="ITかあさん" href="http://www.kaasan.info/feed" />

携帯サイトのURLを設定。携帯版があるなら、対応した携帯版のURLを記述。ポイントは携帯版のトップページだけでなく、各PC版に対応したページを記述すること。携帯サイトは自分で出来るSEO対策が少ないので、携帯版があるなら必ず対応したほうがよいでしょう。(残念ながらITかあさんに携帯版はありませんが・・・)

<link rel="alternate" media="handheld" href="ページに対応した携帯サイトのURL" title="ITかあさん携帯版" />

archives

現在のページと関係のあるページ。ブログ記事に対して、目次がそれにあたる。

<link rel="archives" title="WEBサイトテクニック" href="http://www.kaasan.info/archives/category/html">

author

このサイトの所有者。会社概要のホームページのリンクを張ったり、『所有者』を示すもの。mailto:メールアドレスの設定もOK。

<link rel="author" title="ITかあさん" href="http://www.kaasan.biz/archives/category/html">

canonical

301リダイレクトと同じ効果あり？

<link rel="canonical" href="http://www.kaasan.info/"/>

archives、や携帯サイトの設定は、クローラーが巡回する上での手助けとなってくれるでしょう。

そもそもrel属性とは？

HTMLタグ/ページ全般タグ/別ページとの関係を示す – TAG index Webサイト

link要素を使用すると、関連する別の文書との関係を示すことができます。この要素はhead要素の中で使用します。
一部のブラウザは、この情報を利用してナビゲーション用のメニューを表示します。

とのこと。効果的に使うことで前後との関係性を表すことが出来るようです。

canonicalでURLの正規化

よく、パラメータがあたってしまう検索結果に対して.htaccessで私もURLをきれいに正規化してあげるのですが、すると問題として『URLの重複』が発生するということ。

違うURLで全く同じコンテンツがあるとして正しいSEOの効果を得ることが出来ない。

そこでいらないほう(つまり、URLを正規化されていないパラメータがまだあたっているほう)を、正規化したURLのコピーですよ！と検索エンジンに認識させる必要がある。

このタグは301リダイレクトと同等の効果があるとされ、サイトのドメイン移転の際にも効果的に使うことが出来そうです。

こうすることで上記タグがあった場合検索エンジンは/archives/690のコピーなんだな、コンテンツの重複が存在しているわけではないんだな、と認識することが出来るのです。

canonical補足:なるべくソース上部に記述すると確実

Google先生によると、canonicalはheadの最初にに書くとより効果的なのだそうです。

<head>
<link rel="canonical" href="http://www.kaasan.info/">
・
・
</head>

検索エンジン3社、正しいサイトURLを認識させるcanonical属性を導入より。

HTML5マークアップ

HTML5でサイトを作ってみました

さてさて、お正月休みも終わって、3連休も終わって今日から本格的に仕事モード。久々に早起きしてブログ更新です。
お正月休みを利用して初HTML5マークアップサイトを作ってみました。
そこでのHTML5マークアップのコツなども踏まえて数回にわたってHTML5マークアップとプラスしてCSS3の解説もしていきたいと思います。

HTML5で作成したITかあさんのサイト

さて、お正月休みを利用して作ったのは下記サイトです。
HTML5 マークアップの解説も下記サイトを利用して進めたいと思います。

HTML5書き出し

HTML5 では書き出し(ドキュメントタイプの宣言)がずいぶんシンプルになっていることはご存じの方も多いはず。

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">