JP2022013169A - Creation support device and program - Google Patents
Creation support device and program Download PDFInfo
- Publication number
- JP2022013169A JP2022013169A JP2020115548A JP2020115548A JP2022013169A JP 2022013169 A JP2022013169 A JP 2022013169A JP 2020115548 A JP2020115548 A JP 2020115548A JP 2020115548 A JP2020115548 A JP 2020115548A JP 2022013169 A JP2022013169 A JP 2022013169A
- Authority
- JP
- Japan
- Prior art keywords
- preview screen
- unit
- article
- type landing
- landing page
- 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
Links
- 238000000034 method Methods 0.000 description 11
- 238000001514 detection method Methods 0.000 description 10
- 239000004973 liquid crystal related substance Substances 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000010365 information processing Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 1
- 238000010187 selection method Methods 0.000 description 1
Images
Abstract
Description
本発明は、ウェブ上に表示されるコンテンツ、例えば記事型ランディングページなどのウェブページの作成に用いて好適な作成支援装置およびプログラムに関する。 The present invention relates to a creation support device and a program suitable for creating a content displayed on the web, for example, a web page such as an article-type landing page.
従来、記事型ランディングページやブログなどのウェブページを作成する際には作成依頼を受けた記者などのライターが、ウェブページの原稿を作成し、作成した原稿に基づいてウェブエンジニアなどの技術者がウェブページを作成していた。このようなウェブページの作成を支援する種々の技術が提案されている（例えば、特許文献１参照。）。 Conventionally, when creating a web page such as an article-type landing page or a blog, a writer such as a reporter who received a request to create a web page creates a manuscript for the web page, and an engineer such as a web engineer creates the manuscript based on the created manuscript. I was creating a web page. Various techniques for supporting the creation of such a web page have been proposed (see, for example, Patent Document 1).
特許文献１に記載の技術では、ウェブページの作成者はネットワークを介して接続した所定のサーバおよびデータベース（以降「サーバ等」と表記する。）上でウェブページを作成したり編集したりしている。また、作成したウェブページを閲覧する場合には、ネットワークを介して所定のサーバ等に接続して閲覧をしていた。
In the technique described in
言い換えると、ウェブページを作成したり編集したりするサーバ等が、ウェブページの公開に用いられるサーバ等に限定されていた。そのため、ウェブページを作成する環境の自由度が制限されやすくなるという問題があった。 In other words, the server or the like for creating or editing a web page is limited to the server or the like used for publishing the web page. Therefore, there is a problem that the degree of freedom of the environment for creating a web page is easily limited.
本発明は、上記の課題を解決するためになされたものであって、記事型ランディングページなどのウェブページを作成する際の制限を緩和しやすい作成支援装置を提供することを目的とする。 The present invention has been made to solve the above problems, and an object of the present invention is to provide a creation support device that can easily relax restrictions on creating a web page such as an article-type landing page.
上記目的を達成するために、本発明は、以下の手段を提供する。
本発明の第１の態様に係る作成支援装置は、記事型ランディングページの作成を支援する作成支援装置であって、作成者からの入力を受け付ける受付部と、前記記事型ランディングページに表示するコンテンツの種類に対応付けされた複数のエレメントを記憶する記憶部と、作成する前記記事型ランディングページをウェブ上で表示される態様でプレビュー画面に表示させるプレビュー部と、前記複数のエレメントのうち、前記受付部で受け付けた前記入力に基づいて特定されるエレメントを、前記プレビュー画面における所望の領域に配置する配置部と、前記プレビュー画面に表示されている前記記事型ランディングページをウェブページ上で表示させるソースコードを生成して出力可能とする生成部と、が設けられていることを特徴とする。
In order to achieve the above object, the present invention provides the following means.
The creation support device according to the first aspect of the present invention is a creation support device that supports the creation of an article-type landing page, and is a reception unit that accepts input from the creator and content to be displayed on the article-type landing page. A storage unit that stores a plurality of elements associated with the types of the above, a preview unit that displays the article-type landing page to be created on the preview screen in a manner displayed on the web, and the above-mentioned plurality of elements. The arrangement unit for arranging the element specified based on the input received by the reception unit in a desired area on the preview screen and the article-type landing page displayed on the preview screen are displayed on the web page. It is characterized by being provided with a generation unit that can generate and output source code.
本発明の第２の態様に係るプログラムは、記事型ランディングページの作成を支援するプログラムであって、コンピュータに、作成者からの入力を受け付ける受付機能と、前記記事型ランディングページに表示するコンテンツの種類に対応付けされた複数のエレメントを記憶する記憶機能と、作成する前記記事型ランディングページをウェブ上で表示される態様でプレビュー画面に表示させるプレビュー機能と、前記複数のエレメントのうち、前記受付部で受け付けた前記入力に基づいて特定されるエレメントを、前記プレビュー画面における所望の領域に配置する配置機能と、前記プレビュー画面に表示されている前記記事型ランディングページをウェブページ上で表示させるソースコードを生成して出力可能とする生成機能と、を実現させることを特徴とする。 The program according to the second aspect of the present invention is a program that supports the creation of an article-type landing page, and has a reception function for receiving input from the creator on a computer and content to be displayed on the article-type landing page. A storage function for storing a plurality of elements associated with each type, a preview function for displaying the article-type landing page to be created on the preview screen in a manner displayed on the web, and the reception desk among the plurality of elements. An arrangement function for arranging an element specified based on the input received by the unit in a desired area on the preview screen, and a source for displaying the article-type landing page displayed on the preview screen on a web page. It is characterized by realizing a generation function that can generate and output code.
本発明の第１の態様に係る作成支援装置および第２の態様に係るプログラムによれば、記事型ランディングページをウェブページ上で表示させるソースコードを生成して出力可能となる。出力されたソースコードを、ウェブページを表示可能な他の端末に入力することで、作成した記事型ランディングページを表示することができる。 According to the creation support device according to the first aspect of the present invention and the program according to the second aspect, it is possible to generate and output a source code for displaying an article-type landing page on a web page. By inputting the output source code to another terminal that can display the web page, the created article-type landing page can be displayed.
エレメントをプレビュー画面における作成者が指示する所望の領域に配置でき、配置したエレメント内にコンテンツを入力することが可能となる。そのため、作成者はウェブページ上で表示される態様を確かめつつ記事型ランディングページを作成することができる。 Elements can be placed in a desired area specified by the creator on the preview screen, and content can be input within the placed elements. Therefore, the creator can create an article-type landing page while checking the mode displayed on the web page.
上記発明の第１の態様において前記プレビュー部は、前記受付部で受け付けた前記入力に基づいて前記プレビュー画面の大きさ、および、形状の少なくとも一方を変更可能であり、前記プレビュー画面の大きさ、および、形状の少なくとも一方を検知する検知部と、検知された前記プレビュー画面の大きさ、および、形状の少なくとも一方に応じて前記プレビュー画面に配置された複数の前記エレメントの相対的な配置関係を変更する表示変更部と、が更に設けられていることが好ましい。 In the first aspect of the present invention, the preview unit can change at least one of the size and the shape of the preview screen based on the input received by the reception unit, and the size of the preview screen. The relative arrangement relationship between the detection unit that detects at least one of the shapes, the size of the detected preview screen, and the plurality of the elements arranged on the preview screen according to at least one of the shapes. It is preferable that a display changing unit for changing is further provided.
このように検知部および表示変更部を設けることにより、プレビュー画面の大きさ、および、形状の少なくとも一方を変更することにより、プレビュー画面に配置された複数のエレメントの相対的な配置関係が変更される。 By providing the detection unit and the display change unit in this way, the relative arrangement relationship of the plurality of elements arranged on the preview screen can be changed by changing at least one of the size and the shape of the preview screen. The preview.
例えば、プレビュー画面の大きさや形状は、記事型ランディングページを表示する表示機器の大きさや形状に変更することができる。このように変更することで、当該表示機器で記事型ランディングページが表示される態様を確認することができる。 For example, the size and shape of the preview screen can be changed to the size and shape of the display device that displays the article-type landing page. By making such a change, it is possible to confirm how the article-type landing page is displayed on the display device.
上記発明においては、前記記事型ランディングページを表示する表示部の大きさ、および、形状の少なくとも一方に応じて前記プレビュー画面に配置された複数の前記エレメントの相対的な配置関係を変更する表示変更部と、前記表示部の大きさ、および、形状の少なくとも一方を選択する選択部が更に設けられ、前記表示変更部は、前記選択部により選択された前記表示部の大きさ、および、形状の少なくとも一方に基づいて前記プレビュー画面に配置された複数の前記エレメントの相対的な配置関係を変更することが好ましい。 In the above invention, the display change for changing the relative arrangement relationship of the plurality of elements arranged on the preview screen according to the size of the display unit for displaying the article-type landing page and at least one of the shapes. A unit, a selection unit for selecting at least one of the size and shape of the display unit are further provided, and the display change unit is the size and shape of the display unit selected by the selection unit. It is preferable to change the relative arrangement relationship of the plurality of elements arranged on the preview screen based on at least one of them.
このように選択部および表示変更部を設けることにより、表示部の大きさ、および、形状の少なくとも一方を選択することにより、プレビュー画面に配置された複数のエレメントの相対的な配置関係が変更される。そのため、プレビュー画面において、記事型ランディングページが表示部に表示される態様を確認することができる。 By providing the selection unit and the display change unit in this way, the relative arrangement relationship of the plurality of elements arranged on the preview screen can be changed by selecting at least one of the size and the shape of the display unit. The preview. Therefore, on the preview screen, it is possible to confirm how the article-type landing page is displayed on the display unit.
本発明の作成支援装置によれば、記事型ランディングページをウェブページ上で表示させるソースコードを生成して出力することができるため、記事型ランディングページなどのウェブページを作成する際の制限を緩和しやすいという効果を奏する。 According to the creation support device of the present invention, since the source code for displaying the article-type landing page on the web page can be generated and output, the restrictions on creating the web page such as the article-type landing page are relaxed. It has the effect of being easy to do.
この発明の一実施形態に係る作成支援装置について、図１から図７を参照しながら説明する。本実施形態の作成支援装置１は、ウェブ上に表示されるコンテンツ、例えば記事型ランディングページなどのウェブページの作成を支援するものである。
The creation support device according to the embodiment of the present invention will be described with reference to FIGS. 1 to 7. The
記事型ランディングページは、訪問者を所望のページに誘導することを目的としたページである。また、記事型ランディングページには、訪問者が知りたい情報が文章、および、イラストや図や写真などの画像などが含まれている。文章および画像は、訪問者に対して強い印象を与えやすくなるよう、それぞれの相対的な配置などが工夫されている。 An article-type landing page is a page intended to guide a visitor to a desired page. In addition, the article-type landing page contains texts and images such as illustrations, figures, and photographs that the visitor wants to know. The text and images are arranged relative to each other so that they can easily give a strong impression to the visitor.
また、記事型ランディングページでは、紹介する商品やサービスなどの情報を訪問者に理解しやすい適切な順番で記載することが求められる場合が多い。その場合、商品やサービスなどについての深い理解や、理解しやすい説明方法などの知識が必要となる。 In addition, on article-type landing pages, it is often required to describe information such as products and services to be introduced in an appropriate order that is easy for visitors to understand. In that case, deep understanding of products and services and knowledge of easy-to-understand explanation methods are required.
作成支援装置１は、図１に示すように、ＣＰＵ（中央演算処理ユニット）、ＲＯＭ、ＲＡＭ、入出力インタフェース等を有するパーソナルコンピュータ等の情報処理装置である。
As shown in FIG. 1, the
上述のＲＯＭ等の記憶装置に記憶されているプログラムは、ＣＰＵ、ＲＯＭ、ＲＡＭ、入出力インタフェースを協働させて、少なくとも受付部１１、記憶部１２、プレビュー部１３、配置部１４、生成部１５、検知部１６、および、表示変更部１７として機能させるものである。
The program stored in the storage device such as the ROM described above has a CPU, a ROM, a RAM, and an input / output interface in cooperation with each other, and has at least a
更に、作成支援装置１には、キーボードやマウスなどの入力機器２１や、液晶ディスプレイなどの表示機器３１が設けられている。作成支援装置１により記事型ランディングページなどのウェブページの作成支援が行われる際には、表示機器３１上に図２から図５に示す内容が表示される。例えば、プレビュー画面５１や、メニュー欄６１などが表示機器３１上に表示される。
Further, the
作成支援装置１の受付部１１は、図１に示すように、記事型ランディングページの作成者からの入力を受け付けるものである。具体的には、作成者が入力機器２１を用いて入力した操作情報やコンテンツ情報などを受け付けるインタフェースである。
As shown in FIG. 1, the
記憶部１２は、記事型ランディングページに表示するコンテンツの種類に対応付けされた複数のエレメント５２を記憶するものである。言い換えると、作成者に選択されたエレメント５２は、作成者の操作に基づいてプレビュー画面５１に配置される。
The
作成支援装置１は、記憶部１２に記憶されているエレメント５２に基づいて、図３に示すように、メニュー欄６１における「エレメントを追加」の欄に「文章の段落」「画像」「バナー」「ボタン」「リスト」「表組み」「引用」「注釈」「大見出し」「中見出し」「小見出し」「独自タグ」などの選択ボタンを表示する。
Based on the element 52 stored in the
作成者はこれらのボタンのいずれかを押下して、プレビュー画面５１に表示するエレメント５２を選択する。なお、エレメント５２の種類は上述のものに限定されるものではなく、その他の種々の種類がエレメント５２の種類に含まれてもよい。
The creator presses any of these buttons to select the element 52 to be displayed on the
エレメント５２には、「文章の段落」「画像」「リスト」「表組み」「引用」「注釈」「大見出し」「中見出し」「小見出し」等のように作成者によるコンテンツの入力を前提としたものと、「バナー」「ボタン」等のように作成者によるコンテンツの入力を前提としていないものが含まれる。なお、「バナー」「ボタン」は作成者によるコンテンツの入力を前提としたものに含まれてもよい。 Element 52 is premised on the input of content by the creator such as "paragraph of sentences", "image", "list", "table structure", "quotation", "annotation", "large heading", "middle heading", "subheading", etc. This includes those that are not premised on the input of content by the creator, such as "headlines" and "buttons". The "banner" and "button" may be included in the premise that the creator inputs the content.
プレビュー部１３は、作成する記事型ランディングページをウェブ上で表示される態様でプレビュー画面５１に表示させる演算処理や、記事型ランディングページをウェブ上で表示させるソースコードをプレビュー画面５１に表示させる演算処理を行うものである。また、プレビュー部１３は、受付部１１で受け付けた入力に基づいてプレビュー画面５１の大きさ、および、形状の少なくとも一方を変更する演算処理を行うものでもある。
The
プレビュー画面５１に表示させる内容の切替えは、メニュー欄６１における「プレビュー」欄の「ｉｆｒａｍｅプレビュー」ボタン、「コードプレビュー」ボタンを用いて行われる（図３参照。）。例えば「ｉｆｒａｍｅプレビュー」ボタンを押下するとプレビュー画面５１には、ウェブ上で表示される態様で記事型ランディングページが表示される。「コードプレビュー」ボタンを押下するとプレビュー画面５１には、ソースコードが表示される。
The content to be displayed on the
配置部１４は、複数のエレメント５２のうち、受付部１１で受け付けた入力に基づいて特定されるエレメント５２を、プレビュー画面５１における所望の領域に配置する演算処理を行うものである。言い換えると、プレビュー画面５１上に表示されているエレメント５２の位置を移動させる演算処理を行うものである。
The
エレメント５２の移動は、メニュー欄６１における「現在のエレメント」欄の「上に移動」ボタン、「下に移動」ボタンを用いて行われる（図３参照。）。例えば、移動させるエレメント５２を選択して「上に移動」ボタンを押下すると、選択されたエレメント５２は上に移動する。「下に移動」ボタンを押下すると、選択されたエレメント５２は下に移動する。 The element 52 is moved by using the "move up" button and the "move down" button in the "current element" column in the menu column 61 (see FIG. 3). For example, when the element 52 to be moved is selected and the "Move Up" button is pressed, the selected element 52 is moved up. When the "Move Down" button is pressed, the selected element 52 moves down.
なお、エレメント５２の移動を入力する方法として、上述のようにボタンを用いて入力してもよいし、移動させるエレメント５２をドラッグ アンド ドロップなどの公知の別の入力方法を用いてもよい。 As a method of inputting the movement of the element 52, it may be input by using a button as described above, or another known input method such as drag and drop of the element 52 to be moved may be used.
本実施形態では、メニュー欄６１における「現在のエレメント」欄には、選択したエレメント５２を複製する「コピー」ボタンや、選択したエレメント５２をプレビュー画面５１から削除する「削除」ボタンが設けられている例に適用して説明する。
In the present embodiment, the "current element" field in the
所望の領域に配置されるエレメント５２は、メニュー欄６１における「エレメントを追加」に表示された選択ボタンを押下して、プレビュー画面５１に追加されるエレメントであってもよい。
The element 52 arranged in the desired area may be an element added to the
また、所望の領域に配置されるエレメント５２は、既にプレビュー画面５１に配置されたものであってもよい。言い換えると、配置部１４は、プレビュー画面５１に配置されたエレメント５２の位置を変更する演算処理を行ってもよい。
Further, the element 52 arranged in the desired area may be one already arranged on the
生成部１５は、作成した記事型ランディングページをウェブページ上で表示させるソースコードを生成する演算処理を行うものであり、生成したソースコードを出力可能とするものである。
The
ソースコードの生成は、メニュー欄６１における「ファイル」欄の「書き出し」ボタンを用いて行われる（図３参照。）。例えば「書き出し」ボタンを押下すると、作成した記事型ランディングページをウェブページ上で表示させるソースコードを出力可能に生成する演算処理が実行される。 The source code is generated by using the "Export" button in the "File" column in the menu column 61 (see FIG. 3). For example, when the "Export" button is pressed, an arithmetic process is executed to generate a source code that displays the created article-type landing page on a web page so that it can be output.
検知部１６は、プレビュー画面５１の大きさ、および、形状の少なくとも一方を検知する演算処理を行うものである。ここでプレビュー画面５１は、横方向の長さや、縦方向の長さを作成者が任意に変更可能なものである。言い換えると、作成者はプレビュー画面５１を横長の画面や、縦長の画面に変更することができる。さらにプレビュー画面５１の表示面積を任意の面積に変更することもできる。検知部１６は、作成者が上述のように変更したプレビュー画面５１の形状や大きさなどを検知することができる。
The
表示変更部１７は、検知されたプレビュー画面５１の大きさ、および、形状の少なくとも一方に応じてプレビュー画面５１に配置された複数のエレメントの相対的な配置関係を変更する演算処理を行うものである。相対的な配置関係の変更内容については後述する。
The
次に、上記の構成からなる作成支援装置１における記事型ランディングページなどのウェブページの作成を支援について図２から図５を参照しながら説明する。
記事型ランディングページなどのウェブページの作成支援を行う際には、作成支援装置１の表示機器３１に図２に示す内容の画面が最初に表示される。
Next, support for creating a web page such as an article-type landing page in the
When supporting the creation of a web page such as an article-type landing page, the screen of the content shown in FIG. 2 is first displayed on the
図２では、メニュー欄６１における「プレビュー」「ファイル」「ページ設定」「エレメントを追加」「現在のエレメント」の各欄に含まれる各種のボタンが折り畳まれて非表示とされている状態が示されている。なお、メニュー欄６１における「プレビュー」等の欄に含まれている各種のボタンが展開されて表示されている状態は図３に示す。
FIG. 2 shows a state in which various buttons included in the "preview", "file", "page setting", "add element", and "current element" columns in the
ウェブ上で表示される態様を確認しながら記事型ランディングページを作成する場合には、作業者は「プレビュー」欄の「ｉｆｒａｍｅプレビュー」ボタンを押下する。この操作によりプレビュー画面５１には、ウェブ上で表示される態様で記事型ランディングページが表示される。なお、「プレビュー」欄の「コードプレビュー」ボタンを押下すると、プレビュー画面５１には、ソースコードが表示される。
When creating an article-type landing page while checking the mode displayed on the web, the operator presses the "iframe preview" button in the "preview" column. By this operation, the article-type landing page is displayed on the
また、作成途中の記事型ランディングページの続きを作成する、または、編集する場合には、作業者は「ファイル」欄の「読み込み」ボタンを押下し、続きの作成、または、編集を行う記事型ランディングページのデータやソースコードの読み込みを行う。なお、読み込みする記事型ランディングページのデータ等は、「ファイル」欄の「保存」ボタンや、「書き出し」ボタンを押下して保存されたものを例示することができる。 In addition, when creating or editing the continuation of the article type landing page being created, the worker presses the "Load" button in the "File" column to create or edit the continuation of the article type. Load the landing page data and source code. As the data of the article-type landing page to be read, the data saved by pressing the "Save" button or the "Export" button in the "File" column can be exemplified.
本実施形態では、「保存」ボタンでは、作成支援装置１の独自フォーマットに基づくデータが保存され、「書き出し」ボタンではソースコードが出力される例に適用して説明するが、この例に限定されるものではない。出力されるソースコードは、生成部１５により生成される。
In the present embodiment, the "Save" button saves the data based on the original format of the
また、作成者は「ページ設定」欄の所望のボタンを押下することにより、作成または編集する記事型ランディングページのページ設定を行う。
作成または編集する記事型ランディングページにエレメント５２を追加する場合には、「ページ設定」欄の所望のボタンを用いる。例えば、「大見出し」ボタンを押下し、プレビュー画面５１の左側の上方を指定すると、図４に示すように、プレビュー画面５１の該当する領域に「大見出し」に対応するエレメント５２Ａが追加して表示される。
In addition, the creator sets the page of the article-type landing page to be created or edited by pressing a desired button in the "page setting" column.
When adding the element 52 to the article type landing page to be created or edited, the desired button in the "page setting" column is used. For example, when the "large heading" button is pressed and the upper left side of the
さらに、「画像」ボタンを押下し、プレビュー画面５１の右側の上方を指定すると、プレビュー画面５１の該当する領域に「画像」に対応するエレメント５２Ｂが追加して表示される。「リスト」ボタンを押下し、プレビュー画面５１の下方を指定すると、プレビュー画面５１の該当する領域に「リスト」に対応するエレメント５２Ｃが追加して表示される。
Further, when the "image" button is pressed and the upper right side of the
なお、本実施形態では、エレメント５２の種類を区別する必要がない場合には単にエレメント５２と表記し、上述のように種類を区別する必要がある場合には、「大見出し」に対応するエレメント５２Ａ、「画像」に対応するエレメント５２Ｂ、「リスト」に対応するエレメント５２Ｃと表記する。
In the present embodiment, when it is not necessary to distinguish the type of the element 52, it is simply expressed as the element 52, and when it is necessary to distinguish the type as described above, the element corresponding to the "large heading". It is referred to as 52A, the
プレビュー画面５１に配置されたエレメント５２には、エレメント５２に対応したコンテンツが入力される。例えば、「大見出し」に対応するエレメント５２Ａには、見出しの文言が入力される。「画像」に対応するエレメント５２Ｂには、画像が入力される。「リスト」に対応するエレメント５２Ｃには、リストの文言が入力される。
Content corresponding to the element 52 is input to the element 52 arranged on the
また、プレビュー画面５１に配置されたエレメント５２は、「現在のエレメント」欄の各種ボタンを用いて編集される。例えば、編集するエレメント５２を指定して「上に移動」ボタンを押下すると、指定されたエレメント５２は所定の距離だけ上方へ移動する。「下に移動」ボタンを押下すると、指定されたエレメント５２は所定の距離だけ下方へ移動する。「コピー」ボタンを押下すると、指定されたエレメント５２の複製が作成される。「削除」ボタンを押下すると、指定されたエレメント５２は削除される。
Further, the element 52 arranged on the
記事型ランディングページの作成者は、上述の「ページ設定」欄の各種ボタン、「エレメントを追加」欄の各種ボタン、および、「現在のエレメント」欄の各種ボタンなどを用いて所望の記事型ランディングページを作成する。記事型ランディングページの作成時における各種エレメント５２の追加や、配置位置の指定や変更は、配置部１４により行われる。
The creator of the article-type landing page can use the various buttons in the "Page Setup" column, the various buttons in the "Add Element" column, and the various buttons in the "Current Element" column to obtain the desired article-type landing. Create a page. When creating an article-type landing page, the
次に、プレビュー画面５１の大きさ、および、形状の少なくとも一方が変更された場合の表示について説明する。ここでプレビュー画面５１は、マウスなどの入力機器２１を用いて大きさ、および、形状の少なくとも一方が変更可能とされている。例えば、プレビュー画面５１の枠上にマウスのポインタを重ね、右クリックしつつポインタを移動させることにより、プレビュー画面５１の大きさ、および、形状の少なくとも一方を変更することができる。
Next, the size of the
図５は、横長のプレビュー画面５１（図４参照。）を縦長に変更した場合を示すものである。例えば、プレビュー画面５１の左右の枠を接近させた場合を示している。図４に示す横長のプレビュー画面５１は、例えば卓上型の液晶ディスプレイや、タブレット型情報端末のディスプレイ上に記事型ランディングページが表示された場合に相当し、図５に示す縦長のプレビュー画面５１は、スマートフォンのディスプレイ上に記事型ランディングページが表示された場合に相当する。
FIG. 5 shows a case where the horizontally long preview screen 51 (see FIG. 4) is changed to the vertically
作成支援装置１の検知部１６は、プレビュー画面５１の大きさ、および、形状の少なくとも一方を検知して、検知した結果を表示変更部１７へ出力する。表示変更部１７は、検知部１６の検知結果に基づいて、プレビュー画面５１に配置された複数のエレメントの相対的な配置関係を変更する。
The
図５に示すようにプレビュー画面５１の左右方向の間隔が狭くなった場合には、左右に並んでいた「大見出し」に対応するエレメント５２Ａおよび「画像」に対応するエレメント５２Ｂのうち、「画像」に対応するエレメント５２Ｂが「大見出し」に対応するエレメント５２Ａの下側に移動する。また、エレメント５２Ｂが「大見出し」に対応するエレメント５２Ａは、プレビュー画面５１における左右方向の中央に移動する。
As shown in FIG. 5, when the space between the preview screens 51 in the left-right direction is narrowed, among the
「画像」に対応するエレメント５２Ｂが「大見出し」に対応するエレメント５２Ａの下側に移動するに伴い、「リスト」に対応するエレメント５２Ｃ（図４参照。）は、さらに下方に移動する。
As the
逆に、プレビュー画面５１の左右方向の間隔が図５に示す状態から、図４に示す状態に拡げられた場合には、「画像」に対応するエレメント５２Ｂは、「大見出し」に対応するエレメント５２Ａの右横に移動する。「リスト」に対応するエレメント５２Ｃは、「画像」に対応するエレメント５２Ｂが上方に移動したのに伴い上方へ移動する。
On the contrary, when the distance in the left-right direction of the
上述のようなエレメント５２Ａ、エレメント５２Ｂ、エレメント５２Ｃの相対位置の変更は、例えば、各種のエレメント同士の種類に基づいて相対位置の変更ルールが予め定められていてもよいし、作業者が相対位置の変更ルールを適宜定めてもよい。
For changing the relative positions of the
上記の構成の作成支援装置１によれば、記事型ランディングページをウェブページ上で表示させるソースコードを生成して出力可能となる。出力されたソースコードを、ウェブページを表示可能な他の端末に入力することで、作成した記事型ランディングページを表示することができる。
According to the
エレメント５２をプレビュー画面５１における作成者が指示する所望の領域に配置でき、配置したエレメント５２内にコンテンツを入力することが可能となる。そのため、作成者はウェブページ上で表示される態様を確かめつつ記事型ランディングページを作成することができる。
The element 52 can be arranged in a desired area specified by the creator on the
検知部１６および表示変更部１７を設けることにより、プレビュー画面５１の大きさ、および、形状の少なくとも一方を変更することにより、プレビュー画面５１に配置された複数のエレメント５２の相対的な配置関係が変更される。
By providing the
例えば、プレビュー画面５１の大きさや形状は、記事型ランディングページを表示する表示機器３１の大きさや形状に変更することができる。このように変更することで、当該表示機器３１で記事型ランディングページが表示される態様を確認することができる。
For example, the size and shape of the
なお、上述の実施形態では、プレビュー画面５１の大きさ、および、形状の少なくとも一方が変更された場合に、プレビュー画面５１に配置された複数のエレメントの相対的な配置関係を変更する例に適用して説明したが、図６に示すように、選択部１８を用いてプレビュー画面５１に配置された複数のエレメントの相対的な配置関係を変更してもよい。
In the above embodiment, it is applied to an example of changing the relative arrangement relationship of a plurality of elements arranged on the
選択部１８は、卓上型の液晶ディスプレイ、タブレット型情報端末のディスプレイ、および、スマートフォンのディスプレイなどの表示部の種類を選択するものである。選択する方法としては種々の方法を用いることができる。例えば、メニュー欄６１に表示部の種類を選択する複数のボタンを設け、所望のボタンを押下することにより選択する方法を挙げることができる。
The
表示変更部１７は、選択部１８により選択された表示部の種類に基づいて、プレビュー画面５１に配置された複数のエレメントの相対的な配置関係を変更する。
なお、上述の表示部の種類は、表示部の大きさ、および、形状の少なくとも１つに基づいて分類してもよい。
The
The type of the above-mentioned display unit may be classified based on the size of the display unit and at least one of the shapes.
このように、選択部１８および表示変更部１７を設けることにより、表示部の大きさ、および、形状の少なくとも一方を選択することにより、プレビュー画面５１に配置された複数のエレメント５２の相対的な配置関係が変更される。そのため、プレビュー画面５１において、記事型ランディングページが表示部に表示される態様を確認することができる。
In this way, by providing the
また、上述の実施形態のように作成支援装置１がパーソナルコンピュータ等の情報処理装置であってもよいし、図７に示すようにネットワーク４１に接続されたサーバであってもよい。
Further, the
この場合、サーバである作成支援装置１は、ネットワーク４１に接続されたパーソナルコンピュータである端末４０と情報通信可能に接続される。作成者は、ネットワーク４１を介して作成支援装置１に接続された端末４０を用いて記事型ランディングページなどの作成作業を行う。
In this case, the
端末４０には、キーボードやマウスなどの入力機器や、液晶ディスプレイなどの表示機器が設けられ、作成支援装置１には端末４０の入力機器から記事型ランディングページなどの作成情報が入力される。また、端末４０の表示機器には、作成支援装置１から出力されたプレビュー画面５１や、メニュー欄６１などが表示される。
The terminal 40 is provided with an input device such as a keyboard and a mouse, and a display device such as a liquid crystal display, and the
なお、本発明の技術範囲は上記実施形態に限定されるものではなく、本発明の趣旨を逸脱しない範囲において種々の変更を加えることが可能である。例えば、本発明を上記の実施形態に適用したものに限られることなく、これらの実施形態を適宜組み合わせた実施形態に適用してもよく、特に限定するものではない。 The technical scope of the present invention is not limited to the above embodiment, and various changes can be made without departing from the spirit of the present invention. For example, the present invention is not limited to the one applied to the above embodiment, and may be applied to an embodiment in which these embodiments are appropriately combined, and the present invention is not particularly limited.
１…作成支援装置、
１１…受付部、 １２…記憶部、 １３…プレビュー部、 １４…配置部、 １５…生成部、 １６…検知部、 １７…表示変更部、 １８…選択部、 ５２…エレメント
1 ... Creation support device,
11 ... Reception section, 12 ... Storage section, 13 ... Preview section, 14 ... Arrangement section, 15 ... Generation section, 16 ... Detection section, 17 ... Display change section, 18 ... Selection section, 52 ... Element
Claims (4)
作成者からの入力を受け付ける受付部と、
前記記事型ランディングページに表示するコンテンツの種類に対応付けされた複数のエレメントを記憶する記憶部と、
作成する前記記事型ランディングページをウェブ上で表示される態様でプレビュー画面に表示させるプレビュー部と、
前記複数のエレメントのうち、前記受付部で受け付けた前記入力に基づいて特定されるエレメントを、前記プレビュー画面における所望の領域に配置する配置部と、
前記プレビュー画面に表示されている前記記事型ランディングページをウェブページ上で表示させるソースコードを生成して出力可能とする生成部と、
が設けられていることを特徴とする作成支援装置。 It is a creation support device that supports the creation of article-type landing pages.
The reception section that accepts input from the creator, and
A storage unit that stores a plurality of elements associated with the type of content displayed on the article-type landing page, and a storage unit.
A preview section that displays the article-type landing page to be created on the preview screen in a manner that is displayed on the web.
Among the plurality of elements, an arrangement unit for arranging an element specified based on the input received by the reception unit in a desired area on the preview screen, and an arrangement unit.
A generator that can generate and output the source code that displays the article-type landing page displayed on the preview screen on the web page, and
A creation support device characterized by being provided with.
前記プレビュー画面の大きさ、および、形状の少なくとも一方を検知する検知部と、
検知された前記プレビュー画面の大きさ、および、形状の少なくとも一方に応じて前記プレビュー画面に配置された複数の前記エレメントの相対的な配置関係を変更する表示変更部と、
が更に設けられていることを特徴とする請求項１記載の作成支援装置。 The preview unit can change at least one of the size and shape of the preview screen based on the input received by the reception unit.
A detector that detects at least one of the size and shape of the preview screen, and
A display change unit that changes the relative arrangement relationship of a plurality of the elements arranged on the preview screen according to the detected size of the preview screen and at least one of the shapes.
The creation support device according to claim 1, wherein the device is further provided.
前記表示部の大きさ、および、形状の少なくとも一方を選択する選択部が更に設けられ、
前記表示変更部は、前記選択部により選択された前記表示部の大きさ、および、形状の少なくとも一方に基づいて前記プレビュー画面に配置された複数の前記エレメントの相対的な配置関係を変更することを特徴とする請求項１記載の作成支援装置。 A display change unit that changes the relative arrangement relationship of a plurality of the elements arranged on the preview screen according to the size of the display unit that displays the article-type landing page and at least one of the shapes.
A selection unit for selecting at least one of the size and shape of the display unit is further provided.
The display changing unit changes the relative arrangement relationship of a plurality of the elements arranged on the preview screen based on the size of the display unit selected by the selection unit and at least one of the shapes. 1. The creation support device according to claim 1.
コンピュータに、
作成者からの入力を受け付ける受付機能と、
前記記事型ランディングページに表示するコンテンツの種類に対応付けされた複数のエレメントを記憶する記憶機能と、
作成する前記記事型ランディングページをウェブ上で表示される態様でプレビュー画面に表示させるプレビュー機能と、
前記複数のエレメントのうち、前記受付部で受け付けた前記入力に基づいて特定されるエレメントを、前記プレビュー画面における所望の領域に配置する配置機能と、
前記プレビュー画面に表示されている前記記事型ランディングページをウェブページ上で表示させるソースコードを生成して出力可能とする生成機能と、
を実現させることを特徴とするプログラム。 A program that supports the creation of article-type landing pages.
On the computer
A reception function that accepts input from the creator, and
A storage function that stores multiple elements associated with the type of content displayed on the article-type landing page, and a storage function.
A preview function that displays the article-type landing page to be created on the preview screen in a manner that is displayed on the web, and
Among the plurality of elements, an arrangement function for arranging an element specified based on the input received by the reception unit in a desired area on the preview screen, and an arrangement function.
A generation function that can generate and output the source code that displays the article type landing page displayed on the preview screen on the web page, and
A program characterized by realizing.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2020115548A JP6895698B1 (en) | 2020-07-03 | 2020-07-03 | Creation support device and program |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2020115548A JP6895698B1 (en) | 2020-07-03 | 2020-07-03 | Creation support device and program |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| JP6895698B1 JP6895698B1 (en) | 2021-06-30 |
| JP2022013169A true JP2022013169A (en) | 2022-01-18 |
Family
ID=76540484
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP2020115548A Active JP6895698B1 (en) | 2020-07-03 | 2020-07-03 | Creation support device and program |
Country Status (1)
| Country | Link |
|---|---|
| JP (1) | JP6895698B1 (en) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2007094449A (en) * | 2005-08-30 | 2007-04-12 | Profield Co Ltd | Information editing device, information editing system, information editing method and program |
| WO2011033644A1 (en) * | 2009-09-17 | 2011-03-24 | 株式会社三菱東京Ｕｆｊ銀行 | Application development assisting device, program, and recording medium |
| CN102937979A (en) * | 2011-10-18 | 2013-02-20 | 微软公司 | User-defined optimization of webpage |
| WO2013133901A2 (en) * | 2012-03-06 | 2013-09-12 | Apple Inc. | Application for viewing images |
| US20130235067A1 (en) * | 2012-03-06 | 2013-09-12 | Apple Inc. | Color adjustors for color segments |
| JP2016062491A (en) * | 2014-09-19 | 2016-04-25 | ヤフー株式会社 | Information display device, delivery device, information display method, and information display program |
| WO2018225012A2 (en) * | 2017-06-08 | 2018-12-13 | Wix.Com Ltd. | System and method for smart interaction between website components |
| JP2020008946A (en) * | 2018-07-03 | 2020-01-16 | オムロン株式会社 | Information processing device and information processing method |
-
2020
- 2020-07-03 JP JP2020115548A patent/JP6895698B1/en active Active
Patent Citations (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2007094449A (en) * | 2005-08-30 | 2007-04-12 | Profield Co Ltd | Information editing device, information editing system, information editing method and program |
| WO2011033644A1 (en) * | 2009-09-17 | 2011-03-24 | 株式会社三菱東京Ｕｆｊ銀行 | Application development assisting device, program, and recording medium |
| CN102257477A (en) * | 2009-09-17 | 2011-11-23 | 株式会社三菱东京Ufj银行 | Application development assisting device, program, and recording medium |
| EP2402854A1 (en) * | 2009-09-17 | 2012-01-04 | The Bank of Tokyo-Mitsubishi UFJ, Ltd. | Application development assisting device, program, and recording medium |
| US20120005603A1 (en) * | 2009-09-17 | 2012-01-05 | The Bank Of Tokyo-Mitsubishi Ufj, Ltd. | Application development supporting apparatus, program, and recording medium |
| KR20140078676A (en) * | 2011-10-18 | 2014-06-25 | 마이크로소프트 코포레이션 | Custom optimization of web pages |
| JP2015501029A (en) * | 2011-10-18 | 2015-01-08 | マイクロソフト コーポレーション | Custom optimization of web pages |
| WO2013059375A1 (en) * | 2011-10-18 | 2013-04-25 | Microsoft Corporation | Custom optimization of web pages |
| US20130097488A1 (en) * | 2011-10-18 | 2013-04-18 | Microsoft Corporation | Custom optimization of web pages |
| EP2769311A1 (en) * | 2011-10-18 | 2014-08-27 | Microsoft Corporation | Custom optimization of web pages |
| CN102937979A (en) * | 2011-10-18 | 2013-02-20 | 微软公司 | User-defined optimization of webpage |
| CN103677529A (en) * | 2012-03-06 | 2014-03-26 | 苹果公司 | Application for viewing images |
| KR20130140896A (en) * | 2012-03-06 | 2013-12-24 | 애플 인크. | Application for viewing images |
| US20130235067A1 (en) * | 2012-03-06 | 2013-09-12 | Apple Inc. | Color adjustors for color segments |
| JP2014522527A (en) * | 2012-03-06 | 2014-09-04 | アップル インコーポレイテッド | Application for viewing images |
| WO2013133901A2 (en) * | 2012-03-06 | 2013-09-12 | Apple Inc. | Application for viewing images |
| JP2016062491A (en) * | 2014-09-19 | 2016-04-25 | ヤフー株式会社 | Information display device, delivery device, information display method, and information display program |
| WO2018225012A2 (en) * | 2017-06-08 | 2018-12-13 | Wix.Com Ltd. | System and method for smart interaction between website components |
| JP2020008946A (en) * | 2018-07-03 | 2020-01-16 | オムロン株式会社 | Information processing device and information processing method |
Also Published As
| Publication number | Publication date |
|---|---|
| JP6895698B1 (en) | 2021-06-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104239305B (en) | Generate and show the method and device of electronic document | |
| EP1597680A2 (en) | Markup language cut-and-paste | |
| JP2006048539A (en) | Information processor, its control method, and program | |
| JP2012230623A (en) | Document file display device, method and program | |
| KR102358855B1 (en) | Method and apparatus for generating web page | |
| JP2006221582A (en) | Information processor, method of controlling the same, and program | |
| US20130238984A1 (en) | Display control device, display control method, and computer program product | |
| JP2012008721A (en) | Information processor, display method, and program | |
| JP6895698B1 (en) | Creation support device and program | |
| JP2010271958A (en) | Form display system, information processing apparatus, information processing method and program | |
| KR20050078335A (en) | Device for providing e-book applied studying pattern and method using the same | |
| JP6327969B2 (en) | Information processing apparatus, information processing method, and program | |
| CN104615601A (en) | Webpage based recording system and method thereof | |
| US10275125B2 (en) | Image data generation apparatus and non-transitory computer-readable recording medium | |
| CN111027280A (en) | Method and system for generating and rendering digital publication and readable storage medium | |
| JP2009116543A (en) | Information processor and program | |
| JPH1196144A (en) | Method and device for converting layout of document information, and storage medium storing document information layout conversion processing program | |
| JP2019148649A (en) | Image processing apparatus, control method, and program | |
| JP7337357B2 (en) | Learning support device, learning support method, and learning support program | |
| JP7381900B2 (en) | Information processing system, its control method and program | |
| JP5085147B2 (en) | Layout processing apparatus, layout processing method, program, and recording medium | |
| JP5589396B2 (en) | Layout support device, layout support method, and program | |
| JP6810719B2 (en) | Information processing equipment, recording systems, and programs | |
| JPH10260961A (en) | Method and device for html file for www | |
| Aspin | Enhancing Dashboards |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| A621 | Written request for application examination |
Free format text: JAPANESE INTERMEDIATE CODE: A621 Effective date: 20200708 |
|
| A871 | Explanation of circumstances concerning accelerated examination |
Free format text: JAPANESE INTERMEDIATE CODE: A871 Effective date: 20200708 |
|
| A975 | Report on accelerated examination |
Free format text: JAPANESE INTERMEDIATE CODE: A971005 Effective date: 20200818 |
|
| A131 | Notification of reasons for refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A131 Effective date: 20201020 |
|
| A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20201029 |
|
| A131 | Notification of reasons for refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A131 Effective date: 20210202 |
|
| A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20210212 |
|
| 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: 20210511 |
|
| A61 | First payment of annual fees (during grant procedure) |
Free format text: JAPANESE INTERMEDIATE CODE: A61 Effective date: 20210601 |
|
| R150 | Certificate of patent or registration of utility model |
Ref document number: 6895698 Country of ref document: JP Free format text: JAPANESE INTERMEDIATE CODE: R150 |