愛車:マツダアテンザ
Webを中心とした、ビジネス&テクノロジーに関する思いつき
by F-shin
[ このサイトについて ] [ F-shinについて ] [ トップ ]
iPhoneアプリ
author:えふしん
photo_20.jpg
藤川真一について


初代モバツイ開発者
想創社再創業 / KMD博士課程
著書〜100万人から教わったウェブサービスの極意―「モバツイ」開発1268日の知恵と視点 [Kindle版]
お求めやすい夏休み特価!
このカテゴリ[Web系]の最新30件
本ブログは移転しました インターネットの遊び方を身につけよう ネットでの選挙活動と投票率 Web2.0がうまくいかなかったワケ WebにおけるMVCアーキテクチャの勃興と変遷 何故、PCはブラウザ、スマホはアプリなのか。 言っとくけどスマホは退化でもあるからな。 アイコン5000円とか、Web受注(発注)価格について。 残念なWeb論の骨子 HTMLってホントよく出来てるな。 「やまもといちろう×イケダハヤト対談イベント」のログを読んで ネットサービスの成功者は「とりあえず受託」という言葉使うのやめません? 全収集型RSSリーダーの終焉とソーシャル化するWeb 頑張ると報われるプログラマーの社会とは。 Perlが○○な話 アメリカ製品のすごさと不思議とワイヤフレーム どの人件費を考えても絶対にお得!利用規約ナイトがきっかけの本が出ます。 クラウドやモバイルを、もっと仕事で活用したいけど、どうやって会社を説得したら良いかわからない! スマホアプリらしいUXとは。 インターネットの変化に対して起こるモヤモヤすることを考え、整理する活動 Facebookは見なくてもいい情報が出てくるSNS 「あなたは影響力があるから、そんなことを言っちゃいけません」の問題点 Facebookに時間を取られすぎる対策 Paypalの本人確認がむかつく件 ネット系イベントがとても主催しやすくなった件 モバイルファーストが失敗なハズはないが、今はまだ時期尚早 やりがいはソートできない…非情なデータベース社会 2012年までのふりかえりと2013年へ ブラウザという平面の限界 ブログ記事の流通の難しさ
[このカテゴリをもっと見る]
Powered by
Movable Type

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さんの「動的ロード(遅延ロード)3」にて公開されているクラスを利用しています。そのコードで使われているwait関数は最速インターフェース研究会のma.laさんのコードを利用させていただいています。

■ソースコード
もっと良いフレームワークがあるでしょうが、シンプルなソースなので参考までにソースコードを置いておきます。興味があればどうぞ。展開したindex.htmlをクリックすればすぐ動作します。

inline_window.zip

是非、モバツイッターのOKUZASHIKIもよろしくお願いします。インラインウインドウは、相手のHTML上にウインドウを組み込んでいるので、サイトよっては動作しません。不具合が出るサイトがあったら是非、教えてください。
(twitter id : fshin2000)


スポンサーリンク
■同じカテゴリ[Web系]のエントリー
<<前の記事 Webサービスがキャズムを超えるためには。
>>次の記事 オープンソーシャル前夜にブログの可能性を考える
■このblogの書き込み最新3件
本ブログは移転しました インターネットの遊び方を身につけよう トトロが陽なら、『風立ちぬ』は陰?〜『風立ちぬ』の感想