WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

ブラウザで Web サイトを編集できる「TypeRoom」

本日は Web ブラウザ上で任意のページの内容を編集できる TypeRoom というサービスをご紹介しようと思います。実はプライベートベータの頃からちょこちょこ使っていたのですが、最近オープンベータに移行して誰でも利用できるようになったので、この機会に記事にしておきます。

基本的には、編集したいページの URL を指定すると、それが編集画面に読み込まれ、 WYSIWYG っぽいエディタで編集できるというサービスです。編集結果はダウンロードするかメールの添付ファイルとして取得できます(PRO 版には FTP アップロードの機能もあり)。使い方しだいではなかなか便利なツールなので、皆さんもぜひお試しください!

使ってみる

それでは、さっそく使ってみましょう。まずは TypeRoom のトップページを表示してください。サポートブラウザは Firefox と IE6 以降のみとなっていますので、ご注意を。

でかい入力フォームに編集したいサイトの URL を指定し、「Go」ボタンをクリックします。すると、以下のように指定したページが表示されます。

この段階ではまだ編集モードに移っていませんので、同じドメイン内ならリンクをクリックして他のページに移動できます。そうして編集したいページを表示させて、右上の「Edit This Page」ボタンをクリックすると、編集モードになり、マウスの下のブロック要素が強調されるようになります。

この状態でクリックすると、その要素の内容を WYSIWYG ならぬ WYM エディタで編集できます。

インライン編集でないのががっかりかもしれませんが、実は下手に WYSIWYG なエディタよりも使いやすいです。カーソル位置の要素が強調されるので、確実に特定の要素を編集できます。「 <A> タグの直後に通常テキストを挿入したいのに、どうしても <A> の中に入ってしまう(´Д`;」なんていうストレスがないのは素晴らしいです。

画像など特定の要素に対しては右のペインでプロパティーを編集できます。

そして、エディタで変更した内容はプレビューにもリアルタイムで反映されます。

変更が終了したら、エディタ右上の「Save Changes」ボタンをクリックして確定させます。すると画面右上に「Publish this page」というドロップダウンが表示されます。それをクリックすると、 FTP 、メール、ダウンロードの 3 つの選択肢が表示されます。

FTP は後述の PRO 版で使える機能、メールは編集後の HTML をメールに添付して送付、ダウンロードは HTML を(なぜか ZIP で固めて)ダウンロードという感じです。編集後の HTML を普通に表示するというのが最も手軽で使いやすいと思うのですが、なぜかそれはできません。残念。

そうそう、ブラウザで表示中のページをすぐに編集できるブックマークレットも用意されています。編集画面右上の「edit another site」をクリックして表示されるダイアログの、「Edit in TypeRoom Lite」というリンクをブックマークすれば OK です。

あとは、ブラウザで編集したいページを表示させてブックマークレットを実行すれば、自動的に TypeRoom に読み込まれます。どうでもいいけど、このブックマークレット、なんでこんなわかりにくいところにあるんだろう。

TypeRoom PRO もあります

TypeRoom には有償の PRO 版もあります。私自身はサインアップしていないので詳細はわかりませんが、以下の機能が利用できるようです。

  • 編集した HTML を FTP でダイレクトにアップロード
  • サイト内容の管理ツール
  • 50 Mbyte のファイルストレージ
  • その他にもいくつか追加予定?

いずれも TypeRoom を本格的に CMS として利用するなら必須の機能ですが、これで月額 $12 はちょっと高いですね・・・。超円高な現行レートでも月額 1,200 円くらいですから、けっこうなレンタルサーバーが使える金額です。今後の値下げか、値段に見合う機能アップを期待したいところですね。

ちなみに、現在はベータ期間中なので、無料のユーザー登録だけで上記機能が使えます。興味のある方は今のうちに試してみるのが良いでしょう。

問題点

こういった WYSIWYG 系のサービスではありがちな問題点ですが、編集した部分の HTML は改行や字下げがすべて削除され、非常に読みにくいソースになってしまいます。せめてブロック要素ごとに改行するくらいはやってほしいところです。

また、すべてのリンクが相対リンクに変換されてしまうのも、場合によっては問題になるかもしれません。同じページをシンボリックリンクなどで別の URL でも使う場合は要注意ですね。

もうひとつ気になったのは、編集画面にページを表示する際に www.typeroom.com のドメインでページスクリプトを実行してしまっている点です。もし編集しようとしたページに悪意のあるスクリプトが仕込まれていると、おそらくセッション情報などを盗まれてしまいます。まあ、ログインもしていないので問題ないかもしれませんが、ちょっと気持ち悪いですね。念のため信頼できないサイトは編集しないことをお勧めします。

とりあえずは実験用?

上記のように HTML ソースが崩れてしまう点などを考えると、現在のところ TypeRoom が生成した HTML をそのまま使うのはちょっと勇気がいります。今後そのページは TypeRoom でしか編集しない、と腹をくくる必要があるでしょうね。

逆に、実験的にページ内容を変更する際にはとても便利だと思います。ブックマークレットを使えば表示中のページをすぐに編集できますし、公開中のサイトには影響を与えずに結果を確認できます。とくに細かい文面やスタイルの試行錯誤には最適でしょう。実際、ページの編集で時間がかかるのはこうした試行錯誤なので、それが効率的に行える意味は大きいのではないでしょうか。

もちろんまだベータ版なので、今後の機能強化でさらに化ける可能性はあります。アイディアはとても優れていますし、技術的にもなかなか高度なことをやっているので、今後の発展に期待!ですね。

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles