JP2018136786A - ウェブページ制作支援システム - Google Patents

ウェブページ制作支援システム Download PDF

Info

Publication number
JP2018136786A
JP2018136786A JP2017031298A JP2017031298A JP2018136786A JP 2018136786 A JP2018136786 A JP 2018136786A JP 2017031298 A JP2017031298 A JP 2017031298A JP 2017031298 A JP2017031298 A JP 2017031298A JP 2018136786 A JP2018136786 A JP 2018136786A
Authority
JP
Japan
Prior art keywords
information
web page
image
web
area
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
JP2017031298A
Other languages
English (en)
Other versions
JP6235744B1 (ja
Inventor
鈴木 英樹
Hideki Suzuki
英樹 鈴木
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Every Tunes Inc
Original Assignee
Every Tunes Inc
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Every Tunes Inc filed Critical Every Tunes Inc
Priority to JP2017031298A priority Critical patent/JP6235744B1/ja
Priority to PCT/JP2017/018036 priority patent/WO2018154801A1/ja
Application granted granted Critical
Publication of JP6235744B1 publication Critical patent/JP6235744B1/ja
Publication of JP2018136786A publication Critical patent/JP2018136786A/ja
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F12/00Accessing, addressing or allocating within memory systems or architectures
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F13/00Interconnection of, or transfer of information or other signals between, memories, input/output devices or central processing units
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/12Use of codes for handling textual entities

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

【課題】ページ制作者の意図に沿った独自性のあるウェブページの制作を支援する。【解決手段】WWWサーバ11は、ウェブページの意匠デザインを表すデザイン情報と、ウェブページの機能に関する設定情報とをクライアント端末20から受領し、受領したデザイン情報と設定情報とをデータベース12,13に保存する。WWWサーバ11は、保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを閲覧側のウェブクライアントにおいて自動的に生成して表示するための生成プログラムを作成する。WWWサーバ11は、閲覧要求に該当のウェブページに対応するデザイン情報と、当該ウェブページを生成するための生成プログラムとを含む閲覧用データを、閲覧要求元のクライアント端末30へ送信する。【選択図】 図1

Description

本開示は、ウェブページの制作を支援するウェブページ制作支援システムに関する。
インターネット上のワールド・ワイド・ウェブ(略名:WWW又はウェブ)で公開・閲覧されるウェブページには、例えば、マウスオーバーやクリックといった閲覧者による操作に反応して何らかの処理を実行する機能を有するものが知られている。また、特許文献1には、予め準備された特定のデータに基づいて、定型のウェブページを自動制作する技術が記載されている。
特開2001−273233号公報
閲覧者からの操作に対応する処理を実行する機能を持つウェブページを制作するにあたって、元となるデザイン画像から、HTML、XHTML、CSS等のプログラミング言語を駆使して、当該ウェブページを構成するデータを制作するコーディング作業が必要であった。この種のコーディング作業は、専門的な知識や多大な手間が必要であり、専門的な知識や経験の乏しい人には敷居が高いという問題がある。
一方、特許文献1には、ウェブページを自動制作する技術が記載されているものの、定型のフォーマットに沿ったウェブページに限られ、デザインの自由度が低い。そのため、ウェブページを制作してこれをWWWで公開しようとする人(以下、ページ制作者という)の意図に沿った独自性のあるウェブページを制作することには適していない。
本開示は、上記問題を解決するためになされたものである。本開示は、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援するための技術を提供する。
本開示の一態様にかかるウェブページ制作支援システムは、受領部と、保存部と、プログラム作成部と、送信部とを備える。受領部は、制作すべきウェブページの意匠デザインを表す少なくとも1つの画像情報を含むデザイン情報と、当該ウェブページの機能に関する設定を表す設定情報とを、ウェブページの制作を依頼するウェブクライアントから受領するように構成されている。このうち、設定情報には、ウェブページに設けられる少なくとも1つのクリッカブル領域の画像上の座標を表す座標情報が含まれる。
プログラム作成部は、保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを閲覧するウェブクライアント側で、当該ウェブページに対応するデザイン情報及び設定情報に応じたウェブページを自動的に生成して表示するための生成プログラムを作成するように構成されている。このプログラム作成部は、生成プログラムとして、次のような機能を有するウェブページを生成する生成プログラムを作成するように構成されている。
そのウェブページは、ウェブブラウザ上にデザイン情報の画像情報を表示する。そして、その表示された画像情報において、設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、ウェブブラウザにクリッカブル領域として認識させる。
送信部は、ウェブページに対するウェブクライアントからの閲覧要求に応じて、当該ウェブページに対応する閲覧用データを、閲覧要求元のウェブクライアントへ送信するように構成されている。この閲覧用データには、当該ウェブページに対応するデザイン情報と、当該ウェブページを生成するための生成プログラムとが含まれる。
上述のウェブページ制作支援システムによれば、ウェブページの制作を依頼するウェブクライアントから、少なくとも1つの画像情報を含むデザイン情報と設定情報とをアップロードするだけで、クリッカブルな機能を有するウェブページを制作することができる。したがって、ページ制作者がコーディング作業等に必要な専門的な知識を持っていなくても、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援することができる。
本開示のウェブページ制作支援システムにおいては、さらに、以下の構成を採用してもよい。受領部は、前記デザイン情報として、非アクティブ画像情報、及びアクティブ画像を含むデザイン情報を受領するように構成されている。非アクティブ画像情報は、ウェブページに設けられる少なくとも1つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない状態を表す画像情報である。アクティブ画像情報は、非アクティブ画像情報に対応する画像情報であって、クリッカブル領域に対応する画像領域が操作の対象となっている状態を表す画像情報である。
そして、プログラム作成部は、前記生成プログラムとして、次のような機能を有するウェブページを生成する生成プログラムを作成するように構成されている。そのウェブページは、ウェブブラウザ上に非アクティブ画像情報を表示する。そして、その表示された非アクティブ画像情報において、設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、非アクティブ画像情報内の当該クリッカブル領域に該当する画像領域を、対応するアクティブ画像情報における当該クリッカブル領域に該当する画像領域に差し替えて表示させる。
上述のウェブページ制作支援システムによれば、クリッカブル領域への操作に対して、ページ制作者の意図に沿った画像の変化を起す機能を有するウェブページを制作することができる。
本開示のウェブページ制作支援システムにおいては、公開処理部を更に備えるように構成されていてもよい。公開処理部は、保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを、ワールド・ワイド・ウェブでの公開対象として登録するように構成されている。このような構成によれば、ウェブページの制作を依頼するウェブクライアントからデザイン情報と設定情報とをアップロードするだけで、ウェブページが自動的にWWWに公開される。これにより、閲覧者側のウェブクライアントから容易に検索をすることができるようになるので、ウェブページが閲覧される機会を増すことができる。
本開示のウェブページ制作支援システムにおいては、さらに、以下の構成を採用してもよい。具体的には、受領部は、クリッカブル領域に対する所定の実行操作が入力されたときに実行すべき機能を表す機能情報を更に含む設定情報を受領するように構成されている。そして、プログラム作成部は、生成プログラムとして、次のような機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている。そのウェブページは、表示された画像情報において、設定情報の座標情報で示されるクリッカブル領域に対する実行操作が入力されたときに、設定情報における当該クリッカブル領域の機能情報で示される機能を実行させる機能を更に有する。
また、受領部は、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアントの少なくとも何れかに関する機能情報を含む設定情報を受領するように構成されているとよい。上述のウェブページ制作支援システムによれば、更に、ウェブページ上のクリッカブル領域が操作された際に実行すべき処理に関して、ページ制作者の意図に沿って様々な機能を有するウェブページの制作を支援することができる。
本開示のウェブページ制作支援システムにおいては、さらに、以下の構成を採用してもよい。具体的には、受領部は、画像情報がウェブブラウザ上でウェブページとして表示されるときに、画像情報の全横幅のうち表示を必須とする横幅方向の範囲を定義する情報であるコンテンツ幅情報を更に取得するように構成されている。また、保存部は、更に、受領部によって受領されたコンテンツ幅情報を当該ウェブページに関する識別情報に対応付けて記憶装置に保存するように構成されている。
そして、プログラム作成部は、生成プログラムとして、次のような機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている。そのウェブページは、ウェブブラウザ上に画像情報を表示する際、当該画像情報に対応するコンテンツ幅情報で表される領域であるコンテンツ領域の横幅全体をウェブブラウザの横幅方向の表示対象に含める。かつ、当該画像情報のうちコンテンツ領域以外の横幅方向の領域であってウェブブラウザの表示領域の横幅を超える部分については、ウェブブラウザの横幅方向の表示対象から除外する。
上述のウェブページ制作支援システムによれば、例えば、アップロードされる画像情報のうち、ウェブページにおいて閲覧者に伝達したいメッセージ等の主要な情報を含む領域をコンテンツ領域として設定できる。このコンテンツ領域については、ウェブブラウザの表示範囲の幅に関わらず必ず表示されるようになっている。一方、コンテンツ領域以外の領域については、ウェブブラウザの表示幅に一致する背景として表示されるようになっている。このように、アップロードされる画像情報に対して、ページ制作者の意図に沿って主要なコンテンツ領域と背景とを使い分けることが可能な態様にてウェブページを制作することができる。
システム全体の構成を表すブロック図。 認証処理の手順を表すフローチャート。 制作依頼画面の一例。 ウェブページの意匠デザインを表す画像の一例。 制作依頼画面の一例。 制作依頼画面の一例。 制作依頼画面の一例。 制作依頼画面の一例。 制作依頼受付処理の手順を表すフローチャート。 デザイン情報及び設定情報が保存されるテーブルの一例。 閲覧要求受付処理の手順を表すフローチャート。 ウェブページの表示例。 コンテンツ幅の設定手順を表す説明図。 コンテンツ幅の設定に基づくウェブページの表示手順を表す説明図。
以下、本開示の実施形態を図面に基づいて説明する。なお、本開示は下記の実施形態に限定されるものではなく様々な態様にて実施することが可能である。
[ネットワークシステムの構成の説明]
実施形態のウェブページ制作支援システム1を含むネットワークの構成について、図1を参照しながら説明する。
ウェブページ制作支援システム1は、ウェブページの制作を支援するサービスを運営する運営者により管理されるコンピュータシステムであり、インターネット100に接続されている。このウェブページ制作支援システム1は、WWWサーバ11と、デザイン情報データベース12と、設定情報データベース13とを備える。
WWWサーバ11は、インターネット100に接続されたウェブクライアントからの要求に応じて各種情報を提供するサーバコンピュータであり、図示しないCPU、RAM、ROM、補助記憶装置、入出力インタフェース等を中心に構成されている。このWWWサーバ11は、ウェブページの制作を依頼するウェブクライアント(例えば、クライアント端末20)から、ウェブページの基となる情報を受領し、これらの情報から構築され得るウェブページをWWWに公開する機能を有する。
また、WWWサーバ11は、公開したウェブページに対してウェブクライアント(例えば、クライアント端末30)から閲覧要求を受付けた場合、当該ウェブページを構築するために必要な情報を、閲覧要求元のウェブクライアントに送信する機能を有する。これらの機能は、例えば、WWWサーバ11に実装された周知のPHP:Hypertext Preprocessorスクリプトを実行することにより実現される。
デザイン情報データベース12は、ウェブページの制作を依頼したウェブクライアントから受領したウェブページの基となる情報のうち、ウェブページの意匠デザインに関する情報を含むデザイン情報を保存するためのデータベースである。設定情報データベース13は、ウェブページの制作を依頼したウェブクライアントから受領したウェブページの基となる情報のうち、ウェブページに付与される機能の設定に関する情報を含む設定情報を保存するためのデータベースである。なお、ウェブページ制作支援システム1を構成するWWWサーバ11、デザイン情報データベース12、及び設定情報データベース13は、それぞれ別体の装置であってもよいし一体の装置として構成されていてもよい。
また、インターネット100には、ウェブサイトの閲覧を行うためのウェブブラウザを備えるクライアント端末20,30が接続されている。これらのクライアント端末20,30は、例えば、パーソナルコンピュータや、いわゆるスマートフォンやタブレットコンピュータ等の携帯端末により具現化される。なお、図1では、説明を簡潔にするためにクライアント端末20,30をそれぞれ一台ずつ図示しているが、多数のクライアント端末20,30がインターネット100に接続されていてもよい。
クライアント端末20は、インターネット100を介してウェブページ制作支援システム1に対してウェブページの制作を依頼するウェブクライアントとして機能するコンピュータである。クライアント端末30は、インターネット100を介してウェブページ制作支援システム1によりWWWに公開されたウェブページを閲覧するウェブクライアントとして機能するコンピュータである。また、クライアント端末20,30は、例えば、JavaScript(登録商標)等の特定のスクリプト言語で構築されたクライアントサイド・アプリケーションを実行する機能を有する。
[認証処理の説明]
WWWサーバ11が実行する認証処理の手順について、図2のフローチャートを参照しながら説明する。この処理は、ウェブページの制作を依頼するクライアント端末20で動作するウェブブラウザからの要求を受付けたときに実行される。
S100では、WWWサーバ11は、依頼元のクライアント端末20に係るユーザに対する認証を行う。具体的には、WWWサーバ11は、ユーザを識別するための認証コードをクライアント端末20から受信し、この受信した認証コードと、正当なユーザとして予め登録されている認証コードとが一致するか否かを判断することにより、ユーザの認証を行う。
S102では、WWWサーバ11は、S100の結果、ユーザの認証を受理したか否かを判定する。ユーザの認証を受理しない場合(S102:NO)、WWWサーバ11はS100の処理に戻る。一方、ユーザの認証を受理した場合(S102:YES)、WWWサーバ11はS104の処理に進む。
S102で肯定判定をした場合に進むS104では、WWWサーバ11は、依頼用アプリケーションのプログラムを、依頼元のクライアント端末20のウェブブラウザに送信する。この依頼用アプリケーションは、クライアント端末20のウェブブラウザ上で実行されるクライアントサイド・アプリケーションであり、例えばJavaScript等のスクリプト言語で構築されている。この依頼用アプリケーションは、制作すべきウェブページの基となる情報をユーザに入力させるためのGUIで構成される制作依頼画面をウェブブラウザの表示画面に表示させ、そのGUIに従って入力された情報をWWWサーバ11にアップロードする機能を有する。
[情報入力処理の説明]
ウェブページの制作を依頼するクライアント端末20のウェブブラウザによって行われる情報入力処理の手順について、図3〜図8を参照しながら説明する。この処理は、クライアント端末20のウェブブラウザが、WWWサーバ11から受信した依頼用アプリケーションのスクリプトを実行することにより実現する。
クライアント端末20のウェブブラウザによって情報入力処理が開始されると、初期画面として、図3に例示されるような制作依頼画面40がウェブブラウザの表示画面上に表示される。図3に例示される制作依頼画面40の初期画面では、制作すべきウェブページの意匠デザインを表す画像情報や、当該ウェブページの概要を表す基本情報等を入力するためのユーザインタフェースが表示されている。
図3に例示されるとおり、制作依頼画面40には画像表示領域41が設けられている。この画像表示領域41は、制作すべきウェブページの意匠デザインを表す画像を取得して表示するためのユーザインタフェースである。図3に例示される初期画面においては、画像表示領域41には、意匠デザインを表す画像情報、すなわち画像ファイルを入力することを促すメッセージが記述されている。本実施形態では、ユーザがウェブブラウザ上で任意のファイルフォルダを開いて画像ファイルを選択するか、画像ファイルを示すアイコンを画像表示領域41上にドラッグ・アンド・ドロップする操作を行うことで、画像ファイルを入力できるようになっている。
なお、本実施形態では、ウェブページの意匠デザインを表す画像情報として、図4に例示されるような非アクティブ画像50及びアクティブ画像51の2種類の画像情報が入力されることを前提としている。これらの非アクティブ画像50及びアクティブ画像51は、文書やハイパーテキスト等の仕組みを含まない単純なビットマップ画像で構成されている。
非アクティブ画像とは、ウェブページの意匠デザインを表す画像であって、当該ウェブページに設けられる少なくとも1つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない、素の状態を表す画像である。一方、アクティブ画像とは、非アクティブ画像情報に対応する画像であって、クリッカブル領域に対応する画像領域が操作の対象となっている状態を表す画像である。なお、クリッカブル領域とは、ウェブブラウザの表示画面上で、マウスやタッチパッド等のポインティングデバイスによるポイント・アンド・クリックの操作(以下、単に「クリック」という)が入力されたときに、所定の処理を実行する特定の画像領域である。
図4の事例では、素の状態を表す非アクティブ画像50に対応するアクティブ画像51として、クリッカブル領域に相当する画像領域51a,51b,51c,51dに対して網掛け等の強調表示が施されているものとする。なお、クリッカブル領域以外の画像領域については両者の画像は同一である。
図3の説明に戻る。さらに、制作依頼画面40には情報入力領域42が設けられている。情報入力領域42は、制作すべきウェブページに関する基本情報を入力するためのユーザインタフェースを有する。この情報入力領域42には、符号42a〜42g,43で示される複数種類のテキストボックスやドロップダウンリスト、ボタン等のユーザインタフェースが設けられている。
符号42aは、ウェブページのタイトルを表すテキスト情報を入力するためのテキストボックスである。符号42bは、ウェブページによる情報提供の主体(すなわち、広告主)の名称を表す情報を入力するためのテキストボックスである。符号42cは、ウェブページの簡単な要約文や説明文を表す情報を入力するためのテキストボックスである。符号42dは、ウェブページの特徴を表す単語であって、インターネット上の情報を検索する周知の検索エンジンによる検索の対象となり得るキーワードを表す情報を入力するためのテキストボックスである。符号42eは、ウェブページをWWWに公開する期間を表す情報を入力するためのテキストボックスである。
符号42fは、ウェブページをWWWに公開するか否かを指定する指示を、複数の選択肢の中から1つ選択するプルダウンメニューである。符号42gは、ウェブページの表示形式を指定する指示を、複数の選択肢の中から1つ選択するプルダウンメニューである。例えば、ウェブページが、パソコンでの表示に専用されるものであるか、スマートフォンでの表示に専用されるものであるか、パソコン及びスマートフォンでの表示に共用されるものであるかを選択できるようになっている。符号43は、画像情報及び基本情報の入力を完了し、制作依頼画面40を次の画面に遷移させる指示を与えるボタンである。
図3に例示される初期画面に従って、ユーザが制作依頼画面40に画像情報及び基本情報を入力した後の状態を図5に例示する。図5に例示されるとおり、制作依頼画面40の画像表示領域41には、ユーザにより入力された画像が表示されている。ただし、画像表示領域41には、図4に例示される非アクティブ画像50及びアクティブ画像51の2つの画像のうち、アクティブ画像51の上に非アクティブ画像50が重ねて描画されており、ユーザには非アクティブ画像50だけが見える状態になっている。あるいは、非アクティブ画像50を画像表示領域41に表示し、その横にアクティブ画像51を非表示状態で並べて配置してもよい。また、情報入力領域42の各ボックス42a〜42gには、ユーザにより入力又は選択された各種情報が表示されている。
図5に例示される状態からボタン43がクリックされると、これまでに入力された各情報が確定し、制作依頼画面40は図6〜図8に例示される次の入力受付状態に移行する。図6〜図8に例示される制作依頼画面40では、ウェブページに付与される機能の設定に関する情報の入力を受け付ける。
具体的には、画像表示領域41に表示された画像上において、マウスやタッチパッド等のポインティングデバイスによりクリッカブル領域に設定すべき領域を指定できるようになっている。例えば、矩形の左上の頂点に相当する座標をクリックし、そのまま右下の座標までドラッグする操作により、矩形のクリッカブル領域の座標範囲を指定することができる。続いて、指定されたクリッカブル領域がクリックされたときに実行すべき処理の内容を設定できるようになっている。これらの操作を繰り返し行うことで、複数のクリッカブル領域の機能を設定することができるようになっている。
図6は、画像表示領域41に表示されている画像上において、符号51aのクリッカブル領域が指定された状況を表している。このとき、アクティブ画像51の上に重ねて表示されている非アクティブ画像50のうち、クリッカブル領域51aに該当する画像領域が、アクティブ画像51における対応する画像領域に差し替えられて表示されている。あるいは、非アクティブ画像50の横にアクティブ画像51を非表示状態で並べて配置し、非アクティブ画像50上でクリッカブル領域が指定されると、その部分だけ非アクティブ画像51における対応する画像領域が一定分スライドした画像を表示する構成であってもよい。
また、クリッカブル領域51aが指定されることにより、設定ウィンドウ45aがクリッカブル領域51aの近傍にポップアップ表示される。この設定ウィンドウ45aは、クリッカブル領域51aに割り当てる機能を設定するためのユーザインタフェースである。設定ウィンドウ45aの中には、テキストボックス46aが設けられている。このテキストボックス46aに実行すべき処理の内容を示す情報が入力され、設定ウィンドウ45aの内の適用ボタン47aがクリックされることにより、クリッカブル領域51aの範囲及び機能が確定するようになっている。
図6の事例では、設定ウィンドウ45a内のテキストボックス46aに、インターネット上のウェブサイトのリソースを指すURLが入力されている。ここに、URLが入力されることで、クリッカブル領域51aの機能として、ハイパーリンク機能による移動先のウェブサイトが設定されるようになっている。また、図6に例示されるとおり、制作依頼画面40の右側領域にはリンク情報表示領域44が設けられている。このリンク情報表示領域44には、クリッカブル領域51aの機能として設定されたリンク先のURLを表す情報44aが表示されている。
つぎに、図7は、図6に例示される状況から更に別のクリッカブル領域51bが設定された状況を表している。このとき、アクティブ画像51の上に重ねて表示されている非アクティブ画像50のうち、クリッカブル領域51bに相当する画像領域が、アクティブ画像51における対応する画像領域に差し替えられて表示されている。
また、クリッカブル領域51bが指定されることにより、設定ウィンドウ45bがクリッカブル領域51bの近傍にポップアップ表示される。この設定ウィンドウ45bは、クリッカブル領域51bに割り当てる機能を設定するためのユーザインタフェースである。設定ウィンドウ45bの中に設けられているフォーム使用ボタン48がクリックされると、テキストボックス46b内に「"フォーム使用"」という文字列が自動入力される。ここに、「"フォーム使用"」が入力されることで、クリッカブル領域51bの機能として、入力フォームが起動する機能が設定されるようになっている。そして、設定ウィンドウ45bの内の適用ボタン47bがクリックされることにより、クリッカブル領域51bの範囲及び機能が確定する。また、図7に例示されるとおり、リンク情報表示領域44には、クリッカブル領域51bの機能として設定された"フォーム使用"を表す情報44bが表示されている。
つぎに、図8は、図6及び図7の事例において説明した手順と同様に、更に別のクリッカブル領域51c,51dが設定された状況を表している。図8の事例では、クリッカブル領域51cの機能として、指定された電話番号を通話相手として電話かける電話アプリケーションを起動する機能が設定されている。また、クリッカブル領域51dの機能として、指定された電子メールアドレスを宛先として電子メールクライアントを起動する機能が設定されている。
また、図8に例示されるとおり、リンク情報表示領域44には、クリッカブル領域51cの機能として設定された、電話の通話先の電話番号を表す情報44cが表示されている。また、リンク情報表示領域44には、クリッカブル領域51dの機能として設定された、電子メールの宛先を示す電子メールアドレスを表す情報44dが表示されている。
そして、ウェブページに付与すべき全ての機能について、クリッカブル領域の範囲及び機能をユーザが入力し終えた後、リンク情報表示領域44内に設けられた公開ボタン49がクリックされることにより、制作依頼画面40を通じてユーザから入力された各情報が、WWWサーバ11にアップロードされるようになっている。
ここでは、ウェブページの意匠デザインを表す画像情報(すなわち、非アクティブ画像及びアクティブ画像のファイル)と、当該ウェブページの基本情報とが、デザイン情報としてWWWサーバ11にアップロードされる。また、ウェブページ上の各クリッカブル領域の座標範囲を表す座標情報と、各クリッカブル領域の機能を表す情報とが、設定情報としてWWWサーバ11にアップロードされる。
[制作依頼受付処理の説明]
WWWサーバ11が実行する制作依頼受付処理の手順について、図9のフローチャートを参照しながら説明する。この処理は、図2に例示される認証処理に続いて実行される処理である。
S200では、WWWサーバ11は、依頼元のクライアント端末20のウェブブラウザによって実行された情報入力処理においてアップロードされたデザイン情報と設定情報とを受信する。ここで受信するデザイン情報には、ウェブページの意匠デザインを表す画像情報(すなわち、非アクティブ画像及びアクティブ画像のファイル)と、当該ウェブページの基本情報とが含まれる。また、設定情報には、ウェブページ上の各クリッカブル領域の座標範囲を表す座標情報と、各クリッカブル領域の機能を表す情報とが含まれる。
S202では、WWWサーバ11は、S200で受信したデザイン情報と設定情報とを、ウェブページを識別するための識別情報に対応付けて、デザイン情報データベース12及び設定情報データベース13に保存する。具体的には、WWWサーバ11は、ウェブページの基本情報の内容等を記述したテーブルである「ページ」テーブルを作成し、その「ページ」テーブルと、非アクティブ画像及びアクティブ画像のファイルとをデザイン情報データベース12に保存する。また、WWWサーバ11は、設定情報の内容を記述したテーブルである「リンク設定」テーブルを作成し、設定情報データベース13に保存する。
ここで、「ページ」テーブル及び「リンク設定」テーブルの具体的な内容について、図10を参照しながら説明する。図10に例示されるとおり、「ページ」テーブル60には、「ID」、「タイトル」、「会社名・店名」、「タグ」、「説明」、「画像ファイル名」等の項目が設けられている。このうち、「ID」の項目には、ウェブページを識別するために付与される固有の識別情報が記述される。この「ID」の項目は、複数桁の数字列で表現される。
「タイトル」の項目には、ウェブページのタイトルが記述される。この「タイトル」項目は、テキスト情報で表現される。「タイトル」項目に記述される内容は、図5に例示されるテキストボックス42aに入力された内容である。「会社名・店名」の項目には、ウェブページの広告主の名称が記述される。この「会社名・店名」の項目は、テキスト情報で表現される。「会社名・店名」の項目に記述される内容は、図5に例示されるテキストボックス42bに入力された内容である。「説明」の項目には、ウェブページの要約や説明文が記述される。この「説明」の項目は、テキスト情報で表現される。「説明」の項目に記述される内容は、図5に例示されるテキストボックス42cに入力された内容である。これらの「タイトル」、「会社名・店名」及び「説明」の各項目に記述された情報は、インターネット上で検索エンジンの機能を提供する周知の検索サイトによる検索結果において、閲覧者に対して提示され得る情報である。
「タグ」の項目には、ウェブページの特徴を表す単語が記述される。この「タグ」の項目は、テキスト情報で表現される。「タグ」の項目に記述される内容は、図5に例示されるテキストボックス42dに入力された内容である。この「タグ」の項目に記述された情報は、検索エンジンによる検索の対象となるキーワードとして用いられ得る情報である。
「画像ファイル名」の項目には、ウェブページの表示に用いられる非アクティブ画像及びアクティブ画像のファイルのファイル名が記述される。この「タグ」の項目は、テキスト情報で表現される。
この「画像ファイル名」の項目には、デザイン情報データベース12に保存される非アクティブ画像及びアクティブ画像の各ファイルについて、共通のファイル名が記述される。例えば、共通のファイル名を「aaa.jpg」とする場合、非アクティブ画像のファイル名を「aaa.jpg」とし、アクティブ画像のファイル名を「aaa_activ.jpg」とする。このようにすることで、非アクティブ画像とアクティブ画像とを対応付けるとともに、両者を区別できるようになっている。
つぎに、図10に例示されるとおり、「リンク設定」テーブル61には、「ID」、「ページID」、「リンク種類」、「値」、「座標」、「削除フラグ」等の項目が設けられている。なお、「リンク設定」テーブル61は、ウェブページに設定された個々のクリッカブル領域ごとに作成される。つまり、1つのウェブページについて複数のクリッカブル領域が設定されている場合には、個々のクリッカブル領域ごと対応する複数の「リンク設定」テーブル61が設定情報DB13に保存される。
この「リンク設定」テーブル61について、「ID」の項目には、当該クリッカブル領域を識別するために付与される固有の識別情報が記述される。この「ID」の項目は、複数桁の数字列で表現される。
「ページID」の項目には、当該「リンク設定」テーブル61が適用されるウェブページの識別情報が記述される。具体的には、この「ページID」の項目に、「ページ」テーブル60の「ID」の項目と同一の識別情報が記述されることで、その「ページ」テーブル60と「リンク設定」テーブル61とが対応付けされるようになっている。これにより、当該「リンク設定」テーブル61で表されるクリッカブル領域の機能が、対応付けされた「ページ」テーブル60に関するウェブページに適用される。
「リンク種類」の項目には、ウェブページ上でクリッカブル領域がクリックされたときに実行すべき機能の種類を表す情報が記述される。この「リンク種類」の項目は、機能の種類ごとに予め割り当てられている識別番号の数字で表現される。具体的には、ハイパーリンク、入力フォーム起動、電話アプリケーション起動、電子メールクライアント起動等といった機能ごとに、1,2,3…等の識別番号が割り当てられている。そして、S200で受信した設定情報に含まれるクリッカブル領域の機能を表す情報の内容に応じて、対応する機能の識別情報が「リンク種類」の項目に記述される。
「値」の項目には、クリッカブル領域に対応するリンク先を表す情報が記述される。この「値」の項目は、テキスト情報で表現される。「値」の項目に記述される内容は、クリッカブル領域に割り当てられた機能の接続先となるURL、電話番号、電子メールアドレス等であり、図6,7等に例示されるテキストボックス46に入力された内容である。
「座標」の項目には、非アクティブ画像及びアクティブ画像上におけるクリッカブル領域の座標範囲を表す情報が記述される。この「値」の項目は、テキスト情報で表現される。例えば、クリッカブル領域が矩形として設定されている場合、その矩形の画像領域の左上の頂点の座標と、右下の頂点の座標とを表す座標値が記述される。
「削除フラグ」の項目には、クリッカブル領域を無効にするか否かを指定する情報が記述される。この「値」の項目は、0又は1の数字で表現される。具体的には、この「削除フラグ」の項目に1の数字を記述することで、当該クリッカブル領域を無いものとしてウェブページを表示するように設定できる。
図9のフローチャートの説明に戻る。S204では、WWWサーバ11は、S202で保存したデザイン情報及び設定情報に基づいて生成され得るウェブページを、WWWでの公開対象として登録する処理を実行する。具体的には、WWWサーバ11は、検索エンジンの機能を提供する周知の検索サイトにアクセスして、WWWサーバ11に対して当該ウェブページを指し示す情報を含むURLを検索の対象として登録する。これにより、閲覧者は、検索サイトを通じて当該ウェブサイトを検索することが可能になる。
また、ウェブページを検索サイトに登録する際、WWWサーバ11は、当該ウェブページに関する「ページ」テーブル60に記述されている「タイトル」、「会社名・店名」、「説明」、「タグ」等の各項目の内容を当該ウェブページのURLと共に登録してもよい。これにより、「タイトル」、「会社名・店名」、「説明」等の各項目の内容を検索エンジンによる検索結果の内容として閲覧者に対して提示することができる。また、「タグ」の各項目に記述された単語を、当該ウェブページを検索するためのキーワードに設定することができる。
S206では、WWWサーバ11は、ウェブページの公開が完了したことを表す情報を、依頼元のクライアント端末20のウェブブラウザに送信する。S206の後、WWWサーバ11は制作依頼受付処理を終了する。
[閲覧要求受付処理の説明]
WWWサーバ11が実行する閲覧要求受付処理の手順について、図11のフローチャートを参照しながら説明する。この処理は、ウェブページの閲覧を要求するクライアント端末30で動作するウェブブラウザからのアクセスを受付けたときに実行される。
S300では、WWWサーバ11は、クライアント端末30からの閲覧要求に該当するウェブページの基となるデザイン情報及び設定情報を、デザイン情報データベース12及び設定情報データベース13から読み込む。ここで読み込まれる情報には、当該ウェブページに対応付けられている各テーブル60,61の内容と、当該ウェブページに対応付けられている非アクティブ画像及びアクティブ画像のファイルとが含まれる。
S302では、WWWサーバ11は、S300で読み込んだ各情報に基づいて、ウェブクライアント側でウェブページを自動生成して表示するように構成されたスクリプトを組み込んだHTML文書を作成する。このウェブページ生成用のスクリプトは、例えばJavaScript等のスクリプト言語の仕組みを用いてWWWサーバ11により作成される。
具体的には、WWWサーバ11は、次のような仕組みを有するウェブページを自動生成するスクリプトを組み込んだHTML文書を作成する。そのウェブページは、非アクティブ画像をウェブブラウザの表示画面に前面に表示させるように構成される。その表示された非アクティブ画像のクリッカブル領域に対して、ポインティングデバイスによる所定の操作が入力された場合、次のように振る舞うように構成される。すなわち、非アクティブ画像の当該クリッカブル領域に該当する画像領域を、アクティブ画像における当該クリッカブル領域に該当する画像領域に差し替えてウェブブラウザの表示画面に前面に表示させる。
なお、クリッカブル領域の座標範囲については、「リンク設定」テーブル61の「座標」の項目で表される内容のとおりにウェブページが生成されるように、WWWサーバ11がスクリプトを組む。また、ここでいう所定の操作とは、例えば、クリッカブル領域内にマウスのポインタを置く、いわゆるマウスオーバーの操作が例示される。一方、クリッカブル領域に対する所定の操作が解除された場合、非アクティブ画像の表示に戻すように構成されている。
さらに、このウェブページは、クリッカブル領域に対してクリック等の実行操作が入力された場合、当該クリッカブル領域に割り当てられた機能をウェブブラウザに実行させるように構成される。なお、クリッカブル領域に実行操作がなされたときに実行される機能については、当該クリッカブル領域の「リンク設定」テーブル61の「リンク種類」の項目で表される内容のとおりにウェブページが生成されるように、WWWサーバ11がスクリプトを組む。また、クリッカブル領域に実行操作がなされたときに起動するアプリケーションに渡されるパラメータは、当該クリッカブル領域の「リンク設定」テーブル61の「値」の項目で表される内容のとおりにウェブページが生成されるように、WWWサーバ11がスクリプトを組む。
S304では、WWWサーバ11は、S302で作成したHTML文書と、ウェブページを構成する画像ファイル(すなわち、非アクティブ画像及びアクティブ画像)とを含む閲覧用データを、閲覧要求元のクライアント端末30に送信する。S304の後、WWWサーバ11は閲覧要求受付処理を終了する。
[ウェブページの表示例]
WWWサーバ11から閲覧用データを受信したクライアント端末30では、ウェブブラウザによりウェブページ生成用のスクリプトが実行されることで、ウェブページが自動的に生成され、生成されたウェブページがウェブブラウザの表示画面上に表示される。そのウェブページの表示例について、図12を参照しながら説明する。
図12の事例では、図3〜図8の事例において設定された内容に対応するウェブページが、クライアント端末30のウェブブラウザの表示画面に表示されている状況を想定している。図12の(1)の段階では、非アクティブ画像だけの状態のウェブページ70が表示されている。また、ウェブブラウザの表示画面上には、マウス等のポインティングデバイスで操作されるポインタ71も表示されている。
つぎに、図12の(2)段階では、ポインタ71がウェブページ70の左上部に設定されているクリッカブル領域72内に置かれ、マウスオーバーの状態になっている状況を想定している。このとき、クリッカブル領域72には網掛けによる強調表示が施され、このクリッカブル領域が操作の対象になっていることが閲覧者に対して明示される。この強調表示は、非アクティブ画像のクリッカブル領域72に該当する画像領域が、アクティブ画像のクリッカブル領域72に該当する画像領域に置き換えられて表示されることにより実現する。
クリッカブル領域72には、ハイパーリンク機能による移動先のウェブサイトが設定されていること前提とする。したがって、図12の(2)の段階から、ポインタ71によりクリッカブル領域72がクリックされた場合、図12の(3)に例示されるとおり、ウェブブラウザは、設定されているリンク先のウェブサイトにアクセスし、そのウェブサイトのコンテンツを表示画面に表示する。
なお、図示は省略するが、入力フォームの起動が設定されたクリッカブル領域がクリックされた場合には、ウェブブラウザは所定の入力フォームを起動して表示する。また、電話アプリケーションの起動が設定されたクリッカブル領域がクリックされた場合には、ウェブブラウザは、設定された電話番号を通話先として電話アプリケーションを起動する。また、電子メールクライアントの起動が設定されたクリッカブル領域がクリックされた場合には、ウェブブラウザは、設定された電子メールアドレスを宛先として電子メールクライアントを起動する。
[効果]
実施形態のウェブページ制作支援システム1によれば、以下の効果を奏する。
ウェブページの制作を依頼するクライアント端末20のウェブブラウザから、デザイン情報と設定情報とをWWWサーバ11にアップロードするだけで、クリッカブルな機能を有するウェブページをWWWに公開することができる。したがって、ページ制作者がコーディング作業等に必要な専門的な知識を持っていなくても、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援することができる。
また、ウェブページが自動的にWWWに公開されることで、閲覧者が容易に検索をすることができるようになるので、ウェブページが閲覧される機会を増すことができる。また、ページ制作者の意図に沿って、例えば、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアント等の様々な機能を有するウェブページの制作を支援することができる。
[特許請求の範囲に記載の構成との対応]
実施形態の各構成と、特許請求の範囲に記載の構成との対応は次のとおりである。
WWWサーバ11のPHPスクリプトにより実行されるS104及びS200の処理が、受領部としての処理に相当する。WWWサーバ11のPHPスクリプトにより実行されるS202の処理が、保存部としての処理に相当する。WWWサーバ11のPHPスクリプトにより実行されるS204の処理が、公開処理部としての処理に相当する。WWWサーバ11のPHPスクリプトにより実行されるS302の処理が、プログラム作成部としての処理に相当する。WWWサーバ11のPHPスクリプトにより実行されるS304の処理が、送信部としての処理に相当する。
[変形例]
上記各実施形態における1つの構成要素が有する機能を複数の構成要素に分担させたり、複数の構成要素が有する機能を1つの構成要素に発揮させたりしてもよい。また、上記各実施形態の構成の一部を省略してもよい。また、上記各実施形態の構成の少なくとも一部を、他の上記実施形態の構成に対して付加、置換等してもよい。なお、特許請求の範囲に記載の文言から特定される技術思想に含まれるあらゆる態様が、本開示の実施形態である。
例えば、上述の実施形態では、非アクティブ画像とアクティブ画像との2種類の画像をアップロードしてウェブページを制作する事例について説明した。これに限らず、更にウェブページの背景として表示される画像がアップロードされることにより、ウェブページの表示に適用可能な構成であってもよい。その場合、ウェブブラウザには、背景画像の前面側に重ねて非アクティブ画像が表示されるように構成することが考えられる。
あるいは、アクティブ画像のアップロードを省略し、非アクティブ画像に相当する画像のアップロードのみでウェブページを制作可能な構成であってもよい。その場合、非アクティブ画像に相当する画像に設定されたクリッカブル領域にマウスオーバー操作が行われたときに、ウェブブラウザにクリッカブル領域として認識されるように構成することが考えられる。例えば、クリッカブル領域にマウスオーバー操作が行われたときに、そのクリッカブル領域を認識したウェブブラウザ側の機能によりマウスのポインタの表示態様が変化することで、画像の変化を伴わずとも閲覧者がクリッカブル領域を認識することができる。あるいは、非アクティブ画像に相当する画像に設定されたクリッカブル領域にマウスオーバー操作が行われたときに、そのクリッカブル領域に相当する画像領域に対して予め定められた画像処理(例えば、白濁や反転表示)を施して表示するように構成することが考えられる。
上述の実施形態では、ウェブページの制作を依頼するウェブクライアントに制作依頼画面を表示させるクライアントサイド・アプリケーションを提供することによって、ウェブサーバの基となるデザイン情報や設定情報を入力させる構成について説明した。これに限らず、WWWサーバ11側で動作するサーバサイド・アプリケーションに作成される制作依頼画面をウェブクライアントに提供し、その制作依頼画面に沿ってウェブクライアントにデザイン情報や設定情報を入力させる構成であってもよい。
上述の実施形態の構成に加え、更に、アップロードされる画像情報に対してコンテンツ幅を設定可能にし、設定されたコンテンツ幅を反映した態様にてウェブページが表示されるように構成してもよい。その具体的な手順について、図13及び図14を参照しながら説明する。なお、以下の図13及び図14の説明において、特に言及しない構成については、上述の実施形態の構成に準ずるものとする。
ここでいうコンテンツ幅とは、制作側のクライアント端末20からアップロードされる画像情報の全横幅のうち、ウェブページを閲覧するウェブブラウザの表示幅に関わらず、表示を必須とする横幅方向の範囲である。以下、コンテンツ幅を定義する情報をコンテンツ幅情報という。コンテンツ幅情報は、例えば、画像の横幅方向の画素数の範囲等で表現される。
まず、ウェブページの制作を依頼するクライアント端末20のウェブブラウザによって行われる情報入力処理において、画像情報の入力後、ウェブブラウザの表示画面上に表示されている制作依頼画面40が、図13の(1)に例示されるような内容に遷移する。図13の(1)の制作依頼画面40に移行するタイミングとしては、例えば、図3に例示される制作依頼画面40において画像ファイルや基本情報が入力された直後とすることが挙げられる。
図13の(1)に例示される制作依頼画面40には、先の段階で入力された画像情報を表示するための領域や、コンテンツ幅を設定するためのGUIが設けられている。図13の(1)に例示されるとおり、制作依頼画面40に設けられている画像表示領域41には、入力された画像情報全体を表す画像52が表示されている。
また、制作依頼画面40には、スライダ81が設けられている。このスライダ81は、画像表示領域41に表示されている画像52に対してコンテンツ幅を指定するためのGUIであり、ポインティングデバイスによりつまみを左右に移動させることで、画像52上でコンテンツ幅の伸縮を操作できるようになっている。また、画像52上には、スライダ81のつまみの位置に連動して左右に動いてコンテンツ幅を表示する表示線82が表示されている。
また、制作依頼画面40には、設定ボタン83が設けられている。設定ボタン83がクリックされると、スライダ81で指定されているコンテンツ幅が確定し、制作依頼画面40は次の項目の入力受付状態へと移行する。その後、クライアント端末20のウェブブラウザによって行われる情報入力処理が完了すると、制作依頼画面40を通じてユーザから入力された各情報(すなわち、デザイン情報、設定情報、及びコンテンツ幅情報を含む)が、WWWサーバ11にアップロードされる。
一方、WWWサーバ11は、制作依頼受付処理(図9参照)のS200において、依頼元のクライアント端末20からアップロードされたデザイン情報と、設定情報と、コンテンツ幅情報とを受信する。そして、S202において、WWWサーバ11は、S200で受信したデザイン情報と設定情報とコンテンツ幅情報とを、ウェブページを識別するための識別情報に対応付けて、デザイン情報データベース12及び設定情報データベース13に保存する。
このうち、コンテンツ幅情報については、例えば、図13の(2)に例示されるとおり、デザイン情報データベース12に保存される「ページ」テーブル60に「コンテンツ幅」の項目を設けて記録することが考えられる。「ページ」テーブル60における「コンテンツ幅」の項目は、画像の幅方向の画素数の範囲を表す情報が記述される。この「コンテンツ幅」の項目は、テキスト情報で表現される。
つぎに、WWWサーバ11が、コンテンツ幅に関する情報を含む閲覧用データをウェブクライアントに送信し、ウェブクライアントにおいてコンテンツ幅が制御された態様にてウェブページが表示される一連の手順について、図14を参照しながら説明する。
WWWサーバ11は、制作依頼受付処理(図11参照)のS300において、閲覧要求に該当するウェブページの基となるデザイン情報、設定情報、及びコンテンツ幅情報を、デザイン情報データベース12及び設定情報データベース13から読み込む。次のS302では、WWWサーバ11は、S300で読み込んだ各情報に基づいて、ウェブクライアント側でウェブページを自動生成して表示するように構成されたスクリプトを組み込んだHTML文書を作成する。さらに、WWWサーバ11は、図14の(1)に例示されるとおり、コンテンツ幅を定義するCSSファイルを生成する。ここでいうCSSとは、Cascading Style Sheetsの略語であり、ウェブページのスタイルを指定するための周知のプログラミング言語である。
ここで生成されるCSSファイルには、次のようにウェブページのレイアウトを定義する情報が含まれる。すなわち、ウェブブラウザ上に画像情報を表示する際、コンテンツ幅情報で定義されたコンテンツ幅に該当する領域の横幅全体をウェブブラウザの横幅方向の表示対象に含む。かつ、当該画像情報のうちコンテンツ幅以外の横幅方向の領域であってウェブブラウザの表示領域の横幅(すなわち表示幅)を超える部分については、ウェブブラウザの横幅方向の表示対象から除外して非表示とする。
そして、WWWサーバ11は、図14の(2)に例示されるように、コンテンツ幅を定義するCSSファイルと、HTML文書と、画像ファイルとを含む閲覧用データを、閲覧要求元のクライアント端末30に送信する。
一方、WWWサーバ11から閲覧用データを受信したクライアント端末30では、ウェブブラウザによりウェブページが生成され、生成されたウェブページがウェブブラウザの表示画面上に表示される。図14の(3)に例示されるように、クライアント端末30のウェブブラウザは、コンテンツ幅を定義するCSSファイルに基づいて、ウェブページの表示幅を制御する。図14の(3)の表示例において、符号90はウェブブラウザにおける画像の表示範囲を表している。
図14の(3)に例示されるとおり、ウェブブラウザの表示範囲90には、画像ファイルで表される画像情報のうち、CSSファイルにおいて定義されているコンテンツ幅全体が少なくとも含まれる。その際、コンテンツ幅に該当する画像領域は、ウェブブラウザの表示範囲90の横幅方向の中央に配置される。また、当該画像情報のうち、コンテンツ幅以外の左右両外側の背景部分については、ウェブブラウザの表示幅に相当する範囲までが表示対象に含まれ、ウェブブラウザの表示幅を超える背景部分は、トリミングされて非表示となっている。
このように、CSSファイルにより定義されるコンテンツ幅に基づいてウェブページの表示幅を制御することで、ウェブページにおける主要な情報をもれなく表示させつつ、ウェブページの横幅をウェブブラウザの表示幅に一致させることができる。
なお、CSSファイルにおいて定義されているコンテンツ幅が、ウェブブラウザの表示幅より大きい場合、ウェブブラウザに実装されているスクロールバー等のGUIにより表示領域を移動可能にすることが考えられる。具体的には、コンテンツ幅全体のうち、ウェブブラウザの表示幅に収まる部分領域だけを表示し、スクロールバーにより必要に応じて表示領域を横幅方向に移動させることにより、少なくともコンテンツ幅全体に相当する領域を閲覧可能にする。
上述したウェブページ制作支援システム1を構成要件とするシステム、ウェブページ制作支援システム1としてコンピュータを機能させるためのプログラム、このプログラムを記録した半導体メモリ等の非遷移的実態的記録媒体、ウェブページ制作支援方法等の種々の形態で本開示を実現することもできる。
1…ウェブページ制作支援システム、11…WWWサーバ、12…デザイン情報データベース、13…設定情報データベース、20…クライアント端末(制作側)、30…クライアント端末(閲覧側)、100…インターネット。

Claims (6)

  1. 制作すべきウェブページの意匠デザインを表す少なくとも1つの画像情報を含むデザイン情報と、当該ウェブページの機能に関する設定を表す設定情報であって、前記ウェブページに設けられる少なくとも1つのクリッカブル領域の画像上の座標を表す座標情報を含む設定情報とを、ウェブページの制作を依頼するウェブクライアントから受領するように構成された受領部と、
    前記受領部によって受領されたデザイン情報と設定情報とを、当該ウェブページに関する識別情報に対応付けて、所定の記憶装置に保存するように構成された保存部と、
    前記保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを閲覧するウェブクライアント側で、当該ウェブページに対応するデザイン情報及び設定情報に応じたウェブページを自動的に生成して表示するための生成プログラムを作成するように構成されたプログラム作成部と、
    前記ウェブページに対するウェブクライアントからの閲覧要求に応じて、当該閲覧要求に該当のウェブページに対応するデザイン情報と、当該ウェブページを生成するための前記生成プログラムとを含む閲覧用データを、閲覧要求元のウェブクライアントへ送信するように構成された送信部とを備え、
    前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に前記画像情報を表示し、その表示された画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、前記ウェブブラウザにクリッカブル領域として認識させる機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
    ウェブページ制作支援システム。
  2. 前記受領部は、前記デザイン情報として、前記ウェブページに設けられる少なくとも1つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない状態を表す非アクティブ画像情報、及び前記非アクティブ画像情報に対応する画像情報であって、前記クリッカブル領域に対応する画像領域が操作の対象となっている状態を表すアクティブ画像情報を含むデザイン情報を受領するように構成されており、
    前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に非アクティブ画像情報を表示し、その表示された非アクティブ画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、前記非アクティブ画像情報内の当該クリッカブル領域に該当する画像領域を、対応するアクティブ画像情報における当該クリッカブル領域に該当する画像領域に差し替えて表示させる機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
    請求項1に記載のウェブページ制作支援システム。
  3. 前記保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを、ワールド・ワイド・ウェブでの公開対象として登録するように構成された公開処理部を更に備える、
    請求項1又は請求項2に記載のウェブページ制作支援システム。
  4. 前記受領部は、前記クリッカブル領域に対する所定の実行操作が入力されたときに実行すべき機能を表す機能情報を更に含む前記設定情報を受領するように構成されおり、
    前記プログラム作成部は、前記生成プログラムとして、表示された前記画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対する実行操作が入力されたときに、前記設定情報における当該クリッカブル領域の機能情報で示される機能を実行させる機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている、
    請求項1ないし請求項3の何れか1項に記載のウェブページ制作支援システム。
  5. 前記受領部は、前記クリッカブル領域に対する所定の実行操作が入力されたときに実行すべき機能として、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアントの少なくとも何れかに関する前記機能情報を含む前記設定情報を受領するように構成されている、
    請求項4に記載のウェブページ制作支援システム。
  6. 前記受領部は、前記画像情報がウェブブラウザ上でウェブページとして表示されるときに、前記画像情報の全横幅のうち表示を必須とする横幅方向の範囲を定義する情報であるコンテンツ幅情報を更に取得するように構成されており、
    前記保存部は、更に、前記受領部によって受領されたコンテンツ幅情報を当該ウェブページに関する識別情報に対応付けて前記記憶装置に保存するように構成されており、
    前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に前記画像情報を表示する際、当該画像情報に対応するコンテンツ幅情報で表される領域であるコンテンツ領域の横幅全体を前記ウェブブラウザの横幅方向の表示対象に含み、かつ、当該画像情報のうち前記コンテンツ領域以外の横幅方向の領域であって前記ウェブブラウザの表示領域の横幅を超える部分については、前記ウェブブラウザの横幅方向の表示対象から除外する機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
    請求項1ないし請求項5に記載のウェブページ制作支援システム。
JP2017031298A 2017-02-22 2017-02-22 ウェブページ制作支援システム Active JP6235744B1 (ja)

Priority Applications (2)

Application Number Priority Date Filing Date Title
JP2017031298A JP6235744B1 (ja) 2017-02-22 2017-02-22 ウェブページ制作支援システム
PCT/JP2017/018036 WO2018154801A1 (ja) 2017-02-22 2017-05-12 ウェブページ制作支援システム

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
JP2017031298A JP6235744B1 (ja) 2017-02-22 2017-02-22 ウェブページ制作支援システム

Publications (2)

Publication Number Publication Date
JP6235744B1 JP6235744B1 (ja) 2017-11-22
JP2018136786A true JP2018136786A (ja) 2018-08-30

Family

ID=60417595

Family Applications (1)

Application Number Title Priority Date Filing Date
JP2017031298A Active JP6235744B1 (ja) 2017-02-22 2017-02-22 ウェブページ制作支援システム

Country Status (2)

Country Link
JP (1) JP6235744B1 (ja)
WO (1) WO2018154801A1 (ja)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP7141589B1 (ja) 2022-05-13 2022-09-26 株式会社ニアメロ 端末装置、方法及びプログラム

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH09237274A (ja) * 1996-02-29 1997-09-09 Toshiba Corp Www用htmlファイル作成方法及び装置
JPH09282129A (ja) * 1996-04-16 1997-10-31 Nippon Telegr & Teleph Corp <Ntt> クリッカブルマップ設定データ作成方法及びその実施装置
JP2007018383A (ja) * 2005-07-08 2007-01-25 News2U Corp リリース情報公開システム
JP2007108994A (ja) * 2005-10-13 2007-04-26 Nippon Digital Kenkyusho:Kk レイアウト編集装置およびレイアウト編集プログラム
JP5614924B2 (ja) * 2008-09-16 2014-10-29 株式会社デジタルマックス デジタルコンテンツ作成方法、デジタルコンテンツ作成用のプログラム、及びデジタルコンテンツ作成装置

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP7141589B1 (ja) 2022-05-13 2022-09-26 株式会社ニアメロ 端末装置、方法及びプログラム
WO2023218806A1 (ja) * 2022-05-13 2023-11-16 株式会社ニアメロ 端末装置、方法及びプログラム
JP2023168152A (ja) * 2022-05-13 2023-11-24 株式会社ニアメロ 端末装置、方法及びプログラム

Also Published As

Publication number Publication date
JP6235744B1 (ja) 2017-11-22
WO2018154801A1 (ja) 2018-08-30

Similar Documents

Publication Publication Date Title
CN106126514B (zh) 与搜索有关的消息服务器提供方法及服务器和用户终端
US9753900B2 (en) Universal content referencing, packaging, distribution system, and a tool for customizing web content
US8918384B2 (en) Decentralized web annotation
US20210149842A1 (en) System and method for display of document comparisons on a remote device
US20090006646A1 (en) System and Method of Auto Populating Forms on Websites With Data From Central Database
JP5233220B2 (ja) ページ付加情報共有管理方法
JP5199939B2 (ja) 画像検索装置、画像検索方法及びプログラム
JP2013508807A (ja) インターネットナビゲーションページを生成する方法および装置
JPWO2015004722A1 (ja) サーバ、端末、サービス方法、ならびに、プログラム
US20140108919A1 (en) Information providing device, information providing method, information providing program, information display program, and computer-readable recording medium storing information providing program
KR100996037B1 (ko) 무선 인터넷 접속이 가능한 이동 통신 단말기에서 하이퍼링크 정보를 제공하기 위한 장치 및 방법
JP2012064207A (ja) ホスト装置及びホスト装置のコンテンツ表示方法
JP2007072596A (ja) 情報共有システムおよび情報共有方法
JP5185793B2 (ja) 地図検索システム
KR101350525B1 (ko) 질의에 대응하는 탭을 사용하여 추가적인 정보를 제공하는방법 및 그 장치
JP2007149016A (ja) ホームページ作成支援システム、ホームページ作成支援方法、ホームページ作成支援サーバ
JP6235744B1 (ja) ウェブページ制作支援システム
JP5134639B2 (ja) クライアント装置、表示方法、プログラム、情報処理装置、及び情報処理システム
JP2003131988A (ja) ホームページ更新装置、ホームページ更新方法、ホームページ更新プログラム記録媒体およびホームページ更新プログラム
JP2009266188A (ja) 表示制御方法及びプログラム
JP7206863B2 (ja) 表示制御方法、装置、及びプログラム
JP2007025753A (ja) ウェブログサーバ及びウェブログサービス提供システム
JPWO2006064573A1 (ja) Web情報提供装置及びその方法、プログラム
JP7501066B2 (ja) 情報処理装置およびプログラム
JP2020042660A (ja) 電子ファイル管理装置、電子ファイル管理プログラム、及び電子ファイル管理システム

Legal Events

Date Code Title Description
TRDD Decision of grant or rejection written
A01 Written decision to grant a patent or to grant a registration (utility model)

Free format text: JAPANESE INTERMEDIATE CODE: A01

Effective date: 20171003

A61 First payment of annual fees (during grant procedure)

Free format text: JAPANESE INTERMEDIATE CODE: A61

Effective date: 20171026

R150 Certificate of patent or registration of utility model

Ref document number: 6235744

Country of ref document: JP

Free format text: JAPANESE INTERMEDIATE CODE: R150

S533 Written request for registration of change of name

Free format text: JAPANESE INTERMEDIATE CODE: R313533

R350 Written notification of registration of transfer

Free format text: JAPANESE INTERMEDIATE CODE: R350

R250 Receipt of annual fees

Free format text: JAPANESE INTERMEDIATE CODE: R250

R250 Receipt of annual fees

Free format text: JAPANESE INTERMEDIATE CODE: R250

R250 Receipt of annual fees

Free format text: JAPANESE INTERMEDIATE CODE: R250