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

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

http://babylink.herokuapp.com/

babylink.herokuapp.com

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

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

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

Fire タブレット 8GB、ブラック

Amazon

7インチのIPSディスプレイ搭載の高コスパのタブレット

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

.babylink-box {
    border: medium double #ccc;
    border-radius: 5px;
    margin-bottom: 1em;
    margin-left: 5px !important;
    margin-right: 5px !important;
    padding: 15px 15px 20px;
}

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

BabyLinkのSSL化について

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

広告主張が控え目なAmazonアソシエイトリンク作成ツール「BabyLink」を作ってみた

Amazon商品紹介リンクを作るためのWEBツールを作ってみました。BabyLink ： ちっちゃなAmazonアソシエ...

nelog.jp

2015-12-18 12:19

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

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

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

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

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

HTTPS をランキング シグナルに使用します

Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報

webmaster-ja.googleblog.com

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

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

WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）

エックスサーバーが独自SSLを無料かつ無制限で利用できるようになりました。この、エックスサーバーの「ユーザーにどんどん利便性...

nelog.jp

2022-05-06 23:34

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

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

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

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

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

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

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

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

Herokuツールのインストール

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

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

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

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

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

$ heroku login
Enter your Heroku credentials.
Email: メールアドレス
Password (typing will be hidden):パスワード

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

Logged in as メールアドレス

Heroku上のアプリ一覧の取得

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

$ heroku apps
=== メールアドレス Apps
babylink
guarded-forest-XXXX
obscure-citadel-XXXX
sample-app-XXXX

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

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

heroku git:clone -a アプリ名

動作例はこんな感じ。

$ heroku git:clone -a babylink
Cloning into 'babylink'...
remote: Counting objects: 255, done.
remote: Compressing objects: 100% (192/192), done.
Rremote: Total 255 (delta 105), reused 134 (delta 44)
Receiving objects: 100% (255/255), 306.45 KiB | 199.00 KiB/s, done.
Resolving deltas: 100% (105/105), done.
Checking connectivity... done.

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

ソースコードの変更

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

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

$ git commit -m "fix Amazon img url"

Herokuにデプロイ

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

$git push heroku master

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

参考 Heroku環境構築メモ – Qiita

まとめ

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

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

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

サイト BabyLink