2017.3.13
日記にコメント送信欄をつけてみたい#7(とりま完成？笑)
書きながらやるんだけど、これで最後になるといいな(笑)
さて、デザインをなんとかするとか言いましたけど、実はその前になんとかすべき課題があったりします。
それは
「1日前を読み込む」で読み込まれた記事のボタンが反応しないという罠でございます。
で、これを解決する方法は
意外と簡単でした。
$("body").on("click", ".diary_comment_button", comment_button_clicked);
function comment_button_clicked() {
//略//
}
.on()って、要素とイベントを結びつけるものだと思ってたんですけど、これでも後から追加されるDOM要素に関しては無力なんだそーで。
そこで
親イベントにonイベントを登録し、コールバックさせるという手段が使えるみたいです。
あんまりbody要素に紐付けるのはよくなかったんですが、これもトップページと日記ログのページで構造が異なっているせいです。同じ名前の親要素が存在するんですが、何故かトップページだとIDで、日記ログだとクラスになっています。意味が分かりませんが今更修正できないのでこうします。
設計の大切さがよくわかりますね
ってことで、プログラム側はなんとかなったので、デザインをもーちょいコンパクトにしましょう。
ここで色々悩んだのですが
全ての画面サイズで共通部品化するのは無理だという結論に達し、スマホで見た場合とPCで見た場合で処理を分けることにしました。
が、ここでも僕のガバガバ設計が邪魔をします。
具体的には、TOPページがスマホ版になるための条件が「ウィンドウ幅が780px以下」なのに対し、日記ログだとこれが900pxになっています。
まぁ･･････理由はどう考えても目次ですね。目次をメニューのどっかをクリックすることで開く案もあったのですが、スクロールのみで解決させた方が操作性は良さそうだということで今の形にしたのですが、その分横幅が必要になるため、900px以下になったら横スクロールを発生させることにした･･････っていう経緯があります。
で、どちらに合わせるかって話ですが、色々考えた結果
900px以下でモバイルモード移行ということにします。
というのも、そもそも780px～900px間のデバイスなんてそうそうないと思われますし、あとbootstrap上の都合で割と実装がめんどくさいことになるので、大きい方に合わせることにしました。
bootstrapにもグリッドシステムという便利な機能があるのですが、これを利用するとフォームの横幅がおかしくなるので使えなさそうです。
単純に、form部品2つ読み込ませて、ウィンドウ幅でdisplay値を切り替えるのが一番ラクそうですね。スパゲッティーコードが加速していきますが、もはやこの日記システム自体がつぎはぎだらけなので仕方ありません。
未来のSEがこんなんでいいんですかねえ･･････。
ということでやってみました。
あと、仕様上かなりめんどくさいことになったので
スマホ版では×ボタンを廃止し、閉じるボタンを新たに追加しました。
これでなんとかなってくれると思います。
ちなみにCSS書き換えたので、コメントフォームが2つ表示される人はキャッシュが原因なので消してください(笑)こっちからは打つ手ないので･･････(笑)
デモ画像とか載せようかと思ったんですが、別にそこまでする必要ねえかなって感じだったのでもうこれで終わりにします。笑
と、ここまで書いて
実はスマホだとコメント入力中にフォームが隠れるという致命的なバグが発生するのが発覚しました(笑)
原因は
fixedで絶対座標に固定しているためブラウザ側がスクロールしてくれないというとこですね。おそらく。
日記ログの方ではこの問題が発生しないことにより、flexにすれば問題は解決しそうですね。
ただ、PC版のトップページでflexは構造上どうしても使えないのですがスマホだともともとflexで作ってたので、そこに割り込む形にdiv要素を移動させることでなんとか解決しました。
<script>
var anime_time = 100;
var comment_visible = false;
$("body").on("click",".diary_comment_button",comment_button_clicked);
function comment_button_clicked(){
console.log(comment_visible);
if(comment_visible){return true;}
if($('#diary_comment_toppage').length){
if($(window).width()>780){
//PC版トップページ
$('#diary_comment_toppage').css("top", $(window).height());
$('#diary_comment_toppage').css("left", $("#contents_container").offset().left);
$('#diary_comment_toppage').css("display", "block");
$('#diary_comment_toppage').css("position", "fixed");
$('#diary_comment_toppage').css("height", "200px");
$('#diary_comment_toppage').animate({
top: $(window).height() - 200
}, anime_time );
$("#comment_close").css("top",$(window).height());
$("#comment_close").css("left",$(".diary_comment_class").offset().left + $(".diary_comment_class").outerWidth(true) - 35);
$("#comment_close").css("position","fixed");
$('#comment_close').animate({
top: $(window).height() - 195
}, anime_time );
$(".homepage_main").css("margin-bottom","200px");
}else{
//スマホ版トップページ
$("#diary_comment_toppage").css("height", 0);
$('#diary_comment_toppage').css("position", "static");
$("#diary_comment_toppage").css("display", "block");
$('#diary_comment_toppage').animate({
height: "200px"
}, anime_time );
}
}else{
//日記ログの場合
$("#diary_comment_logs").css("height","0");
$("#diary_comment_logs").css("display","flex");
$('#diary_comment_logs').animate({
height: "200px"
}, anime_time );
if($(window).width()>900){
$("#comment_close").css("top",$(window).height());
$("#comment_close").css("left",$(".diary_comment_class").offset().left + $(".diary_comment_class").outerWidth(true) - 35);
$("#comment_close").css("position","fixed");
$('#comment_close').animate({
top: $(window).height() - 195
}, anime_time );
}
}
comment_visible = true;
}
$(document).ready(function () {
$("#comment_close").on('click', function () {
if($('#diary_comment_toppage').length){
//トップページの場合
$('#diary_comment_toppage').animate({
top: $(window).height()
}, anime_time );
$('#comment_close').animate({
top: $(window).height()
}, anime_time , function(){
$("#diary_comment_toppage").css("display","none");
});
$(".homepage_main").css("margin-bottom","0");
}else{
//日記ログの場合
$('#diary_comment_logs').animate({
height: 0
}, anime_time );
$('#comment_close').animate({
top: $(window).height()
}, anime_time , function(){
$("#diary_comment_logs").css("display","none");
});
}
comment_visible = false;
});
});
$(document).ready(function () {
$("#narrow_comment_close_button").on('click', function () {
//スマホ版
if($('#diary_comment_toppage').length){
//トップページの場合
$('#diary_comment_toppage').animate({
height: 0
}, anime_time , function(){
$("#diary_comment_toppage").css("display","none");
});
}else{
//日記ログの場合
$('#diary_comment_logs').animate({
height: 0
}, anime_time , function(){
$("#diary_comment_logs").css("display","none");
});
}
comment_visible = false;
});
});
</script>
その弊害としてスパゲッティーコードになりました（）
次から次へと仕様が変わった結果、メンテナンス性が最悪なコードになりました(笑)(笑)
DOM要素の兼ね合いとかあり、コピペが大量発生しています。
最初からクラスで書いてればもう少しなんとかなったんですけどねえ･･････。
とはいえ、
早すぎる最適化はバグを生むというジレンマもあるんでね･･････。動かす機構がバラバラなので、変にいきなり統合しちゃうと別のとこでバグりそうなんですよねこれ(笑)
まぁ、作り終えた今ならもうちょっと最適化しようと思えばできるんですけど、バグが出るとしんどいのでとりあえずこれはこれで放置です(笑)(笑)
未来のSEがこんなんでいいんですかね！？！？いいワケないよなァ！？！？！？！？
ちなみに、すごいピンポイントですが
ウィンドウ幅780px以上のタッチパネル端末を使ってる人に関しては同様の問題が起きますが、仕様上解決不可能なので仕様です。
タブレット端末を横向きにして見ると多分そーなりますかね？でも、うちの日記は縦向きの方が読みやすいはずなので気にしなくてもいいでしょう。
気にしたところでどうしようもないですけど
あっお久しぶりです（・∀・）
確かにコメント入力中にフォームが消えますね･･････。原因はわかるんですけど、完全に構造上の問題ですね･･････。
とりあえず割と無理やりになんとかしてみました(笑)これでたぶん大丈夫なはずです...！少なくとも私の環境ではうまく行きました！ほんとすみません！笑
ファッションノートは･･････確かに放置されてますね･･････っていうか存在を忘れてましたね･･････(笑)
もともと広告収入をたくらんだ下心だらけのコンテンツなんですけど、あれ妙に人気あるみたいなんですよね･･････。完全に自分向けのコンテンツなんですけど笑
まぁ、自分のためにもそろそろ続きを書いてみてもおもしろいかもですね！(笑)