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

ご無沙汰しております。

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

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

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

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

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

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

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

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

まず公式サイト（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から持ってきた３つのメッセージを設置している。
これもたまたまこのサイトがそうなっているというだけで、状況によっては、直接メッセージを書く場合もあるだろう。
また、'fr1'はこれもこのサイト特有のスタイルで、オレンジ色の枠が定義されている。直接関係ないので、気にしなくて良い。例としては、以下のようなコードで良い気もする。

<h2>おしらせ</h2>

    <div>ほげほげ</div>

    <div>とにかく長い文章</div>

    <div>ほがほが</div>

ともあれ、この「ほげほげ」な例は置いておいて、元のコードに戻ると、２番目が、今回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

ハードディスクを廃棄のために分解した

このブログに限って言えば、１年ぶりの投稿だ。

今回は、ハードディスク（以下HDD）を廃棄のために分解した話。

部屋を片付けていたら、壊れた2.5インチのHDDが出てきた。

そのまま「金属ゴミ」として廃棄すればよいのだが、万が一拾われ修復されて、私の大変重要な機密情報が漏れたら大事だ。

....というか、2.5インチだけに、ノートパソコンに搭載されていた可能性があるが、もはやどこに搭載されていたか、いつのものかも全くわからない。2GBだから、もう20年ぐらい前とかの代物だと思われる。

というわけで、重要だか何だかわからない、そもそも本人も内容を把握していない機密情報が、漏れる心配はほぼほぼ無いのだが、それでも、そのまま捨てるのは気持ち悪いので、分解してディスクを破壊する事にした。

それで、HDDなのだが、普通のドライバでは開かない。（「デバイス・ドライバ」の事では無い、「ネジ回し」の事。＞いらん解説！）

ネットで調べたら、T型というタイプのドライバを使うらしい。ただ、サイズがわからない。かといってこのためだけに、「T型ドライバの詰め合わせ」を買うのもなんだか勿体無い。前回の投稿のiPhone電池交換キット付属のドライバも試したのだが、合わなかった。

そんな事を考えつつ探していたら、とても安い色々なビットが入ったドライバのセットを発見したので、思わず買ってしまった。

 どれくらい安いって、定形外送料込みで約600円だった。
パッケージを見るに、ご近所の国製なのは間違い無さそうだが。一体原価はいくらなんだ？。

紙のケースから出してみる。

箱の裏に、ビットのラインナップがある。何でも来い！って感じだ。

ビニールの包装を撤去。下のボタンをスライドすると開くのだろう。

なんと、開くとビットが起立した！なんだかすげー！

これがT型。T6を取ってみた。

結局適合したのはT4だった。

サクサクとネジを外す。軸もラバーな感じでとても回しやすい。

全部はずしたが、蓋が取れない。きっとシールの下に隠れているに違いない。

やっぱり。

茶色いフィルムも外して、ネジを回してみたが、これは、蓋のネジでは無く、多分ディスクの軸だ。クルクル回ってしまう。
ってことはもう一つのシールか！

あった。

開いた。ディスクが見える。なんだかピカピカで綺麗だ。

鏡にもなる！

ここで、ディスクに思いっきり傷でも付ければ終了なのだが、あまりに綺麗なので、ディスクを取り出してみる事にした。

先程の軸のネジをディスクを押さえつつ回したら取れた。ドライバはT5に変更した。

ディスク摘出成功！！ホント綺麗だ。

鏡にもなるし！

2GBのHDDなので、一枚1GBなのだろう。

なんとなくだが、ディスク摘出後、HDDの蓋を元通り戻した。
さて、このディスクどうしよう？

鏡にでもする？

以上なのだが、こんな面倒な事しなくても、HDDは精密機器なので、

• 衝撃を与える
• ドリルでディスクがありそうな位置に、穴を開ける。
• 水没させる
• そもそも、蓋を開けただけで、ホコリ等が混入して、壊れる

という情報もあった。簡単に破壊可能なのだ。そりゃま確かにそうだろう。
なんだか、また無駄に動いてしまった。まぁ良しとしよう。

今更ではありますが、iPhone5の電池交換

家族のiPhoneのバッテリがヘタってきた。３時間と持たないらしい。

