カラメルアフィリエイト始めました
November 18, 2007
インラインウインドウとは、外部Javascriptで作られた、ウインドウ型のユーザインターフェースです。（勝手に名前を付けました）
このウインドウをブックマークレットで呼び出すことで、いろんなWebサイトのページに組み込みのウインドウを表示することができます。
ウインドウ内の機能は、Javascriptで操作しますから、そのページを変更したり、外部と通信したり、URL、画像、文字を別のサーバーに送ったりすることができます。
モバツイッターに追加した、自分専用のミニブログ機能「OKUZASHIKI」に、このウインドウがブックマークレットとして提供されていて、PCブラウザで見ている画像情報や選択したテキストを、簡単にツイッターに送信することができます。
まるでtumblrのように画面上の画像やテキストを、ツイッターに送信できるようになります。
上記のリンクをクリックすると、F's Garageに貼り付けてある画像が羅列されて表示されると思います。画像をクリックすると、モバツイッターを経由して、自分のツイッターに画像情報を送信することができます。
上記のリンクはサンプルですが、実際はブックマークレットとして呼び出せるため、さまざまなWebサイトで使うことができます。
例えば、TumblrのDashboardに張られてる、面白い画像をツイッターに送って共有することだってできます。
また気になったテキストを選択して、ブックマークレットを呼び出すと選択内容が自動的にテキストフィールドに入力されるので、そのままツイッターに送信することができます。
いろいろ書いてしまいましたが、OKUZASHIKIで、どんな情報がクリップできるのかは、僕のURLを晒しておきます。
fshin2000のOKUZASHIKI
参考：モバツイお知らせブログ「ミニブログ機能を「OKUZASHIKI」にしてリリース」
■インラインウインドウのメリット
ブックマークレットに高度な機能をつけようとするとユーザーインターフェースの実装は不可欠です。
外部ウインドウも良いのですが、別ウインドウが開いてしまう煩雑さに加え、ポップアップブロックに引っかかる上に、IEで別ウインドウを開くのは遅いです。
思考を途切れさせないためにも、同一のHTML内に表示できることが望ましいと思います。
■インラインウインドウの動作
インラインウインドウは、今見ているウェブページの上のレイヤーに表示され、マウスドラッグでウインドウの移動が可能です。
表示の初期位置は、画面のスクロールにあわせて調整されているので、長いページの下で呼び出しても画面内に即座に表示されます。
■インラインウインドウの仕組み
・ウインドウはフレームワークとしてのウインドウクラスが用意されています。
・全体の画面レイアウトは、Jemplateを使ったテンプレートになっています。また、ウインドウ内のUIは動的に生成しています。
・デザインはCSSでコントロール可能です。（ですが、後述する問題で内部はテーブルレイアウトになっています。）
■現状の問題点
・HTMLなのでFlashバナーや、IEのセレクトボックスなどよりも、レンダリングの優先順位が低い。
・CSSだけだと背景が透けてしまう。テーブルレイアウトにして、bgcolorを設定すると抜けないようだ。
・CSS、JavaScriptのネームスペース衝突の恐れ。prototype.jsなどのバッティング、バージョン不整合
・あくまで元のHTMLに依存するので、沢山のサイトでテストして改善していく必要性
（既知の問題でasahi.comだと、dragdrop.jsあたりでエラーになってしまう）
■今後
・使いながら現状のものを改善していきます。
・どうしても逃れられないレンダリング順位との関連で、実用性の考察をしていきたいと思います。
・prototype.jsやscript.aculo.usに依存しないようにしないとダメかもしれませんね。jQueryとぶつかるんでしたっけ？
・JavaScriptの匿名関数化
・CSSの命名規則をもうちょっとなんとかしる。
■謝辞
・デザインテンプレートをJavaScriptに変換するためにJemplateを利用させていただいております。
・JavaScriptライブラリの読み込み制御するために、suVeneさんの「動的ロード(遅延ロード)３」にて公開されているクラスを利用しています。そのコードで使われているwait関数は最速インターフェース研究会のma.laさんのコードを利用させていただいています。
■ソースコード
もっと良いフレームワークがあるでしょうが、シンプルなソースなので参考までにソースコードを置いておきます。興味があればどうぞ。展開したindex.htmlをクリックすればすぐ動作します。
是非、モバツイッターのOKUZASHIKIもよろしくお願いします。インラインウインドウは、相手のHTML上にウインドウを組み込んでいるので、サイトよっては動作しません。不具合が出るサイトがあったら是非、教えてください。
（twitter id : fshin2000）