2021年12月24日金曜日

WEB画面で長い文書を短く表示しボタンで全部表示する JSプラグイン readmore

ご無沙汰しております。

というか、そもそも、このブログそのものが投稿が少ない。
しかも、システム屋が書いているわりに、プログラムな話題がほとんど無い。これは問題だ。

というわけで、いきなりだが、私の備忘録とか調査結果的なプログラミングネタは大量に溜まっているので、少しずつ掲載していこうと思う。「あくまでも私的な備忘録である」とあえて書いておこう。そうしないと面倒なことになる。本当に面倒な世の中だ。どう面倒な事になるかを書くと、原稿用紙10枚分ぐらい書かねばならないので、それは省略する。

さらに付け加えると、私はHTMLやCSS、JSのエキスパートでは無い。(つまりは大した事が無いのである。)

で、なんの話だったっけ?

そうそう
WEB画面で、長い文章を短く表示させて、「続きを読む」等のボタンで、全部表示させたり、また短くしたいという話だ。

結論から言うと、readmoreというのを発見したので、実装してみた。

たとえば以下のサイト、とある、しがない鉄道模型屋のサイトなのだが、左サイドバーにお知らせが表示されている。

赤い点線の部分だ。
たまたまなのだが、2つ目のボックスがやたら長い。そんなわけで、ここに実装してみよう。

まず公式サイト(GitHub)
https://github.com/jedfoster/Readmore.js
から、readmore.jsを持ってくる。この例では、HTMLファイルがあるフォルダ(ディレクトリ)の下のjsというフォルダにreadmore.jsを置いた。

そして、このページの末尾の方に以下のように記述する

<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="js/readmore.min.js"></script>
<script>
    $(function () {
        $('.open').readmore({
            speed: 750,
            collapsedHeight: 120,
            moreLink: '<a href="#">...続きを読む</a>',
            lessLink: '<a href="#">短くする</a>'
        });
    });
</script>

</body>

</html>

1行目はJQueryである。これは無いと困るだろう。既にお使いなら、この行は不要だし、お使いでなければ、適当なVersionを設定すると良いだろう。

2行目はbootstrapのスクリプトである。たまたまこのサイトでは使用している。無くても問題ない。ちなみにVersionは4である。

readmore関数に渡しているパラメータ部分だが、

            speed: 750,
            collapsedHeight: 120,
            moreLink: '<a href="#">...続きを読む</a>',
            lessLink: '<a href="#">短くする</a>
speed:750 は文字通り、スピードであろう。展開速度を設定すると思われる。必要な方は公式を確認して欲しい
collapsedHeight: 120 は短いときの高さ。
moreLink: は広げるときのリンクを定義
lessLink: は短くするときのリンク定義
その他のパラメータもあるみたいだ。必要な方はこれまた参照してください。

次にお知らせを表示している部分
<h2>おしらせ</h2>
    <div class='fr1'><?=$cShopInfo->info1?></div>
    <div class='fr1'><?=$cShopInfo->info2?></div>
    <div class='fr1'><?=$cShopInfo->info3?></div>

<?=$cShopInfo->info1?>
などの部分は、PHPのコードで、DBから持ってきた3つのメッセージを設置している。
これもたまたまこのサイトがそうなっているというだけで、状況によっては、直接メッセージを書く場合もあるだろう。
また、'fr1'はこれもこのサイト特有のスタイルで、オレンジ色の枠が定義されている。直接関係ないので、気にしなくて良い。例としては、以下のようなコードで良い気もする。

<h2>おしらせ</h2>
    <div>ほげほげ</div>
    <div>とにかく長い文章</div>
    <div>ほがほが</div>

ともあれ、この「ほげほげ」な例は置いておいて、元のコードに戻ると、2番目が、今回Readmoreを入れたい行なので、以下のように記述する。

    <h2>おしらせ</h2>
    <div class='fr1'><?=$cShopInfo->info1?></div>
    <div class='fr1'>
        <div class='open'>
            <?=$cShopInfo->info2?>
        </div>
    </div>
    <div class='fr1'><?=$cShopInfo->info3?></div>

以上で完了なので、動作確認してみると、


なんと、ボックスは短くなったが、欄外のなって溢れた文字がそのまま以降のコンテンツに重なって表示される。「続きを読む」リンクを押すと通常の表示になるが、閉じるとまたこうなる。

これにははまり、色々やってみたのだが、結論としては、redmoreで表示を制御する段落のセレクタ(今回の例では'open'クラス)にスタイル

overflow: hidden;

を追加すれば良い事が発覚。

ヘッダ部分に以下のように記述した。面倒だから直接書いたが、普通はCSSファイルに書くのだろう。

<style>

    .open{

        overflow: hidden;

    }

</style>



溢れた分が表示されなくなった。

続きを読む」リンクを押すと全文が表示され、さらに末尾の行に「短くする」というリンクが表示される。それを押すとまた上の図のように短くなる。


以上なのだが、このサイトにおいては、せっかくBootstrap4があるので、パラメータ部分を次のようにしてみた。つまりは、Bootstrapのボタンリンクにしてみた。

<script>
    $(function () {
        $('.open').readmore({
            speed: 750,
            collapsedHeight: 120,
            moreLink: '<a class="btn-sm btn-info" href="#">...続きを読む</a>',
            lessLink: '<a class="btn-sm btn-info" href="#">短くする</a>'
        });
    });
</script>


続きを読むリンクがボタンになった。

閉じている状態(初期状態)

開いている状態

以上です。

----


関連リンク


ReadmoreのGitHub


https://github.com/jedfoster/Readmore.js



参考にしたサイト


ここの内容に沿って作成し、CSSを追加した。


「続きを読む」ボタンで要素の開閉を簡単に組込めるプラグインReadmore.js-WEBLAB


https://www.weblab.co.jp/staff/creator/6743.html