もう４年ぐらい使っているので当然なのだが、iPhone8とかiPhone10もつい先日発売された。（まぁそういう時期の記事である。）機種変すれば？と勧めたが愛着があるし、形状が気に入っているとの事。

私は予算が許せば極力新しいものを使いたい主義だが、愛着とかそういう考えも悪くない。愛着は素敵だが、放っておいたら、近々そう遠くない未来にお別れの日が来る。

最近職場のお客さんがアンドロイド系のスマフォを自力でバッテリ交換したという話しをきいたので、私もやってみようという事になったのだ。

そこで、バッテリ交換キットを入手した。DIGIFORCEというメーカだが何か色々な工具が入っている。輪ゴムもある。輪ゴム何に使う？

お値段は大体1800円くらい。

なんとかフロントパネルを外した。どうやって外したかは、都合により後述。

小さなネジを失くしたらエライコッチャなのだが、このキットの素晴らしいところは、マグネットシートが付いていて、外したネジをなくさないように、貼り付けておけるところだ。このキットで感動した２つの点の1つである。
とにかく、コネクタのカバーまで外した。
このキットにはカラー写真入りのとてもわかり易いマニュアルが付属しているのだが、ここで嫌な予感がしてきた。なんだか、マニュアルと実態の配置が違うのである。
ああ、やっぱ！コネクタの形状が違う。いけない、私が入手した交換キットはiPhone5s用で、このiPhoneは5sでは無く、5だった！（事前に確認しようぜ＞私）
終了！！(泣)
とりあえず、元通り組み立てた。とてもさびしい気持ちになった。

そんなわけで、どうもキットはそのまま使えそうなので、バッテリのみをすぐに注文。2日後届いた。なんとなくだが、DIGIFORCEじゃ無いやつを購入してしまった。本件はメーカに過失は無い。私が間抜けなだけ。別にどっちでも良かったのだが。気まぐれで選んでしまった。このバッテリのメーカはBlueSeaというらしい。

下にある5s用のバッテリと比較。確かに、コネクタの長さが違うのです。

前回は省略したけど、フロントパネルの外しから始めてみよう。
ここでは写真を省略しますが、下部の星型ネジを２本、まず外します。（後ほどその画も載せます）
ホームボタンの少し上に吸盤を貼り付けて、引っ張ります。フロントパネルが浮いて隙間が出来たら、ピックを挟みます。（このピック、ギター弾けるのかな？）
5sはホームボタンのケーブルがあるので、ピックを挟む時注意が必要らしいですが、5はホームボタンにケーブルは無いので、容赦なく挿して大丈夫です。

写真では、最初に挿したピックは取れてしまったけど、本当は挿したまま、隙間が出来たら、もう一つの先が薄くて頑丈なピックで、サイドをスライドさせてフロントパネルの側面を浮かせます。

開きました。

そしてこのキットで２つ感動した事その２。輪ゴムの使い道。中身の入ったペットボトルを用意して、フロントパネルを固定するのです。すごい。すごい。地味に凄い。というか配慮がすごい。

後で頼んだ電池は取説が無くて、付属の両面テープをどう貼ったものかわからなかったのですが、元々どうなっていたかを参考に何とか貼り付けました。

両面テープにバッテリを固定する前に、マニュアルの通り、一度バッテリのコネクタをはめて電源が入るかチェックします。リンゴマーク出ました！（ホント良かった。この瞬間が一番心配）

コネクタカバー（この写真の中心あたりのネジのついた金属の板）をネジ止めしました。

 バッテリを両面テープで固定しつつ戻し、フロントパネルを戻します。フロントパネルの上の爪のようなものを本体にまず引っ掛けてから、手前に倒し、押し付ければハマります。心配なので、よく押しました。

そして、分解するときは、省略しましたが、底面にネジが２つあります。普通のプラスネジじゃありません。星型ネジってやつです。

 星型ドライバもキットには付属しています。それで締めて完成！
（うわ、汚い机の周辺が写ってしまった。）

起動確認。心配なのは、物理的なスイッチ。
ホームボタン、音量ボタン、マナーモードのボタン。どれも動作しました。
ブラウザも動作しましたよ。（そこまで来たら、そりゃブラウザとかアプリは動くだろう！）

