cheese

takimura official blog

はてなブログのHTTPS対応で混在コンテンツエラーに遭ったので対処しました

f:id:findcafe:20180331132220p:plain
ようやく私のアカウントもはてなブログHTTPS配信に対応したので有効にしてみました。HTTPS配信を有効にすることにより、通信の暗号化を行うことができます。

HTTPS配信の利用可否の確認方法


まず確認したいはてなブログのアカウントにログインします。

次に、

ダッシュボード -> 確認したいブログを選択 -> 
設定 -> 詳細設定 の中にあるHTTPS配信 ->
HTTPS配信の状況を確認する

以上の手順で確認してください。

f:id:findcafe:20180331132312p:plain
HTTPS配信を有効にしてみましたが、「この接続は安全ではありません」と表示されてしまいました。

この接続は安全ではありませんと表示されてしまった場合の対処


httpsのサイト内にhttpsではないhttpのコンテンツが含まれている場合に表示されます。

(httpは従来のURIスキームで、httpsは暗号化通信が有効になっている場合のURIスキームになります。)

HTTPSとは

  • Hypertext Transfer Protocol Securityの略 Webサーバとクライアント(Webブラウザなど)の間で使われるHTTPというプロトコルSSL/TLSによるデータ暗号機能を追加したもの。 サーバ/クライアント間の通信を暗号化し、秘匿すべきデータ(クレジットカード情報な.. 続きを読む
 

これを混在コンテンツと言い、Firefoxでは鍵アイコンに黄色の警告アイコンが、Chromeの最新開発版では赤色で「保護されていません」と表示されるようになっています。またMicrosoft Edgeではアドレスバーの右側に専用のアイコンが表示されるようになっています。

以下、Firefoxを用いた確認方法になります。Chrome及びEdgeでも開発者ツールを利用して同様に行うことができます。

1.問題の発生しているサイトを開いた状態にします。

2.F12キーを押して開発ツールを開きます。

3.以下の画像のようにに開発ツールが表示されたら、上のインスペクター,コンソール... の中にある「ネットワーク」を選びます。

f:id:findcafe:20180331133826p:plain


4.以上の画像の右上のように、検索欄に“http://”と入力してみてください。httpで読み込まれているコンテンツを絞り込むことができます。

f:id:findcafe:20180331135040p:plain
(該当したコンテンツを選択することにより、画像のプレビュー及び詳細を確認できます。)


5.画像では「search.png」がリストアップされました。開発ツールをから1.で表示したサイトに戻ります。

6.サイトを開いた状態で開発ツールを利用できる状態にして、左上のマウスカーソルを重ねると「ページから要素を選択します」と表示されるボタンをクリックします。

f:id:findcafe:20180331134949p:plain


7.要素選択モードになるので、マウスを使って問題のある画像と思われるものを探し、クリックして選択します。


8.開発ツールの画面にその要素のCSSルールが表示されます。httpsではなくhttpになっている部分を確認してください。

.hatena-module-search-box .search-module-button {
    background: url(http://blog.hatena.ne.jp/images/theme/search.png);
}

 ▲httpになっている例。HTTPS配信が有効なサイトにhttp://で始まるコンテンツを読み込むようになっていると混在コンテンツエラーの原因になります。

Javascript等が原因の場合は、利用しているはてなブログのテーマの製作者等に直接ご連絡をして対応を依頼したり、はてなブログhttps対応をしている他のテーマに切り替えたりしてください。

9.はてなブログのカスタムCSSを以下のように編集します。

例1 HTTP、HTTPSどちらでも対応できるようにする (http:を削除)
.hatena-module-search-box .search-module-button {
    background: url(//blog.hatena.ne.jp/images/theme/search.png);
}
例2 HTTPSを指定して読み込むようにする (httpの後にsを追加する)
.hatena-module-search-box .search-module-button {
    background: url(https://blog.hatena.ne.jp/images/theme/search.png);
}

読み込んでいるファイルがhttpでしか読み込めなかった場合は、httpsに対応した別のサーバーにアップロードしてそこを参照するようにしてください。

もしこの手順を行ってもhttpが読み込まれる場合は、;の前に!importantを入れてみてください。

 

f:id:findcafe:20180331140423p:plain
カスタムCSSを保存したら、再度ブログを表示して、「安全な接続」になっていることを確認します。

 

以上で、混在コンテンツの問題は解決します。個別の記事等で繰り返し問題が起こる場合は、記事の中に混在コンテンツが含まれている可能性がありますので、開発ツールでそれぞれ確認をしてください。

では、takimuraでした。

悪質な通販スパムの台頭について、DuckDuckGoのすすめ

Google検索で調べ物をしていると、海外ドメインと思われるが日本語でテキストが書かれている通販サイトのようなものが出てくるようになりました。キュレーションサイトは以前から問題になっていますが、こちらはまだあまり大きく問題にはされていないようです。

SNS上等ではすでに問題があるとして迷惑しているというつぶやきが目立っていますが、Googleからは何の対応をするという情報もありません。もしかするともうGoogle検索全体が、使えない検索エンジンになりつつあるのかもしれません。

私としてもGoogle Personal Blocklistに設定しているリストを公開して、迷惑な結果に出てこないようにしています。

https://coron.tech/db/google-personal-blocklist/


しかしながら、Yahoo!でもGoogle検索を利用していますし、bingはインデックスの速度が遅いというのが難点です。

 

そこで最近使ってみているのが、DuckDuckGoという検索エンジンです。Web業界をウォッチしている方であれば一度は目にしたことはあるのではないでしょうか。DuckDuckGoは、プライバシー保護を重点的にアピールしていますが、既に日本の検索機能においてもかなり使えるようになってきたのではないかと思っております。

f:id:findcafe:20180321085433p:plain

DuckDuckGo 

https://duckduckgo.com/


DuckDuckGoにアクセスすると、このようなGoogleっぽいシンプルな画面が表示されます。使い方は簡単で、そのまま検索キーワードを入力するだけです。直接画像検索や動画検索等にはアクセスできませんが、1クリック増えるだけなのでそんなに困ることもないでしょう。

Googleでおなじみの計算機能も使えますし、地図の表示も好きなサービスから選択することができます。使ってみた感じでは、検索結果の順番も比較的良好なのではないかと思いました。

f:id:findcafe:20180321090119p:plain

DuckDuckGoの検索結果ページ。Googleとほぼ変わらないように利用できます。

f:id:findcafe:20180321090319p:plain

Googleにとってはライバルなのか、Chromeでは「その他の検索エンジン」扱いにされてしまっている。右側のアイコンからデフォルトに設定可能。

一度Google検索を離れて、DuckDuckGoを使ってみませんか?まだ未熟だとは思いますが、Google検索が使い物にならなくなってきたので私は使うようにしています。


あとは日付を詳細に指定して検索を絞り込める機能が使えるようになれば良いのですが...。

では、takimuraでした。

最近のWebサイトについて思うこと

昨今のWebサイトは、表示した後にもそのまま表示し続けると一定間隔でJavascriptが動き、データを更新するタイプのものを散見します。Twitter等のSNSサイトに多く見られるものですが、これはブラウザを重くしてしまい、ユーザビリティが良いとはとても言える状態ではありません。

現在、Webサイトにおいては以前とかなり変わってきてるところがあり、Webサイトといってもほぼアプリケーションソフトウェアのような挙動をするものも増えてきています。

そして私もWebサイトを制作している側の人間なのですが、Webサイトを制作する上では以下のことに注意して制作するようにしています。

 

  • デザインしすぎないこと
  • 内容が高さ上から600px以内に始まるようにすること(トップページは除く)
  • 広告を上部には表示しないこと(せっかくデザインしたサイトが台無しになります)
  • Javascriptは最小限に抑えること
  • 3年前のデバイスでも見られるようにすること(これ結構重要。表示があまりに遅かったり、動作があまりに重かったりするとサイトを見る前に去ってしまいます)


以上のことを、日々Webサイトを制作している方々に実践していただきたいと考えております。Chrome等のブラウザ側が重くなってきているという事情もありますが、より快適なインターネット環境を作り出すためには以上のことは必要不可欠だと思っております。

では、takimuraでした。

cheese start

takimura公式ブログcheeseがスタートします。
現在までブログを数多くやってきましたが、このブログでは個人的に思っていること、やってみたこと等を綴っていきたいと考えております。

2018年より本格運用開始予定です。乞うご期待!