レスポンシブWebデザイン導入計画（Parllet の場合 設定ページ－まとめ） [公開アプリ]
前回 予告した通り、12/31 ～ 1/10 の内容のまとめ的なエントリです。
完了まで長くかかってしまって、見通しも大分悪くなりましたしね ^^;
Parllet（個人で作成・公開しているアルファ版のWeb家計簿）
のレスポンシブ化は、トップページとログインページまでが完了していて、
12/31 から設定ページに入りました。
実装する内容は、12/26 にポストしたものです。
■ ざっくり環境
OS：Windows 7 Home Premium
ブラウザ：IE 11.0
Android：2.3.3（HTC Desire HD 001HT）
■ 12/26
ここで、 Parllet（パレット） の設定ページのレスポンシブ化の案を書きました。
これ以前に Parllet（パレット） について実装しながらブログに書いてきて、
そのことで自分の考えが整理されて記憶にも定着すると気づきました。
それならばと、試しに案だけポストしてみたのがこの記事です。
■ 12/31
ここで設定ページレスポンシブ化の実装を開始。
現時点の Parllet（パレット） の設定ページを元にスナップショットを兼ねてサンプル設定ページ１を作りました。
ここがスタート地点です。
この回には、タブレットサイズ（768px 以下）に幅を縮めた時に
ヘッダーの１行目・２行目共にメニューが消えるようにしました。
途中でCSS の idセレクタを２回使ってしまっていたことに気づき、時間を食いました・・・。
■ 1/1
12/31 に消えるようにしたヘッダーの１行目・２行目の内の
２行目の方に「大分類 ＞ 小分類」の形のパンくずリストを表示しました。
■ 1/2
12/9と同様の手法を使って、
幅の固定されている箇所をレスポンシブ化しました。
■ 1/4
ここからスライドメニューの組み込みに入りました。
一筋縄でいかない感じがしたので 12/26 の案の
スライドメニューの部分をちょっと噛み砕いて詳細にを記載。
大分類（設定）と小分類（口座）の２つのボタンから
スライドメニューを開くためにメニューとなる要素に動的に id を追加。
jQuery.live() の動きをさせる jQuery.on() の書き方で書いてみたが、メニューは開かない。
※ 実はこの時点で既に、２番目の引数がセレクタでなく、jQueryオブジェクトというミスも犯していました。
■ 1/5
スライドメニューが開かず奮闘中。
一応下記に気づくことができた。
javascript の 関数内の変数として作った jQueryオブジェクトは、後で動的に追加したオブジェクトとは別物になるので、追加後を想定したイベント内では再度jQueryオブジェクトを作成する必要がある
※ しかし jQuery.live() の動きをさせる jQuery.on() の書き方が、２番目の引数がセレクタでなくjQueryオブジェクトになっちゃってることにはここでも気づいていない・・・。
■ 1/6
スライドメニューを開かせる奮闘を継続。
一応この回でスライドメニューは開いて、２つのことを学んだ。
・・・・・つもりだった。
- jQuery.on() ひとつで bind() live() delegate() を表せるが、記法はそれぞれ異なる。
仕様かバグか分からないが、jQuery.live() を jQuery.on() の書き方で書いた時に、クリックした後にその場所に出現した要素もクリックしたことになってしまうようである。
※ 1/9 に気づいて自分で取消線を付けた。２番目の学びは的外れで、jQuery.live() の動きをさせる jQuery.on() の書き方が、２番目の引数がセレクタでなくjQueryオブジェクトになっちゃってることが真の原因。
■ 1/7
1/6 にスライドメニューが開いたため、残った課題に対応。
- 開いたスライドメニューよりヘッダーが手前に出たことへの対応
- 動的に追加した id:bt-menu を削除
- 大分類（設定）だけで実装してきたので小分類（口座）にも実装し、スライドメニューが切り替わるようにする
学びとしては以下。
要素自身の z-index が大きくても親要素の z-index が小さい場合は、その親要素より大きい要素の方が手前に出てきてしまうようである。
■ 1/8
1/7 にPCでの確認まで終わった（気になっていた）ため、
weinre を使って Android での動作確認。
動的に要素に id が追加・削除されているところまでの
確認こそ順調に進んだのだが、終わると思った矢先に問題発覚！
スライドメニュー内に触れただけでメニューが閉じてしまった。
（しかし、思えばここで問題が発覚して本当に良かった ^^; ）
weinre に関しては以下のことが分かった。
動的にセレクタに要素を追加したりした時にweinre の PC デバッグ画面 Elements の情報は、再読み込みしないと更新されない。
■ 1/9
1/8 の問題発覚によって、ついに気づきました！
jQuery.live() の動きをさせる jQuery.on() の書き方が、
２番目の引数がセレクタでなくjQueryオブジェクトになっちゃってたことに！
1/6 に仕様だバグだと的外れな勘違いをしていたことについても
そのことが真の原因だったことが分かり、書き方を正しく修正。
さらに３箇所の記述を置き換えないといけないことも、ここで分かりました。
■ 1/10
1/9 に気づいた、３箇所の記述を置き換える修正を実施。
長い道のりでしたが、12/26 の案を網羅した実装が終わりました。
ちなみに、この回にも２つのことを学びました。
- jQuery の find() は直下だけでなく全ての子要素を取得。
- 動的に id を追加した要素の、jQuery.live() を jQuery.on() の書き方で書いたクリックイベントより、最初から存在する class のクリックイベントが優先されるようである。
■ 完成版のサンプルページ
サンプル設定ページ１ を元にして改修したページです。（PCブラウザからの方は幅をいろいろ変えてみて下さい）
一応念のため。あくまでもローカル開発版を元にしたサンプルページなので、公開している Parllet（パレット） は相変わらずスマホ・タブレットからは使えません。
以上でレスポンシブWebデザイン導入計画（Parllet の場合 設定ページ篇）、完了でございます！
■ 最後に、Parlletのブログラミングの方向性について
上記で書いたように、サンプル設定ページ１ を元にして改修した時の様子が、12/31 ～ 1/10 の一連のエントリなんです。
つまり、現時点では Parllet（パレット） には全く手が入っていないということです。
自分の記事を見直しながら、これから手を入れていくことになるんですが、
サンプルページの改修でここまで長引くとはちょっと予想してませんでした ^^;
そんなんで、今後のブログラミング（ブログを書きながらプログラミング。今勝手に名づけましたw）
については、手法を変えようかな～と思い始めてます。
今までの手法は、
- Parllet（パレット） を元に改修前のサンプルページを作成
- 1. を元に改修
- 2. を元に改修
- 改修が終わるまで繰り返し、最後に改修後のサンプルページを作成
- 改修した内容をParllet（パレット） にも反映させる。
といった感じで、今 4. まで終わった段階と言えます。
考えたのは、
- Parllet（パレット） を元に改修前のサンプルページを作成
- Parllet（パレット） を改修
- Parllet（パレット） を改修
- 改修が終わるまで繰り返す
- Parllet（パレット） を元に改修後のサンプルページを作成
という流れです。
改修途中の段階でのサンプルページを見ることが出来ないというデメリットはありますが、
途中での状態を見たいというニーズはあまり無いのかなと感じています。
メリットとしては、5. の作業が格段に早くなると予想されることです。
何はともあれやってみないと分かりません。
体当たり芸人ですから、私^^;
という訳で、次の大きな改修からは上記方向に変わる可能性大です。
今後とも宜しくお願いいたします！
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0