がらくたラボ - Specialized F's Garage for Technologies -

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

2008-03-15T16:52:17Z

ブラウザの上に、ウインドウをオーバーレイして各種機能を実現するブックマークレットWidgetをここに紹介していきます。今後新機能が追加された場合は、ここに追記していきます。（2008/3/23にcodereposへの公開を機にソースコードの構造が変わりました。恐れ入りますが、それ以前にブックマークされた方は入れ替えていただけますでしょうか。今までのURLはいずれ削除する予定です。） WidgetというのはUIを伴った小さな部品という意味なのですが、ここで紹介しているものは、ブラウザ画面内をマウスドラッグで移動して、今見ているWebページに機能を追加するウインドウです。以下のリンクをブックマークに登録したり、ブックマークバーにドラッグすることで使えるようになります。どんな動作をするか？は試しにリンクをクリックしてみてください。

１．PHPの関数を調べる。よくわからない関数名をコピペしたり、記憶の断片を下にphp.netの優れたヘルプをすぐに呼び出すことができます。 PHPの関数を検索関連エントリ： F's Garage：[update]PHPの関数をすぐに調べるbookmarklet

２．Webの文字列をExciteの英日翻訳に投げる。マウスで翻訳したい英文を選択してブックマークレットを起動すれば、選択範囲を簡単にエキサイトの翻訳に投げることができます。英日翻訳関連エントリ： F's Garage：[update]英日翻訳をするブックマークレット

３．選択文字を自動翻訳５秒周期でマウスで選択した文字列を翻訳します。文章が日本語だったら日→英に、英文だったら英→日に自動判別して翻訳します。英日、日英翻訳 3/23をもってgoogleの翻訳apiに変更しました。ちょっと試した限り、今までより高い精度の翻訳が得られると思います。関連エントリ： F's Garage：iPhone SDKを読み解くのに必須！ Google AJAX Language APIを使ったブックマークWidget作った。

４．blogに書くリンクをさくっと作る。 link maker blogのリンクを作る時に、blogのタイトルって選択しにくかったり、はてなスターを一緒に選択することになって、面倒だなぁと思ったりしませんか？このブックマークレットは、今見ているページのURLとtitleから、適切なblog貼り付け用リンクを作ってくれるものです。

５．HTML内で別サイトを表示するインラインブラウザ例としてgoogleを表示するこれはリンクの周辺にフローティングウインドウを表示して、その中に指定したサイトを表示するものです。ブックマークレットとして使うのではなくblogエントリの中でリンクを張って使うことを想定しています。例えばリンク先のURLを資料としてだけ見せたいだけなので、わざわざ別ウインドウを開くまでもない、という時に使えます。

６．twitterにメッセージを送信するbookmarket ブラウジングしてたり調べ物をしているときに唐突に何かをつぶやきたくなって、twitterに書き込みをしたくなることがあります。ただの書き込み欲を満たしたいだけなのに、そこからtwitter画面を開いてしまうとついつい他の人の書き込みを見て余計な時間を費やすのもアレなのと、僕は便利なtwitterツールを使ってないので、さくっと書き込みをする手段が欲しくて、bookmarketでtwitter書き込み用のwidgetを作りました。続きはこちらから→F's Garage：twitterにメッセージを送信するbookmarket

７．[まだ全然作り中]同一サイトリンクを抽出する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/ ＊＊＊利用について。どうぞご自由にご利用ください。何かに使ったら教えてもらえるとありがたいです。

SpryWidget拡張版ソースコード

2007-08-06T12:22:00Z

長らくお待たせしました。 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 」というツールで差分を把握できます。

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

2007-04-08T10:27:10Z

携帯電話（ケータイ）で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

F's Feed Search

2007-03-18T16:55:04Z

本当はもっとディテイルにこだわってから、ここに書くつもりだったのですが、違うことをやりたくなったので、とりあえずメモ 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面を残件としていますが、人の心を動かす完成度はこういうところに宿るので、やったことメモ的に、がらくたラボだけの報告と言うことで。

playback.js動画プレーヤー

2006-10-08T02:40:12Z

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

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

2006-10-01T01:20:52Z

簡単に音声-スライド同期型プレゼンテーションが作れるスクリプトを配布します。概要スライド同期型プレゼンテーションとは、音声にあわせて自動的にスライドが切り替わっていくもので、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 ライセンス
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。謝辞本スクリプトは、私がモデレータとして参加しているWebSig24/7 というコミュニティの第9回目会議「TVは死んでいない。そして、CGMからPGMの時代へ」の内容をオンラインで配信するために開発したものです。本会議の録音データおよびプレゼン資料の公開を快くご了承いただいた、シックス・アパート株式会社マーケティング担当執行役員河野武氏に厚くお礼を申し上げます。また、本スクリプトにアドバイスおよび公開を了承いただいたWebsig24/7のモデレータ陣にもお礼を申し上げます。

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

