「続きを読む」機能の追加と、Movable TypeのSSL化の盲点

2018年11月13日(火) 21:33 | 日記

CSSのみを使って「続きを読む」を設置

Movable Typeで構築している当サイト「フォーキー☆カーニバル」は、トップページにアクセスすると最新7件の日記が全文表示される仕様でした。1件当たりの記事がそこそこ長いので、7件分になるとかなり縦長になってしまい、特にスマホで表示させた場合はスクロールが途方もなく長くなってしまいます。
かといって各記事のタイトルのみを表示させるのも味気ないし、トップページにアクセスするだけでそのまま最新の日記が読める環境は維持したかったので、その折衷案として、「続きを読む」方式にしてみました。

具体的には、トップページとカテゴリー別記事ページ、月別記事ページについて、それぞれ各記事の途中まで表示させて、「続きを読む」をクリックまたはタップすると全文が表示されるという仕様にしました。
HTMLとしてはすでに全文が読み込まれた状態で、CSS3のデザイン処理によって記事の途中から見えなくしているだけなので、「続きを読む」をクリックすると全文が一瞬で表示され、タイムラグは発生しません。

以下のサイトを参考にして作りました。

コピペでできる!CSSとhtmlのみで作る「続きを読む」の開閉ボタン

CSSだけで作る超軽量アコーディオン開閉「続きを読む」「もっと読む」「more read」(スマホ対応)

「続きを読む」の左のアイコンは、「Font Awesome」というウェブフォントを使って表示しています。

これで縦方向のスクロールはぐっと少なくなり、次の記事への遷移が楽になったのですが、一方で記事全文を読むためにはクリックやタップというひと手間が強いられることになります。冒頭に写真があるページだと、タイトルと写真しか見えないから「続きを読む」って何の続きだよという話ですし。
あちらを立てればこちらが立たないということで、どちらかの不便は受け入れないといけません。

盲点は「ポップアップ画像」のHTML

前回の日記で当サイトをSSL化(http→https)したことを書いたのですが、上記の作業に伴って過去の日記をチェックしていたところ、SSL化がなされていないところが見つかりました。
「ポップアップ画像」の画面です。
たとえば下記のページが該当します。

不運の鈴(2017年8月13日)

このページの画像のいくつかは、クリックすると拡大した写真が別ウインドウで開く仕組みになっています。その別ウインドウもHTMLページとして生成されるのですが、ここのHTMLが参照している画像のURLが、「http://」のままになっていたのです。
ここはMovable Typeの一括置換では変更できない場所で、記事ページを再構築しても変わらず、おそらくはMySQLを直接編集して変更することもできず、変更するとしたら以下のふたつの方法にしぼられます。

1. 画像をアップロードし直して、ポップアップ画面のHTMLをあらためて生成する
2. 該当するサーバー内のHTMLファイルを直接編集する

画像をアップし直すのは時間がかかるし、ポップアップ画面を使っている日記は上記を含めて2ページのみで、修正すべきHTMLも合計10個程度だったので、2の方法でHTMLを修正しました。今はすべて「安全な接続」になっているはずです。

動的ページをスピーディーに表示させたい

Movable TypeはWordPressと違って静的なページが生成できて、トップページや記事ページの読み込みがスピーディーなのが大きなメリットですが、静的ゆえにかゆいところに手が届かなかったり、トップページのページ送りなど動的なページ生成が極端に遅くなったりといった不便さもあります。これはMTそのものの問題なのか、ウェブサーバーの仕様の問題なのか、あるいは本サイトの作り方がよくないのか、原因は分かりません。

とにかく当面の課題は動的ページの挙動のスピードアップです。トップページの最下部から「次の7件」をクリックしたときのもっさりとした動きをなんとかしたいです。とりあえずMTの管理画面で、テンプレートモジュールの中でキャッシュを有効にしても差し支えなさそうなところを有効にしたりして、サーバーの負荷を少しでも減らそうと試みたのですが、いくぶんか効果があったのか、表示のスピードが上がったような気がします。

また、本サイトはMovable Type 6.3.7というひと世代古いバージョンで動かしているのですが、PHPのバージョンが7.2だと動的ページが表示されず、7.1で動かしています。今後のことを考えるとMTを最新のバージョン7にアップグレードすべきなんでしょうけど、動作しなくなるプラグインがありそうなので、しばらくあとにしようと思います。

コメントを投稿

※サーバーの状況によって、投稿完了まで時間がかかることがあります。
※投稿内容がすぐに反映されないことがありますが、ページを再読み込みするとコメントが表示されます。
※入力したURLは公開されますが、メールアドレスは公開されません(管理者に対してのみ通知されます)。