メイン | 2006年08月 »

2006年07月 アーカイブ

2006年07月15日

はじめに

このblogは、F's Garageというblogで公開した実験的に作ったものは研究的な成果をまとめるために作ったblogです。

また新しく何かを行ったときにご報告するblogでもあります。
このblogがあることで、自分が何かをやらなくてはいけないと思うためのblogでもあります。

まとまって完成されたサービスなどをプライベートで作り上げるのは苦手ですので、技術の断片を思いついたときに、さくっと実験モジュールなどを作り上げてアウトプットしていこうと思っています。

よく最近の技術は変化が速いと言われますが、突然何かが起きるのではなく、むしろ「すべての変化は連続的である」という考えを大事にし、今、役に立たなくても、数ヶ月後、数年後に生きてくるような技術のかけらを積極的にフォローアップしていくことが重要だと思っています。

今は、がらくたでも将来役に立つことを狙うという意味で、「がらくたラボ」という名前をつけました。
明日のはてなブックマークよりも、数ヶ月後にgoogle検索から見つけられることを大事にしたいと思っています。

2006年07月17日

Gyaoの動画を全画面で見る

Gyaoのプレーヤーはよくできていますが、大画面TVなどに動画を表示している人は、できれば全く枠が表示されない全画面再生で見たいものです。

ちょっとだけ手間はかかりますが以下の手順で可能です。

1.以下のブックマークレットをお気に入りに登録しておく。(リンクの上で、右クリック>「お気に入りに追加」(JavaScriptの中身は、右クリック>プロパティで確認できます。))

GyaoプレーヤーでWMPの右クリックメニュー有効化

2.動画プレーヤーを開き、とりあえず再生を始める。

次は、1番で登録したブックマークレットを実行するためにメニューバーから、ブックマークレットを選択したい。そのためには同じURLを別の画面を開くと良いのだが、そのために以下の操作をする。

3.通常のページなら同じ内容のページを別のウインドウで開くためには、「Ctrl + N」を押せば良いのだが、Gyaoの動画プレーヤーはCtrl + NもJavaScriptで無効化されているらしい。そこで、F5キーを何度か押して画面をリロードしながら、Ctrl + Nを押しているとたまに開くことがある。(推測だが、JavaScriptでCtrl + Nのイベントを無効化する前にウインドウを開くということなのかも)

4.別ウインドウで同じ動画プレーヤーが起動するとメニューバーが表示され、1番で登録したブックマークレットを実行すると、Windows Media Playerのメニューが表示される。

5.この状態で動画エリア上で右クリックをすると、右クリック禁止よりも優先的にWindows Media Playerのコンテキストメニューが表示されるので、「プロパティ」を選ぶ。

.プロパティに長々とした動画のURLが表示されているので、このURLをコピーして、同じIEのアドレスバーに貼付けて、ENTER(同じブラウザのアドレスバーに貼付けるというのがポイント)

6.別途Windows Media Playerの単体プレーヤーが起動し、そちらで先ほどの動画が再生されれるので、あとはWindows Media Playerの動画上で右クリックして全画面表示にすることができる。


理屈がわかっていればさほどたいした手順ではないのですが、この手順だけ追うと結構面倒ですね。きっともっと簡単なツールがインターネット上にはあると思うので探してみてください。

Ctrl + Nも無効化できるんですかね。知りませんでした。
キャンセルできないのは、F1とF5だけなんですかね。

iPod用動画変換スクリプト

2005年10月に公開したVB Scriptです。パソコンのTVキャプチャカードが出力したMpeg2やYouTubeからダウンロードしてきたflvファイルを、自動的にiPod用の動画ファイルに変換し、なおかつpod castingでデータを取得できるようにRSSとindex.htmlを出力するようにしたものです。

詳しくは下のページで。
iPod動画作成メモ5:iPod用動画変換スクリプトダウンロード


2006年07月26日

RSSチェッカー kikimimi

2005年の9月に公開した、RSSのタイトルをチェックするWidgetの「kikimimi」です。
Mac OS XのDashboardというサブデスクトップのような領域にセットして動作します。

kikimimi_ver10.jpg

