JP6142620B2 - 表示変更プログラム、表示変更方法及び表示変更装置 - Google Patents

Description

本発明は、表示変更プログラム、表示変更方法及び表示変更装置に関する。

従来、マルチデバイス対応のＷｅｂサイトの開発を行なう際には、サーバサイドで、スマートフォン、タブレット、パーソナルコンピュータ（ＰＣ：personal computer）などの各端末向けに、それぞれ異なる固定レイアウトのＨＴＭＬ（HyperText Markup Language）などのコンテンツ（リソース）を用意し、ユーザエージェントを見て、各端末に適したコンテンツを提供する方法が採られていた。これをＳＳＤ（Server-Side Detection）という。

近年、端末の種類が急速に増加してきており、全ての端末のそれぞれに最適化することが開発、運用の両面で困難になってきている。
そこで、サーバサイドからは同一のコンテンツを提供し、それぞれの端末側で、表示画面幅に基づいてコンテンツのスタイル（レイアウトやデザイン）を動的に変更する方法が採られるようになってきている。これをレスポンシブＷｅｂデザイン（ＲＷＤ：Responsive Web Design）という。

特開２００４−１１０４２７号公報 特開２０１０−１５２７９７号公報 特開２０１０−１９１７３９号公報

ところで、上述のレスポンシブＷｅｂデザインでは、コンテンツ開発者が、スマートフォン向け、タブレット向け、ＰＣ向けなど数種類のスタイル（スタイルシート）を用意し、かつ、それぞれのスタイルを適用する条件として表示画面幅を設定する。そして、それぞれの端末側で、表示画面幅の条件を満たすスタイルを適用してコンテンツ画面を表示させる。

しかしながら、コンテンツ開発者がそれぞれのスタイルを適用する条件として設定した表示画面幅が実態にそぐわない場合がある。例えば、既存のスマートフォンよりも幅の広いスマートフォンが新しく登場した場合に、タブレットと認識されてしまい、タブレット向けのスタイルが適用されてしまうことがある。また、例えば、タブレットにおいて標準ブラウザ以外の独自のブラウザを使用する場合に、インラインフレームの使用などで他のＵＩ（user interface）コンポーネントに幅を取られ、表示画面幅が狭くなり、スマートフォンと認識されてしまい、スマートフォン向けのスタイルが適用されてしまうことがある。

特に、コンテンツ開発者は、既存の端末又はブラウザを想定して、それぞれのスタイルを適用する条件として表示画面幅を設定することは可能であるが、コンテンツ開発後に続々と登場する新しい端末又はブラウザに対応するのは困難であり、条件として設定された表示画面幅が実態にそぐわないことが起こりうる。
また、端末が表示画面幅の条件を満たすスタイルを適用するようになっているため、条件として設定された表示画面幅が実態にそぐわず、利用者がそのスタイルが適していないと感じる場合であっても、表示画面幅の条件を満たすスタイル以外のスタイル、即ち、表示画面幅の条件を満たさないスタイルに変更することはできない。

そこで、条件として設定された表示画面幅が実態にそぐわず、利用者がそのスタイルが適していないと感じる場合などに、表示画面幅の条件を満たさないスタイルに変更できるようにすることを目的とする。

本表示変更プログラムは、コンピュータに、コンピュータである端末又は端末に備えられるブラウザの表示画面幅を条件として規定された複数のコンテンツ画面のスタイルのうち、端末又はブラウザの表示画面幅の条件を満たす条件充足スタイルを適用して端末にコンテンツ画面が表示された状態で、端末に備えられる取得部が、端末がコンテンツ画面のスタイル変更指示を受けた場合に、複数のコンテンツ画面のスタイルのそれぞれに対する適用条件を書き換えるための書換情報を取得し、端末に備えられる書換部が、書換情報に基づいて、複数のコンテンツ画面のスタイルのうち、少なくとも一つの条件充足スタイルに対する適用条件を「偽」に書き換える、又は、端末又はブラウザの表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイルに対する適用条件を「真」に書き換える、処理を実行させることを要件とする。

本表示変更方法は、コンピュータが、コンピュータである端末又は端末に備えられるブラウザの表示画面幅を条件として規定された複数のコンテンツ画面のスタイルのうち、端末又はブラウザの表示画面幅の条件を満たす条件充足スタイルを適用して端末にコンテンツ画面が表示された状態で、端末に備えられる取得部が、端末がコンテンツ画面のスタイル変更指示を受けた場合に、複数のコンテンツ画面のスタイルのそれぞれに対する適用条件を書き換えるための書換情報を取得し、端末に備えられる書換部が、書換情報に基づいて、複数のコンテンツ画面のスタイルのうち、少なくとも一つの条件充足スタイルに対する適用条件を「偽」に書き換える、又は、端末又はブラウザの表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイルに対する適用条件を「真」に書き換える、処理を実行することを要件とする。

本表示変更装置は、端末又はブラウザの表示画面幅を条件として規定された複数のコンテンツ画面のスタイルのうち、端末又はブラウザの表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、コンテンツ画面のスタイル変更指示を受けた場合に、複数のコンテンツ画面のスタイルのそれぞれに対する適用条件を書き換えるための書換情報を取得する取得部と、書換情報に基づいて、複数のコンテンツ画面のスタイルのうち、少なくとも一つの条件充足スタイルに対する適用条件を「偽」に書き換える、又は、端末又はブラウザの表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイルに対する適用条件を「真」に書き換える書換部とを備えることを要件とする。

したがって、表示画面幅の条件を満たさないスタイルに変更できるという利点がある。

本実施形態にかかる表示変更装置を備える端末の構成を示す図である。 本実施形態にかかる表示変更装置を備える端末におけるスタイル変更の概要を示す模式図である。 （Ａ）〜（Ｃ）は、本実施形態にかかる表示変更装置を備える端末が取得するコンテンツに対して用意されているスタイルを示す図であって、（Ａ）はスマートフォン向けのスタイルを示しており、（Ｂ）はタブレット向けのスタイルを示しており、（Ｃ）はＰＣ向けのスタイルを示している。 本実施形態にかかる表示変更装置を備える端末が取得するコンテンツのＣＳＳファイルに含まれるメディアクエリを示す図である。 （Ａ）〜（Ｃ）は、本実施形態にかかる表示変更装置を備える端末におけるスタイル変更方法を説明するための模式図である。 （Ａ）、（Ｂ）は、本実施形態にかかる表示変更装置を備える端末におけるスタイル保存方法を説明するための模式図である。 本実施形態にかかる表示変更装置を備える端末のハードウェア構成を示す図である。 本実施形態にかかる表示変更装置を備える端末における画面表示処理を説明するためのフローチャートである。 本実施形態にかかる表示変更装置を備える端末におけるルール抽出処理を説明するためのフローチャートである。 （Ａ）、（Ｂ）は、本実施形態にかかる表示変更装置を備える端末によるルール抽出処理におけるルールに含まれる条件の取得方法を説明するための図である。 本実施形態にかかる表示変更装置を備える端末のルール抽出処理における「media」、「min-width」、「max-width」の抽出方法を説明するための図である。 本実施形態にかかる表示変更装置を備える端末のルール抽出処理において作成されるルールテーブルを示す図である。 本実施形態にかかる表示変更装置を備える端末における書換情報生成処理を説明するためのフローチャートである。 本実施形態にかかる表示変更装置を備える端末における書換情報生成処理によって作成される書換情報テーブルを示す図である。 本実施形態にかかる表示変更装置を備える端末が取得するコンテンツのＣＳＳファイルに含まれるメディアクエリの他の例を示す図である。 本実施形態にかかる表示変更装置を備える端末のルール抽出処理において作成されるルールテーブルの他の例を示す図である。 本実施形態にかかる表示変更装置を備える端末における書換情報生成処理によって作成される書換情報テーブルの他の例を示す図である。 本実施形態にかかる表示変更装置を備える端末におけるルール書換処理を説明するためのフローチャートである。 （Ａ）、（Ｂ）は、本実施形態にかかる表示変更装置を備える端末におけるルール書換処理によってどのようにルールが書き換えられるかを説明するための図であって、（Ａ）は書き換え前にどのようになっているかを示しており、（Ｂ）は、書き換え後にどのようになるかを示している。 本実施形態にかかる表示変更装置を備える端末によるルール書換処理におけるルールの書換方法を説明するための図である。 本実施形態にかかる表示変更装置を備える端末における画面変更表示処理を説明するためのフローチャートである。 本実施形態にかかる表示変更装置を備える端末におけるスタイル変更処理の一例を説明するためのフローチャートである。 本実施形態にかかる表示変更装置を備える端末におけるスタイル変更処理の他の例を説明するためのフローチャートである。 本実施形態にかかる表示変更装置を備える端末における保存処理を説明するためのフローチャートである。 本実施形態にかかる表示変更装置を備える端末による保存処理における保存方法を説明するための図である。 本実施形態にかかる表示変更装置を備える端末における保存処理によって作成される再アクセス時書換情報テーブルを示す図である。 本実施形態にかかる表示変更装置を備える端末における再アクセス時書換処理を説明するためのフローチャートである。 本実施形態にかかる表示変更装置の端末への実装方法を説明するための図である。 本実施形態にかかる表示変更装置の端末への実装方法を説明するための図である。 本実施形態にかかる表示変更装置の端末への他の実装方法を説明するための図である。