2006-08-14T09:21:27Z

Macbookのキーボード、マウスからWindows XPをコントロールするためにSynergyを入れました。よくこういうのはWindows同士だとキーボードやマウスの共有というのは普通にフリーソフトで見かけましたが、ちょっと前にSynergyが凄い！と言うのを見て、Windows同士の共有ソフトと比べて何が凄いのかよくわからなくて、ちょっと放置していたのですが、キーボードを２つ使うのがスペース的に面倒で設定する気になったので以下、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でも生きてくるショートカットだと思うので、ご参考くださいませー。

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

2006-08-14T00:52:23Z

先週末の土曜日の激しい落雷時に起きた停電で、家の中のPCに起きたことのメモ ■落雷、停電状況・大きな落雷により停電。30秒から1分ぐらいで電気が落ちたのが２回・瞬停が１回。１秒弱の短いスパンの停電が一回。こういう微妙な停電で、コンピュータは落ちないまでも、誤作動しはじめることがあります。・その他、犬が大騒ぎする落雷多数 ■停電により起きた現象１、落雷によりインターネットに繋がらなくなる。・Bフレッツからインターネット（外部機器の再起動の遅延など？）・ルーターの不調・落雷発生中のノイズで無線LANが繋がらない(?) ２、落雷または停電によりデスクトップPCのBIOSが初期化された。・BIOS設定で内蔵のサウンドカードを停止していたのですが、起動後にデバイスドライバが見つからないというエラーが発生。それに伴いmixiミュージック起動エラー(?) ３、停電復帰後にサーバの再起動失敗 HPのサーバの電源スイッチは、ハードスイッチのため停電から復帰すると再起動するが、DellのPowerEdge SC430は普通のPCと同じソフトスイッチのため、停電復帰後に電源投入の作業が必要。会社などの遠隔環境でこれやっちゃうと誰かがスイッチを入れに行かねばなりません。 Wake Up On LANを使って、HPのマシンから起動させてあげる仕組みを組むのが良いかも。４、F's Garageのapacheの起動失敗 SC430を手動起動したときに、apacheが起動失敗していました。OSは起動してpingは通っていたので、気がつかず40分ぐらい止めてしまいました。すいません。必ずサービスの復帰確認はしましょうね。 ■まとめサーバはUPSを入れて１分ぐらいの停電なら落ちないようにした方が良いですね。ただ、ルーター、Bフレッツなどの外部ネットワーク機器もありますから、特に家庭用サーバであれば、サービスが止まることは否めません。データセンターを使っていない企業内にサーバを置いているケースも同様ですね。落雷時のサージ電圧対策を取ってない電源に繋がっているマシンはBIOSの異常などのトラブルを引き起こすことがあります。電源タップにサージフィルターが入っているものを使うと良いです。サービスの復帰は、サーバが起動してpingが通っただけで満足せず、必ずapache上のWebサービスやメールサーバにアクセスして一通りの復帰動作確認をしましょう。停電発生時にDBやテンポラリファイルが壊れて復帰に失敗することもありますし、思わぬ動きをして、サービス上のエラーになることもあります。

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

2006-07-30T15:35:31Z

F's GarageのMovable Typeが非常に重くなってきて、１エントリをアップするだけでもタイムアウトで500エラーになってしまうことが多くなっていたので、レンタルサーバの環境ではキツいなぁと思い始めて、自宅サーバに移行しました。 F's Garageは、blogというよりも、カテゴリ毎に記事が登録されたWebサイトとしてユーザビリティを重視し、１エントリ毎にそのエントリが所属するカテゴリの全タイトルを表示するようにしています。当然エントリ毎に所属するカテゴリは違いますから、１エントリをパブリッシュする毎に大量のデータベースアクセスが発生するプラグインを入れています。これがタイムアウトの原因だと思うので、迷惑のかからない自分専用のサーバに移行する価値はあると思いました。 ■サーバ本体サーバ本体は、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使用率を取り合うと言った状況になって、４分間ぐらい時間がかかりました。冒頭でも記述した通り、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がデフォルトで有効になっているので、こちらの設定などは参考になると思います。

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

2006-07-25T16:32:35Z

