- 追加された行はこの色です。
- 削除された行はこの色です。
「[[Open棟梁 wiki>https://opentouryo.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>リリース情報#i11149ce]]
*目次 [#y541fab0]
#contents
*概要 [#v470bf20]
本ページでは、Open 棟梁 v2.0 から 新しくなった画面デザインについてご紹介いたします。
なお、Open 棟梁のサンプルには、
-Web フォームサンプル (ProjectX_sample)、
-Web フォームサンプル (WebForms_sample)、
-MVC サンプル (MVC_sample)、
-シングルページアプリケーション サンプル (SPA_sample)
-旧シングルページアプリケーション サンプル (SPA_sample)
がありますが、いずれも同様の画面デザインとしています。
このため、以下は Web フォームサンプル (ProjectX_sample) の例をご紹介いたします。
このため、以下は Web フォームサンプル (WebForms_sample) の例をご紹介いたします。
*画面デザイン [#y7a5a8f9]
画面デザインは、
-[[Bootstrap 3 の CSS>http://getbootstrap.com/css/]] を使用し、~
[[レスポンシブデザインに対応>#pe542e5d]]いたしました。
-以下の図のように [[3 つのエリア>#ye9d5702]]に分かれます。
*レスポンシブデザイン [#pe542e5d]
**ブラウザの幅が広いとき [#d007bb14]
**レスポンシブデザイン [#pe542e5d]
***ブラウザの幅が広いとき [#d007bb14]
#ref(Overview.png,nolink,50%);
**ブラウザの幅が狭いとき [#v8d551db]
***ブラウザの幅が狭いとき [#v8d551db]
#ref(Overview_Narrow.png,nolink,50%);
*3 つのエリア [#ye9d5702]
**3 つのエリア [#ye9d5702]
-この各エリアは、マスターページ (*.master) に定義しています。
-以下、それぞれのエリアについて説明いたします。
** ヘッダーエリア [#kd762597]
-[[ヘッダーエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Aspx/Common/testBlankScreen.master#L28]]は、アプリケーションで共通的なヘッダーを表示するエリアです。
*** ヘッダーエリア [#kd762597]
-[[ヘッダーエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Aspx/Common/Master/testBlankScreen.master#L30]]は、アプリケーションで共通的なヘッダーを表示するエリアです。
-ヘッダーエリアは、常にブラウザの上部に固定されます。
#ref(header.png,nolink,50%);
***ヘッダーエリアのグリッドシステム [#e8c275c1]
-[[Bootstrap 3 のグリッドシステム>http://getbootstrap.com/css/#grid]]では、~
-ヘッダーエリアのグリッドシステム
--[[Bootstrap 3 のグリッドシステム>http://getbootstrap.com/css/#grid]]では、~
12 分割されたカラムに対してコンテンツを割り当てます。
-Open 棟梁 2.0 のヘッダーエリアは、上の図のように
--10 個分のカラムを持つ「タイトルエリア」と、
--2 個分のカラムを持つ「ボタンエリア」を
--Open 棟梁 2.0 のヘッダーエリアは、上の図のように
---10 個分のカラムを持つ「タイトルエリア」と、
---2 個分のカラムを持つ「ボタンエリア」を
>用意しました。
-なお、Bootstrap では
--そのカラムの割り当て方を ''col-*-*'' というクラスで定義します。
--1つめの ''*'' には画面サイズを示すキーワードが、
--2つめの ''*'' には、割り当てるカラム数を指定します。
--なお、Bootstrap では
---そのカラムの割り当て方を ''col-*-*'' というクラスで定義します。
---1つめの ''*'' には画面サイズを示すキーワードが、
---2つめの ''*'' には、割り当てるカラム数を
>※ 詳細は [[Bootstrap のサイト>http://getbootstrap.com/css/#grid]]をご覧いただければと思いますが、
>指定します。~
※ 詳細は [[Bootstrap のサイト>http://getbootstrap.com/css/#grid]]をご覧いただければと思いますが、
-たとえばタイトルエリアの
--たとえばタイトルエリアの
col-xs-10
--では、1つめのパラメーターが "xs" ですので、全サイズの画面に適用されます。
--また、2つめのパラメーターは "10" ですので、12 カラム分の 10 カラムを割り当てることを意味します。
---では、1つめのパラメーターが "xs" ですので、全サイズの画面に適用されます。
---また、2つめのパラメーターは "10" ですので、12 カラム分の 10 カラムを割り当てることを意味します。
**ボディーエリア [#k9280c87]
-[[ボディーエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Aspx/Common/testBlankScreen.master#L42]]は、ヘッダーエリアとフッターエリア以外のエリアです。
-ボディーエリアは、以下の図のように、さらに
--「[[メニューエリア>#g4af97d9]]」
--「[[コンテンツエリア>#te75c297]]」
***ボディーエリア [#k9280c87]
-[[ボディーエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Aspx/Common/Master/testBlankScreen.master#L43]]は、ヘッダーエリアとフッターエリア以外のエリアです。~
ボディーエリアは、以下の図のように、さらに
--「メニューエリア」
--「コンテンツエリア」
>に分かれます。
***メニューエリア [#g4af97d9]
-[[メニューエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Aspx/Common/testBlankScreen.master#L43]]は、アプリケーションの各メニューを表示するエリアです。
-[[メニューエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Aspx/Common/Master/testBlankScreen.master#L45]]は、アプリケーションの各メニューを表示するエリアです。
-上記のとおり、レスポンシブデザインを採用し、
--ブラウザ幅が広いときは画面左側に固定され、
--ブラウザ幅が狭いときはヘッダーエリアの下に固定されます。
--上記のとおり、レスポンシブデザインを採用し、
---ブラウザ幅が広いときは画面左側に固定され、
---ブラウザ幅が狭いときはヘッダーエリアの下に固定されます。
-メニューエリアの実装には、[[Bootsnipp のスニペット>https://bootsnipp.com/snippets/featured/responsive-navigation-menu]]を参考といたしました。~
--メニューエリアの実装には、[[Bootsnipp のスニペット>https://bootsnipp.com/snippets/featured/responsive-navigation-menu]]を参考といたしました。~
このため、具体的な実装方法などはこちらをご覧ください。
-なお、メニューエリアは、WWWブラウザの画面がスクロールされたときも~
コンテンツエリアが固定表示させるよう、[[JavaScript>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Scripts/touryo/else.js#L48]] で制御しています。
--なお、メニューエリアは、WWWブラウザの画面がスクロールされたときも~
コンテンツエリアが固定表示させるよう、[[JavaScript>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Scripts/touryo/else.js#L48]] で制御しています。
***コンテンツエリア [#te75c297]
-[[コンテンツエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Aspx/Common/testBlankScreen.master#L60]]は、各ページのコンテンツを表示するエリアです。
-コンテンツページ (*.aspx) に定義したものが表示されます。
-[[コンテンツエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Aspx/Common/Master/testBlankScreen.master#L62]]は、各ページのコンテンツを表示するエリアです。
***ボディーエリアのグリッドシステム [#w83b31fa]
-ボディーエリアにも、Bootstrap 3 のグリッドシステムを採用し、
--メニューエリアには 2 カラム分を、
--コンテンツエリアには残りの 10 カラム分を
--コンテンツページ (*.aspx) に定義したものが表示されます。
--ボディーエリアにも、Bootstrap 3 のグリッドシステムを採用し、
---メニューエリアには 2 カラム分を、
---コンテンツエリアには残りの 10 カラム分を
>割り当てています。
-ここで、それぞれのクラスを ''col-sm-2''、''col-sm-10'' としています。
--"sm" は、画面サイズが 768px 以上の場合に適用されます。
--画面サイズが 768px よりも狭い場合は、[[Bootstrap のメディアクエリ>http://getbootstrap.com/css/#grid-media-queries]]を使用し、スマホなど、~
サイズの小さな画面向けのデザイン (上記の「ブラウザの幅が狭いとき」) に切り替わります。
--ここで、それぞれのクラスを ''col-sm-2''、''col-sm-10'' としています。
---"sm" は、画面サイズが 768px 以上の場合に適用されます。
---画面サイズが 768px よりも狭い場合は、[[Style.css>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Content/touryo/Style.css#L281]]で、[[Bootstrap のメディアクエリ>http://getbootstrap.com/css/#grid-media-queries]]を使用し、~
スマホなど、サイズの小さな画面向けのデザイン (上記の「ブラウザの幅が狭いとき」) に切り替わります。
-ブラウザの幅が広いとき
--ブラウザの幅が広いとき
#ref(body.png,nolink,50%);
-ブラウザの幅が狭いとき
--ブラウザの幅が狭いとき
#ref(body_Narrow.png,nolink,50%);
**フッターエリア [#j7fdd113]
-[[フッターエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/master/root/programs/C%23/Samples/WebApp_sample/ProjectX_sample/Aspx/Common/testBlankScreen.master#L114]]は、
***フッターエリア [#j7fdd113]
-[[フッターエリア>https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/CS/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Aspx/Common/Master/testBlankScreen.master#L115]]は、
--アプリケーションの共通的なフッターを表示するエリアです。
--常にブラウザの下部に固定されます。
-フッターエリアの実装には、~
[[Bootstrap の Sticky Footer テンプレート>http://getbootstrap.com/examples/sticky-footer/]]を参考といたしました。~
このため、具体的な実装方法などはこちらをご覧ください。