特許 6182795 レイアウト方法

(19)【発行国】日本国特許庁(JP)

(12)【公報種別】特許公報(B1)

(11)【特許番号】6182795

(24)【登録日】2017年8月4日

(45)【発行日】2017年8月23日

(54)【発明の名称】レイアウト方法

(51)【国際特許分類】

   G06T 11/80 20060101AFI20170814BHJP

   G06F 3/0484 20130101ALI20170814BHJP

   G06F 3/0486 20130101ALI20170814BHJP

【ＦＩ】

   G06T11/80 D

   G06F3/0484 150

   G06F3/0486

【請求項の数】4

【全頁数】10

(21)【出願番号】特願2016-171119(P2016-171119)

(22)【出願日】2016年9月1日

【審査請求日】2016年9月2日

【早期審査対象出願】

(73)【特許権者】

【識別番号】516263834

【氏名又は名称】オハコプロダクツ株式会社

(74)【代理人】

【識別番号】240000350

【弁護士】

【氏名又は名称】弁護士法人ＧＶＡ法律事務所

(72)【発明者】

【氏名】甲斐 啓真

【審査官】 岡本 俊威

(56)【参考文献】

【文献】 特開平０６−１６１６９３（ＪＰ，Ａ）

(58)【調査した分野】（Int.Cl.，ＤＢ名）

Ｇ０６Ｔ １１／６０ −１１／８０

Ｇ０６Ｆ ３／０４８− ３／０４８６

Ｇ０６Ｆ ９／４４

(57)【特許請求の範囲】

【請求項1】

表示画面に表示された親要素上に子要素をドラッグ操作することによって新たな子要素を前記親要素上に配置するユーザインターフェースのレイアウト方法において、前記子要素のドラッグ操作によって前記親要素の領域内に当該子要素を位置させるのに応じて、前記親要素の領域内で、前記子要素を示すカーソルの位置が中心となるサイズに前記子要素を変形させ、ドラッグ操作の終了に応じて、その時点でのサイズで前記子要素が前記親要素上の指定方向に応じて配置されるレイアウト方法。

【請求項2】

前記親要素の領域内に既に他の子要素が存在している場合、前記親要素の領域のうち当該子要素が存在していない領域のみを対象として、前記親要素上に配置する新たな子要素を変形させる請求項１に記載のレイアウト方法。

【請求項3】

前記親要素の領域内に配置された子要素の領域内に前記カーソルの位置があるとき、当該子要素の領域のみを対象として、前記親要素上に配置する新たな子要素を変形させる請求項１又は２に記載のレイアウト方法。

【請求項4】

幅及び／又は高さが固定された前記子要素を前記親要素上に配置する場合、当該子要素のドラッグ操作によって当該子要素の位置のみを変化させる請求項１から３のいずれか一に記載のレイアウト方法。

【発明の詳細な説明】

【技術分野】

【0001】

本発明は、ｗｅｂサイトやアプリケーションのユーザインターフェースを作成する際のレイアウト方法に関する。

【背景技術】

【0002】

従来から、ｗｅｂサイトやアプリケーションソフトのユーザインターフェース作成に際しては、ＵＩデザイナーによる入力によって作成されるデザインデータをもとに、プログラマーによるソースコードの入力という作業が必要であり、ＵＩデザイナーにとっては、自分自身のデザインによるユーザインターフェースを自身の手で実現できていないという実態が生じていた。

【0003】

そこでこれまでも、ＵＩデザイナーがプログラマーを介することなく、自身の操作によってユーザインターフェースのレイアウトを実現する様々な方法が発明されてきた。例えば特許文献１には、メニューバーやプルダウンバーなどのパーツを直接画面に配置することでユーザインターフェースのレイアウトを実現可能にする技術が開示されている。

【先行技術文献】

【特許文献】

【0004】

【特許文献1】特開平８−１１５１９５号公報

【発明の概要】

【発明が解決しようとする課題】

【0005】

しかしながら、上記従来技術はあくまでメニューバーなどの特定の用途に限られたユーザインターフェースについてしか適用することができず、それゆえ却ってアプリケーション全体のユーザインターフェースの自由度合いを制約することとなっていた。

【課題を解決するための手段】

【0006】

以上のような課題を解決すべく、本発明は、表示画面に表示された親要素上に子要素をドラッグ操作することによって新たな子要素を前記親要素上に配置するユーザインターフェースのレイアウト方法において、前記子要素のドラッグ操作によって前記親要素の領域内に当該子要素を位置させるのに応じて、前記親要素の領域内で、前記子要素を示すカーソルの位置が中心となるサイズに前記子要素を変形させ、ドラッグ操作の終了に応じて、その時点でのサイズで前記子要素が前記親要素上の指定方向に応じて配置されるレイアウト方法などを提案する。

