プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

はてなブログを https に対応しました (2/2)

はてなブログを https に対応させた話の続きです。

blog.mori-soft.com

Mixed Contents の修正

HTTPS Checker で Mixed Contest ありと指摘された ページを順次みていき、修正していきます。 自分のサイトの場合は、次のような点について修正しました。

はてなfotolifeの画像

幸い、はてなブログを使い始めたのが最近(2016/8頃、移行の顛末はこちら)だったためか、特に記事の更新をせずとも、https になっていました。 はてなブログへ移行時にインポートした記事も同様です。

これは助かりましたね。

埋め込みリンクの修正

他のサイトや自分の過去の記事にリンクを貼る際に、リンク先が http でかつ埋め込みでリンクを貼っていると、埋め込みが iframe のため、 Actice Mixed Contents として扱われます。

これは、地道に https に直していきます。この時、リンク先のサイトが https に対応していない場合は、URLが https のままとなるのは仕方ないので、埋め込みではなく『タイトル』等のリンク方法に変更します。

Tex 記法

テストサイトでは Tex記法 を含む記事は Passive Mixed Contents となっていました。 で、この Tex 記法を含む記事は、編集画面で更新をしてやると、Mixed Contents が解消されていました。

とはいうものの、テストサイトで、 Mixed Contents となっていたのですが、https 化した本ブログで記事が Mixed Contents か否かを確認する前に、 Tex 記法を含む記事を更新してしまったので、何もしない状態で Mixed Contents だったのかはいまとなってはわからないです。

まあ、少なくとも、記事の更新すれば問題なくなるとはいえるかもしれません。

にしても、確認忘れ、しまったなー。

dropxbox

この部分は、直接的には Mixed Contents とは無関係なのですが、一緒に作業したので備忘録として残しておきます。

はてなブログに移行した際の設定で、画像以外のファイルは、 dropbox から配信するようにしていました(こちらの記事を参照)。

今回、Mixed Contents の確認作業でたまたま気づいたのですが、 dropbox ってファイルをホスティングして公開する機能を廃止していたようです。

単にリンク先からファイルをダウンロードするだけなら今でも使えますが、html や javascript のコンテンツとして扱おうとするとできなくなっていました。

なので、これらのファイルをホストする場所を変更します。 どこがいいかな?と考えたのですが、いろいろと面倒がなさそうだということで、 S3 を使うことにします。

ということで、dropbox で公開していたコンテンツを S3 に移行します。 併せて、URL を dropbox のものから S3 のものに変更します。

なお、 S3 側の公開方法は ウェブサイトホスティングを使うのではなく、ファイルごとにパブリックアクセスを行うという方法をとることにします。

qiita.com

というのも、ウェブサイトホスティングにすると、CloudFront 経由の設定にしないと https でアクセスできなくなるためです。 ホストしているコンテンツもそんなに多くないので、そこまでしなくても、というのが本音です。

OpenLayers

本ブログ中で OpenLayers のサンプルについて書いたものがいくつかありました。 で、記事に埋め込む形で、実際に動作するサンプルを載せていました。 記事作成当時は、ライブラリ自体も http での配信だったので当然記事中でも https でURLを指定しています。

まずはこれを https で取得する必要があります。単純に http -> https でいけるかと思いきやダメでした。困ったなと思って調べていると、CDNで配信していることがわかりました。

ちょうど、記事作成当時、使っていた 2.13.1が配信されていたので、

cdnjs.com

こちらの一覧から、必要なライブラリのURLを取得して、それを指定します。

また、サンプルの js ファイルを dropbox から配信していたこともあり、前節のとおり、 https 化以前から動いていなかったようです。 そこで、必要な js ファイルを S3 から取得するように変更します。

最後に、タイルサーバーを指定します。OpenLayers (少なくともこのバージョン)では何も指定がなければ、デフォルトの openstreetmap.org のサーバーを http で使うようです。

gis.stackexchange.com

これについて、上記記事にかかれているように、

    map.addLayer(new OpenLayers.Layer.OSM(
            "OpenStreetMap", 
            // Official OSM tileset as protocol-independent URLs
            [
                '//a.tile.openstreetmap.org/${z}/${x}/${y}.png',
                '//b.tile.openstreetmap.org/${z}/${x}/${y}.png',
                '//c.tile.openstreetmap.org/${z}/${x}/${y}.png'
            ],
            null)
        );

のように、タイルサーバーを指定するようにしました。

その他

Mixed Contents とは少し違うのですが、 https 化の際に気になった点を書いておきます。

Slideshare

Slideshare については、CORS でエラーが出るようです。

とりあえず、対策はないようです。困りましたね。とりあえずは現状のままとしておきます。

はてなブログのログイン画面

こちらの記事に載っていたのですが、

