portal shit!

ポータルシットはXREAのレンタルサーバーで動いてたんですけど、1月2日からのサーバー障害から復帰すると、なんとデータが全部吹っ飛んでました。参ったなこりゃ。

障害情報 に

[2010/01/05 01:00] 復旧いたしました。ディスクチェックの際、データの整合性が取れず、、ディレクトリ・パス情報が欠損したファイル郡が出ており、お客様によってはファイル が異常になっている場合があります。それらの情報は管理ディレクトリに格納しておりますが、ファイル名、上位ディレクトリ名がわかれば、復旧可能な場合が あります。現在も作業中ではございますが、ご確認のほど、よろしくお願い申し上げます。ご連絡いただければ、復旧可能な場合は、別の場所にコピーさせてい ただきます。

とあるのでサポートに問い合わせてみたのですが、いきなり「障害時のデータ復旧は免責事項」という返信がやってきてびっくりしました。ごねる隙すら与えてもらえませんでした。

XREA相手に文句を言ってもデータは戻ってこないし、かといってこのままXREAを使い続けるのは癪なのでレンタルサーバーを引っ越すことにしました。hetimaさんのブログで読んで良さそうだなぁと思っていたDreamHostにしてみました。sshでサーバーに接続できて、MySQLにもコマンドラインでアクセスでき、さらにはPHPを自分でカスタムインストールできるらしい。至れり尽くせりです。

XREAは安かろう悪かろうなサーバーだとは聞いてはいたんですが、自分はこれまでトラブルにあうことなく3年近く使っていたので油断していました。MySQLのデータもカスタマイズしたP_BLOGのファイルもろくすっぽバックアップとってなかった。夏頃、githubにちらっとソースをアップしてたときのファイルが残っててそれを元にサイトを構築しなおしたので、夏頃の外観・サイト構成になっております。というわけでお見苦しいところも多々ありますがご了承ください。

なおDreamHostにはgitもインストールされてるので、これに懲りて今度はちゃんとバージョン管理とバックアップを行おうと思った次第です。

思いつきでこのサイトをHTML 5でマークアップしてみました（ここはIE6とかは切り捨ててどんどん新しいものを試す実験場にしていこうと思ってるので）。accesskey属性とかrev属性とかいくつか削除しなきゃいけないものがあるけど、Firefox、Safari、Opera、Chromiumでは正常に閲覧できてます。ちなみに大したことはしてなくて、<header> とか <nav> とか <article> みたいなHTML 5に特有の新しいタグを書き足して、冒頭の文書型宣言をそれっぽく書き直してみただけです。動的コンテンツとかないので効果は？ですが、自己満足は出来ました。

関連

• YouTube HTML5 Demo
  Firefox 3.5b4では動画再生できませんでした。Safari 4でならいけます。
• HTML 5 ― HTML 4 からの変更点
  ここを参考にしました。

Tribe Called Questの人のことじゃないよ（古）

ToolTip系のPlug-inはブログを作ったばかりの結構最初の頃から長いことArekorePopupを使ってました。透過やtext-shadowが美しいのでいまでも好きなんですけど、SafariがVersion 3.xになってからポップアップの位置がずれるようになった。誰か解決方法をブログに書いてないかなーってずーっと探してたんだけど、なかなか見つからない。

さらに先日、Googleの（Googleとは直接関係ないらしい）Chromiumを試してみたところこちらでもArekorePopupの表示位置がずれる。どうやらこれはSafariに固有の問題じゃなくてWebKit系全般の問題のようだ。

ArekorePopupは長らくバージョンアップとかされてないし、jQueryのプラグインに似たようなやつがあったので思い切って外してみることにした。それがこのqTipってやつです。

qTip - The jQuery tooltip plugin - Home -

qTipの特徴はと言いますと、

• スタイルを簡単にカスタマイズできる
• 透過pngとか画像を使ってなくて完全にCSSとHTMLだけでスタイリングされてる
• クロスブラウザなのでIEのこととかなんも考えずに使える
• ファイルサイズが小さい
• APIとかが充実しててカスタマイズ魂を刺激する
• 画像とかHTMLもポップアップで表示できるらしい

