移転の経緯

ちょうどサーバーの契約更新時期だったので、奮発してサーバーをちょっと良いところに移転した。
ここ数ヶ月ブログだけがやたら重たかったのも移転した理由の一つ。
一番最初に『XREA』を使い始めたのが2002年の始まり辺りで、途中から有料版の『XREA Plus』に移行した。
で、今回そのさらに上位版の『CORESERVER』へと移転したわけ。
このCORESERVERは月額500円くらいでかなりの自由度を誇る。
ただし、他のサーバーと比べてなんか色々特殊らしい。僕はこの系列しか使ったこと無いのでわからないけど、不便はあまりない。
もうちょっと良い別のサーバーとして『X SERVER』と言うのがあるんだけど、まだそこまで必要じゃないかな。
余談として『XREA Plus』を契約するなら『CORE-MINI』の契約をした方が良いかも知れない。

作業内容

今回は大量にあるwordpressの記事とかその辺りをひっくるめて移らないといけなかったので無駄に時間を食った。
簡単な移転の方法として、データベースをSQLでエクスポートする方法がある。
しかし今回は新しいサーバーの方に一からwordpressをインストールし直すことにした。

で、記事はwordpressのダッシュボードの左側にあるツールの中のエクスポートを利用した。
これはXMLと言う形のファイルに記事を出力することが出来る。
ボタン一発でインポートも出来る。

次にCORESERVERを無料お試し期間の5日間契約する。
その無料期間の間にデータベースを作ったり、wordpressをインストールしたりする。
サーバーの契約はボタンをポチポチクリックするだけなので割愛。
wordpressもwp-config.phpの設定をしたあとにアップロードしてアクセスするだけなので割愛。
サーバー選びの参考資料として『CORESERVERのソフトウェア情報』と『障害メンテナンス情報』をどうぞ。
また、『CORESERVER のサーバー移動（作業手順メモ）』も役立った。

無事サーバーにwordpressをインストールできたらXMLをインポート。
この時に記事は正常にインポートできたんだけど、カテゴリーやタグが正常にインポートできなくて結構消滅した。
設定の破損は結構起こるものなのかも知れない。
『WordPress2.9に躓いた。』
この記事でも同様の事が書いてあった。

ここまでで今使っているサーバーと、新しく使うサーバーが同じ記事を表示出来るようになった。
次はドメインの移転だ。
ここでもつまづいたりした。

設定する所は3つあり、XREAでのドメインウェブ、CORESERVERでのドメインウェブ、そしてVALUE-DOMAINでのネームサーバーのDNS設定だ。
まずXREAでのドメインウェブをそのままにしておいてVALUE-DOMAINでのネームサーバーの設定をする。
VALUE-DOMAINでの設定はサーバー番号を選ぶだけで勝手に内容が書き換わってくれるので簡単だ。
『CORESERVERのソフトウェア情報』で確認出来るサーバーのIPアドレスが一致していることを確認しよう。
TTLは120のままでOK。

すぐには切り替わらないみたいなので、1時間くらい経ったらXREAのサーバーにアクセスしてみよう。
そうすると『404 not found』になっているはずなので、
それを確認したらCORESERVERでのドメインウェブでドメインの設定をする。
次にXREAでのドメインウェブを削除する。
すると数分でCORESERVERで動いているwordpressにドメインでアクセス出来るようになる。
ネームサーバーの移転が結構時間がかかるので注意だね。

その後wordpressのダッシュボードにアクセスしようとするとパスワードを聞かれるんだけど、なぜかアクセス出来ない事態に。
これはwordpressの一般設定の中にあるブログのURL辺りが関係している。
ブログのためのデータベースにアクセスし、wp_optionsの中にあるsiteurlを新しいものに書き換えよう。
するとパスワードを入力後にちゃんとダッシュボードへアクセス出来るはず。

最後に色々とファイルのパーミッションとかがおかしいはずなので、
CORESERVERの管理画面にあるツールから『ファイル所有者の修正』を実行しておこう。
数分経ったらファイルのパーミッションをこれまでのサーバーでの設定と同じように変更。

プラグイン等を有効化したら移転終了だ。

インターネットをするためのブラウザの一つである『Google Chrome』。
このブラウザの良い点はダントツに速いと言う事だ。
最初の起動、そしてページの表示が抜群に速い。
拡張機能を追加しても重くならないらしい。

で、そのChromeにはFirefoxのように拡張する事が出来る。
これら二つを比較すると、Firefoxはかゆいところに手が届くレベルまだ拡張でき、
Chromeはかゆいところに手を届かせるために孫の手が用意されている程度。
とは言うもののインストールした直後に比べるとかなりいじれる。

今回は僕が入れている拡張機能をメモ程度に書いておこうと思う。

Google Chromeに入れている拡張

『AutoPatchWork』
まずはFirefoxのAutoPagerizeに相当するもの。
どんなものか知らない人はこれを入れた後グーグルで検索してスクロールしていくとわかる。
おそらくいつまで経ってもスクロールが終わらないと思う。