以下、図面により、本発明の実施の形態にかかる表示変更プログラム、表示変更方法及び表示変更装置について、図１〜図３０を参照しながら説明する。
本実施形態にかかる表示変更装置は、図２に示すように、例えばスマートフォン、タブレット、ＰＣなどの端末１に備えられ、例えばＨＴＭＬファイル及びメディアクエリ（Media Query）を含むＣＳＳ（Cascading Style Sheet）ファイルからなるレスポンシブＷｅｂデザイン対応のコンテンツを提供するＷｅｂサイト（Ｗｅｂサーバ）７０からコンテンツを取得する場合に、条件として設定された表示画面幅が実態にそぐわず、利用者がメディアクエリにしたがって適用されたスタイル（レイアウト）が適していないと感じたときに、端末１を操作して、動的にスタイルを切り替えられるようにするものである。つまり、コンテンツ開発時ではなく、利用者の閲覧時に、適したスタイルを選択できるようにするものである。なお、コンテンツを、Ｗｅｂコンテンツともいう。また、コンテンツには、例えばＷｅｂアプリケーションが提供するものも含まれる。

本実施形態では、レスポンシブＷｅｂデザイン対応のコンテンツは、例えば、ＨＴＭＬファイルとＣＳＳファイルとからなり、ＣＳＳファイルが、ＣＳＳ３で仕様として規定された、表示画面幅などの条件によって適用するスタイル（スタイルシート）を切り替えるために用いられるメディアクエリを含んでいる。このメディアクエリでは、表示画面幅を条件として複数のスタイルが規定されている。つまり、メディアクエリでは、スマートフォン向け、タブレット向け、ＰＣ向けなど数種類のスタイル（スタイルシート）が、それぞれのスタイルを適用する条件としての表示画面幅に対応づけて規定されている。このメディアクエリは、ルール（Rule）の集合（Ｒ０，．．．，Ｒｎ）として構成される。これはJavaScript（登録商標）オブジェクトとして取得可能である。また、メディアクエリの各ルールは、「真」（True）又は「偽」（False）のいずれかに評価される式であって、メディアタイプや表示画面幅などの条件（式）、スタイル（スタイルルール；ＣＳＳ；ＣＳＳルール）を含む。そして、このようなレスポンシブＷｅｂデザイン対応のコンテンツを取得した端末に備えられているブラウザは、メディアクエリの各ルールの真偽（True or False）を評価し、「真」（True）と評価したスタイルを適用し、「偽」（False）と評価したスタイルは適用しないで、コンテンツ画面を表示させる。つまり、レスポンシブＷｅｂデザイン対応のコンテンツを取得した端末に備えられているブラウザは、表示画面幅の条件を満たすスタイルを適用して、コンテンツ画面を表示させる。なお、ブラウザをＷｅｂブラウザともいう。また、コンテンツ画面をＷｅｂページともいう。

例えば図３に示すように、スマートフォン向けのスタイルＳ０、タブレット向けのスタイルＳ１、ＰＣ向けのスタイルＳ２の３つのスタイルを用意しているレスポンシブＷｅｂデザイン対応のコンテンツでは、ＣＳＳファイルが、例えば図４に示すようなメディアクエリを含む。
ここでは、メディアクエリは、＠ｍｅｄｉａ以降に記述されているルールの集合、即ち、スマートフォン向けのスタイルＳ０に対するルール、タブレット向けのスタイルＳ１に対するルール、ＰＣ向けのスタイルＳ２に対するルールの集合として構成されている。なお、ここでは、＠ｍｅｄｉａ規則でメディアクエリを記述する場合を例に挙げて説明しているが、＠ｉｍｐｏｒｔ規則やＨＴＭＬ文書でのｌｉｎｋ要素などで用いられるｍｅｄｉａ属性値などの他のメディア指定できる箇所でメディアクエリを記述しても良い。

このうち、スマートフォン向けのスタイルＳ０に対するルールは、メディアタイプとして「screen」、条件として「(min-width:0px)and(max-width:320px)」、スタイルとして「スマートフォン向けＣＳＳ」を含む。このルールは、ブラウザに対し、ブラウザの表示画面幅が０ピクセル以上３２０ピクセル以下の場合に、スマートフォン向けＣＳＳを適用するように指示する。また、タブレット向けのスタイルＳ１に対するルールは、メディアタイプとして「screen」、条件として「(min-width:321px)and(max-width:768px)」、スタイルとして「タブレット向けＣＳＳ」を含む。このルールは、ブラウザに対し、ブラウザの表示画面幅が３２１ピクセル以上７６８ピクセル以下の場合に、タブレット向けＣＳＳを適用するように指示する。また、ＰＣ向けのスタイルＳ２に対するルールは、メディアタイプとして「screen」、条件として「(min-width:769px)」、スタイルとして「ＰＣ向けＣＳＳ」を含む。このルールは、ブラウザに対し、ブラウザの表示画面幅が７６９ピクセル以上の場合に、ＰＣ向けＣＳＳを適用するように指示する。この例では、コンテンツ開発者は、０ピクセル以上３２０ピクセル以下の表示画面幅を持つものをスマートフォンと想定し、３２１ピクセル以上７６８ピクセル以下の表示画面幅を持つものをタブレットと想定し、７６９ピクセル以上の表示画面幅を持つものをＰＣと想定し、３２０ピクセル、７６８ピクセルを、それぞれ、ブレークポイント（閾値）として、スタイルを切り替えるようにしている。なお、ブラウザの表示画面を、ブラウザの表示領域又はブラウザのウィンドウともいう。また、スマートフォンやタブレットなどの端末では、ブラウザ（モバイルブラウザ）の表示画面のサイズが固定であり、任意にリサイズすることができないため、ブラウザの表示画面幅と端末の画面幅とは一致する。また、ここでは、ブラウザの表示画面幅に基づいてスタイルを切り替えるようにしているが、ブラウザの表示画面幅の代わりに端末の画面幅を用いても良い。

そして、例えば、このようなレスポンシブＷｅｂデザイン対応のコンテンツを取得した端末に備えられているブラウザの表示画面幅が３３０ピクセルであるとすると、これは３２１ピクセル以上７６８ピクセル以下の条件を満たす。このため、ブラウザは、タブレット向けＣＳＳを適用して、コンテンツ画面を表示させる。つまり、ブラウザは、タブレット向けのスタイルＳ１に対するルールを「真」（True）と評価し、スマートフォン向けのスタイルＳ０に対するルール及びＰＣ向けのスタイルＳ２に対するルールを「偽」（False）と評価し、「真」（True）と評価したタブレット向けのスタイルＳ１を適用して、コンテンツ画面を表示させる。

しかしながら、コンテンツ開発者がそれぞれのスタイルを適用する条件として設定した表示画面幅が実態にそぐわず、利用者が上述のようにして表示したコンテンツ画面のスタイルが適していないと感じる場合がある。
特に、コンテンツ開発者は、既存の端末又はブラウザを想定して、それぞれのスタイルを適用する条件として表示画面幅を設定することは可能であるが、コンテンツ開発後に続々と登場する新しい端末又はブラウザに対応するのは困難であり、条件として設定された表示画面幅が実態にそぐわず、利用者がそのスタイルが適していないと感じる場合がある。

また、端末が表示画面幅の条件を満たすスタイルを適用するようになっているため、条件として設定された表示画面幅が実態にそぐわず、利用者がそのスタイルが適していないと感じる場合であっても、表示画面幅の条件を満たすスタイル以外のスタイル、即ち、表示画面幅の条件を満たさないスタイルに変更することはできない。
例えば、スマートフォンやタブレットなどの端末では、ブラウザの表示画面幅（又は端末の画面幅）に基づいて、表示画面幅の条件を満たすスタイルが一義的に適用されてしまう。このため、利用者がそのスタイルが適していないと感じる場合であっても、表示画面幅の条件を満たすスタイル以外のスタイル、即ち、表示画面幅の条件を満たさないスタイルに変更することはできない。

このようなスマートフォンやタブレットなどの端末では、利用者は、ブラウザの表示画面のサイズ（ウィンドウサイズ）を任意に変えることができないのに対し、ＰＣなどの端末では、利用者は、ブラウザの表示画面のサイズ（ウィンドウサイズ）を任意に変えることができる。このため、利用者がブラウザの表示画面のサイズを変えた場合に、適用されるスタイルが切り替わるようにすることも可能である。つまり、利用者が、ブラウザの表示画面のサイズを端末の画面サイズに一致させている場合には、ＰＣ向けのスタイルが適用され、ブラウザの表示画面のサイズを端末の画面サイズよりも小さくした場合には、その程度に応じて、タブレット向けのスタイルやスマートフォン向けのスタイルが適用されるようにすることも可能である。しかしながら、このような場合も、ブラウザの表示画面幅の条件を満たすスタイルが適用されるにすぎず、利用者がそのスタイルが適していないと感じる場合に、表示画面幅の条件を満たすスタイル以外のスタイル、即ち、表示画面幅の条件を満たさないスタイルに変更することはできない。

そこで、本実施形態では、条件として設定された表示画面幅が実態にそぐわず、利用者がメディアクエリにしたがって適用されたスタイルが適していないと感じる場合に、端末１を操作して、他のスタイル、即ち、表示画面幅の条件を満たさないスタイルに変更できるようにしている。
ここでは、図５（Ａ）に示すように、端末画面１Ａ上に上述のようにしてコンテンツ画面が表示された状態で、例えばフリック（画面を指ではじく動作）などの利用者からの指示を受けた場合、図５（Ｂ）に示すように、例えば「Change」ボタンや「Save」ボタンを含むダイアログボックス１Ｂを表示させる。そして、利用者が現在のスタイルが適していないと感じ、ダイアログボックス１Ｂ内の「Change」ボタンを押した場合、即ち、スタイル変更指示を受けた場合、図５（Ｃ）に示すように、他のスタイル、即ち、表示画面幅の条件を満たさないスタイルに切り替えるようにしている。ここでは、上述のようにして、表示画面幅の条件を満たすスタイルとして、タブレット向けのスタイルＳ１が適用されたコンテンツ画面から、例えばＰＣ向けのスタイルＳ２が適用されたコンテンツ画面（スタイル変更画面）に切り替えるようにしている。

