JP4822966B2

JP4822966B2 - ホームページ作成支援システム

Info

Publication number: JP4822966B2
Application number: JP2006200053A
Authority: JP
Inventors: 聡一大原; 岳大時田; 啓之山田
Original assignee: Nomura Research Institute Ltd
Current assignee: Nomura Research Institute Ltd
Priority date: 2006-07-21
Filing date: 2006-07-21
Publication date: 2011-11-24
Anticipated expiration: 2026-07-21
Also published as: JP2008027249A

Description

この発明はホームページ作成支援システムに係り、特に、クライアント端末側に専用のアプリケーションプログラムを準備しておかなくても、汎用のWebブラウザプログラムを通じてサーバと連携することにより、クライアント端末上における画像の編集、及びサーバに対する編集結果のアップロードを可能とするシステムに関する。

個人や企業がホームページを作成する場合、ホームページ作成用のアプリケーションプログラムを用いてクライアント端末上でHtmlファイルを作成し、ファイル転送プログラムを用いてWebサーバにアップロードするのが一般的である。
また最近は、ホームページ作成支援サイトにアクセスすることにより、クライアント端末に特別なアプリケーションプログラムをセットアップすることなく、汎用的なWebブラウザプログラムを通じてホームページを編集し、そのまま編集結果をWebサーバにアップロードできるサービスも登場している。
バリアフリー・ホームページ作成システム／オープンセサミ［平成１８年５月３０日検索］インターネットURL:http://sesames.jp/

このように、Webベースでのホームページ作成支援サービスを利用する場合には、クライアント端末に専用のアプリケーションプログラムをセットアップする必要がないため、初心者でも気軽にホームページを作成可能となる。

ところで、ホームページといえば、様々な画像を配置させることによって見栄えを良くすることが不可欠であり、これまでのホームページ作成支援サービスにおいても、画像イメージをホームページ上に貼り付ける機能は一応備えていた。
例えば、非特許文献１の支援サービスにおいては、ユーザがWebブラウザ上に表示された画像挿入ボタンをクリックすると、ファイル選択ダイアログが開き、クライアント端末のフォルダ構造が表示される。これに対し、ユーザが特定のフォルダに格納された特定の画像ファイルを選択すると、該当の画像データが編集画面上に貼り付けられる。この画像に対しユーザは、回転や拡大・縮小、トリミング等の簡単な編集を行うこともできる。

しかしながら、従来の支援サービスの場合、ホームページ上に挿入できる図形は、JPEGやGIF、BMP等の画像ファイルとしてクライアント端末等のディスク上に格納されている必要があり、他のアプリケーションプログラムで作成され、クリップボード（メインメモリの一領域）に転送された画像データを直接編集画面に貼り付けることができず、大変不便であった。

この発明は、上記従来技術の問題点に鑑みて案出されたものであり、ユーザが専用のアプリケーションプログラムをクライアント端末にセットアップすることなく、Webブラウザ上で手軽にホームページの作成・編集ができるという利点はそのままに、クリップボード上の画像データを直接編集画面に貼り付けることを可能とするホームページ作成支援システムを提供することを目的としている。

上記の目的を達成するため、請求項１に記載したホームページ作成支援システムは、クライアント端末とサーバを備えたシステムであって、上記サーバは、上記クライアント端末に制御用プログラムが記述されたホームページ編集用のHtmlフォームを送信する手段と、上記クライアント端末から編集用プログラム及び送信用プログラムの送信リクエストが送信された場合に、各プログラムを当該クライアント端末に送信する手段と、上記クライアント端末から送信された画像データに基づいて画像ファイルを生成する手段と、上記クライアント端末から送信されたテキストデータ及び上記画像ファイルに基づいてHtmlファイルを生成する手段と、このHtmlファイル及び上記画像ファイルを所定の記憶手段に格納する手段を備え、上記クライアント端末は、サーバから送信されたHtmlフォームをディスプレイに表示させるWebブラウザプログラムを備え、上記Htmlフォーム中に記述された制御用プログラムは、クライアント端末の所定領域に上記編集用プログラム及び送信用プログラムが格納されているか否かをチェックし、存在しない場合には上記サーバに各プログラムの送信リクエストを送信する機能を備え、上記編集用プログラムは、上記Htmlフォーム中に画像編集領域及びテキスト編集領域を表示させる機能と、クライアント端末のクリップボードに格納された画像データを取り込み、上記画像編集領域中に直接貼り付ける機能と、上記テキスト編集領域にテキストを入力させる機能を備え、上記送信用プログラムは、上記画像編集領域に貼り付けられた画像データ及び上記テキスト編集領域に入力されたテキストデータを、上記サーバに送信する機能を備え、さらに、上記Htmlフォームにはプレビューボタンが含まれており、上記制御用プログラムは、上記プレビューボタンが選択された場合に、プレビュー画面用のHtmlファイルを生成する機能と、Webブラウザプログラムを介して上記Htmlファイルをプレビュー画面としてディスプレイに表示させる機能を備え、上記編集用プログラムは、上記プレビューボタンが選択された場合に、上記画像編集領域に表示された画像データをファイル化してクライアント端末のディスクに格納する機能と、この画像ファイルのリンク情報を上記制御用プログラムに渡し、上記Htmlファイル中に記述させる機能と、上記のプレビュー画面が閉じられた場合に、上記画像ファイルをディスク上から削除する機能を備えたことを特徴としている。

