レスポンシブWebデザイン導入計画を適用（Parllet の場合 設定ページ－１） [公開アプリ]
タイトル・・・微妙ですね～。
でも今までの、レスポンシブWebデザイン導入計画ってのも、変な感じしてませんでした？
あ、初めて読まれる方、ごめんなさい。
Parllet（パレット）という、私が個人で作成・公開しているアルファ版のWeb家計簿について、
過去にポストしてきた記事のタイトルについてのお話から、今回は始まっています。
それで、私がタイトルに込めている意味合いについて、1/11 の
■ 最後に、Parlletのブログラミングの方向性について
で示した内容を引き合いに出してご説明したいと思うんですが、
そこで私はブログラミング（ブログを書きながらプログラミング）について、
今までの手法は、
- Parllet（パレット） を元に改修前のサンプルページを作成
- 1. を元に改修
- 2. を元に改修
- 改修が終わるまで繰り返し、最後に改修後のサンプルページを作成
- 改修した内容をParllet（パレット） にも反映させる。
といった感じで、今 4. まで終わった段階と言えます。
考えたのは、
- Parllet（パレット） を元に改修前のサンプルページを作成
- Parllet（パレット） を改修
- Parllet（パレット） を改修
- 改修が終わるまで繰り返す
- Parllet（パレット） を元に改修後のサンプルページを作成
という流れです。
と記載しました。
その "今までの手法は、" に当たるのが、過去に「～導入計画～」というタイトルでポストしたもので、
"考えたのは、" に当たるのが、今回の「～導入計画を適用～」ということです。
・・・。
初っ端から長くて分かりづらい話でしたね。
要するに、
12/31 ～ 1/11 に記載した内容を、いよいよParllet（パレット）に適用させていくので、
今回からその内容をブログラミング（ブログを書きながらプログラミング）し始めます！
ということです ^^;
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
という訳で、やっとここからが本編ですね。
と、軽く始めようとしていますが、静的html のParlletスナップ兼サンプルページ
と違って Play Flamework だしDB更新処理も絡んでくるかもしれないので、
イロイロと違ってくるとは思います。
その辺も体当たりの出たトコ勝負なのは、きっといつもと変わりません ^^;
■ 新手法の1.
今回は、今までの手法を実施した後の新手法になるので、導入計画の時に作ったサンプルページがそのまま使えます。
※ 12/31 に発覚した CSS の id 重複だけは公開している Parllet（パレット） もすぐに対応しましたが、本来の対応とは別の内容なので、開始地点としては問題なしとします。
元になった、ParlletのGithub公開リポジトリのCommitバージョンはこちら。
ここがスタート地点です。
■ 新手法の2. ～4.
メインの作業はこの工程ですね。
要するに、今までのエントリでいうところの体当たり開始です！
● 12/31 の内容を適用
最初に、CSSの記述場所について。
サンプル設定ページ１の方では html ファイルは１つだったので、
<style> ～ </style> の部分は単純にそのファイルに足せばOKでした。
Parllet（パレット）の方ではどうでしょう。
実は Play framework のテンプレートの継承 によって、
一つのページでも複数のhtmlファイルが重なるようにして構成されているんです。
Parllet（パレット）ではヘッダーのリンクボタンによってページが切り替わります。
12/9の注釈でも書いたように、今回は他のページへの影響が無いように進めています。
今回の設定ページでは、ヘッダー２行目の小分類で開くページは全て
Parllet\app\views\Config\cf_main.html
を継承しているので、cf_main.html 内にCSSを記述したいと思います。
#{extends 'main.html' /}
<style>
<!--
/* 共通のスタイル */
/* スマホのスタイル */
/* タブレットのスタイル */
@media all and (min-width: 480px) {
}
/* PCのスタイル */
@media all and (min-width: 768px) {
}
-->
</style>
#{set 'moreMenu'}
（後略）
はい、上記のスタイル内に追記していきます。
/* スマホのスタイル */ に追記
.memberMenu {
display: none;
}
/* PCのスタイル */ に追記
.memberMenu {
display: block;
}
12/31 と見た目は全く同じなので画像は省略ますが、
タブレットの幅以下に縮めてメニューは消えました。
● 1/1 の内容を適用
この辺から早速、静的html とは違ってきます。
※ 以降の記述内容には、Play framework の、Groovy を使ったテンプレートの構文
Expressions: ${…}
メッセージ: &{…}
スクリプト: %{…}%
等が絡んできます。
参考：テンプレートエンジン - Play Framework
（上記参考は 2014/1/16 現在は Play! の1.2.7 のドキュメントです。私が使っているのは 1.2.4 です。以前はバージョンごとにドキュメントが別れていましたが、流石に多くなってまとめたってことですかね。）
追記する場所は、サンプル設定ページ１ と同様で cf_main.html 内の
<div id="cfHeader"> の直下の <div> のさらに直下です。
大分類は "設定" で固定になるので、サンプル設定ページ１ の
<ul class="tbMemberMenu">
<li>
<a href="#" id="aLarge_cate">設定</a>
</li>
（中略）
</ul>
とほぼ同じ書き方でいいんですが、Parllet（パレット）では文字列に関しては
Parllet/conf/messges.ja から持ってくるようにしているんです。
（理由は、いつか他の言語にも対応できたらいいな～という希望的観測を持っちゃったというだけです ^^; ）
messges.ja 内での "設定" はこの定義。
views.config.config=設定
なので、追記はこうなります。
<ul class="tbMemberMenu">
<li>
<a href="#" id="aLarge_cate">&{'views.config.config'}</a>
</li>
（中略）
</ul>
そして小分類。こちらの方は今どれが選ばれているかで変わってきます。
PCサイズでのロジックは、
<ul class="memberMenu">
<li class="${(request.actionMethod == 'cf_bank_list' ||
request.actionMethod == 'cf_bank_edit' ||
request.actionMethod == 'cf_bank_save') ? 'selected' : ''}">
<a href="@{Config.cf_bank_list()}">&{'HandlingType.bank'}</a>
</li>
（中略）
</ul>
という感じで条件演算子（? :）を使って request.actionMethod を判定し、
現在選択されているものの class に'selected' と設定することで
選択されたボタンの背景色を変えていました。
パンくずリストでは選択されたものだけが表示されるので、
条件演算子（? :）だと長い上に訳が分からなくなることが予想されます。
なので、スクリプト: %{…}% を使って変数に文字列を入れておきます。
%{
vSmall_cate = ''
if (request.actionMethod=='cf_bank_list' || request.actionMethod=='cf_bank_edit' || request.actionMethod=='cf_bank_save')
vSmall_cate=messages.get('HandlingType.bank')
if (request.actionMethod=='cf_creca_list' || request.actionMethod=='cf_creca_edit' || request.actionMethod=='cf_creca_save')
vSmall_cate=messages.get('HandlingType.creca')
if (request.actionMethod=='cf_emoney_list' || request.actionMethod=='cf_emoney_edit' || request.actionMethod=='cf_emoney_save')
vSmall_cate=messages.get('HandlingType.emoney')
if (request.actionMethod=='cf_item_in_list' || request.actionMethod=='cf_item_in_edit' || request.actionMethod=='cf_item_in_save')
vSmall_cate=messages.get('views.config.cf_item')+'('+messages.get('BalanceType.in')+')'
if (request.actionMethod=='cf_item_out_list' || request.actionMethod=='cf_item_out_edit' || request.actionMethod=='cf_item_out_save')
vSmall_cate=messages.get('views.config.cf_item')+'('+messages.get('BalanceType.out')+')'
if (request.actionMethod=='cf_parllet_list' || request.actionMethod=='cf_parllet_edit' || request.actionMethod=='cf_parllet_save')
vSmall_cate=messages.get('PrltType.prlt')
if (request.actionMethod=='cf_hauser_edit' || request.actionMethod=='cf_hauser_save' || request.actionMethod=='cf_hauser_pw_edit' || request.actionMethod=='cf_hauser_pw_save' ||
request.actionMethod=='cf_hauser_lv_edit' || request.actionMethod=='cf_hauser_unsubscribe' || request.actionMethod=='receipt' || request.actionMethod=='confirm')
vSmall_cate=messages.get('views.config.cf_hauser')
}%
長いですが、やっていることは変数 vSmall_cate を宣言し、
if 文で request.actionMethod を判定して vSmall_cate に入れる文字列を変えているだけです。
そしてその変数 vSmall_cate が表示される場所を用意します。<ul class="tbMemberMenu">
<li>
<a href="#" id="aLarge_cate">&{'views.config.config'}</a>
</li>
%{
（中略）
}%
<li>
<a href="#" id="aSmall_cate">${vSmall_cate}</a>
</li>
</ul>
はい、ではスタイルの追記ですが、これは 1/1 と同様です。
Parllet\app\views\Config\cf_main.html 内の <style> ～ </style> の部分に追記。
/* スマホのスタイル */ に追記
.tbMemberMenu {
display: block;
}
/* PCのスタイル */ に追記
.tbMemberMenu {
display: none;
}
Parllet/public/stylesheets/main.css 内の #memberMenu の部分に以下のように追記（太字の部分）。
.memberMenu, .tbMemberMenu, #adminMenu {
list-style: none;
padding: 5px 0px 8px 5px;
margin: 0;
}
.memberMenu li, .tbMemberMenu li, #adminMenu li {
display: inline;
}
.memberMenu li a, .tbMemberMenu li a, #adminMenu li a {
color: #fff;
text-decoration: none;
padding: 2px 10px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
}
.memberMenu li.selected a, .tbMemberMenu li a, #adminMenu li.selected a {
background: #82A346;
}
サンプル設定ページ１ は小分類が口座で固定だったので、画像はクレジットカードのリストページで。
（実際には全ての小分類のページで確認しました。）
このぐらいの幅まではこの表示で、
このぐらいの幅でパンくずリストの表示が出来ました。
やっぱり、適用だけでも時間かかりますね。
今回はここまでです。
※ 毎度の念のための断りですが、今回編集した内容は現時点（2014/1/16）では公開しているParllet（パレット）の方には反映しておりません。
次回に続きます！
1/17 追記
続きを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0