hiraku.jsでダメになった

大人しく他のを使いたい

世のHPでは、大抵ドロワーメニューが使われています。

大体上の画像みたいなやつです。 多分、スマホ用のデザインには大抵出現してるんじゃないですかね。 所謂「ハンバーガー」なボタンをタップするとにゅっと出てくるの。 横とか縦とか、色んな方向から現れますね。

その「ドロワーメニュー」を実装する方法は結構あります。 自前で作ることも可能なのですが、ほとんどはプラグインに頼ることが多いでしょう。 簡単ですからね、プラグイン。

ドロワーメニューは自前で用意しようとすると、中々に面倒事が多い気がします。

・横から出てきたときに現在の位置を記憶する ・メニュー出現中は、メニュー背後が動かないようにする

というのが特に厄介。 この辺は「メニュー操作してるときに後ろを動かさないで!」というクライアントが多いせいです。 気持ちはわかるんですけど、面倒なんですよね、基本的に。

そういうのを大体なんとかしてくれるのがプラグインという存在です。 今日ぼくが扱ったのが、人からおすすめされた「hiraku.js」というもの。 こいつが厄介過ぎて、小一時間悩んで他のを使うことに決めました。

なんで?

理由は明快、スマホでの動作が微妙だったから。

気になる人は以下のURLをスマホで見てくださいな。 多分iPhoneじゃないと出ない現象だと思います。

hiraku.jsをテストするページ ※上記ページは2018年10月に見れなくなります。  サーバーが死ぬからです。

公式の基本通りに記述してあります。 特に何をいじってるわけでもないです。

何が悪いの? それは、途中での開閉で「チカッ」とするからです。 わかります? 一瞬画面全体が白くなるんですよね、タップしてメニュー開くと。

これがどうしても直らなくて、結局諦めました。 それ以外は非常に優秀なプラグインだと思ったんですけどね。 もしかして直し方知ってる方とかいますか? いたら教えてください!!!!!!!!!!!!!!!!

で、原因がなんなのかと言えば。 恐らくは画面固定のためにwidthとheightを指定しているせい。 iPhoneでタップすると、上下のsafari自身のメニューが出るかと思います。 そこをよーく見ると、白くなってるはず。

要するに、縦幅と横幅を決めてそれ以外をhiddenしてるわけですね。 そのhiddenする瞬間、iPhoneでは一瞬画面に現れてしまうらしい? それのせいで開くたびにチカッとなってしまうってことなんですかね。

これが案外死活問題で、直せないとユーザー的に非常に気になる。 「この程度?」かと思うかもしれませんが、なんとかしてほしいと言われることもあるんですよね。 なのでコイツを泣く泣く諦め、他のプラグインを使うしかなくなったってわけです。

個人的に、上からの距離を取るのにネガティブマージンが使われるのも気になる所。 いや別に悪いわけじゃないんでしょうが、なんとなく気になる。 そもそもネガティブマージンってあんまり使いたくない要素なような。

結論

結論を言えば、他のプラグインを使います!ってことです。 例えばDrawerとかならこの症状なしでちゃんと動いてくれるでしょうし。 チカッとする現象もないはずです。 なんとなくおすすめされて使いましたが、個人的にあんまり使いたくないかなーって。

そんなhiraku.jsくんに殺された2時間。 返して!!!!!!!!!!!!!!!!!!!!

それでは今日はここらでサヨウナラー

コメントを残す

同じカテゴリの他の記事

新着記事