『Context Search』
次は選択した文字列をグーグルやwikipediaで一発検索したり出来る拡張機能。
検索欄にコピペがめんどうな人は入れておくと幸せになれる。

『Drag and Go』
上の拡張機能の発展したような拡張機能。
文字列を選択しドラッグするだけで新しいタブに検索結果を表示することが出来る。
どちらか好みのモノを入れておけばOK。

『Google Mail Checker』
名前の通りgmailを管理するための拡張機能。
なんだかんだでgmailにはお世話になっているので入れている。

『Reader Plus』
Google Readerを超便利にする拡張機能。
設定が大量にある上に英語なので面倒なんだけど、僕はLayoutの中のIntegrated previewとColorful listviewを有効にしている。

『Mouse Stroke』
マウスジェスチャー用の拡張機能。
マウスジェスチャー用の拡張機能はたくさんあるんだけど、僕はこれを入れている。
理由は一番最初にこれを見つけたから。
設定も細かくできて特に不満は無い。

『Speed Dial』
新しいタブを開いたらそこにお気に入りを表示出来る拡張機能。
Chromeはイマイチお気に入りが使いにくい。
大体の人はお気に入りがたくさん登録してあってもよく見るページは数個だと思うので、
この拡張機能で十分に役立つはずだ。

これ以降は入れなくても良いけどあったら面白いもの

『SearchPreview for Google』
googleの検索結果の画面でプレビューを表示する事が出来る。
開いて見るとまったく関係が無かった、みたいなことを減らせるのではなかろうか。

『ニコニコ　プレイヤー Chrome版』
ニコニコ動画を便利にする拡張機能。
プレミアム会員だと自動再生も相まって、非常に便利に使いこなせる。

『Bubble Translate』
文字を選択することで翻訳を行える拡張機能。
ぼちぼち便利かな。　

『twitterのbotなどで OAuthを使う方法（PHPバージョン）』へたくさんの人が来られるのでその誘導用記事。

まずtwitterに登録しよう

bot用のOAuthの設定を始めるに当たってtwitter側で登録する必要がある。
botのアカウントでtwitterにログインをした状態で以下のリンクへ。
『Twitter Applications | dev.twitter.com』
すると下の画像のようなアプリケーション一覧画面になる。
まだOAuth用の登録をしていないなら一覧には何も表示されません。

画面右側にある『新しいアプリケーションを登録する』をクリック。
そうすると下のような設定画面がでて来る。

設定してアプリケーションを登録した後、アプリケーション一覧画面へ戻る。
登録したアプリケーションの画像をクリックすると個別の情報ページへと飛ぶ。

モザイクかけてあるところが秘密にするべき情報。
bot用の設定ならばCallback URLは空欄だ。
この画面の中の『Consumer key』と『Consumer secret』が今回OAuthを使うのに必要なもの。

そして画面右側にある『My Access Token』をクリック。
そうすると『Access Token』と『Access Token Secret』が発行される。

これら4つのランダムな文字列を使ってOAuth用のプログラムを動かす。

プログラムの準備をしよう

まず、『abraham’s twitteroauth at master – GitHub』からプログラムをダウンロードしよう。
バージョンは0.2.0以降のものをダウンロードする。βが付いてるけど動くみたい。

ダウンロードし解凍した中の『twitteroauth』フォルダの中の『OAuth.php』と『twitteroauth.php』を使ってbotを動かす。
それら二つをbotと同じ場所にコピペだ。

動作テストの例としてAPIを使うサンプルを少し詳しく紹介。
『http://api.twitter.com/1/statuses/mentions.xml?count=30』の内容をモニョモニョする。
PHP5以降が必須です。

<?php
// twitteroauth.phpを読み込む。パスはあなたが置いた適切な場所に変更してください
	require_once("twitteroauth.php");

// Consumer keyの値
	$consumer_key = "consumer_key";
// Consumer secretの値
	$consumer_secret = "consumer_secret";
// Access Tokenの値
	$access_token = "access_token";
// Access Token Secretの値
	$access_token_secret = "access_token_secret";

// OAuthオブジェクト生成
	$to = new TwitterOAuth($consumer_key,$consumer_secret,$access_token,$access_token_secret);

//APIを呼び出す（今回はリプライを30件取得する）
	$result = $to->OAuthRequest("http://api.twitter.com/1/statuses/mentions.xml","GET",array("count"=>"30"));
//扱いやすくする
	$xml = simplexml_load_string($result);

//foreachを使い処理をする
	foreach( $xml->status as $value ){
		$status_number = $value->id;	//個別発言のステータスナンバー
		$text = $value->text;	//発言内容
		$screen_name = $value->user->screen_name;	//発言者のtwitterID

		//各発言を表示する（botだと$textに特定文字列がある場合リプライするとかの処理を入れる）
		echo $screen_name . "さんから＠が飛んできました。<br />";
		echo "発言内容は" . $text . "で、その個別ページはhttp://twitter.com/" . $screen_name . "/status/" . $status_number . "です。<br />";
		echo "<br />";
	}
