このサイトのトップページを、久しぶりに変更した。ブログではなく、トップページの方ね。以前に変更したのは2009年の5月だから、約2年半ぶりの変更だ。

ページ構成は今までと変わらず、「HOME、ABOUT、CONTACT」の3ページだけ。相変わらず内容はないが、プロフィールページとして使っている。

今回は、ウインドウサイズに合わせて、画面いっぱいに背景画像が表示されるようにした。ウインドウをリサイズすると、背景画像もそれにあった大きさで表示される。ついでに、HOMEではその背景画像をスライドショーに。

フルFlashのサイトなどでよくあった表示方法だが、Flashは使わずに、JavaScriptで背景画像の表示をコントロールしている。仕事でつくるサイトでも、Flashはもうめったに使わないしね。

ちなみに某古いブラウザでも表示されるようにしているが、見た目やレイアウトが若干崩れたりするのは気にしていない。ほんとうは、完全に無視したかったのだが。

あと、最初はHTML5で作っていたのだが、コチラはまだちょっと早い気がして、次回の変更まで延期にした。それまでに勉強しておこう。

このサイトを置いているXREAは、低価格で高機能という面ではとてもよいサーバなのだが、使用しているサーバで障害が頻発しても、サポートはほとんど期待できない。まあ、そのおかげで低価格を実現しているのかもしれないが。

そんなこんなで、このサイトを置いているサーバも、数カ月前からかなりの過負荷状態が続き、レスポンスの激しい低下や、頻繁に繋がらなくなるど、かなりストレスのたまる状態だったので、ここはサクッとサーバを引っ越ししようと、いろいろ調べていた。

他社サービスへの引っ越しも考えたのだが、契約を更新をしたばかりだし、サイトデータや、ブログに使用しているWordPress、データベースなどの移動も結構大変そう。しかし、同じXREA内での引っ越しなら、データの移動も簡単で、お金もまったくかからないということなので、引き続きXREAを使用することに。

やってみると、結構簡単に引っ越しが完了。ここ数ヶ月の状態とは比べ物にならないくらいレスポンスも向上。もっとはやく引っ越しすればよかった。

といっても、いつまた同じ状態になるか分からないので、XREAでのWordPressを含めた引っ越しの手順を、備忘録として残しておくことに。今回はXREA同士での引っ越しだったが、上位サービスのCORESERVERへの引っ越しや、CORESERVER同士での引っ越しの場合も、似たような手順らしい。

1. 新規サーバを準備

まず、「ユーザーコントロールパネル」の「サーバーアカウントの登録・管理・購入」のページから、無料のサーバアカウントを取得する。ユーザ名は従来サーバに使っているものと同じに。仕様を参考に希望するサーバを選択。そして「登録」ボタンをクリック。しばらくすると、登録完了のお知らせがメールで届き、その1時間後にはFTPなどが利用可能となる。なお、無料版のままだと、なにかと制限があるため、そのサーバアカウントの無料体験7日間を購入する。

2. 従来サーバのMySQLデータベースのダンプファイルを作成

「サーバーアカウントの登録・管理・購入」のページから、従来サーバの「サーバー設定」をクリックし、「XREA – CONTROL PANEL」へ。左の管理メニューから「データベース」を選び、使用しているデータベースの欄に、以下のように必要事項を入力。

選択	ラジオボタンを選択
DB/ユーザー名	DBのユーザ名
パスワード	DBのパスワード
文字コード	「UNICODE」を選択

必要事項を入力してから「保存」ボタンをクリックすると、MySQLデータベースのダンプファイルが作成される。ルートディレクトリに「mysql.dump」が作成されていることを確認しておく。

3. 従来サーバから新規サーバへデータをコピー

データのコピーにはXREAのサーバー間コピー機能を使う。この方法だと、すべてのデータをまとめてコピーできるので簡単。ちなみに、手順1での無料体験7日間を購入してから、24時間以上たった後の方がいいらしい。

「サーバーアカウントの登録・管理・購入」のページから、新規サーバの「サーバー設定」をクリックし、「XREA – CONTROL PANEL」へ。左の管理メニューから「サーバー間コピー」を選び、以下のように必要事項を入力。