そして、再度、利用者が「Change」ボタンを押した場合、ＰＣ向けのスタイルＳ２が適用されたコンテンツ画面から、例えばスマートフォン向けのスタイルＳ０が適用されたコンテンツ画面（スタイル変更画面）に切り替えるようにしている。
このように、利用者が「Change」ボタンを押すたびに、ＰＣ向けのスタイルＳ２、スマートフォン向けのスタイルＳ０、タブレット向けのスタイルＳ１を順に適用し、スタイルを切り替えるようにしている。

なお、ここでは、ボタン押下をスタイル切替イベント（スタイル変更イベント）として用いているが、これに限られるものではなく、端末１のブラウザが認識できるイベントを用いれば良い。例えば、タップやフリックなどを用いても良いし、端末１の加速度変更時に呼ばれるdevicemotionイベントをトリガとして端末１を振る動作でスタイルを切り替えるようにしても良い。

また、本実施形態では、利用者が、図６（Ａ）に示すように、端末画面１Ａ上に例えばＰＣ向けのスタイルＳ２が適用されたコンテンツ画面が表示された状態で、図６（Ｂ）に示すように、ダイアログボックス１Ｂを表示させ、ダイアログボックス１Ｂ内の「Save」ボタンを押した場合、即ち、スタイル保存指示を受けた場合、その時に適用されているスタイルにするために必要な情報（後述の書換情報）とＷｅｂサイトのアドレスとを対応づけてローカルストレージ（ハードディスク；記憶部）に格納するようにしている。

そして、再度、利用者がその端末１でそのＷｅｂサイトにアクセスした場合、そのＷｅｂサイトのアドレスに基づいて、ローカルストレージから保存指示を受けたスタイルにするために必要な情報（後述の書換情報）を取得し、これに基づいてスタイルを適用してコンテンツ画面を表示させるようにしている。
これらを実現すべく、本実施形態では、例えばスマートフォン、タブレット、ＰＣなどの端末１を、後述の表示変更装置を備えるものとしている。なお、端末１を、利用端末、通信端末、情報端末などともいう。

ここでは、後述の表示変更装置を備える端末１は、以下のように構成される。
まず、端末１のハードウェア構成について、図７を参照しながら説明する。
端末１は、コンピュータであり、そのハードウェア構成は、例えば図７に示すように、ＣＰＵ（Central Processing Unit）１０２、メモリ１０１、通信制御部１０９、入力装置１０６、表示制御部１０３、表示装置１０４、記憶装置１０５、可搬型記録媒体１０８のドライブ装置１０７を備え、これらがバス１１０によって相互に接続された構成になっている。なお、本装置のハードウェア構成はこれに限られるものではない。例えば可搬型記録媒体１０８のドライブ装置１０７を備えないものであっても良い。

ここで、ＣＰＵ１０２は、コンピュータ全体を制御するものであり、プログラムをメモリ１０１に読み出して実行し、表示変更装置を備える端末１に必要な処理を行なうものである。
メモリ１０１は、例えばＲＡＭなどの主記憶装置であり、プログラムの実行、データの書き換え等を行なう際に、プログラム又はデータを一時的に格納するものである。

通信制御部１０９（通信インターフェース）は、例えばＬＡＮやインターネットなどのネットワークを介して、他の装置と通信するために用いられるものである。この通信制御部１０９は、コンピュータに元から組み込まれていても良いし、後からコンピュータに取り付けられたＮＩＣ（Network Interface Card）でも良い。
入力装置１０６は、例えば、タッチパネル、プッシュボタン、マウスなどのポインティングデバイス、キーボードなどである。

表示装置１０４は、例えば液晶ディスプレイなどの表示装置である。
表示制御部１０３は、例えばコンテンツ画面などを表示装置１０４に表示させるための制御を行なうものである。
記憶装置１０５は、例えばハードディスクドライブ（ＨＤＤ）やＳＳＤなどの補助記憶装置であり、各種のプログラム及び各種のデータが格納されている。特に、本実施形態では、記憶装置１０５には、ブラウザプログラムや表示変更プログラムが格納されている。なお、メモリ１０１として、例えばＲＯＭ（Read Only Memory）を備え、これに各種のプログラムや各種のデータを格納しておいても良い。

ドライブ装置１０７は、例えばフラッシュメモリ等の半導体メモリ、光ディスク、光磁気ディスク等の可搬型記録媒体１０８の記憶内容にアクセスするためのものである。
このようなハードウェア構成を備える端末１において、ＣＰＵ１０２が、例えば記憶装置１０５に格納されているブラウザプログラムをメモリ１０１に読み出して実行することで、ブラウザの各機能、即ち、図１に示す画面表示部２が実現される。また、端末１において、ＣＰＵ１０２が、例えば記憶装置１０５に格納されている表示変更プログラムをメモリ１０１に読み出して実行することで、表示変更装置の各機能、即ち、図１に示すスタイル変更部３が実現される。なお、ここでは、表示変更プログラムは、ブラウザが解釈できる言語（ここではJavaScript）で記述されている。そして、ブラウザはJavascriptエンジンを備える。

つまり、本実施形態では、端末１は、図１に示すように、画面表示部（ブラウザ）２と、スタイル変更部（表示変更装置）３とを備え、これらによって画面表示処理及び表示変更処理（表示変更方法）が行なわれるようになっている。ここで、画面表示処理は、ＣＰＵ１０２がメインメモリ１０１に読み込まれたブラウザプログラムに従って実行する処理であり、表示変更処理は、ＣＰＵ１０２がメインメモリ１０１に読み込まれた表示変更プログラムに従って実行する処理（表示変更方法）である。

ここで、画面表示部２は、解析部４と、描画部５とを備え、それぞれにおいて、以下のような処理が行なわれる。
解析部４は、Ｗｅｂサイトから取得したコンテンツを解析する。ここでは、解析部４は、Ｗｅｂサイトから取得したＨＴＭＬファイル及びＣＳＳファイルを解析し、ＤＯＭ（Document Object Model）ツリー及びスタイルルールとしてメモリ１０１上に保持する（図８のステップＳ１０参照）。ここで、メモリ１０１上のＤＯＭツリーを保持している部分をＤＯＭツリー保持部１０１Ａといい、メモリ１０１上のスタイルルールを保持している部分をスタイルルール保持部１０１Ｂという。なお、ＤＯＭツリーやスタイルルールの仕様は、Ｗ３ＣのDocument Object Model Level 2 Style Specification（ＤＯＭ２ＳＳ）に規定されている。

描画部５は、メモリ１０１上に保持されたＤＯＭツリー及びスタイルルールに基づいてコンテンツ画面を描画する（図８のステップＳ２０参照）。つまり、描画部５は、ＤＯＭツリーにスタイルルールを適用してコンテンツ画面を描画する。なお、描画部５は、スタイルルールが書き換えられると、再度、書き換えられたスタイルルールをＤＯＭツリーに適用してコンテンツ画面を描画する（図８のステップＳ３０、Ｓ４０参照）。

本実施形態では、ＣＳＳファイルは、例えば上述のようなメディアクエリ（図４参照）を含む。なお、ここでは、端末１に備えられているブラウザの表示画面幅は例えば３３０ピクセルとする。
このため、画面表示部２は、ＣＳＳファイルに含まれるメディアクエリを解析し、メモリ１０１上に保持されているスタイルルールをＤＯＭツリーに適用する際に、ブラウザの表示画面幅である３３０ピクセルは、３２１ピクセル以上７６８ピクセル以下という条件を満たすとして、タブレット向けＣＳＳを適用して、コンテンツ画面を表示させる。つまり、画面表示部２は、タブレット向けのスタイルＳ１に対するルールを「真」（True）と評価し、スマートフォン向けのスタイルＳ０に対するルール及びＰＣ向けのスタイルＳ２に対するルールを「偽」（False）と評価し、「真」（True）と評価したタブレット向けのスタイルＳ１を適用して、コンテンツ画面を表示させる。

このように、画面表示部２は、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイル（ここではタブレット向けのスタイルＳ１）を適用してコンテンツ画面を表示させる。
スタイル変更部３は、スタイル変更指示を受けた場合に、適用されるスタイルが変更されるようにする。つまり、スタイル変更部３は、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、条件充足スタイル以外のスタイルが適用されるように複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える。

このため、スタイル変更部３は、ルール抽出部６と、書換情報生成部７と、ルール書換部８とを備え、それぞれにおいて、以下のような処理が行なわれる。
ルール抽出部６は、メモリ１０１（ここではスタイルルール保持部１０１Ｂ）から、ＣＳＳファイルのメディアクエリを解析して得られた全てのスタイルに対するルールに含まれる条件を取得し、表示画面幅に関する条件を抽出し、ルールテーブル（図１２参照）に格納する。

