2008年03月16日

ブラウザにオーバーレイするブックマークレットWidget各種

ブラウザの上に、ウインドウをオーバーレイして各種機能を実現するブックマークレットWidgetをここに紹介していきます。今後新機能が追加された場合は、ここに追記していきます。

(2008/3/23にcodereposへの公開を機にソースコードの構造が変わりました。恐れ入りますが、それ以前にブックマークされた方は入れ替えていただけますでしょうか。今までのURLはいずれ削除する予定です。)

WidgetというのはUIを伴った小さな部品という意味なのですが、ここで紹介しているものは、ブラウザ画面内をマウスドラッグで移動して、今見ているWebページに機能を追加するウインドウです。

以下のリンクをブックマークに登録したり、ブックマークバーにドラッグすることで使えるようになります。

どんな動作をするか?は試しにリンクをクリックしてみてください。


1.PHPの関数を調べる。

よくわからない関数名をコピペしたり、記憶の断片を下にphp.netの優れたヘルプをすぐに呼び出すことができます。

PHPの関数を検索

関連エントリ:
F's Garage:[update]PHPの関数をすぐに調べるbookmarklet


2.Webの文字列をExciteの英日翻訳に投げる。

マウスで翻訳したい英文を選択してブックマークレットを起動すれば、選択範囲を簡単にエキサイトの翻訳に投げることができます。

英日翻訳

関連エントリ:
F's Garage:[update]英日翻訳をするブックマークレット


3.選択文字を自動翻訳

5秒周期でマウスで選択した文字列を翻訳します。文章が日本語だったら日→英に、英文だったら英→日に自動判別して翻訳します。

英日、日英翻訳

3/23をもってgoogleの翻訳apiに変更しました。ちょっと試した限り、今までより高い精度の翻訳が得られると思います。

関連エントリ:
F's Garage:iPhone SDKを読み解くのに必須! Google AJAX Language APIを使ったブックマークWidget作った。


4.blogに書くリンクをさくっと作る。

link maker

blogのリンクを作る時に、blogのタイトルって選択しにくかったり、はてなスターを一緒に選択することになって、面倒だなぁと思ったりしませんか?

このブックマークレットは、今見ているページのURLとtitleから、適切なblog貼り付け用リンクを作ってくれるものです。


5.HTML内で別サイトを表示するインラインブラウザ

例としてgoogleを表示する

これはリンクの周辺にフローティングウインドウを表示して、その中に指定したサイトを表示するものです。

ブックマークレットとして使うのではなくblogエントリの中でリンクを張って使うことを想定しています。例えばリンク先のURLを資料としてだけ見せたいだけなので、わざわざ別ウインドウを開くまでもない、という時に使えます。


6.twitterにメッセージを送信するbookmarket

ブラウジングしてたり調べ物をしているときに唐突に何かをつぶやきたくなって、twitterに書き込みをしたくなることがあります。

ただの書き込み欲を満たしたいだけなのに、そこからtwitter画面を開いてしまうとついつい他の人の書き込みを見て余計な時間を費やすのもアレなのと、僕は便利なtwitterツールを使ってないので、さくっと書き込みをする手段が欲しくて、bookmarketでtwitter書き込み用のwidgetを作りました。

続きはこちらから→F's Garage:twitterにメッセージを送信するbookmarket



7.[まだ全然作り中]同一サイトリンクを抽出するbookmarket

link_finder

たまに大量のリンクが張られたページの中で、果たしてそのサイト内の本当のリンクは一体どこなのか?というのを知りたいことがあります。(エロ動画の騙しリンク回避とか)

そのサイトと同一ドメインのリンクだけを抽出するbookmarkletを作ってみました。まだ全然UIはイケてないですが、UIはさておき、目的は達成できているので公開してみます。

あと、同一ドメインで外に連れて行かれるURLにはOUTという文字が入ってることが多いので、「out」という文字がリンクに書かれていると無視するようにしました。

まだIE6では動かないっぽいので、FirefoxかOpera,Safariで動かしてください。


***今後やりたいこと。