選択	ラジオボタンを選択
FTPユーザー名	従来サーバのFTPユーザ名
FTPパスワード	従来サーバのFTPパスワード
FTPサーバー名	従来サーバのFTPサーバ名
転送方式	「ミラー（削除なし）」を選択
リモートディレクトリ	「/」（スラッシュ）を入力
ローカルディレクトリ	「/」（スラッシュ）を入力

必要事項を入力してから「実行」ボタンをクリックする。コピー処理は、データ量にもよるが、数分から数十分ほどかかる。ルートディレクトリに「.servercopy.log」というログファイルが作成されているので、それを開き、最後のあたりに「COMPLETE」という行があれば、コピー処理が完了している。

4. 新規サーバにMySQLデータベースを作成

新規サーバの「XREA – CONTROL PANEL」のページで、左の管理メニューから「データベース」を選び、以下のように必要事項を入力。

選択	ラジオボタンを選択
DB/ユーザー名	従来サーバのDBと同じユーザ名
パスワード	従来サーバのDBと同じパスワード
文字コード	「UNICODE」を選択

必要事項を入力してから「作成」ボタンをクリックすると、新しいMySQLデータベースが作成される。ルートディレクトリに「mysql_.xxxxxxxxxx.dump」が作成されていることを確認しておく。

5. 新規サーバにMySQLデータベースを復元

新規サーバのルートディレクトリに、従来サーバから「mysql.dump」がコピーされていることを確認しておく。無ければ、FTPで従来サーバからコピーする。新規サーバの「XREA – CONTROL PANEL」のページで、左の管理メニューから「データベース」を選び、手順4で作成したデータベースの欄に、以下のように必要事項を入力。

選択	ラジオボタンを選択
DB/ユーザー名	DBのユーザ名
パスワード	DBのパスワード
文字コード	「UNICODE」を選択

必要事項を入力してから「復元」ボタンをクリックすると、MySQLデータベースが復元される。復元処理は、データ量にもよるが、数分から数十分ほどかかる。PhpMyAdminで、MySQLデータベースが復元されていることを確認しておく。

これで、従来サーバから新規サーバへの必要なデータのコピーは、すべて完了しているはず。念のため、データのコピー漏れがないかを確認し、パーミッションも変わっている可能性があるため、正しく設定しなおしておく。

6. DNS設定の変更

「ユーザーコントロールパネル」の「取得済みドメイン一覧」のページで、サーバを移動するドメインの「DNS」という緑色の文字画像をクリックする。DNSの設定ページで、従来サーバのIPアドレス箇所を、新規サーバのIPアドレスに変更し、「保存」をクリックする。変更が反映されるまでには、数十分から数時間ほどかかる場合がある。

7. ドメインウェブの設定

新規サーバの「XREA – CONTROL PANEL」のページで、左のマイドメイン利用から「ドメインウェブ」を選ぶ。従来サーバのドメイン情報と同じ内容を入力し、「ドメイン設定」ボタンをクリックする。エラーメッセージがでた場合は、手順6のDNS設定の変更が、まだ反映されていないので、しばらく待ってから実行する。

8. ドメインメールの設定

新規サーバの「XREA – CONTROL PANEL」のページで、左のマイドメイン利用から「ドメインメール」を選ぶ。従来サーバのメール情報と同じ内容を入力し、「設定」ボタンをクリックする。うまく設定されない場合は、「A/MXレコードのチェックを行わない(強制設定)」のラジオボタンを選択し、「設定」ボタンをクリックする。

9. 契約の移動

しばらく使用してみて、新規サーバに問題がなければ、従来サーバの利用権を新規サーバに移動する。「サーバーアカウントの登録・管理・購入」のページで、従来サーバの「移動」をクリック。説明のところにある、「～強制的に移動するにはここをクリックしてください」というところをクリックすると、移動先のアカウント名@サーバー名のプルダウンメニューに、新規サーバが設定される。移動先のサーバ名に間違いがないかを確認して「移動」ボタンをクリックすると、10分から1時間程度で新規サーバに従来サーバの利用権が移動する。

