ゲーム攻略からプログラミングまで、その時に思いついたことをだらだらと書き連ねていきます。

【jQuery】皆がすなるもくじといふものをつくりき

2019.09.13 12:00 | コメント(0) | 技術

program.jpg
つくりき

どうも、さつきといふものでおま。
今回もjQueryで簡単なおもちゃを作ってみました。

いろんなお友達やよく行くブログなんかを見てても、
最近かなりの確率でもくじなるものが用意されてます。

別にどうせ全部読むし要らんよなあ、と思っていましたが、
よく考えるといろいろメリットがありそうなので作ってみました。

それでは紹介していきますね。

色付はやめた

もくじの役割

そもそももくじはどういう意味合いで用意しているんだろう。

ページ内リンク

一つはページ内リンクとしての機能。
長文の記事の場合、毎回欲しい情報に到達するまでにスクロールがめんどくさい

そう、さつきさんの記事のように

それを省略するためのページ内リンクですね。
アニメーションなんかちょっとつけてあげるとリッチな仕上げになります。

記事内容の要約

これが結構でかいと思った。
センテンスごとの見出しをきちんと設定してあげることで、
記事を読まずとも、「こんなことを書いておるでよ」というのがわかりやすい。
自分が欲しい情報と違うな、と感じたら内容読まずして離脱するもよし。

著者のためになる

これはさつきさんだけかもしれませんが。
見出しをきちんとつけられているか、きちんと順序立てて説明できているか、
という確認のためにも使えますね。

耳が痛い(自傷行為)

どうも、ドMのさつきさんです。
私の場合はこの機能を後付で実装したので、
何も考えずに見出し振ってたのが丸わかりです。
恥ずかしい。

きちんとした見出しを設定することで、
ひょっとするとSEO的にもいい方向に作用するかもしれません


実装コード

そんじゃまずは実装内容から。
function get_sentense_index(){

var sentenses = $('section.body_main h2');
var list = $('<ul>');
if ( sentenses.length > 0 ) {
$.each(sentenses, function(idx, elem){
var obj = $(elem);
var li = $('<li>');
var id = 'sentense_' + (idx + 1);

obj.attr('id', id);
var link = $('<a>');
link.attr('href', '#' + id).append(obj.text());
li.append(link);
list.append(li);
});
$('#sentense_index').append(list);
$('#sentense_index_box').fadeIn(200);
}
}

function toggle_sentense_menu(elem_selector){
var target = $('div#sentense_index');
var myself = $(elem_selector).first();
if ( target.length > 0 ) {
if ( target.is(':visible') ) {
target.slideUp(300);
myself.text('[もくじを表示する]');
}
else {
target.slideDown(300);
myself.text('[もくじを隠す]');
}
}
}

<section id="sentense_index_box" style="display:none;">
<p class="index_switch"><a href="">[もくじを隠す]</a></p>
<div id="sentense_index">
<p class="sentense_title">もくじ</p>
<script type="text/javascript">
$(document).ready(function(){
get_sentense_index();
set_smooth_scroll();
$('#sentense_index_box .index_switch a').click(function(e){
e.preventDefault();
toggle_sentense_menu('#sentense_index_box .index_switch a');
})
})
</script>
</div>
</section>


コード解説

大まかな流れはこんな感じです。
  1. 記事内から見出しの要素を抽出する
  2. 順番に動的なidを設定する
  3. ページ内リンクを生成し、リスト化
  4. 目次として表示する

記事内から見出しの要素を抽出する

見出しの要素はみなさんそれぞれかも知れませんが、h2 ~ h5まで色々とあると思います。
この記事のプログラムでは見出しは一律h2であると想定しています。
要素を抽出するためにはDOMがロードされていないとダメなので、
実行は少し遅れます。
処理が爆速のページだと遅れて表示される可能性があります。

順番に動的なidを設定する

抽出した見出し群はObjectの配列になっています。
これをループでまわし、順にIDを振っていきます。
まあ特にこだわりがなければ連番でいいでしょう。
$.each(array, function(index, value){ --- some processes --- })
この記述は配列をループするjQueryの関数です。
単純配列の場合、第2引数で実行される関数の第1引数(index)には動的に番号が入ります。
今回の場合は関係ありませんが、indexは0始まりなのでそこだけ注意が必要です。
ちなみに、連想配列の場合はkeyに当たるものが入ってきます。

ページ内リンクを作成し、リスト化する

$('')でDOM要素を生成し、appendやらattrやらでこねこね作ります。
できたリンク要素をリスト要素にappendしてリストとして整形していく。

目次として表示する

最後に表示。
個人的に動的に生成するものは
始めは隠しておいて、完成してから表示させる形のほうが好きです。
生成にクソほど時間がかかるんだったら
先にプログレスバーみたいなのを出してもかも知れませんが。


問題点

一応、こんな操作したらエラー起きるぜ!っていうのはない(はず)です。
ただ個人的にダサいコードがいくつかあるので自戒もこめて紹介しておきますね。

もくじ表示/非表示のトグルスイッチ

トグルの処理はよきとしよう。
にしてもスイッチの文字を切り替えるのを直書きというのはいかがなものか
なんか賢く見える書き方考えてたけどパッと思いつくでもなく、
どうせここでしか使わんしということでほったらかしてしまいました。
さつきさん は ばか ですから
ですからなー。

スムーススクロール

これはそもそもさつきさんのサイトには全部反映しているものです。
ページ内リンクをクリックした時にスクロールするアニメーションを足すってやつです。
まあそれ自体は別にいいんですが、
今回のソース内にあるスムーススクロールは実行が2回目w
何を言ってるかと言うと、head部分の中で、
ページ読み込み完了時に一度スムーススクロールを付与する関数を実行しています。
で、目次はその後に作成される要素なので、
もくじの中のページ内リンクにはスムーススクロールが適用されていません。
なので、非常に煩雑ではありますが、
こいつらのためだけにスムーススクロールを2度がけしてます。
ちなみに、他のページ内リンクのスクロールが2倍速くなるなんてことはありません


まとめ

うん、やっぱりもくじはあって困るもんでもないな。
改善箇所としては、h3の見出しも子要素として取って、入れ子の目次...
なんてこともできるけど、あんまりダラダラ長くて、結局本文が見れない
ってなると本末転倒なのでやめときます。
つまるところ結局ユーザがほしいのって、

こういうのでいいんだよ

なんでしょうね。
まあ私がどの程度ユーザ目線で語ってるのかもよくわかりませんが。
良かれと思って実装したものが必ずしも受け入れられるとは思ってはいけません
せっかくの素晴らしいアイデアもよく考えておかないと、
おせっかいやありがた迷惑にしかなりません。

感想等あれば是非お寄せください。
ではではー。
技術の記事

コメント

まだコメントがありません...(´・ω・`)