Mac OS XのDashboardは、ボタン一つでデスクトップを切り替えるように表示できるのが特徴です。いろんなwidgetが作り込まれていますが、Macのwidgetは瞬間的な情報のチェック用途が一番向いていると思ったので、RSSでインターネットの最新情報が手に入るものが良いと思って作りました。

はてなブックマークのhot entryのような速報系のRSSをチェックするのに向いています。

テクノロジとしては、JavaScriptで作られています。RSSの読み込みをXMLHttpRequestを使っているため、いわゆるAJAXアプリと言えます。

今後はRSSから取得した動画もここで再生できるようにするのもアリかなぁとは思っています。密かにWindowsIEで動くものも作っています。blogに張って会社にいても使えるようにしようかと考えています。

こういうRSSの使い方の将来ですが、RSSをインターフェースとして、いわゆる電光掲示板みたいなシステムがあったら面白いんじゃないかなぁとは思っています。ペパボがpaipoリーダーで配布しているRSSティッカーみたいなもの。あぁいうのは今後、別の切り口のシステムで、さも新しい概念のように流行って悔しい思いをしそうだなぁ、と漠然と思ったり。

kikimimiのダウンロードはこちらから。
kikimimi (RSS Checker) for Dashboard

FlashおよびAjaxを戻るボタンに対応する

2006年の3月に公開した情報で、FlashやAjaxで画面遷移した先の画面から戻ってくるときに状態復帰をしてあげる方法です。

location.hashを使ってflashの状態保持をするサンプル

セキュリティを気にする必要がない情報に限られますが、URLのlocation.hashの所にJSONのオブジェクトデータを貼付けてあげれば、戻るボタンで戻ってきた時に状態のデータを復帰することができるというアイディアです。

上記リンクのサンプルは文字列エンコードとかは、気にしていないので日本語が文字化けするとかはありそうですが、状態変数なら問題ないですね。

また、Flash Playerを出力するところをJavaScriptでdocument.writeしてあげるなら、FlashVarsに値を入れてあげることで比較的古い環境でも状態を復帰してあげることができます。いずれにせよIEの特許対応で、Objectタグをdocument.writeしなくてはいけないのですから、その辺は問題ないですよね?

カラメルのAjaxとgoogle mapsを組み合わせた「地図検索」で地図上のショップを呼び出すためのパーマリンクとしても使えます。

オモコロショップはココ!


ちなみに今日気がついた、location.hashを使う際の注意点ですが、他のリンクで、<a href="#" onclick="func()">なんてのをクリックされたときにURLの後ろに#がついてしまって、こいつがあるとlocation.hashの値がnullにならないので、必ずJSONオブジェクトのチェックはしましょうね。JSONはオブジェクトの生成に失敗したときにfalseを返すようなので、戻り値をチェックすれば回避できます。(え、普通にチェックするって?(すんません))

参考元記事:FlashおよびAjaxを戻るボタンに対応する[Web系]

JavaScriptによるwindowマネージャの研究

2006年の2月ぐらいにひっそりと公開していたものですが、JavaScriptによるWindowマネージャを作ってみました。script.aculo.usを見ていて、こういうの簡単にできそうだなぁと思ったら案の定簡単でした。

簡易Windowマネージャ

このサンプルではファイルの拡張子に応じて最適なHTMLテンプレートを選択して描画しています。

外枠のWindowはJavaScriptを使ってレイヤー管理されています。Windowsマネージャというとおりウインドウ間の重なりも管理しています。(重なり制御は、ちょっと怪しい)

ウインドウ重なりの制御は、Flash MX 2004 Professionalに添付されていたWindowコンポーネントでやっていることを参考にしています。

なお外枠のウインドウは、Jemplateを使ってテンプレート化しているのでデザイン変更があっても簡単に反映することができますし、document.writeでダラダラとHTMLを書くような作業は不要です。

なおこのサンプルで考えたのは画像やFlash、動画を動的に読み込むことでマルチメディアビューワーみたいなことができるんじゃないかなぁと思っています。

カラメルでは、このソースを流用しヘルプウインドウなどに使っています。
カラメルの画面上に丸い「?」のアイコンがあるのですが、それをクリックすることで表示されます。