ここでは、まず、ルール抽出部６は、メモリ１０１（ここではスタイルルール保持部１０１Ｂ）から、ＣＳＳファイルのメディアクエリを解析して得られた全てのスタイルに対するルールに含まれる条件を取得する（図９のステップＡ１０参照）。ここで、Ｗ３ＣのＤＯＭ２ＳＳにおいてＣＳＳのオブジェクトモデルやインタフェースが規定されており、メディアクエリを扱える端末１のブラウザにはこの仕様が実装されているため、メモリ１０１上に保持されている全てのスタイルに対するルールに含まれる条件は、この仕様に基づいたアクセスによって取得可能である。ここで、ＣＳＳファイルのメディアクエリが、図１０（Ａ）に示すようなスマートフォン向けのスタイルＳ０に対するルールを含む場合、このＣＳＳファイルのメディアクエリに含まれているスマートフォン向けのスタイルＳ０に対するルールを解析して得られたルールに含まれる条件（ここではＤＯＭ２ＳＳで規定されているtypeがMEDIA_RULEであるｃｓｓＲｕｌｅオブジェクト集合のMediaText）は、図１０（Ｂ）に示すようなコードによって取得可能である。ここでは、ＣＳＳファイルのメディアクエリに含まれているスマートフォン向けのスタイルＳ０に対するルールを解析して得られたルールに含まれる条件として、「only screen and (min-width:0px) and (max-width:320px)」が取得される。なお、図１０（Ｂ）では、参考のために、下側にログ出力も表示している。同様に、ＣＳＳファイルのメディアクエリに含まれているタブレット向けのスタイルＳ１に対するルールを解析して得られたルールに含まれる条件及びＰＣ向けのスタイルＳ２に対するルールを解析して得られたルールに含まれる条件も取得可能である。ここでは、ＣＳＳファイルのメディアクエリに含まれているタブレット向けのスタイルＳ１に対するルールを解析して得られたルールに含まれる条件として、「only screen and (min-width:321px) and (max-width:768px)」が取得され、ＰＣ向けのスタイルＳ２に対するルールを解析して得られたルールに含まれる条件として、「only screen and (min-width:769px)」が取得される。また、これらのルールに含まれる条件は、インデックス番号（ｃｓｓＲｕｌｅオブジェクト集合のインデックス番号；rule_num）に対応づけて取得される（図９のステップＡ１０参照）。ここでは、スマートフォン向けのスタイルＳ０に対するルールを解析して得られたルールに含まれる条件は、インデックス番号「０」に対応づけて取得される。また、タブレット向けのスタイルＳ１に対するルールを解析して得られたルールに含まれる条件は、インデックス番号「１」に対応づけて取得される。また、ＰＣ向けのスタイルＳ２に対するルールを解析して得られたルールに含まれる条件は、インデックス番号「２」に対応づけて取得される。このようにして、ＣＳＳファイルのメディアクエリを解析して得られた全てのスタイルに対するルールに含まれる条件を取得することができる。つまり、ＣＳＳファイルのメディアクエリにおいて表示画面幅を条件として規定された複数のスタイルに対するルールの全て、即ち、表示画面幅に基づいて切り替え可能なスタイルに対するルールの全てを取得することができる。

次いで、ルール抽出部６は、上述のようにして取得された全てのスタイルに対するルールに含まれる条件の中から、正規表現を用いて、「media」、「min-width」、「max-width」のそれぞれの値（属性値）を抽出する（図９のステップＡ２０参照）。例えば、上述のようにして取得されたスマートフォン向けのスタイルに対するルールに含まれる条件の中から、「media」、「min-width」、「max-width」のそれぞれの値を、図１１に示すようなコードによって抽出可能である。なお、図１１では、参考のために、下側にログ出力も表示している。

次に、ルール抽出部６は、上述のようにして全てのスタイルに対するルールに含まれる条件の中からそれぞれ抽出された「media」の値が「screen」であるか否かを順番に判定し（図９のステップＡ３０参照）、「media」の値が「screen」であると判定した場合は、ＹＥＳルートへ進み、「rule_num」、「min-width」、「max-width」のそれぞれの値をルールテーブルに格納する（図９のステップＡ４０参照）。一方、「media」の値が「screen」でないと判定した場合は、これらの値のルールテーブルへの格納は行なわない。このようにして、図１２に示すように、インデックス番号（rule_num）と表示画面幅に関する条件（最小幅「min-width」、最大幅「max-width」）とが対応づけられたルールテーブルが作成される。

書換情報生成部７は、図１に示すように、様々な表示画面幅に対して、それぞれの表示画面幅に関する条件を満たすか否かの評価（「真」又は「偽」）の組み合わせとして起こり得るものを全て抽出し、これを用いて、メモリ１０１上のスタイルルール保持部１０１Ｂに保持されているルールに含まれる表示画面幅に関する条件を書き換える書換コードを生成し、メモリ１０１上の書換情報テーブル１０１Ｃに格納する。なお、書換情報テーブル１０１Ｃを書換情報保持部ともいう。

まず、書換情報生成部７は、上述のようにして作成されたルールテーブル（図１２参照）を用いて、様々な表示画面幅に対して、それぞれの表示画面幅に関する条件を満たすか否かの評価（「真」又は「偽」）の組み合わせ（ルールセット；ルール集合）として起こり得るものを全て抽出する（図１３のステップＢ１０参照）。つまり、上述のようにして作成されたルールテーブル（図１２参照）に格納されたインデックス番号「０」〜「２」のそれぞれに対応づけられている表示画面幅に関する条件の集合のべき集合、即ち、様々な表示画面幅に対して、インデックス番号「０」〜「２」のそれぞれに対応づけられている表示画面幅に関する条件を満たすか否かの評価（「真」又は「偽」）の２^３通りの組み合わせの中で起こり得るものを全て抽出する。

例えば、まず、上述のようにして作成されたルールテーブル（図１２参照）から、インデックス番号「０」、「１」、「２」のそれぞれの最小幅「min-width」及び最大幅「max-width」として設定されている値を取得し、表示画面幅ｘ（変数）の値を変えながら、インデックス番号「０」、「１」、「２」のそれぞれの最小幅「min-width」として設定されている値と最大幅「max-width」として設定されている値とによって規定される論理式を満たす、即ち、最小幅として設定されている値以上であり、かつ、最大幅として設定されている値以下であるという条件を満たすか否かの評価を行なうことで、様々な表示画面幅に対して、それぞれの表示画面幅に関する条件を満たすか否かの評価（「真」又は「偽」）の組み合わせとして起こり得るものを全て抽出することができる。

本実施形態では、それぞれの表示画面幅に関する条件を同時に満たす表示画面幅は存在しない。このため、（１）インデックス番号「０」に対応づけられている表示画面幅に関する条件を満たし（即ち、評価「真」）、かつ、インデックス番号「１」、「２」のそれぞれに対応づけられている表示画面幅に関する条件を満たさない（即ち、評価「偽」）、（２）インデックス番号「１」に対応づけられている表示画面幅に関する条件を満たし（即ち、評価「真」）、かつ、インデックス番号「０」、「２」のそれぞれに対応づけられている表示画面幅に関する条件を満たさない（即ち、評価「偽」）、（３）インデックス番号「２」に対応づけられている表示画面幅に関する条件を満たし（即ち、評価「真」）、かつ、インデックス番号「０」、「１」のそれぞれに対応づけられている表示画面幅に関する条件を満たさない（即ち、評価「偽」）、という３つの組み合わせ（集合族）が抽出される。これらの３つの組み合わせは、それぞれ、評価「真」のインデックス番号（rule_num）を用いて、｛０｝、｛１｝、｛２｝と表記する。ここで、｛０｝、｛１｝、｛２｝は、評価「真」のインデックス番号の集合を意味し、ルールセットのインデックスという。そして、このようにして抽出された３つの組み合わせ｛０｝、｛１｝、｛２｝を、それぞれ、メモリ１０１上に保持されている書換情報テーブル１０１Ｃ（図１４参照）のインデックス番号（set_index）「０」、「１」、「２」で指定される行の「rule_index（ルールセットのインデックス）」の欄に格納する（図１３のステップＢ２０参照）。なお、ここでは、上述のようにして抽出したルールセットのインデックス（rule_index）｛０｝、｛１｝、｛２｝を書換情報テーブル１０１Ｃに格納するようにしているが、これらは後述の書換コードを生成するために用いるだけであるため、書換コードを生成した後は保持しておかなくても良い。

次に、書換情報生成部７は、上述のようにして抽出したルールセットのインデックス（rule_index）｛０｝、｛１｝、｛２｝を用いて、メモリ１０１上のスタイルルール保持部１０１Ｂにインデックス番号（rule_num）に対応づけられて保持されているルールに含まれる表示画面幅に関する条件を書き換える書換コードを生成する（図１３のステップＢ３０参照）。つまり、上述のようにして抽出したルールセットのインデックス（rule_index）｛０｝、｛１｝、｛２｝のそれぞれの中に記述されているインデックス番号（rule_num）「０」、「１」、「２」を用いて、これらに対応づけられている表示画面幅に関する条件を「真」に、記述されていないインデックス番号（rule_num）に対応づけられている表示画面幅に関する条件を「偽」に書き換える書換コードを生成する。ここでは、図１４に示すように、書換コードとして、上述のようにして抽出したルールセットのインデックス（rule_index）｛０｝に記述されているインデックス番号（rule_num）「０」を用いて、applyMQ({{0:true},{1:false},{2:false}})を生成し、ルールセットのインデックス（rule_index）｛１｝に記述されているインデックス番号（rule_num）「１」を用いて、applyMQ({{0:false},{1:true},{2:false}})を生成し、ルールセットのインデックス（rule_index）｛２｝に記述されているインデックス番号（rule_num）「２」を用いて、applyMQ({{0:false},{1:false},{2:true}})を生成する。そして、このようにして生成された書換コードを、それぞれ、書換情報テーブル（図１４参照）のインデックス番号（set_index）「０」、「１」、「２」で指定される行の「書換コード」の欄に格納する（図１３のステップＢ４０参照）。なお、書換コードを、適用コード又は実行コードともいう。

次に、書換情報生成部７は、現在の状態を示す情報、即ち、どのルールセットのインデックス（rule_index）が有効になっているかを示す情報である真偽情報（true or false）を、書換情報テーブル（図１４参照）のインデックス番号（set_index）「０」、「１」、「２」で指定される行の「状態」の欄に格納する（図１３のステップＢ５０参照）。ここで、書換情報生成部７が現在の状態を示す情報を書換情報テーブル（図１４参照）に格納するのは、最初にコンテンツ画面を表示させた段階である。そして、本実施形態では、最初にコンテンツ画面を表示させる場合、上述のように、画面表示部２は、タブレット向けのスタイルＳ１に対するルールを「真」（True）と評価し、スマートフォン向けのスタイルＳ０に対するルール及びＰＣ向けのスタイルＳ２に対するルールを「偽」（False）と評価し、「真」（True）と評価したタブレット向けのスタイルＳ１を適用して、コンテンツ画面を表示させる。このため、本実施形態では、図１４に示すように、書換情報テーブルのインデックス番号（set_index）「１」で指定される行の「状態」の欄に、現在の状態を示す情報として、「真」（true）を格納し、書換情報テーブルのインデックス番号（set_index）「０」、「２」で指定される行の「状態」の欄に、現在の状態を示す情報として、「偽」（false）を格納する。