・link makerはもっといろんなことができるような気がする。
 blog作成のツール群に発展させたい。
・パスワードマネージャが作れると思った。


***何か作ってみたい人へ

3/23にcodereposでソースコードを公開しました!

技術的にはウインドウ制御と、個別の機能を記述するファイルが分離しており、かつウインドウUIのテンプレートが分離されているプラグイン構造になっているので、簡単に新規機能を追加することができます。

こちらから取得いただけます。
http://svn.coderepos.org/share/lang/javascript/PluggableInlineWindow/trunk/


***利用について。
どうぞご自由にご利用ください。
何かに使ったら教えてもらえるとありがたいです。



2007年08月06日

SpryWidget拡張版ソースコード

長らくお待たせしました。
Web標準の日々「Spry Widgetでつくる入力フォーム」でご紹介した、改造版のSpry Widgetを公開いたします。

■当日のプレゼン資料
参考:「Spry Widgetでつくる入力フォーム」

■動作のサンプルページ
Spry Widget改造版 Sample

■改造データのダウンロード
spry_widget_1_5_kai.zip (76KB)

ダウンロードしたファイルの中には、サンプルページのHTMLと、変更したスクリプトが入っています。
ベースとなるSpry Widgetは、Dreamweaver CS3に同梱されているSpry Widget1.4ではなく、現時点で最新のSpry Widget1.5を改造しました。

スクリプトは、Spry Frameworkの入力フォームのSpry Widgetの部分のみが入っていますので、元のバージョン1.5との差分は、差分ツールを使うことで把握することができます。

差分を知りたい場合のツールですが、Windowsのお勧めは、df.exe
MacOSXは、付属のDVDからXCodeをインストールすると自動的にインストールされる「FileMerge 」というツールで差分を把握できます。



2007年04月08日

Twitterは携帯電話で決まりっ!

携帯電話(ケータイ)でtwitterをするためのサービスを作りました。

モバツイッター

特徴:
・携帯で使うために作られています。

・twitterは日本語送信でちょっと面倒なところがありますが、そういうのを全く意識することなく送れます。

・これだけあれば遊ぶのに困らないハズという機能を重視して、特定の人に返事を返す「@ユーザ名」もいちいち書かなくて良いようにしました。

レスしたい人の名前をクリックするだけで、「@アカウント名」を自動入力するようにしました。


auのW31Tで動作確認しています。
文字コードは、4/30にシフトJISに変更したので、ドコモの一部の機種などで表示できなかったのも見られると思います。
他のキャリアも何かあったら教えてください。

--------------------------------
やったこと
2007/04/09
apiをRSSからJSONに切り替えて、アイコンを表示。その他、画面調整

2007/04/10
みんなが登録してるURLをはてブに登録できるようにした。
とりあえず、はてなのサブアカを取って下記URLに保存するようにしました。
http://b.hatena.ne.jp/twitter

アカウント登録とか面倒でなくて、かつニーズがあるようなら個別のブックマークapiに対応しても良いかなとは思っています。

2007/04/12
友達一覧を表示するようにしました。マイページの最下部にリンクがあります。友達一覧のページで「最新に更新」を押すと、twitterから友達データを読み込みます。

自分のページや友達ページで、その人の顔写真アイコンが表示されるようになりました。
友達は、誰かの「友達一覧」で読み込まれたユーザーであればアイコンが表示されます。

2007/04/15
みんなが書き込んだURLをクリックしたときに、「携帯に変換して表示」をつけました。
今、自分が読んでいるblogや、はてなブックマークから送られてくるPC用のblog URLを携帯電話で出先から読むことができます。

2007/04/19
登録したログイン情報を削除する機能をつけました。
URLも無効になり、ユーザ情報もデータベースから削除できます。

2007/04/21
ダイエット記録やざんげ記録に「☆ったー!」開始!

ダイエット活動をまさに今始めようとする後押しに、みんなに宣言しましょう!
また、嫌なことがあって、頭の中にぐるぐる溜まっているぐらいなら、ザンゲったーでザンゲしちゃいましょう!次に進めますよ!!

