JP2022024629A - Information processor, processing method and program of information processor - Google Patents
Information processor, processing method and program of information processor Download PDFInfo
- Publication number
- JP2022024629A JP2022024629A JP2020127330A JP2020127330A JP2022024629A JP 2022024629 A JP2022024629 A JP 2022024629A JP 2020127330 A JP2020127330 A JP 2020127330A JP 2020127330 A JP2020127330 A JP 2020127330A JP 2022024629 A JP2022024629 A JP 2022024629A
- Authority
- JP
- Japan
- Prior art keywords
- icon
- font
- component
- information
- information processing
- 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.)
- Pending
Links
Images
Abstract
Description
本発明は、情報処理装置、情報処理装置の処理方法およびプログラムに関する。 The present invention relates to an information processing apparatus, a processing method and a program of the information processing apparatus.
現在、Ｗｅｂブラウザ（以下、ブラウザ）を搭載し、そのブラウザ上でＷｅｂページを閲覧できる機能を有する装置が普及している。また、ブラウザと同等の機能を持ち、装置上のアプリケーションを構成する要素として利用可能なＷｅｂＶｉｅｗと呼ばれるＧＵＩ部品（ＧＵＩコンポーネント）がある。ＷｅｂＶｉｅｗは、アプリケーション内でＷｅｂページを表示できる機能のことである。装置上のアプリケーションは、このＷｅｂＶｉｅｗを利用してアプリケーション画面上でブラウザと同等の表現や機能を実現できる。 Currently, a device equipped with a Web browser (hereinafter referred to as a browser) and having a function of browsing a Web page on the browser has become widespread. In addition, there is a GUI component (GUI component) called WebView that has the same function as a browser and can be used as an element constituting an application on a device. WebView is a function that can display a Web page in an application. The application on the device can realize the same expression and function as the browser on the application screen by using this WebView.
ところで、Ｗｅｂページの表現方法として、外部サーバに格納された外部フォントを利用するＷｅｂフォント（以下、Ｗｅｂフォント）と呼ばれる仕組みがある。ここで、外部フォントとは、Ｗｅｂフォントの仕組みで利用するために、外部サーバ上に配置されたフォントを指す。 By the way, as a method of expressing a Web page, there is a mechanism called a Web font (hereinafter, Web font) that uses an external font stored in an external server. Here, the external font refers to a font arranged on an external server in order to be used in the mechanism of the Web font.
Ｗｅｂフォントは、ＣＳＳ Ｆｏｎｔｓ Ｍｏｄｕｌｅ Ｌｅｖｅｌ ３標準仕様で策定されており、Ｗｅｂフォントとして利用できる外部フォントも数多く存在する。ここで、ＣＳＳはＣａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔｓの略であり、ＣＳＳはＷｅｂページの装飾を指定する仕様である。 Web fonts are defined by the CSS Fonts Module Level 3 standard specifications, and there are many external fonts that can be used as Web fonts. Here, CSS is an abbreviation for Cascading Style Sheets, and CSS is a specification for designating the decoration of a Web page.
Ｗｅｂページ作成者は、Ｗｅｂフォントを利用することで、あらゆる装置上で文字の見た目を統一することができ、Ｗｅｂページを展開する企業のブランド力向上や、Ｗｅｂページ開発工数の低減に繋がっている。 By using web fonts, web page creators can unify the appearance of characters on all devices, which leads to improvement of the brand power of companies that develop web pages and reduction of man-hours for web page development. ..
特許文献１において、アプリケーション画面において、ＷｅｂＶｉｅｗ以外のＧＵＩ部品でも外部フォントを利用できる方法が開示されている。 Patent Document 1 discloses a method in which an external font can be used in a GUI component other than WebView on an application screen.
特許文献１では、ＷｅｂＶｉｅｗでＷｅｂフォントの仕組みを利用した場合、装置に対して外部フォントが読み込まれた旨を通知する。通知を受け取った装置は、ＷｅｂＶｉｅｗ以外のＧＵＩ部品に、その外部フォントを適用することで、各部品のフォントを統一する。 In Patent Document 1, when the mechanism of the Web font is used in WebView, the device is notified that the external font has been read. The device that receives the notification applies the external font to the GUI parts other than WebView to unify the font of each part.
しかしながら、ＷｅｂＶｉｅｗ内でアイコンフォントが利用され、ＷｅｂＶｉｅｗ以外のＧＵＩ部品にアイコン画像が利用されていた場合、アイコンフォントとアイコン画像との見た目が一致せず、違和感が生じる恐れがある。ここで、アイコン画像とは、アイコン向けに利用される画像のことを指す。また、アイコンフォントとは、アイコンのような見た目を表現できる外部フォントを指す。アイコンフォントは、ＨＴＭＬ仕様やＣＳＳ仕様に基づいて処理されるため、ＷｅｂＶｉｅｗのようなＷｅｂページを解析して実行できる部品以外では、アイコンフォントを利用することはできない。 However, when the icon font is used in WebView and the icon image is used for GUI parts other than WebView, the appearance of the icon font and the icon image do not match, and there is a possibility that a sense of incongruity may occur. Here, the icon image refers to an image used for the icon. The icon font refers to an external font that can express an appearance like an icon. Since the icon font is processed based on the HTML specification and the CSS specification, the icon font cannot be used except for the parts that can analyze and execute the Web page such as WebView.
ここで、アイコン画像にアイコンフォントの表現を反映できない例を示す。選択状態と非選択状態をアイコンで表現する場合、Ｗｅｂページのアイコンフォントと装置のＧＵＩ部品のアイコン画像とで、アイコンの見た目が異なり、ユーザの混乱を招いてしまうことがある。具体的には、Ｗｅｂページのアイコンフォントの選択状態をチェックマークで表現し、非選択状態をバツで表現しており、一方で、ＧＵＩ部品の選択状態をチェックマークの黒塗りで表現し、非選択状態をチェックマークの白塗りで表現している場合を考える。この場合、同じ選択状態と、同じ非選択状態でも、ＷｅｂＶｉｅｗとＷｅｂＶｉｅｗ以外のＧＵＩ部品によって、見た目が大きく異なり、ユーザは混乱してしまう。 Here, an example in which the expression of the icon font cannot be reflected in the icon image is shown. When the selected state and the non-selected state are represented by icons, the appearance of the icon differs between the icon font of the Web page and the icon image of the GUI component of the device, which may cause confusion for the user. Specifically, the selected state of the icon font of the Web page is represented by a check mark and the non-selected state is represented by a cross, while the selected state of the GUI component is represented by a black check mark and is not displayed. Consider the case where the selected state is expressed by whitening the check mark. In this case, even in the same selected state and the same non-selected state, the appearance differs greatly depending on the GUI component other than WebView and WebView, and the user is confused.
このため、ＷｅｂＶｉｅｗでアイコンフォントを利用する際に、アイコンフォントの表現をＷｅｂＶｉｅｗ以外のＧＵＩ部品にも適用する方法が望まれている。 Therefore, when using an icon font in WebView, a method of applying the expression of the icon font to GUI parts other than WebView is desired.
本発明の目的は、アプリケーションにおいて、Ｗｅｂページを表示させるための第１のコンポーネントと、第１のコンポーネントとは異なる第２のコンポーネントとにおけるアイコンの見た目の違和感を低減することができるようにすることである。 An object of the present invention is to make it possible to reduce the discomfort of the appearance of an icon in a first component for displaying a Web page and a second component different from the first component in an application. Is.
本発明の情報処理装置は、Ｗｅｂページを表示させるための第１のコンポーネントと、前記第１のコンポーネントとは異なる第２のコンポーネントとが含まれるアプリケーションを実行する情報処理装置であって、前記第１のコンポーネントで表示されるＷｅｂページにおいて記述され、外部から取得される外部フォントにより規定される第１アイコンに適用される装飾情報を取得する装飾情報取得手段と、前記第２のコンポーネントにおいて、前記装飾情報取得手段により取得された装飾情報を用いて、前記第１アイコンに対応する第２アイコンの描画を行う描画手段と、を有する。 The information processing apparatus of the present invention is an information processing apparatus that executes an application including a first component for displaying a Web page and a second component different from the first component. In the decoration information acquisition means for acquiring the decoration information described in the Web page displayed by the component 1 and applied to the first icon defined by the external font acquired from the outside, and in the second component, the said It has a drawing means for drawing a second icon corresponding to the first icon by using the decoration information acquired by the decoration information acquisition means.
本発明によれば、アプリケーションにおいて、Ｗｅｂページを表示させるための第１のコンポーネントと、第１のコンポーネントとは異なる第２のコンポーネントとにおけるアイコンの見た目の違和感を低減することができる。 According to the present invention, it is possible to reduce the discomfort of the appearance of the icon in the first component for displaying the Web page and the second component different from the first component in the application.
以下、本発明の実施形態について、図面を参照して説明する。なお、以下の実施形態は特許請求の範囲に関る本発明を限定するものではなく、また、実施形態で説明されている特徴の組み合わせの全てが本発明の解決手段に必須のものとは限らない。なお、同一な構成については、同じ符号を付して説明する。 Hereinafter, embodiments of the present invention will be described with reference to the drawings. It should be noted that the following embodiments do not limit the present invention in terms of the scope of claims, and not all combinations of features described in the embodiments are essential for the means for solving the present invention. do not have. The same configuration will be described with the same reference numerals.
（第１の実施形態）
本実施形態では、Ｗｅｂページが利用する外部フォント（Ｗｅｂフォント）により表現されるアイコンを、ＷｅｂＶｉｅｗ以外のＧＵＩ部品において、当該ＧＵＩ部品が利用するアイコンと差し変えて描画する例を説明する。なお、ＧＵＩ部品（ＧＵＩコンポーネント）とは、ボタン、テキストボックスやウィンドウなどＧＵＩ（グラフィカルインターフェース）において画面を構成する部品である。ＧＵＩ部品は、ウィジェットとも呼ばれる。
(First Embodiment)
In this embodiment, an example in which an icon represented by an external font (Web font) used by a Web page is drawn by replacing it with an icon used by the GUI component in a GUI component other than WebView will be described. The GUI component (GUI component) is a component that constitutes a screen in a GUI (graphical interface) such as a button, a text box, and a window. GUI parts are also called widgets.
図１は、第１の実施形態による情報処理装置１００のハードウェア構成例を示す図である。情報処理装置１００は、例えばコンピュータであり、ＣＰＵ１０１と、ＲＯＭ１０２と、ＲＡＭ１０３と、インタフェース１０４と、バス１０５とを有する。
FIG. 1 is a diagram showing a hardware configuration example of the
ＣＰＵ１０１は、情報処理装置１００の全体を制御するＣｅｎｔｒａｌ Ｐｒｏｃｅｓｓｉｎｇ Ｕｎｉｔ（ＣＰＵ）である。ＲＯＭ１０２は、変更を必要としないプログラムやパラメータを格納するＲｅａｄ Ｏｎｌｙ Ｍｅｍｏｒｙ（ＲＯＭ）である。ＲＡＭ１０３は、外部装置などから供給されるプログラムやデータを一時記憶するＲａｎｄｏｍ Ａｃｃｅｓｓ Ｍｅｍｏｒｙ（ＲＡＭ）である。インタフェース１０４は、保持するデータや供給されたデータを表示するためのインタフェースである。バス１０５は、ＣＰＵ１０１とＲＯＭ１０２とＲＡＭ１０３とインタフェース１０４を通信可能に接続するシステムバスである。
The
なお、情報処理装置１００は、ユーザからの操作を受けて、データを入力するマウスなどのポインティングデバイスやキーボードなどの入力デバイスとのインタフェース等を有してもよい。また、情報処理装置１００は、情報処理装置１００に固定して設置されたハードディスクやメモリカード等を有してもよい。また、情報処理装置１００は、情報処理装置１００から着脱可能なフレキシブルディスク（ＦＤ）やＣｏｍｐａｃｔ Ｄｉｓｋ（ＣＤ）等の光ディスク、磁気や光カード、ＩＣカード、メモリカードなどを含む外部記憶装置等を有してもよい。また、情報処理装置１００は、インターネットなどのネットワーク回線に接続するためのネットワークインターフェイス等を有してもよい。
The
図２は、第１の実施形態による情報処理装置１００の機能構成例を示す図である。情報処理装置１００は、図１のＣＰＵ１０１がＲＯＭ１０２およびＲＡＭ１０３に記憶されたプログラムを実行することにより、図２に示す機能部を実現する。なお、各機能構成の一部または全部をＡＳＩＣやＦＰＧＡなどのハードウェアにより実現してもよい。情報処理装置１００は、Ｗｅｂページ解析部２０２と、外部フォント取得部２０３と、装飾情報取得部２０４と、装飾情報更新部２０５と、アイコンフォント描画部２０６と、アイコン画像更新部２０７とを有する。
FIG. 2 is a diagram showing a functional configuration example of the
Ｗｅｂページ２０１は、外部サーバから送られてくるデータであってもよいし、情報処理装置１００上に保存されているデータであってもよい。Ｗｅｂページ解析部２０２は、ＨＴＭＬ（Ｈｙｐｅｒ Ｔｅｘｔ Ｍａｒｋｕｐ Ｌａｎｇｕａｇｅ）文書等の構造化文書を含むＷｅｂページ２０１を解析し、Ｗｅｂページ２０１を表示させるための処理を実行する。ここで、Ｗｅｂページ解析部２０２の利用形態は、ＷｅｂＶｉｅｗでもよいし、ブラウザアプリケーションでもよい。
The
コードポイント対応表２０８は、アイコン画像と、アイコン画像に対応する外部フォントのコードポイントが記載されたテーブルである。外部フォント取得部２０３は、Ｗｅｂページ解析部２０２がＷｅｂページ２０１を解析した情報を基に、Ｗｅｂページ２０１に含まれる外部フォントを取得する。
The code point correspondence table 208 is a table in which the icon image and the code point of the external font corresponding to the icon image are described. The external
装飾情報取得部２０４は、外部フォント取得部２０３により取得された外部フォントに適用された装飾情報を取得する。ＧＵＩ部品の装飾情報２０９は、ＧＵＩ部品に施された装飾に関わる情報である。装飾情報更新部２０５は、ＧＵＩ部品の装飾情報２０９に従って、装飾情報取得部２０４により取得された装飾情報を更新する。
The decoration
アイコンフォント描画部２０６は、装飾情報更新部２０５により更新された装飾情報を、外部フォント取得部２０３により取得された外部フォントに適用して描画する。アイコン画像更新部２０７は、ＷｅｂＶｉｅｗ以外のＧＵＩ部品が利用するアイコン画像を更新する。
The icon
図３は、第１の実施形態による情報処理装置１００の処理方法を示すフローチャートである。なお、図３および以降で示すフローチャートにおける各ステップの処理は、ＣＰＵ１０１がＲＯＭ１０２や外部記憶装置に記憶されるプログラムを読み込み実行することにより情報の演算や加工および各ハードウェアの制御を行うことで実現される。なお、図３および以降に示すフローチャートにおける各ステップの処理の一部ないし全部を一つまたは複数のＡＳＩＣやＦＰＧＡなどのハードウェアにより実現する構成としてもよい。図３に示すフローチャートは、Ｗｅｂページを表示させるためのＧＵＩ部品と、Ｗｅｂページを表示せず、Ｗｅｂページ以外のコンテンツを表示するためのＧＵＩ部品とが含まれるアプリケーションを情報処理装置１００が実行する際に開始される。ステップＳ３０１では、Ｗｅｂページ解析部２０２は、Ｗｅｂページ２０１を取得する。ここで、Ｗｅｂページ２０１は、ＨＴＭＬ文書、ＪａｖａＳｃｒｉｐｔ（登録商標）、ＣＳＳファイル、外部フォント、および画像などを含む。
FIG. 3 is a flowchart showing a processing method of the
図４（Ａ）は、アイコンフォントを利用したＷｅｂページ２０１の例を示す図である。図４（Ａ）のＷｅｂページ２０１には、ＨＴＭＬ要素に対する装飾を指定するｓｔｙｌｅ要素が１個、文字列表示部品を表現するｄｉｖ要素が２個含まれる。各ｄｉｖ要素の中には、装飾情報の句切れ目を示すｓｐａｎ要素が１つ含まれている。情報処理装置１００は、図４（Ａ）のＷｅｂページ２０１をブラウザアプリケーションで描画すると、図４（Ｂ）のＷｅｂＶｉｅｗ４０１のような見た目になる。図４（Ａ）を見ると、印刷ジョブという文字列の前の外部フォントのコードポイントは２７１４であり、Ｗｅｂ広告という文字列の前の外部フォントのコードポイントは２７１６となっている。
FIG. 4A is a diagram showing an example of a
図４（Ｂ）は、ＷｅｂＶｉｅｗ４０１のＧＵＩ部品を示す。ＷｅｂＶｉｅｗ４０１は、アイコンフォント４０２と、アイコンフォント４０３を有する。アイコンフォント４０２は、コードポイント２７１４の外部フォントを基に描画したアイコンフォントである。アイコンフォント４０３は、コードポイント２７１６の外部フォントを基に描画したアイコンフォントである。ここで、アイコンフォント４０２のチェックマークが選択状態を示し、アイコンフォント４０３のバツが非選択状態を示している。
FIG. 4B shows a GUI component of WebView401. The
図４（Ｃ）は、図４（Ｂ）のアイコンフォント４０２および４０３の描画にそれぞれ利用される外部フォント４１２および４１３を示す。外部フォント４１２および４１３は、ＷｅｂＶｉｅｗのＧＵＩ部品が参照する外部フォントである。外部フォント４１２は、コードポイント２７１４の外部フォントである。外部フォント４１３は、コードポイント２７１６の外部フォントである。外部フォント４１２および４１３には、色情報がない。ＷｅｂＶｉｅｗは、第１のコンポーネントの一例である。外部フォント４１２および４１３は、ＣＳＳ Ｆｏｎｔｓ Ｍｏｄｕｌｅ Ｌｅｖｅｌ ３に規定されるＷｅｂフォントである。
4 (C) shows
図４（Ｂ）のアイコンフォント４０２および４０３は、それぞれ、図４（Ｃ）の外部フォント４１２および４１３に対して、図４（Ａ）のｓｔｙｌｅ要素に記載される色情報によって、色が付与されている。アイコンフォント４０２は、コードポイント２７１４の外部フォント４１２に対して、図４（Ａ）のｄａｒｋｇｒｅｅｎの色が付与されている。アイコンフォント４０３は、コードポイント２７１６の外部フォント４１３に対して、図４（Ａ）のｌｉｇｈｔｃｏｒａｌの色が付与されている。
The
図５（Ａ）は、アイコン画像５０２および５０３を利用したＷｅｂＶｉｅｗ以外のＧＵＩ部品の例を示す図である。アプリケーション５０１は、アイコン画像５０２と、アイコン画像５０３を有する。アイコン画像５０２および５０３は、ＷｅｂＶｉｅｗ以外のＧＵＩ部品が参照するアイコン画像である。アイコン画像５０２は、選択状態を表すアイコン画像である。アイコン画像５０３は、非選択状態を表すアイコン画像である。
FIG. 5A is a diagram showing an example of a GUI component other than WebView using the
図５（Ｂ）は、図５（Ａ）のアプリケーション５０１と図４（Ｂ）のＷｅｂＶｉｅｗ４０１を組み合わせた例を示す図である。アプリケーション５１１は、図４（Ｂ）のＷｅｂＶｉｅｗ４０１と、図５（Ａ）のアイコン画像５０２および５０３を有する。ＷｅｂＶｉｅｗ４０１は、図４（Ｂ）と同様に、アイコンフォント４０２および４０３を有する。ＷｅｂＶｉｅｗ４０１のアイコンフォント４０２の選択状態およびアイコンフォント４０３の非選択状態と、ＷｅｂＶｉｅｗ以外のＧＵＩ部品のアイコン画像５０２の選択状態とアイコン画像５０３の非選択状態は、見た目が異なる。そのため、ユーザは、「印刷ジョブ」と「Ｗｅｂ広告」と「用紙残量」と「トナー残量」が、それぞれ、選択された状態か否かを混乱しやすい。
5 (B) is a diagram showing an example of combining the
図６は、図２のコードポイント対応表２０８の例を示す図である。コードポイント対応表２０８には、左列のアイコン画像５０２および５０３等の識別子と、右列の外部フォント４１２および４１３等のコードポイントとの対応関係が記載されている。例えば、図５（Ｂ）の選択状態を意味するアイコン画像５０２には、図５（Ｂ）の５１３のようなコードポイント２７１４の外部フォント４１２が対応付けされている。
FIG. 6 is a diagram showing an example of the code point correspondence table 208 of FIG. The code point correspondence table 208 describes the correspondence between the identifiers such as the
次に、図３のステップＳ３０２では、Ｗｅｂページ解析部２０２は、Ｗｅｂページ２０１の中のＨＴＭＬ文書の上から順にＨＴＭＬ要素を解析する。
Next, in step S302 of FIG. 3, the Web
ステップＳ３０３では、Ｗｅｂページ解析部２０２は、Ｗｅｂページ２０１の中にＣＳＳにより外部フォントが適用された要素があり、その外部フォントがコードポイント対応表２０８に記載されたコードポイントの外部フォントであるか否かを判定する。Ｗｅｂページ解析部２０２は、その外部フォントがコードポイント対応表２０８に記載されたコードポイントの外部フォントである場合には、ステップＳ３０４に進む。また、Ｗｅｂページ解析部２０２は、その外部フォントがコードポイント対応表２０８に記載されたコードポイントの外部フォントでない場合には、ステップＳ３０２に戻る。
In step S303, the Web
ステップＳ３０４では、外部フォント取得部２０３は、Ｗｅｂページ２０１から、上記のコードポイント対応表２０８に記載されているアイコン画像に対応するコードポイントの外部フォントを取得する。
In step S304, the external
次に、ステップＳ３０５では、装飾情報取得部２０４は、Ｗｅｂページ２０１において記述され、ステップＳ３０４で取得された外部フォントに適用されている装飾情報（色情報等）を取得する。装飾情報は、ＣＳＳを指し、表示位置、太字、下線、取り消し線、文字の色、文字の背景色、透明度、またはアニメーションを含む。
Next, in step S305, the decoration
図７（Ａ）は、外部フォントに指定される装飾情報を示し、図７（Ｂ）は、アイコン画像の指定方法の例を示す。図７（Ａ）は、図４（Ａ）のＷｅｂページ２０１において、コードポイント２７１４の外部フォント４１２に指定された装飾情報を示す。
FIG. 7A shows decoration information designated for the external font, and FIG. 7B shows an example of a method for designating an icon image. FIG. 7A shows the decoration information specified in the
次に、ステップＳ３０６では、アイコンフォント描画部２０６は、ステップＳ３０４で取得された外部フォントに対して、ステップＳ３０５で取得された装飾情報を適用し、アイコンフォントを描画する。図４（Ａ）のＷｅｂページ２０１の場合、アイコンフォント描画部２０６は、コードポイント２７１４の外部フォント４１２に対して、図４（Ａ）のｄａｒｋｇｒｅｅｎの装飾情報を適用し、図４（Ｂ）のアイコンフォント４０２を描画する。また、アイコンフォント描画部２０６は、コードポイント２７１６の外部フォント４１３に対して、図４（Ａ）のｌｉｇｈｔｃｏｒａｌの装飾情報を適用し、図４（Ｂ）のアイコンフォント４０３を描画する。
Next, in step S306, the icon
次に、ステップＳ３０７では、アイコン画像更新部２０７は、コードポイント対応表２０８を参照し、ステップＳ３０４で取得された外部フォントのコードポイントに対応する、ＷｅｂＶｉｅｗ以外のＧＵＩ部品が参照するアイコン画像５０２等のパスを取得する。
Next, in step S307, the icon
図７（Ｂ）は、ＷｅｂＶｉｅｗ以外のＧＵＩ部品におけるアイコン画像の指定例を示す。図７（Ｂ）を見ると、ＢｕｔｔｏｎクラスのｂｔｎＣｈｅｃｋｅｄインスタンスのアイコン画像には、／ｈｏｍｅ／ｓａｍｐｌｅ／ｃｈｅｃｋｅｄ．ｐｎｇのパスに存在する画像が指定されている。同様に、ＢｕｔｔｏｎクラスのｂｔｎＵｎｃｈｅｃｋｅｄインスタンスのアイコン画像には、／ｈｏｍｅ／ｓａｍｐｌｅ／ｕｎｃｈｅｃｋｅｄ．ｐｎｇのパスに存在する画像が指定されている。例えば、ステップＳ３０７では、アイコン画像更新部２０７は、選択状態を示すアイコン画像５０２のパスとして、図７（Ｂ）の／ｈｏｍｅ／ｓａｍｐｌｅ／ｃｈｅｃｋｅｄ．ｐｎｇのパスを取得する。
FIG. 7B shows an example of designating an icon image in a GUI component other than WebView. Looking at FIG. 7B, the icon image of the buttonChecked instance of the Button class has / home / sample / checked. The image existing in the path of png is specified. Similarly, the icon image of the btnUnchecked instance of the Button class has / home / sample / unchecked. The image existing in the path of png is specified. For example, in step S307, the icon
次に、ステップＳ３０８では、アイコン画像更新部２０７は、ステップＳ３０７で取得されたパスのアイコン画像に対して、ステップＳ３０６で描画されたアイコンフォントを上書きする。図７（Ｂ）の場合、アイコン画像更新部２０７は、／ｈｏｍｅ／ｓａｍｐｌｅ／ｃｈｅｃｋｅｄ．ｐｎｇのパスのアイコン画像に対して、ステップＳ３０６で描画されたアイコンフォントを上書きする。
Next, in step S308, the icon
次に、ステップＳ３０９では、Ｗｅｂページ解析部２０２は、Ｗｅｂページ２０１の解析が終了してる場合には、図３のフローチャートの処理を終了し、Ｗｅｂページ２０１の解析が終了していない場合には、ステップＳ３０２に戻る。
Next, in step S309, the Web
図８（Ａ）は、図５（Ｂ）と同じアプリケーション５１１の表示例を示す図である。アプリケーション５１１は、図４（Ｂ）のＷｅｂＶｉｅｗ４０１と、図５（Ａ）のアイコン画像５０２および５０３を有する。ＷｅｂＶｉｅｗ４０１は、アイコンフォント４０２および４０３を有する。アイコンフォント４０２および４０３は、ＷｅｂＶｉｅｗ４０１のＧＵＩ部品である。アイコン画像５０２および５０３は、ＷｅｂＶｉｅｗ以外のＧＵＩ部品である。
FIG. 8A is a diagram showing a display example of the
選択状態のアイコン画像５０２は、選択状態のアイコンフォント４０２に対して、見た目が異なる。非選択状態のアイコン画像５０３は、非選択状態のアイコンフォント４０３に対して、見た目が異なる。
The
図８（Ｂ）は、図３のフローチャートの処理を行った場合のアプリケーション５１１の表示例を示す図である。アプリケーション５１１は、図４（Ｂ）のＷｅｂＶｉｅｗ４０１と、アイコン画像８０１および８０２を有する。ＷｅｂＶｉｅｗ４０１は、アイコンフォント４０２および４０３を有する。アイコンフォント４０２および４０３は、ＷｅｂＶｉｅｗ４０１のＧＵＩ部品である。アイコン画像８０１および８０２は、ＷｅｂＶｉｅｗ以外のＧＵＩ部品である。
FIG. 8B is a diagram showing a display example of the
アイコン画像８０１は、図８（Ａ）のアイコン画像５０２のパスに対して、アイコンフォント４０２が上書きされた画像である。選択状態のアイコン画像８０１は、選択状態のアイコンフォント４０２に対して、見た目が同じであり、視認性の低下を防ぐことができる。
The
アイコン画像８０２は、図８（Ａ）のアイコン画像５０３のパスに対して、アイコンフォント４０３が上書きされた画像である。非選択状態のアイコン画像８０２は、非選択状態のアイコンフォント４０３に対して、見た目が同じであり、視認性の低下を防ぐことができる。
The
（第２の実施形態）
図９（Ａ）～（Ｃ）は、ＷｅｂＶｉｅｗ内の背景色と、ＷｅｂＶｉｅｗ以外のＧＵＩ部品の背景色が異なり、視認性の低下を招く例を示す図である。
(Second embodiment)
9 (A) to 9 (C) are diagrams showing an example in which the background color in WebView and the background color of GUI parts other than WebView are different, resulting in a decrease in visibility.
図９（Ａ）は、ＷｅｂＶｉｅｗの丸い形状のアイコンフォントを描画した例を示す図である。背景色は、白である。このとき、図９（Ａ）のＷｅｂＶｉｅｗには、アンチエイリアス処理が施される。アンチエイリアス処理とは、情報処理装置１００が文字や図形を描画および表示する際に、斜線や曲線などに発生する微細な階段状のギザギザした部分を目立たなくする処理である。
FIG. 9A is a diagram showing an example of drawing a round icon font of WebView. The background color is white. At this time, the WebView of FIG. 9A is subjected to antialiasing processing. The anti-aliasing process is a process of making fine stepped jagged portions generated in diagonal lines, curves, and the like inconspicuous when the
図９（Ｂ）は、第１の実施形態の処理に従って描画したアイコンフォントを、ＷｅｂＶｉｅｗ以外のＧＵＩ部品が参照するパスのアイコン画像に上書きしたものである。ＷｅｂＶｉｅｗ以外のＧＵＩ部品の背景色は、黒である。図９（Ｂ）をみて分かる通り、背景色が黒の領域に、背景色を白として描画したアイコンフォント（アイコン画像）を配置したため、視認性が低下してしまっている。 FIG. 9B is an icon font drawn according to the process of the first embodiment overwritten with an icon image of a path referenced by a GUI component other than WebView. The background color of GUI parts other than WebView is black. As can be seen from FIG. 9B, since the icon font (icon image) drawn with the background color as white is arranged in the region where the background color is black, the visibility is deteriorated.
図９（Ｃ）は、理想的な表示結果を示す。図９（Ｃ）では、ＧＵＩ部品は、背景色を黒としてアンチエイリアス処理が施されているので、視認性が高い。そこで、第２の実施形態では、図９（Ａ）のＷｅｂＶｉｅｗ内の背景色と、図９（Ｂ）のＷｅｂＶｉｅｗ以外のＧＵＩ部品の背景色が異なった場合に、視認性の低下を防ぐ例を示す。具体的には、情報処理装置１００は、図９（Ａ）のアイコンフォントを描画する際に、図９（Ｂ）のＷｅｂＶｉｅｗ以外のＧＵＩ部品の背景色を参照し、装飾情報に背景色の適用を追加する。
FIG. 9C shows an ideal display result. In FIG. 9C, the GUI component has a background color of black and is antialiased, so that the GUI component has high visibility. Therefore, in the second embodiment, when the background color in WebView of FIG. 9A and the background color of the GUI component other than WebView of FIG. 9B are different, an example of preventing the deterioration of visibility is prevented. show. Specifically, when drawing the icon font of FIG. 9A, the
図１０は、第２の実施形態による情報処理装置１００の処理方法を示すフローチャートである。図１０は、図３に対して、ステップＳ１００１およびＳ１００２を追加したものである。図１０のステップＳ３０１～Ｓ３０９の処理は、図３のステップＳ３０１～Ｓ３０９の処理と同じである。ステップＳ１００１およびＳ１００２は、ステップＳ３０５とステップＳ３０６の間に設けられる。情報処理装置１００は、ステップＳ３０５の後、ステップＳ１００１に進む。以下、第２の実施形態が第１の実施形態と異なる点を説明する。
FIG. 10 is a flowchart showing a processing method of the
ステップＳ３０５では、装飾情報取得部２０４は、Ｗｅｂページ２０１から、ステップＳ３０４で取得された外部フォントに適用されている装飾情報（色情報等）を取得する。
In step S305, the decoration
次に、ステップＳ１００１では、装飾情報更新部２０５は、ＷｅｂＶｉｅｗ以外のＧＵＩ部品が参照するアイコン画像に適用されている装飾情報（背景色）２０９を取得する。例えば、装飾情報取得部２０４は、図９（Ｂ）のＷｅｂＶｉｅｗ以外のＧＵＩ部品が参照するアイコン画像に適用されている背景色として、黒色を取得する。
Next, in step S1001, the decoration
次に、ステップＳ１００２では、装飾情報更新部２０５は、ステップＳ３０５で取得された装飾情報に対して、ステップＳ１００１で取得された装飾情報（背景色）２０９を追加することにより、ステップＳ３０５で取得された装飾情報を更新する。その後、装飾情報取得部２０４は、ステップＳ３０６に進む。
Next, in step S1002, the decoration
図１１（Ａ）および（Ｂ）は、図１０のステップＳ１００２で背景色を追加する前後の装飾情報の例を示す図である。図１１（Ａ）は、ステップＳ３０５で取得された装飾情報を示す図であり、図７（Ａ）の装飾情報と同じである。ステップＳ１００１では、装飾情報更新部２０５は、例えば、背景色として黒色を取得する。ステップＳ１００２では、装飾情報更新部２０５は、ステップＳ３０５で取得された図１１（Ａ）の装飾情報に対して、ステップＳ１００１で取得された黒色の背景色の適用を追加し、図１１（Ｂ）に示す装飾情報を生成する。具体的には、装飾情報更新部２０５は、図１１（Ａ）の装飾情報に対して、黒色の背景色の適用として、「ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ： ｂｌａｃｋ；」を追加し、図１１（Ｂ）の装飾情報を生成する。
11 (A) and 11 (B) are diagrams showing examples of decorative information before and after adding the background color in step S1002 of FIG. FIG. 11A is a diagram showing the decoration information acquired in step S305, which is the same as the decoration information in FIG. 7A. In step S1001, the decoration
ステップＳ３０６では、アイコンフォント描画部２０６は、ステップＳ３０４で取得された外部フォントに対して、ステップＳ１００２で更新された装飾情報を適用し、アイコンフォントを描画する。これにより、アイコンフォント描画部２０６は、図９（Ｃ）のように、背景色が黒色であるアイコンフォントを描画することができる。
In step S306, the icon
また、情報処理装置１００は、図１０のフローチャートの処理後、図９（Ｃ）のように、ＷｅｂＶｉｅｗ以外のＧＵＩ部品が参照するアイコン画像を表示することができる。また、情報処理装置１００は、図９（Ｃ）のアイコン画像に対して、アンチエイリアス処理が施された場合にも、視認性の低下を防ぐことができる。
Further, after processing the flowchart of FIG. 10, the
（第３の実施形態）
第３の実施形態では、ステップＳ３０６で描画されたアイコンフォントをキャッシュし、次回以降では、キャッシュされたアイコンフォントを利用する例を示す。
(Third embodiment)
In the third embodiment, an example is shown in which the icon font drawn in step S306 is cached, and the cached icon font is used from the next time onward.
図１２は、第３の実施形態による情報処理装置１００の処理方法を示すフローチャートである。図１２は、図３に対して、ステップＳ１２０１～Ｓ１２０４を追加したものである。図１２のステップＳ３０１～Ｓ３０９の処理は、図３のステップＳ３０１～Ｓ３０９の処理と同じである。ステップＳ１２０１は、ステップＳ３０３とステップＳ３０４の間に設けられる。ステップＳ１２０２およびＳ１２０３は、ステップＳ３０６とステップＳ３０７の間に設けられる。以下、第３の実施形態が第１の実施形態と異なる点を説明する。
FIG. 12 is a flowchart showing a processing method of the
情報処理装置１００は、ステップＳ３０６の後、ステップＳ１２０２に進む。ステップＳ１２０２では、アイコン画像更新部２０７は、ステップＳ３０６で描画されたアイコンフォントをＲＡＭ１０３等にキャッシュする。アイコンフォントのキャッシュ先は、ＲＡＭ１０３上であってもよいし、ハードディスクやメモリカード等の物理領域であってもよい。
The
次に、ステップＳ１２０３では、図１３（Ａ）のコードポイント対応表２０８に対して、ステップＳ１２０２でキャッシュしたアイコンフォントのパスの情報を書き込み、図１３（Ｂ）のコードポイント対応表２０８の状態に更新する。 Next, in step S1203, the information of the path of the icon font cached in step S1202 is written to the code point correspondence table 208 of FIG. 13 (A), and the state of the code point correspondence table 208 of FIG. 13 (B) is set. Update.
図１３（Ａ）は、更新前のコードポイント対応表２０８を示す図であり、図１３（Ｂ）は、更新後のコードポイント対応表２０８を示す図である。図１３（Ａ）および（Ｂ）のコードポイント対応表２０８は、図６のコードポイント対応表２０８に対して、キャッシュしたアイコンフォントのパスの情報を格納可能になっている。 13 (A) is a diagram showing the code point correspondence table 208 before the update, and FIG. 13 (B) is a diagram showing the code point correspondence table 208 after the update. The code point correspondence table 208 of FIGS. 13A and 13B can store the cached icon font path information with respect to the code point correspondence table 208 of FIG.
図１３（Ａ）の更新前のコードポイント対応表２０８は、すべてのコードポイントに対して、それぞれのコードポイントの外部フォントを用いたアイコンフォントがキャッシュされていないことを示す。 The code point correspondence table 208 before the update of FIG. 13A shows that the icon font using the external font of each code point is not cached for all the code points.
例えば、ステップＳ３０６では、アイコンフォント描画部２０６は、コードポイント２７１４の外部フォントに装飾情報を適用し、アイコンフォントを描画する。次に、ステップＳ１２０２では、アイコン画像更新部２０７は、ステップＳ３０６で描画されたアイコンフォントを「／ｈｏｍｅ／ｃａｃｈｅ／ｃｈｅｃｋｅｄ．ｐｎｇ」のパスにキャッシュする。次に、ステップＳ１２０３では、アイコン画像更新部２０７は、図１３（Ａ）のコードポイント対応表２０８のコードポイント２７１４に対して、キャッシュしたアイコンフォントのパスとして、「／ｈｏｍｅ／ｃａｃｈｅ／ｃｈｅｃｋｅｄ．ｐｎｇ」を書き込む。その結果、図１３（Ｂ）のコードポイント対応表２０８のように更新される。その後、情報処理装置１００は、ステップＳ３０７以降の処理を行う。
For example, in step S306, the icon
ステップＳ３０３では、Ｗｅｂページ解析部２０２は、上記の外部フォントがコードポイント対応表２０８に記載されたコードポイントの外部フォントである場合には、ステップＳ１２０１に進む。
In step S303, the Web
ステップＳ１２０１では、Ｗｅｂページ解析部２０２は、上記の外部フォントを用いたアイコンフォントがＲＡＭ１０３等にキャッシュされているか否かを判定する。Ｗｅｂページ解析部２０２は、上記の外部フォントを用いたアイコンフォントがＲＡＭ１０３等にキャッシュされている場合には、ステップＳ１２０４に進む。また、Ｗｅｂページ解析部２０２は、上記の外部フォントを用いたアイコンフォントがＲＡＭ１０３等にキャッシュされていない場合には、ステップＳ３０４に進む。
In step S1201, the Web
ステップＳ１２０４では、アイコン画像更新部２０７は、上記のキャッシュされているアイコンフォントのパスを取得する。例えば、アイコン画像更新部２０７は、図１３（Ｂ）のコードポイント２７１４のアイコンフォント場合、上記のキャッシュされているアイコンフォントのパスである「／ｈｏｍｅ／ｃａｃｈｅ／ｃｈｅｃｋｅｄ．ｐｎｇ」を取得する。
In step S1204, the icon
次に、ステップＳ３０７では、アイコン画像更新部２０７は、ステップＳ３０３でコードポイント対応表２０８に記載されている外部フォントのコードポイントに対応する、ＷｅｂＶｉｅｗ以外のＧＵＩ部品が参照するアイコン画像のパスを取得する。
Next, in step S307, the icon
次に、ステップＳ３０８では、アイコン画像更新部２０７は、ステップＳ３０７で取得されたパスのアイコン画像に対して、ステップＳ１２０４で取得されたパスのアイコンフォントを上書きする。
Next, in step S308, the icon
第１～第３の実施形態によれば、アイコン画像更新部２０７は、ＷｅｂＶｉｅｗ内のアイコンフォントを取得し、そのアイコンフォントをＷｅｂＶｉｅｗ以外のＧＵＩ部品が参照するアイコン画像に上書きする。これにより、ＷｅｂＶｉｅｗのＧＵＩ部品が参照する外部フォントを用いたアイコンフォントと、ＷｅｂＶｉｅｗ以外のＧＵＩ部品が参照するアイコン画像とで、見た目を統一することができ、アプリケーションの表現力を向上させることができる。
According to the first to third embodiments, the icon
（その他の実施形態）
本発明は、上述の実施形態の１以上の機能を実現するプログラムを、ネットワーク又は記憶媒体を介してシステム又は装置に供給し、そのシステム又は装置のコンピュータにおける１つ以上のプロセッサがプログラムを読み出し実行する処理でも実現可能である。また、１以上の機能を実現する回路（例えば、ＡＳＩＣ）によっても実現可能である。
(Other embodiments)
The present invention supplies a program that realizes one or more functions of the above-described embodiment to a system or device via a network or storage medium, and one or more processors in the computer of the system or device reads and executes the program. It can also be realized by the processing to be performed. It can also be realized by a circuit (for example, ASIC) that realizes one or more functions.
なお、上記実施形態は、何れも本発明を実施するにあたっての具体例を示したものに過ぎず、これらによって本発明の技術的範囲が限定的に解釈されてはならないものである。すなわち、本発明はその技術思想、又はその主要な特徴から逸脱することなく、様々な形で実施することができる。 It should be noted that the above embodiments are merely specific examples for carrying out the present invention, and the technical scope of the present invention should not be construed in a limited manner by these. That is, the present invention can be implemented in various forms without departing from the technical idea or its main features.
１００ 情報処理装置、２０２ Ｗｅｂページ解析部、２０３ 外部フォント取得部、２０４ 装飾情報取得部、２０５ 装飾情報更新部、２０６ アイコンフォント描画部、２０７ アイコン画像更新部 100 Information processing device, 202 Web page analysis unit, 203 External font acquisition unit, 204 Decoration information acquisition unit, 205 Decoration information update unit, 206 Icon font drawing unit, 207 Icon image update unit
Claims (12)
前記第１のコンポーネントで表示されるＷｅｂページにおいて記述され、外部から取得される外部フォントにより規定される第１アイコンに適用される装飾情報を取得する装飾情報取得手段と、
前記第２のコンポーネントにおいて、前記装飾情報取得手段により取得された装飾情報を用いて、前記第１アイコンに対応する第２アイコンの描画を行う描画手段と、
を有することを特徴とする情報処理装置。 An information processing device that executes an application including a first component for displaying a Web page and a second component different from the first component.
A decoration information acquisition means for acquiring decoration information described in a Web page displayed by the first component and applied to a first icon defined by an external font acquired from the outside.
In the second component, a drawing means for drawing a second icon corresponding to the first icon using the decoration information acquired by the decoration information acquisition means, and a drawing means.
An information processing device characterized by having.
前記外部フォントは、ＣＳＳ Ｆｏｎｔｓ Ｍｏｄｕｌｅ Ｌｅｖｅｌ ３に規定されるＷｅｂフォントであることを特徴とする請求項１または２に記載の情報処理装置。 The first component is WebView, which is
The information processing apparatus according to claim 1 or 2, wherein the external font is a Web font defined in CSS Fonts Module Level 3.
前記描画手段は、前記第２アイコンを、前記装飾情報更新手段により更新された装飾情報を用いて描画することを特徴とする請求項１～４のいずれか１項に記載の情報処理装置。 By adding the decoration information applied to the icon image corresponding to the first icon to the decoration information acquired by the decoration information acquisition means, the decoration information acquired by the decoration information acquisition means is updated. Further has a means of updating decorative information,
The information processing apparatus according to any one of claims 1 to 4, wherein the drawing means draws the second icon using the decoration information updated by the decoration information updating means.
前記アイコン画像に対応するアイコンがキャッシュされていない場合には、前記描画手段が描画したアイコンをキャッシュし、
前記キャッシュしたアイコンのパスを前記対応表に書き込むことを特徴とする請求項１～８のいずれか１項に記載の情報処理装置。 Obtain the external font corresponding to the icon image described in the correspondence table from the above Web page, and
If the icon corresponding to the icon image is not cached, the icon drawn by the drawing means is cached.
The information processing apparatus according to any one of claims 1 to 8, wherein the cached icon path is written in the correspondence table.
前記第１のコンポーネントで表示されるＷｅｂページにおいて記述され、外部から取得される外部フォントにより規定される第１アイコンに適用される装飾情報を取得する装飾情報取得ステップと、
前記第２のコンポーネントにおいて、前記装飾情報取得ステップで取得された装飾情報を用いて、前記第１アイコンに対応する第２アイコンの描画を行う描画ステップと、
を有することを特徴とする情報処理装置の処理方法。 It is a processing method of an information processing apparatus that executes an application including a first component for displaying a Web page and a second component different from the first component.
The decoration information acquisition step of acquiring the decoration information described in the Web page displayed by the first component and applied to the first icon defined by the external font acquired from the outside, and the decoration information acquisition step.
In the second component, a drawing step of drawing a second icon corresponding to the first icon using the decoration information acquired in the decoration information acquisition step, and a drawing step.
A processing method of an information processing apparatus, characterized in that it has.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2020127330A JP2022024629A (en) | 2020-07-28 | 2020-07-28 | Information processor, processing method and program of information processor |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP2020127330A JP2022024629A (en) | 2020-07-28 | 2020-07-28 | Information processor, processing method and program of information processor |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| JP2022024629A true JP2022024629A (en) | 2022-02-09 |
Family
ID=80265464
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP2020127330A Pending JP2022024629A (en) | 2020-07-28 | 2020-07-28 | Information processor, processing method and program of information processor |
Country Status (1)
| Country | Link |
|---|---|
| JP (1) | JP2022024629A (en) |
-
2020
- 2020-07-28 JP JP2020127330A patent/JP2022024629A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111339455B (en) | Method and device for loading page first screen by browser application | |
| US7533351B2 (en) | Method, apparatus, and program for dynamic expansion and overlay of controls | |
| US7834877B2 (en) | System-wide content-sensitive text stylization and replacement | |
| US7194697B2 (en) | Magnification engine | |
| US20080028327A1 (en) | Information processing apparatus and user interface control method | |
| JP6157210B2 (en) | Document conversion apparatus, document conversion method, and program | |
| JP2010532513A (en) | Data system and method | |
| JP2006185160A (en) | System, web server, method, and program for adding personalized value to a plurality of web sites | |
| CN107301046B (en) | Icon processing method and device, computer equipment and storage medium | |
| US8629994B2 (en) | Image formation control device, control method and recording medium storing image formation control program | |
| US20140245126A1 (en) | Method and apparatus for visualizing the underlying structure of a document using an interactive viewport overlay | |
| CN111339458A (en) | Page presenting method and device | |
| US9996506B2 (en) | Identifying fonts using custom ligatures | |
| JP5235135B2 (en) | Machine translation system and machine translation method | |
| Krause | Introducing Bootstrap 4 | |
| US8751923B2 (en) | Image processing apparatus, image processing method, and storage medium | |
| US20140310589A1 (en) | Creating a communication editable in a browser independent of platform and operating system | |
| JP2022024629A (en) | Information processor, processing method and program of information processor | |
| CN108701120A (en) | The condition of lookup in font processing determines | |
| US8037015B2 (en) | Flexible interface using scalable vector graphics with metalevel palette | |
| JP5483526B2 (en) | Machine translation system and machine translation method | |
| US10650187B2 (en) | Visual path resolution in a context separated authoring environment of a REST- and component-based content management system | |
| WO2018020647A1 (en) | Drawing data generation program, drawing data generation device, and drawing data generation method | |
| US20240078371A1 (en) | Information processing apparatus, method for controlling the same, and storage medium | |
| US11947895B2 (en) | Information processing apparatus for representing a web page using external fonts, and information processing method, and storage medium thereof |