?>

コードの上にマウスを持ってくるとコードの右上の方にプリンタの画像とかが出てくるので、
その一番左にあるプレインテキストの画像をクリックすれば別ウインドウにコピペしやすく再表示されます。

以上で解説は終わりです。
何か質問があればコメント欄へよろしくお願いいたします。

このブログは結構写真を載せている。
元画像から縮小して小さくしているものの、そのサイズは大きく表示が遅くなっている。
そこで今回紹介する画像の遅延読み込みをするためのjavascriptプラグインの出番である。

ダウンロード

『Lazy Load Plugin for jQuery』
英語のサイトだけど下の方にスクロールするとdownloadがあるから、
sourceの方でもminifiedの方でも好きな方を右クリックでダウンロードしよう。

なぜこのプラグインなのか？

このプラグインを選んだ理由を書いておこう。
画像関係のプラグインでlightboxって言うのがあって、これは画像をクリックすると『うにょ～ん』と画像がポップアップしてくるやつだ。
そのlightboxで僕が使っている『WordPress用lightboxプラグイン作ってみた』と共存できるのが一番の理由だ。
今回紹介した以外の遅延読み込みに関しては『画像の遅延読み込み』を参考にして貰えば良いと思う。

使い方

このjavascriptはjQueryって言う物も必要だ。
ブログで既に使っている場合は良いんだけど、まだの時は以下のコードをヘッダー内に追加しておこう。

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1");
</script>

『Lazy Load Plugin for jQuery』をダウンロードしたら、アップロードしそれを読み込んで実行するコードも追加する。

<script type="text/javascript" src="http://www.example.com/js/jquery.lazyload.mini.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("img").lazyload();
});
</script>

基本的にはこれで終了。example.comの部分は自分の環境に合わせて変更してね。

おまけの設定

この画像遅延読み込みには設定が少し出来る。
詳しくはプラグインの名前で検索してもらうとして、僕が設定している物を紹介しておく。

<script type="text/javascript">
$(document).ready(function() {
    $("#left-col img").lazyload({
        placeholder:"http://www.hosimitu.com/img/grey.gif",
        effect:"fadeIn"
    });
});
</script>

まず、『$(“#left-col img”)』だけど、このブログの記事部分だけにこのプラグインを有効するための記述。
サイドバーとかフッターとかはこのプラグインによる遅延読み込みがされないようにした。
htmlでいうid=”left-col”の部分だけに適用されるのだ。

次に『placeholder:”http://www.hosimitu.com/img/grey.gif”,』だけど、これは画像の遅延読み込みをする前に置き換える画像を指定している。
基本的に設定する必要がない物なんだけど、設定しておくと画像が読み込まれる間もブログの記事がさみしくなくなる。
ペイントなんかを使って1×1の大きさの画像を自分で用意すればOK。

最後の『effect:”fadeIn”』は画像の読み込みが終了した時の表示方法の指定だ。
フェードインする設定にしたんだけど、その理由はその方がカッコイイと思ったからです。

これまでトップのタイトル画像はphpを使ってランダムに表示していた。
phpでランダムに表示する前はjavascriptを使って表示していたんだけど、今回またjavascriptに戻した。

なぜまた差し替えたかというと、少しでもブログの記事部分の表示を速くしようと思ったからだ。
javascriptで作られた物の中に『jQuery』って言う物がある。
それを使うとページの骨格が表示された後に遅れて画像を読み込むと言う事が出来る。
今回それを利用してみた。
なので今回のものはjQueryがすでに読み込んであるものとして話を進める。
読み込んでない場合はヘッダー部分に以下を書き加えておこう。

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1");
</script>

ダウンロード

トップ画像ランダム表示するjavascriptをダウンロードする

使い方

まずヘッダーかフッター部分に上でダウンロードした『jquery.topimagerand.js』を読み込む。
そしてつぎに実行する部分を書く。

/* 読み込み */
<script type="text/javascript" src="http://www.example/js/jquery.topimagerand.js"></script>
/* 実行する部分 */
<script type="text/javascript">
$(document).ready(function() {
    $('#header').topimagerand();
});
</script>

『http://www.example/js/jquery.topimagerand.js』の部分は自分のブログに合わせてください。
『#header』は『id=”header”』の場合で、『class=”header”』の場合は『.header』となる。
画像をランダムに表示したい場所に合わせて書き換えてください。

これで終了、と思わせておいてまだ続く。
『jquery.topimagerand.js』をテキストエディターで開いて、使用するタイトル画像のURLを書き加える必要がある。
11行目くらいにある下の部分を書き換えよう。

	img[0] = "トップ画像 その１";
	img[1] = "トップ画像 その２";
	img[2] = "トップ画像 その３";

画像をもっと使う場合は数字を増やしていくだけでOK。
そして以下の部分も自分のブログに合わせて書き換える。

target.append('<a href="ブログのホームのアドレス" title="ブログタイトル"><img src="' + img[no] + '" border="0" alt="ブログタイトル" /></a>');

これで一通りの設定等は終わりです。