ドラマティックでもエキサイティングでもない、
日常のできごとや思いを淡々とつづった日記です。

「続きを読む」機能の追加と、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キロ近くも重いから、本当はもっと減らさなければいけないのですが、苦しい思いをしてまでやりたくないというのが本音です。苦しかったら今日まで続いていなかったでしょうし。

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

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

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

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

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

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

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

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

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

最近の体重について

2018年6月30日(土) 23:52 | 日記

前回の日記から時間が空いてしまいました。
ゴールデンウィークは大阪と京都へ遊びに行って、暴飲暴食をしたのでダイエットは停滞してしまいました。その後も食事制限を続けて、体重は減ってはいるのですが、減り方のペースはずいぶん鈍っています。

今年2月7日を基準とすると、2か月半後の4月22日の時点でマイナス6.6キロ。そこから2か月と8日経った今日の時点で、1.6キロしか減っていません。あまりにも大きな差です。

それでも、この1~2か月でやせたことを実感する機会が増えています。
まず、明らかに腹回りと太ももが細くなりました。同じズボンを履いているとよく分かります。ベルトの穴も1個分きつくなりました。
体を横から見たときの厚みも変わりました。もともと正面から見たらそんなに太ったようには見えないのですが、横から見ると胸から腹にかけてのラインが全体的に厚くて、円筒形みたいな体でした。それが最近はずいぶんと平らになりました。店のエスカレーターとかで鏡に映る自分の体が、前ほど見苦しくなくなりました。夏場は薄着になるので体のラインが出るのが嫌だったのですが、多少はましになりました。
顔もよけいな肉が取れて、いくぶんかスリムな見た目になりました。「やせた」と言われることも増えたので、自分で思うより分かりやすい変化なんだと思います。

体重自体がそんなに減っていなくても、体型がいい方向に変わっているのなら、ここまでのダイエットはまずまず成功といえると思います。
ただ、この先さらに体重を減らそうと思ったら、より厳しい食事制限と、運動する機会を増やすことが必要になりそうです。これまではたいして苦しまずにダイエットできましたが、今後はそういうわけにもいかないようです。
標準値まではあと12キロ。まだデブであることには変わりがありません。がんばります。

2018年、大阪1日め

2018年5月 4日(金) 00:28 | 日記

きのうお伝えしたとおり、夜行バスに乗って大阪へやって来ました。
4連休の初日ということで渋滞が心配だったのですが、案の定ところどころで渋滞が発生していまして、夜の1時台だというのに神奈川県の横浜町田インターあたりから西が渋滞だったほか、3日の早朝には三重県や滋賀県でも足止めを食らい、大阪には予定より2時間も遅れての到着となってしまいました。
豊中市の服部緑地で開催される「祝春一番2018」の開演は11時。予定どおりなら大阪駅付近に9時前に着くので、のんびり朝ごはんを食べてから御堂筋線に乗っても余裕で間に合うはずでしたが、2時間押しだと開演に遅れてしまいます。でもラッキーなことに、僕が乗っていたバスの降車場は梅田とユニバーサルシティだけでなく、先に桃山台に止まってくれました。おかげで10時半すぎに北大阪急行に乗れたので、そこから1駅先の緑地公園に間に合わせることができました。
春一番は明日も行くので、ライブの詳細は2日分まとめて明日書こうと思っています。

春一番が終わったのは午後6時15分頃。ここでひとつ問題が発生しました。携帯電話の電池切れです。古い機種を使っているせいか最近は電池の持ちが悪く、ちょっと使い続けるだけですぐだめになってしまいます。そうなることを想定して充電用のバッテリーも持って行ったのですが、こちらは携帯電話よりさらに古いため劣化が進んでいて、フルに充電してきたはずなのに肝心の携帯電話にはちょっとしか充電できず、焼け石に水な状態でした。
仕方がないので、梅田のヨドバシカメラに立ち寄ってバッテリーを買うことにしました。
スマホ用バッテリー
左の黒いのが今日買ったもの。大きさも厚さもだいたいスマホと同じくらいです。右の青いのがこれまで使っていたバッテリーです。長さは新しいバッテリーと同程度で、かなり細いのですが、厚みがあるせいで持ち運びが微妙にめんどうです。体積としてはたぶん新しいバッテリーの方が小さいのですが、電気の容量は今日買ったバッテリーが5000mAhで、古い方が2000mAhと段違いです。4~5年くらいでこんなに性能がよくなるんですね。ただお値段もそれなりにしまして、税込みで4000円以上払いました。想定外の痛い出費です。

