2017.3.1
日記にコメント送信欄をつけてみたい#3
終わると思ってたけど終わらなかったシリーズ。(笑)
ということで、クレームを頂いたコメント欄の改変をしばらくやっていきてえなと思います（・∀・）
さて、いまはこんな感じになっております。コメント欄がばばーんと出て来る手抜き仕様ですね。
しかし致命的な問題として本文を参照しながら書くことができないという問題があります。
まぁ･･････別に閉じても内容は保存･･････というか、ページ内の別のとこにあるhiddenフォームを表示してるだけなんで、閉じても内容はそのままなんで、読みたくなったら閉じてまた表示すれば続きから書けはするんですけどそんなもの利用者側からしてみれば知ったこっちゃないのでちょっとこれは是が非でも改善しなくてはなりませんね。
ということで、具体的にどう改善するかというとコラップス(アコーディオン)＋スクロールスパイで実装しようかなと思います。
コラップスは･･････このサイトでは使ってなかったかもですけど、まぁボタンを押すとにょきって出て来るやつです（？）
スクロールスパイはその名の通り、スクロールに追随するものですね。これはPC版のトップページの左メニューがそれに該当しますね。
スマホ版の上メニューはスクロールスパイじゃなく、最初からflexboxで上に固定してるだけだった気がしますね。まぁ、flexboxをにょきっと生やせるのならそれが一番良いかも知れませんが･･････うーんその方針の方がいいかなぁ。スクロールバーとかの問題もでてこないですし･･････。
ってか今気づきましたけどトップページの左メニューがなんか機能停止してますね（）
とりあえずこれはすぐ修正できたので修正しましたが、案外気付かないものですね･･････。
んじゃ、まずちょっと簡単なテストを作ってみましょう。
まず、ボタンを作ります。簡単ですね。イベントリスナーでjavascriptを呼び出します。
<button class="btn btn-success comment_button_sample_1">テスト１</button>
<script>
$(document).ready(function () {
$(".comment_button_sample_1").on('click', function () {
alert("ボタンがクリックされました");
});
});
</script>
一応ソースコード。
呼び出せることが確認できたら、今度は仕込んでおいたhiddenエリアを表示させることができるようにしてみます。
<button class="btn btn-success comment_button_sample_2">テスト２</button>
<script>
$(document).ready(function () {
$(".comment_button_sample_2").on('click', function () {
$("#comment_button_sample_3").show();
$("body").css("margin-bottom","200px");
});
});
</script>
<br>
<div id="comment_button_sample_3" style="display:none;position:fixed;bottom:0px;max-width:1000px;height:200px;overflow:auto;z-index:2;background-color:#666;overflow:auto;">テスト...</div>
はい。結局bootstrap使ってないんですけど(笑)これが基盤になります。
やってることとしては、見えないdivブロックを用意して、ボタンが押されるとdisplay:noneをdisplay:blockに変えて表示させる、って感じですね。
いろいろ微調整するのがめんどいのでposition:fixedで固定しています。
ただ、そうするとページが最下段までいかなくなるので、その大きさ分bodyにマージンを作って帳尻を合わせます。
この弊害として左メニューが変な挙動を示すんですが、借り物のプログラムを使ってるのでどの変数を弄れば良いのかちょっとよく分かりません。精査すれば分かるんですが、ちょっとしんどいのでそういう仕様ということでごまかします。(笑)(笑)
これ、最初にスクロール幅を計算してるから後でCSS弄っても意味ないみたいなんですよねー･･････。
テストではわかりやすいように背景を灰色にしてますが、この中にコメントフォームを埋め込めば、PC版･スマホ版に関わらず同じ動作をしてくれるみたいです。
どうやらfixedの仕様としては、特に座標を指定しない場合は親要素を基準にしてくれるみたいで、これでabsoluteとの併用を擬似的にできるようにしているって感じなんですかね。
いろいろstyleでごちゃごちゃ指定してますが、まぁこの辺は後でCSSファイルにまとめるであろうと思います。
fixedで指定するため、トップページと日記で共有しているヘッダーファイルにこれをぶち込めば動くことが予想されますね。ただ、日記だとDOMの構造が異なってますし、さすがにちょっと手を加えるべきかも感ありますけど、そのへんはCSSの指定のみで解決するので、たぶん･･････なんとかなるといいな･･････(笑)
z-indexは、javascript周りで表示されてるあれこれが上に表示されてしまうので、それを更に上からかぶせるために指定してます。例えば上にあるシンタックスハイライトとかですね。さすがに不格好なのでもっと上からかぶせることで見た目マトモにしてます。
ってことで、いい加減疲れたので今日はこのへんで。次回はここにコメントフォームを埋め込んで、とりあえず形にしたいなと思います。
その後にコラップスできるかどーかとか考えてみましょうかね。さすがにアニメーションなしってのはダサすぎるかなぁとも思いますんで。