【発明の効果】

【0007】

主に以上のような構成をとる本発明によって、ＵＩデザイナーが特別なコーディング技術を要することなく直感的にインターフェースをレイアウトすることが可能になる。

【図面の簡単な説明】

【0008】

【図1】本実施形態のレイアウト方法の機能ブロックの一例を示す図

【図2】親要素の中に子要素が配置されている様子の一例を示す図

【図3】子要素の領域のサイズを変化させる一例を示す図

【図4】子要素の領域のサイズを変化させる別の一例を示す図

【図5】子要素の領域のサイズを変化させる別の一例を示す図

【図6】親要素の領域内で子要素を移動させた場合の子要素のサイズ又は配置位置の一例を示した図

【図7】各子要素の重心位置の移動に伴う子要素の幅長及び高さの変化の一例を表した図

【図8】各子要素の重心位置の移動に伴う子要素の幅長及び高さの変化の別の一例を表した図

【図9】本実施形態のレイアウト方法を実現するための装置の機能的な各構成をハードウェアとして実現した際の構成の一例を示す概略図

【図10】本実施形態のレイアウト方法を実現するための装置における処理の流れの一例を示す図

【発明を実施するための形態】

【0009】

以下、本発明の各実施形態について図面と共に説明する。なお、本発明はこれらの実施形態に何ら限定されるものではなく、技術常識にしたがって特許請求の範囲の各請求項に記載の技術的思想を有し、その要旨を逸脱しない範囲内において、様々な態様で実施し得る。

【0010】

＜＜実施形態＞＞
＜概要＞

【0011】

まず本実施形態にて実現されるユーザインターフェースのレイアウト方法を実現するための装置の一例を用いて説明を行う。ユーザは、装置のディスプレイ上の特定の情報の所定の領域である親領域内に要素を入れ込んでアプリケーションプログラムの配置を構成する。

【0012】

図１は、本実施形態のレイアウト方法の機能ブロックの一例を示す図である。同図において示されているように、本実施形態の「レイアウト装置」０１００は、「ドラッグ操作受付部」０１０１と、「要素変形部」０１０２と、「要素配置部」０１０３と、からなる。

【0013】

なお、以下で詳しく説明するレイアウトを実現する装置の機能ブロックは、いずれもハードウェア又はソフトウェアとして実現され得る。コンピュータを用いるものを例にすれば、ＣＰＵやメインメモリ、ＧＰＵ、画像メモリ、バス、二次記憶装置（ハードディスクや不揮発性メモリ）、操作ボタンやマウス、キーボード、タッチパネル、タッチパネルをタッチするための電子ペンなどの各種入力デバイス、ディスプレイその他各種出力デバイス、その他の外部周辺装置などのハードウェア構成部、またその外部周辺装置用のインターフェース、通信用インターフェース、それらのハードウェアを制御するためのドライバプログラムやその他のアプリケーションプログラムなどが挙げられる。

【0014】

そしてメインメモリ上に展開したプログラムに従ったＣＰＵの演算処理によって、入力デバイスやその他インターフェースなどから入力されメモリやハードウェア上に保持されているデータなどが加工、蓄積されたり、前記各ハードウェアやソフトウェアを制御するための命令が生成されたりする。ここで、上記プログラムは、モジュール化された複数のプログラムとして実現されてもよいし、２以上のプログラムを組み合わせて一のプログラムとして実現されても良い（本実施形態に限らず、本明細書の全体を通じて同様である）。

【0015】

まず「レイアウト装置」は、スマートフォン、タブレット、ＰＤＡその他の携帯端末である場合のほか、通常のパソコンなどのコンピュータであってもよい。典型的には、タブレットやスマートフォンなどの通信機能を備えた携帯端末を用いることが考えられ、それらの端末のディスプレイ上にコンテンツを入力させる枠を表示させ、当該枠の大きさや配置位置を調整することによりレイアウトを実現する。より具体的にいえば、レイアウト装置のディスプレイ等の表示画面に表示された親要素上に子要素をドラッグ操作することによって新たな子要素を前記親要素上に配置する方法により実現する。なおここでいうコンテンツの内容に特段の限定はなく、レイアウトの結果どのようなコンテンツが配置される構成であってもよい。

【0016】