2007/04/21
友達リストに、アイコンや場所、自己紹介を表示するようにしました。

2007/04/24
メッセージ送信時に自動で付加するフッター機能をつけました。
自分が今いる場所とかイベント名を付加しておくと、いちいち書かなくて良いですよ!

2007/04/26
サーバのメモリを増設しました。2.5GBもあるので、かなり大丈夫なハズ。

2007/04/28
ダイレクトメッセージ機能を追加しました。名前の後ろの[d]をクリックするか、友達ページに行ってメニューをクリックするとダイレクトメッセージが送れます。

またパケット代節約のためにプロフ画像を非表示にする設定を追加しました。

また、友達一覧に検索機能を追加しました。ダイレクトメッセージを送るときに友達を捜すことができます。

2007/04/30
・botのユーザーから、交通情報やはてブ情報など便利な情報がtwitterではゲットすることができますが、addするとログが流れてウザイという人向けに、フレンドリンク集「tMenu」を追加しました。
ついったー部のリンク集を参考にさせていただきました。

・URLをクリックした後の「携帯で表示」というのを今までgoogleのモバイルゲートウェイを使っていたのですが、モバツイサーバにインストールしたコンテンツ変換の仕組みに変えました。レスポンスが若干早くなったのと、ナビゲーションが使いやすくなりました。画像は非表示になっています。

・モバトゥイッターの文字コードをSJISに変えました。ドコモの一部のブラウザで見られなかったかのが回避されます。
また、メッセージ送信時に内容が空白になってしまうという指摘を受けていたのですが、これも修正されたと思います。

ただ、これにより文字コードの扱いが若干難しくなったので、トラブルがあったら、えふしん(twitterでは、fshin2000、メールアドレスは、f-shin@milkstand.net )までご連絡ください。その時携帯のキャリアと機種を教えていただけるとありがたいです。

・5/4にGPSの位置情報の入力に対応しました。
旅行先やカフェから、今、自分がいる住所を送信することができます。
オフ会などの二次会の場所を送信するなどの用途にも便利ですね。

なおGPSの位置情報を特別にデータベース等には保存することはしておりません。GPSの位置情報自体も、携帯電話の上でユーザーが明示的に位置情報の送信を行わない限り、モバトゥイッターの側で位置情報を知ることはできませんので念のため。(実際やってみるとわかりますが携帯電話側で、そのようなセキュリティ確認がでると思います。)


その他更新情報は、モバツイッター開発blogに書いていきます。

MovaTwitter開発者blog



2007年03月19日

F's Feed Search

本当はもっとディテイルにこだわってから、ここに書くつもりだったのですが、違うことをやりたくなったので、とりあえずメモ

milkstand.netのホームページには、drupalで作ったポータルページが設置されており、そこでは自分が書いているblogや、自分が収集しているblogの情報が一覧できます。

最近、ここの内容を調べたいと思うことが増えてきたので検索機能をつけました。

milkstand.netホームページ

今のところ、以下の情報を定期的に収集しています。
・はてなRSSで購読しているブログ
・pookmarkに登録している自分のブックマーク
・はてなブックマークのホットエントリーと、最近の人気エントリー
・通販旬報(EC系のニュースサイト)
・朝日新聞
・日経bp IT面
・VOXでご近所登録した人のブログ
・帝国データバンクの大型倒産情報

これらが配信しているRSSのタイトルと本文から情報を検索することができます。
なお、ポータルページの書くRSSメニューにある、「もっと...」という表示をクリックすると、本来であればdrupalのカテゴリページにジャンプするのですが、クリックするとF's Feed Searchの方に飛ばしています。


googleで検索することとの違いとして、googleの検索は、まだ見たことがない情報を探すために使うのに心地良いです、一度、軽く読んだことがあって、あぁあのblogに書いてあった情報ってどこだっけ?という情報を検索すると、googleはノイズが多くて探すのに苦労します。なまじっか覚えているもんだから、すぐに見つからないと、とてもイライラします。