カラメルを見る

カラメルの方はウインドウをドラッグできないように変更し、代わりに画面上のどこをクリックしても開いているヘルプウインドウが閉じるようにしていますが、こういうのが簡単に変更できるのもシンプルなレイヤーコンポーネントが故のポイントだと思います。

2006年07月31日

自宅のFedora Core5で作るF's Garage

F's GarageのMovable Typeが非常に重くなってきて、1エントリをアップするだけでもタイムアウトで500エラーになってしまうことが多くなっていたので、レンタルサーバの環境ではキツいなぁと思い始めて、自宅サーバに移行しました。

F's Garageは、blogというよりも、カテゴリ毎に記事が登録されたWebサイトとしてユーザビリティを重視し、1エントリ毎にそのエントリが所属するカテゴリの全タイトルを表示するようにしています。当然エントリ毎に所属するカテゴリは違いますから、1エントリをパブリッシュする毎に大量のデータベースアクセスが発生するプラグインを入れています。これがタイムアウトの原因だと思うので、迷惑のかからない自分専用のサーバに移行する価値はあると思いました。

■サーバ本体
サーバ本体は、DellのPowerEdge SC430を使っています。

サーバとしてはびっくりするぐらい静音で安価なマシンなので自宅利用に最適です。

自宅サーバと言えば自作マシンを流用することが多いですが、やはり24時間連続稼働となると、どこのQAを通ったのかわからない電源を使うのは怖いものです。僕も何年か自作マシンで24時間連続稼働してましたから、現実は概ね問題ないことは経験しているものの、やはり企業ユース前提で作られたにも関わらず非常に安価なDellのサーバは精神的に安心という部分でオススメしたいところです。

僕が持っているのは、CPUにCeleronを積んだ奴で、64bit版のFedoraCore5をインストールしました。何のはまりもなく、さくっとインストールできます。Celeronは絶対金額を低く抑えることができるのと、かつ性能が十分という意味で、個人で使うサーバなら十分だと思いますが、たまに安く出回るPentiumD搭載機もうらやましいです。

以下、サーバ公開にあたってFedora Core5でやったことです。

■ドメインの取得
milkstand.netは、お名前.comで取ったのですが、シンプル操作という意味ではムームードメインの方が簡単で、値段も安いのでオススメです。

お名前のコンパネは、リンクのクリックを間違えるとすぐ認証外の画面に行ってしまい何度も認証しなきゃいけなかったのが面倒でした。

■固定IPの取得と、DNSの設定
うちはBフレッツのマンションタイプですが、この状態で固定IPを取得するためにInterlinkの固定IPプランに加入しました。
InterlinkのZOOT for Bフレッツ


インターリンクは池袋にある会社で、僕がインターネットを初めて接続料固定のISPとして加入したところで、比較的思い入れがあるISPです。その昔、会社の住所を歩いて探してみたら、普通の実家SOHOみたいなところでびっくりした記憶があります。

そんな会社さんも今ではサンシャインに会社を構えているようで、過当競争と言われるISP競争で生き残ってきた一社と言えます。ペパボにいる自分としては存在として親しみを感じる会社です。

今は固定IPに力を入れていますというブランディングをしていて、8個の固定IPが7000円ぐらいで取得可能ですが、月2000円ほどの利用料でも固定IPを一個もらえるのでそちらを契約しました。niftyを解約せねば。

参考1-1:外部/内部向けDNSサーバー構築(BIND)
参考1-2:実用 BIND 9で作るDNSサーバ

セカンダリDNSは、参考1-1に書いてあったマイハマネットという無料のセカンダリDNSサービスを使わせていただいています。セカンダリDNSさえ解決してしまえば、後のサービスはNATでポート毎に必要なサーバに飛ばせば良いハズなのでサーバの冗長化をしたくなるまでは固定IP一個で困らないと思います。

マイハマネット


■SSHを公開鍵を使ってログインするように変更
数年間、自宅サーバをインターネットに晒した状態で、SSHはIDとパスワードの組み合わせにしていても特にハッキングされたことはありませんでしたが、現実には数分毎にrootへの謎なアクセスがあったのは間違いないので、URLを外に公開することもあり鍵交換方式でログインするように設定しました。