以上で、従来サーバから新規サーバへ引っ越しが完了。手順は多いが、大きなトラブルもなく引っ越しができた。さぁ、新しいサーバ、いつまで持つかな。

• XREA – VALUE DOMAIN:バリュードメイン

このサイトのブログでも使用している、オープンソースのブログ／CMSプラットフォーム「WordPress」のメジャーリリース、バージョン3.0が登場。

WordPress 3.0のコードネームは「セロニアス」。これは、ジャズ・ピアニスト「セロニアス・モンク」にちなんで。WordPressのコードネームは、毎回ジャズ奏者から取られている。

日本では、シックス・アパートのMovable Typeが人気で、多くの企業サイトでも使用され、シェアも高いそうだが、世界で見ると、WordPressの方が多く使われているらしい。最近は、日本でもWordPressの人気が上がってきているのかな。

そんなWordPress 3.0だが、メジャーリリースにふさわしく、多くの新機能が搭載されている。そして、新デフォルトテーマの「Twenty Ten」は、カスタマイズが可能な背景やヘッダー、メニューなど、新機能をフルに活用し、デフォルトにふさわしい魅力的なテーマとなっている。初めてWordPressを使う人でも、このテーマを使えば、オリジナルなデザインのサイトを、簡単に作ることができるだろう。

また、大規模なマルチサイト運営に使われていたWordPress MUとの統合も、大きな変更点だ。これは、よりいっそうのシェア拡大につながるかもしれない。

WordPress 3.0は、ベータ版のころからローカル環境でテストをしているが、このサイトの自作テーマは、取りあえず問題がなさそうな感じ。あとは、使用しているプラグインにも問題がなくなればアップグレードをしようと思う。

できれば、自作テーマもWordPress 3.0に最適化し、古いブラウザ環境も見限って、新しい機能とかを使って作り替えたいところなのだが……。それには、まだまだ勉強が必要だな。

• WordPress | 日本語 » WordPress 3.0「セロニアス」
• WordPress › Blog » WordPress 3.0 “Thelonious”

最新版にアップグレードしたついでに、プラグイン関連をいろいろ調べていると、今まで使用していた「Custom MoreLink」というプラグインが必要ないことが分かった。

このプラグインでやっていたのは、<!--more-->で生成されるリンク、いわゆる「続きを読む」のリンクから、#more-xxxxを削除するということ。これで、シングルページの続きの場所ではなく、ページの先頭へリンクされるようになる。

もちろん、「Custom MoreLink」には、それ以外の機能もある便利なプラグインなのだが、このサイトでの用途には必要がなくなったので、お役御免ということに。

新しい方法は、WordPress Codexに書いてあったのだが、テーマのfunctions.phpに、以下のコードを追加するだけでいいらしい。