こちらは、基本的には自分の趣向にあった情報しかでてきませんし、数が少ないのでキーワードさえ覚えていれば絞り込んで探していくのは簡単です。また、2年も運用し続ければ、結構なWeb関連のblogニュースデータベースになるんじゃないかと思っています。

と同時に段々、ちゃんとRSSリーダーを使おうと言う気になってきました。

できれば他の人に使ってもらえると、僕が情報をちゃんと集めようとする気になるので、もし万が一、たまに使うことがあったりしたら、教えてもらえるとありがたいです。
 
 
 
機能的な特徴は、全文検索エンジンであるSennaを使っているので検索が速いというのと、検索結果のblogのタイトルをクリックすると別ウインドウを開くことなく、小窓がウインドウ内に立ち上がって、対象のblogをプレビューすることができるところです。

ちょっと興味があるんだけど、ブラウザウインドウを開くほどではないという話題の時に、ちら見することができます。本気で読みたくなったら、「別ウインドウで開く」を押せば、別ウインドウが開いて読むことができます。


システム的には、drupalのアグリゲーション機能がRSSの収集とポータルの表示をして、検索機能は、MySQL + Sennaで行っています。検索を実行して、一覧ページを作成する画面をPHPで作っています。

PHPのフレームワークに、非公開のeoというフレームワークを使っています。
エスカフラーチェLLCのオオヒダさんがペパボ時代に作ったPHPのフレームワークです。

URLの取り回しなど近代のフレームワークに備わっている仕組みが標準装備なのと、ドキュメントをあまり見なくてもなんとかなる部分がシンプルで使いやすいので、まずは何よりモノを作る気になるフレームワークを、ということで、直接お願いして使わせてもらっています。eoは公開を前提に作られているものなので、みんなでお願いすれば、きっと完成させて公開してくれることでしょう。

ディテイルの部分として書いた残件としては、主にプレビューの小窓のあたりで、

・スクロールバーを触ることなく、google mapsの地図スクロールやwiiリモコンによるブラウジングのようにマウスドラッグでスクロールさせたい。
・プレビューの小窓のリサイズができるようにしたいとか、右上に×ボタンとか。
・wiiで見えるように。(シンプルだからwiiで見えると思うけど)

と、主にUI面を残件としていますが、人の心を動かす完成度はこういうところに宿るので、やったことメモ的に、がらくたラボだけの報告と言うことで。



2006年10月08日

playback.js動画プレーヤー

YouTubeにアップされているWebSig代表のインテリジェントネット(株)の和田さんによるWebSig会議の導入映像を使って、playback.jsによる動画プレーヤーを作ってみました。

~CGMからPGMへ:導入~(4分)

playback.jsは、音声を主体としたスクリプトですがflvを再生しているので、もちろん動画でも動きます。

CSSの記述などがかなり適当なのですが、動画用に作り変えたプレーヤーデータは以下からダウンロードしてください。ライセンスはCreative Commonsです。

websig導入の動画プレーヤーデータ
(lightbox.jsにも若干手を入れています。)

また、プレーヤーを改造したい人向けにFlashのflaファイルを置いておきます。
要Flash8 Professionalです。

playback_video_player_1_0.zip



2006年10月01日

簡単にオンラインセミナーを作れるplayback.js配布

簡単に音声-スライド同期型プレゼンテーションが作れるスクリプトを配布します。

概要
スライド同期型プレゼンテーションとは、音声にあわせて自動的にスライドが切り替わっていくもので、WebSig24/7にて行われたセミナーイベントで録音した音声と、スライド情報を組み合わせて、当日の内容をオンラインでも見られるようにしたことが、本スクリプト開発のきっかけです。

lightbox.js ver2.0で表示される画像を音声にあわせて自動的に切り替えていきます。

Flash Player8のインストールが必要です。

サンプル
以下のURLにて本スクリプトを使ったプレゼンテーションを公開しています。

第9回WebSig会議~CGMからPGMへ:第一部 10年足跡メソッドによる自己紹介とセルフブランディングのススメ~

第9回WebSig会議~CGMからPGMへ:第二部 ホリスティック・コミュニケーション~

ダウンロードで配布しているサンプルファイル