なおここでいう「親要素」「子要素」とは、各要素の配置関係を意味する表現に過ぎず、それぞれの要素間に主従関係その他何らの特別な関係があることを意味するものではない。「親要素」とは、本方法において所与の最大領域として設定された領域である場合もあれば、当該最大領域のなかであらかじめ選択されたある所定範囲の領域であることもある。子要素が親要素よりも大きい場合もあり、この場合子要素は、当該親要素の領域内に重畳された部分についてのみレイアウトの対象となる。

【0017】

子要素は一である場合もあれば、複数の子要素がある場合も考えられる。複数の子要素はそれぞれが独立しており、その配置位置はもちろんその大きさが異なっていてももちろんよい。「子要素を前記親要素上に配置する」とは、親要素上に子要素を重畳させることを意味しており、親要素の領域内に一又は複数の子要素を簡易に配置できる当該処理を可能にすることにより、コンテンツ間の配置関係の柔軟性を確保することができる。

【0018】

なお、親要素の領域内に既に他の子要素が存在している場合には、前記親要素の領域のうち当該子要素が存在していない領域のみを対象として、前記親要素上に配置する新たな子要素を変形させるように構成することが望ましい。このような構成を機械的処理を用いて実現することにより、複数の子要素が重畳し好適なレイアウトとしての機能が損なわれてしまう事態を回避することができる。

【0019】

「ドラッグ操作受付部」０１０１は、親要素や子要素の配置位置を決めるためのドラッグ操作を受付ける。具体的には、マウスやタッチパネルなどの外部入力装置からの情報に基づいたドラッグ操作を受付ける。なおこのとき、親要素と子要素ともに、ドラッグ操作は当該各要素の中心位置を基点とした要素として表現される。具体的な説明は、後述の要素変形部の説明にて行うが、当該構成を採用することにより、要素間の相対的な配置位置を視認しやすく、より直感的に認識することができる。

【0020】

「要素変形部」０１０２は、上記ドラッグ操作受付部にて受け付けたドラッグ操作によって、親要素の領域内に子要素を位置させるのに応じて当該親要素の領域内で、前記子要素を示すカーソルの位置が中心となるサイズに前記子要素を変形させるような制御を行う。ここでいう「子要素を示すカーソルの位置」とは、子要素の相対的な位置を説明するために用いられるカーソルであり、ポインタその他の表示形式にて画面上に表出する。当該カーソルは親要素の領域中、子要素の相対的な配置位置を常に示すことを可能とするため、子要素の領域の中心位置に配置される。ここで図２を示す。同図は親要素０２０１の中に子要素０２０２が配置されている様子の一例を示すものであり、子要素０２０２の中心部分に指さしマークとしてのカーソル０２０３が配置されている。

【0021】

なお、子要素のサイズは親要素の領域内における子要素の相対位置によって変化するように構成されていることが好ましい。具体的には、記親要素の領域内で前記カーソルの位置が当該親要素の幅方向及び／又は高さ方向の半分の位置にあるとき、前記子要素の幅及び／又は高さが前記親要素の幅及び／又は高さの半分の長さとなり、且つ、前記子要素の高さ及び／又は幅が前記親要素の高さ及び／又は幅と同じ長さとなるような変形制御部を設け、この変形制御部が機能することによって子要素のサイズが適宜決まることが好ましい。当該構成を採用すれば、子要素の大きさについて、いちいちユーザが範囲指定をしたり、領域の大きさを調整したりする手間をかけずとも、スムーズにこれを決することが可能になる。

【0022】

ここで図３ないし５を示す。同各図は本装置を用いたレイアウト方法によって実現されるレイアウトのうち、様々にその領域のサイズを変化させる様子を説明するための図である。図３では、親要素０３０１の高さ方向上半分にカーソルをあてたため、子要素０３０２も親要素の高さの半分の長さとなり、且つ幅が親要素の幅と同じ長さとなっている。

【0023】

また、図４に表示されている子要素０４０２は、相対位置が親要素０４０１の幅の半分の長さしかなく、かつ中心部分より右側にて配置されていたため、相対位置として右側半分に縦長状形状にて配置されることとなる。さらに図５に示されているように、カーソル０５０３が正方形からなる親要素０５０１からなる場合にあっては、当該正方形上の親要素０５０１の重心部分にカーソルを合わせた場合、その幅又は高さは子要素０５０２の幅又は高さと等しくなり、結果として親要素０５０１に子要素０５０２が重畳する構成となる。このように、カーソル０３０３、０４０３、０５０３を移動させることにより、子要素の配置位置が変わるだけでなく、特段別の作業を行う必要なくその大きさも柔軟に変化さえることが可能になる。

【0024】