鍵交換方式とは、接続元のターミナルソフト(puttyが代表的なターミナル)に秘密鍵を入れておき、サーバ側に設定された公開鍵と組み合わせて、暗号化した状態でログイン認証するもの。これにより秘密鍵を持たないPCからはログインできなくなります。

鍵交換方式の設定方法は、ssh+公開鍵でぐぐるとたくさん出てくるので、それを参照すること。

注意点は、puttyで暗号化したキーは、Fedora CoreやMac OSXのターミナルからsshコマンド(openssh)を使ってログインする場合とはキーの仕様が違うので注意。

その辺の説明は、上記リンクの先のあちらこちらに説明してあるので、そこを参照してください。要は、puttyのキー生成ツールは両方の鍵文字列を生成してくれるので、puttyとopensshで使い分けるようにするだけなんですけどね。

また、Fedora CoreのSSHはインストール状態でrootログインが可能なので、rootログインは必ずできないように設定すること。知らなくてびびりました。

参考2-1:SSHサーバー構築(OpenSSH+Chroot)


■バーチャルドメインでメールサーバ構築
milkstand.netを移転する前に、このblogのURLであるf-shin.netというドメインを使って構築しました。milkstand.netは普段使っているメールアドレスのため、ある意味クリティカルであり、適当に移行して失敗しましたというのは避けたかったので、一旦、別のドメインで構築して正しく動くことを確認してからmilkstand.netを移行することにしました。

そのため複数のドメインは元々使うつもりだったため、バーチャルドメインで設定しておく必要がありました。

SMTPサーバには、比較的慣れているPostfixを使いました。
POP/IMAPサーバに、Dovecotを使いました。Dovecotは単一ドメインであれば、びっくりするぐらい簡単にIMAPのサーバを立てることができます。

注意点としては、Dovecotのバーチャルドメインの設定というか認証で若干苦労しました。PAMというUnixの認証apiを使って認証しようとしたのですが、その設定ファイルの書き方がよくわからず苦労しました。というか、メールアカウントのためにUnixアカウントを作りたくなかったので、Unixユーザーを追加することなく複数のメールアドレスを設定する具体的な方法が見つからなかったんですが、詳しくは以下の参照を見てください。

参照3-1:基本的なPostfixとDovecotの設定を知ることができます。
メールサーバー構築(Postfix+Dovecot)
参照3-2:Postfixの側のバーチャルドメインの設定
Postfix バーチャルドメインホスティング Howto
Postfixのドキュメントはわかりやすくて良いですねー。かなり素敵です。
参照3-3:Dovecot公式wikiの日本語訳
基本的に鳩派。
これはとりあえず。
参照3-4:本家の公式wikiのバーチャルユーザーの設定方法
Virtual Users
上記を読んで、どういう設定が必要だということはわかりましたが、僕はもうちょっと無知みたいで具体的な設定方法について悩みました。

ここからしばらくLinuxドキュメントのUser Authenticate HOWTOなどを読んだんですが、よくわからず・・・。

結局、以下のサイトを見つけて設定をコピーしました。
参考3-5:dovecot
ただし、こちらのサイトのように、プレーンテキストではパスワードを保存してはいませんので、そこは適宜読み替えが必要だと思います。

この辺は、ちょっと説明しにくいですね。一通り、通して認証について考えていかないと、良い結果には、たどり着かないような気がします。ただ、情報のつながりがわかりにくいだけで、決して難しくはないのでがんばってください。なおPAM以外にDBに認証データを保存する認証、LDAPを使った認証などいろいろ可能です。

■バーチャルホストでWebサーバ構築
この辺は、いくらでも情報が見つかるので基本的に省略します。

参考5-1:Apache の IP ベースのバーチャルホストサポート
参考5-2:cgi-binをバーチャルホスト毎に設定する方法

■MT2.6の移動
milkstandで使っているMTのバージョンは2.6です。
このバージョンからはパーマリンクを変えずにMT3.3には移行できないので、MT2.6をまるごと移行することにしました。