次に向かったのは、日本橋にあるCDレンタルショップのK2レコードです。
K2レコード
この日記でもたびたび紹介していますが、CDの品ぞろえは西日本最強で、大阪へ行くたびにほぼ毎回利用しています。今日はアイドルに日本の70年代ロックに海外のエレクトロニカやポストロックなど、幅広いジャンルのCDを借りました。アイドルについては、こんなものまでレンタルできるのかというなかなかレアな盤を借りられたので、機会があれば紹介したいと思います。

日本橋から、宿泊地の動物園前駅まで歩くのも毎年恒例の行事です。今日は1泊2400円のホテルに泊まります。部屋はこんな感じです。
ホテルの部屋
ふとんを敷くスペースのみの3畳の部屋。でも寝るだけならこれでじゅうぶん快適です。シャワーとトイレは共同ですが、宿泊費を思えば納得できます。なによりWi-Fiが使えるのは実にすばらしいです。

ちなみに、動物園前駅(JRの最寄りは新今宮駅)の南側には安いホテルが集まっているのですが、すべて同じスペックではなくて、おおざっぱに分けると「安いホテル」と「べらぼうに安いホテル」の2種類があります。
「安いホテル」は動物園前駅から徒歩1分圏内のところ。今回僕が止まっているのもそちら側です。最低料金は2000円程度です。先に書いたとおりシャワーとトイレは共同ですが、それなりに立派な共同浴場があったり、アメニティもそれなりに充実していたりするなど、値段以上のサービス水準といえます。外国人観光客が多いのも特徴です。
下の写真が「安いホテル」の密集地帯の一角です。このへんのホテルの半分くらいは泊まったことがあります。
安いホテル

一方の「べらぼうに安いホテル」は、動物園前駅から南へ徒歩5分程度の少し離れたところに集まっています。どちらかというと阪堺線の今池駅に近い場所。こちらは宿泊料金が1000円台前半、場所によっては1000円を切るところもあります。なぜこんなに安いのか、もともとどういう人たちのための宿泊施設なのか、そのへんの事情についてはここでは割愛します。僕も過去に一度こちら側のホテルに泊まったことがあって、次回以降は動物園前駅寄りの「安いホテル」の方を選ぼうと心に誓ったという事実だけを述べるにとどめておきます。

そういえば星野リゾートのホテルが、「安いホテル」の地域から道をはさんだ北側に建つことが決まっているようですが、今のところ本格的な建設は始まっていなかったようです。

ホテルのチェックインをすませたあとは夕食。新世界といえば串カツです。
通天閣と串カツ店
通天閣の周りにはたくさんの串カツ店が連なっています。この界隈にはほぼ毎年のように訪れているのですが、去年と比べて確実に店が増えています。観光客も増えています。外国人も増えています。
行列店「だるま」の列も去年より長くなっているように見えました。
「だるま」の列
行列ができるのは理由があって、個人的には肉のおいしさだと思っています。串カツ店のメインメニューは牛肉ですが、他店と比べて肉の品質がいい。同じお金を払うなら、おいしい方を選ぶのは当然です。
10分くらい並んで、「だるま」で串カツを食べてきました。
「だるま」の串カツ
串カツ9本とどて焼き、それに生ビール2本で、お会計は税込みで2500円そこそこ。ボリュームのわりにお手頃な価格です。去年までの僕だったら3本めに突入するか、別のお店で飲み直していたところですが、ダイエット中の身なのでやめておきました。
ところで東京の串カツ店にはいまだに行ったことがありません。最近はチェーン店が増えていて、最大手チェーンの運営会社は株式を上場しましたけど、おいしいんですかね。