なお、ここでは、ＣＳＳファイルが図４に示すようなメディアクエリを含む場合を例に挙げて説明しているため、それぞれの表示画面幅に関する条件を同時に満たす表示画面幅は存在せず、抽出されたルールセットのインデックス（rule_index）は、｛０｝、｛１｝、｛２｝のように、それぞれ１つずつのインデックス番号（rule_num）を含むものとなっており、生成された書換コードは、それぞれ１つずつtrueを含むものとなっているが、これに限られるものではない。

例えば、ＣＳＳファイルが図１５に示すようなメディアクエリを含む場合もある。このメディアクエリでは、いずれのスタイルに対するルールにおいてもmax-widthが設定されていない。つまり、このメディアクエリでは、スマートフォン向けのスタイルＳ０に対するルールは、メディアタイプとして「screen」、条件として「(min-width:0px)」、スタイルとして「スマートフォン向けＣＳＳ」を含む。このルールは、ブラウザに対し、ブラウザの表示画面幅が０ピクセル以上の場合に、スマートフォン向けＣＳＳを適用するように指示する。また、タブレット向けのスタイルＳ１に対するルールは、メディアタイプとして「screen」、条件として「(min-width:320px)」、スタイルとして「タブレット向けＣＳＳ」を含む。このルールは、ブラウザに対し、ブラウザの表示画面幅が３２０ピクセル以上の場合に、タブレット向けＣＳＳを適用するように指示する。また、ＰＣ向けのスタイルＳ２に対するルールは、メディアタイプとして「screen」、条件として「(min-width:768px)」、スタイルとして「ＰＣ向けＣＳＳ」を含む。このルールは、ブラウザに対し、ブラウザの表示画面幅が７６８ピクセル以上の場合に、ＰＣ向けＣＳＳを適用するように指示する。この場合、上述の実施形態と同様に、このようなメディアクエリを解析して得られた全てのスタイルに対するルールに含まれる条件を取得し、表示画面幅に関する条件を抽出し、ルールテーブルに格納すると、ルールテーブルは、図１６に示すようになる。そして、上述の実施形態と同様に、このルールテーブルを用いて、様々な表示画面幅に対して、それぞれの表示画面幅に関する条件を満たすか否かの評価の組み合わせとして起こり得るものを全て抽出すると、インデックス番号「２」に対応づけられている表示画面幅に関する条件を満たす場合は必ずインデックス番号「１」に対応づけられている表示画面幅に関する条件を満たし、インデックス番号「１」に対応づけられている表示画面幅に関する条件を満たす場合は必ずインデックス番号「０」に対応づけられている表示画面幅に関する条件を満たすため、抽出されたルールセットのインデックス（rule_index）は、｛０｝、｛０，１｝、｛０，１，２｝のようになる。これらのルールセットのインデックス（rule_index）｛０｝、｛０，１｝、｛０，１，２｝を用いて書換コードを生成すると、それぞれ、applyMQ({{0:true},{1:false},{2:false}})、applyMQ({{0:true},{1:true},{2:false}})、applyMQ({{0:true},{1:true},{2:true}})となる。そして、書換情報テーブルは例えば図１７に示すようになる。このように、抽出されたルールセットのインデックス（rule_index）がそれぞれ１つずつのインデックス番号（rule_num）を含むものとならず、生成された書換コードがそれぞれ１つずつtrueを含むものとならない場合もある。なお、２つ又は３つの表示画面幅に関する条件を満たす場合、メディアクエリに記述されているスタイルは上から順に適用され（ここではスマートフォン向けＣＳＳ、タブレット向けＣＳＳ、ＰＣ向けＣＳＳの順に適用され）、上書きされて、これらのスタイルを組み合わせたスタイルが適用されることになる。

ルール書換部８は、図１に示すように、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、書換情報を取得し、条件充足スタイル以外のスタイルが適用されるように書換情報に基づいて複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える。つまり、本実施形態では、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、書換情報を取得する取得部８Ａと、条件充足スタイル以外のスタイルが適用されるように書換情報に基づいて複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える書換部８Ｂとを備える。

本実施形態では、ルール書換部８は、スタイル変更指示を受けた場合に、書換情報として、上述の書換情報テーブル（図１４参照）からインデックス番号（set_index）を用いて書換コードを取得し、この書換コードをブラウザに備えられるJavascriptエンジンで実行して、メモリ１０１（スタイルルール保持部１０１Ｂ）上に保持されている、ＣＳＳファイルのメディアクエリを解析して得られた全てのスタイルに対するルールに含まれる条件を「真」又は「偽」に書き換える。なお、書換コードは、複数のスタイルのそれぞれに対する条件（適用条件）を書き換える書換情報である。また、ここでは、書換情報として書換コードを用いているが、書換情報はこれに限られるものではなく、複数のスタイルのそれぞれに対する条件を書き換えるのに必要な情報であれば良い。

つまり、ＣＳＳファイルのメディアクエリを解析して得られた全てのスタイルに対するルールに含まれる条件として、メモリ１０１（スタイルルール保持部１０１Ｂ）上に、図１９（Ａ）に示すような条件が保持されている。ここでは、ＣＳＳファイルのメディアクエリに含まれているスマートフォン向けのスタイルＳ０に対するルールを解析して得られたルールに含まれる条件として、メモリ１０１（スタイルルール保持部１０１Ｂ）上に、document.styleSheet[0].cssRule[0]の値として、「only screen and (min-width:0px) and (max-width:320px)」という条件が保持されている。また、ＣＳＳファイルのメディアクエリに含まれているタブレット向けのスタイルＳ１に対するルールを解析して得られたルールに含まれる条件として、メモリ１０１（スタイルルール保持部１０１Ｂ）上に、document.styleSheet[0].cssRule[1]の値として、「only screen and (min-width:321px) and (max-width:768px)」という条件が保持されている。また、ＰＣ向けのスタイルＳ２に対するルールを解析して得られたルールに含まれる条件として、メモリ１０１（スタイルルール保持部１０１Ｂ）上に、document.styleSheet[0].cssRule[2]の値として、「only screen and (min-width:769px)」という条件が保持されている。

また、本実施形態では、最初にコンテンツ画面を表示させる場合、上述のように、画面表示部２は、タブレット向けのスタイルＳ１に対するルールを「真」（True）と評価し、スマートフォン向けのスタイルＳ０に対するルール及びＰＣ向けのスタイルＳ２に対するルールを「偽」（False）と評価し、「真」（True）と評価したタブレット向けのスタイルＳ１を適用して、コンテンツ画面を表示させる。このため、本実施形態では、図１４に示すように、書換情報テーブルのインデックス番号（set_index）「１」で指定される行の「状態」の欄に、「真」（true）が格納されており、書換情報テーブルのインデックス番号（set_index）「０」、「２」で指定される行の「状態」の欄に、「偽」（false）が格納されている。

このような状態で、スタイル変更指示を受けた場合、ルール書換部８は、インデックス番号（set_index）「１」以外のインデックス番号（set_index）である「０」又は「２」を用いて書換情報テーブル（図１４参照）から書換コードを取得する（図１８のステップＣ１０）。ここでは、例えば、インデックス番号（set_index）「０」を用いて、書換情報テーブル（図１４参照）から、書換コードとしてapplyMQ({{0:true},{1:false},{2:false}})を取得する。そして、この書換コードをブラウザに備えられるJavascriptエンジンで実行して各スタイルに対するルールに含まれる条件を書き換える（図１８のステップＣ２０）。ここで、図２０は、applyMQメソッドの例を示している。これにより、メモリ１０１（スタイルルール保持部１０１Ｂ）上に、ＣＳＳファイルのメディアクエリに含まれているスマートフォン向けのスタイルＳ０に対するルールを解析して得られたルールに含まれる条件として、document.styleSheet[0].cssRule[0]の値として保持されている、「only screen and (min-width:0px) and (max-width:320px)」（図１９（Ａ）参照）が、図１９（Ｂ）に示すように、「true」に書き換えられる。また、ＣＳＳファイルのメディアクエリに含まれているタブレット向けのスタイルＳ１に対するルールを解析して得られたルールに含まれる条件として、document.styleSheet[0].cssRule[1]の値として保持されている、「only screen and (min-width:321px) and (max-width:768px)」（図１９（Ａ）参照）が、図１９（Ｂ）に示すように、「false」に書き換えられる。また、ＰＣ向けのスタイルＳ２に対するルールを解析して得られたルールに含まれる条件として、document.styleSheet[0].cssRule[2]の値として保持されている、「only screen and (min-width:769px)」（図１９（Ａ）参照）が、図１９（Ｂ）に示すように、「false」に書き換えられる。なお、ここでは、メモリ１０１上のスタイルルール保持部１０１Ｂ上に保持されているルールに含まれる条件を書き換えるようにしているが、これに限られるものではなく、メディアクエリに含まれている各スタイルに対するルールを解析して得られた各スタイルに対する条件（メディアクエリ情報）であってメモリ上に保持されているものを「真」又は「偽」に書き換えるようにすれば良い。

