レスポンシブWebデザイン導入（Parllet の場合 明細表（残高明細）－６）

※ 注意！　このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; ）

sakashushu です。

3/11 からParllet（個人で作成・公開しているアルファ版のWeb家計簿） のレスポンシブWebデザイン導入シリーズは明細表篇の中の残高明細篇のブログラミング（ブログを書きながらプログラミング）に入っています。

 

スポンサードリンク

 

 

■ ざっくり環境

OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
スマホ：Android 4.1.1（freebit mobile PandA）
Github公開リポジトリ のCommitバージョン（スタート時点）：こちら

 

■ 現状

2/7 に現時点のParllet（パレット）（GithubのこのCommitバージョン ）の残高明細（口座系）を元に、スナップショットを兼ねてサンプル残高明細（口座系）１ を作りました。

 

サンプル残高明細（口座系）１

 

ここがスタート地点です。

※ ただ、収支明細篇(2/8 ～ 2/25)でいじった部分の影響も受けているため、現時点で若干レスポンシブ化されている部分もあります。

 

いつものように体当たりで学びながら進めていきます。
（1/11 に提示した新手法の方で実施するので、以前のようにサンプルページを元にして編集はしません。あくまで元になるのはGithubのこのCommitバージョン です。）

 

 

■ 体当たり開始

沿っていくのは 2/6の案 ですが 2/15 に決めた通り、表の部分だけは横スクロールする方向性 です。

 

前回 までに愛機の Android 4.1.1（freebit mobile PandA）でのスクロールの動きは確認できたんですが、触っている中で問題を見つけました。

大分類（明細表）・小分類（残高明細（口座系））はタップ（PCではクリック）することでスライドメニューが開きますが、スライドメニューが開いた後の外側に当たる位置をタップした場合に、スライドメニューは開いた後すぐに閉じてしまうのです。

 

赤破線の辺りをタップしても、

 

スライドメニューは一瞬開いた直後に閉じてしまいます。

 

これは PC では見られなかった現象です。

ということは・・・。

スライドメニューを開くトリガーのイベントが異なること、つまり先程

タップ（PCではクリック）することで

と書いた部分が一番怪しい。

 

Parllet/public/javascripts/AnimatedBorderMenus/jquery.borderMenuPrlt.js 内で、トリガーのイベントは

var eventtype = mobilecheck() ? 'touchstart click' : 'click',

として宣言しています。

元々のソースは Animated Border Menus から拝借しており、モバイルではタッチスタートイベント、モバイル以外ではクリックイベントによってスライドメニューが開きます。

※ 'touchstart click' という風に click も付けている理由については あなたの androidブラウザでは touchstart イベントをスルーして click イベントが起こりませんか？ をご参照ください。

 

タッチスタートイベントの方が早く発動するので、動きを軽快にするためにもそうしているのだと理解しています。

 

そしてさらに推測ですが、タッチスタートイベントの後にクリックイベントは発動しているはずで、その時点で既にスライドメニューの外の領域に該当してしまい、開くトリガーであるにも関わらず閉じる役目も果たしてしまったのではないかと。

推測を裏付けるためにも、モバイルの場合でもトリガーのイベントをクリックイベントにしてみます。

 

Parllet/public/javascripts/AnimatedBorderMenus/jquery.borderMenuPrlt.js 内の編集（太字の部分）  

;(function() {
    function init() {
//        var eventtype = mobilecheck() ? 'touchstart click' : 'click',
        var eventtype = 'click',
        （中略）
    }
    
    init();
    
})();

 

やはり、赤破線の部分をタップして開いたスライドメニューが勝手に閉じてしまうことはなくなりました。

 

これによって、タップしてからスライドメニューが開くまでの時間は若干ながら長くなり、モッサリした感じが増したことは否めません。

しかし、現時点では両立させるための解決策が無いので、この状態を採用とします。

※ もし良い方法をご存知の方がいらっしゃいましたら是非是非お教えください！m(_ _)m

 

というところで、今回はここまでです。

 

次回に続きます！

 

3/17 追記

続きを書きました。

 

---

 

いつも最後まで読んでいただいてありがとうございますm(_ _)m

何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)

またお越しくださいませませ！

 

タグ：CSS jQuery 公開アプリ Parllet レスポンシブWebデザイン 体当たり ブログラミング