function remove_more_jump_link($link) {
$offset = strpos($link, '#more-');
if ($offset) {
$end = strpos($link, '"',$offset);
}
if ($end) {
$link = substr_replace($link, '', $offset, $end-$offset);
}
return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');

これで、希望どおりの動作になってくれた。プラグインは便利なんだけれど、あまり使いすぎると重くなりそうだし、テーマの書き方で補えるなら、その方がいいしね。

• 「続きを読む」のカスタマイズ – WordPress Codex 日本語版
• WordPress › Custom More Link « WordPress Plugins

このサイトの「喜多嶋隆作品 蔵書リスト」だが、縦に長い表が見難かったので、項目別にソートできれば少しはマシかなと、何かいいJavaScriptがないか探していた。

他の動作で使用している、PrototypeというAjax JavaScriptフレームワークを利用したもので、いろいろ探してみると、「TableKit」という、なかなか優れモノのJavaScriptを発見した。Googleの検索で、結構引っかかるので、有名なのかな。

項目をソートするだけならば、結構簡単だったのだが、一応設置手順をメモ。

1. 必要なファイルを設置

Millstream Web Softwareから、TableKitをダウンロードして解凍し、ソートに必要な「fabtabulous.js」と「tablekit.js」を任意の場所に設置する。Prototypeが設置されていない場合は、「prototype.js」も同様に設置する。

2. JavaScriptファイルの読み込み

<head>内に、設置したJavaScriptファイルの読み込みを指定する。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="fabtabulous.js"></script>
<script type="text/javascript" src="tablekit.js"></script>

3. 動作の指定

<table>に、動作に必要なclassを指定する。

<table class="sortable">
  <thead>
    <tr>
      <th>著作名</th>
      <th>初版発行日</th>
      <th>備考</th>
    </tr>
  </thead>
  （中略）
</table>

今回はソート機能だけができればいいので、class="sortable"のみを指定した。ほかにも、リサイズ機能と編集機能を指定することも可能。

以上の指定で、<th>要素をクリックすると、昇順・降順でソートするようになる。また、ソート時の<th>要素の表示は、スタイルシートで色を変えるなど、現在の状態が分かるようにしてやると便利。今回は、自分用ということで、あまり目立たないようにしたけれど……。

他にも、ソートの初期状態を指定したり、データ種別の指定など、いろいろとオプション項目があるようだが、詳しくは公式サイトのDocumentationを参考に。

• TableKit: HTML table enhancements using Prototype
• TableKit – Demo & Download
• Prototype JavaScript framework

先日、amazon.co.jpで、何か面白いモノがないか探していると、1987年に発行された講談社X文庫、喜多嶋隆の『天使のアッパーカット』上下巻セットが、マーケットプレイスで安く販売されていたので、さっそく購入した。いま読んでいる本が読み終わったら、次はこれを読んでみよう。でも、ほかにも未読の本があるなぁ……。

角川文庫と光文社文庫の喜多嶋隆作品は、すべて揃っているが、そのほかの文庫本や単行本は、持っていないものが結構ある。それらは、古書店などで見つけると買ったりしているのだが、たまに、「これは持っていたかな？」と忘れたりするので、備忘録も兼ねて蔵書リストを作っておくことに。

ページ下部メニューの、Individual Pagesのところに、「喜多嶋隆作品 蔵書リスト」へのリンクを入れておいたので、喜多嶋隆作品に興味のある方はどうぞ。

蔵書は結構な数があるので、「角川文庫」「光文社文庫」「そのほかの文庫」「単行本など」の4つに分け、それぞれを、JavaScriptでタブ切り替え表示するようにした。

タブ切り替え表示用のJavaScriptは、探してみるといろいろな種類のモノあったが、このサイトでは、画像拡大＆スライド表示用のJavaScriptで、prototype.jsというAjax JavaScriptフレームワークを使用しているため、タブ切り替え表示用のJavaScriptも同様のモノを選択。これで、なんとか1ページに収めることができた。

タブ切り替えって、今まで使用したことがなかったけれど、結構簡単に作ることができたし、今度、仕事でも使ってみようかな。

• 喜多嶋 隆のホームページ
• 喜多嶋隆　My Hawaii My Room　〜今年もハワイに帰ってきた〜
• Prototype JavaScript framework

前回のエントリーでもチラリと予告したが、トップページに引き続き、このBlogページのデザインも、1年半ぶりにリニューアル。題して、POCKET BASE 2G（セカンドジェネレーション）！

すみません、大げさなタイトルを付けるほど、たいしたモノじゃないです。流行っぽい名前を付けてみたかっただけです、はい。

リニューアル作業自体は、今年の3月に開始しており、4月にはリニューアルをする予定だったのだが、途中でいろいろと忙しくなって作業を放置したまま、結局約2か月遅れのリニューアルとなった。まあ、誰かが待っているというわけでもなかったのでいいかなと。このあたりは、仕事でのサイト制作とは違って気楽だよね。

デザインは、今回も1カラムレイアウトに。2カラムや3カラムのレイアウトにするほど情報量は多くないので、これで十分かなと。それに、1カラムレイアウトは、ごちゃごちゃせずにスマートなデザインにできるので、個人的には結構好み。

そのわりには重いじゃないかっ！　という突っ込みは却下で。

ああ、見られないぞっ！　とか、動かないぞっ！　などの、不具合があれば、どしどしご連絡を。もちろん、ご苦労さまというねぎらいの言葉は大歓迎。

このサイトのトップページを、久しぶりに変更した。といっても、そんなに見た目は変わっていないが、この後予定している、このBlogページのデザイン変更に合わせ、プチリニューアルといったところか。

主な変更点として、従来のトップページでは、JavaScriptでスタイルシートをランダムに読み込み、アクセスするたびに、表示される写真が変わるようにしていたが、今回のトップページでは、JavaScriptのスライドショーで、いくつかの写真を連続で表示するようにした。古い環境では、ちょっと重くなったかな？

その他には、同じくトップページで、このBlogの新着を表示するようにしたり、コンタクトページを新しく作ったりと、変更点がいくつか。

今回の制作でも、Internet Explorer各バージョンの表示崩れや、opacityを使った透過PNGの表示がおかしくなるなど、SafariとFirefox以外では、相変わらずブラウザ間の表示差違に苦労させられた。また、全然理解していないのに、PHPやJavaScript、CGIなどの言語を多用してしまったせいで、何度「キーッ！」となったことか。

それでも、多少変な所はあるが、とりあえず、そこそこの環境では問題なく表示できるはず。でも、推奨環境はSafari 3とFirefox 3以上ということで、どうぞよろしく。

2月13日から、「Internet Explorer（IE）7日本語版」の、Windows自動更新機能による配布が開始された。これで、古いIEから新しいIE7へと乗り換える人も少しは増えるだろう。

しかしもろもろの事情で、まだまだ古いIEが現役のままという人も多いと思う。このブログのアクセス解析を見ても、IE7と古いIEの割合は1対3といったところだ。

WindowsのIEは、新しいバージョンのIEをインストールする時に、古いIEが消されてしまう。しかし、新しいIEしか使わないという人にはそれでもいいだろうが、Webデザイナーなどにとっては、表示確認の必要性から古いIEも必要になってくる。そんな時に便利なのが「Multiple IE」だ。

これは、IE7の入っている環境に、IE3、IE4.01、IE5.01、IE5.5、IE6をインストールして共存させる事が可能な優れモノで、複数のマシンなどに別のIE環境を構築する必要がなくなる。このブログのテンプレートを作成する時には、これのおかげでとても楽に表示確認ができた。Webデザイナーにはオススメだね。

なお、Multiple IEはMicrosoftが正規に配布しているモノではない。Windowsの深い部分に影響しているIEだけに、もしかすると何か問題があるかもしれない。ということでお約束だが、利用は自己責任でということをお忘れなく。

• Install multiple versions of IE on your PC | TredoSoft

追記：
現在は、IE5.5, IE6, IE7, IE8の確認が同時にできる、「IETester」を使用している。

• My DebugBar | IETester

このドメインで始める前は、FC2のブログサービスを利用していたのだが、独自ドメインのホスティングサーバへ移行をする際に、ブログのサーバソフトウェアをどうするかで悩んでいた。「Movable Type」や「Nucleus」なども検討したが、落ち着いたのは導入が簡単だった「WordPress」。

確かに導入は簡単だったのだが、いざカスタマイズするとなると、参考になる書籍やサイトがMovable Typeのように豊富ではなく、少々苦労することになった。この辺りは国内でもしっかりとした会社が運営し、国内に限ればシェアも高いMovable Typeが有利なのだろう。

しかし、ココログを使った時に不満だった再構築の煩わしさから、Movable Typeは遠慮したかったし、Nucleusになると参考になる資料などがほとんどなかったので、結局はWordPressに落ち着いてしまった。まあ、とりあえず今は順調に運営できているので満足している。

導入はしても、しばらくはデザイン以外のところで試行錯誤をしていたので、テーマは既存のモノを少しいじって利用させてもらっていた。なんとか運用の方も落ち着いてきたので、やっと独自テーマを作れるところまでたどり着いたが、WordPressのテーマを作るには、通常のXHTML＋CSSだけではなくPHP言語が必要になる。ここで思いっきり挫折しそうだったのだが、いろいろな既存テーマを参考にして、なんとか独自デザインのテーマを作ることが出来た。

そんなこんなで、しっかりと理解して作ったモノではないので、もしかしたらどこかに不具合が潜んでいるかもしれない。もし何か問題などがございましたら、コメントなどでお知らせいただければ幸いです。

• WordPress › Blog Tool and Weblog Platform
• ja:resource « WordPress Codex