text-shadowとか背景の透過表示はできないところがArekorePopupに負けてますが、ToolTip自体の表示位置だとか矢印の表示位置を激しくカスタマイズできるのが結構良い感じです。

ちなみにこのブログでは以下のように記述して使ってます。

$("a[title], img[alt]").qtip( {
	style: {
		padding: 5,
		background: '#191919',
		color: '#FFFFFF',
		title: {
			'font-size': 10
		},
		border: {
			width: 7,
			radius: 5,
			color: '#191919'
		},
		tip: 'topLeft',
		name: 'dark' // Inherit the rest of the attributes from the preset dark style
	},
	position: {
		target: 'mouse'
	}
});

実は密かに別のサブドメインにMovable Typeを設置して、映画の感想をぼちぼち書いてました。このブログのアクセスログを見ると映画の感想はほとんどアクセスがないので、今後は別の場所に分けることにしました。映画専用ブログの方では劇場公開だけでなくDVDで見た映画の感想もわしわし書いていこうと思います。人に見せるためのものっていうより自分で後から「あー、あの映画何だったっけ？」ってときの記憶の引き出しのとっかかりにするために。

そんなブログに興味のある酔狂な方はこちら。

http://cinema.portalshit.net/

cinema.portalshit.net

CSS書き直した。

↓

透過pngをいっぱい使ったのでIE6では酷いことになってると思う。というか、CrossOver MacのIE6ではとんでもないことになってた。でもそういうのもひっくるめてインターネットだと思う。そういうわけでまだIE6を使っている人はFirefoxかGoogle Chromeをダウンロードしましょう。

創意工夫点

:before と :after を使って、画像を使わずに記事タイトル横にサークルを表示するようにしてみた。あと、blockquoteでも同様に “ と ” を表示するようにした。頑張れば画像を使わなくても粘れることが分かった。

サイドバーを消してwidthを1024pxにしたことも新しい試み。最近はiPhoneの影響か、サイドバーを表示しないサイトが増えてる。代わりにフッターにナビゲーションっぽいのを配置するのが流行りっぽいのでそれっぽくしてみた。

↑の通り、ランダムで一枚Flickrの写真を表示するんだけど、結構懐かしい写真が表示されたりして、自分でブログを読むのが楽しくなる。撮った写真はアップロードしておくもんですな。

そういえば2ヶ月くらい前からreCAPTCHAを使うようにしてみたんですけど、これが見かけ倒しで全然動いていない :-! ぶっちゃけるとこれをスルーしてもコメントできちゃいます。ちなみにreCAPTCHAとは何かというと、画像認証システムですね。スパムbotとかを排除するための機構で、Twitterのサインアップ画面でも採用されてますね。画像認証システムはいろいろありますけど、reCAPTCHAが他と違うのは本のテキストの読み取り判定精度の向上にも貢献できるところ。くわしくはこちらなどをご覧下さい。

秋元@サイボウズラボ・プログラマー・ブログ: reCAPTCHA - キャプチャを利用した人力高性能OCR

labs.cybozu.co.jp

あとこれ、ブログシステムに依存しないタイプのサービスなのが凄いですね。自前で判定用の画像生成したりする必要ない。僕のスキル不足のせいで残念ながらきちんと動いてくれてないんですけど、かなり便利なサービスだと思います。

　最近、古い記事にコメントをもらうことが多い。一度、記事公開後2年くらい経過したP_BLOG関連の記事にとても参考になるコメントをもらったことがあったけど、そういう例外を除いて基本的に的外れなコメントや、記事が書かれた日付や前後の記事を読まずに思いつきで好き放題書かれたタイプのものが多い。こういうコメントの主はだいたいまともにレスを付けても書きっぱなしで返信を確認しに来ない人が多いし、匿名で好き放題書かれるコメントってのはなかなかイライラする。そういうわけで公開してから60日間が経過した記事のコメント欄は閉鎖することにした。どうしても反論や突っ込みを入れたいときはForumに書いてもらうか、トラックバックを下さい。