Amazonの商品紹介ブログパーツ「BabyLink」をSSL対応に仕様変更

Amazon商品紹介ブログパーツのBabyLinkをSSL対応にしました。

とても小さなアソシエイトリンクを作成するツールです。ブログの文中に商品を紹介したいときに効果的かつシンプル。

変更点は、imgのsrc属性で使用するAmazon商品の画像のURLを「ecx.images-amazon.com」で始まるものから「https://images-fe.ssl-images-amazon.com」に変更しただけです。

変更元のURLは、SSL対応対象URLで置換されてしまうため画像表示にしています。

これにより、ブラウザなどで、以下のような「SSL混在コンテンツ」警告みたいなものが出ることはなくたったと思います。

Firefoxの混在コンテンツエラーダイアログ

作成される商品紹介パーツは以下のようになります。

上記の、商品紹介パーツは以下のようなスタイルが適用されています。

本来は、以下のようなかなりシンプルな表示になります。

fireタブレットのBabyLink出力タグ

スポンサーリンク
レクタングル(大)広告

BabyLinkのSSL化について

ちょうど3年前(2014年2月)の2月にBabyLinkというWEBツールを作りました。

広告主張が控え目なAmazonアソシエイトリンク作成ツール「BabyLink」を作ってみた
Amazon商品紹介リンクを作るためのWEBツールを作ってみました。 BabyLink : ちっちゃなAmazonアソシエイトリンクの作成...

このBabyLinkは、「あまりスペースをとらずクレジットもないシンプルなAmazon商品紹介パーツ」を作りたいと、自分用に開発したものを公開したものです。

ただ、3年経ってアクセスなどを見てみると、思いの外、利用者が多くなっているのに驚いています。

で、このツールを作成した3年前は、SSLとかを気にしている人は、ほとんどが「重要な情報を扱うサイトを運営(作成)している人」とかだったような気がします。

実際に僕も、SSLの事とかはほとんど気にしないで、AmazonのAPIが吐き出すURLをそのまま利用していました。

ただ、その後Googleが「HTTPSを検索ランキングのシグナルにする」と発表。

セキュリティは Google の最優先事項です。Google は、 デフォルトで強力な HTTPS 暗号化を導入する など、業界でも最先端のセキュリティを Google サービスに導入することに力を注いでいます。これにより、たとえば Google 検索、Gmail、Googl...

その後は、SSLに対応するサイトも増え、現在は無料でSSL利用に対応しているレンタルサーバも増えています。

僕も、自分のサブサイトをSSL化した時の手順を記した、以下のような記事も書きました。

WordpressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)
エックスサーバーが独自SSLを無料かつ無制限で利用できるようになりました。 この、エックスサーバーの「ユーザーにどんどん利便性を提供してい...

自分のサイトSSL化すると、ブラウザにしっかりと鍵マークが出るように対応したくなるものです。

Chromeの保護された通信表示

SSLに対応していないアフィリエイトタグや、商品紹介タグがコンテンツ内に含まれる場合は、「SSL混在コンテンツ」として表示されてしまいます。

Firefoxの混在コンテンツ商事

実際に、以前のBabyLinkのタグを使用した場合でも、混在コンテンツになっていました。

僕も、これを「直したいな」とは思っていました。けれど、ソースコードは紛失してしまっているし、3年前に使ったっきり、開発環境のRuby on Railsは触ってもいません。

なので、僕の揮発性の高い頭からBabyLinkに関することは、ほとんど蒸発していってしまっていたので、ずっと放置していました。

けれど先日、「BabyLinkの置き場所のherokuにはソースコードがあるわけだから取り寄せて修正すればいいじゃん」ということで、何とか試行錯誤したら、何とかかんとかできました。

Herokuからコードを取り寄せて修正してデプロイした手順

Cloud Application Platform Heroku

僕はかなり忘れっぽいので、以下は「もし次回修正が必要になった時」用の手順を備忘録がてら紹介です。

Herokuツールのインストール

