「続きを読む」機能の追加と、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にアップグレードすべきなんでしょうけど、動作しなくなるプラグインがありそうなので、しばらくあとにしようと思います。

サイトをSSL化しました

2018年11月 9日(金) 22:59 | 日記

今回の日記は、当サイト「フォーキー☆カーニバル」をSSL化した話です。

SSL化とは、ひとことで言えば通信の暗号化です。当サイトにはコメント欄や検索フォームがありますが、そこに入力した内容が、たとえ第三者に通信を傍受されたとしても知られにくくなります。
SSLに対応しているサイトは、アドレスが「http://」ではなく「https://」で始まります。多くのブラウザーでは、アドレスの前に錠前のアイコンが表示され、クリックすると「安全な接続」というメッセージが表示されます。

もともとSSLは、クレジットカード情報など他人に知られたらまずいIDやパスワードを送信する画面で使われていたのですが、近年ではウェブサイト全体をSSL化することが推奨されています。ブラウザーもその流れを後押ししていて、たとえばChromeでは、SSL化されていないサイトにアクセスすると、アドレスバーに「保護されていない通信」と表示されるようになりました。

下記のサイトにSSL化に関する詳細が載っています。

常時SSL化とは?Webサイトの常時SSL化の効果と注意点 | さくらのナレッジ

SSL化する前の当サイトのトップページにFirefoxでアクセスすると、アドレスバーには錠前に赤い打ち消し線が入ったアイコンが表示され、いかにも「危険ですよ」的なメッセージを発していたのですが、今はきちんと緑色の錠前のアイコンが表示されています。今後は当サイトを安心してにご覧いただけます。

SSL化は、ウェブサーバーやサイトそのものの仕様にもよりますが、ワンタッチでできるものではありません。いろいろと段階を踏む必要があります。
「フォーキー☆カーニバル」をSSL化したときの手順は以下のとおりでした。

(1) レンタルサーバーの設定を変更

当サイトはさくらインターネットのレンタルサーバーで運営しています。さくらインターネットのコントロールパネルに「ドメイン/SSL設定」という設定項目があり、ここでSSLの設定を行います。
当該のドメイン名(当サイトの場合は「folky.saloon.jp」)の「変更」のメニューで、「共有SSLを利用する」を選ぶだけで設定は完了します。

従来は、サイトにSSLを適用するためには専門の業者のサービスを導入する必要があって、今でもセキュリティのしっかりしたSSLを利用するためには年数万円から数十万円のサービスを契約することになるのですが、近年グーグルなどがウェブサイトの常時SSL化を強く推奨しているなどの風潮を受けて、さくらインターネットはレンタルサーバーのユーザーに無料でSSLを提供するようになりました。さくら以外の主要なレンタルサーバー会社でも同様の対応がなされているようです。

さて、これでアドレスバーに「https://folky.saloon.jp/」と打ち込めば、これまでの「フォーキー☆カーニバル」と同じ内容で、なおかつ安全な通信が可能なサイトにアクセスできるのですが、実際にアクセスしてみると、真っ白な背景に文字が無造作に並ぶ、なんとも殺風景なページが表示されました。サイトのデザインを規定するスタイルシートのファイル(CSS)が読み込まれていなかったことが原因です。
SSL化したサイトでは、セキュリティの観点から、SSL化されていない領域のファイルは読み込まない仕様となっています。

これでは困るので、サイトのHTMLを書き換えてあげる必要があります。

(2) 各ページで読み込む外部ファイルもすべて「https」にする

サイト上で読み込む画像ファイルや、CSSやJavaScriptなどのファイルも、SSLに対応させる必要があります。
通常のHTMLであれば、全ファイルを一括置換で「http://folky.saloon.jp」を「https://folky.saloon.jp」に変換すればいいのですが、当サイトはMovable Type(MT)というシステムを使ってHTMLファイルを生成する仕組みなので、MTの管理画面で設定を変更する必要があります。

結論から言うと、3つの手順だけですみました。
1点めは、MTの管理画面で「ウェブサイト」のURLの設定を「https」に変更すること。変更して再構築をかければ、全ページのCSSやJSなどのファイルのリンク先も「https」になります。
ただこれには前提条件があって、各テンプレートの該当箇所が<$mt:BlogURL$>というMTの内部のタグで書かれている場合に限ります。タグではなくリンク先のURLを直接打ち込んでいる場合は、テンプレートを手動で直接編集するか、テンプレートで一括置換をかける必要があります。