以上です。右が取り出した、古くなったiPhone5のバッテリ。真ん中が間違って買って使わなかった、5sのバッテリ。あーもったいない。オークションとかで売る？
お金の問題ででは無くて（お金は大事だが）、使わないモノを買ってしまったのが辛いのです。だから、5sをお使いの方で、バッテリがヘタっている方、譲りますよ。ちなみに、5cと5seにも使えます。

要領は掴んだので、幸い私はフリーランスなので、iPhone電池交換サービスでも始めようとか思ったけど、そんな事を考える人は多いわけで、参入障壁が低すぎて、競合が多すぎる感じなので、知り合いに頼まれたとかじゃなければやめとこうと思います。

これをIT系の記事と言っていいのかは不明ですが、まぁ間違いでは無いのかな？

それでは。

サイト作成事例・空手道場

今回が、このブログ最初の投稿になります。ご覧になられた方は、今後共よろしくお願い致します。

今回は、当方が作成管理している「空手道場」のサイトの構造を紹介します。

作成といっても元々あったサイトの管理を依頼され、それをカスタマイズしました。
（※該当道場のサイトはこちら→http://www.jka-nakahara.org/）

 見た目はご覧のとおり、デザイナさんに頼んだわけでもありませんので、非常にシンプルで普通なサイトなのですが、実は中身は、あまり手間とお金を掛けず、できる限りの機能を盛り込んでいます。

つまりは、「見た目の割に中身はちょっとすごいんです」ということなのです。

基本的には、「なるべくプログラムを組まないで、なるべく機能は流用して使用する」というコンセプトで、作成されています。ですから、現状はサーバ側のプログラムは無く(※)、HTML5とCSS3、若干のJavascriptと、Googleのリソース（API）を利用しています。

（※必要があれば、いずれサーバサイドのプログラムも作成するかも知れません。）

流用がそんなに凄いことかといえば、確かに凄いことでは無いのですが、当方からすると一つの挑戦だったのです。それは末尾に書きます。

まず、このサイトはスマフォに対応しております。CSS3の技術（Media Queries）を使い、画面のサイズに応じて、配置や大きさを調整するようになっています。

ブラウザの幅をマウスでドラッグして、小さくしてみましょう。

私は普段使っていないのですが、一般的な例として、今でも比較的にメジャーなIEをあえて使います。

それに合わせて、内部のボックスもバランスを保ったまま縮小されます。

さらに幅を狭くしてみます。

流石にもう幅が狭いので、自動的にページ内の各ボックスを縦に配置します。スマフォや携帯の画面は、専用の画面を作成するわけでは無く、このように横幅で判断して調整しています。

スマフォで見るとこんな感じです。これは私のスマフォの写真です。横幅が狭いので、それに合わせて配置されます。

さて、トップ画面に戻りましょう。

各コンテンツは、Googleさんの技術をふんだんに利用しています。

中央のクリーム色の右側（サイドバー？）に、リンクリストがあります。
これは、この空手道場の代表の方の作成されているブログと、この道場の活動記録ブログの最新記事５件のリンクがそれぞれ表示されています。
RSSリーダを使っていますので、ブログが更新されれば、自動的にココも更新されます。

さらに、下の方にある水色の部分。これは「お知らせ」の概要が書いてあります。
当初は、更新の度にHTMLを編集し、FTPでサイトにアップしていたのですが、現在は「Googleドキュメント」の文書（のアクセス用リンク）をここに貼り付けてあります。

次の画像は、そのGoogleドライブの「文書」というワープロ機能なのですが、

ここで作成した内容がそのまま、トップページの下部に表示されます。

ここを編集すると、ほぼリアルタイムにサイトの方も表示も更新されるので、手間がかからないだけでなく、緊急連絡もしやすいわけです。（リアルタイム過ぎて、編集中でも反映されてしまうところが、長文を書く場合など、少し不都合ですが、そういう場合はテキストエディタなどなどで作成してから張り付ければ良いわけです。）

背景色も反映されます。Googleドライブで作成した文書の背景を水色にしているので、サイトにも水色で表示されているわけです。