この発明に係るホームページ作成支援システムにあっては、サーバからクライアント端末にホームページ編集用のHtmlフォーム及び編集用プログラムが送信されるため、クライアント端末側では特別なアプリケーションプログラムを準備しなくても、汎用的なWebブラウザプログラムさえあればホームページの作成が可能となる。
また、編集用プログラムは、クライアント端末のクリップボードに格納された画像データをファイル化することなく、画像編集領域に直接貼り付ける機能を備えているため、ユーザの操作性が飛躍的に向上する利点を備えている。
さらに、プレビュー画面生成時には編集用プログラムによって画像データが自動的にファイル化されるため、プレビュー画面上にクリップボードから取り込んだ画像を表示させることが可能となり、より正確にホームページのイメージを確認することが可能となる。

図１は、この発明に係るホームページ作成支援システム10の全体構成図であり、このシステム10は、Webサーバ12と、DBサーバ14と、コンテンツサーバ16とを備えている。各サーバ間は、ネットワークによって接続されている。
また、Webサーバ12及びコンテンツサーバ16に対しては、インターネット等のネットワークを介して多数のクライアント端末18が接続されている。

クライアント端末18は、ＰＣ等のコンピュータよりなり、OS及びWebブラウザプログラムがセットアップされている。
図２は、クライアント端末18のハードウェア構成を示すブロック図であり、ＣＰＵ20と、メモリ22と、ハードディスク24と、キーボードやマウス等の入力装置26と、ディスプレイ28とを備えている。
クライアント端末18のＣＰＵ20は、ハードディスク24に格納されたOS、Webブラウザプログラム、その他のプログラムに従って動作することにより、後述の各種処理を実行する。

つぎに、図３のフローチャートに従い、クライアント端末18とWebサーバ12との間における処理の流れを説明する。
まず、クライアント端末18からWebサーバ12に対してホームページ作成用フォームの送信リクエストが発せられると（Ｓ10）、Webサーバ12からクライアント端末18にホームページ作成用のHtmlフォームが送信される（Ｓ12）。
この結果、図４に示すように、クライアント端末18のディスプレイ28上に、ホームページ作成用フォーム30が表示される（Ｓ14）。

図５に示すように、上記のフォーム30にはJavaScript等のスクリプト言語によって記述された制御用プログラム34が含まれており、クライアント端末18のＣＰＵ20は、この制御用プログラム34に従い、まずクライアント端末18に対応のプログラムが所定の領域に格納されているか否かをチェックする（Ｓ16）。
ここで、対応のプログラムが存在しないことが判明した場合、対応プログラムの送信リクエストがクライアント端末18からWebサーバ12に発せられる（Ｓ18）。
そして、Webサーバ12から対応のプログラムが送信されると（Ｓ20）、クライアント端末18のＣＰＵ20は、これをハードディスク24上の所定の領域に格納する（Ｓ22）。
対応のプログラムとしては、編集用プログラム36、送信用プログラム38、添付ファイル用プログラム40が該当する（詳細は後述）。

以後、クライアント端末18上では編集用プログラム36が起動され（Ｓ24）、ユーザは編集画面42を通じて画像データやテキストデータの入力や編集作業が実行される（Ｓ26）。
また、ユーザがホームページ上にファイルのダウンロードコーナーの設置を希望する場合、添付ファイル用プログラム40が起動され（Ｓ28）、任意のファイルが選択される（Ｓ30）。
最後に、ユーザがホームページ作成用フォーム30上で編集結果の登録を選択すると、送信用プログラム38が起動し（Ｓ32）、編集済の画像データやテキストデータ、添付ファイルをWebサーバ12に送信する（Ｓ34）。

これに対しWebサーバ12は、送信された画像データに基づいてJPEG等の画像ファイルを生成する（Ｓ36）。
つぎにWebサーバ12は、この画像ファイル及び送信されたテキストデータに基づいてHtmlファイルを生成し（Ｓ38）、所定のディレクトリに保存する。
つぎにWebサーバ12は、上記の画像ファイル及び添付ファイルをコンテンツサーバ16に送信すると共に（Ｓ40）、各ファイルの格納先を示すパス名（URL）をDBサーバ14に登録する（Ｓ42）。

