「InContext Editing」――Dreamweaver CS4×WebブラウザがCMSになる!?

HTMLをブラウザだけでさくっと更新！アドビの新サービス

2008年10月29日 04時00分更新

文● 小橋川誠己／企画報道編集部

　「公開済みのWebページのテキストをちょこっと直したいけど、HTMLを再編集してアップするのは面倒だ」。そんなときに便利に使えそうな新サービスが、10月15日、米アドビシステムズから発表された。Adobe Labsにてプレビュー版が無償公開中の「Adobe InContext Editing」だ。


ブラウザー上でHTMLの直接編集を可能にする「Adobe InContext Editing」。あらかじめ設定しておいた編集可能領域をクリックすると、ヘッダー部分にツールボックスが表示され、テキストの編集や見た目が変更できる（画面はアドビのWebサイトより）

　InContext Editingは、「Dreamweaver CS4」（米国で発売中のオーサリングツールの最新版）と連携して、Dreamweaverで作成した（X）HTMLページの一部分をWeb上で編集可能にするオンラインサービス。ブラウザー上で通常のページの見た目のまますぐに中身を編集でき、編集後は（X）HTMLとして保存してFTPでアップもできる。

実際の使い方――Dreamweaverとオンラインサービスの組み合わせ

　……と、ここまでの説明ではややイメージがつかみにくいかもしれない。具体的な手順としては以下のような流れで利用する。

　はじめに、Dreamweaver CS4で対象の（X）HTMLファイルを開き、InContext Editingで編集可能にしたい領域を設定する。領域を選んでメニュー操作すると専用のタグが付与される。作成が済み、ファイルを保存すると、InContext Editing用のコンポーネントファイル（JavaScriptとHTML）が生成されるので、作成したHTMLなどと一緒に通常どおり自分の公開サーバーにアップしておく。


Dreamweaverの作業画面。（左）メニューから編集可能領域を設定する。（右）下部のプロパティパネルで変更を許可するスタイル項目も指定できる（画面はアドビのWebサイトより）


InContext Editingの管理ページ。ここでサイトのURLやFTPサーバーの設定をしておく


編集用のURLにアクセスすると、Adobe IDによるログインを促される。ログイン後に、InContext Editingによる編集が可能になる（画面はアドビのWebサイトより）

　元のHTMLの準備ができたら、今度はInContext Editingの管理ページでHTMLを置いてあるURLやFTPサーバーの設定をする。これで準備は完了だ。

　編集用のURLにアクセスすれば、ページの編集が可能になっている。Dreamweaverで指定済みの編集可能領域をクリックすると、テキストを書き換えたり、スタイルを変更したりできる。

　もともとある要素の「中」の編集だけでなく、要素そのものの「追加」も可能だ。たとえば、ブログのエントリーや時系列で並ぶニュース記事のように、1ページの中で繰り返されるブロック要素なら簡単に追加・更新できる。

　ブラウザー上でWebページを直接、リアルタイムにプレビューしながら編集する、という機能そのものは、昨今の商用CMSやWebページ更新ツールでは特に珍しくない。だが、「シンプルにWebページの一部を書き換えたい」と考えたときに、新たにCGIを設置したり、データベースを設定したり、はたまた専用のテンプレートを作るための“お作法”を学んだり、といった事前準備が必要となると少々面倒だ。InContext Editingは、クライアントとのやり取りの多い企業サイトの制作や、チームでのページ制作にはもちろんのこと、個人でもさくっとWebサイトを更新したいときに便利に使えるだろう。

　日本においては、肝心のDreamweaver CS4を含むAdobe CS4がまだ発表されていないため、InContext Editingの国内での扱いも現時点では不明だが、今後が非常に楽しみなサービスだ。

■関連サイト

ツイートする

カテゴリートップへ