はまった点:
・mysqlの文字コード
rpmでインストールしたmysqlはデフォルト文字コードがUTF-8ではなかったため、PHPMyAdminでエクスポートしたSQLをそのままインポートしたら文字化けしました。そのためcreate databese時に、文字コードをutf8にする一文を追加しました。

CREATE DATABASE MTのDB名 CHARACTER SET utf8;

また、MovableTypeがDBからのデータを読み出す時に同様にうまく読み出しができなかったので、強制的にcharsetをutf8にするように設定しました。

参考6-1: PHPとMySQLの個人的まとめ

・mt-blacklistを入れてると「Byte order is not compatible at ../../lib/Storable.pm」が出てうまく動かない件
mt-blacklistのサイトってもうサポート辞めちゃったんですね。MT3.3に移行してくださいという言葉を残して本家サイトが閉鎖状態になっています。

が、そうも言ってられないので、とりあえず今まで通り動かそうとうするとByte Orderなんちゃらというエラーがログにはかれうまくコメントなどができませんでした。

これは、元々32bit版のLinuxで動いていたMTを64bit版のLinuxに持ってくると起きる現象だそうです。

直す方法は、以下参照なのですが、

参考6-2:Migrating MovableType to a 64 bits machine.

え~と、直す方法は、「mt_plugindataの中身を消せば良い。」

ただし、mt-blacklistが初期化されてしまうので再設定をするわけですが、僕がやったらmt-blacklist.cgiが無限リダイレクトループになってエラーになったので、mt-blacklist.cgi関連ファイルの中で、mode=__configにリダイレクトしている部分をコメントアウトして強制エラーを起こすようにしたら、なんとか初期化することができました。


■完了後の性能評価
本当は、上記以外にパーミッションであるとかオーナーであるとか、iptablesでポート開ける必要があります、とか、FedoraCore5では鬼門のSELinuxなどもあり、本当はもうちょっといろいろありますが、サーバの移行そのものに重要な内容は以上です。(僕はSELinuxはオフにしました。SAMBAがよくわからなかったので。)

そんなこんなで、それ相応に時間がかかり動き始めることができました。

そこでさっそくF's Garageのすべてのエントリをリビルドしながら、topコマンドを実行してみたのですが、やはり負荷は非常に重いです。

F's Garageは、ユニークのエントリIDは835ですが実際は600エントリぐらいかなと思うのですが、リビルド中のCPU使用率はmysqlとapache合計で100%になってしまい、mysqlとapache(perl?)でお互い40~50%の間でCPU使用率を取り合うと言った状況になって、4分間ぐらい時間がかかりました。

冒頭でも記述した通り、F's Garageは比較的DBアクセスが発生するプラグインを使っているので普通のMTで同じ数だけリビルドしても必ずこうなるというわけではないと思いますが、もはや占有環境に入れないと厳しいマシンパワーが必要になってしまいました。

■最後に
今回はMT2.6を直接持ってきてしまいましたが、やはり本来は、MT3.3でアップグレードしたいですね。
ただURLが変ってしまうのはよろしくないので、できれば今までのURLにアクセスがあったらリダイレクトしたいものです。

しかし、さすがに600から800もエントリーIDがカウントアップしている状態で、一つ一つ.htaccessにリダイレクト設定をするのは重労働です。そこで、以下のURLにて、.htaccessのリダイレクトテンプレートを作ることで自動化する方法があるそうです。

Movable Type file rewrite


これらの情報は、既にWeb上にある情報ばかりですが、それら情報を組み合わせて構築しましたという例です。これらの中でPostfix本だけは持っていますが、ある程度慣れていたせいもありますが、今回は特に見ることもありませんでした。

特に「Fedoraで自宅サーバー構築」の方の情報は非常に参考になり、ありがとうございました。FeforaCore5は、多分、iptablesがデフォルトで有効になっているので、こちらの設定などは参考になると思います。

About 2006年07月

2006年07月にブログ「がらくたラボ - Specialized F's Garage for Technologies -」に投稿されたすべてのエントリーです。新しい順に並んでいます。

次のアーカイブは2006年08月です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Powered by
Movable Type