ダウンロード

現在配布しているバージョンは、1.0です。(2006/10/1現在)
playback_js_1_0.zip

FlashによるflvのPlayerをカスタマイズしたい人は、以下からどうぞ。
(要Flash8 Professional)
playback_sound_player_1_0.zip

ライセンス

Creative Commons License
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。

謝辞
本スクリプトは、私がモデレータとして参加しているWebSig24/7 というコミュニティの第9回目会議「TVは死んでいない。そして、CGMからPGMの時代へ」 の内容をオンラインで配信するために開発したものです。

本会議の録音データおよびプレゼン資料の公開を快くご了承いただいた、シックス・アパート株式会社マーケティング担当執行役員 河野 武氏に厚くお礼を申し上げます。

また、本スクリプトにアドバイスおよび公開を了承いただいたWebsig24/7のモデレータ陣にもお礼を申し上げます。



2006年08月14日

Synergy設定メモ(MacでMS IMEを操作するキー)

Macbookのキーボード、マウスからWindows XPをコントロールするためにSynergyを入れました。

よくこういうのはWindows同士だとキーボードやマウスの共有というのは普通にフリーソフトで見かけましたが、ちょっと前にSynergyが凄い!と言うのを見て、Windows同士の共有ソフトと比べて何が凄いのかよくわからなくて、ちょっと放置していたのですが、キーボードを2つ使うのがスペース的に面倒で設定する気になったので以下、macbookでの設定メモ

■やりたいこと
・MacbookのキーボードとマウスでWindows XPを動かす。
・XPの液晶画面はMacbookの後ろに置いてあるものとする。
 XPの画面も丸ごとMacの方に表示したければ、RemoteDesktopかVNCを使えば良い。(VNCよりRemoteDesktopの方が高性能)

■ダウンロード
Synergyをintel macで動かすには、masuidrive.jpさんが配布している修正版が必要
(非常にありがたいことです。)
ダウンロード先:
IntelMacでSynergy2を動かす

■参考設定
以下のサイトを参考にしてください。くわしく書いてあります。
Guide to Running Synergy


■概念がちょっとややこしい
この手のネットワーク系フリーソフトは、用語、設定画面の文言など、もろもろわかりにくいのですが、気合いを入れて設定しましょう。

また、クライアントとサーバという用語が出てきますが、
「キーボードとマウスを操作するマシンがサーバ」
「コントロールされたいマシンがクライアント」
です。X window的概念ということでしょうが、わかりにくげです。


■僕的にはまったところ
あまりMacとWindowsの関係を理解していないというか、難しく考え過ぎかもしれませんが、screen nameの意味がわかりませんでした。

screen nameにホスト名を設定しろと書いてあるのですが、ホスト名って何を意味しているのかが理解できませんでした。

macとwindowsでは直接コンピュータ名では繋がらないと思っていたので、どう設定して良いのやらと悩んでしまったのですね。

macの方は、例えばシステム環境設定にマシン名をmacbookと名付ければ、

macbook.local

というマシン名でWindowsからアクセスできるそうなので、それをsynergyのMac側のホスト名に設定すれば良さそうです。いつもOS Xを適当にいじってるツケが回ってきて無駄な時間を食ってしまいました。

macからWindowsを呼び出す方法はよくわかっていません。

Windowsのマシン名を入力してもMacではWINSの名前解決はしてくれないような気がするんですが、何か間違ってますかね。

うちはローカルにDNSサーバが立ち上がっていて、話がややこしいのでDNSサーバ側にmacとwindowsの名前を登録してしまいました。

いずれにせよホスト名とは「pingが通るマシン名」を登録してあげれば繋がります。(だったらIPを直入力で良いと思うんだけどなぁ。IPではうまく繋がらなかった。多分。)

ということで解決してなくて申し訳ないのですが、最悪でもhostsファイルにIPと名前の組み合わせを登録してあげれば、ホスト名とIPの組み合わせを設定できます。(Windowsは/windows/system32/drivers/etc/hosts、Macは、/etc/hostsファイルを編集すれば良い)