2点めは、「mt-config.cgi」という設定ファイルを直接編集すること。CGIなどのアドレスについて、「http」を「https」に変更するだけです。

上記2点の対応だけでは、画像のリンクは「http」のままです。そこで最後の3点めとして、画像のリンクは記事ページの一括置換で、すべてのページを「https」に変更します。ついでにサイト内リンクのアドレスも「https」に変更してしまいます。当サイトには3000本以上の記事がありますが、一括置換は管理画面から簡単に行えて、時間も1分程度で完了しました。

これで、全ページが無事にSSL化されました。

(3) 「http://」へのアクセスを「https://」にリダイレクトさせる

SSL化されたサイトが正常に動くことを確認したところで、今後は「http://folky.saloon.jp/*」へのアクセスはすべて自動的に「https://folky.saloon.jp/*」に遷移させるようにします。
その方法は、サーバー内の「.htaccess」というファイルに記述を加えるというもの。ここでその詳細は説明しませんが、「httpsに301リダイレクト」でインターネットを検索すると、やり方が書かれたサイトが見つかると思います。

SSL化の手順は以上です。

SSL化のついでに、PC版のサイトの横幅を少し広げたり、スマホ版のサイトで記事本文の文字を大きくしたりと、デザインの調整もしました。
当サイトをレスポンシブに対応させたのが今からちょうど5年前ですが、当時設定したフォントサイズが、今のスマホの解像度では相対的に小さく見えるようになりました。

当サイトがスマートフォンに対応しました(2013年11月14日)

もとからレスポンシブ対応のデザインテンプレートがあったわけではなく、すべて手作り。我ながらうまくできたと今でも思っています。

東京でひとり暮らしを始めて14年め

2018年11月 1日(木) 23:51 | 日記

愛知県の実家から東京に引っ越したのが、今日からちょうど13年前の2005年11月1日のことでした。
この日記は、ちょうどその2005年11月1日の午前5時57分から始まっています。今見返してみると、携帯電話で撮った小さなサイズの写真が時代を感じさせます。

箱根峠

なぜ箱根峠にいたのかというと、実家から車に乗って、引っ越し業者の段ボール箱に入りきらなかった荷物を自分で運んで東京に来る際に、駐車場で休憩したためです。当時は仕事が決まっておらず収入がゼロだったため、高速道路を使わずに国道1号線ではるばる愛知県から走ってきました。しかもその車は当時乗っていたホンダのシビックではなく、シビックが故障して修理に出していたときに業者から借りていた代車の軽自動車でした。業者としてもまさか代車を東京との往復に使われるとは思っていなかったはず。

そのあたりの詳細は後日の日記に書いてありました。

11月1日から4日のまとめ

なぜ初投稿の日記がこんな中途半端な始まり方をしているかというと、もともとこの日記は、2004年5月に始めたゲームセンターのオンラインクイズゲームのプレイ日記から派生したもので、その日記からゲームに関係ない記事を抽出して独立させたという生い立ちによるものです。実際に初期の日記には、そこかしこにクイズゲームに関する記述があります。

そこからいろいろなことがあって13年。今日まで生きてこられたのは運がよかっただけだと思ってるし、この強運がいつまで続くか分からないし、いつまで東京で暮らすかも分かりませんが、東京に来て14年めとなるこの1年も、命ある限りのんびりと生きていこうと思います。

さらに厳しい食事制限

2018年10月31日(水) 23:46 | 日記

今年の2月に「やせよう」と思い立ってから半年以上が経ちましたが、今もいちおう食事制限を続けています。
当初は順調に減っていた体重も、最近はずいぶんと減りにくくなりました。4か月前の時点からたったの3キロしか減っていないうえ、ここ1か月はまったく体重が変化していないという現実に直面して、これからどうしようか悩んでいるところです。4か月前の日記でも「この先さらに体重を減らそうと思ったら、より厳しい食事制限と、運動する機会を増やすことが必要になりそうです」と書きましたが、いよいよそのとおりになってきました。