「Googleドキュメント」は、Googleのクラウドなサービスの一つなのですが、ブラウザで文書や図形、表計算やプレゼンと言った所謂「オフィス」なソフトを使うことが出来て、ファイルはそのgoogleドライブに保存されて、出先のPCやスマフォなどから、場所を問わずアクセスできるというものです。
この画面は、その「文書」の編集画面で、ワープロソフトのひと通りの機能を揃えていて、しかもとても軽いところが魅力です。
専用のソフト以外の画像や、その他のファイルも保存することが出来ます。
しかもWindowsなどPC用の専用ソフトを使えば、ファイルエクスプローラから保存されているファイルにアクセスする事ができます。
しかも利用料は、5GBまでは無料で、さらに、搭載されているソフトで作成したファイルなら上限無しです。（2012年12月現在）
 グーグルドライブについては→こちら


さて、別な画面にいきましょう。
道場の「活動記録」のページです。
ここには、TOP画面同様、RSSリーダを使い、Blogger（グーグルが運営しているブログ）にある内容をまるごと表示しています。RSSリーダなので、別にBlogger以外のブログサービスでも、基本的これはできます。私がたまたまBloggerを利用しただけです。

ただ、一つのページに際限なくブログが表示されたら、ブログの内容が増えると大変重くなってしまいます。ここは少しJavascriptのプログラムをいじって、先頭５件だけ表示し、それ以降はブログへのリンクという形で表示しています。


そして、これが大本のブログのページです。ここの内容を、道場のサイトに表示させているのです。

続きましては、入会案内のページにある道場の地図です。
これは、Google Mapを利用しています。
学校の武道場や、市の施設を利用していますので、会場として使う場所にマーカーをつけました。マーカーにマウスを乗せると、説明も出ます。
このマーカーは、かなり頑張って、正確な緯度と経度でマークしました。

Google Mapなので、私の意志や能力、実績とは関係なくストリートモードにすることもできます。

次にスケジュールのページです。

上の方の薄緑色の部分は、例によって、グーグルドライブの文書を貼り付けてあります。トップ画面のとは別な文書です。トップ画面の内容の詳細が書かれています。これもリアルタイムに更新できます。

その下には、カレンダがあります。これもGoogleのカレンダを貼り付けました。このカレンダー機能は、ひとつのカレンダーの中に、いくつかのカテゴリのカレンダを持つ事ができます。
私自身のカレンダに、道場のカテゴリでカレンダを作成して、そのカテゴリのカレンダーだけを、サイトに貼り付けています。これもいつでも編集できて、すぐに反映されるので、とても便利な状態になっています。


次に問い合わせのメールを送る画面です。
Mailtoを使うとあまりよろしくない（※）ので、このように入力フォームを置くわけです。流石にコレぐらいは自作しようと思いましたが、やはり「あるものを使おう」これも伝統的な”POST MAIL”という、Perlで作成されたCGIを利用しています。
POSTMAILのサイト

（※ 言うまでも無い話ですが、WEBページ内にメールアドレスを、半角英数字で原文通りに記述すると、それを自動収集され、悪徳業者などより、困ったメールが大量に届く事になります。）

拡張計画としては、イベント登録と出欠管理みたいな機能を搭載してみたいとは思っています。


終わりに、
当方は日本的表現で言うと、SEなので、ウェッブサイトを作れ（※）と言われれば、ガリガリ、サーバサイドとかに、プログラムを組みたくなりますし、それを改めようとも思わないのですが、世の中には大変便利なアプリケーションや、パーツがあります。種類も内容も多岐に渡り、複雑さを増しています。一人で出来る事の限界も感じます。それを解消するには、人を増やすか、既存のものの再利用という手段を取ることになるかとも思い、今回はそれらを最大限に利用するという試みで作成してみました。
（※ 偉そうな事を書いていますが、当方の得意技はアプリケーションで、WEB関連が一番ではありません。）

ちなみにこのケースの場合「どんだけGoogleが好きなんじゃ！！」という感じの内容になってしまいましたが、特にアフリエイトとか、宣伝とかではありません。確かに現状はGoogleさんのやり方は好きではあります。

それでは、今後も、いろいろなテーマで、IT関連の雑記を書いて行こうとおもっていますのでよろしくお願い致します。