そして、ルール書換部８は、現在の状態を示す情報、即ち、どのルールセットのインデックス（rule_index）が有効になっているかを示す情報である真偽情報（true or false）を、書換情報テーブルのインデックス番号（set_index）「０」、「１」、「２」で指定される行の「状態」の欄に格納する（図１８のステップＣ３０）。つまり、ルール書換部８は、書換情報テーブルのインデックス番号（set_index）「０」、「１」、「２」で指定される行の「状態」の欄に格納されている真偽情報を書き換える。ここでは、書換情報テーブルのインデックス番号（set_index）「０」で指定される行の「状態」の欄に、現在の状態を示す情報として、「真」（true）を格納し、書換情報テーブルのインデックス番号（set_index）「１」、「２」で指定される行の「状態」の欄に、現在の状態を示す情報として、「偽」（false）を格納する。

このようにして、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、ルール書換部８が、上述のようにしてＣＳＳファイルのメディアクエリを解析して得られた各スタイルに対するルールに含まれる条件を書き換えると、上述の描画部５が、再度、書き換えられたスタイルルールをＤＯＭツリーに適用してコンテンツ画面を描画する。

つまり、本実施形態では、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、ルール書換部８が、複数のスタイルのそれぞれに対する条件を書き換える書換情報を取得し、この書換情報に基づいて、表示画面幅の条件を満たす条件充足スタイル（ここではタブレット向けのスタイルＳ１）に対する条件を「偽」に、表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイル（ここではスマートフォン向けのスタイルＳ０）に対する条件を「真」に書き換える。つまり、ルール書換部８は、複数のスタイルのそれぞれに対する条件を書き換える書換情報を取得する取得部８Ａと、この書換情報に基づいて、表示画面幅の条件を満たす条件充足スタイル（ここではタブレット向けのスタイルＳ１）に対する条件を「偽」に、表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイル（ここではスマートフォン向けのスタイルＳ０）に対する条件を「真」に書き換える書換部８Ｂとを備える。そして、描画部５が、複数のスタイル（ここでは３つのスタイルＳ０〜Ｓ２）のうち、少なくとも一つの条件非充足スタイルを適用して、コンテンツ画面のスタイルを変更したスタイル変更画面を表示させる。つまり、描画部５が、条件が「真」に書き換えられたスタイルを適用してコンテンツ画面を表示させる。このため、ルール書換部８及び描画部５をまとめて画面変更表示部という。

このように、本実施形態では、画面表示部２が、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面を表示させ（図２１のステップＤ１０参照）、画面変更表示部が、スタイル変更指示を受けた場合に、書換情報を取得し、書換情報に基づいて複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換え、条件が「真」に書き換えられたスタイルを適用してコンテンツ画面を表示させる（図２１のステップＤ２０、Ｄ３０参照）。

なお、ＣＳＳファイルが図１５に示すようなメディアクエリを含む場合には、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、ルール書換部８が、複数のスタイルのそれぞれに対する条件を書き換える書換情報を取得し、書換情報に基づいて、少なくとも一つの条件充足スタイルに対する条件を「偽」に書き換える、又は、表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイルに対する条件を「真」に書き換えるようにすれば良い。そして、描画部５が、複数のスタイル（ここでは３つのスタイル）のうち、少なくとも一つの条件非充足スタイルを適用して、又は、少なくとも一つの条件充足スタイルを適用せずに、コンテンツ画面のスタイルを変更したスタイル変更画面を表示させれば良い。

例えば、図１７に示す書換情報テーブルのインデックス番号（set_index）「１」から「０」に切り替えられる場合、インデックス番号（rule_num）「０」、「１」に対応づけられている条件、即ち、スマートフォン向けのスタイルＳ０及びタブレット向けのスタイルＳ１に対する条件が「真」になっており、インデックス番号（rule_num）「２」に対応づけられている条件、即ち、ＰＣ向けのスタイルＳ２に対する条件が「偽」になっている状態から、インデックス番号（rule_num）「１」に対応づけられている条件、即ち、タブレット向けのスタイルＳ１に対する条件が「偽」に書き換えられる。つまり、少なくとも一つの条件充足スタイルに対する条件が「偽」に書き換えられる。そして、描画部が、複数のスタイル（ここでは３つのスタイル）のうち、少なくとも一つの条件充足スタイルを適用せずに、コンテンツ画面のスタイルを変更したスタイル変更画面が表示される。

また、例えば、図１７に示す書換情報テーブルのインデックス番号（set_index）「１」から「２」に切り替えられる場合、インデックス番号（rule_num）「０」、「１」に対応づけられている条件、即ち、スマートフォン向けのスタイルＳ０及びタブレット向けのスタイルＳ１に対する条件が「真」になっており、インデックス番号（rule_num）「２」に対応づけられている条件、即ち、ＰＣ向けのスタイルＳ２に対する条件が「偽」になっている状態から、インデックス番号（rule_num）「２」に対応づけられている条件、即ち、ＰＣ向けのスタイルＳ２に対する条件が「真」に書き換えられる。つまり、少なくとも一つの条件非充足スタイルに対する条件が「真」に書き換えられる。そして、描画部５が、複数のスタイル（ここでは３つのスタイルＳ０〜Ｓ２）のうち、少なくとも一つの条件非充足スタイルを適用して、コンテンツ画面のスタイルを変更したスタイル変更画面が表示される。

このため、本実施形態では、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、複数のスタイルのそれぞれに対する条件を書き換える書換情報を取得する取得部８Ａと、書換情報に基づいて、少なくとも一つの条件充足スタイルに対する条件を「偽」に書き換える、又は、表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイルに対する条件を「真」に書き換える書換部８Ｂとを備えることになる。つまり、本実施形態では、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、書換情報を取得する取得部８Ａと、条件充足スタイル以外のスタイルが適用されるように、書換情報に基づいて、複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える書換部８Ｂとを備えることになる。

本実施形態では、利用者が、表示画面幅の条件を満たすスタイルが適していないと感じ、ダイアログボックス１Ｂ内の「Change」ボタンを押した場合（図５参照）、即ち、スタイル変更指示を受けた場合に、スタイル変更イベントハンドラ（スタイル切替イベントハンドラ）を介して、上述のルール書換部８による処理、描画部５による処理が実行され、表示画面幅の条件を満たすスタイル以外のスタイル、即ち、表示画面幅の条件を満たさないスタイルに変更される。

なお、スタイル変更部３は、表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、書換情報を取得し、条件充足スタイル以外のスタイルが適用されるように書換情報に基づいて複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える処理を行なえば良く、少なくとも、上述のルール書換部８による処理を行なえば良い。例えば、スタイル変更部３は、スタイル変更指示を受ける前に、例えば最初にコンテンツ画面を表示させる際に、予め、上述のルール抽出部６による処理、及び、上述の書換情報生成部７による処理を行なっておき、スタイル変更指示を受けた場合に、上述のルール書換部８による処理を行なうようにしても良い。つまり、スタイル変更部３によるスタイル変更処理としては、まず、上述のルール抽出部６による処理を行ない（図２２のステップＥ１０参照）、次に、上述の書換情報生成部７による処理を行ない（図２２のステップＥ２０参照）、次いで、スタイル変更指示を受けたかを判定し（図２２のステップＳ３０参照）、スタイル変更指示を受けた場合に、上述のルール書換部８による処理（図２２のステップＥ４０参照）を行なうようにしても良い。この場合、最初にコンテンツ画面を表示させる際に、ロード完了時に自動的に呼び出されるイベントハンドラを介して、上述のルール抽出部６による処理（図２２のステップＥ１０参照）、及び、上述の書換情報生成部７による処理（図２２のステップＥ２０参照）が実行されるようにすれば良い。また、スタイル変更部３は、スタイル変更指示を受けたかを判定し（図２３のステップＦ１０参照）、スタイル変更指示を受けた場合に、上述のルール抽出部６による処理（図２３のステップＦ２０参照）、上述の書換情報生成部７による処理（図２３のステップＦ３０参照）、及び、上述のルール書換部８による処理（図２３のステップＦ４０参照）の全てを行なうようにしても良い。

ところで、本実施形態では、スタイル変更部３は、さらに、保存処理部９と、再アクセス時書換部１０とを備える。
ここで、保存処理部９は、スタイル保存指示を受けた場合に、その時に適用されている書換情報とＷｅｂサイトのアドレスとを対応づけてハードディスク（記憶部）１０５に格納する処理を行なう。

本実施形態では、保存処理部９は、利用者が、あるスタイルが適用されたコンテンツ画面が表示された状態で、ダイアログボックス１Ｂ内の「Save」ボタンを押した場合、（図６参照）即ち、スタイル保存指示を受けた場合に、スタイル保存イベントハンドラを介して、その時に適用されている書換情報としての書換コードとＷｅｂサイトのアドレスとしてのＵＲＬとを対応づけて記憶部１０５としてのローカルストレージ（ハードディスク；ブラウザの記憶領域）に格納する処理を行なう。