ここでさらに、子要素の配置位置を示すカーソルの移動に伴う子要素のサイズの変化について詳しく説明する。図６は本実施形態のレイアウト方法に関し、親要素の領域内で子要素ないし子要素のカーソルを移動させた場合の子要素のサイズ又は配置位置の一例を示した図である。同図のうち親要素０６０１中に重畳されている子要素０６０２、０６０３の重心位置に示されている点Ａ、Ｂは、それぞれ子要素のカーソルの位置を示す点であり、当該各点を中心としてカーソルを移動させた場合に子要素が様々な位置に配置される様子の変化を表している。縦軸がＸ軸で子要素の高さを示し、横軸がＹ軸で子要素の幅長をそれぞれ示している。

【0025】

図７及び図８は、親要素が方形からなる領域である場合に各子要素の重心位置の点Ａ及びＢの移動に伴う子要素の幅長及び高さの変化の一例を表した図である。各図中数値が示されているのは、幅及び高さをそれぞれ１とした場合の相対位置を示すための便宜である。図７において示されているように、Ｘの値が０．２の位置（左端から０．２だけ右寄りの位置）にある点Ａの場合、図６のＹ軸で表される幅長は０．４である。Ｘの値が０．５、すなわち上端及び下端の双方から等距離にある場合には幅長は１となり、これはすなわち子要素の幅長が親要素の幅長と等しくなることを意味している。また、Ｘの値が０．８の位置（右端から０．２だけ右寄りの位置）にある点Ｂの場合、図６のＹ軸で表される幅長は、先ほどの点Ａの場合と同様０．４である。すなわち、本実施形態のレイアウト方法においては、もし幅長を等しくさせようとしたとしても、その横軸の相対位置により子要素が左寄りになるか右寄りになるかが分かれることになる。

【0026】

図８についても同様に説明する。Ｙの値が０．４の位置（中心からから０．１だけ右寄りの位置）にある点Ａの場合、図６のＸ軸で表される高さは０．８である。Ｙの値が０．５、すなわち左端及び右端の双方から等距離にある場合には高さは１となり、これはすなわち子要素の高さが親要素の高さと等しくなることを意味している。また、Ｙの値が０．９５の位置（左端から０．０５だけ右寄りの位置）にある点Ｂの場合、図６のＸ軸で表される高さは、０．１である。すなわち、本実施形態のレイアウト方法においては、左右両端からの相対距離だけではなくその配置位置によって子要素の配置位置が変化することになる。

【0027】

これらの図に示されているように、本実施形態のレイアウト方法は、カーソルを移動させるだけで、子要素の配置位置を特定できるだけでなく、その領域のサイズまでをもスムーズに特定できる点において優れた効果をもたらすものであり、当該構成を採用することにより、プログラマーのように特別なコーディング技術を持たないデザイナーなどがその直感又はインスピレーションに則って気軽にアプリケーションにおけるレイアウトを実現することができる。

【0028】

「要素配置部」０１０３は、ドラッグ操作受付部にて受付け要素変形部により変形された子要素について、ドラッグ操作の受付終了に応じて、その時点でのサイズで子要素が親要素上の指定方向に応じて配置するように構成されている。ここでいう「親要素上の指定方向に応じて」とは、子要素の相対位置に応じて子要素の領域が親要素の領域中左右どちらに対して縦長に配置されるのか、上下どちらに対して横長に配置されるのかが決まることを意味している。要素配置部はドラッグ操作の終了に応じて上記処理を行うが、ここでいう「ドラッグ操作の終了」とは、単にマウスやポインタによる子要素のドラッグ処理が行われなくなった瞬間であってもよいし、所定時間ドラッグ処理が行われなかったことをもってドラッグ操作が終了したと判断してもよい。いずれの構成を採用してもよいし、いずれの構成を採用してもよい。

【0029】

なお、要素配置部による子要素の配置処理は、それ自体が親領域中における終局的な配置処理である必要は全くない。例えば、いちど配置した子要素の配置位置を移動させたり、当該子要素を削除したりすることがあってももちろんよい。このような構成を採用し、子要素の配置位置ないし子要素のサイズを随時調整することにより、親領域内における最適なレイアウトを適宜調整することが可能になる。

【0030】

＜具体的な構成＞
図９にあるように、本実施形態のレイアウト方法を実現するための装置は、各種演算処理を実行するための「ＣＰＵ」０９０１と、「記憶装置（記憶媒体）」０９０２と、「メインメモリ」０９０３と、「入力インターフェース」０９０５、「出力インターフェース」０９０４、「インターネット通信インターフェース」０９０６と、を備え、入出力インターフェースを介して、例えば「マウス」０９０８や「タッチパネル」０９０９、「ディスプレイ」０９０７、「プリンタ」などの外部周辺装置と情報の送受信を行う。また、インターネット通信インターフェースを介して「外部サーバ」０９８０などの外部装置と情報の送受信を行う。このインターネット通信インターフェースの具体的な態様は有線、無線を問わず、また、通信方法も直接、間接を問わない。よって特定の外部装置ないし同装置の利用者と紐づけられた第三者の管理するサーバとの間で情報の送受信を行ういわゆるクラウドコンピューティングの形式を採用することも可能である。

