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

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

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

箱根峠

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

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

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

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

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

サイトを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日)

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

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

別の月の日記を見る