専用エディタを用いないWYSIWYG性の高いWeblog構築ツール

専用エディタを用いない WYSIWYG 性の高い Weblog 構築ツール
川村修
†
大囿忠親
†
伊藤孝行
†
新谷虎松
†
†
名古屋工業大学大学院工学研究科情報工学専攻
e-mail: {osamu, ozono, itota, tora}@ics.nitech.ac.jp
1
はじめに
① ② ③ ④
近年，Weblog と呼ばれる頻繁に情報が更新される
ウェブサイトが盛んになっている．MovableType に代
表される Weblog 構築ツールは，情報を更新する際の煩
雑さを軽減しているが，ユーザが意図するデザイン (高
い WYSIWYG 性) のページを作成するには手間がかか
るという問題がある．一方，高い WYSIWYG 性の専
用エディタは，エディタを用いるための複雑な知識を必
要とするため，使いこなすまでに多大な労力を必要と
する．本稿では，WPS 技術 [1] を用いた WYSIWYG
性の高い Weblog 構築ツールを提案する．本ツールに
図 1: システムの実行画面
より，専用エディタを用いずに WYSIWYG 性の高い
し，他の専用エディタ同様に多数のウインドウやボタ
Weblog 構築が可能となる．
本稿の構成は以下のとおりである．第２章では本研
究と関連研究の比較を行う．次に，第３章で本研究の
基礎となる WPS 技術について説明する．さらに，第
４章では WPS を応用した Weblog 構築ツールについ
て示す．最後に，第５章で本研究について考察とまと
めを行う．
2
関連研究
Weblog 構築ツールの代表的なものに
MovableType[2] がある．MovableType は，既存
の Web ブラウザで Weblog を管理でき，ファイルの
アップロードやダウンロードが必要ないため，ユー
ザの負担は軽減されている．しかし，Web ページの
デザイン変更には，Cascading Style Sheets(CSS) を
用いるか，直接 HTML タグを書き込む必要があるた
め，CSS や HTML の言語を理解する必要がある．ま
た，デザインの編集とデザインの確認を別に行う必要
があるので，作業の負担が非常に大きい．このため，
MovableType は WYSIWYG 性が高いとは言えない．
一方，高い WYSIWYG 性のページを作成するエディ
タの代表的なものに Dreamweaver[3] が挙げられる．
Dreamweaver は Web ページを編集しながらデザイン
を確認でき，適切な HTML と CSS を生成する．しか
A WYSIWYG Weblog Tool Requiring No Dedicated Editor
Osamu KAWAMURA † , Tadachika OZONO † , Takayuki
ITO † , Toramatsu SHINTANI †
Graduate School of Engineering, Nagoya Institute of Technology, Gokiso, Showa-ku, Nagoya 466-8555, JAPAN
ンが並ぶので，目的のデザインを反映したページを作
成できるようになるには，エディタを操作するための
複雑な知識が必要である．
本研究では，WPS 技術を Weblog 構築ツールに応用
することにより，CSS や HTML を意識させずに WYSI-
WYG 性の高いページが作成可能となる．また，WPS
技術では専用エディタを用いず，既存の Web ブラウザ
を用いるので，編集操作のための複雑な知識を必要と
しない．本システムの実行画面を図 1 に示す．
3
WPS の概要
WPS は Web ブラウザ上から Web ページの作成及
び編集を可能にする機構である．WPS の主な特徴は，
1) テキストや画像などの HTML 要素をオブジェクト
として扱う，2) ブラウザ上から直接オブジェクトを貼
付けることが可能である，3) 貼付けたオブジェクトは，
マウスによる操作で自由に位置を変更することができ
る，4)HTML タグや CSS の知識を必要としない，5)
ファイルのアップロードやダウンロードといった煩雑
な作業を省くことができる，である．
オブジェクトの編集機能は，JavaScript により実
装する．オブジェクトは全て <div> タグにより構
成される．オブジェクトの編集は Document Object
Model(DOM) を利用してタグにアクセスし，CSS を
操作することによって行われる．Web ページの保存は，
CGI によりオブジェクトのデータを書き出すことによ
り実現する．
以上のように，WPS は HTML タグや CSS の知識を
Show
Browser
HTML CSS
g in
Lo
Sh
ow
ことで，閲覧からログイン，編集，そして保存まで，全
Sa
ve
Fu
nc
tio
n
Update
te
da
CGI
Up
HTML HTML CSS
ての行程でブラウザがリロードすることのないシーム
レスな作業を可能にした．
4.3
Data
JavaScript
Web Server
図 2: システムの構成
必要とせず，編集しているページがそのまま完成した
ページとなるため，Weblog 構築ツールの WYSIWYG
実現に適していると考えられる．また，WPS は CGI，
JavaScript 及び CSS により構成されているので，Weblog 構築ツールに応用するのが容易である．
4
WPS を応用した Weblog 構築ツール
4.1
システムの概要
本システムの構成を図 2 に示す．本システムでは，頻
繁に更新されるデータを記事と呼び，テンプレートに
記事を埋め込んだものを Web ページと呼ぶ．本システ
ムで行う処理は，主に閲覧モードと編集モードの２つに
分けられる．まず，ユーザが最初に本システムの Web
ページにアクセスした際には閲覧モードとなる．閲覧
モードでは Web ページが表示されるのみで，その他の
機能は与えられない．閲覧中にユーザがシステムにロ
グインするとオブジェクト操作用の JavaScript がブラ
ウザへ渡される．JavaScript が渡されると編集モード
となり，閲覧中の Web ページにある記事の編集が可能
となる．そしてユーザにより保存の指令が JavaScript
にわたると，記事の情報は JavaScript から CGI へ渡
される．記事の情報を受け取った CGI は編集対象と
なった Web ページを更新する．図 1 は本システムに
おける編集モードの画面である．図 1 には２つの記事
がまとめて表示されており，同時に編集を行っている．
図 1 では，ツールバーを拡大して表示している．ツー
1 でオブジェクトの選択と移動を行い，°
2で
ルバーの°
3 でオブ
オブジェクトの追加と編集を行う．そして，°
4 で記事の保存を行う．
ジェクトの削除を行い，°
4.2
シームレスな編集モード
一般的な Weblog 構築ツールでは編集や管理を行う
際，管理専用のページに移動するか別ウインドウを表
示する必要がある．閲覧と編集が別のページで行われ
ているため，編集の確認には２つのページを交互に切
り替える必要があり，非常に手間がかかる．本システ
ムでは JavaScript を用いて HTML を動的に変更する
インデックスページへの対応
Weblog には，インデックスページという各記事を
まとめて表示するページがある．本システムでは，イ
ンデックスページに <iFrame> タグを用いることによ
り各記事をまとめて表示する．これまでの WPS は各
Web ページごとにオブジェクトの情報を保存している．
しかし，テキストのオブジェクト等は表示方法が Web
ブラウザに依存しているため，オブジェクトのサイズ
を特定できない．そのため，複数の記事をまとめて表
示しようとすると，ある記事のオブジェクトが他の記
事のオブジェクトと重ることや，一部が表示されない
などの問題が起こる．
本システムでは，オブジェクトのサイズが不定の場
合でも，ブラウザがオブジェクトを表示するための領
域を自動的に確保する点に着目した．そこで記事の保
存時に，記事の表示領域のサイズを JavaScript のプロ
パティである”document.height”と”document.width”
を用いて取得し保存する．インデックスページでは，
<iFrame> のサイズを保存されている表示領域のサイ
ズに設定し，各記事を正しく表示する．
5
考察とまとめ
本稿では，専用エディタを用いない WYSIWYG 性
の高い Weblog 構築ツールを提案し，試作した．本シ
ステムの特徴は，1) 高い WYSIWYG 性のため，より
自由に記事を作成できる点，2) コメントに関しても表
現方法が広がるため，より多彩な意見交換ができる点，
3) シームレスな編集により編集の煩雑さが軽減される
点である．特に，シームレスな編集は編集後の確認作
業がなくなるため，更新頻度の高い Weblog には非常
に有用だと考えられる．また，<TEXTAREA> に文章
を入力するこれまでの Weblog 構築ツールに比べ，よ
り多様なデザインの記事を容易に作成できる．
参考文献
[1] 西健太郎，新谷虎松，松尾徳朗，田代慎治，伊藤
孝行：既存 Web ブラウザを利用したオンライン
編集可能な Web ページの実現，電気学会論文誌
（部門誌）C，電気学会，2005 年 4 月号掲載予定
[2] MovableType
http://www.movabletype.jp/
[3] Macromedia Dreamweaver
http://www.macromedia.com/

Download Report