さくらインターネットで早速Let’s Encriptの無料SSLを導入しました。あとwebフォントも改善。

昨日2017/10/17より、僕がこのwebサイトで使っている、さくらインターネットが無料SSLを簡単に設定できるようになりました。早速、その無料SSLであるLet’s Encriptを導入するとともに、ついでにwebフォント周りをいじりました。

SSLとは

その道のプロでない僕がいうのもなんですが、セキュアソソケッツレイヤーだったか、インターネットの通信を暗号化して安全に行う仕組みのことです。これを導入する目的は主に2つあります。ひとつは通信を暗号化することで改ざんや盗聴を防ぐこと。誰がどのサイトにアクセスした、というのも個人情報ですし、ショッピングサイトでSSLが導入されていないと、技術的にはデータの改ざんができるため、頼んでもいないピザが勝手に注文されたことになって100人前届いてしまう、ということもありうるのです。また、ログインのID、パスワードを盗聴されかねません。

2017年現在、さすがにSSLを導入していないECサイトはほぼ見かけませんが、広大なインターネット、先日、SSLを導入していないECサイトを見かけまして。どうしても欲しかったモノなので注文してみましたが、やはり放置されてたサイトだったのか、売り切れでした、という回答がありました。

SSLを導入するもうひとつの目的が実在確認です。この広いインターネット、ある企業を偽ってニセモノのwebサイトが詐欺目的でつくられていることもあります（主にチャイナ）。そこで、SSLをサイトに導入していると、認証局というインターネットのお偉いさんがこのサイトは実在している企業のサイトだよ、と保証してくれるのです。

ただし、今回の僕の導入したLet’s Encriptは前者の暗号通信化のみ対応です。実在確認も、ある程度のレベルの企業でないと導入しないかと思います（2017年現在）。SSLって、普通は費用かかりますからね。

SSLの導入

さくらインターネットのLet’s Encript導入はブラウザ上でポチポチとボタンを押すだけで進みました。普通はサーバーにインストールするものなので、僕含めたみんなが見ただけでめまいがするコマンドラインで作業する必要があるので、これは驚異的です。ただし、完全にSSL化していないと、「このサイトの接続の一部は安全ではありません」という警告がアクセスした人に表示されるので、SSLを導入しないことよりも不審です。その作業を最初はさくらの用意したwordpressのプラグインでやっていたのですが、やはり一部がうまくいかず。色々と調べた結果、「Search Regex」というプラグインでサイト中のhttpを一括でhttpsに変換できるとわかったのでそれを行いました。ただ、さくらのプラグインは301リダイレクトを行なってくれるように（httpプロトコルでのサイトアクセスを自動的にhttpsにしてくれる）.htaccessを自動で書き換えてくれたりもするようなので、入れっぱなしにしておいてます。

それでも、一箇所だけhttpが残りました。トップのロゴ画像のURLです。ヘッダーを確認するとphpでロゴ画像のurlを生成していたので（もう昔のことなので自分で書いたphpも忘れていました）、ソースを直リンクに書き換えたところ、無事、完全SSL化が達成されました。ブラウザの左上のurlが書いてあるところ（パソコンの場合）をみてください。緑色の南京錠が光り輝いています。

とはいえ、厳密なことをいえば、SSLでも完全に安全ではありません。例えば、お問い合わせフォームから問い合わせをした場合、その内容はメールで相手に届くというパターンはよくあります。その場合、問い合わせ内容がサーバーに届いて、そこから相手にメールが届くまでの経路は通常、暗号化されていません。完全に漏洩を防止するなら、問い合わせ内容はサーバー上に設置されたデータベースなどに保管され、相手には問い合わせがあったことだけが通知された上で、相手も暗号化された通信でサーバーに問い合わせ内容を読みにいく、というのがベストと考えられます。しかし、そのためにデータベースや仕組みを作成することと、メールが通信途中で漏洩することのリスクを天秤にかけた場合、そこまでやるケースのほうが現状は少ない気がします。あくまで個人の感覚ですが。しかし、とりあえずは常時SSL化という大きな目的は果たしました。Google検索もSSLを重視しているそうなので月間1億2000万PVくらいは達成するかもしれませんね。

Webフォントについて

ひと昔前と異なり、webフォントもだいぶ普及してきた気がします。このブログを始めたころは日本語のwebフォントなんて重いし（アルファベットと比べて日本語フォントはとにかくデータ量が多い）、有料のサービスしかないし、などなど。サービスを探すのも大変でした。

これまではTypesquareの無料プランを使ってデザイナーも僕も大好きな新ゴシックを入れていたのですが、無料プランは上限10,000PV／月という制約があります。そのため、毎月の途中からこのサイトは急にフォントデザインがイマイチになっていました。昨年、さくらインターネットが無料でTypesquareを使えるようになったため、いつか試そうと思いつつ、今日の機会になりました。

さくらインターネットの無料フォントは数が少ないのがデメリット。フォントウェイトもlightがないです。MediumとRegularから。ただ、こちらだと25,000PVまで対応しているというので乗り換えを決意しました。

Webフォントの導入

これも、SSLと同じく、ブラウザでボタンをポチポチするだけで簡単に導入できました。そして、その先にトラブルが待っているのも同じでした。当初、さくらインターネットが用意したWordpress用のプラグインでwebフォントを導入してみたのですが、なぜかフォントが反映されないばかりか、FirefoxとChromeなど、ブラウザ間でも違うフォントが表示される始末。

仕方ないので、面倒ですがヘッダーにjavasctiptをコピペで貼って、cssのfont-familyを書き直す、という面倒な手法をとりました。それで少しは改善されたのですが、まだ一部、フォントが変わっていないところがありました。Choromeのディベロッパーツールで見てみると「invalid property value」のエラー。そこから先はGoogle先生にお尋ねしたところ、css内に全角スペースが入ってる可能性が高いことがわかり、無事修正、今に至ります。丸1日かかりました。ちなみにまたしても本文はデザイナーも大好き新ゴシック（R）です。前より太くなってしまいましたが、可読性を高めるためにユニバーサルデザインフォントの新ゴにしています。

このwebサイトは僕のweb知識が浅い頃から立ち上げています。技術的なことはいろんなサイトからコピペで持ってきていて、さらに修正に修正を重ねているので見た目のシンプルさと裏腹に実はツギハギだらけです。修正のスパンが長いために、以前書いたコードの意味を忘れていて読解するのに時間がかかったりもします。専門用語でいうスパゲッティコードというやつです。きれいにまとめればもうちょっとはサイト自体が軽くなるんじゃねえかな、とも思いますが、まだ直したいところが何箇所もあります。

不便なところも残りますが、少しでもこんなインターネットの辺境サイトにアクセスしてくれる心温かい人の利便性をあげるのは僕の義務と捉え、今後も精進してまいります。

関連コンテンツ

スポンサーリンク