まずは、パソコンにHerokuツールである「Heroku Toolbelt」がインストールされていない場合は、ダウンロードしてインストールします。

僕は、Windowsの64bit環境なので64bit版をダウンロードしました。

Download and run the Windows installer 32-bit 64-bit.

インストール時には、Gitもインストールされます。

Herokuツールのインストール

既にGitがインストールされている場合は、チェックを外してください。

コマンドからHerokuにログイン

コマンドライン上でHerokuにログイン

まずは、heroku loginコマンドから、Herokuにログインするためのログイン情報(メールアドレスとパスワード)を入力してコマンド上でログインします。

うまくいったら、以下のようなメッセージが表示されます。

Heroku上のアプリ一覧の取得

Heroku内のアプリを確認

「heroku apps」と入力すると以下のようにアプリ一覧を取得することができます。

ソースコードを引っ張ってくる

Herokuからアプリのクローンを取得する

以下のコマンドで、フォルダ内にソースコードのクローンを取得することができます。

動作例はこんな感じ。

アプリのフォルダが作成されるので、cdでプロジェクトフォルダに移動しておきます。

BabyLinkのプロジェクトフォルダに移動

ソースコードの変更

あとは、ソースコードをエディターなどで開いて、コードの変更を行います。

コード変更が終わったら、Gitでコミットしておきます。

Herokuにデプロイ

最後に、変更プッシュしてHerokuにデプロイします。

僕はこの方法で、何とか修正することができました。

参考 Heroku環境構築メモ – Qiita

ただ、pushするには、Heroku側に公開鍵登録がしてある必要があると思います。
鍵登録方法については、以下などを参照してください。
参考 Managing Your SSH Keys | Heroku Dev Center

公開鍵は、Herokuの「Account settings」からも確認することができます。

Herokuのオプションメニュー

「SSH Keys」をも空も公開鍵を設定することができます。
HerokuでSSH鍵を登録

まとめ

こんな感じで、何とかBabyLinkをSSL対応してアップデートすることはできました。

ただ、今回はコード一行の修正だったから、できたようなもので、何十行も修正する必要があるような大きな変更は今後もできないと思います。というのも、現在ローカルのRuby on Rails開発環境もなくて、動作確認もまともにできないので。開発方法もかなり忘れてしまっているし。

ということで、BabyLinkは今後簡単な修正なら、できるかもしれませんが大きな修正はしないと思います。なので大きな機能追加はなく、今後も以前と同様の仕様になるかと思います。

サイト BabyLink

『Amazonの商品紹介ブログパーツ「BabyLink」をSSL対応に仕様変更』へのコメント

  1. 名前:みき 投稿日:2017/02/17(金) 23:11:54 ID:11e49d948

    多分おかしなところを発見したのでご報告です

    変更点は、imgのsrc属性で使用するAmazon商品の画像のURLを「https://images-fe.ssl-images-amazon.com」で始まるものから「https://images-fe.ssl-images-amazon.com」に変更しただけです。

    最初のhttps://images-fe.ssl-images-amazon.comはhttp://images-fe.ssl-images-amazon.comではないでしょうか?

    http://
    https://

    この後に混在コンテンツと書いてあったので…

  2. わいひら 名前:わいひら 投稿日:2017/02/18(土) 08:03:19 ID:16ae242c7

    本当だ。それじゃ全然変わってないじゃん!てことになりますよね・笑
    どうやら、当サイトをSSL対応させたときに、以下の方法用いたので、表示時に置換されてしまったようです;
    WordPressサイトの内部リンクSSL対応(HTTPS化)をコードコピペでちょっと楽にする方法
    ここら辺は、プラグインで置換しても同様になるので、しょうがないのかも…(プラグインの場合は置換しても書き直してポストすればOK)。
    画像用いて修正をしておきました。
    教えていただき、ありがとうございます!

  3. 名前:みき 投稿日:2017/02/18(土) 10:54:07 ID:9bfb7906b

    そういうことだったのですね…

    対策を画像でやられるとは…
    思いつきませんでした