例えば、表示画面幅が３３０ピクセルのブラウザを備える端末で、ＵＲＬ「http://example.com/index.html」のＷｅｂサイトにアクセスし、ＰＣ向けのスタイルＳ２が適用されたコンテンツ画面が表示された状態で、利用者が、ダイアログボックス１Ｂ内の「Save」ボタンを押した場合（図６参照）、即ち、スタイル保存指示を受けた場合、保存処理部９は、次のような処理を行なう。つまり、保存処理部９は、まず、スタイル保存指示を受けたかを判定し（図２４のステップＧ１０参照）、スタイル保存指示を受けた場合に、メモリ１０１上の書換情報テーブル１０１Ｃ（図１４参照）を参照し、現在の有効になっている、即ち、「状態」の欄が「true」になっているルールセットのインデックス（rule_index）（ここでは｛２｝）及び書換コード［ここではapplyMQ({{0:false},{1:false},{2:true}})］を取得する（図２４のステップＧ２０参照）。次に、保存処理部９は、ブラウザから、現在アクセスしているＷｅｂサイトのＵＲＬ（ここでは「http://example.com/index.html」）及びブラウザの表示画面幅（ここでは３３０ピクセル）を取得する（図２４のステップＧ３０参照）。そして、保存処理部９は、上述のようにして取得したルールセットのインデックス（rule_index）（ここでは｛２｝）、書換コード［ここではapplyMQ({{0:false},{1:false},{2:true}})］、ＷｅｂサイトのＵＲＬ（ここでは「http://example.com/index.html」）及びブラウザの表示画面幅（ここでは３３０ピクセル）を用いて、例えば図２５に示すようなコードによって保存処理（書込処理）を実行して、例えば図２６に示すように、ローカルストレージとしてのハードディスク１０５上の再アクセス時書換情報テーブル１０５ＡのＵＲＬの欄に「http://example.com/index.html」、ブラウザの表示画面幅（width）の欄に３３０、ルールセットのインデックス（rule_index）の欄に｛２｝、書換コードの欄にapplyMQ({{0:false},{1:false},{2:true}})を格納する（図２４のステップＧ４０参照）。このようにしてローカルストレージとしてのハードディスク１０５に格納された再アクセス時書換情報テーブル１０５Ａは、ブラウザを閉じた後も保持される。なお、再アクセス時書換情報テーブル１０５Ａを、再アクセス時書換情報保持部又は保存情報ともいう。

なお、スタイル変更指示を受けた際に書換コードを取得するのに用いたインデックス番号（set_index）を保持している場合には、そのインデックス番号（set_index）を用いて、ルールセットのインデックス（rule_index）及び書換コードを取得しても良い。また、ここでは、ローカルストレージとしてのハードディスク１０５に格納されている再アクセス時書換情報テーブル１０５Ａを、ブラウザの表示画面幅（width）の欄、及び、ルールセットのインデックス（rule_index）の欄を含むものとしているが、これらを含まないものとしても良い。

再アクセス時書換部１０は、図１に示すように、Ｗｅｂサイトのアドレスがハードディスク（記憶部）１０５に格納されていた場合に、ハードディスク１０５からＷｅｂサイトのアドレスに基づいて書換情報（ここでは書換コード）を取得し、この書換情報に基づいて複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える処理を行なう。

本実施形態では、再度、利用者が同じ端末（ブラウザ）で同じＷｅｂサイトにアクセスした場合、そのＷｅｂサイトのアドレスに基づいて、記憶部としてのローカルストレージ１０５に格納されている再アクセス時書換情報テーブル１０５Ａから書換情報としての書換コードを取得し、この書換コードに基づいて各スタイルに対する条件を「真」又は「偽」に書き換える処理を行なう。

例えば、再度、表示画面幅が３３０ピクセルのブラウザを備える端末１で、ＵＲＬ「http://example.com/index.html」のＷｅｂサイトにアクセスした場合、再アクセス時書換部１０は、次のような処理を行なう。
つまり、まず、再アクセス時書換部１０は、ブラウザから、現在アクセスしているＷｅｂサイトのＵＲＬ（ここでは「http://example.com/index.html」）及びブラウザの表示画面幅（ここでは３３０ピクセル）を取得する（図２７のステップＨ１０参照）。次に、再アクセス時書換部１０は、ローカルストレージ１０５上の再アクセス時書換情報テーブル１０５ＡからＵＲＬ及びブラウザの表示画面幅を取得する（図２７のステップＨ２０参照）。

次に、再アクセス時書換部１０は、これらが一致するかを判定する（図２７のステップＨ３０参照）。この判定の結果、一致するものがあった場合は、再アクセス時書換部１０は、そのＵＲＬ（ここでは「http://example.com/index.html」）及びブラウザの表示画面幅（ここでは３３０ピクセル）を用いて、ローカルストレージ１０５上の再アクセス時書換情報テーブル１０５Ａ（図２６参照）から書換コード［ここではapplyMQ({{0:false},{1:false},{2:true}})］を取得し（図２７のステップＨ４０参照）、その書換コード［ここではapplyMQ({{0:false},{1:false},{2:true}})］をブラウザに備えられるJavascriptエンジンで実行する。これにより、メモリ１０１（スタイルルール保持部１０１Ｂ）上に、ＣＳＳファイルのメディアクエリに含まれているスマートフォン向けのスタイルＳ０に対するルールを解析して得られたルールに含まれる条件として、document.styleSheet[0].cssRule[0]の値として保持されている、「only screen and (min-width:0px) and (max-width:320px)」が「false」に書き換えられ、ＣＳＳファイルのメディアクエリに含まれているタブレット向けのスタイルＳ１に対するルールを解析して得られたルールに含まれる条件として、document.styleSheet[0].cssRule[1]の値として保持されている、「only screen and (min-width:321px) and (max-width:768px)」が「false」に書き換えられ、ＰＣ向けのスタイルＳ２に対するルールを解析して得られたルールに含まれる条件として、document.styleSheet[0].cssRule[2]の値として保持されている、「only screen and (min-width:769px)」が「true」に書き換えられる（図２７のステップＨ５０参照）。なお、ここでは、ＵＲＬだけでなく、ブラウザの表示画面幅も取得し、これも一致するか否かの判定に用いているが、ＵＲＬだけを取得し、ＵＲＬだけを一致するか否かの判定に用いるようにしても良い。

そして、再アクセス時書換部１０は、現在の状態を示す情報、即ち、どのルールセットのインデックス（rule_index）が有効になっているかを示す情報である真偽情報（true or false）を、書換情報テーブル１０１Ｃ（図１４参照）のインデックス番号（set_index）「０」、「１」、「２」で指定される行の「状態」の欄に格納する（図２７のステップＨ６０参照）。つまり、再アクセス時書換部１０は、書換情報テーブル１０１Ｃのインデックス番号（set_index）「０」、「１」、「２」で指定される行の「状態」の欄に格納されている真偽情報を書き換える。ここでは、書換情報テーブル１０１Ｃのインデックス番号（set_index）「２」で指定される行の「状態」の欄に、現在の状態を示す情報として、「真」（true）を格納し、書換情報テーブル１０１Ｃのインデックス番号（set_index）「０」、「１」で指定される行の「状態」の欄に、現在の状態を示す情報として、「偽」（false）を格納する。

このようにして、利用者が同じ端末（ブラウザ）で同じＷｅｂサイトにアクセスした場合に、再アクセス時書換部１０が、ＣＳＳファイルのメディアクエリを解析して得られた各スタイルに対するルールに含まれる条件を書き換えると、描画部５が、書き換えられたスタイルルールをＤＯＭツリーに適用してコンテンツ画面を描画する。これにより、利用者が同じ端末（ブラウザ）で同じＷｅｂサイトにアクセスした場合に、以前にアクセスした際に利用者が適していると判断したスタイルが適用されたコンテンツ画面が直ちに表示されることになる。

したがって、本実施形態にかかる表示変更装置及び表示変更方法によれば、条件として設定された表示画面幅が実態にそぐわず、利用者がそのスタイルが適していないと感じる場合に、他のスタイル、即ち、表示画面幅の条件を満たさないスタイルに変更できるという利点がある。
なお、本発明は、上述した実施形態に記載した構成に限定されるものではなく、本発明の趣旨を逸脱しない範囲で種々変形することが可能である。

例えば、上述の実施形態では、ブラウザプログラムが実行されることによって実現される機能（ブラウザ；画面表示部）と、表示変更プログラムが実行されることによって実現される機能（表示変更装置；スタイル変更部）とを分けて説明しているが、これに限られるものではなく、例えば表示変更プログラムが実行されることによって実現される機能を備えるブラウザとして構成することもできる。この場合、端末は、ブラウザプログラムが実行されることによって実現される機能として画面表示部及びスタイル変更部を備え、これらによって画面表示処理及び表示変更処理（表示変更方法）が行なわれることになる。

また、例えば、上述の実施形態では、コンピュータである端末１が、上述の実施形態における各処理をコンピュータに実行させる表示変更プログラムを備えるものとして説明しているが、この表示変更プログラムの実装方法としては、以下のように、種々の方法がある。
例えば、図２８に示すように、ブラウザ５０からのリクエストやサーバ７０からのレスポンスを中継する中継サーバ６０（プロキシサーバなど）が、プログラム挿入機能（プログラム挿入部）６０Ａによって、表示変更プログラムをレスポンスコンテンツ中に挿入するようにすれば良い。具体的には、利用者が中継サーバ６０を介してレスポンシブＷｅｂデザイン対応のＷｅｂサイト７０にアクセスした場合に、中継サーバ６０が、レスポンスＨＴＭＬの構造を解析し、例えば図２９に示すように、このレスポンスＨＴＭＬ内に、表示変更プログラムが格納されているサーバのアドレス（アクセス先ＵＲＬ）を含むscriptタグを挿入するようにすれば良い。なお、scriptタグの挿入に代えて、表示変更プログラム（スクリプト）をＨＴＭＬ内に直接埋め込むようにしても良い。これを中継サーバ方式という。

また、例えば、図３０に示すように、ブラウザ５０が、プラグインなどのブラウザ拡張機能としてのプログラム挿入機能（プログラム挿入部）５０Ａによって、レスポンスコンテンツを受け取った後に、表示変更プログラムをレスポンスコンテンツ中に挿入するようにしても良い。これをブラウザプラグイン方式という。
これらの方式によって、コンテンツに依存しないで、表示変更プログラムを組み込むことができ、既存のＷｅｂサイトが提供するコンテンツに対しても適用可能である。