【0031】

記憶装置には以下で説明するような各種プログラムが格納されており、ＣＰＵはこれら各種プログラムをメインメモリのワーク領域内に読み出して展開、実行する。なお、これらの構成は、「システムバス」０９９９などのデータ通信経路によって相互に接続され、情報の送受信や処理を行う（以上の構成の基本的な構成は、以下で説明する他の装置のいずれについても同様である）。

【0032】

（ドラッグ操作受付部の具体的な構成）
コンピュータプログラムとコンピュータハードウェアにより構成され、ＣＰＵが記憶装置から「ドラッグ操作受付プログラム」０９１０をメインメモリに読み出して実行し、入力インターフェースを介して入力されたドラッグ操作に関する情報を受付ける。

【0033】

（要素変形部の具体的な構成）
コンピュータプログラムとコンピュータハードウェアにより構成され、ＣＰＵが記憶装置から「要素変形プログラム」０９２０をメインメモリに読み出して実行し、ドラッグ操作受付プログラムの実行により得られたドラッグ操作に関する情報に基づき、子要素のサイズを変形させる処理を行い、当該処理結果をメインメモリの所定のアドレスに格納する。

【0034】

（要素配置部の具体的な構成）
コンピュータプログラムとコンピュータハードウェアにより構成され、ＣＰＵが記憶装置から「要素配置プログラム」０９３０をメインメモリに読み出して実行し、要素変形プログラムの実行により得られた情報を読みだし親要素の領域中所定の位置に子要素を配置する処理を行い、当該処理結果をメインメモリの所定のアドレスに格納する。このときの子要素の配置位置及びサイズの情報は、親要素の領域内における座標の情報を用いることにより格納することが考えられる。

【0035】

（変形制御部の具体的な構成）
コンピュータプログラムとコンピュータハードウェアにより構成され、ドラッグ操作受付プログラムと要素変形プログラムが実行された場合、ＣＰＵが記憶装置から「変形制御プログラム」をメインメモリに読み出して実行し、子要素のサイズを制御する処理を行い当該処理結果をメインメモリの所定のアドレスに格納する。

【0036】

＜処理の流れ＞
以下で本実施形態のレイアウト方法における処理の流れの一例を図１０を用いて説明する。同図の処理の流れは以下のステップからなる。最初にステップＳ１００１では、親要素の領域内に子要素をドラッグする指示があるかどうかを判断する。ここでドラッグするとの判断結果であればステップＳ１００２の処理に移行し、ドラッグしないとの判断結果であればステップＳ１００１以降の処理を引き続き行う。ステップＳ１００２ではドラッグの指示内容に応じて子要素の形状を変形させながら子要素の配置位置を移動させる。ステップＳ１００３では、ドラッグ操作が終了したかどうかを判断する。ここでの判断結果が終了するとの内容であればステップＳ１００４の処理に移行し、ドラッグ操作を終了しないとの判断結果である場合にはステップＳ１００２以降の処理を引き続き行う。ステップＳ１００４では、ドラッグ操作の内容に応じ子要素を配置するかどうかを判断する処理を行い、そこでの判断結果が配置するとの内容である場合には、ステップＳ１００５として子要素を配置する。配置しないとの内容である場合には、その後の処理を行わずステップＳ１００１以降の処理を引き続き実行する。

【0037】

＜効果＞
主に以上のような構成をとる本発明によって、ＵＩデザイナーのように特別なコーディング技術を有していない者であっても、直感的にインターフェースをレイアウトすることが可能になる。

【符号の説明】

【0038】

０１００・・・レイアウト装置
０１０１・・・ドラッグ操作受付部
０１０２・・・要素変形部
０１０３・・・要素配置部

【要約】

【課題】コンテンツに関する従来のレイアウト方法は、あくまでメニューバーなどの特定の用途に限られたユーザインターフェースについてしか適用することができず、それゆえ却ってアプリケーション全体のユーザインターフェースの自由度合いを制約することとなっていた。
【解決手段】端末上に表示された親要素上に子要素をドラッグ操作し、子要素のドラッグされた相対位置に応じてサイズが調整されて配置されるレイアウト方法などを提案する。
【選択図】図２

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】

【図9】

【図10】