atn.hateblo.jp

はてなブログのログイン画面って、ブラウザの横幅を小さくしていくと、アドレスバーに注意のアイコンがつき、『この接続は安全ではありません」が表示されるようになります。 手元のFirefoxで試してみたら、見事に再現しました。

f:id:junichim:20180802105850p:plain

f:id:junichim:20180802105901p:plain

こんなこともあるんですね。なかなか https 化は難しいようです。

さいごに

一応、これで Mixed Contents も解消したはずです。とはいうものの HTTPS Checker で漏れなくチェックできているかちょっとわかりません。現に、 OpenLayers 関係の記事でチェックから漏れているものがいくつかありました。まあ、あとは問題を見つけ次第適宜修正するというのが良いのかな。

とりあえず一段落です。

はてなブログを https に対応しました (1/2)

昨今、サイトを https にしないとダメなようで、はてなブログも https に対応してくれました。

このブログも仕事の合間を縫って、 https 化してみたので、作業メモを残しておきます。

準備

どういう問題が起こりそうか、事前に何をしておけばよいのか調べておきます。

このブログの場合に関係しそうなところとしては、

  • はてなfotolife の画像貼り付け
  • Amazon のアフィリエイトリンク

といったところになりそうです。 はてなfotolifeが記事の変更なしでいいけど、更新しないといけないのがちょっとやっかいそうです。

まずは、下記の記事を参考にテスト用ブログを立ち上げて、そちらでいろいろと調べてみようと思います。

バックアップ

まず、テスト用ブログ構築とバックアップを兼ねて、既存記事をエクスポートしておきます。 エクスポートは、はてなブログの管理画面から『設定』->『詳細設定』とすすむと、下のほうに『エクスポート』とあるので、こちらをクリックします。

f:id:junichim:20180802090013p:plain

すると、

f:id:junichim:20180802090203p:plain

のような画面が表示されるので、『(ブログ名)をエクスポートする』ボタンを押せば、OKです。

問題なくエクスポート作業が完了すると、

f:id:junichim:20180802090250p:plain

のような画面が表示されるので、『ダウンロード』ボタンを押して、データを取得しておきます。

テストブログ構築

はてなブログの場合、1アカウントについて10個までブログを作れます(PROの場合です)。無料版だと3つですね。

なので、テスト用のブログを立ち上げて、そちらでいろいろとテストしておきます。『ダッシュボード』から『新しいブログを作成』を選択し、必要事項を入力すれば完了です。

f:id:junichim:20180802092220p:plain

ブログを立ち上げたら、設定を本来のブログと合わせておきます。主なものとしては、

  • テーマの設定およびカスタマイズの内容
  • 編集モード
  • キーワード自動リンク

あたりでしょうか。 なお、現時点(2018/8/1)では、新規にブログを立ち上げると、いやでも https が有効になっています。なので、httpsに関する設定は特に必要ありません。

準備ができたら、さきほどバックアップした記事をインポートします。なお、インポート時の注意点は、

  • キーワード自動リンクの設定をオフにする前に、記事をインポートすると、あとから設定を変更しても反映されません。
  • エクスポート前の編集モードがMarkdownであっても、インポート後は設定によらず、すべて『見たまま』モードになります。

といったものがあります。特に2つ目は注意が必要ですね。

今回の作業中も、2つ目の編集モードが変わっていることに気づかず、記事中で Markdown 記法のものを検索してもひっかからないということがありました。

なお、編集モードが変わってしまうことを考えると、この機能はあくまでも簡易的なバックアップとしての利用にとどめておいたほうが良さそうです。

(参考)

混在コンテンツのチェック

さて、準備が出来たら、早速混在コンテンツのチェックです。 混在コンテンツのチェックには、Chromeの開発者モードを使う、などというのがありますが、記事数が多いとやってられません。

ということで、ツールの登場です。下記の説明でもツールが2つほど紹介されています。

このうち、オンラインで使える

www.jitbit.com

は、残念ながらページ数の上限が200ということで、このブログですら記事数が200を超えるので、あきらめました。

なので、今回は HTTPS Checker を使うことにします。

httpschecker.net

HTTPS Checker については下記の記事などを参考にしました。

HTTPS Checker のインストール

サイトからツールをダウンロードして、exeファイルをダブルクリックしてインストールします。 問題なくインストールが完了すれば、下記のような画面が表示されて、メールアドレスの登録を求められます。

f:id:junichim:20180802092453p:plain

メールアドレス他、必要事項を入力すれば、起動します。

HTTPS Checker の実行

HTTPS Checker を起動すると、下記のようなURL入力画面が表示されます。

f:id:junichim:20180802092904p:plain

さきほど作ったテスト用のブログのURLを入力して、Modeとして Mixed Contents Only を選択します。 Run ボタンを押したら、チェック開始です。