このほか、例えば、表示変更プログラム（又は表示変更プログラムを含むブラウザ）は、例えば伝送媒体としてのネットワーク（例えばインターネット，公衆回線や専用回線等の通信回線等）を介して提供される場合もある。
例えば、プログラム提供者が例えばサーバなどの他のコンピュータ上で提供している表示変更プログラムを、例えばインターネットやＬＡＮ等のネットワーク及び通信インタフェースを介して、記憶装置にインストール又はダウンロードしても良い。これにより、上述の実施形態で説明した表示変更装置及び表示変更方法が実現され、上述の実施形態の場合と同様に、記憶装置にインストール又はダウンロードされた表示変更プログラムを、ＣＰＵがメモリ上に読み出して実行することで、上述の実施形態の各処理が行なわれることになる。

また、例えば、表示変更プログラム（又は表示変更プログラムを含むブラウザ）は、コンピュータ読取可能な記録媒体に格納した状態で提供される場合もある。
ここで、記録媒体には、例えば半導体メモリなどのメモリ，磁気ディスク，光ディスク［例えばＣＤ（Compact Disc）−ＲＯＭ，ＤＶＤ（Digital Versatile Disk），ブルーレイディスク等］，光磁気ディスク（ＭＯ：Magneto optical Disc）等のプログラムを記録することができるものが含まれる。なお、磁気ディスク，光ディスク，光磁気ディスク等を可搬型記録媒体ともいう。

この場合、ドライブ装置を介して、可搬型記録媒体から表示変更プログラムを読み出し、読み出された表示変更プログラムを記憶装置にインストールすることになる。これにより、上述の実施形態で説明した表示変更装置及び表示変更方法が実現され、上述の実施形態の場合と同様に、記憶装置にインストールされた表示変更プログラムを、ＣＰＵがメモリ上に読み出して実行することで、上述の実施形態の各処理が行なわれることになる。なお、コンピュータは、可搬型記録媒体から直接プログラムを読み取り、そのプログラムに従った処理を実行することもできる。

以下、上述の実施形態及び変形例に関し、更に、付記を開示する。
（付記１）
コンピュータに、
表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、書換情報を取得し、前記条件充足スタイル以外のスタイルが適用されるように前記書換情報に基づいて前記複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える、
処理を実行させることを特徴とする表示変更プログラム。

（付記２）
スタイル保存指示を受けた場合に、その時に適用されている書換情報とＷｅｂサイトのアドレスとを対応づけて記憶部に格納する処理を前記コンピュータに実行させることを特徴とする、付記１に記載の表示変更プログラム。
（付記３）
Ｗｅｂサイトのアドレスが前記記憶部に格納されていた場合に、前記記憶部から前記Ｗｅｂサイトのアドレスに基づいて前記書換情報を取得し、前記書換情報に基づいて前記複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える処理を前記コンピュータに実行させることを特徴とする、付記２に記載の表示変更プログラム。

（付記４）
前記条件が「真」に書き換えられたスタイルを適用してコンテンツ画面を表示させる処理を前記コンピュータに実行させることを特徴とする、付記１〜３のいずれか１項に記載の表示変更プログラム。
（付記５）
コンピュータが、
表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、書換情報を取得し、前記条件充足スタイル以外のスタイルが適用されるように前記書換情報に基づいて前記複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える、
処理を実行することを特徴とする表示変更方法。

（付記６）
スタイル保存指示を受けた場合に、その時に適用されている書換情報とＷｅｂサイトのアドレスとを対応づけて記憶部に格納する処理を前記コンピュータが実行することを特徴とする、付記５に記載の表示変更方法。
（付記７）
Ｗｅｂサイトのアドレスが前記記憶部に格納されていた場合に、前記記憶部から前記Ｗｅｂサイトのアドレスに基づいて前記書換情報を取得し、前記書換情報に基づいて前記複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える処理を前記コンピュータが実行することを特徴とする、付記６に記載の表示変更方法。

（付記８）
前記条件が「真」に書き換えられたスタイルを適用してコンテンツ画面を表示させる処理を前記コンピュータが実行することを特徴とする、付記５〜７のいずれか１項に記載の表示変更方法。
（付記９）
表示画面幅を条件として規定された複数のスタイルのうち、表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、スタイル変更指示を受けた場合に、書換情報を取得する取得部と、
前記条件充足スタイル以外のスタイルが適用されるように前記書換情報に基づいて前記複数のスタイルのそれぞれに対する条件を「真」又は「偽」に書き換える書換部とを備えることを特徴とする表示変更装置。

（付記１０）
スタイル保存指示を受けた場合に、その時に適用されている書換情報とＷｅｂサイトのアドレスとを対応づけて記憶部に格納する保存処理部を備えることを特徴とする、付記９に記載の表示変更装置。
（付記１１）
Ｗｅｂサイトのアドレスが前記記憶部に格納されていた場合に、前記記憶部から前記Ｗｅｂサイトのアドレスに基づいて前記書換情報を取得し、前記書換情報に基づいて前記スタイルに対する条件を「真」又は「偽」に書き換える再アクセス時書換部を備えることを特徴とする、付記１０に記載の表示変更装置。

（付記１２）
前記条件が「真」に書き換えられたスタイルを適用してコンテンツ画面を表示させる描画部を備えることを特徴とする、付記９〜１１のいずれか１項に記載の表示変更装置。

１ 端末
１Ａ 端末画面
１Ｂ ダイアログボックス
２ 画面表示部（ブラウザ）
３ スタイル変更部（表示変更装置）
４ 解析部
５ 描画部
６ ルール抽出部
７ 書換情報生成部
８ ルール書換部
８Ａ 取得部
８Ｂ 書換部
９ 保存処理部
１０ 再アクセス時書換部
５０ ブラウザ
５０Ａ プログラム挿入機能（プログラム挿入部）
６０ 中継サーバ
６０Ａ プログラム挿入機能（プログラム挿入部）
７０ Ｗｅｂサイト（Ｗｅｂサーバ）
１０１ メモリ
１０１Ａ ＤＯＭツリー保持部
１０１Ｂ スタイルルール保持部
１０１Ｃ 書換情報テーブル
１０２ ＣＰＵ
１０３ 表示制御部
１０４ 表示装置
１０５ 記憶装置（ローカルディスク；ハードディスク；記憶部）
１０５Ａ 再アクセス時書換情報テーブル
１０６ 入力装置
１０７ ドライブ装置
１０８ 可搬型記録媒体
１０９ 通信制御部
１１０ バス

Claims (6)

1. コンピュータに、
   前記コンピュータである端末又は前記端末に備えられるブラウザの表示画面幅を条件として規定された複数のコンテンツ画面のスタイルのうち、前記端末又はブラウザの表示画面幅の条件を満たす条件充足スタイルを適用して前記端末にコンテンツ画面が表示された状態で、前記端末に備えられる取得部が、前記端末がコンテンツ画面のスタイル変更指示を受けた場合に、前記複数のコンテンツ画面のスタイルのそれぞれに対する適用条件を書き換えるための書換情報を取得し、前記端末に備えられる書換部が、前記書換情報に基づいて、前記複数のコンテンツ画面のスタイルのうち、少なくとも一つの条件充足スタイルに対する適用条件を「偽」に書き換える、又は、端末又はブラウザの表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイルに対する適用条件を「真」に書き換える、
   処理を実行させることを特徴とする表示変更プログラム。
2. 前記端末がスタイル保存指示を受けた場合に、前記端末に備えられる保存処理部が、その時に適用されている書換情報とＷｅｂサイトのアドレスとを対応づけて前記端末に備えられる記憶部に格納する処理を前記コンピュータに実行させることを特徴とする、請求項１に記載の表示変更プログラム。
3. Ｗｅｂサイトのアドレスが前記記憶部に格納されていた場合に、前記取得部が、前記記憶部から前記Ｗｅｂサイトのアドレスに基づいて前記書換情報を取得し、前記書換部が、前記書換情報に基づいて、前記複数のコンテンツ画面のスタイルのうち、少なくとも一つの条件充足スタイルに対する適用条件を「偽」に書き換える、又は、前記端末又はブラウザの表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイルに対する適用条件を「真」に書き換える処理を前記コンピュータに実行させることを特徴とする、請求項２に記載の表示変更プログラム。
4. 前記端末に備えられる描画部が、前記適用条件が「真」に書き換えられたスタイルを適用してコンテンツ画面を表示させる処理を前記コンピュータに実行させることを特徴とする、請求項１〜３のいずれか１項に記載の表示変更プログラム。
5. コンピュータが、
   前記コンピュータである端末又は前記端末に備えられるブラウザの表示画面幅を条件として規定された複数のコンテンツ画面のスタイルのうち、前記端末又はブラウザの表示画面幅の条件を満たす条件充足スタイルを適用して前記端末にコンテンツ画面が表示された状態で、前記端末に備えられる取得部が、前記端末がコンテンツ画面のスタイル変更指示を受けた場合に、前記複数のコンテンツ画面のスタイルのそれぞれに対する適用条件を書き換えるための書換情報を取得し、前記端末に備えられる書換部が、前記書換情報に基づいて、前記複数のコンテンツ画面のスタイルのうち、少なくとも一つの条件充足スタイルに対する適用条件を「偽」に書き換える、又は、端末又はブラウザの表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイルに対する適用条件を「真」に書き換える、
   処理を実行することを特徴とする表示変更方法。
6. 端末又はブラウザの表示画面幅を条件として規定された複数のコンテンツ画面のスタイルのうち、端末又はブラウザの表示画面幅の条件を満たす条件充足スタイルを適用してコンテンツ画面が表示された状態で、コンテンツ画面のスタイル変更指示を受けた場合に、前記複数のコンテンツ画面のスタイルのそれぞれに対する適用条件を書き換えるための書換情報を取得する取得部と、
   前記書換情報に基づいて、前記複数のコンテンツ画面のスタイルのうち、少なくとも一つの条件充足スタイルに対する適用条件を「偽」に書き換える、又は、端末又はブラウザの表示画面幅の条件を満たさない少なくとも一つの条件非充足スタイルに対する適用条件を「真」に書き換える書換部とを備えることを特徴とする表示変更装置。

Images