以上をもってクライアント端末18上で編集されたホームページのアップロードが完了し、各クライアント端末18からの閲覧が可能となる。
すなわち、ユーザがクライアント端末18のWebブラウザ上で上記ホームページのURLを入力すると、Webサーバ12からHtmlファイルが送信されると同時に、コンテンツサーバ16から必要な画像ファイルがクライアント端末18に送信され、目的のホームページがディスプレイ28に表示される。
また、このホームページ上の添付ファイルボタンをユーザがクリックすると、コンテンツサーバ16から対応の添付ファイルがクライアント端末18に送信され、ハードディスク24に格納される。

つぎに、図６及び図７のフローチャートに従い、クライアント端末18における詳細な編集手順について説明する。
まず、クライアント端末18のWebブラウザプログラムにより、図４に示したホームページ作成用フォーム30がディスプレイ28に表示されると同時に（Ｓ50）、Webサーバ12からダウンロードした編集用プログラムが起動する（Ｓ52）。

この編集用プログラム36は、ActiveX（登録商標）コントロールよりなる。
ここでActiveX（登録商標）コントロールとは、米国Microsoft（登録商標）社が開発したソフトウェアの部品化技術であり、従来OLE（Object Linking and Embedding）コントロールと呼ばれていた技術に、インターネットに対応するための拡張を施したものを意味する。ActiveX（登録商標）コントロールはインターネットやイントラネットを通じてWebサーバからダウンロードされ、同社のWebブラウザであるInternet Explorer（登録商標）に機能を追加する形で使用される。
また、OLEとは、Windows（登録商標）OSにおいて、各種アプリケーションプログラムソフト間でデータを転送・共有するための仕組みを指している。

つぎにユーザが、編集画面42の「挿入」ボタン44をクリックし、プルダウンメニューから「画像」を選択すると（Ｓ54）、編集画面42内に画像編集領域46が表示される（Ｓ56）。この際ユーザは、編集画面42内に複数の画像編集領域46を表示させることもできる。
ここでユーザが任意の画像編集領域46を選択し、右クリックメニューの中から「貼り付け」を選択すると（Ｓ58）、編集用プログラム36はクリップボード（メモリ22）上に格納された画像データを取り出し、画像編集領域46内に挿入（表示）させる（Ｓ60）。

これに対しユーザは、選択された画像編集領域46の四隅及び各辺の中点に現れる小さな矩形状のハンドルをマウスでドラッグすることにより、拡大／縮小や縦横比の変更といった簡単な編集を行うことができる。
また、右クリックメニューを開き、回転、反転等の編集を行うことができる。

つぎにユーザが、編集画面42の「挿入」ボタン44をクリックし、プルダウンメニューから「テキスト」を選択すると（Ｓ62）、編集画面42内にテキスト編集領域48が表示される（Ｓ64）。この場合もユーザは、編集画面42内に複数のテキスト編集領域48を表示させることができる。
これに対しユーザは、任意のテキスト編集領域48をダブルクリックして入力待ち状態となした上で、キーボードを介して文字列を入力する（Ｓ66）。
またユーザは、ホームページ作成用フォーム30内に設けられた各種の文字入力エリア54に対して、ホームページのタイトルやカテゴリ、添付ファイルの名称やコメント等の文字列を打鍵入力する。

つぎにユーザが、ホームページ作成用フォーム30内に設けられた添付ファイル欄の参照ボタン56をクリックすると（Ｓ68）、添付ファイル用プログラム40が起動し（Ｓ70）、ファイル選択ダイアログ（図示省略）をディスプレイ28に表示させる（Ｓ72）。この添付ファイル用プログラム40も、ActiveX（登録商標）コントロールによって構成される。
これに対しユーザが、ハードディスク24内の所定ディレクトリに格納された特定ファイルを選択すると（Ｓ74）、添付ファイル用プログラム40は当該ファイル60をハードディスク24から取得する（Ｓ76）。

つぎにユーザがホームページ作成用フォーム30内に設けられたプレビューボタン58をクリックすると（Ｓ78）、編集用プログラム36は、画像編集領域46に表示されたメモリ22上の画像データを一時的にJPEG等のファイルに書き出し、ハードディスク24の所定領域にこの画像ファイル62を格納する（Ｓ80）。
つぎに制御用プログラム34は、ユーザの編集内容を反映させたHtmlファイルを生成し（Ｓ82）、Webブラウザプログラムを介してディスプレイ28上にプレビュー画面（図示省略）を表示させる（Ｓ84）。この結果、ユーザは作成途中のホームページのイメージを確認することができる。
このHtmlファイル中には、上記画像ファイル62へのリンク情報も埋め込まれているため、プレビュー画面においては編集中の画像イメージも表示される。