実は、9月頃から新しい食事制限を始めています。これまでの「夜は原則として何も食べない」というのをさらに厳しくして、「昼は炭水化物を大幅に減らす」という縛りを加えました。
具体的には、米や麺類のような炭水化物を避けるというやり方です。以前までは「夜は食べないんだから昼は多めに食べてもいいよね」ということで遠慮なく食べまくっていましたが、それをやめて、昼食は会社の近くの弁当屋さんで惣菜だけを買って食べるようにしています。惣菜も揚げ物はなるべく避けて、脂肪も取りすぎないように気をつけています。
摂取できるカロリーは必然的に減ってしまうので、夜になると空腹で苦しい思いをしますが、かなり慣れてきました。

炭水化物を減らした効果はある程度は出ているようで、太っていたときに買った服がさらにゆるくなった感じがするし、他人から「やせた」と指摘される機会も増えたような気がします。
それなのに、体重はほとんど減っていません。

理由はある程度分かっています。実際には上記のような食事制限はそこまで徹底できていなくて、だいたい週2回は高カロリーな夕食をアルコールとともに摂取しています。週4~5日はがんばるけど、週末は自分を甘やかすというスタイル。そりゃ毎日空腹だとやってられないし、週末は外出して体を動かしたり逆に動かさなかったり(ライブハウスで立ちっぱなしだったり)、人と会ったりもしているから、そういうときくらいはおいしいものを食べたい。

現状では、「週4~5日の食事制限」でようやく今の体重をキープできている感じです。その体重は決して健康な人の水準ではなく、標準値より9キロ近くも重いから、本当はもっと減らさなければいけないのですが、苦しい思いをしてまでやりたくないというのが本音です。苦しかったら今日まで続いていなかったでしょうし。

これ以上やせるためには、いよいよ運動が必要になってきました。果たしてそこまで踏み切れるのかどうか。経過はまたいつかお伝えしたいと思います。

アイドルの解散に立ち会った報告

2018年9月30日(日) 23:59 | アイドル

中野サンプラザ
9月22日、中野サンプラザ。PASSPO☆解散。

山中湖交流プラザきらら
9月24日、山中湖交流プラザきらら。ベイビーレイズJAPAN解散。バイクで片道2時間の長旅でした。

先日の3連休はこの2組のほかにベボガ!、AISも解散しました。

年初からGEM、アイドルネッサンス、Cheeky Parade、チャオ ベッラ チンクエッティが解散して、もうすぐバニラビーンズも解散するという、僕らアイドルファンにとっては時代の転換点となった2018年。中でもPASSPO☆は個人的に大好きなアイドルグループだったので、自分にとっては大きな衝撃でした。

実際に2組の最後のライブを見に行ったわけですが、解散を見届けたあと、アイドル全般への興味自体が失われてしまうのではという心配というか、それは心配と呼ぶべきではなくて順当な心の移ろいなのかもしれないけど、そうした変化が起こるのかなと思っていたけれど、今のところはそうでもないみたいです。
とはいえ、アイドルのライブを見に行く機会や、アイドルの動画配信やSNSなどを見る機会はこれまでと比べたら減っているのも事実で、昔から見てきたアイドルが解散するかどうか以前に、アイドルとの向き合い方が変わっているのかもしれません。

つい先ほど、SUPER☆GiRLSの5人のメンバーが1月に卒業することが発表されました。新メンバーの加入が決まっているとはいえ、9人中5人が一度に去るというのはメジャーなアイドルでは異例なこと。3人は初期から8年半、あとの2人も4年間在籍しているから、アイドル活動をやりきったうえでの卒業ではあるのですが。

とはいえ、長期間活動してきたアイドルの解散や卒業を惜しむことができるのも、その姿を長期間見てきたからこそ。サッカーや競馬などのプロスポーツもそうですが、長く見てきたからこそ楽しめることは多くて、たとえば自分にとってプロ野球はそれほど熱心なファンではないけれど、昔の選手を知っているからこそ最近の試合を楽しめる部分があるし、アイドルも90年代と比較するという視点があるし(分かりやすい例だと、ハコイリムスメがカバーしている昔のアイドルの楽曲をリアルタイムで知っていたりします)、たぶん飽きない限りは今後もアイドルをゆるく眺め続けるんじゃないかなと思っています。

