昭和考古学とブログエッセイの旅

昭和の遺物を訪ねて考察する、『昭和考古学』の世界へようこそ

はてなブログHTTPS化(常時SSL化)の際に注意すること

はてなブログのHTTPS実装(常時SSL化)を先日行いました。

 

parupuntenobu.hatenablog.jp

 

アドレスがHTTPからHTTPSになったからといって、劇的に何かが変化するわけではありません。しかしいずれは必要になることなので、お先にというわけで。

しかし、まだあまり浸透していない、はてなブログでの常時SSL化。ここらでいざ実装したときの注意点をまとめておきます。

 

 

f:id:casemaestro89:20180311112801p:plain

1.画像データなどのHTTP→HTTPSへの変換

Youtubeや主なメディア・SNSは既にHTTPSになっていますが、時にはリンクが古いことがあります。

 

f:id:casemaestro89:20180311112856j:plain

Chromeから見たものですが、あるブログは" https "になっているのに、警告マークが出たままになっています。

私も後で気づいたのですが、HTTPS化したからといって、実はまだ完了していないのです。HTTPS化の際、画像のリンクが古いまま、つまり" http "のままだと、" https "なのに警告マークが出てしまいようです。

古い画像を使いまわししていると、このようなことが起きるのかな!?

実は我がブログもそうでした。前回で「完了宣言」したけれども、実は完了していませんでした。

捜査したところ、直メールのお問い合わせフォームが犯人でした。これをNINJAからGoogleフォームに変え、解消しました。

 

さて、どうやって確認するかというと・・・これもChromeからのやり方となります。

ブログを開いて右クリックすると、

 

f:id:casemaestro89:20180311113539j:plain

いちばん下に「検証」というものがあるはずです。これをクリックします。

 

f:id:casemaestro89:20180311113634j:plain

すると、画面が二つに割れ、右側にこんな画面が出るはずです。これ、自分のではなく他人のブログなので、念の為モザイクをかけています。

上の「Console」をクリックします。

 

f:id:casemaestro89:20180311113751j:plain

すると、黄色の「!」と赤の「✕」のメッセージが表示されます。

HTTPが残ってますよ~というメッセージは、黄色の方です。" Mixed Content "と書かれていますが、HTTPS のページに含まれる HTTP で配信されたコンテンツを「混在コンテンツ」(mixed content) と呼びます。

これも他人のブログですが、この方の場合は「はてなフォトライフ」からアップロードした画像のURLが" http "のままのようです。つまり、リンクが古いからアップロードしなおさんかいゴルァ!という警告だろうと。

 

上のあれはあくまでチェック用であり、ひとつひとつの記事にいちいちこれをやっていると、いくら時間があっても足りません。

そんなあなたに、こんなツールがあります。

www.notitle-weblog.com

100記事単位で一括変換してくれるツールを作ってくれた人がいました。

しかし、失敗するとブログ自体が再起不能に陥るというハイリスクハイリターンのツールなので、自己責任で。

 

正直なところ、 "https "にしても警告が出ても現時点では特に支障はないので、より良い解決手段が出るまでのんびり構えるのも手です。

 

 

2.CSS・JAVAなどのHTTP→HTTPSへの変換

PCやモバイルページを、CSSやHTMLなどでカスタマイズしている人は、中のコードもすべてHTTPSに統一しないといけないようです。

前述の1.は、ブログ運営に支障が出るというわけではないので、なんだかわけがわからんという人は、ひとまずスルーでもよろしいかと。

しかし、これはかなり重大な問題です。

 

私のブログもHTTP化してから、あるところが動かなくなってしまいました。

 

常時SSL化モバイルカスタマイズ

これは我がブログのモバイルページですが、矢印の部分の”MENU"(メニューバー)をタップすると、

 

f:id:casemaestro89:20180311104523p:plain

 

プルダウン式のメニューが出てきます。あ、画像は工事中に撮ったものでURLすら埋めていないので、名前は「カテゴリ」なんとかのままになっています。現在は工事が完了したので、ここには各カテゴリの名前が入っています。

現在はモバイル(≒スマホ)経由のアクセスが主流なので、できるだけスマホサイトを見やすくしたり、少しデザインにこだわったりした方がいいかもしれません。私のブログも、訪問者の7割くらいがモバイル経由。少しでもスマホで見るてくれる人に見やすいサイトにすべく、日々改良を加えています。

しかし、HTTPS実装化以降、このメニューバーが全く効かなくなったのです。

 

 

f:id:casemaestro89:20180311110319j:plain

現時点でのメニューバーは、画面のいちばん上に置いたうえで、スクロールしてもメニューがついてくるように改良しています。

 

タップすると、このようにメニューが表示される・・・

はずなが、HTTPS実装化(常時SSL化)以降、メニューバーをいくらタップしても開かなくなったのです。