内容の確認を行った後、ユーザがプレビュー画面の閉じボタンをクリックすると（Ｓ86）、プレビュー画面が閉じると同時に、編集用プログラム36によって上記の画像ファイル62がハードディスク24上から削除される（Ｓ88）。
この後ユーザは、元のホームページ作成用フォーム30に戻り、画像や文字の編集を続けることができる。

ホームページの編集を終了したユーザが登録ボタン66をクリックすると（Ｓ90）、送信用プログラム38が起動し（Ｓ92）、制御用プログラム34から上記のフォーム30を通じて入力されたテキストデータを取得すると同時に、制御用プログラム34を通じて編集用プログラム36から上記の画像データを取得し、添付ファイル用プログラム40からユーザが選択した添付ファイル60を取得する（Ｓ94）。
つぎに送信用プログラム38は、HTTPプロトコルに従い、各データ及びファイルをWebサーバ12に送信する（Ｓ96）。
この送信用プログラム38も、ActiveX（登録商標）コントロールによって構成される。

この発明に係るホームページ作成支援システム10にあっては、上記のように編集用プログラム36がOLE機能を備えたActiveX（登録商標）コントロールによって構成されているため、Webブラウザベースでホームページを編集中に、他のアプリケーションプログラムによって作成され、クリップボードに一時的に格納された画像データを、ファイルに書き出すまでもなく画像編集領域46内に直接貼り付けることが可能となり、編集効率を飛躍的に高めることができる。

この発明に係るホームページ作成支援システムの全体構成図である。クライアント端末のハードウェア構成を示すブロック図である。クライアント端末とWebサーバとの間における処理の流れを説明するフローチャートである。ホームページ作成用フォームを示す説明図である。クライアント端末におけるソフトウェア構成を示すブロック図である。クライアント端末におけるホームページの作成手順を示すフローチャートである。クライアント端末におけるホームページの作成手順を示すフローチャートである。

符号の説明

10 ホームページ作成支援システム
12 Webサーバ
14 DBサーバ
16 コンテンツサーバ
18 クライアント端末
20 ＣＰＵ
22 メモリ
24 ハードディスク
26 入力装置
28 ディスプレイ
30 ホームページ作成用のHtmlフォーム
34 制御用プログラム
36 編集用プログラム
38 送信用プログラム
40 添付ファイル用プログラム
42 編集画面
44 挿入ボタン
46 画像編集領域
48 テキスト編集領域
54 文字入力エリア
56 添付ファイルの参照ボタン
58 プレビューボタン
60 添付ファイル
62 画像ファイル
66 登録ボタン

Claims

クライアント端末とサーバを備えたシステムであって、
上記サーバは、上記クライアント端末に制御用プログラムが記述されたホームページ編集用のHtmlフォームを送信する手段と、
上記クライアント端末から編集用プログラム及び送信用プログラムの送信リクエストが送信された場合に、各プログラムを当該クライアント端末に送信する手段と、
上記クライアント端末から送信された画像データに基づいて画像ファイルを生成する手段と、
上記クライアント端末から送信されたテキストデータ及び上記画像ファイルに基づいてHtmlファイルを生成する手段と、
このHtmlファイル及び上記画像ファイルを所定の記憶手段に格納する手段を備え、
上記クライアント端末は、サーバから送信されたHtmlフォームをディスプレイに表示させるWebブラウザプログラムを備え、
上記Htmlフォーム中に記述された制御用プログラムは、クライアント端末の所定領域に上記編集用プログラム及び送信用プログラムが格納されているか否かをチェックし、存在しない場合には上記サーバに各プログラムの送信リクエストを送信する機能を備え、
上記編集用プログラムは、上記Htmlフォーム中に画像編集領域及びテキスト編集領域を表示させる機能と、クライアント端末のクリップボードに格納された画像データを取り込み、上記画像編集領域中に直接貼り付ける機能と、上記テキスト編集領域にテキストを入力させる機能を備え、
上記送信用プログラムは、上記画像編集領域に貼り付けられた画像データ及び上記テキスト編集領域に入力されたテキストデータを、上記サーバに送信する機能を備え、
さらに、上記Htmlフォームにはプレビューボタンが含まれており、
上記制御用プログラムは、上記プレビューボタンが選択された場合に、プレビュー画面用のHtmlファイルを生成する機能と、Webブラウザプログラムを介して上記Htmlファイルをプレビュー画面としてディスプレイに表示させる機能を備え、
上記編集用プログラムは、上記プレビューボタンが選択された場合に、上記画像編集領域に表示された画像データをファイル化してクライアント端末のディスクに格納する機能と、この画像ファイルのリンク情報を上記制御用プログラムに渡し、上記Htmlファイル中に記述させる機能と、上記のプレビュー画面が閉じられた場合に、上記画像ファイルをディスク上から削除する機能を備えたことを特徴とするホームページ作成支援システム。