初めてアイドル現場を見た人の反応

2018年8月18日(土) 14:10 | アイドル

先日、ある人と台場方面へ行く機会があって、ちょうど近くでアイドルのリリースイベントがあったので、せっかくだから見に行こうということになりました。
日付は8月14日。場所はダイバーシティ東京。Chu☆Oh!DollyとStella Beatsの合同のイベントでした。

最初の出番はちゅーどり。8人体制になってからのライブはアイドル横丁夏まつりとTIFでも見ていて、新メンバーの白担当の子(吉川結理さん)は表情の硬さが取れてきたなぁとか、るぃるぃ(大崎瑠衣さん)やせたなぁというかちょっと疲れてるのかなとか、こちらは完全にアイドルファンの目線で眺めていたんですけど、同伴者(僕より少し年下の女性)は初めてのアイドル現場を見て、笑いが止まらない様子でした。

その人が衝撃を受けたのは、ヲタクたちのふるまいでした。大の大人が声をそろえてMIXを叫ぶ姿や、みんなで振りコピをしている姿に、よほどびっくりしたようです。確かにあれは我々にとっては日常の風景だけど、普通の生活を送っている人から見れば、あまりにも日常からかけはなれた異様な光景です。
しばらくするとその人は、ヲタクたちをまねて楽しそうに振りコピもしていました。
個人的には「気持ち悪がってドン引きするかも」という可能性も考えていたのですが、結果的には楽しんでもらえたようで、アイドルの文化をいちおう受け入れてもらえたのかなと思って安心しました。

「おじさんたちも楽しそうにしてたね」とその人が言うので、「アイドルはたくさんの人たちの心を救っているんだ」と、自分の手柄でもないのにちょっと自慢げに答えておきました。

明日はアイドルの有料ライブを2現場回す予定です。いつものようにひとりで出かけます。

4年ぶりに同窓会へ行った話

2018年7月31日(火) 23:33 | 日記

7月14日に、約4年ぶりに故郷で中学校の同窓会があったので、東京からはるばる新幹線で実家まで行きました。

4年前の同窓会は碧南高校の近くにある店へ、直前にTIFで買ったアップアップガールズ(仮)のTシャツを着て行ったことを覚えているのですが、そのときの話はここの日記でちょっと触れたのみ。その前の2011年、吉浜駅の近くの店で同窓会をしたときのことは過去の日記に書きました。

今回の会場は、故郷の高浜市からちょっと離れた刈谷駅のそば。学年全員で180人くらいいるうち、40人くらい来ていたと思います。今回は3年生のときに担任を務めた教師ふたりと、1年生のときに別のクラスで担任だった教師ひとりも招待されていました。
前回の同窓会にもいた人、22年前の成人式以来の人、さらには中学卒業以来会う人もいました。今も多くの人が高浜市やその周辺に住んでいます。僕と同じく東京に住んでいる人も何人かいました。
男性諸氏はみんなもう40歳を過ぎたいいおっさんなのに、服装が20代みたいで、軽いカルチャーショックでした。同窓会だから「人前に出る」という感じでもないので、休日の延長みたいな感覚なのかもしれません。僕が今住んでいる、東京のそこそこ都心に近いところだとあまり見かけない雰囲気。でも日曜に高浜のドミーとか東浦のイオンとかへ行くと、きっと地元のお父さんたちはこういう感じなんでしょうね。

時の流れとは残酷なもので、何人かの訃報も聞かされました。生きることの難しさ、生きていることのありがたさを思い知らされます。

普段は東京でひとりで暮らしていて、職場以外であまり人と話す機会がないので、こういう機会はとても貴重です。
さっきインターネットの生配信を見ていて、プロインタビュアーの吉田豪さんが「アイドルの現場は金持ちと無職が平等なのがおもしろい」と語っていましたが、大人になると、経済や地位の格差を超えてフラットな人付き合いができる場所って、アイドル現場か学校の同級生の集まりくらいしかないのも事実です。
同窓会に参加できるのは、わざわざこういう場を作ってくれる人がいるからで、僕はそこに乗っかっているだけなので、幹事の人にはいつも本当に感謝しています。

8月にも実家に行って、そのときにまた同級生何人かで集まる予定です。人の縁はできるだけ大切にしながら生きていこうと思います。