Amazonアフェリエイトリンクツールを公開してからしばらく時間が経ちました。（３ヶ月以上）
実際に自分が使ってみて、もうちょっとこんな機能欲しいとか、ココ使いづらいな〜という点がいくつか見えてきたんですよね。
その中で一番早急な要望が、「styleタグの除外」だったので、今回はその対応をしてみたいと思います。
何故stykeタグを除外するのか？
Amazonのアフェリエイトリンクは、ブログやWebページなどに記載するのがほとんどだと思います。
商品紹介をするページで１ページに１つの商品、１つのリンクだけ表示したい場合は、もともとの仕様のまま表示されたタグをそのまま貼り付ければいいのですが、
１ページ内に複数のアフェリエイトリンクバナーを表示したい場合に、同じstyleタグを何度も挿入することになってしまいます。
そもそも、ほぼ固定のスタイルタグなので、ブログシステムのカスタマイズなどで登録できる場合は、そこにセットしておけば、毎回コピペする必要も無くなるというスタイルシートの扱いです。
そこで、コピーするタグの中に書かれているstyleタグを除外する機能が必要になったワケです。
今回やったこと
タグ表示をする欄の上に、チェックボックスを追加しました。
デフォルトでは、チェックが入っている状態ですが、チェックを外すと、アフェリエイトリンクタグを生成した時に、styleタグが入っていない状態のタグが表示されます。
※表示した後でも、チェックボックスをクリックするたびに、styleタグが現れたり除外されたりする様にしています。
技術ポイント
今回のような仕様追加をする時に、個人的に一番気にする点としては、
下位互換をちゃんと保つようにするということと、
ソースコードもまるっと書き直さないようにするという点です。
下位互換を保つようにするのは、大きな機能変更等の場合には、担保できない場合もありますが、
これまでこのツールを使っている人が使えなくなるという事が回避できればという最低限のルールです。
そして、ソースコードをまるっと書き直さないというのは、プログラミングコードの追加開発をするたびにコードが汚くなっていくと、
その後、そのツールを回収するのが億劫になってしまい、ツール自体が改修されにくくなってしまう、要するに自分のモチベーションを維持しやすくするポイントでもあります。
この辺が意識できて開発ができるようになると、プログラミングがもっともっと楽しくなるんですが、同じチームでプログラムをする場合において、この感覚が同じでないとしんどくなるので、チーム開発時には意識する事をオススメしますね。
プログラミングポイント
今回改修した内容を事細かく解説も踏まえて書いておきます。
src/index.html
上記の画像のように、チェックボックスと、それに該当する文言を追加。
<label class="except-style"><input type="checkbox" name="except-style" checked/>style tag (チェックするとスタイルタグを除外します)</label>
さほど難しくはないコードですが、labelタグとチェックボックスのinputタグのname値ぐらいを、注意するぐらいですね。
src/css/main.css
HTMLを追加したら、同時にcssも更新です。見た目は重要ですからね。
.except-style{
cursor:pointer;
font-size:0.8em;
display:inline-flex;
align-items:center;
margin:5px 0;
}
.except-style [type="checkbox"]{
margin-right:10px;
}
src/js/element.js
要素を取得しやすいように以下を追加
static get elm_exceptStyle(){
return document.querySelector(`label.except-style input[type="checkbox"]`)
}
src/js/code.js
タグの表示をする箇所に、styleタグの表示、非表示の処理を追加しました。
# 以前のコード
set_code(){
const html = new Convert(this.template).double_bracket(Data.datas)
Element.elm_source.value = html
}
# 書き直したコード
set_code(){
const html = new Convert(this.template).double_bracket(Data.datas)
Data.source = html
Element.elm_source.value = Code.except_style(html)
}
static except_style(html){
if(!html){return html}
switch(Element.elm_exceptStyle.checked){
case true:
return html
case false:
return html.replace(/<style.*?>[\s\S]*?<\/style>/gim, "")
}
}
src/js/event.js
チェックボックスをクリックした時に、柔軟に対応できるようにイベント処理をまとめたファイルに追記
set_event(){
...
if(Element.elm_exceptStyle){
Element.elm_exceptStyle.addEventListener("change", this.set_except_style.bind(this))
}
}
set_except_style(e){
if(!Data.source){return}
Element.elm_source.value = Code.except_style(Data.source)
}
こだわりポイント
上記のプログラムの中で、styleタグをぶっこ抜くのに、Javascriptのreplace()を使用しました。
code.jsの以下の箇所ですね。
return html.replace(/<style.*?>[\s\S]*?<\/style>/gim, "")
普通に考えると、
return html.replace(/<style.*?>.*?<\/style>/gim, "")
のように .（ドット）でいいところを [\s\S]という記述にしないとHTMLのstyleタグがマッチしませんでした。
これは、改行を含む文字列の扱いのためこうなっているのだそうです。
参考:
JavaScript の正規表現で、改行も含めた全ての文字列マッチがうまくいかない
でも、この設定のお陰で無事に機能を搭載することができました。
ちなみに、RegExpを使って搭載したい場合は次のように書きます。
const reg = new RegExp(`<style.*?>[\\s\\S]*?<\/style>`, "gim")
return html.replace(reg, "")
わかります？\s\Sを、\\s\\Sにしないと行けないんですね。
これ結構ハマりんぐポイントなので、お気をつけて！
あとがき
こうしたツールを作るたびに思うんですが、
自分で使うツールを使って、それを使い続けるということが、他の人が使う時の気持ちが体感できるエンジニアになれる一番いい方法だと思います。
実際に自分でプログラミングして、ツールを作っても、自分ではまるでそのツールは使わないタイプのエンジニアは、
心のこもったツールを作るレベルに到達できない可能性が高いですからね。
というわけで、心のこもった、Amazonアフェリエイトリンク、無料で使えるので存分にお使いください。
Github
https://github.com/yugeta/amazon_affiliate_link_maker