無事にチェックが完了するとこんな感じの画面が出て、どのURLに問題があるか教えてくれます。

f:id:junichim:20180802093206p:plain

f:id:junichim:20180802094141p:plain

実は、このブログ、現時点で記事数が211ありました。で、HTTPS Checker の上限が500ページなので、大丈夫かな?と思っていたのですが、ブログって、ひとつの記事に対して、投稿年月別やタグ別のリンクも生成するので、全然足りませんでした。

なので、エクスポートしたファイルが幸いテキストファイルだったので、これを適当に2分割します。で、テスト用ブログを2つ作り、それぞれに対して分割した記事を割り当てます。で、 HTTPS Checker を2回実行する形でチェックしました。 (結局、両方の合計で 515ページでした。あと少しで500ページに収まったのになー。惜しかったなー)

https 化

HTTPS Checker で Mixed Contest ありと指摘された ページを修正していきます。 修正の手順はいろいろとあると思いますが、はてなブログの場合、インポートした記事は編集モードが見たままモードになっており、ちょっと作業がやりにくいと感じました。

なので、ざっと指摘されたページの内容を見て確認したうえで、対象記事数もそんなに多くなかったので、最悪表示されなくても影響は少ないと考え、先にブログ本体を https 化して、そのうえで終生作業を行うことにしました。修正対象記事のURLは、さきほどの HTTPS Checker を見れば分かりますしね。

既存ブログの https 化は非常に簡単で、『設定』->『詳細設定』を選択し、

f:id:junichim:20180802093706p:plain

『HTTPS配信』の『HTTPS配信の状況を確認する』をクリックすると

f:id:junichim:20180802094319p:plain

のような確認画面が表示されるので、『変更する』をクリックすると、https が有効になります。

つづく

長くなってきたので、実際の Mixed Contents の修正については下記にまとめます。

blog.mori-soft.com

第7回 CoderDojo 伊勢へ参加してきました

子供向けのプログラミング(クラブ)活動である CoderDojo が地元でもありまして、その名も『CoderDojo伊勢』です。

その第7回 CoderDojo 伊勢 にメンター(兼写真係)として参加してきました。

coderdojo-ise.connpass.com

今回は、毎度おなじみの伊勢市福祉健康センターではなく、コムデックさんという市内のIT企業さんの会議室をお借りました。

www.comdec.jp

で、ご厚意におこたえするのもかねて、まずはコムデックさんのご紹介。

看板

f:id:junichim:20180730212325j:plain

外観

f:id:junichim:20180730212339j:plain

エントランス

f:id:junichim:20180730212354j:plain

会議室

f:id:junichim:20180730212415j:plain

f:id:junichim:20180730212430j:plain

いやー、伊勢にこんなオシャレなオフィスを持った会社があるとは正直驚きです(自分が知らないだけだったら、すいません)。フリーランスやめるつもりないので残念ながら就職できないけど、ここでレンタルスペースとかやってくれたら借りるのになー。

CoderDojo伊勢

まずは代表の挨拶。

f:id:junichim:20180730212445j:plain

会場をお貸しいただいたコムデックさんの社長さんからも一言。

f:id:junichim:20180730212458j:plain

続いて、CoderDojoの説明に入ります。今回は、司会を大学生のメンターの方が担当されました。教育学部というのもあるのかな?話すのがうまいですねー。

あとは、ニンジャの皆さん思い思いのものを作っていきます。

様子その1。

f:id:junichim:20180730212952j:plain

様子その2。

f:id:junichim:20180730213732j:plain

microbit 組は自分で機材を持ち込んで参加。

1時間半程度頑張って作ったら、希望者のニンジャのみですが発表です。

f:id:junichim:20180730213408j:plain

f:id:junichim:20180730213351j:plain

女の子のニンジャの作品は、絵柄がかわいらしいのが多いですね。

タブレットで作ったのを見ようと群がるニンジャたち

f:id:junichim:20180730213129j:plain

他にも発表があったのですが、写真うまく取れてませんでした。すいません。 特に、microbit の発表は動きがあるので、写真難しいですね。精進します。

発表するのが楽しかったという声があったのが、個人的にはうれしかったところです。

さいごに

今年、CoderDoj伊勢はプログラミングをする機会を増やすためにも、隔月開催を目指しております。運営スタッフ的にも財政的にもいろいろと不足しております。 もし、このような活動にご興味がある・協力してもいいよ!という方がいらっしゃいましたら、ぜひ下記リンク先よりご連絡をください。

coderdojo-ise.jimdo.com

さて、次回のCoderDojo伊勢は 9月9日(日)に開催予定です!

coderdojo-ise.connpass.com

もうメンターの募集も始まってますよ!