これにはかなり苦労しました。まる一日、せっかくの日曜日をまるまる潰してもがいた挙句、あることに気づきました。

メニューの色や位置などのHTML(かな?)は難なく変更されている。しかし、メニューバーが開かない。逆に言うと開かないだけじゃないかと。

メニューの開閉をコントロールしているのは、javascript。こやつが犯人ではないかなと。

 

 

f:id:casemaestro89:20180311111049j:plain

そこで、管理人画面の「デザイン→スマートフォン」から、埋め込んだCSSを見てみましょう。

 

すると、なんということでしょう!!

 

f:id:casemaestro89:20180311111213j:plain

javascriptの部分に " http: "が残っていました。

もしかして、これがメニューバー不具合の最重要容疑者かもしれない。

 

そこで、こうしました。

 

f:id:casemaestro89:20180311111402j:plain

疑わしきは消してしまえと、" http: "を消しました

この理由は、後で書きます。

 

するとどうでしょう!!

はてなブログモバイルスマホ画面メニューバー

ちゃんと開きました\(^o^)/ 

これにて懸案だった不具合は解消されました。

あ、上は「工事中」だったメニューのカテゴリーも、まだ仮名ながら名前とリンクをつけ、ワンタップで各カテゴリに行けるようにしました。モバイルでアクセスしてくれている方、一度お試しを。

 

で、私のブログはやたら長く、一度下までスクロールしたら上へ戻るのが大変。私は普段PCから見ていたので、そこに気づきませんでした。まあ、PCも大変ったら大変やけど。

なので、近いうちに「上へ戻る」ボタンを作りたいと思ったものの、調べてみるとけっこう面倒くさい。

そこで、こんなメニューバーを投入しました。

 

はてなブログスマホ複数メニューバー

はてなブログのアプリから見ると、フッターにちょうど隠れてしまうのが玉に瑕ですが、カテゴリ表示と「上へ戻る」が一つのバーに入った超優秀メニューバーです。

というわけで、ここはアプリから見ずに、ブラウザから見てね~。

 

" http: "は " 、結論から言うと、上のCSSのように「消してしまう」方が楽です

重要な部分なので、すべて赤字で書きます。

javascript に限らず css、画像の URL は " http: " 部分を省略が可能です。
「消す」ことにより、ページが http の時は http で読み込まれ、https の時は https で自動で読み込まれます。
その結果、http でも https でも javascript が動くようになります。

そして、javascriptは常時SSL化によりHTTPSに変わると、無効になってしまい動かなくなります。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

のままだと、常時SSL化したhttpsのブログ上では無効となります。また、「ダッシュボード→設定→詳細設定→headに要素を追加」に入れた、

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

の部分も、https:あるいは"//~(https:がない状態)でなければなりません。

javascriptの場合、ここに特に注意です。

 

CSSになると、

★src="https〜” で記述した場合
http、https、のページのどちらとも動作する

★src="http~” で記述した場合
http のページでは動くが、https のページだと動作しない

★src="//(http https どちらも記述しない)の場合
どちらのページでも動作し、記述も簡単。これがベスト。

(参考サイト:https://www.j-cool.co.jp/blog/?p=6548

 まとめるとこうなります。つまり、HTTPS実装化に備えて今から" https:"に変えたり、削っても問題なしということですね。

CSSなどを入れてカスタマイズしている人は、ここは死活問題となるので必ずチェックしましょう。カスタマイズしていない人は、何も気にしなくて結構です。

 

ただ、これからカスタマイズしたいなーという人は、最重要で要注意

たとえば、私のようにメニューバーを入れたいなーと思っている人は、「はてなブログ スマホ カスタマイズ メニューバー」というキーワードでググるはずです。するとメニューバーCCSが書かれたブログが、山のように出てきます。

しかし、ググって出る99%は情報が古く、URLが "http "のままだったりするのです。

私が採用したメニューバーは、下のブログのコードを参考にしました。色や「メニュー」の文字の位置などは、多少変えてあります。

www.yukihy.com

しかし、2015年の記事なので当たり前ですが、javascriptのリンクが古く、はてなブログHTTPS実装には対応していません。といっても、手書きで " http: "を消せば済むだけなのですが、https:になった後このコードを入れると、100%動きません。

 

ああ面倒くさい、なんだかわけがわからん!という人は・・・このような常時SSL化(HTTPS実装)は、情報が出てくるまでしばし様子見がよろしいかと思います。

 

f:id:casemaestro89:20180308224040j:plain

 

アクセス解析の傾向も、まだ白紙のままやし。

しびれを切らせてはてなに、「どないなっとんねん!」とメールを送ったものの、何の音沙汰もなし。まあ、ブログが書けないほどの重傷ではないけれど、この吸い込まれるような白紙のスペースがなんだか落ち着かない・・・。

★2018/3/15追加

staff.hatenablog.com

ようやく不具合が直ったようです。これで安心して常時SSL化ができますね~。