あまりよろしくない解決法しか書いてないエントリーですが、ご参考まで。
もっと簡単にマシンに繋がる方法がわかったら教えてください。

##ちょっと内部DNSの設定に問題があって、ややこしい事情がありまして。

■Macのキーボードで、WindowsのIMEを操る方法
このエントリは以下の話を自分用にも含めてメモっておくエントリだったりもするのです。
「IME site:f-shin.net」でググればいつでもどこでも見つかるようになりますので。

Macのキーボードで問題になるのは、全角/半角キーがないのでIMEのON/OFFがよくわからんということです。MacのキーボードでIMEを起動するショートカットは以下です、

IMEのON/OFF
[apple key] + @ (英語キーボードだとAlt + ~という情報を聞いて探しました)

MS IMEのコントロールパネル(右クリックで出るパネル)
Ctrl + F10


Bluetoothのapple keyboardを使っていれば、F13で日本語入力ON、Ctrl + F10 -> N -> Dで直接入力に切り替えられたのですが、なんとMacBookにはF13がなくてびっくりしました。CDがガーッと出てくるだけだったので(笑)

ParalellsとかBootCampでも生きてくるショートカットだと思うので、ご参考くださいませー。



落雷停電時に起きたことメモ

先週末の土曜日の激しい落雷時に起きた停電で、家の中のPCに起きたことのメモ

■落雷、停電状況
・大きな落雷により停電。30秒から1分ぐらいで電気が落ちたのが2回
・瞬停が1回。1秒弱の短いスパンの停電が一回。こういう微妙な停電で、コンピュータは落ちないまでも、誤作動しはじめることがあります。
・その他、犬が大騒ぎする落雷多数

■停電により起きた現象
1、落雷によりインターネットに繋がらなくなる。
・Bフレッツからインターネット(外部機器の再起動の遅延など?)
・ルーターの不調
・落雷発生中のノイズで無線LANが繋がらない(?)

2、落雷または停電によりデスクトップPCのBIOSが初期化された。
・BIOS設定で内蔵のサウンドカードを停止していたのですが、起動後にデバイスドライバが見つからないというエラーが発生。それに伴いmixiミュージック起動エラー(?)

3、停電復帰後にサーバの再起動失敗
HPのサーバの電源スイッチは、ハードスイッチのため停電から復帰すると再起動するが、DellのPowerEdge SC430は普通のPCと同じソフトスイッチのため、停電復帰後に電源投入の作業が必要。

会社などの遠隔環境でこれやっちゃうと誰かがスイッチを入れに行かねばなりません。

Wake Up On LANを使って、HPのマシンから起動させてあげる仕組みを組むのが良いかも。

4、F's Garageのapacheの起動失敗
SC430を手動起動したときに、apacheが起動失敗していました。OSは起動してpingは通っていたので、気がつかず40分ぐらい止めてしまいました。すいません。

必ずサービスの復帰確認はしましょうね。

■まとめ
サーバはUPSを入れて1分ぐらいの停電なら落ちないようにした方が良いですね。

ただ、ルーター、Bフレッツなどの外部ネットワーク機器もありますから、特に家庭用サーバであれば、サービスが止まることは否めません。
データセンターを使っていない企業内にサーバを置いているケースも同様ですね。

落雷時のサージ電圧対策を取ってない電源に繋がっているマシンはBIOSの異常などのトラブルを引き起こすことがあります。電源タップにサージフィルターが入っているものを使うと良いです。

サービスの復帰は、サーバが起動してpingが通っただけで満足せず、必ずapache上のWebサービスやメールサーバにアクセスして一通りの復帰動作確認をしましょう。
停電発生時にDBやテンポラリファイルが壊れて復帰に失敗することもありますし、思わぬ動きをして、サービス上のエラーになることもあります。



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がデフォルトで有効になっているので、こちらの設定などは参考になると思います。



2006年07月26日

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

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

簡易Windowマネージャ

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

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

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

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

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

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

カラメルを見る

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



カテゴリー

Powered by
Movable Type

Authored by
Shinichi Fujikawa(えふしん)