2006年の2月ぐらいにひっそりと公開していたものですが、JavaScriptによるWindowマネージャを作ってみました。script.aculo.usを見ていて、こういうの簡単にできそうだなぁと思ったら案の定簡単でした。簡易Windowマネージャこのサンプルではファイルの拡張子に応じて最適なHTMLテンプレートを選択して描画しています。外枠のWindowはJavaScriptを使ってレイヤー管理されています。Windowsマネージャというとおりウインドウ間の重なりも管理しています。（重なり制御は、ちょっと怪しい）ウインドウ重なりの制御は、Flash MX 2004 Professionalに添付されていたWindowコンポーネントでやっていることを参考にしています。なお外枠のウインドウは、Jemplateを使ってテンプレート化しているのでデザイン変更があっても簡単に反映することができますし、document.writeでダラダラとHTMLを書くような作業は不要です。なおこのサンプルで考えたのは画像やFlash、動画を動的に読み込むことでマルチメディアビューワーみたいなことができるんじゃないかなぁと思っています。カラメルでは、このソースを流用しヘルプウインドウなどに使っています。カラメルの画面上に丸い「？」のアイコンがあるのですが、それをクリックすることで表示されます。カラメルを見るカラメルの方はウインドウをドラッグできないように変更し、代わりに画面上のどこをクリックしても開いているヘルプウインドウが閉じるようにしていますが、こういうのが簡単に変更できるのもシンプルなレイヤーコンポーネントが故のポイントだと思います。

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

2006-07-25T16:17:45Z

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系]

RSSチェッカー kikimimi

2006-07-25T16:02:17Z

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

iPod用動画変換スクリプト

2006-07-16T17:20:44Z

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

Gyaoの動画を全画面で見る

2006-07-16T15:14:29Z

Gyaoのプレーヤーはよくできていますが、大画面TVなどに動画を表示している人は、できれば全く枠が表示されない全画面再生で見たいものです。ちょっとだけ手間はかかりますが以下の手順で可能です。１．以下のブックマークレットをお気に入りに登録しておく。（リンクの上で、右クリック＞「お気に入りに追加」（JavaScriptの中身は、右クリック＞プロパティで確認できます。）） GyaoプレーヤーでWMPの右クリックメニュー有効化 2.動画プレーヤーを開き、とりあえず再生を始める。次は、１番で登録したブックマークレットを実行するためにメニューバーから、ブックマークレットを選択したい。そのためには同じURLを別の画面を開くと良いのだが、そのために以下の操作をする。 3.通常のページなら同じ内容のページを別のウインドウで開くためには、「Ctrl + N」を押せば良いのだが、Gyaoの動画プレーヤーはCtrl + NもJavaScriptで無効化されているらしい。そこで、F5キーを何度か押して画面をリロードしながら、Ctrl + Nを押しているとたまに開くことがある。（推測だが、JavaScriptでCtrl + Nのイベントを無効化する前にウインドウを開くということなのかも） 4.別ウインドウで同じ動画プレーヤーが起動するとメニューバーが表示され、１番で登録したブックマークレットを実行すると、Windows Media Playerのメニューが表示される。 5.この状態で動画エリア上で右クリックをすると、右クリック禁止よりも優先的にWindows Media Playerのコンテキストメニューが表示されるので、「プロパティ」を選ぶ。 .プロパティに長々とした動画のURLが表示されているので、このURLをコピーして、同じIEのアドレスバーに貼付けて、ENTER（同じブラウザのアドレスバーに貼付けるというのがポイント） 6.別途Windows Media Playerの単体プレーヤーが起動し、そちらで先ほどの動画が再生されれるので、あとはWindows Media Playerの動画上で右クリックして全画面表示にすることができる。理屈がわかっていればさほどたいした手順ではないのですが、この手順だけ追うと結構面倒ですね。きっともっと簡単なツールがインターネット上にはあると思うので探してみてください。 Ctrl + Nも無効化できるんですかね。知りませんでした。キャンセルできないのは、F1とF5だけなんですかね。

はじめに

2006-07-15T13:33:32Z

このblogは、F's Garageというblogで公開した実験的に作ったものは研究的な成果をまとめるために作ったblogです。また新しく何かを行ったときにご報告するblogでもあります。このblogがあることで、自分が何かをやらなくてはいけないと思うためのblogでもあります。まとまって完成されたサービスなどをプライベートで作り上げるのは苦手ですので、技術の断片を思いついたときに、さくっと実験モジュールなどを作り上げてアウトプットしていこうと思っています。よく最近の技術は変化が速いと言われますが、突然何かが起きるのではなく、むしろ「すべての変化は連続的である」という考えを大事にし、今、役に立たなくても、数ヶ月後、数年後に生きてくるような技術のかけらを積極的にフォローアップしていくことが重要だと思っています。今は、がらくたでも将来役に立つことを狙うという意味で、「がらくたラボ」という名前をつけました。明日のはてなブックマークよりも、数ヶ月後にgoogle検索から見つけられることを大事にしたいと思っています。